feat(ui): upgrade to storybook 9

Replaces rollup with wasm version for portability.

pkgs/clan-app/ui/.storybook/main.ts

@@ -1,34 +1,32 @@
-import { createRequire } from "module";
-import { dirname, join } from "path";
 import { mergeConfig } from "vite";
 import type { StorybookConfig } from "@kachurun/storybook-solid-vite";
 
-const require = createRequire(import.meta.url);
-const getAbsolutePath = (pkg: string) =>
-  dirname(require.resolve(join(pkg, "package.json")));
-
 const config: StorybookConfig = {
+  framework: "@kachurun/storybook-solid-vite",
   stories: ["../src/components/**/*.mdx", "../src/components/**/*.stories.tsx"],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
+    "@storybook/addon-links",
-    getAbsolutePath("@storybook/addon-essentials"),
+    "@storybook/addon-docs",
-    getAbsolutePath("@storybook/addon-interactions"),
+    "@storybook/addon-a11y",
+    "@storybook/addon-onboarding",
   ],
-  framework: {
-    name: "@kachurun/storybook-solid-vite",
-    options: {},
-  },
   async viteFinal(config) {
     return mergeConfig(config, {
       define: { "process.env": {} },
     });
   },
-  docs: {
-    autodocs: "tag",
-  },
   core: {
     disableTelemetry: true,
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      // 👇 Default prop filter, which excludes props from node_modules
+      propFilter: (prop: any) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
 };
 
 export default config;

pkgs/clan-app/ui/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@kachurun/storybook-solid";
+import type { Preview } from "@kachurun/storybook-solid-vite";
 
 import "@/src/components/v2/index.css";
 import "../src/index.css";
@@ -8,13 +8,6 @@ export const preview: Preview = {
   tags: ["autodocs"],
   parameters: {
     docs: { toc: true },
-    backgrounds: {
-      values: [
-        { name: "Dark", value: "#333" },
-        { name: "Light", value: "#ffffff" },
-      ],
-      default: "Light",
-    },
     // automatically create action args for all props that start with "on"
     actions: { argTypesRegex: "^on.*" },
     controls: {

pkgs/clan-app/ui/.storybook/test-runner.ts

@@ -1,12 +0,0 @@
-import type { TestRunnerConfig } from "@storybook/test-runner";
-
-const config: TestRunnerConfig = {
-  async postVisit(page, context) {
-    // the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
-    const elementHandler = await page.$("#storybook-root");
-    const innerHTML = await elementHandler.innerHTML();
-    expect(innerHTML).toMatchSnapshot();
-  },
-};
-
-export default config;

pkgs/clan-app/ui/.storybook/vitest.setup.ts

@@ -0,0 +1,8 @@
+import { setProjectAnnotations } from "@kachurun/storybook-solid-vite";
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+
+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([a11yAddonAnnotations, projectAnnotations]);

pkgs/clan-app/ui/package.json

@@ -10,31 +10,32 @@
     "convert-html": "node gtk.webview.js",
     "serve": "vite preview",
     "check": "tsc --noEmit --skipLibCheck && eslint ./src",
-    "test": "vitest run --typecheck",
+    "test": "vitest run --project unit --typecheck",
     "storybook": "storybook",
     "storybook-build": "storybook build",
     "storybook-dev": "storybook dev -p 6006",
-    "test-storybook": "test-storybook --browsers chromium --ci",
+    "test-storybook": "vitest run --project storybook",
-    "test-storybook-update-snapshots": "npm run test-storybook -- --updateSnapshot",
+    "test-storybook-update-snapshots": "vitest run --project storybook --update",
     "test-storybook-static": "npm run storybook-build && concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server storybook-static --port 6006 --silent' 'wait-on tcp:127.0.0.1:6006 && npm run test-storybook'"
   },
   "license": "MIT",
   "devDependencies": {
     "@babel/plugin-syntax-import-attributes": "^7.27.1",
     "@eslint/js": "^9.3.0",
-    "@kachurun/storybook-solid": "^8.6.7",
+    "@kachurun/storybook-solid-vite": "^9.0.11",
-    "@kachurun/storybook-solid-vite": "^8.6.7",
+    "@storybook/addon-a11y": "^9.0.8",
-    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-docs": "^9.0.8",
-    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^9.0.8",
-    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-onboarding": "^9.0.8",
-    "@storybook/addon-viewport": "^8.6.14",
+    "@storybook/addon-viewport": "^9.0.8",
-    "@storybook/builder-vite": "^8.6.14",
+    "@storybook/addon-vitest": "^9.0.8",
-    "@storybook/test-runner": "^0.22.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^22.15.19",
     "@types/three": "^0.176.0",
     "@typescript-eslint/parser": "^8.32.1",
+    "@vitest/browser": "^3.2.3",
+    "@vitest/coverage-v8": "^3.2.3",
     "autoprefixer": "^10.4.19",
     "classnames": "^2.5.1",
     "concurrently": "^9.1.2",
@@ -42,19 +43,19 @@
     "eslint-plugin-tailwindcss": "^3.17.0",
     "http-server": "^14.1.1",
     "jsdom": "^26.1.0",
+    "playwright": "~1.52.0",
     "postcss": "^8.4.38",
     "postcss-url": "^10.1.3",
     "prettier": "^3.2.5",
     "solid-devtools": "^0.34.0",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.8",
-    "storybook-addon-pseudo-states": "^4.0.3",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
     "vite-plugin-solid": "^2.8.2",
     "vite-plugin-solid-svg": "^0.8.1",
-    "vitest": "^3.1.4",
+    "vitest": "^3.2.3",
     "wait-on": "^8.0.3"
   },
   "dependencies": {
@@ -64,7 +65,6 @@
     "@modular-forms/solid": "^0.25.1",
     "@solid-primitives/storage": "^4.3.2",
     "@solidjs/router": "^0.15.3",
-    "@storybook/test": "^8.6.14",
     "@tanstack/eslint-plugin-query": "^5.51.12",
     "@tanstack/solid-query": "^5.76.0",
     "corvu": "^0.7.1",
@@ -74,5 +74,20 @@
     "solid-markdown": "^2.0.13",
     "solid-toast": "^0.5.0",
     "three": "^0.176.0"
+  },
+  "optionalDependencies": {
+    "@esbuild/darwin-arm64": "^0.25.4",
+    "@esbuild/darwin-x64": "^0.25.4",
+    "@esbuild/linux-arm64": "^0.25.4",
+    "@esbuild/linux-x64": "^0.25.4"
+  },
+  "overrides": {
+    "vite": {
+      "rollup": "npm:@rollup/wasm-node@^4.34.9"
+    },
+    "@rollup/rollup-darwin-x64": "npm:@rollup/wasm-node@^4.34.9",
+    "@rollup/rollup-linux-x64": "npm:@rollup/wasm-node@^4.34.9",
+    "@rollup/rollup-darwin-arm64": "npm:@rollup/wasm-node@^4.34.9",
+    "@rollup/rollup-linux-arm64": "npm:@rollup/wasm-node@^4.34.9"
   }
 }

pkgs/clan-app/ui/src/components/icon/index.tsx

@@ -89,7 +89,6 @@ const Icon: Component<IconProps> = (props) => {
       width={iconProps.size || 16}
       height={iconProps.size || 16}
       viewBox="0 0 48 48"
-      // @ts-expect-error: dont know, fix this type nit later
       ref={iconProps.ref}
       {...iconProps}
     />

pkgs/clan-app/ui/src/components/v2/Button/Button.mdx

@@ -1,4 +1,4 @@
-import { DocsStory, Meta, Canvas } from "@storybook/blocks";
+import { DocsStory, Meta, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as ButtonStories from "./Button.stories";
 

pkgs/clan-app/ui/src/components/v2/Button/Button.stories.tsx

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { Button, ButtonProps } from "./Button";
 import { Component } from "solid-js";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import { expect, fn, waitFor } from "storybook/test";
+import { PlayFunctionContext } from "storybook/internal/csf";
+import { StoryContext } from "@kachurun/storybook-solid-vite";
 
 const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
 
@@ -160,9 +162,8 @@ export const Primary: Story = {
       mockTimers: true,
     },
   },
-  play: async ({ args, canvasElement, step }) => {
-    const canvas = within(canvasElement);
 
+  play: async ({ canvas, step, userEvent, args }: StoryContext) => {
     const buttons = await canvas.findAllByRole("button");
 
     for (const button of buttons) {
@@ -233,8 +234,8 @@ export const GhostPrimary: Story = {
   },
   play: Primary.play,
   decorators: [
-    (Story) => (
+    (Story: StoryObj) => (
-      <div class="bg-def-3 p-10">
+      <div class="p-10 bg-def-3">
         <Story />
       </div>
     ),

pkgs/clan-app/ui/src/components/v2/Icon/Icon.tsx

@@ -116,7 +116,6 @@ const Icon: Component<IconProps> = (props) => {
       width={iconProps.size || "1em"}
       height={iconProps.size || "1em"}
       viewBox="0 0 48 48"
-      // @ts-expect-error: dont know, fix this type nit later
       ref={iconProps.ref}
       {...iconProps}
     />

pkgs/clan-app/ui/src/components/v2/Loader/__snapshots__/Loader.stories.tsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Components/Loader Primary smoke-test 1`] = `
-<div class="loader primary">
-  <div class="wrapper">
-    <div class="parent">
-    </div>
-  </div>
-  <div class="child">
-  </div>
-</div>
-`;
-
-exports[`Components/Loader Secondary smoke-test 1`] = `
-<div class="loader secondary">
-  <div class="wrapper">
-    <div class="parent">
-    </div>
-  </div>
-  <div class="child">
-  </div>
-</div>
-`;

pkgs/clan-app/ui/src/components/v2/Typography/Typography.mdx

@@ -1,4 +1,4 @@
-import { DocsStory, Meta, Canvas } from "@storybook/blocks";
+import { DocsStory, Meta, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as TypographyStories from "./Typography.stories";
 

pkgs/clan-app/ui/src/components/v2/Typography/__snapshots__/Typography.stories.tsx.snap

@@ -1,955 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Components/Typography Body smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-body">
-          body / default / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-body">
-          body / default / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body">
-          body / default / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-s font-body">
-          body / s / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-s font-body">
-          body / s / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-s font-body">
-          body / s / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xs font-body">
-          body / xs / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xs font-body">
-          body / xs / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xs font-body">
-          body / xs / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xxs font-body">
-          body / xxs / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xxs font-body">
-          body / xxs / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xxs font-body">
-          body / xxs / bold
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography BodyCondensed smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography Colors smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography ColorsInverted smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left text-white bg-inv-1">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-default font-body">
-          body / default / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-default font-body">
-          body / default / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-default font-body">
-          body / default / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-s font-body">
-          body / s / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-s font-body">
-          body / s / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-s font-body">
-          body / s / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xs font-body">
-          body / xs / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xs font-body">
-          body / xs / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xs font-body">
-          body / xs / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xxs font-body">
-          body / xxs / normal / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xxs font-body">
-          body / xxs / medium / quaternary
-        </span>
-        <br>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / inherit
-        </span>
-        <br>
-        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / primary
-        </span>
-        <br>
-        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / secondary
-        </span>
-        <br>
-        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / tertiary
-        </span>
-        <br>
-        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xxs font-body">
-          body / xxs / bold / quaternary
-        </span>
-        <br>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography Headline smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-headline">
-          headline / default / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-headline">
-          headline / default / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-headline">
-          headline / default / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-headline">
-          headline / m / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-headline">
-          headline / m / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-headline">
-          headline / m / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-headline">
-          headline / l / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-headline">
-          headline / l / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-headline">
-          headline / l / bold
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography LabelCondensed smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-label">
-          label / default / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-label">
-          label / default / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-label">
-          label / default / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-label">
-          label / s / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-label">
-          label / s / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-label">
-          label / s / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-label">
-          label / xs / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-label">
-          label / xs / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-label">
-          label / xs / bold
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography LabelMono smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-normal font-size-default font-label">
-          label / default / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-medium font-size-default font-label">
-          label / default / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-bold font-size-default font-label">
-          label / default / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-normal font-size-s font-label">
-          label / s / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-medium font-size-s font-label">
-          label / s / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-bold font-size-s font-label">
-          label / s / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-normal font-size-xs font-label">
-          label / xs / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-medium font-size-xs font-label">
-          label / xs / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-mono font-weight-bold font-size-xs font-label">
-          label / xs / bold
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography Teaser smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-teaser">
-          teaser / default / bold
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Components/Typography Title smoke-test 1`] = `
-<table class="w-full min-w-max table-auto text-left">
-  <tbody>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-title">
-          title / default / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-title">
-          title / default / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-title">
-          title / default / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-title">
-          title / m / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-title">
-          title / m / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-title">
-          title / m / bold
-        </span>
-      </td>
-    </tr>
-    <tr class="border-b border-def-3 even:bg-def-2">
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-title">
-          title / l / normal
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-title">
-          title / l / medium
-        </span>
-      </td>
-      <td class="px-6 py-2 ">
-        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-title">
-          title / l / bold
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;

pkgs/clan-app/ui/tsconfig.json

@@ -8,7 +8,7 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite-plugin-solid-svg/types-component-solid", "vite/client"],
+    "types": ["vite/client", "vite-plugin-solid-svg/types-component-solid"],
     "noEmit": true,
     "resolveJsonModule": true,
     "allowJs": true,

pkgs/clan-app/ui/vitest.config.ts

@@ -0,0 +1,53 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import solid from "vite-plugin-solid";
+import { defineConfig, mergeConfig } from "vitest/config";
+// @ts-expect-error the type is a bit funky, but it's working
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+
+const dirname =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    plugins: [solid()],
+    test: {
+      projects: [
+        {
+          test: {
+            name: "unit",
+          },
+        },
+        {
+          extends: path.join(dirname, "vite.config.ts"),
+          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: {
+              // Enable browser-based testing for UI components
+              enabled: true,
+              headless: true,
+              provider: "playwright",
+              instances: [{ browser: "chromium" }],
+            },
+            // This setup file applies Storybook project annotations for Vitest
+            // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+            setupFiles: [".storybook/vitest.setup.ts"],
+          },
+        },
+      ],
+    },
+  }),
+);