Add file uploader stories (#5356)

* Move file uploader basic stories to proper folder

* Update file uploader code

* Add file uploader stories

Author: epfeiffe

src/file-uploader/__tests__/file-uploader-item-preview.scenario.tsx

@@ -0,0 +1,20 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { type FileRow, FileUploader } from '..';
+
+export function Scenario() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
+  return (
+    <FileUploader
+      fileRows={fileRows}
+      hint={'Try uploading a file to see the itemPreview'}
+      itemPreview
+      setFileRows={setFileRows}
+    />
+  );
+}

src/file-uploader/__tests__/file-uploader-label-hint.scenario.tsx

@@ -0,0 +1,20 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { type FileRow, FileUploader } from '..';
+
+export function Scenario() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
+  return (
+    <FileUploader
+      fileRows={fileRows}
+      hint={'Test hint'}
+      label={'Test label'}
+      setFileRows={setFileRows}
+    />
+  );
+}

src/file-uploader/__tests__/file-uploader-long-loading-multiple-files.scenario.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { type FileRow, FileUploader } from '..';
+
+export function Scenario() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
+
+  const simulateFileProgressUpdates = (
+    fileToProcess: File,
+    fileToProcessId: string,
+    fileRows: FileRow[],
+    resolve: (file: File) => void
+  ) => {
+    const fileRowsCopy: FileRow[] = [...fileRows];
+    let indexOfFileToUpdate = fileRowsCopy.findIndex(
+      (fileRow: FileRow) => fileRow.id === fileToProcessId
+    );
+    let numberOfMockedLoadingSteps = 5 - (indexOfFileToUpdate % 3);
+    let mockedTotalLoadingTime = indexOfFileToUpdate % 2 === 0 ? 10000 : 8000;
+    for (let i = 0; i <= numberOfMockedLoadingSteps; i++) {
+      if (i === numberOfMockedLoadingSteps) {
+        // Simulates an onSuccess event
+        setTimeout(() => {
+          resolve(fileToProcess);
+        }, mockedTotalLoadingTime);
+      } else {
+        // Simulates an onLoading event
+        setTimeout(() => {
+          fileRowsCopy[indexOfFileToUpdate].progressAmount = (i / numberOfMockedLoadingSteps) * 100;
+          setFileRows([...fileRowsCopy]);
+        }, (i / numberOfMockedLoadingSteps) * mockedTotalLoadingTime);
+      }
+    }
+  };
+
+  return (
+    <FileUploader
+      fileRows={fileRows}
+      hint={
+        'Try uploading multiple files at once to see the progress bar upload independently for each file'
+      }
+      processFileOnDrop={(fileToProcess: File, fileToProcessId: string, fileRows: FileRow[]) => {
+        return new Promise((resolve) => {
+          simulateFileProgressUpdates(fileToProcess, fileToProcessId, fileRows, resolve);
+        });
+      }}
+      progressAmountStartValue={0}
+      setFileRows={setFileRows}
+    />
+  );
+}

src/file-uploader/__tests__/file-uploader-long-loading.scenario.tsx

@@ -0,0 +1,26 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { type FileRow, FileUploader } from '..';
+
+export function Scenario() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
+  return (
+    <FileUploader
+      fileRows={fileRows}
+      hint={'Try uploading a file, it will load for 10 seconds'}
+      processFileOnDrop={(file) => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve({ errorMessage: null });
+          }, 10000);
+        });
+      }}
+      setFileRows={setFileRows}
+    />
+  );
+}

src/file-uploader/__tests__/file-uploader-overrides.scenario.tsx

@@ -0,0 +1,67 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { type FileRow, FileUploader } from '..';
+import { useStyletron } from '../../styles'
+
+export function Scenario() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
+    {
+      errorMessage: null,
+      file: new File(['test file 1'], 'file-1.txt'),
+      id: '0',
+      progressAmount: 100,
+      status: 'processed',
+    },
+    {
+      errorMessage: 'Failed to upload',
+      file: new File(['test file 2'], 'file-2.txt'),
+      id: '1',
+      progressAmount: 20,
+      status: 'error',
+    },
+  ]);
+  const [, theme] = useStyletron();
+  return (
+    <FileUploader
+      fileRows={fileRows}
+      setFileRows={setFileRows}
+      overrides={{
+        ButtonComponent: {
+          props: {
+            overrides: {
+              BaseButton: {
+                style: {
+                  outline: `${theme.colors.warning} solid`,
+                },
+              },
+            },
+          },
+        },
+        ContentMessage: {
+          style: {
+            color: theme.colors.warning,
+          },
+        },
+        FileDragAndDrop: {
+          style: {
+            borderColor: theme.colors.warning,
+            borderStyle: 'dashed',
+            borderWidth: theme.sizing.scale0,
+          },
+        },
+        FileRows: {
+          style: {
+            marginLeft: theme.sizing.scale0,
+            marginRight: theme.sizing.scale0,
+            outline: `${theme.colors.warning} dashed`,
+          },
+        },
+      }}
+    />
+  );
+}

src/file-uploader/__tests__/file-uploader-upload-restrictions.scenario.tsx

@@ -0,0 +1,25 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { type FileRow, FileUploader } from '..';
+
+export function Scenario() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([]);
+  return (
+    <FileUploader
+      accept={['image/png', 'application/pdf']}
+      fileRows={fileRows}
+      hint={
+        'Try uploading files that break these conditions: 1. accept set to ["image/png", "application/pdf"], 2. minSize set to 20000 bytes (20 KB), 3. maxSize set to 100000 bytes (100 KB), 4. maxFiles set to 3'
+      }
+      maxFiles={3}
+      maxSize={100000}
+      minSize={20000}
+      setFileRows={setFileRows}
+    />
+  );
+}