NX, Storybook, and more upgrades

.eslintrc.json

@@ -1,13 +1,20 @@
 {
   "root": true,
   "ignorePatterns": [],
-  "plugins": ["@nx"],
+  "plugins": [
+    "@nx"
+  ],
   "env": {
     "es2020": true
   },
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
       "rules": {
         "@nx/enforce-module-boundaries": [
           "error",
@@ -17,24 +24,36 @@
             "depConstraints": [
               {
                 "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
+                "onlyDependOnLibsWithTags": [
+                  "*"
+                ]
               }
             ]
           }
         ]
       }
     },
     {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "extends": [
+        "plugin:@nx/typescript"
+      ],
       "rules": {
         "@typescript-eslint/no-extra-semi": "error",
         "no-extra-semi": "off"
       }
     },
     {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nx/javascript"],
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "extends": [
+        "plugin:@nx/javascript"
+      ],
       "rules": {
         "@typescript-eslint/no-extra-semi": "error",
         "no-extra-semi": "off"
@@ -51,7 +70,9 @@
         "*.test.js",
         "*.test.jsx"
       ],
-      "extends": ["plugin:@nx/typescript"],
+      "extends": [
+        "plugin:@nx/typescript"
+      ],
       "env": {},
       "rules": {
         "@typescript-eslint/no-extra-semi": "error",
@@ -72,5 +93,8 @@
         "jest": true
       }
     }
+  ],
+  "extends": [
+    "plugin:storybook/recommended"
   ]
-}
+}

.github/workflows/pr-build.yml

@@ -70,7 +70,8 @@ jobs:
       - name: Unit Test
         run: yarn test:affected
 
-      - name: Version Bump Dry Run
+      - name: Version Bump Dry Run (only run for ubuntu-latest-24 matching deploy action)
+        if: ${{ matrix.node == 24 && matrix.os == 'ubuntu-latest' }}
         run: yarn version:dry-run
 
       # - name: Upload coverage report

.gitignore

@@ -94,3 +94,5 @@ Thumbs.db
 .nx/workspace-data
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.yarnrc.yml

@@ -1,14 +1,12 @@
-nodeLinker: node-modules
+compressionLevel: mixed
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: '@yarnpkg/plugin-interactive-tools'
+enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+nodeLinker: node-modules
 
-npmPublishRegistry: 'https://registry.npmjs.org/'
+npmPublishRegistry: "https://registry.npmjs.org/"
 
-npmRegistryServer: 'https://registry.npmjs.org/'
+npmRegistryServer: "https://registry.npmjs.org/"
 
 supportedArchitectures:
   cpu:
@@ -24,3 +22,5 @@ supportedArchitectures:
     - linux
     - darwin
     - win32
+
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

apps/element-storybook/.storybook/ElementTheme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import ElementLogo from '../../../static/availity-Element-Logo.png'
 // eslint-disable-next-line @nx/enforce-module-boundaries

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

@@ -1,7 +1,11 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { createRequire } from "node:module";
 import { dirname, join } from 'path';
 import remarkGfm from 'remark-gfm';
 import { StorybookConfig } from '@storybook/react-vite';
 
+const require = createRequire(import.meta.url);
+
 const config: StorybookConfig = {
   stories: [
     '../src/*.mdx',
@@ -13,19 +17,18 @@ const config: StorybookConfig = {
   ],
 
   addons: [
-    getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-a11y'),
     {
-      name: '@storybook/addon-docs',
+      name: getAbsolutePath("@storybook/addon-docs"),
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
             remarkPlugins: [remarkGfm],
           },
         },
       },
-    },
+    }
   ],
 
   framework: {

apps/element-storybook/.storybook/manager.ts

@@ -1,7 +1,6 @@
 // .storybook/manager.js
 
-import { addons } from '@storybook/manager-api';
-import {API_PreparedIndexEntry, API_StatusObject} from "@storybook/types";
+import { addons } from 'storybook/manager-api';
 import elementTheme from './ElementTheme';
 
 addons.setConfig({
@@ -12,12 +11,5 @@ addons.setConfig({
       'sample-layouts',
       'design-system',
     ],
-    filters: {
-      patterns: (item: API_PreparedIndexEntry & {
-        status: Record<string, API_StatusObject | null>;
-      }): boolean => {
-        return !(item.tags ?? []).includes('hideInSidebar');
-      }
-    }
   },
 });

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { themes } from '@storybook/theming';
-import { Preview } from '@storybook/react';
-import { Title, Subtitle, Description, Primary, Controls, Stories, useOf } from '@storybook/blocks';
-import type { StoryContext } from '@storybook/types';
+ import React from 'react';
+import { themes } from 'storybook/theming';
+import { Preview } from '@storybook/react-vite';
+import { Title, Subtitle, Description, Primary, Controls, Stories, useOf } from '@storybook/addon-docs/blocks';
+import type { StoryContext } from 'storybook/internal/types';
 import { ThemeProvider } from '@availity/theme-provider';
 
 const withThemeProvider = (Story: () => React.JSX.Element, context: StoryContext) => {
@@ -93,7 +93,9 @@ if (typeof global.process === 'undefined') {
   import('../../../packages/mock/src/lib/browser').then(({ worker }) => {
     const config =
       process.env.NODE_ENV === 'development'
-        ? undefined
+        ? {
+            onUnhandledRequest: 'bypass',
+          }
         : {
             serviceWorker: { url: '/element/mockServiceWorker.js' },
             onUnhandledRequest: 'bypass',

apps/element-storybook/src/FormComponents.mdx

@@ -1,5 +1,4 @@
-import { Markdown } from '@storybook/blocks';
-import { Meta, Source } from '@storybook/blocks';
+import { Markdown, Meta, Source } from '@storybook/addon-docs/blocks';
 import {
   AutocompleteExample,
   AsyncAutocompleteExample,

apps/element-storybook/src/accessibility.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import storybook_accessibility from '../../../static/storybook_accessibility.png';
 import level_access_accessibility from '../../../static/level_access_accessibility.png';
 

apps/element-storybook/src/bs4-migration/FormMigration.stories.tsx

@@ -1,6 +1,6 @@
 // Each exported component in the package should have its own stories file
 // import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import dayjs from 'dayjs';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';

apps/element-storybook/src/bs4-migration/form-migration.md

@@ -255,7 +255,7 @@ export const Form = () => (
 <summary>Code example</summary>
 
 ```tsx
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import dayjs from 'dayjs';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';

apps/element-storybook/src/bs4-migration/migration.mdx

@@ -1,5 +1,4 @@
-import { Markdown } from '@storybook/blocks';
-import { Meta, Source } from '@storybook/blocks';
+import { Markdown, Meta, Source } from '@storybook/addon-docs/blocks';
 import {
   BadgeExample,
   ChipExample,

apps/element-storybook/src/contributing.mdx

@@ -1,5 +1,4 @@
-import { Markdown } from '@storybook/blocks';
-import { Meta } from '@storybook/addon-docs';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import ReadMe from '../../../.github/CONTRIBUTING.md?raw';
 
 <Meta title="Contributing" />

apps/element-storybook/src/layouts/form/Form.stories.tsx

@@ -1,6 +1,6 @@
 // Each exported component in the package should have its own stories file
 import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import dayjs from 'dayjs';
 import {
   BlockUi,

apps/element-storybook/src/layouts/sidebar-tables/SidebarLayout.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StoryObj, Meta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react-vite';
 import { Container, Grid } from '@availity/element';
 import { HeaderSection } from './HeaderSection';
 import { SearchSection } from './SearchSection';
@@ -16,7 +16,7 @@ import { DataGridSection } from './DataGridSection';
  * Sidebar layout that includes header, sidenav, search section, & tables. */
 const meta: Meta = {
   title: 'Sample Layouts/Sidebar',
-  tags: ['autodocs', 'hideInSidebar'],
+  tags: ['!autodocs', '!dev'],
 };
 
 /**  */

apps/element-storybook/src/support.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Support" />
 

apps/element-storybook/src/upgrading-to-v1.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Upgrading to v1" />
 

apps/element-storybook/src/upgrading-to-v2.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Upgrading to v2" />
 

nx.json

@@ -70,6 +70,5 @@
       }
     ]
   },
-  "useInferencePlugins": false,
-  "useLegacyCache": true
+  "useInferencePlugins": false
 }