svelte: Add Storybook setup

Author: Turbo87

pnpm-lock.yaml

@@ -21,3 +21,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+*storybook.log
+storybook-static

svelte/.gitignore

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

svelte/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/sveltekit';
+
+import '../src/lib/css/global.css';
+
+const preview: Preview = {
+  initialGlobals: {
+    backgrounds: { value: 'content' },
+  },
+  parameters: {
+    backgrounds: {
+      options: {
+        content: { name: 'Dynamic', value: 'var(--main-bg)' },
+        header: { name: 'Header', value: 'var(--header-bg-color)' },
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

svelte/.storybook/preview.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
 import prettier from 'eslint-config-prettier';
+import storybook from 'eslint-plugin-storybook';
 import svelte from 'eslint-plugin-svelte';
 import { defineConfig } from 'eslint/config';
 import globals from 'globals';
@@ -19,6 +20,7 @@ export default defineConfig(
   ...svelte.configs.recommended,
   prettier,
   ...svelte.configs.prettier,
+  ...storybook.configs['flat/recommended'],
   {
     languageOptions: { globals: { ...globals.browser, ...globals.node } },
 

svelte/eslint.config.js

@@ -13,25 +13,36 @@
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
     "test:unit": "vitest",
-    "test": "npm run test:unit -- --run"
+    "test": "npm run test:unit -- --run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "2.0.0",
     "@eslint/js": "9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "4.7.0",
     "@poppanator/sveltekit-svg": "6.0.1",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-svelte-csf": "^5.0.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/sveltekit": "^10.1.10",
     "@sveltejs/adapter-static": "3.0.10",
     "@sveltejs/kit": "2.49.2",
     "@sveltejs/vite-plugin-svelte": "6.2.1",
     "@types/node": "24.10.4",
     "@vitest/browser-playwright": "4.0.16",
+    "@vitest/coverage-v8": "4.0.16",
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-storybook": "^10.1.10",
     "eslint-plugin-svelte": "3.13.1",
     "globals": "16.5.0",
     "playwright": "1.57.0",
     "prettier": "3.7.4",
     "prettier-plugin-svelte": "3.4.1",
+    "storybook": "^10.1.10",
     "svelte": "5.46.0",
     "svelte-check": "4.3.4",
     "typescript": "5.9.3",

svelte/package.json

@@ -0,0 +1,13 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Footer from './Footer.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Footer',
+    component: Footer,
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Default" />

svelte/src/lib/components/Footer.stories.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Header from './Header.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Header',
+    component: Header,
+    tags: ['autodocs'],
+    globals: {
+      backgrounds: { value: 'header' },
+    },
+  });
+</script>
+
+<Story name="Default" />
+
+<Story name="Hero" args={{ hero: true }} />

svelte/src/lib/components/Header.stories.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import PageHeader from './PageHeader.svelte';
+
+  const { Story } = defineMeta({
+    title: 'PageHeader',
+    component: PageHeader,
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Default" args={{ title: 'Usage Policy' }} />
+
+<Story name="with suffix" args={{ title: 'All Crates', suffix: "for keyword 'web'" }} />
+
+<Story name="with spinner" args={{ title: 'Search Results', suffix: "for 'web'", showSpinner: true }} />
+
+<Story name="with custom content">custom content</Story>

svelte/src/lib/components/PageHeader.stories.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import SearchForm from './SearchForm.svelte';
+
+  const { Story } = defineMeta({
+    title: 'SearchForm',
+    component: SearchForm,
+    tags: ['autodocs'],
+    globals: {
+      backgrounds: { value: 'header' },
+    },
+    argTypes: {
+      size: {
+        control: 'inline-radio',
+        options: [undefined, 'big'],
+      },
+    },
+  });
+</script>
+
+<Story name="Default" />
+
+<Story name="Big" args={{ size: 'big' }} />
+
+<Story name="with autofocus" args={{ autofocus: true }} />