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,53 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import ControlGroup from './ControlGroup.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/ControlGroup',
+    component: ControlGroup,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: { component: 'Labelled section for grouping related sidebar controls, with a bottom border.' },
+            story: { inline: false },
+        },
+        layout: 'padded',
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Uppercase label shown above the control content',
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+});
+</script>
+
+<Story name="Default/Basic">
+    {#snippet template()}
+        <div class="w-64">
+            <ControlGroup label="Font Size">
+                <div class="text-sm text-neutral-500">Control content here</div>
+            </ControlGroup>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="With form control">
+    {#snippet template()}
+        <div class="w-64">
+            <ControlGroup label="Weight">
+                <div class="flex gap-2">
+                    <button class="px-3 py-1 text-xs border border-neutral-300 rounded">100</button>
+                    <button class="px-3 py-1 text-xs border border-neutral-300 rounded">400</button>
+                    <button class="px-3 py-1 text-xs border border-neutral-300 rounded bg-neutral-900 text-white">
+                        700
+                    </button>
+                </div>
+            </ControlGroup>
+        </div>
+    {/snippet}
+</Story>