feat: add FileSelector

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "eslint.validate": ["json"]
+  "eslint.validate": [
+    "json"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/element-storybook/.storybook/main.ts

@@ -1,4 +1,4 @@
-import { dirname, join } from "path";
+import { dirname, join } from 'path';
 import remarkGfm from 'remark-gfm';
 import { StorybookConfig } from '@storybook/react-vite';
 
@@ -7,13 +7,13 @@ const config: StorybookConfig = {
     '../src/*.mdx',
     '../src/**/*.@(stories.@(js|jsx|ts|tsx|mdx))',
     '../../../packages/*/*.mdx',
-    '../../../packages/*/src/lib/*.@(stories.@(js|jsx|ts|tsx|mdx))'
+    '../../../packages/*/src/lib/*.@(stories.@(js|jsx|ts|tsx|mdx))',
   ],
 
   addons: [
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-themes"),
-    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-a11y'),
     {
       name: '@storybook/addon-docs',
       options: {
@@ -24,11 +24,11 @@ const config: StorybookConfig = {
         },
       },
     },
-    getAbsolutePath("@chromatic-com/storybook")
+    getAbsolutePath('@chromatic-com/storybook'),
   ],
 
   framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {
       builder: {
         viteConfigPath: '',
@@ -44,7 +44,7 @@ const config: StorybookConfig = {
           : true,
     },
 
-    reactDocgen: 'react-docgen-typescript'
+    reactDocgen: 'react-docgen-typescript',
   },
 
   staticDirs: ['../../../static'],
@@ -57,6 +57,6 @@ export default config;
 // Check https://storybook.js.org/docs/react/builders/vite#configuration
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs
 
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, 'package.json')));
 }

package.json

@@ -21,6 +21,7 @@
     "create:generator": "nx generate @nx/plugin:generator ${1} --project=${0}",
     "create:package": "nx generate @availity/nx-generator:nx-generator ${0}",
     "create:plugin": "nx g @nx/plugin:plugin ${0}",
+    "lint": "nx run-many --target=lint --all --exclude=nx-generator",
     "lint:affected": "nx affected --target=lint --exclude=nx-generator",
     "postinstall": "is-ci || husky install",
     "publish:affected": "nx affected --target=publish",
@@ -95,7 +96,8 @@
     "tslib": "^2.6.2",
     "typescript": "5.4.5",
     "undici": "^5.28.4",
-    "vite": "5.2.8"
+    "vite": "5.2.8",
+    "vite-plugin-node-polyfills": "^0.22.0"
   },
   "resolutions": {
     "markdown-to-jsx": "7.1.9"

packages/autocomplete/package.json

@@ -36,7 +36,7 @@
     "@mui/types": "^7.2.14"
   },
   "devDependencies": {
-    "@availity/api-axios": "^9.0.0",
+    "@availity/api-axios": "^9.0.4",
     "@availity/mui-form-utils": "workspace:^",
     "@availity/mui-textfield": "workspace:^",
     "@mui/material": "^5.15.15",

packages/avatar/package.json

@@ -48,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/api-axios": "^9.0.0",
+    "@availity/api-axios": "^9.0.4",
     "@availity/design-tokens": "workspace:^"
   }
 }

packages/divider/src/lib/Divider.tsx

@@ -1,6 +1,6 @@
 import { default as MuiDivider, DividerProps as MuiDividerProps } from '@mui/material/Divider';
 
-export type DividerProps = Omit<MuiDividerProps, 'children' | 'textAlign'>;
+export type DividerProps = Omit<MuiDividerProps, 'textAlign'>;
 
 export const Divider = (props: DividerProps): JSX.Element => {
   return <MuiDivider {...props} />;

packages/element/package.json

@@ -35,6 +35,7 @@
     "@availity/mui-event-tracker": "workspace:*",
     "@availity/mui-favorites": "workspace:*",
     "@availity/mui-feedback": "workspace:*",
+    "@availity/mui-file-selector": "workspace:*",
     "@availity/mui-form-utils": "workspace:*",
     "@availity/mui-icon": "workspace:*",
     "@availity/mui-layout": "workspace:*",

packages/element/src/index.ts

@@ -19,6 +19,7 @@ export * from '@availity/mui-empty-state';
 export * from '@availity/mui-event-tracker';
 export * from '@availity/mui-favorites';
 export * from '@availity/mui-feedback';
+export * from '@availity/mui-file-selector';
 export * from '@availity/mui-form-utils';
 export * from '@availity/mui-icon';
 export * from '@availity/mui-layout';

packages/event-tracker/jest.config.js

@@ -1,12 +1,11 @@
 const global = require('../../jest.config.global');
 
-const esModules = ['uuid'];
-
 module.exports = {
   ...global,
   displayName: 'event-tracker',
   coverageDirectory: '../../coverage/event-tracker',
-  transformIgnorePatterns: [
-    `/node_modules/(?!${esModules})`
-  ]
+  moduleNameMapper: {
+    // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
+    uuid: require.resolve('uuid'),
+  },
 };

packages/event-tracker/package.json

@@ -52,6 +52,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/analytics-core": "^4.1.2"
+    "@availity/analytics-core": "^5.0.3"
   }
 }

packages/favorites/package.json

@@ -32,7 +32,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/api-axios": "^9.0.0",
+    "@availity/api-axios": "^9.0.4",
     "@availity/message-core": "^7.0.1",
     "@tanstack/react-query": "^4.36.1"
   },

packages/feedback/package.json

@@ -46,7 +46,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/api-axios": "^9.0.0",
+    "@availity/api-axios": "^9.0.4",
     "@availity/mui-button": "workspace:^",
     "@availity/mui-form-utils": "workspace:^",
     "@availity/mui-icon": "workspace:^",

packages/file-selector/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';
+```

packages/file-selector/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>

packages/file-selector/jest.config.js

@@ -0,0 +1,11 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'file-selector',
+  coverageDirectory: '../../coverage/file-selector',
+  moduleNameMapper: {
+    // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
+    uuid: require.resolve('uuid'),
+  },
+};

packages/file-selector/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@availity/mui-file-selector",
+  "version": "0.0.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 <[email protected]>",
+  "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": "workspace:^",
+    "@availity/mui-divider": "workspace:^",
+    "@availity/mui-form-utils": "workspace:^",
+    "@availity/mui-icon": "workspace:^",
+    "@availity/mui-layout": "workspace:^",
+    "@availity/mui-list": "workspace:^",
+    "@availity/mui-progress": "workspace:^",
+    "@availity/mui-typography": "workspace:^",
+    "@availity/upload-core": "^6.0.4",
+    "@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"
+  }
+}

packages/file-selector/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"]
+      }
+    }
+  }
+}

packages/file-selector/src/index.ts

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

packages/file-selector/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();
+  });
+});