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": {}
     },

.gitignore

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

.husky/pre-commit

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

.prettierignore

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

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/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../../../packages/*/*.mdx',
-    '../../../packages/*/src/lib/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../../../packages/*/src/lib/*.@(mdx|stories.@(js|jsx|ts|tsx))'
   ],
+
   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,29 +24,43 @@ 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 },
+  features: { storyStoreV7: false },
+
+  docs: {
+    autodocs: true
+  }
 };
 
 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 → apps/element-storybook/src/templates/bs4migration.stories.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',

apps/nx-generator-e2e/project.json

@@ -3,15 +3,17 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/nx-generator-e2e/src",
+  "tags": [],
+  "implicitDependencies": ["nx-generator"],
   "targets": {
     "e2e": {
-      "executor": "@nrwl/nx-plugin:e2e",
+      "executor": "@nx/jest:jest",
       "options": {
-        "target": "nx-generator:build",
-        "jestConfig": "apps/nx-generator-e2e/jest.config.ts"
-      }
+        "jestConfig": "apps/nx-generator-e2e/jest.config.ts",
+        "runInBand": true,
+        "passWithNoTests": false
+      },
+      "dependsOn": ["nx-generator:build"]
     }
-  },
-  "tags": [],
-  "implicitDependencies": ["nx-generator"]
+  }
 }

apps/nx-generator-e2e/tests/nx-generator.spec.ts

@@ -1,4 +1,4 @@
-import { checkFilesExist, ensureNxProject, readJson, runNxCommandAsync, uniq } from '@nrwl/nx-plugin/testing';
+import { checkFilesExist, ensureNxProject, readJson, runNxCommandAsync, uniq } from '@nx/plugin/testing';
 
 describe('nx-generator e2e', () => {
   // Setting up individual workspaces per

jest.preset.js

@@ -1,3 +1,15 @@
-const nxPreset = require('@nrwl/jest/preset');
+const nxPreset = require('@nx/jest/preset');
 
-module.exports = { ...nxPreset };
+module.exports = {
+  ...nxPreset,
+  /* TODO: Update to latest Jest snapshotFormat
+   * By default Nx has kept the older style of Jest Snapshot formats
+   * to prevent breaking of any existing tests with snapshots.
+   * It's recommend you update to the latest format.
+   * You can do this by removing snapshotFormat property
+   * and running tests with --update-snapshot flag.
+   * Example: "nx affected --targets=test --update-snapshot"
+   * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
+   */
+  snapshotFormat: { escapeString: true, printBasicPrototype: true },
+};