feat: storybook cases and mocks

src/shared/ui/ComboControlV2/ComboControlV2.stories.svelte

@@ -10,7 +10,8 @@ const { Story } = defineMeta({
     parameters: {
         docs: {
             description: {
-                component: 'ComboControl with input field and slider',
+                component:
+                    'ComboControl with input field and slider. Simplified version without increase/decrease buttons.',
             },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
@@ -26,18 +27,85 @@ const { Story } = defineMeta({
             control: 'text',
             description: 'Label for the ComboControl',
         },
+        control: {
+            control: 'object',
+            description: 'TypographyControl instance managing the value and bounds',
+        },
     },
 });
 </script>
 
 <script lang="ts">
-const control = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
+const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
+const verticalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
+const floatControl = createTypographyControl({ min: 0, max: 1, step: 0.01, value: 0.5 });
+const atMinControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 0 });
+const atMaxControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 100 });
+const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10, value: 500 });
 </script>
 
-<Story name="Horizontal" args={{ orientation: 'horizontal', control }}>
-    <ComboControlV2 control={control} orientation="horizontal" />
+<Story
+    name="Horizontal"
+    args={{
+        control: horizontalControl,
+        orientation: 'horizontal',
+        label: 'Size',
+    }}
+>
+    <ComboControlV2 control={horizontalControl} orientation="horizontal" label="Size" />
 </Story>
 
-<Story name="Vertical" args={{ orientation: 'vertical', control, class: 'h-48' }}>
-    <ComboControlV2 control={control} orientation="vertical" />
+<Story
+    name="Vertical"
+    args={{
+        control: verticalControl,
+        orientation: 'vertical',
+        label: 'Size',
+    }}
+>
+    <ComboControlV2 control={verticalControl} orientation="vertical" class="h-48" label="Size" />
+</Story>
+
+<Story
+    name="With Float Values"
+    args={{
+        control: floatControl,
+        orientation: 'vertical',
+        label: 'Opacity',
+    }}
+>
+    <ComboControlV2 control={floatControl} orientation="vertical" class="h-48" label="Opacity" />
+</Story>
+
+<Story
+    name="At Minimum"
+    args={{
+        control: atMinControl,
+        orientation: 'horizontal',
+        label: 'Size',
+    }}
+>
+    <ComboControlV2 control={atMinControl} orientation="horizontal" label="Size" />
+</Story>
+
+<Story
+    name="At Maximum"
+    args={{
+        control: atMaxControl,
+        orientation: 'horizontal',
+        label: 'Size',
+    }}
+>
+    <ComboControlV2 control={atMaxControl} orientation="horizontal" label="Size" />
+</Story>
+
+<Story
+    name="Large Range"
+    args={{
+        control: largeRangeControl,
+        orientation: 'horizontal',
+        label: 'Scale',
+    }}
+>
+    <ComboControlV2 control={largeRangeControl} orientation="horizontal" label="Scale" />
 </Story>