refactor(ui): update shared components and add ControlGroup, SidebarContainer

2026-03-02 22:19:35 +03:00
parent 13818d5844
commit 0dd08874bc
33 changed files with 927 additions and 203 deletions
@@ -0,0 +1,91 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import ButtonGroup from './ButtonGroup.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/ButtonGroup',
+    component: ButtonGroup,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Wraps buttons in a warm-surface pill with a 1px gap and subtle border. Use for segmented controls, view toggles, or any mutually exclusive button set.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import { Button } from '$shared/ui/Button';
+</script>
+
+<Story name="Default">
+    {#snippet template(args)}
+        <ButtonGroup {...args}>
+            <Button variant="tertiary">Option 1</Button>
+            <Button variant="tertiary">Option 2</Button>
+            <Button variant="tertiary">Option 3</Button>
+        </ButtonGroup>
+    {/snippet}
+</Story>
+
+<Story name="Horizontal">
+    {#snippet template(args)}
+        <ButtonGroup {...args}>
+            <Button variant="tertiary">Day</Button>
+            <Button variant="tertiary" active>Week</Button>
+            <Button variant="tertiary">Month</Button>
+            <Button variant="tertiary">Year</Button>
+        </ButtonGroup>
+    {/snippet}
+</Story>
+
+<Story name="Vertical">
+    {#snippet template(args)}
+        <ButtonGroup {...args} class="flex-col">
+            <Button variant="tertiary">Top</Button>
+            <Button variant="tertiary" active>Middle</Button>
+            <Button variant="tertiary">Bottom</Button>
+        </ButtonGroup>
+    {/snippet}
+</Story>
+
+<Story name="With Icons">
+    {#snippet template(args)}
+        <ButtonGroup {...args}>
+            <Button variant="tertiary">Grid</Button>
+            <Button variant="tertiary" active>List</Button>
+            <Button variant="tertiary">Map</Button>
+        </ButtonGroup>
+    {/snippet}
+</Story>
+
+<Story
+    name="Dark Mode"
+    parameters={{
+        backgrounds: {
+            default: 'dark',
+        },
+    }}
+>
+    {#snippet template(args)}
+        <div class="p-8 bg-background text-foreground">
+            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
+            <ButtonGroup {...args}>
+                <Button variant="tertiary">Option A</Button>
+                <Button variant="tertiary" active>Option B</Button>
+                <Button variant="tertiary">Option C</Button>
+            </ButtonGroup>
+        </div>
+    {/snippet}
+</Story>