docs: upgrade to Storybook 10 & add accessibility testing

.github/workflows/test.yml

@@ -10,7 +10,6 @@ env:
   NODE_VERSION: '22.13.1'
   NODE_OPTIONS: '--max_old_space_size=8196'
   NX_CLOUD: false
-  IGNORE_COMMIT_MESSAGE: 'chore(release): publish'
 
 permissions:
   id-token: write
@@ -19,6 +18,19 @@ permissions:
   issues: write
 
 jobs:
+  storybook-test:
+    runs-on: ubuntu-24.04
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: ./.github/actions/yarn
+      - name: Build All Packages
+        run: yarn build
+      - name: Install Playwright (Storybook test runner)
+        run: yarn playwright install chromium --with-deps
+      - name: Storybook build and accessibility tests
+        run: npx nx run styleguide:storybook-test
+
   test:
     runs-on: ubuntu-24.04
     timeout-minutes: 30
@@ -33,11 +45,6 @@ jobs:
       - name: Ensure workflow is associated with a pull request
         uses: ./.github/actions/validate-pr-context
         if: github.event_name == 'pull_request'
-      - name: Skip build from automated commit
-        uses: ./.github/actions/skip-automated-commits
-        if: github.event_name == 'pull_request'
-        with:
-          ignore-commit-message: ${{ env.IGNORE_COMMIT_MESSAGE }}
       - name: Build All Packages
         run: yarn build
       - name: Run test suite

.husky/pre-commit

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

.vscode/stories.code-snippets

@@ -2,7 +2,7 @@
   "Component Doc": {
     "prefix": "component-doc",
     "body": [
-      "import { Canvas, Controls, Meta } from '@storybook/blocks';",
+      "import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';",
       "",
       "import { ComponentHeader } from '~styleguide/blocks';",
       "",
@@ -80,7 +80,7 @@
   "Table of Contents Story": {
     "prefix": "toc-story",
     "body": [
-      "import { Meta } from '@storybook/blocks';",
+      "import { Meta } from '@storybook/addon-docs/blocks';",
       "",
       "import { AboutHeader, TableOfContents } from '~styleguide/blocks';",
       "",

babel.config.js

@@ -1,3 +1,7 @@
 module.exports = {
   babelrcRoots: ['*'],
+  presets: [
+    [require.resolve('@babel/preset-typescript'), { allowDeclareFields: true }],
+    [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
+  ],
 };

package.json

@@ -31,19 +31,14 @@
     "@nx/storybook": "22.6.0",
     "@nx/web": "22.6.0",
     "@nx/webpack": "22.6.0",
-    "@storybook/addon-controls": "8.6.15",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-docs": "^8.6.15",
-    "@storybook/addon-essentials": "^8.6.15",
-    "@storybook/addon-links": "^8.6.15",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.6.15",
-    "@storybook/core-server": "8.6.15",
-    "@storybook/docs-tools": "^8.6.15",
+    "@storybook/addon-a11y": "^10.3.1",
+    "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-docs": "^10.3.1",
+    "@storybook/addon-links": "^10.3.1",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
     "@storybook/icons": "1.2.12",
-    "@storybook/manager-api": "^8.6.15",
-    "@storybook/react-webpack5": "^8.6.15",
-    "@storybook/theming": "^8.6.15",
+    "@storybook/react-webpack5": "^10.3.1",
+    "@storybook/test-runner": "^0.24.1",
     "@svgr/cli": "5.5.0",
     "@swc-node/register": "^1.11.1",
     "@swc/core": "^1.15.18",
@@ -68,25 +63,28 @@
     "component-test-setup": "^0.3.1",
     "cpy-cli": "^4.1.0",
     "eslint": "^8.11.0",
-    "eslint-plugin-gamut": "^2.0.0",
+    "eslint-plugin-gamut": "workspace:*",
     "eslint-plugin-local-rules": "^1.1.0",
     "eslint-plugin-lodash": "^7.4.0",
     "gh-pages": "^5.0.0",
-    "husky": "8.0.3",
+    "http-server": "^14.1.1",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.6.4",
     "jest-environment-jsdom": "29.6.4",
     "jest-environment-jsdom-global": "4.0.0",
     "jest-junit": "^16.0.0",
-    "lint-staged": "14.0.1",
+    "lint-staged": "^16.4.0",
     "micromatch": "^4.0.5",
     "mutationobserver-shim": "^0.3.3",
     "nx": "22.6.0",
     "nx-cloud": "19.1.0",
     "onchange": "^7.0.2",
+    "playwright": "^1.49.1",
     "prettier": "^2.8.7",
     "react-test-renderer": "18.3.1",
-    "storybook": "^8.6.15",
+    "start-server-and-test": "^2.1.5",
+    "storybook": "^10.3.1",
     "storybook-addon-deep-controls": "^0.9.5",
     "style-loader": "^4.0.0",
     "svgo": "^1.3.2",
@@ -134,10 +132,12 @@
     "format:verify": "yarn prettier --check",
     "lint": "eslint --ignore-path .eslintignore \"./**/*.{mdx,js,ts,tsx,json}\" --max-warnings 0",
     "lint:fix": "yarn lint --fix",
+    "prepare": "husky",
     "prettier": "prettier --ignore-path .prettierignore \"./**/*.{mdx,js,ts,tsx,json,css,scss}\"",
     "start": "yarn && yarn start:storybook",
     "start:storybook": "nx storybook styleguide",
     "test": "nx run-many --target=test --all",
+    "test:storybook": "nx run styleguide:storybook-test",
     "verify": "nx run-many --target=verify --parallel=3 --all",
     "verify-all": "yarn verify"
   },

packages/styleguide/.storybook/components/Elements/DocsContainer.tsx

@@ -15,8 +15,8 @@ import {
   DocsContainer as StorybookDocsContainer,
   DocsContextProps,
   SourceContainer,
-} from '@storybook/blocks';
-import { ThemeProvider } from '@storybook/theming';
+} from '@storybook/addon-docs/blocks';
+import { ThemeProvider } from 'storybook/theming';
 import { useMemo } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import theme from '../../theming/GamutTheme';

packages/styleguide/.storybook/components/Elements/StorySource.tsx

@@ -1,5 +1,5 @@
-import { Source } from '@storybook/blocks';
-import { SourceType } from '@storybook/docs-tools';
+import { Source } from '@storybook/addon-docs/blocks';
+import { SourceType } from 'storybook/internal/docs-tools';
 import { ComponentProps } from 'react';
 
 export const StorySource = ({

packages/styleguide/.storybook/components/Headers/ComponentHeader.tsx

@@ -6,7 +6,7 @@ import {
   Text,
 } from '@codecademy/gamut';
 import { Figma } from '@storybook/addon-designs/blocks';
-import { Title } from '@storybook/blocks';
+import { Title } from '@storybook/addon-docs/blocks';
 import * as React from 'react';
 
 import { StatusIndicator } from '../Elements/StatusIndicator';

packages/styleguide/.storybook/main.ts

@@ -1,5 +1,12 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
 import type { StorybookConfig } from '@storybook/react-webpack5';
-import { resolve, dirname, join } from 'path';
+import { resolve, dirname, join } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url);
 
 const config: StorybookConfig = {
   stories: [
@@ -8,9 +15,14 @@ const config: StorybookConfig = {
   ],
   staticDirs: ['../src/static'],
   addons: [
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@nx/react/plugins/storybook', ''),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+    // the @nx/react storybook plugin is just a subdirectory of the @nx/react package
+    // so getting the absolute path of the package.json won't work. they do expose
+    // a require export though, so we can just use that directly
+    require.resolve('@nx/react/plugins/storybook'),
     getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-designs'),
     getAbsolutePath('storybook-addon-deep-controls'),
   ],
@@ -57,6 +69,11 @@ const config: StorybookConfig = {
           __dirname,
           '../../gamut-illustrations/src'
         ),
+        '@codecademy/gamut-icons$': resolve(__dirname, '../../gamut-icons/src'),
+        '@codecademy/gamut-patterns$': resolve(
+          __dirname,
+          '../../gamut-patterns/src'
+        ),
         '@codecademy/variance$': resolve(__dirname, '../../variance/src'),
       },
     };

packages/styleguide/.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import theme from './theming/GamutTheme';
 
 addons.setConfig({

packages/styleguide/.storybook/preview.ts

@@ -4,9 +4,9 @@ import theme from './theming/GamutTheme';
 import { withEmotion } from './theming/GamutThemeProvider';
 import { breakpoints, css } from '@codecademy/gamut-styles';
 import { DocsContainer } from './components/Elements/DocsContainer';
-import { CodeOrSourceMdx, HeadersMdx } from '@storybook/blocks';
-import { components as htmlComponents } from '@storybook/components';
-import { styled } from '@storybook/theming';
+import { CodeOrSourceMdx, HeadersMdx } from '@storybook/addon-docs/blocks';
+import { components as htmlComponents } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
 import { Link } from './components/Elements/Markdown';
 
 const WrappedPre = styled(htmlComponents.pre)(
@@ -26,6 +26,12 @@ const mdxComponents = {
 
 const preview: Preview = {
   parameters: {
+    a11y: {
+      test: 'todo',
+    },
+    interactions: {
+      disable: true,
+    },
     backgrounds: {
       disable: true,
     },
@@ -105,12 +111,7 @@ const preview: Preview = {
       },
     },
     viewport: {
-      defaultViewport: 'responsive',
-      viewports: {
-        responsive: {
-          name: 'Responsive',
-          type: 'desktop',
-        },
+      options: {
         xs: {
           name: `XS - ${breakpoints.xs}`,
           styles: {
@@ -165,8 +166,8 @@ export const globalTypes = {
       icon: 'circlehollow',
       // Array of plain string values or MenuItem shape (see below)
       items: [
-        { value: 'light', icon: 'circlehollow', title: 'light' },
-        { value: 'dark', icon: 'circle', title: 'dark' },
+        { value: 'light', icon: 'circlehollow', title: 'Light' },
+        { value: 'dark', icon: 'circle', title: 'Dark' },
       ],
       // Property that specifies if the name of the item will be displayed
       showName: true,

packages/styleguide/.storybook/theming/GamutTheme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 import {
   theme as gamutTheme,
   trueColors,

packages/styleguide/project.json

@@ -32,6 +32,15 @@
           "quiet": true
         }
       }
+    },
+    "storybook-test": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build-storybook"],
+      "options": {
+        "cwd": "{workspaceRoot}",
+        "forwardAllArgs": false,
+        "command": "start-server-and-test \"http-server dist/storybook/styleguide -p 6007 --silent\" http://127.0.0.1:6007 \"test-storybook --url http://127.0.0.1:6007 --config-dir packages/styleguide/.storybook\""
+      }
     }
   }
 }

packages/styleguide/src/lib/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import { AboutHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Animations/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Badge/Badge.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import {
   Callout,

packages/styleguide/src/lib/Atoms/Buttons/About.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import {
   AboutHeader,

packages/styleguide/src/lib/Atoms/Buttons/Button/Button.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Buttons/CTAButton/CTAButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Buttons/FillButton/FillButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Buttons/StrokeButton/StrokeButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Buttons/TextButton/TextButton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Card/Card.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 

packages/styleguide/src/lib/Atoms/FeatureShimmer/FeatureShimmer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import { ComponentHeader, LinkTo } from '~styleguide/blocks';