ContextQMD
Back to Storybook

Storybook Addons Preset Preview

docs/_snippets/storybook-addons-preset-preview.md

10.3.61.8 KB
Original Source
js
import { PARAM_KEY } from './constants';

import { CustomDecorator } from './decorators';

const preview = {
  decorators: [CustomDecorator],
  globals: {
    [PARAM_KEY]: false,
  },
};

export default preview;
ts
import type { Renderer, ProjectAnnotations } from 'storybook/internal/types';
import { PARAM_KEY } from './constants';
import { CustomDecorator } from './decorators';

const preview: ProjectAnnotations<Renderer> = {
  decorators: [CustomDecorator],
  globals: {
    [PARAM_KEY]: false,
  },
};

export default preview;
ts
import type { ProjectAnnotations, Renderer } from 'storybook/internal/types';

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

import { PARAM_KEY } from './constants';
import { CustomDecorator } from './decorators';

export default definePreview({
  decorators: [CustomDecorator],
  globals: {
    [PARAM_KEY]: false,
  },
});
<!-- JS snippets still needed while providing both CSF 3 & Next -->
js
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { definePreview } from '@storybook/your-framework';

import { PARAM_KEY } from './constants';
import { CustomDecorator } from './decorators';

export default definePreview({
  decorators: [CustomDecorator],
  globals: {
    [PARAM_KEY]: false,
  },
});