feat(mui-icon): init

README.md

@@ -10,13 +10,13 @@ Visit our [documentation site](https://zeroheight.com/07045d232/v/latest/p/753cd
 
 To install the library in your project, you can use either NPM or Yarn:
 
-```
+```sh
 npm install @availity/element
 ```
 
 OR
 
-```
+```sh
 yarn add @availity/element
 ```
 

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

@@ -5,7 +5,7 @@ const config: StorybookConfig = {
     '../src/*.mdx',
     '../src/*.stories.@(js|jsx|ts|tsx)',
     '../../../packages/*/*.mdx',
-    '../../../packages/*/src/lib/*.stories.@(js|jsx|ts|tsx)'
+    '../../../packages/*/src/lib/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
   addons: [
     '@storybook/addon-docs',

apps/element-storybook/.storybook/preview.tsx

@@ -5,14 +5,17 @@ import { themes } from '@storybook/theming';
 export const parameters = {
   docs: {
     theme: themes.light,
+    source: {
+      excludeDecorators: true,
+    }
   },
   options: {
     storySort: {
       order: [
         'Element',
         'Contributing',
-        'Design System/*',
-        'Components/*'
+        'Design System/**',
+        'Components/**'
       ],
     },
   },

bundlesize.config.json

@@ -0,0 +1,8 @@
+{
+  "files": [
+    {
+      "path": "./dist/index.js",
+      "maxSize": "2 kB"
+    }
+  ]
+}

package.json

@@ -17,6 +17,7 @@
     "build": "nx run-many --target=build --all",
     "build:storybook": "nx build-storybook element-storybook",
     "build:storybook:ci": "nx run element-storybook:build-storybook:ci",
+    "bundlesize": "nx run-many --target=bundlesize --all --exclude=nx-generator",
     "clean": "nx run-many --target=clean --all --exclude=nx-generator",
     "create:generator": "nx generate @nrwl/nx-plugin:generator ${1} --project=${0}",
     "create:package": "nx generate @availity/nx-generator:nx-generator ${0}",
@@ -49,9 +50,9 @@
     "@nrwl/storybook": "^15.7.0",
     "@nrwl/vite": "15.6.2",
     "@nrwl/workspace": "15.6.2",
-    "@storybook/addon-essentials": "^7.0.0-beta.43",
-    "@storybook/core-server": "^7.0.0-beta.43",
-    "@storybook/react-vite": "^7.0.0-beta.43",
+    "@storybook/addon-essentials": "^7.0.0-beta.64",
+    "@storybook/core-server": "^7.0.0-beta.64",
+    "@storybook/react-vite": "^7.0.0-beta.64",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "13.4.0",
     "@types/jest": "28.1.1",
@@ -61,6 +62,7 @@
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
     "babel-jest": "28.1.1",
+    "bundlesize": "^0.18.1",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-plugin-import": "2.26.0",

packages/element/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@availity/mui-alert": "workspace:*",
     "@availity/mui-badge": "workspace:*",
+    "@availity/mui-icon": "workspace:*",
     "@availity/theme-provider": "workspace:*",
     "@mui/material": "^5.11.9"
   },

packages/icon/README.md

@@ -0,0 +1,62 @@
+# @availity/mui-icon
+
+> Availity MUI Icon component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-icon.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-icon)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-icon.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-icon)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-icon?style=for-the-badge)](https://github.com/Availity/availity-react/blob/master/packages/mui-icon/package.json)
+
+- ⚠️ _needs component theme added to @availity/theme_
+- ⚠️ _needs UI Team Verification (must conform to [Availity's Figma Design Standards](https://www.figma.com/file/bf6l79hehcKdRjb5Kzq1De/Element--MUI-%F0%9F%9A%A7?node-id=4662%3A14&t=QMqHeT6daeqXbjBR-1) - private link)_
+
+## Documentation
+
+This package extends the MUI SvgIcon component([MUI Icon Docs](https://mui.com/components/icons/)) to wrap UX Approved Font Awesome Icons.
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-icon-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
+
+```bash
+npm install @availity/mui-icon
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-icon
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { HomeIcon } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { HomeIcon } from '@availity/mui-icon';
+```

packages/icon/bundlesize.config.json

@@ -0,0 +1,8 @@
+{
+  "files": [
+    {
+      "path": "./dist/index.js",
+      "maxSize": "10 kB"
+    }
+  ]
+}

packages/icon/introduction.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/Icon/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

packages/icon/jest.config.js

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

packages/icon/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@availity/mui-icon",
+  "version": "0.0.0",
+  "description": "Availity MUI Icon Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-icon-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/icon"
+  },
+  "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",
+    "bundlesize": "bundlesize",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "dependencies": {
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/icon/project.json

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

packages/icon/src/index.ts

@@ -0,0 +1,7 @@
+export * from './lib/Icons/Actions';
+export * from './lib/Icons/Common';
+export * from './lib/Icons/Files';
+export * from './lib/Icons/Form';
+export * from './lib/Icons/Navigation';
+export * from './lib/Icons/Payment';
+

packages/icon/src/lib/FaSvgIcon.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
+import { FaSvgIcon } from './FaSvgIcon';
+
+describe('FaSvgIcon', () => {
+  test('should render FaSvgIcon successfully', () => {
+    const { getByTestId } = render(<FaSvgIcon icon={faHome} data-testid='home-icon'/>);
+    expect(getByTestId('home-icon')).toBeTruthy();
+  });
+});

packages/icon/src/lib/FaSvgIcon.tsx

@@ -0,0 +1,32 @@
+// FontAwesomeSvgIcon example from mui docs https://github.com/mui/material-ui/blob/master/docs/data/material/components/icons/FontAwesomeSvgIconDemo.js
+
+import * as React from 'react';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface FaSvgIconProps extends SvgIconProps {
+  /** Font Awesome Svg */
+  icon: IconDefinition
+}
+
+export const FaSvgIcon = React.forwardRef<SVGSVGElement, FaSvgIconProps>((props, ref) => {
+  const { icon, ...svgProps } = props;
+
+  const {
+    icon: [width, height, , , svgPathData],
+  } = icon;
+
+  return (
+    <SvgIcon ref={ref} viewBox={`0 0 ${width} ${height}`} {...svgProps}>
+      {typeof svgPathData === 'string' ? (
+        <path d={svgPathData} />
+      ) : (
+        /**
+         * A multi-path Font Awesome icon seems to imply a duotune icon.
+         * Only available in Pro which we wouldn't publicly export regardless.
+         */
+        null
+      )}
+    </SvgIcon>
+  );
+});