🔧 Upgrade storybook (#7693)

* 🔧 Upgrade to storybook 9.x

* 🔧 Upgrade to storybook 10.x

* 🔧 Update watch:storybook script so it builds its assets dependencies first

* 🔧 Use vitest for storybook tests (test-storybook was deprecated)

frontend/.storybook/main.js

@@ -2,7 +2,11 @@
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   staticDirs: ["../resources/public"],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-themes", "@storybook/addon-interactions"],
+  addons: [
+    "@storybook/addon-themes",
+    "@storybook/addon-docs",
+    "@storybook/addon-vitest"
+  ],
   core: {
     builder: "@storybook/builder-vite",
     options: {

frontend/.storybook/preview.js

@@ -13,9 +13,10 @@ export const decorators = [
   }),
 ];
 
-/** @type { import('@storybook/react').Preview } */
+/** @type { import('@storybook/react-vite').Preview } */
 const preview = {
   decorators: decorators,
+
   parameters: {
     controls: {
       disableSaveFromUI: true,
@@ -25,12 +26,17 @@ const preview = {
       },
     },
     backgrounds: {
-      values: [
+      options: {
-        { name: 'theme', value: 'var(--color-background-secondary)' },
+        theme: { name: 'theme', value: 'var(--color-background-secondary)' }
-      ],
+      }
-      default: 'theme',
     },
   },
+
+  initialGlobals: {
+    backgrounds: {
+      value: "theme"
+    }
+  }
 };
 
 export default preview;

frontend/.storybook/vitest.setup.ts

@@ -0,0 +1,6 @@
+import { setProjectAnnotations } from '@storybook/react-vite';
+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
+setProjectAnnotations([projectAnnotations]);

frontend/package.json

@@ -15,7 +15,9 @@
   },
   "resolutions": {
     "@zip.js/zip.js@npm:^2.7.44": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
-    "@vitejs/plugin-react": "^4.2.0"
+    "@vitejs/plugin-react": "^4.2.0",
+    "playwright": "1.52.0",
+    "playwright-core": "1.52.0"
   },
   "scripts": {
     "build:app:assets": "node ./scripts/build-app-assets.js",
@@ -36,7 +38,7 @@
     "lint:scss:fix": "yarn run prettier -c resources/styles -c src/**/*.scss -w",
     "build:test": "clojure -M:dev:shadow-cljs compile test",
     "test": "yarn run build:test && node target/tests/test.js",
-    "test:storybook": "test-storybook",
+    "test:storybook": "vitest run --project=storybook",
     "watch:test": "mkdir -p target/tests && concurrently \"clojure -M:dev:shadow-cljs watch test\" \"nodemon -C -d 2 -w target/tests --exec 'node target/tests/test.js'\"",
     "test:e2e": "playwright test --project default",
     "translations": "node ./scripts/translations.js",
@@ -46,20 +48,18 @@
     "clear:shadow-cache": "rm -rf .shadow-cljs",
     "watch:app": "yarn run clear:shadow-cache && concurrently \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
     "watch": "yarn run watch:app:assets",
-    "watch:storybook": "concurrently \"storybook dev -p 6006 --no-open\" \"yarn run watch:storybook:assets\"",
+    "watch:storybook": "yarn run build:storybook:assets && concurrently \"storybook dev -p 6006 --no-open\" \"yarn run watch:storybook:assets\"",
     "watch:storybook:assets": "node ./scripts/watch-storybook.js"
   },
   "devDependencies": {
     "@playwright/test": "1.52.0",
-    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-docs": "10.0.4",
-    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-themes": "10.0.4",
-    "@storybook/addon-themes": "^8.6.14",
+    "@storybook/addon-vitest": "10.0.4",
-    "@storybook/blocks": "^8.6.14",
+    "@storybook/react-vite": "10.0.4",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.22.0",
     "@types/node": "^22.15.21",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "^10.4.21",
     "concurrently": "^9.2.1",
     "esbuild": "^0.25.9",
@@ -82,6 +82,7 @@
     "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
     "p-limit": "^6.2.0",
+    "playwright": "1.52.0",
     "postcss": "^8.5.4",
     "postcss-clean": "^1.2.2",
     "prettier": "3.5.3",
@@ -90,7 +91,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.89.0",
     "sass-embedded": "^1.89.0",
-    "storybook": "^8.6.14",
+    "storybook": "10.0.4",
     "svg-sprite": "^2.0.4",
     "typescript": "^5.9.2",
     "vite": "^6.3.5",

frontend/src/app/main/ui/ds/buttons/buttons.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
 
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ButtonStories from "./button.stories";
 import * as IconButtonStories from "./icon_button.stories";
 

frontend/src/app/main/ui/ds/controls/combobox.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
 
-import { Canvas, Meta } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
 import * as ComboboxStories from "./combobox.stories";
 
 <Meta title="Controls/Combobox" />

frontend/src/app/main/ui/ds/controls/combobox.stories.jsx

@@ -7,7 +7,7 @@
 import * as React from "react";
 import Components from "@target/components";
 
-import { userEvent, within, expect } from "@storybook/test";
+import { userEvent, within, expect } from "storybook/test";
 
 const { Combobox } = Components;
 

frontend/src/app/main/ui/ds/controls/input.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
 
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as InputStories from "./input.stories";
 
 <Meta title="Controls/Input" />

frontend/src/app/main/ui/ds/controls/numeric_input.mdx

@@ -3,7 +3,7 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
   Copyright (c) KALEIDOS INC */ }
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as InputStories from "./numeric-input.stories";
 
 <Meta title="Controls/Numeric Input" />

frontend/src/app/main/ui/ds/controls/select.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
 
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as SelectStories from "./select.stories";
 
 <Meta title="Controls/Select" />

frontend/src/app/main/ui/ds/foundations/assets/icon.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as IconStories from "./icon.stories"
 
 <Meta of={IconStories} />

frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx

@@ -56,7 +56,7 @@ export const All = {
   },
   parameters: {
     controls: { exclude: ["iconId", "size"] },
-    backgrounds: { disable: true },
+    backgrounds: { disabled: true },
   },
 };
 

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
 import * as RawSvgStories from "./raw_svg.stories";
 
 <Meta of={RawSvgStories} />

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx

@@ -36,7 +36,9 @@ export const All = {
   ),
   parameters: {
     controls: { exclude: ["id"] },
-    backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
+    backgrounds: { options: {
+      debug: { name: "debug", value: "#ccc" }
+    } },
   },
 };
 

frontend/src/app/main/ui/ds/foundations/typography/heading.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
 import * as HeadingStories from "./heading.stories";
 
 <Meta of={HeadingStories} />

frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx

@@ -9,6 +9,7 @@ const typographyIds = typography.sort();
 export default {
   title: "Foundations/Typography/Heading",
   component: Components.Heading,
+
   argTypes: {
     level: {
       options: [1, 2, 3, 4, 5, 6],
@@ -19,10 +20,11 @@ export default {
       control: { type: "select" },
     },
   },
+
   parameters: {
-    controls: { exclude: ["children", "theme", "style"] },
+    controls: { exclude: ["children", "theme", "style"] }
-    backgrounds: { default: "light" },
   },
+
   args: {
     children: "Lorem ipsum",
     theme: "light",
@@ -31,9 +33,16 @@ export default {
       background: "var(--color-background-primary)",
     },
   },
+
   render: ({ style, children, theme, ...args }) => (
     <Heading {...args}>{children}</Heading>
   ),
+
+  globals: {
+    backgrounds: {
+      value: "light"
+    }
+  }
 };
 
 export const AnyHeading = {

frontend/src/app/main/ui/ds/foundations/typography/text.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
 import * as TextStories from "./text.stories";
 
 <Meta of={TextStories} />

frontend/src/app/main/ui/ds/foundations/typography/typography.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
 import Components from "@target/components";
 import * as TextStories from "../typography/text.stories";
 

frontend/src/app/main/ui/ds/foundations/utilities/token/token_status.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as TokenStatusIconStories from "./token_status.stories"
 
 <Meta of={TokenStatusIconStories} />

frontend/src/app/main/ui/ds/layout/tab_switcher.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as TabSwitcher from "./tab_switcher.stories";
 
 

frontend/src/app/main/ui/ds/notifications/notifications.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ToastStories from "./toast.stories";
 
 <Meta title="Notifications/Docs" />

frontend/src/app/main/ui/ds/notifications/toast.stories.jsx

@@ -6,7 +6,7 @@
 
 import * as React from "react";
 import Components from "@target/components";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 const { Toast } = Components;
 

frontend/src/app/main/ui/ds/product/input_with_meta.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
   
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as InputWithMetaStories from "./input_with_meta.stories";
 
 <Meta title="Product/InputWithMeta" />

frontend/src/app/main/ui/ds/tooltip/tooltip.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
 
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as Tooltip from "./tooltip.stories";
 
 <Meta title= "Tooltip" />

frontend/src/app/main/ui/ds/utilities/swatch.mdx

@@ -4,7 +4,7 @@
 
   Copyright (c) KALEIDOS INC */ }
 
-import { Canvas, Meta } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
 import * as SwatchStories from "./swatch.stories";
 
 <Meta title="Foundations/Utilities/Swatch/Docs" />

frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx

@@ -7,7 +7,7 @@
 import * as React from "react";
 import Components from "@target/components";
 import { helpers } from "@target/components";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 const { Swatch } = Components;
 

frontend/vite.config.js

@@ -1,13 +1,48 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from "vite";
 import { configDefaults } from "vitest/config";
-
 import { resolve } from "path";
 
 // https://vitejs.dev/config/
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+const dirname =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   test: {
     exclude: [...configDefaults.exclude, "target/**", "resources/**"],
     environment: "jsdom",
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, ".storybook"),
+          }),
+        ],
+        test: {
+          name: "storybook",
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: "playwright",
+            instances: [
+              {
+                browser: "chromium",
+              },
+            ],
+          },
+          setupFiles: [".storybook/vitest.setup.ts"],
+        },
+      },
+    ],
   },
   resolve: {
     alias: {

frontend/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />