@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/components/FileUpload/FileUpload.stories.js

@@ -0,0 +1,952 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithProgress = exports._WithMaxSizeValidation = exports._WithIndeterminateProgress = exports._WithFileRefresh = exports._WithDeletionConfirmation = exports._WithCustomErrorMessages = exports._SingleFile = exports._MultiFile = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _helpers = require("../../utils/helpers");
+var _tokens = require("../../utils/tokens");
+var _Dialog = require("../Dialog");
+var _EmptyState = require("../EmptyState");
+var _Link = require("../Link");
+var _Table = require("../Table");
+var _Text = require("../Text");
+var _Truncate = require("../Truncate");
+var _FileUpload = require("./FileUpload");
+var _FileUploadStoriesModule = _interopRequireDefault(require("./FileUpload.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/File Upload/File Upload',
+  component: _FileUpload.FileUpload,
+  argTypes: {
+    classNames: {
+      description: 'Provide an optional className to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{ wrapper?: string, instruction?: string, secondaryInstruction?: string, dropZone?: string, files?: string }'
+        }
+      }
+    },
+    label: {
+      description: 'The label for the File Uploader',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        },
+        defaultValue: {
+          summary: ''
+        }
+      }
+    },
+    instruction: {
+      description: 'The instruction for the File Uploader. This appears as the first line of the File Uploader',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        },
+        defaultValue: {
+          summary: 'Drag & drop the file here or click to select'
+        }
+      }
+    },
+    draggingInstruction: {
+      description: 'This gets activated when the user drags the file over the File Uploader. Instruction text gets replaced by draggingInstruction',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        },
+        defaultValue: {
+          summary: 'Drop the file here to start uploading..'
+        }
+      }
+    },
+    secondaryInstruction: {
+      description: `The secondary instruction for the File Uploader. This appears as the second line of the
+        File Uploader. Use this to notify users of file type accepted, size accepted, etc.`,
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        },
+        defaultValue: {
+          summary: ''
+        }
+      }
+    },
+    maxSize: {
+      description: 'The maximum size of each file that can be uploaded. This is in bytes',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    accept: {
+      description: `Set accepted file types. Checkout [MDN](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker)
+      types option for more information. Keep in mind that mime type determination is not reliable across platforms.
+      CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows.
+      In some cases there might not be a mime type set at all [GitHub](https://github.com/react-dropzone/react-dropzone/issues/276).`,
+      control: {
+        type: 'array'
+      },
+      table: {
+        type: {
+          summary: 'AcceptProps'
+        }
+      }
+    },
+    onValidFilesDrop: {
+      description: `
+The callback function that is called when the user selects or drop **valid file(s)**.
+Only the currently dropped/selected files are passed as argument.
+      `,
+      action: 'on valid files drop or select',
+      table: {
+        type: {
+          summary: 'onValidFilesDrop?: ( validFiles: Array<FileObject>) => mixed'
+        }
+      }
+    },
+    onRejectedFilesDrop: {
+      description: `
+The callback function that is called when the user selects or drop **invalid file(s)**.
+Only the currently dropped/selected files are passed as argument.
+      `,
+      action: 'on rejected files drop or select',
+      table: {
+        type: {
+          summary: 'onRejectedFilesDrop?: ( rejectedFiles: Array<FileObject>) => mixed'
+        }
+      }
+    },
+    handleFileDeletionExternally: {
+      description: `If **true**, the component will not handle file deletion internally. This is useful when you want to
+      handle file deletion externally. For example, you can use this prop to show a confirmation modal before deleting a file.`,
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    onFileClear: {
+      description: `The callback function that is called when the user clears the file.`,
+      action: 'file cleared',
+      table: {
+        type: {
+          summary: '(id: string) => mixed'
+        }
+      }
+    },
+    onFileRefreshClick: {
+      description: `The callback function that is called when the user clicks on the refresh icon.`,
+      action: 'file Refreshed',
+      table: {
+        type: {
+          summary: '(file: FileObject) => mixed'
+        }
+      }
+    },
+    disabled: {
+      description: 'If **true**, the component is disabled',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    ref: {
+      description: `File upload state management callbacks along with \`validFiles\`, \`rejectedFiles\` and \`files\` are
+      exposed as \`ref\` which is a \`React.Ref\` object.`,
+      table: {
+        type: {
+          summary: 'FileUploadRef'
+        }
+      }
+    },
+    maxFiles: {
+      description: `Maximum accepted number of files The default value is 1 which corresponds to single file upload.
+        You can also **set the value to 0 which means there is no limitation to how many files are accepted**.`,
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: '1'
+        }
+      }
+    },
+    required: {
+      description: 'if **true**, a red star would be added to the label',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a FileUpload component.',
+      source: {
+        code: null
+      },
+      description: {
+        component: `
+\`\`\`js
+import { FileUpload } from "@spaced-out/ui-design-system/lib/components/FileUpload";
+\`\`\`
+The \`FileUpload\` component is a customizable file upload component which utilizes the \`useFileUploadHook\`.
+It provides an intuitive and user-friendly interface for uploading files.
+The component supports features such as drag and drop functionality, file validation, error handling, and file clearing.
+
+When files are dragged and dropped or selected using the file browser, the \`FileUpload\` component displays the file names along
+with additional information such as success message, progress state and error message. It also provides an option to remove individual files.
+
+The component supports various visual states, including a hover state when files are being dragged over the
+component, an error state when invalid files are selected, and a disabled state when the component is not interactive.
+
+Additionally, the \`FileUpload\` component allows customization through props, enabling you to specify the maximum
+file size, accepted file types, callbacks for handling valid and rejected file(s) drop, and more.
+
+You can access valid files, rejected files, and all files using the \`ref\` object passed to the \`FileUpload\` component. You can
+also do several operations on a file using the functions exposed on the \`ref\`
+
+\`\`\`js
+// Valid Files:
+ref.current?.validFiles;
+
+// Rejected Files:
+ref.current?.rejectedFiles;
+
+// All Files:
+ref.current?.files;
+
+// Operations on a file:
+
+// Move file to progress state
+ref.current?.moveFileToProgress(id, progress);
+
+// Move file to success state
+ref.current?.moveFileToSuccess(id, successMessage);
+
+// Move file to reject state
+ref.current?.moveFileToReject(id, rejectReason);
+
+// Show re-upload button
+ref.current?.setShowReUpload(id, showReUpload);
+
+// Clear file(Use this in combination of handleFileDeletionExternally, when you want to handle deletion externally)
+ref.current?.handleFileClear(id);
+\`\`\`
+
+Each File object returned has these properties:
+
+\`\`\`js
+type FileObject = {
+  file: File,
+  id: string,
+  reject?: boolean,
+  rejectReason?: string,
+  progress?: FileProgress,
+  success?: boolean,
+  successMessage?: string,
+  showReUpload?: boolean,
+};
+\`\`\`
+
+To transition file state a bunch of functions are exposed as \`ref\` which is a \`React.Ref\` object.
+
+\`\`\`js
+// File upload state management callbacks are exposed as \`ref\` which is a \`React.Ref\` object.
+export type FileUploadRef = {
+  moveFileToProgress: (id: string, progress: FileProgress) => mixed,
+  moveFileToSuccess: (id: string, successMessage?: string) => mixed,
+  moveFileToReject: (id: string, rejectReason?: string) => mixed,
+  setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
+  handleFileClear: (id: string) => mixed,
+  validFiles: Array<FileObject>,
+  rejectedFiles: Array<FileObject>,
+  files: Array<FileObject>,
+};
+
+// File upload Props
+type FileUploadProps = {
+  ...
+  // File drop/select callbacks
+  onValidFilesDrop?: (validFiles: Array<FileObject>) => mixed,
+  onRejectedFilesDrop?: (rejectedFiles: Array<FileObject>) => mixed,
+
+  // File clear callbacks
+  onFileClear?: (id: string) => mixed,
+
+  // File refresh callback
+  onFileRefreshClick?: (file: FileObject) => mixed,
+
+  ...
+};
+\`\`\`
+\`\`\`js
+// Usage:
+
+const ref = React.useRef(null);
+
+const mockState = (id: string) => {
+  let progress = 0;
+  const intervalId = setInterval(() => {
+    progress += 5;
+    if (progress >= 100) {
+      ref.current?.moveFileToSuccess(id);
+      clearInterval(intervalId);
+    } else {
+      ref.current?.moveFileToProgress(id, progress);
+    }
+  }, 100);
+};
+\`\`\`
+\`\`\`jsx
+<FileUpload
+  {...args}
+  ref={ref}
+  onValidFilesDrop={(uploadedFiles) => {
+    uploadedFiles.forEach((file) => {
+      mockState(file.id);
+    });
+  }}
+/>
+\`\`\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/FileUpload/FileUpload.jsx'
+    }
+  }
+};
+/**
+ * Renders a FileUpload component for uploading a single file.
+ *
+ * This example demonstrates how to use the FileUpload component with a single file upload.
+ */
+const _SingleFile = args => {
+  const [files, setFiles] = React.useState([]);
+  const ref = React.useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onRejectedFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onFileClear: () => {
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })));
+};
+exports._SingleFile = _SingleFile;
+_SingleFile.args = {
+  label: 'Upload a file(Only one file allowed)',
+  secondaryInstruction: 'Types: .png, .jpg or .jpeg',
+  maxFiles: 1,
+  accept: {
+    'image/jpeg': ['.jpg', '.jpeg'],
+    'image/png': ['.png']
+  }
+};
+
+/**
+ * Renders a FileUpload component for uploading multiple files.
+ *
+ * This example demonstrates how to use the FileUpload component with multiple file uploads.
+ */
+const _MultiFile = args => {
+  const [files, setFiles] = React.useState([]);
+  const ref = React.useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onRejectedFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onFileClear: () => {
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })));
+};
+exports._MultiFile = _MultiFile;
+_MultiFile.args = {
+  label: 'Upload Files(Multiple files allowed)',
+  secondaryInstruction: 'Types: .png, .jpg or .jpeg',
+  maxFiles: 0,
+  accept: {
+    'image/jpeg': ['.jpg', '.jpeg'],
+    'image/png': ['.png']
+  }
+};
+
+/**
+ * Renders a FileUpload component for uploading multiple files.
+ *
+ * This example demonstrates how to use the FileUpload component with confirmation modal and handle deletion externally.
+ */
+const _WithDeletionConfirmation = args => {
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const [fileIdToDelete, setFileIdToDelete] = React.useState('');
+  const [files, setFiles] = React.useState([]);
+  const ref = React.useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    handleFileDeletionExternally: true,
+    onRejectedFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onFileClear: id => {
+      setFileIdToDelete(id);
+      setShowConfirmation(true);
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })), /*#__PURE__*/React.createElement(_Dialog.BasicDialog, {
+    isOpen: showConfirmation,
+    abortText: "Close",
+    body: "Are you sure you want to delete this file?",
+    confirmText: "Confirm",
+    handleAbort: () => {
+      setShowConfirmation(false);
+    },
+    handleConfirm: () => {
+      // @ts-ignore - TS2339 - Property 'handleFileClear' does not exist on type 'never'.
+      ref.current?.handleFileClear(fileIdToDelete);
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+      setShowConfirmation(false);
+    },
+    heading: "Delete File",
+    onClose: () => {
+      setShowConfirmation(false);
+    },
+    semantic: "danger"
+  }));
+};
+exports._WithDeletionConfirmation = _WithDeletionConfirmation;
+_WithDeletionConfirmation.args = {
+  label: 'Upload Files(Multiple files allowed)',
+  secondaryInstruction: 'Types: .png, .jpg or .jpeg',
+  maxFiles: 0,
+  accept: {
+    'image/jpeg': ['.jpg', '.jpeg'],
+    'image/png': ['.png']
+  }
+};
+
+/**
+ * Renders a FileUpload component with progress state.
+ *
+ * This example demonstrates how to use the FileUpload component with progress state.
+ */
+const _WithProgress = args => {
+  const [files, setFiles] = React.useState([]);
+  const ref = React.useRef(null);
+  const mockState = id => {
+    let progress = 0;
+    const intervalId = setInterval(() => {
+      progress += 5;
+      if (progress >= 105) {
+        // @ts-ignore - TS2339 - Property 'moveFileToSuccess' does not exist on type 'never'.
+        ref.current?.moveFileToSuccess(id);
+        clearInterval(intervalId);
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      } else {
+        // @ts-ignore - TS2339 - Property 'moveFileToProgress' does not exist on type 'never'.
+        ref.current?.moveFileToProgress(id, progress);
+      }
+    }, 100);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: uploadedFiles => {
+      uploadedFiles.forEach(file => {
+        mockState(file.id);
+      });
+    },
+    onRejectedFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onFileClear: () => {
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })));
+};
+exports._WithProgress = _WithProgress;
+_WithProgress.args = {
+  label: 'Upload Files(Multiple files allowed)',
+  secondaryInstruction: 'Types: .png, .jpg or .jpeg',
+  maxFiles: 0,
+  accept: {
+    'image/jpeg': ['.jpg', '.jpeg'],
+    'image/png': ['.png']
+  }
+};
+
+/**
+ * Renders a FileUpload component with indeterminate progress state.
+ *
+ * This example demonstrates how to use the FileUpload component with indeterminate progress state.
+ */
+const _WithIndeterminateProgress = args => {
+  const [files, setFiles] = React.useState([]);
+  const ref = React.useRef(null);
+  const mockState = id => {
+    // @ts-ignore - TS2339 - Property 'moveFileToProgress' does not exist on type 'never'.
+    ref.current?.moveFileToProgress(id, 'indeterminate');
+    setTimeout(() => {
+      // @ts-ignore - TS2339 - Property 'moveFileToSuccess' does not exist on type 'never'.
+      ref.current?.moveFileToSuccess(id);
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    }, 5000);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: uploadedFiles => {
+      uploadedFiles.forEach(file => {
+        mockState(file.id);
+      });
+    },
+    onRejectedFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onFileClear: () => {
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })));
+};
+exports._WithIndeterminateProgress = _WithIndeterminateProgress;
+_WithIndeterminateProgress.args = {
+  label: 'Upload Files(Multiple files allowed)',
+  secondaryInstruction: 'Types: .png, .jpg or .jpeg',
+  maxFiles: 0,
+  accept: {
+    'image/jpeg': ['.jpg', '.jpeg'],
+    'image/png': ['.png']
+  }
+};
+
+/**
+ * Renders a FileUpload component with custom error and success messages.
+ *
+ * This example demonstrates how to use the FileUpload component with custom error and success messages.
+ */
+const _WithCustomErrorMessages = args => {
+  const [files, setFiles] = React.useState([]);
+  const ref = React.useRef(null);
+  const mockState = (id, idx) => {
+    let progress = 0;
+    const intervalId = setInterval(() => {
+      progress += 5;
+      if (progress >= 105) {
+        if (idx === 0) {
+          // @ts-ignore - TS2339 - Property 'moveFileToReject' does not exist on type 'never'.
+          ref.current?.moveFileToReject(id, 'File rejected: Your custom error message');
+        } else {
+          // @ts-ignore - TS2339 - Property 'moveFileToSuccess' does not exist on type 'never'.
+          ref.current?.moveFileToSuccess(id);
+        }
+        clearInterval(intervalId);
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      } else {
+        // @ts-ignore - TS2339 - Property 'moveFileToProgress' does not exist on type 'never'.
+        ref.current?.moveFileToProgress(id, progress);
+      }
+    }, 100);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: uploadedFiles => {
+      uploadedFiles.forEach((file, idx) => {
+        mockState(file.id, idx);
+      });
+    },
+    onRejectedFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onFileClear: () => {
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })));
+};
+exports._WithCustomErrorMessages = _WithCustomErrorMessages;
+_WithCustomErrorMessages.args = {
+  label: 'Upload Files(Multiple files allowed)',
+  secondaryInstruction: 'Try uploading multiple files at once.',
+  maxFiles: 0
+};
+
+/**
+ * Renders a FileUpload component with max size validation.
+ *
+ * This example demonstrates how to use the FileUpload component with max size validation.
+ */
+const _WithMaxSizeValidation = args => {
+  const [files, setFiles] = React.useState([]);
+  const ref = React.useRef(null);
+  const mockState = id => {
+    let progress = 0;
+    const intervalId = setInterval(() => {
+      progress += 5;
+      if (progress >= 105) {
+        // @ts-ignore - TS2339 - Property 'moveFileToSuccess' does not exist on type 'never'.
+        ref.current?.moveFileToSuccess(id);
+        clearInterval(intervalId);
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      } else {
+        // @ts-ignore - TS2339 - Property 'moveFileToProgress' does not exist on type 'never'.
+        ref.current?.moveFileToProgress(id, progress);
+      }
+    }, 100);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: uploadedFiles => {
+      uploadedFiles.forEach(file => {
+        mockState(file.id);
+      });
+    },
+    onRejectedFilesDrop: () => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    },
+    onFileClear: () => {
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })));
+};
+exports._WithMaxSizeValidation = _WithMaxSizeValidation;
+_WithMaxSizeValidation.args = {
+  label: 'Upload Files(Multiple files allowed)',
+  secondaryInstruction: 'Try uploading a file greater than 2MB',
+  maxFiles: 0,
+  maxSize: 2000000 // 2MB
+};
+
+/**
+ * Renders a FileUpload component with re upload icon when file state is moved to error.
+ *
+ * This example demonstrates how to use the FileUpload component with reupload.
+ */
+const _WithFileRefresh = args => {
+  const ref = React.useRef(null);
+  const [files, setFiles] = React.useState([]);
+  const mockState = id => {
+    let progress = 0;
+    const intervalId = setInterval(() => {
+      progress += 5;
+      if (progress >= 105) {
+        // @ts-ignore - TS2339 - Property 'moveFileToSuccess' does not exist on type 'never'.
+        ref.current?.moveFileToSuccess(id);
+        clearInterval(intervalId);
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      } else {
+        // @ts-ignore - TS2339 - Property 'moveFileToProgress' does not exist on type 'never'.
+        ref.current?.moveFileToProgress(id, progress);
+      }
+    }, 100);
+  };
+  const mockReUpload = id => {
+    // @ts-ignore - TS2339 - Property 'setShowReUpload' does not exist on type 'never'.
+    ref.current?.setShowReUpload(id, true);
+    setTimeout(() => {
+      // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+      setFiles(ref.current?.files);
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, _extends({}, args, {
+    ref: ref,
+    onValidFilesDrop: uploadedFiles => {
+      uploadedFiles.forEach(file => {
+        mockState(file.id);
+      });
+    },
+    onRejectedFilesDrop: uploadedFiles => {
+      uploadedFiles.forEach(file => {
+        mockReUpload(file.id);
+      });
+    },
+    onFileRefreshClick: file => {
+      mockState(file.id);
+    },
+    onFileClear: () => {
+      setTimeout(() => {
+        // @ts-ignore - TS2339 - Property 'files' does not exist on type 'never'.
+        setFiles(ref.current?.files);
+      });
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.fileDataContainer
+  }, /*#__PURE__*/React.createElement(FileUploadData, {
+    files: files || []
+  })));
+};
+exports._WithFileRefresh = _WithFileRefresh;
+_WithFileRefresh.args = {
+  label: 'Upload Files(Multiple files allowed)',
+  secondaryInstruction: 'Try uploading a file greater than 2MB',
+  maxFiles: 0,
+  maxSize: 2000000 // 2MB
+};
+const emptyText = (0, _tokens.getRandomDataVariation)();
+const FileUploadData = _ref => {
+  let {
+    files
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _FileUploadStoriesModule.default.dataTable
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
+    color: "warning",
+    className: _FileUploadStoriesModule.default.textLabel
+  }, "Data Table(This is not a part of File Upload Component)"), /*#__PURE__*/React.createElement(DataTable, {
+    files: files
+  }));
+};
+const DataTable = _ref2 => {
+  let {
+    files
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(_Table.Table, {
+    entries: files,
+    emptyText: /*#__PURE__*/React.createElement("div", {
+      className: _FileUploadStoriesModule.default.emptyStateWrapper
+    }, /*#__PURE__*/React.createElement(_EmptyState.EmptyState, {
+      imageVariant: "data",
+      title: emptyText.title,
+      description: emptyText.description
+    })),
+    headers: [{
+      key: 'file',
+      label: `File Name`,
+      render: _ref3 => {
+        let {
+          data
+        } = _ref3;
+        return /*#__PURE__*/React.createElement(_Table.BasicSingleCell, {
+          className: _FileUploadStoriesModule.default.mediumColumn
+        }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+          color: data.success ? 'success' : 'danger'
+        }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, data.file.name)));
+      }
+    }, {
+      key: 'file',
+      label: `File Type`,
+      render: _ref4 => {
+        let {
+          data
+        } = _ref4;
+        return /*#__PURE__*/React.createElement(_Table.BasicSingleCell, {
+          className: _FileUploadStoriesModule.default.mediumColumn
+        }, /*#__PURE__*/React.createElement(_Link.Link, {
+          as: "bodyMedium",
+          href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types",
+          target: "_blank"
+        }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, data.file.type)));
+      }
+    }, {
+      key: 'file',
+      label: 'File Size',
+      render: _ref5 => {
+        let {
+          data,
+          className
+        } = _ref5;
+        return /*#__PURE__*/React.createElement(_Table.BasicSingleCell, {
+          className: className
+        }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, (0, _helpers.convertFileSize)(data.file.size)));
+      }
+    }, {
+      key: 'success',
+      label: 'Is file Valid',
+      render: _ref6 => {
+        let {
+          data,
+          className
+        } = _ref6;
+        return /*#__PURE__*/React.createElement(_Table.BasicSingleCell, {
+          className: className
+        }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, data.success ? 'true' : 'false'));
+      }
+    }, {
+      key: 'reject',
+      label: 'Is File Rejected?',
+      render: _ref7 => {
+        let {
+          data,
+          className
+        } = _ref7;
+        return /*#__PURE__*/React.createElement(_Table.BasicSingleCell, {
+          className: className
+        }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, data.reject ? 'true' : 'false'));
+      }
+    }, {
+      key: 'rejectReason',
+      label: 'Rejection Reason',
+      render: _ref8 => {
+        let {
+          data,
+          className
+        } = _ref8;
+        return /*#__PURE__*/React.createElement(_Table.BasicSingleCell, {
+          className: className
+        }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, data.rejectReason || '-'));
+      }
+    }, {
+      key: 'showReUpload',
+      label: 'Show ReUpload',
+      render: _ref9 => {
+        let {
+          data,
+          className
+        } = _ref9;
+        return /*#__PURE__*/React.createElement(_Table.BasicSingleCell, {
+          className: className
+        }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, data.showReUpload ? 'true' : 'false'));
+      }
+    }]
+  });
+};