Replace @storybook/csf with storybook's internal csf implementation

.github/workflows/tests-extended.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [20.x, 22.x]
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/typecheck.yml

@@ -8,10 +8,10 @@ jobs:
         steps:
         - uses: actions/checkout@v2
 
-        - name: Use Node.js 18.x
+        - name: Use Node.js 20.x
           uses: actions/setup-node@v1
           with:
-            node-version: '18.x'
+            node-version: '20.x'
 
         - name: Install dependencies
           uses: bahmutov/npm-install@v1

.storybook/main.ts

@@ -1,4 +1,4 @@
-import { StorybookConfig } from '@storybok/react-vite';
+import { StorybookConfig } from '@storybook/react-vite';
 
 let stories = [
   '../stories/docs/**/*.mdx',
@@ -18,18 +18,10 @@ let stories = [
 if (process.env.TEST_FAILURES) {
   stories = ['../stories/expected-failures/*.stories.@(js|jsx|ts|tsx)'];
 }
-const addons = [
-  process.env.WITHOUT_DOCS
-    ? {
-        name: '@storybook/addon-essentials',
-        options: {
-          docs: false,
-        },
-      }
-    : '@storybook/addon-essentials',
-  '@storybook/addon-interactions',
-  '@storybook/addon-coverage',
-];
+const addons = process.env.WITHOUT_DOCS
+  ? ['@storybook/addon-coverage', '@storybook/addon-a11y']
+  : ['@storybook/addon-coverage', '@storybook/addon-a11y', '@storybook/addon-docs'];
+
 const config: StorybookConfig = {
   stories,
   addons,
@@ -40,9 +32,6 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
 };
 
 export default config;

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 import { isTestRunner } from './is-test-runner';
 
 const withSkippableTests = (StoryFn, { parameters }) => {
@@ -12,6 +12,18 @@ const withSkippableTests = (StoryFn, { parameters }) => {
 const preview: Preview = {
   tags: ['global-tag'],
   decorators: [withSkippableTests],
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'region',
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
 };
 
 export default preview;

.storybook/test-runner.ts

@@ -1,4 +1,6 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
+
 import { getStoryContext, waitForPageReady } from '../dist';
 import type { TestRunnerConfig } from '../dist';
 
@@ -19,6 +21,9 @@ const config: TestRunnerConfig = {
   setup() {
     expect.extend({ toMatchImageSnapshot });
   },
+  async preVisit(page) {
+    await injectAxe(page);
+  },
   async postVisit(page, context) {
     // Get entire context of a story, including parameters, args, argTypes, etc.
     const { parameters } = await getStoryContext(page, context);
@@ -46,6 +51,18 @@ const config: TestRunnerConfig = {
     const innerHTML = await elementHandler?.innerHTML();
     // HTML snapshot tests
     expect(innerHTML).toMatchSnapshot();
+
+    await configureAxe(page, {
+      rules: parameters?.a11y?.config?.rules,
+    });
+
+    const element = parameters?.a11y?.element ?? 'body';
+    await checkA11y(page, element, {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
   },
 };
 

package.json

@@ -56,7 +56,6 @@
     "@babel/template": "^7.22.5",
     "@babel/types": "^7.22.5",
     "@jest/types": "^29.6.3",
-    "@storybook/csf": "^0.1.11",
     "@swc/core": "^1.5.22",
     "@swc/jest": "^0.2.23",
     "expect-playwright": "^0.8.0",
@@ -77,17 +76,16 @@
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@storybook/addon-a11y": "next",
     "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "next",
-    "@storybook/addon-interactions": "next",
-    "@storybook/react": "next",
+    "@storybook/addon-docs": "next",
     "@storybook/react-vite": "next",
-    "@storybook/test": "next",
     "@types/jest": "^29.0.0",
     "@types/node": "^16.4.1",
     "@types/node-fetch": "^2.6.11",
     "@vitejs/plugin-react": "^4.0.3",
     "auto": "^11.1.6",
+    "axe-playwright": "^2.1.0",
     "babel-jest": "^29.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
@@ -110,7 +108,7 @@
     "ts-jest": "^29.0.0",
     "tsup": "^6.5.0",
     "typescript": "~4.9.4",
-    "vite": "^4.4.5",
+    "vite": "^6.3.2",
     "wait-on": "^7.2.0"
   },
   "peerDependencies": {

src/csf/transformCsf.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { toId, storyNameFromExport, combineTags } from '@storybook/csf';
+import { toId, storyNameFromExport, combineTags } from 'storybook/internal/csf';
 import { loadCsf } from 'storybook/internal/csf-tools';
 import * as t from '@babel/types';
 import generate from '@babel/generator';

src/playwright/hooks.ts

@@ -1,5 +1,5 @@
 import type { BrowserContext, Page } from 'playwright';
-import type { StoryContextForEnhancers } from '@storybook/csf';
+import type { StoryContextForEnhancers } from 'storybook/internal/csf';
 
 export type TestContext = {
   id: string;

src/playwright/transformPlaywrightJson.ts

@@ -1,6 +1,6 @@
 import * as t from '@babel/types';
 import generate from '@babel/generator';
-import { ComponentTitle, StoryId, StoryName, toId } from '@storybook/csf';
+import { ComponentTitle, StoryId, StoryName, toId } from 'storybook/internal/csf';
 
 import { testPrefixer } from './transformPlaywright';
 import { getTagOptions } from '../util/getTagOptions';
@@ -101,7 +101,7 @@ function v3TitleMapToV4TitleMap(titleIdToStories: Record<string, V3Story[]>) {
             type: isV3DocsOnly(stories) ? 'docs' : 'story',
             tags: isV3DocsOnly(stories) ? [] : ['test', 'dev'],
             ...story,
-          }) satisfies V4Entry
+          } satisfies V4Entry)
       ),
     ])
   );
@@ -121,7 +121,7 @@ function v4TitleMapToV5TitleMap(titleIdToStories: Record<string, V4Entry[]>) {
           ({
             ...story,
             tags: story.tags ? ['test', 'dev', ...story.tags] : ['test', 'dev'],
-          }) satisfies V4Entry
+          } satisfies V4Entry)
       ),
     ])
   );

src/typings.d.ts

@@ -1,6 +1,6 @@
 import { TestHook } from './playwright/hooks';
 import { type setupPage } from './setup-page';
-import type { StoryContext } from '@storybook/csf';
+import type { StoryContext } from 'storybook/internal/csf';
 
 declare global {
   var __sbPreVisit: TestHook;

stories/atoms/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn, expect, within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn, expect, within, waitFor, userEvent, waitForElementToBeRemoved } from 'storybook/test';
 
 import { isTestRunner } from '../../.storybook/is-test-runner';
 

stories/atoms/button.css

@@ -1,30 +1,30 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
+  display: inline-block;
+  cursor: pointer;
   border: 0;
   border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
+  font-weight: 700;
   line-height: 1;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
+  background-color: #555ab9;
   color: white;
-  background-color: #1ea7fd;
 }
 .storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
 }
 .storybook-button--small {
-  font-size: 12px;
   padding: 10px 16px;
+  font-size: 12px;
 }
 .storybook-button--medium {
-  font-size: 14px;
   padding: 11px 20px;
+  font-size: 14px;
 }
 .storybook-button--large {
-  font-size: 16px;
   padding: 12px 24px;
+  font-size: 16px;
 }

stories/expected-failures/Failure.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { within, userEvent } from '@storybook/test';
+import { within, userEvent } from 'storybook/test';
 
 import { Page } from '../pages/Page';
 

stories/molecules/Header.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Header } from './Header';
 

stories/molecules/header.css

@@ -1,10 +1,10 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .storybook-header svg {
@@ -13,20 +13,20 @@
 }
 
 .storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
   font-weight: 700;
   font-size: 20px;
   line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
 }
 
 .storybook-header button + button {
   margin-left: 10px;
 }
 
 .storybook-header .welcome {
+  margin-right: 10px;
   color: #333;
   font-size: 14px;
-  margin-right: 10px;
 }

stories/pages/Page.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { within, userEvent } from 'storybook/test';
 
 import { Page } from './Page';