feat: storybook cases and mocks

src/shared/lib/storybook/Providers.svelte

@@ -0,0 +1,64 @@
+<!--
+    Component: Providers
+    Storybook wrapper that provides required contexts for components.
+
+    Provides:
+    - responsive: ResponsiveManager context for breakpoint tracking
+    - tooltip: Tooltip.Provider context for shadcn Tooltip components
+    - Additional Radix UI providers can be added here as needed
+-->
+<script lang="ts">
+import { createResponsiveManager } from '$shared/lib';
+import type { ResponsiveManager } from '$shared/lib';
+import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
+import { setContext } from 'svelte';
+import type { Snippet } from 'svelte';
+
+interface Props {
+    children: Snippet;
+    /**
+     * Initial viewport width for the responsive context (default: 1280)
+     */
+    initialWidth?: number;
+    /**
+     * Initial viewport height for the responsive context (default: 720)
+     */
+    initialHeight?: number;
+    /**
+     * Tooltip provider options
+     */
+    tooltipDelayDuration?: number;
+    /**
+     * Tooltip skip delay duration
+     */
+    tooltipSkipDelayDuration?: number;
+}
+
+let {
+    children,
+    initialWidth = 1280,
+    initialHeight = 720,
+    tooltipDelayDuration = 200,
+    tooltipSkipDelayDuration = 300,
+}: Props = $props();
+
+// Create a responsive manager with default breakpoints
+const responsiveManager = createResponsiveManager();
+
+// Initialize the responsive manager to set up resize listeners
+$effect(() => {
+    return responsiveManager.init();
+});
+
+// Provide the responsive context
+setContext<ResponsiveManager>('responsive', responsiveManager);
+</script>
+
+<div class="storybook-providers" style:width="100%" style:height="100%">
+    <TooltipProvider
+        delayDuration={tooltipDelayDuration}
+        skipDelayDuration={tooltipSkipDelayDuration}
+    >
+        {@render children()}
+    </TooltipProvider>
+</div>