🔧 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)
2025-12-11 22:14:05 +01:00 · 2025-11-05 17:15:19 +01:00
parent bb65782d08
commit 78fde35df9
29 changed files with 569 additions and 3482 deletions
--- a/frontend/.storybook/main.js
+++ b/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: {
--- a/frontend/.storybook/preview.js
+++ b/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: [
-        { name: 'theme', value: 'var(--color-background-secondary)' },
-      ],
-      default: 'theme',
+      options: {
+        theme: { name: 'theme', value: 'var(--color-background-secondary)' }
+      }
    },
  },
+
+  initialGlobals: {
+    backgrounds: {
+      value: "theme"
+    }
+  }
 };

 export default preview;
--- a/frontend/.storybook/vitest.setup.ts
+++ b/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]);
--- a/frontend/package.json
+++ b/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-interactions": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.22.0",
+    "@storybook/addon-docs": "10.0.4",
+    "@storybook/addon-themes": "10.0.4",
+    "@storybook/addon-vitest": "10.0.4",
+    "@storybook/react-vite": "10.0.4",
    "@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",
--- a/frontend/src/app/main/ui/ds/buttons/buttons.mdx
+++ b/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";

--- a/frontend/src/app/main/ui/ds/controls/combobox.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx
+++ b/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;

--- a/frontend/src/app/main/ui/ds/controls/input.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/controls/numeric_input.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/controls/select.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
+++ b/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} />
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
+++ b/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 },
  },
 };

--- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx
+++ b/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} />
--- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
+++ b/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" }
+    } },
  },
 };

--- a/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
+++ b/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} />
--- a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
+++ b/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"] },
-    backgrounds: { default: "light" },
+    controls: { exclude: ["children", "theme", "style"] }
  },
+
  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 = {
--- a/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
+++ b/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} />
--- a/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
+++ b/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";

--- a/frontend/src/app/main/ui/ds/foundations/utilities/token/token_status.mdx
+++ b/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} />
--- a/frontend/src/app/main/ui/ds/layout/tab_switcher.mdx
+++ b/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";


--- a/frontend/src/app/main/ui/ds/notifications/notifications.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/notifications/toast.stories.jsx
+++ b/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;

--- a/frontend/src/app/main/ui/ds/product/input_with_meta.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/tooltip/tooltip.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/utilities/swatch.mdx
+++ b/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" />
--- a/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx
+++ b/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;

--- a/frontend/vite.config.js
+++ b/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: {
--- a/frontend/vitest.shims.d.ts
+++ b/frontend/vitest.shims.d.ts
@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
				`@@ -0,0 +1 @@`
				`/// <reference types="@vitest/browser/providers/playwright" />`