chore(storybook): install and configure Storybook 10 with svelte-vite

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|ts|svelte)"
+  ],
+  "addons": [
+    "@storybook/addon-svelte-csf",
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs"
+  ],
+  "framework": "@storybook/sveltekit"
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/sveltekit'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/sveltekit';
+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]);

package.json

@@ -18,7 +18,9 @@
 		"test:watch": "vitest --watch",
 		"test:e2e": "playwright test",
 		"test:all": "bun run test && bun run test:e2e",
-		"test:coverage": "vitest --coverage"
+		"test:coverage": "vitest --coverage",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.5",
@@ -40,6 +42,15 @@
 		"tailwindcss": "^4.2.1",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1",
-		"vitest": "^4.0.18"
+		"vitest": "^4.0.18",
+		"storybook": "^10.2.16",
+		"@storybook/sveltekit": "^10.2.16",
+		"@storybook/addon-svelte-csf": "^5.0.11",
+		"@chromatic-com/storybook": "^5.0.1",
+		"@storybook/addon-vitest": "^10.2.16",
+		"@storybook/addon-a11y": "^10.2.16",
+		"@storybook/addon-docs": "^10.2.16",
+		"playwright": "^1.58.2",
+		"@vitest/browser-playwright": "^4.0.18"
 	}
 }

vitest.config.ts

@@ -1,24 +1,52 @@
 import path from "node:path";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { defineConfig } from "vitest/config";
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+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({
-	plugins: [svelte({ hot: !process.env.VITEST })],
+  plugins: [svelte({
-	test: {
+    hot: !process.env.VITEST
-		globals: true,
+  })],
-		environment: "jsdom",
+  test: {
-		setupFiles: ["./src/tests/setup.ts"],
+    globals: true,
-		include: ["src/**/*.{test,spec}.{js,ts}"],
+    environment: "jsdom",
-		exclude: ["src/tests/e2e/**/*.{test,spec}.{js,ts}"],
+    setupFiles: ["./src/tests/setup.ts"],
-	},
+    include: ["src/**/*.{test,spec}.{js,ts}"],
-	resolve: {
+    exclude: ["src/tests/e2e/**/*.{test,spec}.{js,ts}"],
-		alias: {
+    projects: [{
-			$lib: path.resolve("./src/lib"),
+      extends: true,
-			$shared: path.resolve("./src/shared"),
+      plugins: [
-			$pages: path.resolve("./src/pages"),
+      // The plugin will run tests for the stories defined in your Storybook config
-			$features: path.resolve("./src/features"),
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-			$entities: path.resolve("./src/entities"),
+      storybookTest({
-			$widgets: path.resolve("./src/widgets"),
+        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: {
+      $lib: path.resolve("./src/lib"),
+      $shared: path.resolve("./src/shared"),
+      $pages: path.resolve("./src/pages"),
+      $features: path.resolve("./src/features"),
+      $entities: path.resolve("./src/entities"),
+      $widgets: path.resolve("./src/widgets")
+    }
+  }
 });