From 3d11f7317d4c38cab2abe4ec37f6bbd5c30d58d3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 25 Jan 2026 08:23:11 +0300
Subject: [PATCH] feat(ExpandableWrapper): add stories

---
 .../ExpandableWrapper.stories.svelte          | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte

diff --git a/src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte b/src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte
new file mode 100644
index 0000000..98e1292
--- /dev/null
+++ b/src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte
@@ -0,0 +1,94 @@
+<script module lang="ts">
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import { createRawSnippet } from 'svelte';
+import ExpandableWrapper from './ExpandableWrapper.svelte';
+
+const visibleSnippet = createRawSnippet(() => ({
+    render: () =>
+        `<div class="w-48 p-2 font-bold text-indigo-600">
+            Always visible
+        </div>`,
+}));
+
+const hiddenSnippet = createRawSnippet(() => ({
+    render: () =>
+        `<div class="p-4 space-y-2 border-t border-indigo-100 mt-2">
+            <div class="h-4 w-full bg-indigo-100 rounded animate-pulse"></div>
+            <div class="h-4 w-2/3 bg-indigo-50 rounded animate-pulse"></div>
+        </div>`,
+}));
+
+const badgeSnippet = createRawSnippet(() => ({
+    render: () =>
+        `<div class="">
+            <span class="badge badge-primary">*</span>
+        </div>`,
+}));
+
+const { Story } = defineMeta({
+    title: 'Shared/ExpandableWrapper',
+    component: ExpandableWrapper,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Animated styled wrapper for content that can be expanded and collapsed.',
+            },
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+    args: {
+        expanded: false,
+        disabled: false,
+        rotation: 'clockwise',
+        visibleContent: visibleSnippet,
+        hiddenContent: hiddenSnippet,
+    },
+    argTypes: {
+        expanded: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        rotation: {
+            control: 'select',
+            options: ['clockwise', 'counterclockwise'],
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+</script>
+
+<Story name="With hidden content">
+    {#snippet children(args)}
+        <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
+            <ExpandableWrapper
+                {...args}
+                bind:expanded={args.expanded}
+            />
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>
+    {#snippet children(args)}
+        <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
+            <ExpandableWrapper
+                {...args}
+                bind:expanded={args.expanded}
+                disabled={args.disabled}
+            />
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="With badge" args={{ badge: badgeSnippet }}>
+    {#snippet children(args)}
+        <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
+            <ExpandableWrapper
+                {...args}
+                bind:expanded={args.expanded}
+            />
+        </div>
+    {/snippet}
+</Story>