test(global): 🎉 make toolbar

make toolbar which is like viewers and toolbox

Ref #54

app/components/data/toolbar/HistoryTool.data.ts

@@ -0,0 +1,10 @@
+import { ToolbarData } from "./Toolbar.data";
+import ToolbarFactory from "../../../factory/Toolbar.factory";
+
+export class HistoryToolData extends ToolbarData{
+  constructor(){
+    super(
+      ToolbarFactory.ICONS.HISTORY
+    );
+  }
+}

app/components/data/toolbar/RequestForReviewTool.data.ts

@@ -0,0 +1,10 @@
+import { ToolbarData } from "./Toolbar.data";
+import ToolbarFactory from "../../../factory/Toolbar.factory";
+
+export class RequestForReviewToolData extends ToolbarData{
+  constructor(){
+    super(
+      ToolbarFactory.ICONS.REQUEST_FOR_REVIEW
+    );
+  }
+}

app/components/data/toolbar/SaveTool.data.ts

@@ -0,0 +1,10 @@
+import { ToolbarData } from "./Toolbar.data";
+import ToolbarFactory from "../../../factory/Toolbar.factory";
+
+export class SaveToolData extends ToolbarData{
+  constructor(){
+    super(
+      ToolbarFactory.ICONS.SAVE
+    );
+  }
+}

app/components/data/toolbar/Toolbar.data.ts

@@ -0,0 +1,16 @@
+import ToolbarFactory from "../../../factory/Toolbar.factory";
+
+export abstract class ToolbarData {
+  readonly toolbarIconTitle: typeof ToolbarFactory.ICONS[keyof typeof ToolbarFactory.ICONS];
+
+  constructor(
+    toolbarIconTitle: typeof ToolbarFactory.ICONS[keyof typeof ToolbarFactory.ICONS]
+  ) {
+    this.toolbarIconTitle = toolbarIconTitle;
+  }
+
+  getToolbarIconTitle(): string {
+    return this.toolbarIconTitle;
+  }
+
+}

app/components/toolbar/Toolbar.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { CoreIconButton, CoreIcon } from "@wrappid/core";
+
+import { ToolbarData } from "../data/toolbar/Toolbar.data";
+
+type ToolbarType<T extends ToolbarData> = {toolbarData: T};
+
+export default function Toolbar<T extends ToolbarData>(props: ToolbarType<T>) {
+  const { toolbarData } = props;
+
+  Object.setPrototypeOf(toolbarData, ToolbarData.prototype);
+
+  return (
+    <CoreIconButton>
+      <CoreIcon icon={toolbarData.getToolbarIconTitle()} />
+    </CoreIconButton>
+  );
+}

app/components/toolbar/ToolbarGroup.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { CoreTypographyBody1, CoreClasses } from "@wrappid/core";
+
+import Toolbar from "./Toolbar";
+import { ToolbarData } from "../data/toolbar/Toolbar.data";
+
+type ToolbarGroupType = { toolbarData: ToolbarData[] };
+
+export default function ToolbarGroup(props: ToolbarGroupType) {
+  const { toolbarData } = props;
+
+  return (
+    <>
+      {toolbarData && toolbarData.length > 0 ? (
+        toolbarData.map((eachToolbarData, index) => (
+          <Toolbar key={index} toolbarData={eachToolbarData} />
+        ))
+      ) : (
+        <CoreTypographyBody1 styleClasses={[CoreClasses.PADDING.PY5]}>
+          No toolbar data available.
+        </CoreTypographyBody1>
+      )}
+    </>
+  );
+}