@availity/mui-file-selector 1.6.6 → 1.7.1

package/src/lib/FileSelector2.stories.tsx

@@ -0,0 +1,253 @@
+// Each exported component in the package should have its own stories file
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Paper } from '@availity/mui-paper';
+import { Alert, AlertProps, AlertTitle } from '@availity/mui-alert';
+import { Grid } from '@availity/mui-layout';
+import { Button } from '@availity/mui-button';
+import Collapse from '@mui/material/Collapse';
+
+import { FileSelector2, FileSelector2Props } from './FileSelector2';
+
+const meta: Meta<typeof FileSelector2> = {
+  title: 'Components/File Selector/FileSelector2',
+  component: FileSelector2,
+  tags: ['autodocs'],
+  args: {
+    name: 'file-selector-2',
+    allowedFileTypes: ['.txt', '.png', '.pdf'],
+    clientId: '123',
+    customerId: '456',
+    bucketId: '789',
+    uploadOptions: {
+      retryDelays: [],
+    },
+    maxFiles: 2,
+    maxSize: 1 * 1024 * 1024, // 1MB
+    enableDropArea: true,
+    isCloud: true,
+    multiple: true,
+  },
+  argTypes: {
+    customSizeMessage: {
+      control: 'text',
+    },
+    customTypesMessage: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+const DismissableAlert = (props: AlertProps) => {
+  const [visible, setVisible] = useState(true);
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <Collapse in={visible}>
+      <Alert onClose={onClose} {...props} />
+    </Collapse>
+  );
+};
+
+export const _FileSelector2: StoryObj<typeof FileSelector2> = {
+  render: (props: FileSelector2Props) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const uploads = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector2 {...props}>
+              <DismissableAlert severity="warning">
+                <AlertTitle>Make an Appeal</AlertTitle>
+                This is an example alert. It is not part of the component. `children` you pass to the component will
+                show up here.
+              </DismissableAlert>
+            </FileSelector2>
+            {uploads.length > 0 && (
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+};
+
+/** Set `enableDropzone` to `false` for a button only file selector. */
+export const _FileSelector2ButtonOnly: StoryObj<typeof FileSelector2> = {
+  render: (props: FileSelector2Props) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const uploads = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector2 {...props} enableDropArea={false} />
+            {uploads.length > 0 && (
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+};
+
+/** Upload password protected files. _For this example, the password for any file is '1234'_ */
+export const _FileSelector2Encrypted: StoryObj<typeof FileSelector2> = {
+  render: (props: Omit<FileSelector2Props, 'bucketId'>) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const uploads = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector2 {...props} bucketId="enc" />
+            {uploads.length > 0 && (
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+  args: {
+    bucketId: 'enc',
+  },
+  argTypes: {
+    bucketId: { control: false },
+  },
+};
+
+export const _FileSelector2CustomTypesMessage: StoryObj<typeof FileSelector2> = {
+  render: (props: FileSelector2Props) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const uploads = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector2 {...props}>
+              <DismissableAlert severity="warning">
+                <AlertTitle>Make an Appeal</AlertTitle>
+                This is an example alert. It is not part of the component. `children` you pass to the component will
+                show up here.
+              </DismissableAlert>
+            </FileSelector2>
+            {uploads.length > 0 && (
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+  args: {
+    customTypesMessage: 'Only cool file types allowed',
+  },
+};
+
+export const _FileSelector2CustomSizeMessage: StoryObj<typeof FileSelector2> = {
+  render: (props: FileSelector2Props) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const uploads = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector2 {...props}>
+              <DismissableAlert severity="warning">
+                <AlertTitle>Make an Appeal</AlertTitle>
+                This is an example alert. It is not part of the component. `children` you pass to the component will
+                show up here.
+              </DismissableAlert>
+            </FileSelector2>
+            {uploads.length > 0 && (
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+  args: {
+    customSizeMessage: 'Only huge files allowed. ',
+  },
+};

package/src/lib/FileSelector2.test.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { render } from '@testing-library/react';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import { FileSelector2 } from './FileSelector2';
+
+const TestForm = ({ children }: { children: ReactNode }) => {
+  const methods = useForm();
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('FileSelector2', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <TestForm>
+        <FileSelector2 name="test" bucketId="test" customerId="123" clientId="test" maxSize={1000} maxFiles={1} />
+      </TestForm>
+    );
+
+    expect(getByText('Upload file')).toBeTruthy();
+  });
+});

package/src/lib/FileSelector2.tsx

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { FileRejection } from 'react-dropzone/typings/react-dropzone';
+import type { default as Upload } from '@availity/upload-core';
+import { Grid } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
+import { Alert, AlertTitle } from '@availity/mui-alert';
+
+import { Dropzone2 } from './Dropzone2';
+import { ErrorAlert } from './ErrorAlert';
+import { FileList2 } from './FileList2';
+import { FileTypesMessage } from './FileTypesMessage';
+import { HeaderMessage } from './HeaderMessage';
+import type { Options } from './useUploadCore';
+
+import { CLOUD_URL } from './FileSelector';
+import type { FileSelectorProps } from './FileSelector';
+
+export type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptions'> & {
+  onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
+};
+
+/**
+ * `<FileSelector2 />` is the future of the the `<FileSelector />`
+ * component. In a future major release, the `<FileSelector />` and
+ * `<FileSelector2 />` components will be consolidated into a single
+ * component.
+ *
+ * `<FileSelector2 />` removes the reliance on `@tanstack/react-query`. The
+ * `Upload` object can now be accessed from the form state.
+ */
+export const FileSelector2 = ({
+  name,
+  allowedFileNameCharacters,
+  allowedFileTypes = [],
+  bucketId,
+  clientId,
+  children,
+  customSizeMessage,
+  customTypesMessage,
+  customerId,
+  customFileRow,
+  disabled = false,
+  enableDropArea = true,
+  endpoint,
+  isCloud,
+  label = 'Upload file',
+  maxFiles,
+  maxSize,
+  multiple = true,
+  onChange,
+  onDrop,
+  onUploadRemove,
+  uploadOptions,
+  validator,
+  disableRemove,
+}: FileSelector2Props) => {
+  const [totalSize, setTotalSize] = useState(0);
+  const [fileRejections, setFileRejections] = useState<(FileRejection & { id: number })[]>([]);
+
+  const formMethods = useFormContext();
+
+  const options: Options = {
+    ...uploadOptions,
+    bucketId,
+    customerId,
+    clientId,
+    fileTypes: allowedFileTypes,
+    maxSize,
+    allowedFileNameCharacters,
+  };
+
+  // Endpoint is set by default in upload-core so check if it exists before passing `undefined`
+  if (endpoint) options.endpoint = endpoint;
+  // Override endpoint if using the cloud
+  if (isCloud) options.endpoint = CLOUD_URL;
+
+  const handleOnRemoveFile = (uploadId: string, upload: Upload) => {
+    const prevFiles: Upload[] = formMethods.getValues(name);
+    const newFiles = prevFiles.filter((prev) => prev.file.name !== upload.file.name);
+
+    if (newFiles.length !== prevFiles.length) {
+      const removedFile = prevFiles.find((prev) => prev.file.name === upload.file.name);
+
+      // Stop upload
+      try {
+        upload.abort();
+      } catch {
+        console.error('Encountered an issue stopping the file upload');
+      }
+
+      // Remove from context and cache
+      formMethods.setValue(name, newFiles);
+
+      if (removedFile?.file.size) setTotalSize(totalSize - removedFile.file.size);
+
+      if (onUploadRemove) onUploadRemove(newFiles, uploadId);
+    }
+  };
+
+  const uploads = (formMethods.watch(name) as Upload[]) || [];
+
+  const handleRemoveRejection = (id: number) => {
+    const rejections = fileRejections.filter((value) => value.id !== id);
+    setFileRejections(rejections);
+  };
+
+  const TOO_MANY_FILES_CODE = 'too-many-files';
+
+  // Extract too-many-files rejections
+  const tooManyFilesRejections = fileRejections.filter((rejection) =>
+    rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+
+  // Extract other rejections
+  const otherRejections = fileRejections.filter(
+    (rejection) => !rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+
+  return (
+    <>
+      {enableDropArea ? (
+        <>
+          {label ? <Typography marginBottom="4px">{label}</Typography> : null}
+          <Dropzone2
+            name={name}
+            allowedFileTypes={allowedFileTypes}
+            disabled={disabled}
+            enableDropArea={enableDropArea}
+            maxFiles={maxFiles}
+            maxSize={maxSize}
+            multiple={multiple}
+            onChange={onChange}
+            onDrop={onDrop}
+            setFileRejections={setFileRejections}
+            setTotalSize={setTotalSize}
+            uploadOptions={options}
+            validator={validator}
+          />
+          <FileTypesMessage
+            allowedFileTypes={allowedFileTypes}
+            maxFileSize={maxSize}
+            customSizeMessage={customSizeMessage}
+            customTypesMessage={customTypesMessage}
+            variant="caption"
+          />
+          {children}
+        </>
+      ) : (
+        <Grid container rowSpacing={3} flexDirection="column">
+          <Grid>
+            <HeaderMessage maxFiles={maxFiles} maxSize={maxSize} />
+            <FileTypesMessage
+              allowedFileTypes={allowedFileTypes}
+              customSizeMessage={customSizeMessage}
+              customTypesMessage={customTypesMessage}
+              variant="body2"
+            />
+          </Grid>
+          {children ? <Grid>{children}</Grid> : null}
+          <Grid>
+            <Dropzone2
+              name={name}
+              allowedFileTypes={allowedFileTypes}
+              disabled={disabled}
+              enableDropArea={enableDropArea}
+              maxFiles={maxFiles}
+              maxSize={maxSize}
+              multiple={multiple}
+              onChange={onChange}
+              onDrop={onDrop}
+              setFileRejections={setFileRejections}
+              setTotalSize={setTotalSize}
+              uploadOptions={options}
+              validator={validator}
+            />
+          </Grid>
+        </Grid>
+      )}
+      {tooManyFilesRejections.length > 0 && (
+        <Alert
+          severity="error"
+          onClose={() => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id))}
+        >
+          <AlertTitle>Items not allowed.</AlertTitle>
+          Too many files are selected for upload, maximum {maxFiles} allowed.
+        </Alert>
+      )}
+
+      {otherRejections.length > 0 &&
+        otherRejections.map((rejection) => (
+          <ErrorAlert
+            key={rejection.id}
+            errors={rejection.errors}
+            fileName={rejection.file.name}
+            id={rejection.id}
+            onClose={() => handleRemoveRejection(rejection.id)}
+          />
+        ))}
+      <FileList2
+        uploads={uploads || []}
+        options={options}
+        onRemoveFile={handleOnRemoveFile}
+        customFileRow={customFileRow}
+        disableRemove={disableRemove}
+      />
+    </>
+  );
+};

package/src/lib/util.test.ts

@@ -0,0 +1,16 @@
+import { dedupeErrors } from './util';
+
+describe('util', () => {
+  it('should remove duplicate errors', () => {
+    expect(
+      dedupeErrors([
+        { message: 'error 1', code: '123' },
+        { message: 'error 2', code: '1234' },
+        { message: 'error 1', code: '123' },
+      ])
+    ).toEqual([
+      { message: 'error 1', code: '123' },
+      { message: 'error 2', code: '1234' },
+    ]);
+  });
+});

package/src/lib/util.ts

@@ -10,6 +10,7 @@ import {
   FilePowerpointIcon,
   FileWordIcon,
 } from '@availity/mui-icon';
+import type { FileError } from 'react-dropzone';
 
 export function formatBytes(bytes: number, decimals = 2) {
   if (!+bytes) return '0 Bytes';
@@ -22,7 +23,6 @@ export function formatBytes(bytes: number, decimals = 2) {
 
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
-
 export const FILE_EXT_ICONS = {
   png: FileImageIcon,
   jpg: FileImageIcon,
@@ -48,9 +48,20 @@ export type FileExtensionKey = keyof typeof FILE_EXT_ICONS;
 
 export const isValidKey = (key: string): key is FileExtensionKey => (key ? key in FILE_EXT_ICONS : false);
 
+export const getFileExtension = (fileName: string) => fileName.split('.').pop()?.toLowerCase() || '';
+
 export const getFileExtIcon = (fileName: string) => {
-  const ext = fileName.split('.').pop()?.toLowerCase() || '';
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
+  const ext = getFileExtension(fileName);
+  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
+};
+
+export const dedupeErrors = (errors: FileError[]) => {
+  const dedupedErrors = errors.reduce((acc, error) => {
+    if (!acc.find((err) => err.code === error.code)) {
+      acc.push(error);
+    }
+    return acc;
+  }, [] as FileError[]);
 
-  return icon;
+  return dedupedErrors;
 };