In Storybook 5.2 we introduced a simpler and more portable Component Story Format, and all future tools and infrastructure will be oriented towards CSF. Therefore, we recommend migrating your stories out of storiesOf API, and even provide .

That said, the storiesOf API is not deprecated. For the time being most existing Storybooks use the storiesOf API, and therefore we plan to support it for the foreseeable future.

A Storybook is a collection of stories. Each story represents a single visual state of a component. For an overview of storybook story concepts, see “Writing Stories”.

The string argument to storiesOf is the component title. If you pass a string like it can also be used to position your component’s story within .

Each .add call takes a story name, a story function that returns a renderable object (JSX in the case of React), and optionally some parameters, which are described below.

Decorators and can be specified globally, at the component level, or locally at the story level.

  1. addParameters({ foo: 1 });

Component-level decorators and parameters are supported as chained API calls:

Story-level parameters are provided as a third argument to .add:

  1. storiesOf('Button', module).add(
  3. { notes: someNotes }
  4. );

And finally, story-level decorators are provided via parameters:

  1. sb migrate storiesof-to-csf --glob src/**/*.stories.js

For more information, see the CLI’s Codemod README.