Merge pull request #802 from IPG-Automotive-UK/enhancement/TD-1555-re…

…move-material-ui-dropzone TD-1555 Remove mui-file-dropzone & @mui/styles dependencies
IPG-Automotive-UK · Jan 9, 2024 · 2b5a9e4 · 2b5a9e4
2 parents 3c0eef7 + c04d21f
commit 2b5a9e4
Show file tree

Hide file tree

Showing 16 changed files with 887 additions and 989 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,6 @@
     "@juggle/resize-observer": "^3.4.0",
     "@mui/icons-material": "^5.15.3",
     "@mui/material": "^5.15.3",
-    "@mui/styles": "^5.15.3",
     "@mui/x-data-grid": "^6.18.7",
     "@playwright/test": "^1.40.1",
     "@storybook/addon-actions": "^7.6.7",
@@ -83,13 +82,13 @@
     "material-ui-confirm": "^3.0.9",
     "material-ui-popup-state": "^5.0.10",
     "microbundle-crl": "^0.13.11",
-    "mui-file-dropzone": "^4.0.2",
     "mutationobserver-shim": "^0.3.7",
     "npm-run-all": "^4.1.5",
     "playwright": "^1.40.1",
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
+    "react-dropzone": "^14.2.3",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
     "react-text-mask": "^5.5.0",
@@ -108,7 +107,6 @@
     "@juggle/resize-observer": "^3.4.0",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
-    "@mui/styles": "^5.14.7",
     "@mui/x-data-grid": "^6.10.2",
     "@types/css-mediaquery": "^0.1.2",
     "@types/plotly.js": "^2.12.26",
@@ -118,9 +116,9 @@
     "css-mediaquery": "^0.1.2",
     "material-ui-confirm": "^3.0.9",
     "material-ui-popup-state": "^5.0.9",
-    "mui-file-dropzone": "^4.0.2",
     "plotly.js": "^2.26.0",
     "react": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.2",
@@ -160,10 +158,10 @@
     "material-ui-popup-state": {
       "optional": true
     },
-    "mui-file-dropzone": {
+    "react-colorful": {
       "optional": true
     },
-    "react-colorful": {
+    "react-dropzone": {
       "optional": true
     },
     "react-hook-form": {

diff --git a/src/FileUploader/FileUploader.stories.tsx b/src/FileUploader/FileUploader.stories.tsx
@@ -1,7 +1,6 @@
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import FileUploader from "./FileUploader";
-import { FileUploaderProps } from "./FileUploader.types";
 import React from "react";
 import { action } from "@storybook/addon-actions";
 
@@ -10,39 +9,42 @@ import { action } from "@storybook/addon-actions";
  */
 const meta: Meta<typeof FileUploader> = {
   component: FileUploader,
-  title: "General/FileUploader"
-};
-export default meta;
+  render: function Render(args) {
+    // selectedFiles state
+    const [selectedFiles, setSelectedFiles] = React.useState(
+      args.selectedFiles
+    );
 
-const Template: StoryFn<FileUploaderProps> = args => {
-  // selectedFiles state
-  const [selectedFiles, setSelectedFiles] = React.useState(args.selectedFiles);
+    return (
+      <FileUploader
+        {...args}
+        required={args.required}
+        multiple={args.multiple}
+        filesLimit={args.filesLimit}
+        dropzoneText={args.dropzoneText}
+        selectedFiles={selectedFiles}
+        onAdd={newFiles => {
+          setSelectedFiles(newFiles);
 
-  return (
-    <FileUploader
-      {...args}
-      required={args.required}
-      multiple={args.multiple}
-      filesLimit={args.filesLimit}
-      dropzoneText={args.dropzoneText}
-      selectedFiles={selectedFiles}
-      onAdd={newFiles => {
-        setSelectedFiles(newFiles);
+          // fire action
+          action("onAdd")(newFiles);
+        }}
+        onDelete={updatedFiles => {
+          setSelectedFiles(updatedFiles);
 
-        // fire action
-        action("onAdd")(newFiles);
-      }}
-      onDelete={updatedFiles => {
-        setSelectedFiles(updatedFiles);
-
-        // fire action
-        action("onDelete")(updatedFiles);
-      }}
-    />
-  );
+          // fire action
+          action("onDelete")(updatedFiles);
+        }}
+      />
+    );
+  },
+  title: "General/FileUploader"
 };
+export default meta;
 
-export const Default = {
+// Story which shows the component defaults
+type Story = StoryObj<typeof FileUploader>;
+export const Default: Story = {
   args: {
     acceptedFiles: [],
     dropzoneText: "Drag & drop a file here or click",
@@ -53,31 +55,30 @@ export const Default = {
     onDelete: () => {},
     required: false,
     selectedFiles: [],
-    showErrorAlert: true,
-    title: "Upload a File"
-  },
-
-  render: Template
+    title: "Upload a File",
+    titleVariant: "body"
+  }
 };
 
-export const WithSingleFileSelected = {
+/**
+ * Story which shows the uploader in single select mode
+ */
+export const WithSingleFileSelected: Story = {
   args: {
     ...Default.args,
     selectedFiles: [
       {
         data: "",
-        file: {
-          name: "IPGAutomotive.zip",
-          path: "IPGAutomotive.zip"
-        }
+        file: new File([""], "IPGAutomotive.zip")
       }
     ]
-  },
-
-  render: Template
+  }
 };
 
-export const WithMultipleFilesSelected = {
+/**
+ * Story which shows the uploader in multiple select mode
+ */
+export const WithMultipleFilesSelected: Story = {
   args: {
     ...Default.args,
     dropzoneText: "Drag & drop file(s) here or click",
@@ -86,20 +87,12 @@ export const WithMultipleFilesSelected = {
     selectedFiles: [
       {
         data: "",
-        file: {
-          name: "IPGAutomotive.zip",
-          path: "IPGAutomotive.zip"
-        }
+        file: new File([""], "IPGAutomotive.zip")
       },
       {
         data: "",
-        file: {
-          name: "CarMaker.zip",
-          path: "CarMaker.zip"
-        }
+        file: new File([""], "CarMaker.zip")
       }
     ]
-  },
-
-  render: Template
+  }
 };
diff --git a/src/FileUploader/FileUploader.test.tsx b/src/FileUploader/FileUploader.test.tsx