⬆️ Update storybook and fix compatibility issues

.github/workflows/tests.yml

@@ -110,6 +110,8 @@ jobs:
 
       - name: Component Tests
         working-directory: ./frontend
+        env:
+          VITEST_BROWSER_TIMEOUT: 120000
         run: |
           ./scripts/test-components
 

frontend/.storybook/main.js

@@ -1,3 +1,5 @@
+import { defineConfig } from 'vite';
+
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -5,18 +7,38 @@ const config = {
   addons: [
     "@storybook/addon-themes",
     "@storybook/addon-docs",
-    "@storybook/addon-vitest"
+    "@storybook/addon-vitest",
   ],
-  core: {
-    builder: "@storybook/builder-vite",
-    options: {
-      viteConfigPath: "../vite.config.js",
-    },
-  },
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {
+      // fastRefresh: false,
+    }
   },
   docs: {},
+
+  async viteFinal(config) {
+    return defineConfig({
+      ...config,
+      plugins: [
+        ...(config.plugins ?? []),
+        {
+          name: 'force-full-reload-always',
+          apply: 'serve',
+          enforce: 'post',
+
+          handleHotUpdate(ctx) {
+            ctx.server.ws.send({
+              type: 'full-reload',
+              path: '*',
+            });
+
+            // returning [] tells Vite: “no modules handled”
+            return [];
+          },
+        }
+      ]
+    });
+  }
 };
 export default config;

frontend/.storybook/preview.js

@@ -1,6 +1,5 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 
-
 import Components from "@target/components";
 import translations from "@public/translation.en.js";
 Components.setDefaultTranslations(translations);

frontend/package.json

@@ -58,15 +58,16 @@
     "@penpot/plugins-runtime": "1.3.2",
     "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "portal:./text-editor",
-    "@playwright/test": "1.52.0",
+    "@playwright/test": "1.57.0",
-    "@storybook/addon-docs": "10.0.4",
+    "@storybook/addon-docs": "10.1.11",
-    "@storybook/addon-themes": "10.0.4",
+    "@storybook/addon-themes": "10.1.11",
-    "@storybook/addon-vitest": "10.0.4",
+    "@storybook/addon-vitest": "10.1.11",
-    "@storybook/react-vite": "10.0.4",
+    "@storybook/react-vite": "10.1.11",
     "@tokens-studio/sd-transforms": "1.2.11",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.19.3",
-    "@vitest/browser": "3.2.4",
+    "@vitest/browser": "4.0.16",
-    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "4.0.16",
     "@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
     "autoprefixer": "^10.4.21",
     "compression": "^1.8.1",
@@ -80,7 +81,7 @@
     "gettext-parser": "^8.0.0",
     "highlight.js": "^11.10.0",
     "js-beautify": "^1.15.4",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.4.0",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "map-stream": "0.0.7",
@@ -109,15 +110,16 @@
     "sass-embedded": "^1.89.0",
     "sax": "^1.4.1",
     "source-map-support": "^0.5.21",
-    "storybook": "10.0.4",
+    "storybook": "10.1.11",
     "style-dictionary": "5.0.0-rc.1",
     "svg-sprite": "^2.0.4",
     "tdigest": "^0.1.2",
     "tinycolor2": "^1.6.0",
     "typescript": "^5.9.2",
     "ua-parser-js": "2.0.5",
-    "vite": "^6.3.5",
+    "vite": "^7.3.0",
-    "vitest": "^3.2.0",
+    "vitest": "^4.0.16",
+    "wait-on": "^9.0.3",
     "wasm-pack": "^0.13.1",
     "watcher": "^2.3.1",
     "workerpool": "^9.3.2",

frontend/scripts/test-components

@@ -7,7 +7,4 @@ yarn install;
 
 yarn run playwright install chromium --with-deps;
 yarn run build:storybook
-
+yarn run test:storybook
-exec npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-    "npx http-server storybook-static --port 6006 --silent" \
-    "npx wait-on tcp:6006 && yarn test:storybook"

frontend/shadow-cljs.edn

@@ -121,24 +121,22 @@
   :storybook
   {:target :esm
    :output-dir "target/storybook/"
-   :devtools {:enabled false}
+   :devtools {:enabled false
+              :console-support false}
    :js-options
    {:js-provider :import
     :entry-keys ["module" "browser" "main"]
     :export-conditions ["module" "import", "browser" "require" "default"]}
 
    :modules
-   {:base
+   {:components
-    {:entries []}
-
-    :components
     {:exports {default app.main.ui.ds/default
                helpers app.main.ui.ds.helpers/default}
      :prepend-js ";(globalThis.goog.provide = globalThis.goog.constructNamespace_);(globalThis.goog.require = globalThis.goog.module.get);"
-     :depends-on #{:base}}}
+     :depends-on #{}}}
 
    :compiler-options
-   {:output-feature-set :es2020
+   {:output-feature-set :es-next
     :output-wrapper false
     :warnings {:fn-deprecated false}}}
 

frontend/vite.config.js

@@ -3,6 +3,8 @@ import { defineConfig } from "vite";
 import { configDefaults } from "vitest/config";
 import { resolve } from "path";
 
+import { playwright } from '@vitest/browser-playwright'
+
 // https://vitejs.dev/config/
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -32,11 +34,15 @@ export default defineConfig({
           browser: {
             enabled: true,
             headless: true,
-            provider: "playwright",
+            provider: playwright({
-            instances: [
+              launchOptions: {
-              {
+                slowMo: 100,
-                browser: "chromium",
+                timeout: 160000,
               },
+              actionTimeout: 5000,
+            }),
+            instances: [
+              {browser: "chromium"},
             ],
           },
           setupFiles: [".storybook/vitest.setup.ts"],