@availity/mui-file-selector 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2024-10-31)
+
+### Dependency Updates
+
+* `mui-button` updated to version `0.1.0`
+* `mui-divider` updated to version `0.1.0`
+* `mui-form-utils` updated to version `0.1.0`
+* `mui-icon` updated to version `0.1.0`
+* `mui-layout` updated to version `0.1.0`
+* `mui-list` updated to version `0.1.0`
+* `mui-progress` updated to version `0.1.0`
+* `mui-typography` updated to version `0.1.0`
+* `mui-paper` updated to version `0.1.0`
+
+### Features
+
+* add FileSelector ([7ad1f7b](https://github.com/Availity/element/commit/7ad1f7bb364bbeb2048d2ff4c9b0a2b1a1e33777))
+
+
+### Bug Fixes
+
+* **mui-file-selector:** update types ([477c992](https://github.com/Availity/element/commit/477c9921792ef35302b1b21d17056d16434c7d98))

package/README.md

@@ -0,0 +1,61 @@
+# @availity/mui-file-selector
+
+> Availity MUI File Selector component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-file-selector.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-file-selector)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-file-selector.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-file-selector)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-file-selector?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-file-selector/package.json)
+
+## Documentation
+
+This package extends the MUI File Selector component: [MUI File Selector Docs](https://mui.com/components/file-selector/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-file-selector-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+#### NPM
+
+_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
+
+```bash
+npm install @availity/mui-file-selector
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-file-selector
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { FileSelector } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { FileSelector } from '@availity/mui-file-selector';
+```

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import Upload from '@availity/upload-core';
+
+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;
+};
+declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+export { UploadProgressBar, type UploadProgressBarProps };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import Upload from '@availity/upload-core';
+
+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;
+};
+declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+export { UploadProgressBar, type UploadProgressBarProps };

package/dist/index.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  UploadProgressBar: () => UploadProgressBar
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/UploadProgressBar.tsx
+var import_react = require("react");
+var import_mui_progress = require("@availity/mui-progress");
+var import_mui_typography = require("@availity/mui-typography");
+var import_mui_icon = require("@availity/mui-icon");
+var import_jsx_runtime = require("react/jsx-runtime");
+var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
+  const [statePercentage, setStatePercentage] = (0, import_react.useState)(upload.percentage || 0);
+  const [error, setError] = (0, import_react.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);
+  };
+  upload.onProgress.push(handleOnProgress);
+  upload.onSuccess.push(handleOnSuccess);
+  upload.onError.push(handleOnError);
+  return upload.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, { color: "text.error", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.WarningTriangleIcon, {}),
+    " ",
+    upload.errorMessage
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UploadProgressBar
+});

package/dist/index.mjs

@@ -0,0 +1,38 @@
+// src/lib/UploadProgressBar.tsx
+import { useState } from "react";
+import { LinearProgress } from "@availity/mui-progress";
+import { Typography } from "@availity/mui-typography";
+import { WarningTriangleIcon } from "@availity/mui-icon";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
+  const [statePercentage, setStatePercentage] = useState(upload.percentage || 0);
+  const [error, setError] = 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);
+  };
+  upload.onProgress.push(handleOnProgress);
+  upload.onSuccess.push(handleOnSuccess);
+  upload.onError.push(handleOnError);
+  return upload.errorMessage ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Typography, { color: "text.error", children: [
+    /* @__PURE__ */ jsx(WarningTriangleIcon, {}),
+    " ",
+    upload.errorMessage
+  ] }) }) : /* @__PURE__ */ jsx(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+};
+export {
+  UploadProgressBar
+};

package/introduction.stories.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/File Selector/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'file-selector',
+  coverageDirectory: '../../coverage/file-selector',
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@availity/mui-file-selector",
+  "version": "0.1.0",
+  "description": "Availity MUI file-selector Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-file-selector-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/file-selector"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "dependencies": {
+    "@availity/api-axios": "^9.0.4",
+    "@availity/mui-button": "^0.6.11",
+    "@availity/mui-divider": "^0.4.0",
+    "@availity/mui-form-utils": "^0.14.0",
+    "@availity/mui-icon": "^0.11.0",
+    "@availity/mui-layout": "^0.2.0",
+    "@availity/mui-list": "^0.2.0",
+    "@availity/mui-progress": "^0.4.0",
+    "@availity/mui-typography": "^0.2.1",
+    "@availity/upload-core": "^6.1.1",
+    "@tanstack/react-query": "^4.36.1",
+    "react-dropzone": "^11.7.1",
+    "react-hook-form": "^7.51.3",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.15.15",
+    "@types/tus-js-client": "^1.8.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-file-selector",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/file-selector/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/file-selector/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/file-selector"],
+      "options": {
+        "jestConfig": "packages/file-selector/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/UploadProgressBar';

package/src/lib/Dropzone.test.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import { Dropzone } from './Dropzone';
+
+const TestForm = ({ children }: { children: ReactNode }) => {
+  const methods = useForm();
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('Dropzone', () => {
+  test('should render successfully', () => {
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <TestForm>
+          <Dropzone name="test" bucketId="test" customerId="123" clientId="test" maxSize={1000} />
+        </TestForm>
+      </QueryClientProvider>
+    );
+
+    expect(screen.getByText('Drag and Drop Files Here')).toBeTruthy();
+  });
+});

package/src/lib/Dropzone.tsx

@@ -0,0 +1,185 @@
+import { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
+import { useDropzone, FileRejection, DropEvent } from 'react-dropzone';
+import { v4 as uuid } from 'uuid';
+import { Divider } from '@availity/mui-divider';
+import { CloudDownloadIcon } from '@availity/mui-icon';
+import { Box, Stack } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
+import Upload, { Options } from '@availity/upload-core';
+
+import { FilePickerBtn } from './FilePickerBtn';
+
+const outerBoxStyles = {
+  backgroundColor: 'background.canvas',
+  border: '1px dotted',
+  borderRadius: '4px',
+  padding: '2rem',
+};
+
+const innerBoxStyles = {
+  width: '100%',
+  height: '100%',
+};
+
+const CLOUD_URL = '/cloud/web/appl/vault/upload/v1/resumable';
+
+export type DropzoneProps = {
+  name: string;
+  bucketId: string;
+  clientId: string;
+  customerId: string;
+  allowedFileNameCharacters?: string;
+  allowedFileTypes?: `.${string}`[];
+  deliverFileOnSubmit?: boolean;
+  deliveryChannel?: string;
+  disabled?: boolean;
+  endpoint?: string;
+  fileDeliveryMetadata?: Record<string, unknown> | ((file: Upload) => Record<string, unknown>);
+  getDropRejectionMessages?: (fileRejectsions: FileRejection[]) => void;
+  isCloud?: boolean;
+  maxFiles?: number;
+  maxSize?: number;
+  multiple?: boolean;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  // onDeliveryError?: (responses: unknown[]) => void;
+  // onDeliverySuccess?: (responses: unknown[]) => void;
+  onFileDelivery?: (upload: Upload) => void;
+  onFilePreUpload?: ((upload: Upload) => boolean)[];
+};
+
+export const Dropzone = ({
+  allowedFileNameCharacters,
+  allowedFileTypes = [],
+  bucketId,
+  clientId,
+  customerId,
+  deliveryChannel,
+  // deliverFileOnSubmit,
+  fileDeliveryMetadata,
+  disabled,
+  endpoint,
+  getDropRejectionMessages,
+  isCloud,
+  maxFiles,
+  maxSize,
+  multiple,
+  name,
+  onChange,
+  onClick,
+  onFilePreUpload,
+  onFileDelivery,
+}: DropzoneProps) => {
+  const [totalSize, setTotalSize] = useState(0);
+  const [files, setFiles] = useState<Upload[]>([]);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: FileRejection[], dropEvent: DropEvent) => {
+      // Do something with the files
+      console.log('Dropzone acceptedFiles:', acceptedFiles);
+      console.log('Dropzone fileRejections:', fileRejections);
+      console.log('Dropzone dropEvent:', dropEvent);
+
+      // Verify we have not exceeded max number of files
+      if (maxFiles && acceptedFiles.length > maxFiles) {
+        acceptedFiles.slice(0, Math.max(9, maxFiles));
+      }
+
+      const uploads = acceptedFiles.map((file) => {
+        const options: Options = {
+          bucketId,
+          customerId,
+          clientId,
+          fileTypes: allowedFileTypes,
+          maxSize,
+          allowedFileNameCharacters,
+        };
+
+        if (onFilePreUpload) options.onPreStart = onFilePreUpload;
+        if (endpoint) options.endpoint = endpoint;
+        if (isCloud) options.endpoint = CLOUD_URL;
+
+        const upload = new Upload(file, options);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        upload.id = `${upload.id}-${uuid()}`;
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (file.dropRejectionMessage) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          upload.errorMessage = file.dropRejectionMessage;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+        } else if (maxSize && totalSize + newFilesTotalSize + upload.file.size > maxSize) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          upload.errorMessage = 'Total documents size is too large';
+        } else {
+          upload.start();
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          newFilesTotalSize += upload.file.size;
+        }
+        if (onFileDelivery) {
+          onFileDelivery(upload);
+        } else if (deliveryChannel && fileDeliveryMetadata) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // upload.onSuccess.push(() => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // if (upload?.references?.[0]) {
+          // allow form to revalidate when upload is complete
+          // setFieldTouched(name, true);
+          // deliver upon upload complete, not form submit
+          // if (!deliverFileOnSubmit) {
+          //   callFileDelivery(upload);
+          // }
+          // }
+          // });
+        }
+
+        return upload;
+      });
+
+      // Set uploads somewhere. state?
+      setFiles(files);
+
+      if (getDropRejectionMessages) getDropRejectionMessages(fileRejections);
+    },
+    [getDropRejectionMessages]
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  const accept = allowedFileTypes.join(',');
+
+  return (
+    <Box sx={outerBoxStyles} {...getRootProps()}>
+      <Box sx={innerBoxStyles}>
+        <Stack spacing={2} divider={<Divider>OR</Divider>} alignItems="center" justifyContent="center">
+          <>
+            <CloudDownloadIcon fontSize="xlarge" color="secondary" />
+            <Typography variant="subtitle2" fontWeight="700">
+              Drag and Drop Files Here
+            </Typography>
+            <FilePickerBtn
+              name={name}
+              color="primary"
+              disabled={disabled}
+              maxSize={maxSize}
+              onClick={onClick}
+              inputProps={getInputProps({
+                multiple,
+                accept,
+                onChange,
+              })}
+            />
+          </>
+        </Stack>
+      </Box>
+    </Box>
+  );
+};

package/src/lib/FileList.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+
+import { FileList } from './FileList';
+
+describe('FileList', () => {
+  test('should render successfully', () => {
+    render(
+      <FileList
+        uploads={[]}
+        onRemoveFile={() => {
+          // noop
+        }}
+      />
+    );
+  });
+});

package/src/lib/FileList.tsx

@@ -0,0 +1,70 @@
+import type Upload from '@availity/upload-core';
+import { List, ListItem, ListItemText, ListItemIcon, ListItemButton } from '@availity/mui-list';
+import { DeleteIcon, FileIcon } from '@availity/mui-icon';
+import { Grid } from '@availity/mui-layout';
+
+import { UploadProgressBar } from './UploadProgressBar';
+import { formatBytes, getFileExtIcon } from './util';
+
+type FileRowProps = {
+  /** The upload instance returned by creating a new Upload via @availity/upload-core. */
+  upload: Upload;
+  /** Callback called when file is removed. The callback is passed the id of the file that was removed. */
+  onRemoveFile: (id: string) => void;
+};
+
+const FileRow = ({ upload, onRemoveFile }: FileRowProps) => {
+  const { ext, icon } = getFileExtIcon(upload.file.name);
+  console.log('ext, icon:', ext, icon);
+
+  return (
+    <ListItem>
+      <Grid container spacing={2} alignItems="center" justifyContent="space-between" width="100%">
+        <Grid xs={1}>
+          <ListItemIcon>
+            <FileIcon />
+          </ListItemIcon>
+        </Grid>
+        <Grid xs={4}>
+          <ListItemText>{upload.trimFileName(upload.file.name)}</ListItemText>
+        </Grid>
+        <Grid xs={2}>
+          <ListItem>{formatBytes(upload.file.size)}</ListItem>
+        </Grid>
+        <Grid xs={4}>
+          <UploadProgressBar upload={upload} />
+        </Grid>
+        <Grid xs={1}>
+          <ListItemButton>
+            <ListItemIcon
+              onClick={() => {
+                onRemoveFile(upload.id);
+              }}
+            >
+              <DeleteIcon />
+            </ListItemIcon>
+          </ListItemButton>
+        </Grid>
+      </Grid>
+    </ListItem>
+  );
+};
+
+export type FileListProps = {
+  /** List of Upload objects */
+  uploads: Upload[];
+  /** Callback called when file is removed. The callback is passed the id of the file that was removed. */
+  onRemoveFile: (id: string) => void;
+};
+
+export const FileList = ({ uploads, onRemoveFile }: FileListProps) => {
+  if (uploads.length === 0) return null;
+
+  return (
+    <List>
+      {uploads.map((upload) => {
+        return <FileRow key={upload.id} upload={upload} onRemoveFile={onRemoveFile} />;
+      })}
+    </List>
+  );
+};