Annotator composite component

src/components/Annotator/Annotator.tsx

@@ -1,23 +1,183 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import styled from "styled-components";
+import { Header } from "../Header";
+import { Toolbar } from "../Toolbar";
+import { Menu } from "../Menu";
+import { FabricJSCanvas, useFabricJSEditor } from "fabricjs-react";
 
 export type AnnotatorProps = {
   id?: string;
   primary?: boolean;
 };
 
-const StyledDiv = styled.div``;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  border: 2px solid black;
+  border-radius: 2px;
+  padding: 5px;
+`;
+
+const TopBar = styled.div`
+  height: "auto";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: black;
+`;
+
+const InnerWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const LeftBar = styled.div`
+  background-color: #444;
+  width: auto;
+  overflow: hidden;
+`;
+
+const RightBar = styled.div`
+  width: auto;
+  min-width: 250px;
+`;
+
+const InnerContent = styled.div`
+  flex: 1;
+  border: 1px solid #cbcbcb;
+  margin: 15px;
+`;
+
+const Annotator: React.FC<AnnotatorProps> = ({ id, primary }) => {
+  const ref = useRef(null);
+  const { editor, onReady } = useFabricJSEditor();
+
+  useEffect(() => {
+    if (!editor || !ref.current) {
+      return;
+    }
+    console.log("width", ref.current ? ref.current.offsetWidth : 0);
+    console.log("height", ref.current ? ref.current.offsetHeight : 0);
+
+    editor.canvas.setWidth(ref.current.offsetWidth);
+    editor.canvas.setHeight(ref.current.offsetHeight);
+  }, [ref, editor]);
 
-const Annotator: React.FC<AnnotatorProps> = ({ id, ...props }) => {
   return (
-    <StyledDiv id={id} role="annotator" {...props}>
-      <div>Header</div>
-      <div>
-        <div>Toolbar</div>
-        <div>CanvasContainer</div>
-        <div>Stack Menu</div>
-      </div>
-    </StyledDiv>
+    <Container id={id} role={"annotator"}>
+      <TopBar>
+        <Header
+          primary={primary}
+          imageInfo={{ width: 1920, height: 1080 }}
+          zoom={{ value: 10, action: (e) => console.log(e) }}
+          annotation={{ value: true, action: (e) => console.log(e) }}
+        />
+      </TopBar>
+      <InnerWrapper>
+        <LeftBar>
+          <Toolbar
+            primary={primary}
+            size="medium"
+            items={[
+              {
+                icon: "hand",
+                text: "Move",
+                onClick: () => console.log("Move"),
+              },
+              {
+                icon: "pointer",
+                text: "Pointer",
+                selected: true,
+                onClick: () => console.log("Pointer"),
+              },
+              {
+                icon: "rectangle",
+                text: "Annotate",
+                onClick: () => console.log("Annotate"),
+              },
+            ]}
+          />
+        </LeftBar>
+        <InnerContent ref={ref}>
+          <FabricJSCanvas className="sample-canvas" onReady={onReady} />
+        </InnerContent>
+        <RightBar>
+          <Menu
+            visible
+            primary={primary}
+            items={[
+              {
+                icon: "circle",
+                title: "Circle",
+                content: (
+                  <div>
+                    <p>It is a circle</p>
+                    <ul>
+                      <li>Circle 1</li>
+                      <li>Circle 2</li>
+                      <li>Circle 3</li>
+                    </ul>
+                    <button>Click me (circle)!</button>
+                  </div>
+                ),
+                disabled: false,
+              },
+              {
+                icon: "tags",
+                title: "Tags",
+                content: (
+                  <div>
+                    <p>It is a tag</p>
+                    <ul>
+                      <li>Tag 1</li>
+                      <li>Tag 2</li>
+                      <li>Tag 3</li>
+                    </ul>
+                    <button>Click me (tag)!</button>
+                  </div>
+                ),
+                disabled: false,
+              },
+              {
+                icon: "annotation",
+                title: "Annotation",
+                content: (
+                  <div>
+                    <p>It is a annotation</p>
+                    <ul>
+                      <li>Annotation 1</li>
+                      <li>Annotation 2</li>
+                      <li>Annotation 3</li>
+                    </ul>
+                    <button>Click me (annotation)!</button>
+                  </div>
+                ),
+                disabled: true,
+              },
+              {
+                icon: "coffee",
+                title: "Coffee",
+                content: (
+                  <div>
+                    <p>It is a coffee</p>
+                    <ul>
+                      <li>Coffee 1</li>
+                      <li>Coffee 2</li>
+                      <li>Coffee 3</li>
+                    </ul>
+                    <button>Click me (coffee)!</button>
+                  </div>
+                ),
+                disabled: false,
+              },
+            ]}
+          />
+        </RightBar>
+      </InnerWrapper>
+    </Container>
   );
 };
 

src/components/Annotator/__docs__/Example.tsx

@@ -8,8 +8,8 @@ const Example: FC<AnnotatorProps> = ({ id, primary = true }) => {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        height: "100%",
-        width: "100%",
+        width: "1000px",
+        height: "550px",
       }}
     >
       <Annotator id={id} primary={primary} />

src/components/Header/Header.tsx

@@ -46,7 +46,7 @@ const ZoomValue = styled.span<HeaderProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: "Roboto";
+  font-family: Roboto;
   font-style: normal;
   font-weight: 500;
   min-width: 50px;
@@ -65,15 +65,15 @@ const ImageInfo = styled.span<HeaderProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: "Roboto";
+  font-family: Roboto;
   font-style: normal;
   font-weight: 500;
   color: ${(props) =>
     props.primary ? tokens.primary.lightColor : tokens.secondary.lightColor};
 `;
 
 const Header: React.FC<HeaderProps> = ({
-  primary,
+  primary = true,
   size = "medium",
   imageInfo,
   zoom,

src/components/Menu/Menu.tsx

@@ -19,13 +19,15 @@ export type MenuProps = {
 // Styled components
 const MenuContainer = styled.div<Omit<MenuProps, "items">>`
   width: 100%;
-  font-family: "Roboto";
+  height: 100%;
+  font-family: Roboto;
   font-style: normal;
   visibility: ${(props) => (props.visible ? "visible" : "hidden")};
+  font-size: 14px;
   background-color: ${(props) =>
     props.primary
       ? tokens.primary.backgroundColor
-      : tokens.secondary.semiBackgroundColor};
+      : tokens.secondary.backgroundColor};
   color: ${(props) =>
     props.primary ? tokens.primary.color : tokens.secondary.color};
 `;
@@ -35,7 +37,7 @@ const MenuItem = styled.div<Omit<MenuProps, "items">>`
     ${(props) =>
       props.primary ? tokens.primary.lightColor : tokens.secondary.lightColor};
   border-radius: 5px;
-  margin: 5px;
+  margin: 0 5px 5px 5px;
   background-color: ${(props) =>
     props.primary ? undefined : tokens.secondary.activeColor};
 `;

src/components/Toolbar/Toolbar.tsx

@@ -21,9 +21,11 @@ const StyledDiv = styled.div<Omit<ToolbarProps, "items">>`
     props.primary
       ? tokens.primary.backgroundColor
       : tokens.secondary.backgroundColor};
-  padding: 5px;
-  height: max-content;
-  gap: 10px;
+  height: 100%;
+`;
+
+const ItemDiv = styled.div`
+  margin: 5px;
 `;
 
 const Toolbar: React.FC<ToolbarProps> = ({
@@ -39,18 +41,19 @@ const Toolbar: React.FC<ToolbarProps> = ({
   return (
     <StyledDiv role={"toolbar"} primary={primary} {...props}>
       {items.map(({ icon, text, onClick }, index) => (
-        <ToolbarItem
-          key={index}
-          iconName={icon}
-          text={text}
-          primary={primary}
-          size={size}
-          active={selectedItem === index}
-          onClick={(event) => {
-            setSelectedItem(index);
-            onClick?.(event);
-          }}
-        />
+        <ItemDiv key={index}>
+          <ToolbarItem
+            iconName={icon}
+            text={text}
+            primary={primary}
+            size={size}
+            active={selectedItem === index}
+            onClick={(event) => {
+              setSelectedItem(index);
+              onClick?.(event);
+            }}
+          />
+        </ItemDiv>
       ))}
     </StyledDiv>
   );

src/components/Toolbar/__docs__/Example.tsx

@@ -14,7 +14,7 @@ const Example: FC<ToolbarProps> = ({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        height: "100%",
+        height: "500px",
       }}
     >
       <Toolbar primary={primary} items={items} size={size} />

src/components/ToolbarItem/ToolbarItem.tsx

@@ -20,7 +20,7 @@ const StyledDiv = styled.div<Omit<ToolbarItemProps, "iconName">>`
   align-items: center;
   justify-content: center;
   border: 0;
-  font-family: "Roboto";
+  font-family: Roboto;
   font-style: normal;
   font-size: ${(props) =>
     props.size === "small"