Merge pull request #251 from Availity/chore/upgrade-nx

Chore/upgrade nx

.eslintignore

@@ -1,3 +1,4 @@
+node_modules
 .yarn
 !.storybook/
 

.eslintrc.json

@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": [],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -23,12 +23,12 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {
@@ -42,7 +42,7 @@
         "*.test.js",
         "*.test.jsx"
       ],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "env": {},
       "rules": {}
     },

.github/CONTRIBUTING.md

@@ -18,7 +18,7 @@ This monorepo is managed using [yarn](https://yarnpkg.com/getting-started) and [
 
 ## Installation
 
-The currently recommended version of node to use when developing in this repo is: `v16.16.0`. We recommend using [fnm](https://github.com/Schniz/fnm#readme) to have your node version automatically changed when you `cd` into the repo.
+The currently recommended version of node to use when developing in this repo is: `v20`. We recommend using [fnm](https://github.com/Schniz/fnm#readme) to have your node version automatically changed when you `cd` into the repo.
 
 We use `yarn berry` (aka yarn v3) to manage dependencies. Install `yarn` globally:
 

.github/workflows/commitlint.yml

@@ -12,10 +12,10 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '20'
 
       - run: yarn install --immutable
 
-      - uses: wagoid/commitlint-github-action@v4
+      - uses: wagoid/commitlint-github-action@v5
         env:
           NODE_PATH: ${{ github.workspace }}/node_modules

.github/workflows/deploy.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -37,9 +37,9 @@ jobs:
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-16-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-20-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-16-yarn-
+            ${{ runner.os }}-20-yarn-
 
       - name: Install Dependencies
         run: yarn install --immutable
@@ -67,7 +67,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -79,9 +79,9 @@ jobs:
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-16-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-20-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-16-yarn-
+            ${{ runner.os }}-20-yarn-
 
       - name: Install Dependencies
         run: yarn install --immutable

.github/workflows/pr-build.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest]
-        node: [16]
+        node: [18, 20]
 
     steps:
       - name: Checkout Code

.github/workflows/preview.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -39,9 +39,9 @@ jobs:
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-16-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-20-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-16-yarn-
+            ${{ runner.os }}-20-yarn-
 
       - name: Install Dependencies
         run: yarn install --immutable

.gitignore

@@ -86,3 +86,5 @@ yarn-error.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.nx/cache

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx --no -- commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged --relative
+yarn lint:affected

.husky/pre-push

@@ -1,5 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn lint:affected
 yarn test:affected

.nvmrc

@@ -1 +1 @@
-16.16.0
+20

.prettierignore

@@ -2,3 +2,5 @@
 
 /dist
 /coverage
+
+/.nx/cache

README.md

@@ -42,7 +42,7 @@ const App = () => {
 
 ## Development
 
-The currently recommended version of node to use when developing in this repo is: `v16.16.0`. We recommend using [fnm](https://github.com/Schniz/fnm#readme) to have your node version automatically changed when you `cd` into the repo.
+The currently recommended version of node to use when developing in this repo is: `v20`. We recommend using [fnm](https://github.com/Schniz/fnm#readme) to have your node version automatically changed when you `cd` into the repo.
 
 We use `yarn berry` (aka yarn v3) to manage dependencies. Install `yarn` globally:
 

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

@@ -1,17 +1,19 @@
+import { dirname, join } from "path";
 import remarkGfm from 'remark-gfm';
 import { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
     '../src/*.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx|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: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-styling',
-    '@storybook/addon-a11y',
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-themes"),
+    getAbsolutePath("@storybook/addon-a11y"),
     {
       name: '@storybook/addon-docs',
       options: {
@@ -22,23 +24,29 @@ const config: StorybookConfig = {
         },
       },
     },
+    getAbsolutePath("@chromatic-com/storybook")
   ],
+
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {
       builder: {
         viteConfigPath: '',
       },
     },
   },
+
   typescript: {
     reactDocgenTypescriptOptions: {
       propFilter: (prop) =>
         prop.parent
           ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) // filter out all node_modules except packages starting with "@mui"
           : true,
     },
+
+    reactDocgen: 'react-docgen-typescript'
   },
+
   staticDirs: ['../../../static'],
   features: { storyStoreV7: false, legacyMdx1: true },
 };
@@ -48,3 +56,7 @@ export default config;
 // To customize your Vite configuration you can use the viteFinal field.
 // 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")));
+}

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

@@ -81,7 +81,7 @@ const preview: Preview = {
 
 // Make sure we are in the browser before starting
 if (typeof global.process === 'undefined') {
-  // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+  // eslint-disable-next-line @nx/enforce-module-boundaries
   import('../../../packages/mock/src/lib/browser').then(({ worker }) => {
     const config =
       process.env.NODE_ENV === 'development'

apps/element-storybook/project.json

@@ -6,7 +6,7 @@
   "tags": [],
   "targets": {
     "storybook": {
-      "executor": "@nrwl/storybook:storybook",
+      "executor": "@nx/storybook:storybook",
       "options": {
         "port": 4400,
         "configDir": "apps/element-storybook/.storybook"
@@ -19,8 +19,8 @@
       "dependsOn": ["^build"]
     },
     "build-storybook": {
-      "executor": "@nrwl/storybook:build",
-      "outputs": ["{options.outputDir}"],
+      "executor": "@nx/storybook:build",
+      "outputs": ["{workspaceRoot}/dist/storybook"],
       "options": {
         "outputDir": "dist/storybook",
         "configDir": "apps/element-storybook/.storybook"

apps/element-storybook/src/templates/bs4migration.mdx

@@ -6,10 +6,10 @@ import { Meta, Source } from '@storybook/blocks';
 # Component Migration
 
 This migration guide is just an overview. For more in depth component information, visit:
+
 - [Availity Usage Guide](https://zeroheight.com/2e36e50c7/p/48eb7b-button/b/062837)
 - [MUI Documentation](https://mui.com/material-ui/react-button/)
 
-
 ## Key Differences (not exhaustive list)
 
 - Changed
@@ -38,7 +38,8 @@ const ReactstrapButton = () => (
     I'm a Button
   </Button>
 );
-`}/>
+`}
+/>
 
 `@availity/element` Example:
 
@@ -55,4 +56,5 @@ const MUIButton = () => (
     I'm a Button
   </Button>
 );
-`}/>
+`}
+/>

apps/element-storybook/tsconfig.json

@@ -12,7 +12,7 @@
   ],
   "references": [
     {
-      "path": "./.storybook/tsconfig.json"
+      "path": "./tsconfig.storybook.json"
     }
   ]
 }

apps/element-storybook/tsconfig.storybook.json

@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.js", "src/**/*.spec.tsx", "src/**/*.spec.jsx"],
+  "include": [
+    ".storybook/*.js",
+    ".storybook/*.ts",
+    "*.tsx",
+    "src/*.stories.ts",
+    "src/*.stories.js",
+    "src/*.stories.jsx",
+    "src/*.stories.tsx",
+    "src/*.stories.mdx",
+    "../../packages/*.stories.mdx",
+    "../../packages/*/src/lib/*.stories.js",
+    "../../packages/*/src/lib/*.stories.jsx",
+    "../../packages/*/src/lib/*.stories.ts",
+    "../../packages/*/src/lib/*.stories.tsx",
+    "../../packages/*/src/lib/*.stories.mdx"
+  ]
+}

apps/nx-generator-e2e/jest.config.ts

@@ -2,13 +2,14 @@
 export default {
   displayName: 'nx-generator-e2e',
   preset: '../../jest.preset.js',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    },
-  },
+  globals: {},
   transform: {
-    '^.+\\.[tj]s$': 'ts-jest',
+    '^.+\\.[tj]s$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+      },
+    ],
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/apps/nx-generator-e2e',