chore(shared/ui): enhance stories with cases, controls and documentation

src/shared/ui/SearchBar/SearchBar.stories.svelte

@@ -4,23 +4,79 @@ import SearchBar from './SearchBar.svelte';
 
 const { Story } = defineMeta({
     title: 'Shared/SearchBar',
+    component: SearchBar,
     tags: ['autodocs'],
     parameters: {
         docs: {
+            description: {
+                component:
+                    'Search input with popover dropdown for results/suggestions. Features keyboard navigation (ArrowDown/Up/Enter) and auto-focus prevention on popover open. The input field serves as the popover trigger.',
+            },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
     },
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'Current search value (two-way bindable)',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the input',
+        },
+        label: {
+            control: 'text',
+            description: 'Optional label displayed above the input',
+        },
+    },
 });
 </script>
 
 <script lang="ts">
-let value = $state('');
+let defaultSearchValue = $state('');
+let withLabelValue = $state('');
+let noChildrenValue = $state('');
 </script>
 
-<Story name="Default">
-    <SearchBar bind:value={value} placeholder="Type here...">
+<Story
+    name="Default"
+    args={{
+        value: defaultSearchValue,
+        placeholder: 'Type here...',
+    }}
+>
+    <SearchBar bind:value={defaultSearchValue} placeholder="Type here...">
         Here will be the search result
         <br />
         Popover closes only when the user clicks outside the search bar or presses the Escape key.
     </SearchBar>
 </Story>
+
+<Story
+    name="With Label"
+    args={{
+        value: withLabelValue,
+        placeholder: 'Search products...',
+        label: 'Search',
+    }}
+>
+    <SearchBar bind:value={withLabelValue} placeholder="Search products..." label="Search">
+        <div class="p-4">
+            <p class="text-sm text-muted-foreground">No results found</p>
+        </div>
+    </SearchBar>
+</Story>
+
+<Story
+    name="Minimal Content"
+    args={{
+        value: noChildrenValue,
+        placeholder: 'Quick search...',
+    }}
+>
+    <SearchBar bind:value={noChildrenValue} placeholder="Quick search...">
+        <div class="p-4 text-center text-sm text-muted-foreground">
+            Start typing to see results
+        </div>
+    </SearchBar>
+</Story>