Merge pull request 'feature/setup-stotybook' (#11) from feature/setup-stotybook into main

Reviewed-on: #11

.gitignore

@@ -34,3 +34,6 @@ vite.config.ts.timestamp-*
 
 /docs
 AGENTS.md
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+    'stories': [
+        '../src/**/*.mdx',
+        '../src/**/*.stories.@(js|ts|svelte)',
+    ],
+    'addons': [
+        {
+            name: '@storybook/addon-svelte-csf',
+            options: {
+                legacyTemplate: true, // Enables the legacy template syntax
+            },
+        },
+        '@chromatic-com/storybook',
+        '@storybook/addon-vitest',
+        '@storybook/addon-a11y',
+        '@storybook/addon-docs',
+    ],
+    'framework': '@storybook/svelte-vite',
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,23 @@
+import type { Preview } from '@storybook/svelte-vite';
+
+import '../src/app/styles/app.css';
+
+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/svelte-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([a11yAddonAnnotations, projectAnnotations]);

package.json

@@ -15,20 +15,32 @@
     "format": "dprint fmt",
     "format:check": "dprint check",
     "test:e2e": "playwright test",
-    "test": "npm run test:e2e"
+    "test": "npm run test:e2e",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
     "@internationalized/date": "^3.10.0",
     "@lucide/svelte": "^0.561.0",
     "@playwright/test": "^1.57.0",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-svelte-csf": "^5.0.10",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/svelte-vite": "^10.1.11",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/vite": "^4.1.18",
     "@tsconfig/svelte": "^5.0.6",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
     "bits-ui": "^2.14.4",
     "clsx": "^2.1.1",
     "dprint": "^0.50.2",
     "lefthook": "^2.0.13",
     "oxlint": "^1.35.0",
+    "playwright": "^1.57.0",
+    "storybook": "^10.1.11",
     "svelte": "^5.45.6",
     "svelte-check": "^4.3.4",
     "svelte-language-server": "^0.17.23",
@@ -37,6 +49,7 @@
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.6"
+    "vite": "^7.2.6",
+    "vitest": "^4.0.16"
   }
 }

src/shared/ui/ComboControl/ComboControl.stories.svelte

@@ -0,0 +1,64 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+
+const { Story } = defineMeta({
+    title: 'Shared/UI/ComboControl',
+    component: ComboControl,
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: 'number' },
+        minValue: { control: 'number' },
+        maxValue: { control: 'number' },
+        step: { control: 'number' },
+        increaseDisabled: { control: 'boolean' },
+        decreaseDisabled: { control: 'boolean' },
+        onChange: { action: 'onChange' },
+        onIncrease: { action: 'onIncrease' },
+        onDecrease: { action: 'onDecrease' },
+    },
+});
+</script>
+
+<script lang="ts">
+import ComboControl from './ComboControl.svelte';
+
+let integerStep = 1;
+let decimalStep = 0.05;
+
+let integerValue = 16;
+let decimalValue = 1.5;
+
+let integerMinValue = 8;
+let decimalMinValue = 1;
+
+let integerMaxValue = 100;
+let decimalMaxValue = 2;
+
+function onChange() {}
+function onIncrease() {}
+function onDecrease() {}
+</script>
+
+<Story name="Integer Step">
+    <ComboControl
+        value={integerValue}
+        step={integerStep}
+        onChange={onChange}
+        onIncrease={onIncrease}
+        onDecrease={onDecrease}
+        minValue={integerMinValue}
+        maxValue={integerMaxValue}
+    />
+</Story>
+
+<Story name="Decimal Step">
+    <ComboControl
+        value={decimalValue}
+        step={decimalStep}
+        onChange={onChange}
+        onIncrease={onIncrease}
+        onDecrease={onDecrease}
+        minValue={decimalMinValue}
+        maxValue={decimalMaxValue}
+    />
+</Story>

svelte.config.js

@@ -4,7 +4,7 @@ const config = {
     preprocess: vitePreprocess(),
 
     compilerOptions: {
-        runes: true,
+        runes: undefined,
     },
 };
 

vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />