feat: storybook cases and mocks

src/widgets/SampleList/ui/SampleList/SampleList.stories.svelte

@@ -0,0 +1,89 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import SampleList from './SampleList.svelte';
+
+const { Story } = defineMeta({
+    title: 'Widgets/SampleList',
+    component: SampleList,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Virtualized font list with pagination. Renders a list of fonts with auto-loading when scrolling near the bottom. Includes a typography menu for font setup that appears when scrolling past the middle of the viewport.',
+            },
+            story: { inline: false },
+        },
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        // This component uses internal stores, so no direct props to document
+    },
+});
+</script>
+
+<Story name="Default">
+    <div class="min-h-screen bg-background">
+        <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+            <div class="mb-8 text-center">
+                <h1 class="text-4xl font-bold mb-2">Font Samples</h1>
+                <p class="text-text-muted">Scroll to see more fonts and load additional pages</p>
+            </div>
+            <SampleList />
+        </div>
+    </div>
+</Story>
+
+<Story name="Full Page">
+    <div class="min-h-screen bg-background">
+        <SampleList />
+    </div>
+</Story>
+
+<Story name="With Typography Controls">
+    <div class="min-h-screen bg-background">
+        <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+            <div class="mb-8 text-center">
+                <h1 class="text-4xl font-bold mb-2">Typography Controls</h1>
+                <p class="text-text-muted">Scroll down to see the typography menu appear</p>
+            </div>
+            <SampleList />
+        </div>
+    </div>
+</Story>
+
+<Story name="Custom Text">
+    <div class="min-h-screen bg-background">
+        <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+            <div class="mb-8 text-center">
+                <h1 class="text-4xl font-bold mb-2">Custom Sample Text</h1>
+                <p class="text-text-muted">Edit the text in any card to change all samples</p>
+            </div>
+            <SampleList />
+        </div>
+    </div>
+</Story>
+
+<Story name="Pagination Info">
+    <div class="min-h-screen bg-background">
+        <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+            <div class="mb-8 text-center">
+                <h1 class="text-4xl font-bold mb-2">Paginated List</h1>
+                <p class="text-text-muted">Fonts load automatically as you scroll</p>
+            </div>
+            <SampleList />
+        </div>
+    </div>
+</Story>
+
+<Story name="Responsive Layout">
+    <div class="min-h-screen bg-background">
+        <div class="max-w-6xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+            <div class="mb-8 text-center">
+                <h1 class="text-4xl font-bold mb-2">Responsive Sample List</h1>
+                <p class="text-text-muted">Resize browser to see responsive behavior</p>
+            </div>
+            <SampleList />
+        </div>
+    </div>
+</Story>