Feat:Create new project

packages/UI/package.json

@@ -11,6 +11,8 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@scribe/theia-utils": "0.0.1",
     "@svgr/webpack": "^8.1.0",
     "@tabler/icons-react": "^3.3.0",
@@ -30,7 +32,10 @@
     "npm-watch": "^0.13.0",
     "react-resizable-panels": "^2.0.19",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "@types/md5": "^2.3.5",
+    "md5": "^2.3.0",
+    "usfm-grammar": "^3.0.0"
   },
   "devDependencies": {
     "concurrently": "^8.2.2",

packages/UI/src/browser/widgets/ChapterWidget.tsx

@@ -0,0 +1,106 @@
+import * as React from "@theia/core/shared/react";
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from "@theia/core/shared/inversify";
+import { ReactWidget } from "@theia/core/lib/browser/widgets/react-widget";
+import {
+  AbstractViewContribution,
+  FrontendApplicationContribution,
+  FrontendApplication,
+} from "@theia/core/lib/browser";
+import { FrontendApplicationStateService } from "@theia/core/lib/browser/frontend-application-state";
+import { WorkspaceService } from "@theia/workspace/lib/browser";
+import DraftbodySection from "../../components/DraftbodySection";
+import Button from "../../components/Button";
+import { IconPlus, IconX } from "@tabler/icons-react";
+
+@injectable()
+export class ChapterWidget extends ReactWidget {
+  static readonly ID = "Chapter-page-widget";
+  static readonly LABER = "main-chapter";
+
+  @postConstruct()
+  protected init(): void {
+    this.doInit();
+  }
+
+  protected async doInit(): Promise<void> {
+    this.id = ChapterWidget.ID;
+    this.title.label = ChapterWidget.LABER;
+    this.title.caption = ChapterWidget.LABER;
+    this.title.closable = true;
+    this.update();
+  }
+
+  render(): React.ReactNode {
+    return (
+      <div>
+        <div className="flex justify-between">
+          <div className="flex">
+            <Button
+              label="NIV"
+              className="flex-row-reverse border-none rounded-none  dark:bg-gray-900  gap-3  text-[10px] flex item-center justify-content-center dark:text-gray-300 text-gray-600"
+            />
+            <Button
+              label="HEB"
+              className="flex-row-reverse border-none rounded-t-md rounded-b-none dark:bg-cyan-900 bg-cyan-300 text-cyan-500  gap-3  text-[10px] flex item-center justify-content-center dark:text-cyan-500 text-gray-600"
+              icon={<IconX size={14} stroke={2} strokeLinejoin="miter" />}
+            />
+            <Button
+              label="FNV-NT"
+              className="flex-row-reverse gap-3 rounded-none  border-none dark:bg-gray-900  text-[10px] flex item-center justify-content-center dark:text-gray-300 text-gray-600"
+            />
+            <Button
+              label="HPUX"
+              className="flex-row-reverse gap-3 rounded-none border-none dark:bg-gray-900  text-[10px] flex item-center justify-content-center dark:text-gray-300 text-gray-600"
+            />
+            <Button
+              label=""
+              className="flex-row-reverse gap-3 rounded-none border-none dark:bg-transparent   text-[10px] flex item-center justify-content-center dark:text-gray-300 text-gray-600"
+              icon={<IconPlus size={14} stroke={2} strokeLinejoin="miter" />}
+            />
+          </div>
+          <Button
+            label=""
+            className="flex-row-reverse gap-3 rounded-none border-none dark:bg-transparent   text-[10px] flex item-center justify-content-center dark:text-gray-300 text-gray-600"
+            icon={<IconX size={15} stroke={2} strokeLinejoin="miter" />}
+          />
+        </div>
+        <DraftbodySection />
+      </div>
+    );
+  }
+}
+
+@injectable()
+export class ChapterContribution
+  extends AbstractViewContribution<ChapterWidget>
+  implements FrontendApplicationContribution
+{
+  @inject(FrontendApplicationStateService)
+  protected readonly stateService: FrontendApplicationStateService;
+
+  @inject(WorkspaceService)
+  protected readonly workspaceService: WorkspaceService;
+
+  constructor() {
+    super({
+      widgetId: ChapterWidget.ID,
+      widgetName: ChapterWidget.LABER,
+      defaultWidgetOptions: {
+        area: "main",
+      },
+    });
+  }
+
+  async onStart(app: FrontendApplication): Promise<void> {
+    this.stateService.reachedState("ready").then(() => {
+      this.openView({
+        activate: true,
+        reveal: true,
+      });
+    });
+  }
+}