feat: storybook cases and mocks

src/widgets/FontSearch/ui/FontSearch/FontSearch.stories.svelte

@@ -0,0 +1,102 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import FontSearch from './FontSearch.svelte';
+
+const { Story } = defineMeta({
+    title: 'Widgets/FontSearch',
+    component: FontSearch,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Primary search interface with filter panel. Provides a search input and filtering for fonts by provider, category, and subset. Filters can be toggled open/closed with an animated transition.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        showFilters: {
+            control: 'boolean',
+            description: 'Controllable flag to show/hide filters (bindable)',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+let showFiltersDefault = $state(true);
+let showFiltersClosed = $state(false);
+let showFiltersOpen = $state(true);
+</script>
+
+<Story name="Default">
+    <div class="w-full max-w-2xl">
+        <FontSearch bind:showFilters={showFiltersDefault} />
+    </div>
+</Story>
+
+<Story name="Filters Open">
+    <div class="w-full max-w-2xl">
+        <FontSearch bind:showFilters={showFiltersOpen} />
+        <div class="mt-8 text-center">
+            <p class="text-text-muted text-sm">Filters panel is open and visible</p>
+        </div>
+    </div>
+</Story>
+
+<Story name="Filters Closed">
+    <div class="w-full max-w-2xl">
+        <FontSearch bind:showFilters={showFiltersClosed} />
+        <div class="mt-8 text-center">
+            <p class="text-text-muted text-sm">Filters panel is closed - click the slider icon to open</p>
+        </div>
+    </div>
+</Story>
+
+<Story name="Full Width">
+    <div class="w-full px-8">
+        <FontSearch />
+    </div>
+</Story>
+
+<Story name="In Context" tags={['!autodocs']}>
+    <div class="w-full max-w-3xl p-8 space-y-6">
+        <div class="text-center mb-8">
+            <h1 class="text-4xl font-bold mb-2">Font Browser</h1>
+            <p class="text-text-muted">Search and filter through our collection of fonts</p>
+        </div>
+
+        <div class="bg-background-20 rounded-2xl p-6">
+            <FontSearch />
+        </div>
+
+        <div class="mt-8 p-6 bg-background-40 rounded-xl">
+            <p class="text-text-muted text-center">Font results will appear here...</p>
+        </div>
+    </div>
+</Story>
+
+<Story name="With Filters Demo">
+    <div class="w-full max-w-2xl">
+        <div class="mb-4 p-4 bg-background-40 rounded-lg">
+            <p class="text-sm text-text-muted">
+                <strong class="text-foreground">Demo Note:</strong> Click the slider icon to toggle filters. Use the
+                filter categories to select options. Use the filter controls to reset or apply your selections.
+            </p>
+        </div>
+        <FontSearch />
+    </div>
+</Story>
+
+<Story name="Responsive Behavior">
+    <div class="w-full">
+        <div class="mb-4 text-center">
+            <p class="text-text-muted text-sm">Resize browser to see responsive layout</p>
+        </div>
+        <div class="px-4 sm:px-8 md:px-12">
+            <FontSearch />
+        </div>
+    </div>
+</Story>