Removed 'styled-components' and unused dependencies/code

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
     "recommendations": [
       "esbenp.prettier-vscode",
-      "styled-components.vscode-styled-components"
     ],
     "unwantedRecommendations": []
   }

package.json

@@ -65,8 +65,8 @@
     "vitest": "^1.4.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -84,8 +84,6 @@
   ],
   "dependencies": {
     "fabric": "^5.3.0",
-    "fabricjs-react": "^1.2.2",
-    "react-icons": "^5.0.1",
-    "styled-components": "^6.1.8"
+    "fabricjs-react": "^1.2.2"
   }
 }

src/components/Board/Board.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { fabric } from "fabric";
 import { FabricJSCanvas, useFabricJSEditor } from "fabricjs-react";
-import tokens from "../../tokens";
 import { CanvasObject } from "./types";
-import styled from "styled-components";
 
 export type BoardProps = {
   primary?: boolean;
@@ -40,11 +38,6 @@ type CanvasAnnotationState = {
   isDragging?: boolean;
 };
 
-const StyledCanvas = styled.div`
-  width: 100%;
-  height: 100%;
-`;
-
 const Board = React.forwardRef<BoardActions, BoardProps>(
   (
     {
@@ -177,9 +170,7 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
       }
 
       // Background color of canvas
-      editor.canvas.backgroundColor = primary
-        ? tokens.primary.backgroundColor
-        : tokens.secondary.backgroundColor;
+      editor.canvas.backgroundColor = "#ffffff";
 
       // Set FabricJS canvas width and height
       editor.canvas.setWidth(parentCanvasElement.clientWidth);
@@ -397,35 +388,14 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
     //   // setAction({ primitive: "rectangle", operation: "add" });
     // };
 
-    // const getVisible = () => {
-    //   console.log(editor?.canvas.getObjects()?.[0].visible);
-    // };
-
     return (
-      <StyledCanvas id="react-annotator-canvas" role="board">
+      <div
+        id="react-annotator-canvas"
+        data-testid="react-annotator-canvas"
+        style={{ width: "100%", height: "100%" }}
+      >
         <FabricJSCanvas className="fabricjs-canvas" onReady={onReady} />
-      </StyledCanvas>
-
-      // <div className="App">
-      //   <button onClick={onAddRectangle}>Add Rectangle</button>
-      //   <button onClick={resetZoom}>Reset Zoom</button>
-      //   <button onClick={addRandom}>Add Random</button>
-      //   <button onClick={draggingState}>
-      //     DraggingState {draggingEnabled ? "ON" : "OFF"}
-      //   </button>
-      //   <button onClick={getActiveObjects}>Active Objects</button>
-      //   <button onClick={getVisible}>Get Visible</button>
-      //   <div
-      //     style={{
-      //       border: `3px solid Green`,
-      //       width: `${WIDTH}px`,
-      //       height: `${HEIGHT}px`,
-      //     }}
-      //   >
-      //     <FabricJSCanvas className="react-annotator-canvas" onReady={onReady} />
-      //     <div>Zoom: {Math.round(currentZoom)}%</div>
-      //   </div>
-      // </div>
+      </div>
     );
   },
 );