feat: add missing storybook files and type template arguments properly

2026-04-17 18:01:24 +03:00
parent 5eb9584797
commit bb65f1c8d6
31 changed files with 1124 additions and 90 deletions
@@ -0,0 +1,52 @@
+<script module lang="ts">
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import StatGroup from './StatGroup.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/StatGroup',
+    component: StatGroup,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: { component: 'Horizontal row of Stat items with automatic separators between them.' },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        stats: {
+            control: 'object',
+            description: 'Array of stat items with label, value, and optional variant',
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import type { ComponentProps } from 'svelte';
+</script>
+
+<Story name="Default/Basic" args={{ stats: [{ label: 'Size', value: '16px' }, { label: 'Weight', value: 400 }] }}>
+    {#snippet template(args: ComponentProps<typeof StatGroup>)}
+        <StatGroup {...args} />
+    {/snippet}
+</Story>
+
+<Story
+    name="Three stats"
+    args={{ stats: [{ label: 'Size', value: '24px' }, { label: 'Weight', value: 700 }, { label: 'Line height', value: 1.5 }] }}
+>
+    {#snippet template(args: ComponentProps<typeof StatGroup>)}
+        <StatGroup {...args} />
+    {/snippet}
+</Story>
+
+<Story name="Single stat" args={{ stats: [{ label: 'Style', value: 'Italic' }] }}>
+    {#snippet template(args: ComponentProps<typeof StatGroup>)}
+        <StatGroup {...args} />
+    {/snippet}
+</Story>