From 8fbee3d110f6cae336184448ad092305f5217300 Mon Sep 17 00:00:00 2001 From: Daniel Reis Date: Fri, 5 Apr 2024 12:09:09 +0100 Subject: [PATCH] Removed 'styled-components' and unused dependencies/code --- .vscode/extensions.json | 1 - example/package-lock.json | 3 +- package-lock.json | 149 +------------------ package.json | 8 +- src/components/Board/Board.tsx | 44 +----- src/components/Board/__docs__/Example.tsx | 26 ++-- src/components/Board/__test__/Board.test.tsx | 2 +- src/tokens.ts | 38 ----- src/utils.ts | 41 ----- 9 files changed, 28 insertions(+), 284 deletions(-) delete mode 100644 src/tokens.ts delete mode 100644 src/utils.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json index a2a5e82..e431ae1 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,7 +1,6 @@ { "recommendations": [ "esbenp.prettier-vscode", - "styled-components.vscode-styled-components" ], "unwantedRecommendations": [] } \ No newline at end of file diff --git a/example/package-lock.json b/example/package-lock.json index 65c28c1..1b34b8f 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -32,8 +32,7 @@ "dependencies": { "fabric": "^5.3.0", "fabricjs-react": "^1.2.2", - "react-icons": "^5.0.1", - "styled-components": "^6.1.8" + "react-icons": "^5.0.1" }, "devDependencies": { "@chromatic-com/storybook": "^1.2.26", diff --git a/package-lock.json b/package-lock.json index 4d3f2b8..4506168 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,7 @@ "license": "MIT", "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" }, "devDependencies": { "@chromatic-com/storybook": "^1.3.0", @@ -54,8 +52,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" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2251,24 +2249,6 @@ "node": ">=10.0.0" } }, - "node_modules/@emotion/is-prop-valid": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", - "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", - "dependencies": { - "@emotion/memoize": "^0.8.1" - } - }, - "node_modules/@emotion/memoize": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" - }, - "node_modules/@emotion/unitless": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", - "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" - }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", @@ -5891,11 +5871,6 @@ "@types/node": "*" } }, - "node_modules/@types/stylis": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", - "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==" - }, "node_modules/@types/unist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", @@ -7238,14 +7213,6 @@ "node": ">=6" } }, - "node_modules/camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001600", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz", @@ -7805,24 +7772,6 @@ "node": ">=8" } }, - "node_modules/css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "engines": { - "node": ">=4" - } - }, - "node_modules/css-to-react-native": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", - "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", - "dependencies": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -13368,6 +13317,7 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, "funding": [ { "type": "github", @@ -14066,7 +14016,8 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true }, "node_modules/picomatch": { "version": "2.3.1", @@ -14203,11 +14154,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -14607,14 +14553,6 @@ "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==", "dev": true }, - "node_modules/react-icons": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", - "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", - "peerDependencies": { - "react": "*" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -15360,11 +15298,6 @@ "node": ">=8" } }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15521,6 +15454,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -15876,75 +15810,6 @@ "node": ">=0.8.0" } }, - "node_modules/styled-components": { - "version": "6.1.8", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz", - "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==", - "dependencies": { - "@emotion/is-prop-valid": "1.2.1", - "@emotion/unitless": "0.8.0", - "@types/stylis": "4.2.0", - "css-to-react-native": "3.2.0", - "csstype": "3.1.2", - "postcss": "8.4.31", - "shallowequal": "1.1.0", - "stylis": "4.3.1", - "tslib": "2.5.0" - }, - "engines": { - "node": ">= 16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/styled-components" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0" - } - }, - "node_modules/styled-components/node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" - }, - "node_modules/styled-components/node_modules/postcss": { - "version": "8.4.31", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", - "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "nanoid": "^3.3.6", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/styled-components/node_modules/tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" - }, - "node_modules/stylis": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", - "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==" - }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 9a6b64f..fbdaabb 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx index 26c8ca1..ffa5dde 100644 --- a/src/components/Board/Board.tsx +++ b/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( ( { @@ -177,9 +170,7 @@ const Board = React.forwardRef( } // 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( // // setAction({ primitive: "rectangle", operation: "add" }); // }; - // const getVisible = () => { - // console.log(editor?.canvas.getObjects()?.[0].visible); - // }; - return ( - +
- - - //
- // - // - // - // - // - // - //
- // - //
Zoom: {Math.round(currentZoom)}%
- //
- //
+
); }, ); diff --git a/src/components/Board/__docs__/Example.tsx b/src/components/Board/__docs__/Example.tsx index c06d727..48373d2 100644 --- a/src/components/Board/__docs__/Example.tsx +++ b/src/components/Board/__docs__/Example.tsx @@ -1,17 +1,5 @@ import React, { FC, useState } from "react"; import Board, { BoardActions, BoardProps } from "../Board"; -import styled from "styled-components"; - -const StyledDiv = styled.div` - display: flex; - gap: 10px; -`; - -const StyledP = styled.p` - display: flex; - border: 1px solid black; - padding: 3px; -`; const Example: FC = ({ primary = true, items, image }) => { const ref = React.createRef(); @@ -21,7 +9,7 @@ const Example: FC = ({ primary = true, items, image }) => { return ( <> - +
@@ -32,10 +20,14 @@ const Example: FC = ({ primary = true, items, image }) => { - - - Current zoom: {currentZoom} - +
+
+
+ Current zoom: {currentZoom} +
+
{ it("Board should render correctly", () => { render(); - const board = screen.getByRole("board"); + const board = screen.getByTestId("react-annotator-canvas"); expect(board).toBeInTheDocument(); }); }); diff --git a/src/tokens.ts b/src/tokens.ts deleted file mode 100644 index a288e14..0000000 --- a/src/tokens.ts +++ /dev/null @@ -1,38 +0,0 @@ -const tokens = { - light: "mediumseagreen", - primary: { - lightColor: "#828282", - darkColor: "#5c5c5c", - light: "#fcfcfc", - color: "#171717", - backgroundColor: "#ffffff", - semiBackgroundColor: "#f4f4f4", - hoverColor: "#eeeeee", - activeColor: "#bebebe", - disabledColor: "#808080", - borderColor: "#c4c2c2", - }, - secondary: { - lightColor: "#cecece", - darkColor: "#a8a8a8", - color: "#eeeeee", - backgroundColor: "#000000", - semiBackgroundColor: "#9f9f9f", - hoverColor: "#5f5f5f", - activeColor: "#8e8e8e", - disabledColor: "#808080", - borderColor: "#c4c2c2", - }, - font: { - small: 12, - medium: 14, - large: 16, - }, - icon: { - small: 12, - medium: 16, - large: 20, - }, -}; - -export default tokens; diff --git a/src/utils.ts b/src/utils.ts deleted file mode 100644 index 8f47751..0000000 --- a/src/utils.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { PiRectangle, PiCircle, PiCoffeeThin } from "react-icons/pi"; -import { IoHandRightOutline } from "react-icons/io5"; -import { LiaMousePointerSolid } from "react-icons/lia"; -import { FaDrawPolygon } from "react-icons/fa"; -import { GrZoomIn, GrZoomOut } from "react-icons/gr"; -import { TbZoomReset } from "react-icons/tb"; -import { TbMessageOff, TbMessage } from "react-icons/tb"; -import { ImPriceTags } from "react-icons/im"; -import { CgUnavailable } from "react-icons/cg"; - -export const arrayToRGBA = (hex: string, alpha: number) => { - // Remove '#' if present - const tmpHex = hex.replace("#", ""); - - // Parse hexadecimal color - const bigint = parseInt(tmpHex, 16); - - // Extract RGB components - const r = (bigint >> 16) & 255; - const g = (bigint >> 8) & 255; - const b = bigint & 255; - - // Construct RGBA string - return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; -}; - -export const AvailableIcons = { - rectangle: PiRectangle, - circle: PiCircle, - hand: IoHandRightOutline, - pointer: LiaMousePointerSolid, - polygon: FaDrawPolygon, - zoomIn: GrZoomIn, - zoomOut: GrZoomOut, - zoomReset: TbZoomReset, - annotation: TbMessage, - annotationDisabled: TbMessageOff, - tags: ImPriceTags, - coffee: PiCoffeeThin, - unavailable: CgUnavailable, -};