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
@@ -45,6 +45,7 @@ const { Story } = defineMeta({

 <script lang="ts">
 import XIcon from '@lucide/svelte/icons/x';
+import type { ComponentProps } from 'svelte';
 import ButtonGroup from './ButtonGroup.svelte';
 </script>

@@ -52,7 +53,7 @@ import ButtonGroup from './ButtonGroup.svelte';
    name="Default/Basic"
    parameters={{ docs: { description: { story: 'Standard text button at all sizes' } } }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof Button>)}
        <ButtonGroup>
            <Button {...args} size="xs">xs</Button>
            <Button {...args} size="sm">sm</Button>
@@ -67,7 +68,7 @@ import ButtonGroup from './ButtonGroup.svelte';
    name="Default/With Icon"
    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof Button>)}
        <Button {...args}>
            {#snippet icon()}
                <XIcon />
@@ -81,7 +82,7 @@ import ButtonGroup from './ButtonGroup.svelte';
    name="Primary"
    args={{ variant: 'primary', size: 'md', iconPosition: 'left', active: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof Button>)}
        <Button {...args}>Primary</Button>
    {/snippet}
 </Story>
@@ -90,7 +91,7 @@ import ButtonGroup from './ButtonGroup.svelte';
    name="Secondary"
    args={{ variant: 'secondary', size: 'md', iconPosition: 'left', active: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof Button>)}
        <Button {...args}>Secondary</Button>
    {/snippet}
 </Story>
@@ -99,7 +100,7 @@ import ButtonGroup from './ButtonGroup.svelte';
    name="Icon"
    args={{ variant: 'icon', size: 'md', iconPosition: 'left', active: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof Button>)}
        <Button {...args}>
            {#snippet icon()}
                <XIcon />
@@ -112,7 +113,7 @@ import ButtonGroup from './ButtonGroup.svelte';
    name="Ghost"
    args={{ variant: 'ghost', size: 'md', iconPosition: 'left', active: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof Button>)}
        <Button {...args}>
            Ghost
        </Button>
@@ -27,10 +27,11 @@ const { Story } = defineMeta({

 <script lang="ts">
 import { Button } from '$shared/ui/Button';
+import type { ComponentProps } from 'svelte';
 </script>

 <Story name="Default">
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args}>
            <Button variant="tertiary">Option 1</Button>
            <Button variant="tertiary">Option 2</Button>
@@ -40,7 +41,7 @@ import { Button } from '$shared/ui/Button';
 </Story>

 <Story name="Horizontal">
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args}>
            <Button variant="tertiary">Day</Button>
            <Button variant="tertiary" active>Week</Button>
@@ -51,7 +52,7 @@ import { Button } from '$shared/ui/Button';
 </Story>

 <Story name="Vertical">
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args} class="flex-col">
            <Button variant="tertiary">Top</Button>
            <Button variant="tertiary" active>Middle</Button>
@@ -61,7 +62,7 @@ import { Button } from '$shared/ui/Button';
 </Story>

 <Story name="With Icons">
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <ButtonGroup {...args}>
            <Button variant="tertiary">Grid</Button>
            <Button variant="tertiary" active>List</Button>
@@ -78,7 +79,7 @@ import { Button } from '$shared/ui/Button';
        },
    }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ButtonGroup>)}
        <div class="p-8 bg-background text-foreground">
            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
            <ButtonGroup {...args}>
@@ -43,13 +43,14 @@ const { Story } = defineMeta({
 import MoonIcon from '@lucide/svelte/icons/moon';
 import SearchIcon from '@lucide/svelte/icons/search';
 import TrashIcon from '@lucide/svelte/icons/trash-2';
+import type { ComponentProps } from 'svelte';
 </script>

 <Story
    name="Default"
    args={{ variant: 'icon', size: 'md', active: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof IconButton>)}
        <div class="flex items-center gap-4">
            <IconButton {...args}>
                {#snippet icon()}
@@ -74,7 +75,7 @@ import TrashIcon from '@lucide/svelte/icons/trash-2';
    name="Variants"
    args={{ size: 'md', active: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof IconButton>)}
        <div class="flex items-center gap-4">
            <IconButton {...args} variant="icon">
                {#snippet icon()}
@@ -99,7 +100,7 @@ import TrashIcon from '@lucide/svelte/icons/trash-2';
    name="Active State"
    args={{ size: 'md', animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof IconButton>)}
        <div class="flex items-center gap-4">
            <IconButton {...args} active={false} variant="icon">
                {#snippet icon()}
@@ -123,7 +124,7 @@ import TrashIcon from '@lucide/svelte/icons/trash-2';
        },
    }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof IconButton>)}
        <div class="p-8 bg-background text-foreground">
            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
            <div class="flex items-center gap-4">
@@ -44,6 +44,7 @@ const { Story } = defineMeta({
 </script>

 <script lang="ts">
+import type { ComponentProps } from 'svelte';
 let selected = $state(false);
 </script>

@@ -51,7 +52,7 @@ let selected = $state(false);
    name="Default"
    args={{ variant: 'tertiary', size: 'md', selected: false, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ToggleButton>)}
        <ToggleButton {...args}>Toggle Me</ToggleButton>
    {/snippet}
 </Story>
@@ -60,7 +61,7 @@ let selected = $state(false);
    name="Selected/Unselected"
    args={{ variant: 'tertiary', size: 'md', animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ToggleButton>)}
        <div class="flex items-center gap-4">
            <ToggleButton {...args} selected={false}>
                Unselected
@@ -76,7 +77,7 @@ let selected = $state(false);
    name="Variants"
    args={{ size: 'md', selected: true, animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ToggleButton>)}
        <div class="flex items-center gap-4">
            <ToggleButton {...args} variant="primary">
                Primary
@@ -101,9 +102,15 @@ let selected = $state(false);
    name="Interactive"
    args={{ variant: 'tertiary', size: 'md', animate: true }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ToggleButton>)}
        <div class="flex items-center gap-4">
-            <ToggleButton {...args} selected={selected} onclick={() => selected = !selected}>
+            <ToggleButton
+                {...args}
+                selected={selected}
+                onclick={() => {
+                    selected = !selected;
+                }}
+            >
                Click to toggle
            </ToggleButton>
            <span class="text-sm text-muted-foreground">Currently: {selected ? 'selected' : 'unselected'}</span>
@@ -119,7 +126,7 @@ let selected = $state(false);
        },
    }}
 >
-    {#snippet template(args)}
+    {#snippet template(args: ComponentProps<typeof ToggleButton>)}
        <div class="p-8 bg-background text-foreground">
            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
            <div class="flex items-center gap-4">