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>