feat: add missing storybook files and type template arguments properly

2026-04-17 18:01:24 +03:00
parent 5eb9584797
commit bb65f1c8d6
31 changed files with 1124 additions and 90 deletions
@@ -0,0 +1,91 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import PerspectivePlan from './PerspectivePlan.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/PerspectivePlan',
+    component: PerspectivePlan,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Wrapper applying perspective 3D transform based on a PerspectiveManager spring. Used for front/back stacking in comparison views.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        region: {
+            control: 'select',
+            options: ['full', 'left', 'right'],
+        },
+        regionWidth: {
+            control: 'number',
+        },
+    },
+});
+</script>
+
+<script>
+import { createPerspectiveManager } from '$shared/lib';
+
+const frontManager = createPerspectiveManager({ depthStep: 100, scaleStep: 0.5, blurStep: 4 });
+
+const backManager = createPerspectiveManager({ depthStep: 100, scaleStep: 0.5, blurStep: 4 });
+backManager.setBack();
+
+const leftManager = createPerspectiveManager({ depthStep: 100, scaleStep: 0.5, blurStep: 4 });
+</script>
+
+<Story name="Front State">
+    {#snippet template()}
+        <div style="width: 300px; height: 200px; perspective: 800px; position: relative;">
+            <PerspectivePlan manager={frontManager}>
+                {#snippet children({ className })}
+                    <div
+                        class={className}
+                        style="width: 300px; height: 200px; background: #1e1e2e; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #cdd6f4; font-family: sans-serif;"
+                    >
+                        Front — fully visible
+                    </div>
+                {/snippet}
+            </PerspectivePlan>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Back State">
+    {#snippet template()}
+        <div style="width: 300px; height: 200px; perspective: 800px; position: relative;">
+            <PerspectivePlan manager={backManager}>
+                {#snippet children({ className })}
+                    <div
+                        class={className}
+                        style="width: 300px; height: 200px; background: #1e1e2e; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #cdd6f4; font-family: sans-serif;"
+                    >
+                        Back — blurred and scaled down
+                    </div>
+                {/snippet}
+            </PerspectivePlan>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Left Region">
+    {#snippet template()}
+        <div style="width: 300px; height: 200px; perspective: 800px; position: relative;">
+            <PerspectivePlan manager={leftManager} region="left" regionWidth={50}>
+                {#snippet children({ className })}
+                    <div
+                        class={className}
+                        style="width: 100%; height: 100%; background: #313244; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #cdd6f4; font-family: sans-serif;"
+                    >
+                        Left half
+                    </div>
+                {/snippet}
+            </PerspectivePlan>
+        </div>
+    {/snippet}
+</Story>