65 lines
1.8 KiB
Svelte
65 lines
1.8 KiB
Svelte
<!--
|
|
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>
|