@storybook/client-api

Add stories

This feature allows developers to add stories to Storybook. Each story represents a single visual state of a component. The 'storiesOf' function is used to define a new set of stories.

import { storiesOf } from '@storybook/client-api';

storiesOf('Button', module)
  .add('with text', () => '<button>Click me</button>')
  .add('with emoji', () => '<button>😀 😎 👍 💯</button>');

Add decorators

Decorators are a way to provide custom rendering and add functionality to stories. The 'addDecorator' function is used to globally add decorators to all stories.

import { addDecorator } from '@storybook/client-api';
import { withKnobs } from '@storybook/addon-knobs';

addDecorator(withKnobs);

Set global parameters

Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook's addons. The 'addParameters' function is used to set global parameters for all stories.

import { addParameters } from '@storybook/client-api';

addParameters({
  backgrounds: [
    { name: 'light', value: '#eeeeee', default: true },
    { name: 'dark', value: '#222222' }
  ]
});