Migrate the class to function component

.github/workflows/node.js.yml

@@ -5,32 +5,31 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [12.x, 14.x]
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: yarn
-    - run: yarn build
-    - run: yarn test
-    - run: yarn storybook:export
-    - name: Deploy
-      if: ${{ github.event_name == 'push' && matrix.node-version == '12.x' }}
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./storybook-static
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn
+      - run: yarn build
+      - run: yarn test
+      - run: yarn storybook:export
+      - name: Deploy
+        if: ${{ github.event_name == 'push' && matrix.node-version == '12.x' }}
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.prettierignore

@@ -1,2 +1,4 @@
 lib
-coverage
+coverage
+build
+storybook-static

.prettierrc.json

@@ -2,5 +2,13 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": false
+  "singleQuote": false,
+  "overrides": [
+    {
+      "files": ["*.html", "*.md"],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
 }

.storybook/main.js

@@ -8,18 +8,18 @@ module.exports = {
     config.module.rules.push({
       test: /\.scss$/,
       use: ["style-loader", "css-loader", "sass-loader"],
-      include: path.resolve(__dirname, "../")
+      include: path.resolve(__dirname, "../"),
     });
 
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
       loader: require.resolve("babel-loader"),
       options: {
-        presets: [["react-app", { flow: false, typescript: true }]]
-      }
+        presets: [["react-app", { flow: false, typescript: true }]],
+      },
     });
     config.resolve.extensions.push(".ts", ".tsx");
 
     return config;
-  }
-};
+  },
+};

README.md

@@ -12,13 +12,13 @@ ReactMultiCrop Used Fabric.js and Integrated with react-admin. Designed for [rea
 
 ## Prerequisted and Dependecies
 
-- Please read how to install fabric.js:
+-   Please read how to install fabric.js:
 
 https://www.npmjs.com/package/fabric
 
-- Dependencies:
-  - Material UI
-  - fabric.js
+-   Dependencies:
+    -   Material UI
+    -   fabric.js
 
 ## How to Install
 

package.json

@@ -31,8 +31,9 @@
   "homepage": "https://github.com/bervProject/ReactMultiCrop#readme",
   "peerDependencies": {
     "@material-ui/core": ">=4.2.1",
-    "fabric": ">=3.3.2",
-    "react": ">=16.5.2"
+    "fabric": ">=4.0",
+    "react": "^16.9.0",
+    "react-admin": ">=3.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
@@ -53,7 +54,9 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.5.3",
     "prettier": "^2.1.2",
+    "ra-data-simple-rest": "^3.9.3",
     "react": "^16.14.0",
+    "react-admin": "^3.9.4",
     "react-dom": "^16.14.0",
     "rollup": "^2.32.0",
     "rollup-plugin-peer-deps-external": "^2.2.3",

src/ReactMultiCrop/ReactMultiCrop.stories.tsx

@@ -1,11 +1,8 @@
 import React from "react";
-import ReactMultiCrop from "./ReactMultiCrop";
+import ReactMultiCropForm from "./ReactMultiCropForm";
 
 export default {
-  title: "ReactMultiCrop"
+  title: "ReactMultiCrop",
 };
 
-export const Canvas = () => <ReactMultiCrop id="canvas" input={{
-  name: 'canvas', value: '', onChange: function () {
-  }
-}} record={[]} />;
+export const Canvas = () => <ReactMultiCropForm />;

src/ReactMultiCrop/ReactMultiCrop.test.tsx

@@ -1,45 +1,13 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import ReactMultiCrop from "./ReactMultiCrop";
-import { ReactMultiCropProps } from "./ReactMultiCrop.types";
+import ReactMultiCropForm from "./ReactMultiCropForm";
 
 describe("Test Component", () => {
-  let props: ReactMultiCropProps;
+  const renderComponent = () => render(<ReactMultiCropForm />);
 
-  beforeEach(() => {
-    props = {
-      id: "canvas",
-      color: "red",
-      strokeColor: "white",
-      opacity: 0.8,
-      strokeDashArray: [5, 5],
-      strokeWidth: 5,
-      record: [],
-      input: {
-        value: "",
-        name: "react",
-        onChange: function () {},
-      },
-    };
-  });
-
-  const renderComponent = () => render(<ReactMultiCrop {...props} />);
-
-  it("should have primary className with default props", () => {
-    const { getByTestId } = renderComponent();
-
-    const testComponent = getByTestId("canvas-wrapper");
-
-    expect(testComponent).toBeTruthy();
-  });
-
-  it("should have secondary className with theme set as secondary", () => {
-    props.id = "new-canvas";
-    const { getByTestId } = renderComponent();
-
-    const testComponent = getByTestId("canvas-wrapper");
-
-    expect(testComponent).toBeTruthy();
+  it("it should render correctly", () => {
+    const component = renderComponent();
+    expect(component).toBeTruthy();
   });
 });