ContextQMD
Back to Storybook

Decorator Parameterized In Preview

docs/_snippets/decorator-parameterized-in-preview.md

10.3.616.3 KB
Original Source
ts
import { type Preview, componentWrapperDecorator } from '@storybook/angular';

const preview: Preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    componentWrapperDecorator((story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          //  Your page layout is probably a little more complex than this
          return `<div class="page-layout">${story}</div>`;
        case 'page-mobile':
          return `<div class="page-mobile-layout">${story}</div>`;
        default:
          // In the default case, don't apply a layout
          return story;
      }
    }),
  ],
};

export default preview;
js
import React from 'react';

export default {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (Story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          return (
            // Your page layout is probably a little more complex than this
            <div className="page-layout">
              <Story />
            </div>
          );
        case 'page-mobile':
          return (
            <div className="page-mobile-layout">
              <Story />
            </div>
          );
        default:
          // In the default case, don't apply a layout
          return <Story />;
      }
    },
  ],
};
tsx
import React from 'react';

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import type { Preview } from '@storybook/your-framework';

const preview: Preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (Story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          return (
            // Your page layout is probably a little more complex than this
            <div className="page-layout">
              <Story />
            </div>
          );
        case 'page-mobile':
          return (
            <div className="page-mobile-layout">
              <Story />
            </div>
          );
        default:
          // In the default case, don't apply a layout
          return <Story />;
      }
    },
  ],
};

export default preview;
jsx
export default {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (Story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          return (
            // Your page layout is probably a little more complex than this
            <div className="page-layout">
              <Story />
            </div>
          );
        case 'page-mobile':
          return (
            <div className="page-mobile-layout">
              <Story />
            </div>
          );
        default:
          // In the default case, don't apply a layout
          return <Story />;
      }
    },
  ],
};
tsx
import type { Preview } from 'storybook-solidjs-vite';

const preview: Preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (Story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          return (
            // Your page layout is probably a little more complex than this
            <div className="page-layout">
              <Story />
            </div>
          );
        case 'page-mobile':
          return (
            <div className="page-mobile-layout">
              <Story />
            </div>
          );
        default:
          // In the default case, don't apply a layout
          return <Story />;
      }
    },
  ],
};

export default preview;
js
export default {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (_, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this
          return { template: '<div class="page-layout"><story/></div>' };
        case 'page-mobile':
          return { template: '<div class="page-mobile-layout"><story/></div>' };
        default:
          // In the default case, don't apply a layout
          return { template: '<story/>' };
      }
    },
  ],
};
ts
import type { Preview } from '@storybook/vue3-vite';

const preview: Preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (_, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this ;)
          return { template: '<div class="page-layout"><story/></div>' };
        case 'page-mobile':
          return { template: '<div class="page-mobile-layout"><story/></div>' };
        default:
          // In the default case, don't apply a layout
          return { template: '<story/>' };
      }
    },
  ],
};

export default preview;
ts
// Replace your-framework with svelte-vite or sveltekit
import type { Preview } from '@storybook/your-framework';

import PageLayout from './PageLayout.svelte';

const preview: Preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      return {
        Component: PageLayout,
        props: {
          layout: pageLayout || 'default',
          children: story,
        },
      };
    },
  ],
};

export default preview;
svelte
<script lang="ts">
  interface Props {
    layout?: 'page' | 'page-mobile' | 'default';
    children?: import('svelte').Snippet;
  }

  let { layout = 'default', children }: Props = $props();
</script>

<!-- Your page layout is probably a little more complex than this -->
<div class={layout}>
  {@render children?.()}
</div>
js
import PageLayout from './PageLayout.svelte';

const preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      return {
        Component: PageLayout,
        props: {
          layout: pageLayout || 'default',
          children: story,
        },
      };
    },
  ],
};

export default preview;
svelte
<script>
  let { layout = 'default', children } = $props();
</script>

<!-- Your page layout is probably a little more complex than this -->
<div class={layout}>
  {@render children?.()}
</div>
ts
import type { Preview } from '@storybook/web-components-vite';

import { html } from 'lit';

const preview: Preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this
          return html`<div class="page-layout">${story()}</div>`;
        case 'page-mobile':
          return html`<div class="page-mobile-layout">${story()}</div>`;
        default:
          // In the default case, don't apply a layout
          return story();
      }
    },
  ],
};

export default preview;
js
import { html } from 'lit';

const preview = {
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this
          return html`<div class="page-layout">${story()}</div>`;
        case 'page-mobile':
          return html`<div class="page-mobile-layout">${story()}</div>`;
        default:
          // In the default case, don't apply a layout
          return story();
      }
    },
  ],
};

export default preview;
tsx
import React from 'react';

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { definePreview } from '@storybook/your-framework';

export default definePreview({
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (Story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          return (
            // Your page layout is probably a little more complex than this
            <div className="page-layout">
              <Story />
            </div>
          );
        case 'page-mobile':
          return (
            <div className="page-mobile-layout">
              <Story />
            </div>
          );
        default:
          // In the default case, don't apply a layout
          return <Story />;
      }
    },
  ],
});
<!-- JS snippets still needed while providing both CSF 3 & Next -->
js
import React from 'react';

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { definePreview } from '@storybook/your-framework';

export default definePreview({
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (Story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          return (
            // Your page layout is probably a little more complex than this
            <div className="page-layout">
              <Story />
            </div>
          );
        case 'page-mobile':
          return (
            <div className="page-mobile-layout">
              <Story />
            </div>
          );
        default:
          // In the default case, don't apply a layout
          return <Story />;
      }
    },
  ],
});
ts
import { definePreview } from '@storybook/vue3-vite';

export default definePreview({
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (_, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this
          return { template: '<div class="page-layout"><story/></div>' };
        case 'page-mobile':
          return { template: '<div class="page-mobile-layout"><story/></div>' };
        default:
          // In the default case, don't apply a layout
          return { template: '<story/>' };
      }
    },
  ],
});
<!-- JS snippets still needed while providing both CSF 3 & Next -->
js
import { definePreview } from '@storybook/vue3-vite';

export default definePreview({
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (_, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this
          return { template: '<div class="page-layout"><story/></div>' };
        case 'page-mobile':
          return { template: '<div class="page-mobile-layout"><story/></div>' };
        default:
          // In the default case, don't apply a layout
          return { template: '<story/>' };
      }
    },
  ],
});
ts
import { definePreview, componentWrapperDecorator } from '@storybook/angular';

export default definePreview({
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    componentWrapperDecorator((story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          //  Your page layout is probably a little more complex than this
          return `<div class="page-layout">${story}</div>`;
        case 'page-mobile':
          return `<div class="page-mobile-layout">${story}</div>`;
        default:
          // In the default case, don't apply a layout
          return story;
      }
    }),
  ],
});
ts
import { html } from 'lit';

import { definePreview } from '@storybook/web-components-vite';

export default definePreview({
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this
          return html`<div class="page-layout">${story()}</div>`;
        case 'page-mobile':
          return html`<div class="page-mobile-layout">${story()}</div>`;
        default:
          // In the default case, don't apply a layout
          return story();
      }
    },
  ],
});
<!-- JS snippets still needed while providing both CSF 3 & Next -->
js
import { html } from 'lit';

import { definePreview } from '@storybook/web-components-vite';

export default definePreview({
  decorators: [
    // ๐Ÿ‘‡ Defining the decorator in the preview file applies it to all stories
    (story, { parameters }) => {
      // ๐Ÿ‘‡ Make it configurable by reading from parameters
      const { pageLayout } = parameters;
      switch (pageLayout) {
        case 'page':
          // Your page layout is probably a little more complex than this
          return html`<div class="page-layout">${story()}</div>`;
        case 'page-mobile':
          return html`<div class="page-mobile-layout">${story()}</div>`;
        default:
          // In the default case, don't apply a layout
          return story();
      }
    },
  ],
});