@availity/mui-file-selector 0.1.0

package/src/lib/FilePickerBtn.test.tsx

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { FilePickerBtn } from './FilePickerBtn';
+
+const TestForm = () => {
+  const methods = useForm();
+  const ref = useRef<HTMLInputElement>(null);
+
+  return (
+    <FormProvider {...methods}>
+      <FilePickerBtn name="test" inputProps={{ ref }} />
+    </FormProvider>
+  );
+};
+
+describe('FilePickerBtn', () => {
+  test('should render successfully', () => {
+    render(<TestForm />);
+
+    expect(screen.getByText('Browse Files')).toBeTruthy();
+  });
+});

package/src/lib/FilePickerBtn.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, MouseEvent, RefObject } from 'react';
+import type { DropzoneInputProps } from 'react-dropzone';
+import { useFormContext } from 'react-hook-form';
+import { Button, ButtonProps } from '@availity/mui-button';
+import { Input } from '@availity/mui-form-utils';
+
+type FilePickerBtnProps = {
+  name: string;
+  maxSize?: number;
+  inputId?: string;
+  inputProps?: DropzoneInputProps & { ref?: RefObject<HTMLInputElement> };
+} & Omit<ButtonProps, 'onChange'>;
+
+export const FilePickerBtn = ({
+  name,
+  children = 'Browse Files',
+  color,
+  inputId,
+  inputProps = {},
+  maxSize,
+  onClick,
+  ...rest
+}: FilePickerBtnProps) => {
+  const { register, setValue } = useFormContext();
+
+  const { accept, multiple, ref, style, type: inputType, onChange } = inputProps;
+
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.target;
+
+    const value: File[] = [];
+    if (files) {
+      // FileList is not iterable. Must use for loop for now
+      for (let i = 0; i < files.length; i++) {
+        if (maxSize) {
+          console.log('file is too big:', files[i].size > maxSize);
+        }
+        value[i] = files[i];
+      }
+    }
+
+    setValue(name, value);
+
+    // if (onChange) onChange(event);
+  };
+
+  const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(event);
+  };
+
+  const field = register(name);
+
+  return (
+    <>
+      <Input
+        {...field}
+        onChange={handleOnChange}
+        value=""
+        inputRef={ref}
+        type={inputType}
+        sx={style}
+        inputProps={{
+          accept,
+          size: maxSize ?? undefined,
+          multiple,
+        }}
+        id={inputId}
+      />
+      <Button color={color} {...rest} onClick={handleOnClick} fullWidth={false}>
+        {children}
+      </Button>
+    </>
+  );
+};

package/src/lib/FilePickerInput.md

@@ -0,0 +1,82 @@
+import { ChangeEvent, RefObject, useState } from 'react';
+import { Input } from '@availity/mui-form-utils';
+
+const idCounter = () => {
+  let id = 0;
+  const increment = () => (id += 1);
+  const generateId = () => {
+    return `filepicker-${increment()}`;
+  };
+  return {
+    generateId,
+  };
+};
+
+const counter = idCounter();
+
+const inputSx = { display: 'none' };
+
+export type FilePickerInputProps = {
+  /** Identifies the field and matches the validation schema. */
+  name: string;
+  /** The file types you want to restrict uploading to. eg: ['.jpeg', '.jpg']. */
+  allowedFileTypes?: `.${string}`[];
+  /** id passed to the input component. It is randomly generated if not passed */
+  id?: string;
+  /** ref passed to the input component */
+  inputRef?: RefObject<HTMLInputElement>;
+  /** The maximum file size (in bytes) for a file to be uploaded. */
+  maxSize?: number;
+  /** Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt. */
+  multiple?: boolean;
+  /** Callback when the user has selected a file or multiple files. */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const FilePickerInput = ({
+  allowedFileTypes,
+  id,
+  inputRef,
+  maxSize,
+  multiple,
+  name,
+  onChange,
+}: FilePickerInputProps) => {
+  const [stateId] = useState(counter.generateId());
+
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.target;
+
+    // TODO: get size of file and compare to maxSize
+
+    const value: File[] = [];
+    if (files) {
+      // FileList is not iterable. Must use for loop for now
+      for (let i = 0; i < files.length; i++) {
+        if (maxSize) {
+          console.log('file is too big:', files[i].size > maxSize);
+        }
+        value[i] = files[i];
+      }
+    }
+
+    if (onChange) onChange(event);
+  };
+
+  const inputId = id || stateId;
+
+  return (
+    <Input
+      inputRef={inputRef}
+      sx={inputSx}
+      value=""
+      type="file"
+      inputProps={{
+        accept: Array.isArray(allowedFileTypes) && allowedFileTypes.length > 0 ? allowedFileTypes.join(',') : undefined,
+        multiple,
+      }}
+      id={inputId}
+      onChange={handleOnChange}
+    />
+  );
+};

package/src/lib/FileRow.md

@@ -0,0 +1,70 @@
+import { Button } from 'reactstrap';
+import Icon from '@availity/icon';
+import type Upload from '@availity/upload-core';
+
+import { UploadProgressBar } from './UploadProgressBar';
+
+const FILE_EXT_ICONS = {
+  png: 'file-image',
+  jpg: 'file-image',
+  jpeg: 'file-image',
+  gif: 'file-image',
+  ppt: 'file-powerpoint',
+  pptx: 'file-powerpoint',
+  xls: 'file-excel',
+  xlsx: 'file-excel',
+  doc: 'file-word',
+  docx: 'file-word',
+  txt: 'doc-alt',
+  text: 'doc-alt',
+  zip: 'file-archive',
+  '7zip': 'file-archive',
+  xml: 'file-code',
+  html: 'file-code',
+  pdf: 'file-pdf',
+} as const;
+
+type FileExtensionKey = keyof typeof FILE_EXT_ICONS;
+
+const isValidKey = (key: string): key is FileExtensionKey => {
+  return key ? key in FILE_EXT_ICONS : false;
+};
+
+export type FileRowProps = {
+  upload: Upload;
+  onRemoveFile: (id: string) => void;
+};
+
+export const FileRow = ({ upload, onRemoveFile }: FileRowProps) => {
+  const remove = () => {
+    onRemoveFile(upload.id);
+  };
+
+  const ext = upload.file.name.split('.').pop()?.toLowerCase() || '';
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : 'doc';
+  const extLabel = ext.toUpperCase();
+
+  return (
+    <tr>
+      <td className="align-middle" style={{ width: '10%' }}>
+        <Icon name={icon} title={`${extLabel} File Icon`}>
+          <span className="sr-only">{extLabel} File Icon</span>
+        </Icon>{' '}
+      </td>
+      <td className="align-middle" style={{ width: '35%' }}>
+        <div className="text-truncate" title={upload.file.name}>
+          {upload.file.name}
+        </div>
+      </td>
+      <td className="align-middle" style={{ width: '45%' }}>
+        <UploadProgressBar upload={upload} aria-label={`${upload.file.name} upload`} />
+      </td>
+      <td className="align-middle" style={{ width: '10%' }}>
+        <Button data-testid="remove-file-btn" color="link" className="text-danger px-0" onClick={remove}>
+          <Icon name="trash-empty" />
+          <span className="sr-only">Remove {upload.file.name}</span>
+        </Button>
+      </td>
+    </tr>
+  );
+};

package/src/lib/FileSelector.stories.tsx

@@ -0,0 +1,49 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Paper } from '@availity/mui-paper';
+
+import { FileSelector, FileSelectorProps } from './FileSelector';
+
+const meta: Meta<typeof FileSelector> = {
+  title: 'Components/File Selector/File Selector',
+  component: FileSelector,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <QueryClientProvider
+        client={
+          new QueryClient({
+            defaultOptions: {
+              queries: {
+                refetchOnWindowFocus: false,
+              },
+            },
+          })
+        }
+      >
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+export const _FileSelector: StoryObj<typeof FileSelector> = {
+  render: (props: FileSelectorProps) => (
+    <Paper sx={{ padding: '2rem' }}>
+      <FileSelector {...props} />
+    </Paper>
+  ),
+  args: {
+    name: 'file-selector',
+    allowedFileTypes: ['.txt'],
+    clientId: '123',
+    customerId: '456',
+    bucketId: '789',
+    maxSize: 1 * 1000 * 1000, // 1MB
+    isCloud: true,
+    multiple: true,
+  },
+};

package/src/lib/FileSelector.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { FileSelector } from './FileSelector';
+
+describe('FileSelector', () => {
+  test('should render successfully', () => {
+    const client = new QueryClient();
+    const { getByText } = render(
+      <QueryClientProvider client={client}>
+        <FileSelector name="test" bucketId="test" customerId="123" clientId="test" maxSize={1000} />
+      </QueryClientProvider>
+    );
+
+    expect(getByText('Upload file')).toBeTruthy();
+  });
+});

package/src/lib/FileSelector.tsx

@@ -0,0 +1,148 @@
+import { ReactNode, useState } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import type { FileRejection } from 'react-dropzone/typings/react-dropzone';
+import Upload, { Options } from '@availity/upload-core';
+
+import { Dropzone } from './Dropzone';
+import { FileList } from './FileList';
+import { FileTypesMessage } from './FileTypesMessage';
+import { useUploadCore } from './useUploadCore';
+import { Typography } from '@availity/mui-typography';
+
+const CLOUD_URL = '/cloud/web/appl/vault/upload/v1/resumable';
+
+export type FileSelectorProps = {
+  name: string;
+  bucketId: string;
+  customerId: string;
+  allowedFileNameCharacters?: string;
+  allowedFileTypes?: `.${string}`[];
+  children?: ReactNode;
+  clientId: string;
+  deliverFileOnSubmit?: boolean;
+  deliveryChannel?: string;
+  disabled?: boolean;
+  endpoint?: string;
+  fileDeliveryMetadata?: Record<string, unknown> | ((file: Upload) => Record<string, unknown>);
+  getDropRejectionMessages?: (rejections: FileRejection[]) => void;
+  isCloud?: boolean;
+  label?: ReactNode;
+  maxFiles?: number;
+  maxSize: number;
+  multiple?: boolean;
+  onDeliveryError?: (error: unknown) => void;
+  onDeliverySuccess?: () => void;
+  onSubmit?: (values: Record<string, unknown>) => void;
+  onSuccess?: (() => void)[];
+  onError?: ((error: Error) => void)[];
+  onFilePreUpload?: (() => boolean)[];
+  onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
+  onFileDelivery?: (upload: Upload) => void;
+};
+
+export const FileSelector = ({
+  name,
+  allowedFileNameCharacters,
+  allowedFileTypes = [],
+  bucketId,
+  clientId,
+  children,
+  customerId,
+  deliverFileOnSubmit = false,
+  deliveryChannel,
+  disabled = false,
+  endpoint,
+  fileDeliveryMetadata,
+  getDropRejectionMessages,
+  isCloud,
+  label = 'Upload file',
+  maxFiles = 1,
+  maxSize,
+  multiple = true,
+  // onDeliveryError,
+  // onDeliverySuccess,
+  onSubmit,
+  onSuccess,
+  onError,
+  onFilePreUpload = [],
+  onUploadRemove,
+  onFileDelivery,
+}: FileSelectorProps) => {
+  // const classes = classNames(
+  //   className,
+  //   metadata.touched ? 'is-touched' : 'is-untouched',
+  //   metadata.touched && metadata.error && 'is-invalid'
+  // );
+  const [totalSize, setTotalSize] = useState(0);
+
+  const methods = useForm();
+
+  const options: Options = {
+    bucketId,
+    customerId,
+    clientId,
+    fileTypes: allowedFileTypes,
+    maxSize,
+    allowedFileNameCharacters,
+    onError,
+    onSuccess,
+  };
+
+  if (onFilePreUpload) options.onPreStart = onFilePreUpload;
+  if (endpoint) options.endpoint = endpoint;
+  if (isCloud) options.endpoint = CLOUD_URL;
+
+  const { data: uploads = [] } = useUploadCore(methods.watch(name) || [], options);
+
+  const handleOnRemoveFile = (uploadId: string) => {
+    const newFiles = uploads.filter((upload) => upload.id !== uploadId);
+
+    if (newFiles.length !== uploads.length) {
+      const removedFile = uploads.find((upload) => upload.id === uploadId);
+
+      methods.setValue(name, newFiles);
+
+      if (!removedFile?.error && !removedFile?.errorMessage && removedFile?.file.size)
+        setTotalSize(totalSize - removedFile.file.size);
+      if (onUploadRemove) onUploadRemove(newFiles, uploadId);
+    }
+  };
+
+  const handleOSubmit = (values: Record<string, unknown>) => {
+    if (onSubmit) onSubmit(values);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(handleOSubmit)}>
+        <>
+          <Typography>{label}</Typography>
+          <Dropzone
+            name={name}
+            allowedFileNameCharacters={allowedFileNameCharacters}
+            allowedFileTypes={allowedFileTypes}
+            bucketId={bucketId}
+            clientId={clientId}
+            customerId={customerId}
+            deliverFileOnSubmit={deliverFileOnSubmit}
+            deliveryChannel={deliveryChannel}
+            disabled={disabled}
+            endpoint={endpoint}
+            fileDeliveryMetadata={fileDeliveryMetadata}
+            getDropRejectionMessages={getDropRejectionMessages}
+            isCloud={isCloud}
+            maxSize={maxSize}
+            multiple={multiple}
+            // onDeliveryError={onDeliveryError}
+            // onDeliverySuccess={onDeliverySuccess}
+            onFilePreUpload={onFilePreUpload}
+            onFileDelivery={onFileDelivery}
+          />
+          <FileTypesMessage allowedFileTypes={allowedFileTypes} maxFileSize={maxSize} />
+        </>
+        {children}
+        <FileList uploads={uploads} onRemoveFile={handleOnRemoveFile} />
+      </form>
+    </FormProvider>
+  );
+};

package/src/lib/FileTypesMessage.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+
+import { FileTypesMessage } from './FileTypesMessage';
+
+describe('FileTypesMessage', () => {
+  test('should render successfully', () => {
+    render(<FileTypesMessage allowedFileTypes={[]} maxFileSize={1000} />);
+
+    expect(screen.getByText(/All file types allowed/)).toBeTruthy();
+  });
+});

package/src/lib/FileTypesMessage.tsx

@@ -0,0 +1,23 @@
+import { Typography } from '@availity/mui-typography';
+
+import { formatBytes } from './util';
+
+type FileTypesMessageProps = {
+  allowedFileTypes: `.${string}`[];
+  maxFileSize: number;
+};
+
+export const FileTypesMessage = ({ allowedFileTypes, maxFileSize }: FileTypesMessageProps) => {
+  const fileSizeMsg = typeof maxFileSize === 'number' ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
+  const fileTypesMsg =
+    allowedFileTypes.length > 0
+      ? `Supported file types include: ${allowedFileTypes.join(', ')}.`
+      : 'All file types allowed.';
+
+  return (
+    <Typography variant="caption">
+      {fileSizeMsg}
+      {fileTypesMsg}
+    </Typography>
+  );
+};

package/src/lib/HeaderMessage.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+
+import { HeaderMessage } from './HeaderMessage';
+
+describe('HeaderMessage', () => {
+  test('should render successfully', () => {
+    render(<HeaderMessage maxFiles={5} maxSize={1000} />);
+
+    expect(screen.getByText(/Attach/)).toBeTruthy();
+  });
+});

package/src/lib/HeaderMessage.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@availity/mui-typography';
+
+import { formatBytes } from './util';
+
+export type HeaderMessageProps = {
+  maxFiles: number;
+  maxSize: number;
+};
+
+export const HeaderMessage = ({ maxFiles, maxSize }: HeaderMessageProps) => {
+  return (
+    <Typography variant="h6">
+      Attach up to {maxFiles} file(s), with a maximum of {formatBytes(maxSize)}
+    </Typography>
+  );
+};

package/src/lib/UploadProgressBar.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import Upload from '@availity/upload-core';
+
+import { UploadProgressBar } from './UploadProgressBar';
+
+describe('UploadProgressBar', () => {
+  test('should render successfully', () => {
+    const mockUpload: unknown = {
+      onProgress: [],
+      onError: [],
+      onSuccess: [],
+      errorMessage: '',
+      file: {
+        name: 'test',
+      },
+      percentage: 50,
+    };
+
+    render(<UploadProgressBar upload={mockUpload as Upload} />);
+
+    expect(screen.getByText('50%')).toBeTruthy();
+  });
+});

package/src/lib/UploadProgressBar.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+// import { ChangeEvent, FormEventHandler, useState } from 'react';
+import { LinearProgress } from '@availity/mui-progress';
+import type Upload from '@availity/upload-core';
+import { Typography } from '@availity/mui-typography';
+import { WarningTriangleIcon } from '@availity/mui-icon';
+
+export type UploadProgressBarProps = {
+  /** The upload instance returned by creating a new Upload via @availity/upload-core. */
+  upload: Upload;
+  /** Callback function to hook into the onProgress within the Upload instance provided in the upload prop. */
+  onProgress?: (upload: Upload) => void;
+  /** Callback function to hook into the onSuccess within the Upload instance provided in the upload prop. */
+  onSuccess?: (upload: Upload) => void;
+  /** Callback function to hook into the onError within the Upload instance provided in the upload prop. */
+  onError?: (upload: Upload) => void;
+};
+
+export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => {
+  const [statePercentage, setStatePercentage] = useState(upload.percentage || 0);
+  const [error, setError] = useState(false);
+  // const [password, setPassword] = useState('');
+  // const [modalOpen, setModalOpen] = useState(false);
+
+  const handleOnProgress = () => {
+    setStatePercentage(upload.percentage);
+    setError(false);
+
+    if (onProgress) onProgress(upload);
+  };
+
+  const handleOnError = () => {
+    setError(true);
+
+    if (onError) onError(upload);
+  };
+
+  const handleOnSuccess = () => {
+    setStatePercentage(100);
+    setError(false);
+
+    if (onSuccess) onSuccess(upload);
+  };
+
+  // const toggleModal = () => {
+  //   setModalOpen((prev) => !prev);
+  //   setPassword('');
+  // };
+
+  // const verifyPassword: FormEventHandler<HTMLFormElement> = (event) => {
+  //   event.preventDefault();
+  //   event.stopPropagation();
+  //   upload.sendPassword(password);
+  //   toggleModal();
+  // };
+
+  // const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+  //   setPassword(event.target.value);
+  // };
+
+  upload.onProgress.push(handleOnProgress);
+  upload.onSuccess.push(handleOnSuccess);
+  upload.onError.push(handleOnError);
+
+  return upload.errorMessage ? (
+    <>
+      <Typography color="text.error">
+        <WarningTriangleIcon /> {upload.errorMessage}
+      </Typography>
+      {/* {upload.status === 'encrypted' && (
+        <div className="pwRequired">
+          <Button color="primary" onClick={toggleModal}>
+            Enter password
+          </Button>
+          <Modal isOpen={modalOpen} toggle={toggleModal}>
+            <form onSubmit={verifyPassword}>
+              <ModalHeader toggle={toggleModal}>Enter Password</ModalHeader>
+              <ModalBody>
+                <Label for="upload-password">Password</Label>
+                <Input id="upload-password" onChange={handlePasswordChange} type="password" placeholder="password" />
+              </ModalBody>
+              <ModalFooter>
+                <Button color="primary">Ok</Button>
+              </ModalFooter>
+            </form>
+          </Modal>
+        </div>
+      )} */}
+    </>
+  ) : (
+    <LinearProgress value={statePercentage} aria-label={`${upload.file.name}-progress`} />
+  );
+};