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

package/lib/components/FileUpload/FileUpload.stories.tsx

@@ -1,958 +0,0 @@
-import * as React from 'react';
-
-import {convertFileSize} from '../../utils/helpers';
-import {getRandomDataVariation} from '../../utils/tokens';
-import {BasicDialog} from '../Dialog';
-import {EmptyState} from '../EmptyState';
-import {Link} from '../Link';
-import {BasicSingleCell, Table} from '../Table';
-import {BodyMedium, SubTitleMedium} from '../Text';
-import {Truncate} from '../Truncate';
-
-import type {FileUploadProps} from './';
-import type {FileObject} from './FileUpload';
-import {FileUpload} from './FileUpload';
-
-import css from './FileUpload.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/File Upload/File Upload',
-  component: 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.
- */
-export const _SingleFile = (args: FileUploadProps) => {
-  const [files, setFiles] = React.useState([]);
-  const ref = React.useRef(null);
-
-  return (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-              });
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-    </>
-  );
-};
-
-_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.
- */
-export const _MultiFile = (args: FileUploadProps) => {
-  const [files, setFiles] = React.useState([]);
-  const ref = React.useRef(null);
-  return (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-              });
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-    </>
-  );
-};
-
-_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.
- */
-export const _WithDeletionConfirmation = (args: FileUploadProps) => {
-  const [showConfirmation, setShowConfirmation] = React.useState(false);
-  const [fileIdToDelete, setFileIdToDelete] = React.useState('');
-  const [files, setFiles] = React.useState([]);
-  const ref = React.useRef(null);
-  return (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-      <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"
-      />
-    </>
-  );
-};
-
-_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.
- */
-export const _WithProgress = (args: FileUploadProps) => {
-  const [files, setFiles] = React.useState([]);
-  const ref = React.useRef(null);
-
-  const mockState = (id: string) => {
-    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 (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-              });
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-    </>
-  );
-};
-
-_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.
- */
-export const _WithIndeterminateProgress = (args: FileUploadProps) => {
-  const [files, setFiles] = React.useState([]);
-  const ref = React.useRef(null);
-
-  const mockState = (id: string) => {
-// @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 (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-              });
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-    </>
-  );
-};
-
-_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.
- */
-export const _WithCustomErrorMessages = (args: FileUploadProps) => {
-  const [files, setFiles] = React.useState([]);
-  const ref = React.useRef(null);
-
-  const mockState = (id: string, idx: number) => {
-    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 (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-              });
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-    </>
-  );
-};
-
-_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.
- */
-export const _WithMaxSizeValidation = (args: FileUploadProps) => {
-  const [files, setFiles] = React.useState([]);
-  const ref = React.useRef(null);
-
-  const mockState = (id: string) => {
-    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 (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-              });
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-    </>
-  );
-};
-
-_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.
- */
-export const _WithFileRefresh = (args: FileUploadProps) => {
-  const ref = React.useRef(null);
-  const [files, setFiles] = React.useState([]);
-
-  const mockState = (id: string) => {
-    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: string) => {
-// @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 (
-    <>
-      <div className={css.container}>
-        <div className={css.content}>
-          <FileUpload
-            {...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);
-              });
-            }}
-          />
-        </div>
-      </div>
-      <div className={css.fileDataContainer}>
-        <FileUploadData files={files || []} />
-      </div>
-    </>
-  );
-};
-
-_WithFileRefresh.args = {
-  label: 'Upload Files(Multiple files allowed)',
-  secondaryInstruction: 'Try uploading a file greater than 2MB',
-  maxFiles: 0,
-  maxSize: 2000000, // 2MB
-};
-
-type FileUploadTableProps = {
-  files: Array<FileObject>;
-};
-
-const emptyText = getRandomDataVariation();
-
-const FileUploadData = (
-  {
-    files,
-  }: FileUploadTableProps,
-) => (<div className={css.dataTable}>
-  <SubTitleMedium color="warning" className={css.textLabel}>
-    Data Table(This is not a part of File Upload Component)
-  </SubTitleMedium>
-  <DataTable files={files} />
-</div>);
-
-const DataTable = ({
-  files,
-}: {
-  files: Array<FileObject>;
-}) => (
-  <Table
-    entries={files}
-    emptyText={
-      <div className={css.emptyStateWrapper}>
-        <EmptyState
-          imageVariant="data"
-          title={emptyText.title}
-          description={emptyText.description}
-        ></EmptyState>
-      </div>
-    }
-    headers={[
-      {
-        key: 'file',
-        label: `File Name`,
-        render: ({data}) => (
-          <BasicSingleCell className={css.mediumColumn}>
-            <BodyMedium color={data.success ? 'success' : 'danger'}>
-              <Truncate>{data.file.name}</Truncate>
-            </BodyMedium>
-          </BasicSingleCell>
-        ),
-      },
-      {
-        key: 'file',
-        label: `File Type`,
-        render: ({data}) => (
-          <BasicSingleCell className={css.mediumColumn}>
-            <Link
-              as="bodyMedium"
-              href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types"
-              target="_blank"
-            >
-              <Truncate>{data.file.type}</Truncate>
-            </Link>
-          </BasicSingleCell>
-        ),
-      },
-      {
-        key: 'file',
-        label: 'File Size',
-        render: ({data, className}) => (
-          <BasicSingleCell className={className}>
-            <BodyMedium>{convertFileSize(data.file.size)}</BodyMedium>
-          </BasicSingleCell>
-        ),
-      },
-      {
-        key: 'success',
-        label: 'Is file Valid',
-        render: ({data, className}) => (
-          <BasicSingleCell className={className}>
-            <BodyMedium>{data.success ? 'true' : 'false'}</BodyMedium>
-          </BasicSingleCell>
-        ),
-      },
-      {
-        key: 'reject',
-        label: 'Is File Rejected?',
-        render: ({data, className}) => (
-          <BasicSingleCell className={className}>
-            <BodyMedium>{data.reject ? 'true' : 'false'}</BodyMedium>
-          </BasicSingleCell>
-        ),
-      },
-      {
-        key: 'rejectReason',
-        label: 'Rejection Reason',
-        render: ({data, className}) => (
-          <BasicSingleCell className={className}>
-            <BodyMedium>{data.rejectReason || '-'}</BodyMedium>
-          </BasicSingleCell>
-        ),
-      },
-      {
-        key: 'showReUpload',
-        label: 'Show ReUpload',
-        render: ({data, className}) => (
-          <BasicSingleCell className={className}>
-            <BodyMedium>{data.showReUpload ? 'true' : 'false'}</BodyMedium>
-          </BasicSingleCell>
-        ),
-      },
-    ]}
-  />
-);