Your Component With Decorator With Context

<script module>
  import { setContext } from 'svelte';

  import { defineMeta } from '@storybook/addon-svelte-csf';

  import YourComponent from './YourComponent.svelte';
  import MarginDecorator from './MarginDecorator.svelte';

  const { Story } = defineMeta({
    component: YourComponent,
    decorators: [
      (story, { globals }) => {
        const marginSize = globals.marginSize === 'small' ? 'small' : 'medium';
        setContext('marginSize', marginSize);
        return { Component: MarginDecorator };
      },
    ],
  });
</script>

import { setContext } from 'svelte';

import YourComponent from './YourComponent.svelte';
import MarginDecorator from './MarginDecorator.svelte';

export default {
  component: YourComponent,
  decorators: [
    (story, { globals }) => {
      const marginSize = globals.marginSize === 'small' ? 'small' : 'medium';
      setContext('marginSize', marginSize);
      return { Component: MarginDecorator };
    },
  ],
};

<script>
  import { getContext } from 'svelte';

  let { children } = $props();

  const size = getContext('marginSize') || 'medium';
  const margin = size === 'small' ? '1rem' : '3rem';
</script>

<div style="margin: {margin};">
  {@render children?.()}
</div>

<script module lang="ts">
  import { setContext } from 'svelte';

  import { defineMeta } from '@storybook/addon-svelte-csf';

  import YourComponent from './YourComponent.svelte';
  import MarginDecorator from './MarginDecorator.svelte';

  const { Story } = defineMeta({
    component: YourComponent,
    decorators: [
      (story, { globals }) => {
        const marginSize = globals.marginSize === 'small' ? 'small' : 'medium';
        setContext('marginSize', marginSize);
        return { Component: MarginDecorator };
      },
    ],
  });
</script>

import { setContext } from 'svelte';
// Replace your-framework with svelte-vite or sveltekit
import type { Meta } from '@storybook/your-framework';

import YourComponent from './YourComponent.svelte';
import MarginDecorator from './MarginDecorator.svelte';

const meta = {
  component: YourComponent,
  decorators: [
    (story, { globals }) => {
      const marginSize = globals.marginSize === 'small' ? 'small' : 'medium';
      setContext('marginSize', marginSize);
      return { Component: MarginDecorator };
    },
  ],
} satisfies Meta<typeof YourComponent>;

export default meta;

<script lang="ts">
  import { getContext, type Snippet } from 'svelte';

  interface Props {
    children?: Snippet;
  }

  let { children }: Props = $props();

  const size = getContext<'small' | 'medium'>('marginSize') ?? 'medium';
  const margin = size === 'small' ? '1rem' : '3rem';
</script>

<div style="margin: {margin};">
  {@render children?.()}
</div>