@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -1,952 +0,0 @@
-"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'));
-      }
-    }]
-  });
-};