Upgrade Storybook to 8.x (next)

.storybook/main.ts

@@ -1,6 +1,3 @@
-import {resolve, dirname, join} from "path";
-import {mergeConfig} from "vite";
-import turbosnap from "vite-plugin-turbosnap";
 import type {StorybookConfig} from "@storybook/react-vite";
 
 const config: StorybookConfig = {
@@ -9,52 +6,17 @@ const config: StorybookConfig = {
         "../__docs__/**/*.mdx",
     ],
     addons: [
-        getAbsolutePath("@storybook/addon-essentials"),
-        getAbsolutePath("@storybook/addon-a11y"),
-        getAbsolutePath("@storybook/addon-designs"),
-        getAbsolutePath("@storybook/addon-interactions"),
-        getAbsolutePath("@storybook/addon-mdx-gfm"),
-        getAbsolutePath("storybook-addon-pseudo-states"),
+        "@storybook/addon-essentials",
+        "@storybook/addon-a11y",
+        "@storybook/addon-designs",
+        "storybook-addon-pseudo-states",
+        "@storybook/experimental-addon-test",
     ],
     staticDirs: ["../static"],
     core: {
         disableTelemetry: true,
     },
-    framework: getAbsolutePath("@storybook/react-vite"),
-    async viteFinal(config, {configType}) {
-        // Merge custom configuration into the default config
-        const mergedConfig = mergeConfig(config, {
-            resolve: {
-                // Allow us to detect changes from local wonder-blocks packages.
-                alias: [
-                    {
-                        find: /^@khanacademy\/wonder-blocks(-.*)$/,
-                        replacement: resolve(
-                            __dirname,
-                            "../packages/wonder-blocks$1/src",
-                        ),
-                    },
-                ],
-            },
-        });
-
-        // Add turbosnap to production builds so we can let Chromatic take
-        // snapshots only to stories associated with the current PR.
-        if (configType === "PRODUCTION") {
-            config.plugins?.push(
-                turbosnap({rootDir: config.root || process.cwd()}),
-            );
-        }
-
-        return mergedConfig;
-    },
-    docs: {
-        autodocs: true,
-    },
+    framework: "@storybook/react-vite",
 };
 
 export default config;
-
-function getAbsolutePath(value: string): any {
-    return dirname(require.resolve(join(value, "package.json")));
-}

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import wonderBlocksTheme from "./wonder-blocks-theme";
-
+// import wonderBlocksTheme from "./wonder-blocks-theme";
+import {Decorator} from "@storybook/react";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 import Link from "@khanacademy/wonder-blocks-link";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
@@ -84,7 +84,7 @@ const parameters = {
             ignoreSelector:
                 ".docs-story h2, .docs-story h3, .sbdocs #stories, .sbdocs #usage, .sbdocs-subtitle",
         },
-        theme: wonderBlocksTheme,
+        // theme: wonderBlocksTheme,
         components: {
             // Override the default link component to use the WB Link component.
             a: Link,
@@ -95,31 +95,31 @@ const parameters = {
     },
 };
 
-export const decorators = [
-    (Story, context) => {
-        const theme = context.globals.theme;
-        const enableRenderStateRootDecorator =
-            context.parameters.enableRenderStateRootDecorator;
-
-        if (enableRenderStateRootDecorator) {
-            return (
-                <RenderStateRoot>
-                    <ThemeSwitcherContext.Provider value={theme}>
-                        <Story />
-                    </ThemeSwitcherContext.Provider>
-                </RenderStateRoot>
-            );
-        }
+const withThemeSwitcher: Decorator = (
+    Story,
+    {globals: {theme}, parameters: {enableRenderStateRootDecorator}},
+) => {
+    if (enableRenderStateRootDecorator) {
         return (
-            <ThemeSwitcherContext.Provider value={theme}>
-                <Story />
-            </ThemeSwitcherContext.Provider>
+            <RenderStateRoot>
+                <ThemeSwitcherContext.Provider value={theme}>
+                    <Story />
+                </ThemeSwitcherContext.Provider>
+            </RenderStateRoot>
         );
-    },
-];
+    }
+    return (
+        <ThemeSwitcherContext.Provider value={theme}>
+            <Story />
+        </ThemeSwitcherContext.Provider>
+    );
+};
+
+export const decorators = [withThemeSwitcher];
 
 const preview: Preview = {
     parameters,
+
     globalTypes: {
         // Allow the user to select a theme from the toolbar.
         theme: {
@@ -146,6 +146,8 @@ const preview: Preview = {
             },
         },
     },
+
+    tags: ["autodocs"],
 };
 
 export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package.json

@@ -51,17 +51,16 @@
     "@khanacademy/eslint-plugin": "^2.0.0",
     "@khanacademy/wonder-stuff-testing": "^3.0.1",
     "@rollup/plugin-node-resolve": "^15.0.2",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-actions": "^8.2.1",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-docs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-mdx-gfm": "^8.2.1",
-    "@storybook/preview-api": "^8.2.1",
-    "@storybook/react": "^8.2.1",
-    "@storybook/react-vite": "^8.2.1",
-    "@storybook/test": "^8.2.1",
+    "@storybook/addon-a11y": "^8.5.0-alpha.10",
+    "@storybook/addon-actions": "^8.5.0-alpha.10",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-docs": "^8.5.0-alpha.10",
+    "@storybook/addon-essentials": "^8.5.0-alpha.10",
+    "@storybook/experimental-addon-test": "^8.5.0-alpha.10",
+    "@storybook/preview-api": "^8.5.0-alpha.10",
+    "@storybook/react": "^8.5.0-alpha.10",
+    "@storybook/react-vite": "^8.5.0-alpha.10",
+    "@storybook/test": "^8.5.0-alpha.10",
     "@swc-node/register": "^1.6.5",
     "@swc/core": "^1.3.36",
     "@testing-library/jest-dom": "^5.16.5",
@@ -80,6 +79,8 @@
     "@types/react-window": "^1.8.5",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/browser": "^2.1.5",
     "alex": "^11.0.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.3",
@@ -109,17 +110,18 @@
     "jest-extended": "^4.0.2",
     "jscodeshift": "^0.15.1",
     "npm-package-json-lint": "^6.4.0",
+    "playwright": "^1.49.0",
     "prettier": "^2.8.1",
     "react-refresh": "^0.14.0",
     "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.0.0-beta.2",
     "rollup-plugin-node-externals": "^7.1.2",
-    "storybook": "^8.2.1",
+    "storybook": "^8.5.0-alpha.10",
     "storybook-addon-pseudo-states": "^3.1.1",
     "typescript": "^4.9.5",
     "typescript-coverage-report": "^0.7.0",
     "vite": "^4.4.8",
-    "vite-plugin-turbosnap": "^1.0.2"
+    "vitest": "^2.1.5"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",

vite.config.ts

@@ -0,0 +1,25 @@
+import {resolve} from "path";
+import react from "@vitejs/plugin-react";
+import {defineConfig} from "vite";
+
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: [
+            // Allow us to detect changes from local wonder-blocks packages.
+            {
+                find: /^@khanacademy\/wonder-blocks(-.*)$/,
+                replacement: resolve(
+                    __dirname,
+                    "./packages/wonder-blocks$1/src",
+                ),
+            },
+            // Needed for Storybook + React to work with vitest.
+            // https://github.com/storybookjs/storybook/issues/26842
+            {
+                find: "@storybook/react-dom-shim",
+                replacement: "@storybook/react-dom-shim/dist/react-16",
+            },
+        ],
+    },
+});

vitest.config.ts

@@ -0,0 +1,23 @@
+import {mergeConfig} from "vitest/config";
+import {storybookTest} from "@storybook/experimental-addon-test/vitest-plugin";
+import viteConfig from "./vite.config";
+
+// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
+export default mergeConfig(viteConfig, {
+    plugins: [
+        // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
+        storybookTest({configDir: ".storybook"}),
+    ],
+    test: {
+        name: "storybook",
+        browser: {
+            enabled: true,
+            headless: true,
+            name: "chromium",
+            provider: "playwright",
+        },
+        // Make sure to adjust this pattern to match your stories files.
+        include: ["./__docs__/**/*.stories.@(ts|tsx)"],
+        setupFiles: [".storybook/vitest.setup.ts"],
+    },
+});