Create an Addon
  • Introduction
  • Setup
  • Register addon
  • Track state
  • Decorators
  • Preset
  • Add to catalog
  • Conclusion
Framework:
React

Preset

Enable Outline for every story

Now that the decorator is out of the way, let's use a preset to wrap every story with it.

Presets allow you to combine a bunch of different Storybook configurations and apply them in one go. Some addons are purely responsible for configuring Storybook and have no UI. For example, preset-create-react-app and preset-nuxt. These are called Preset addons.

Our preset is split into two parts:

  1. manager.js for registering the addon
  2. preview.js for specifying global decorators

Update the preview to just use the withGlobals decorator, which will automatically wrap all stories.

src/preset/preview.js
import { withGlobals } from '../withGlobals';

export const decorators = [withGlobals];
💡 The withRoundTrip decorator from the Addon Kit is an example of two-way communication between the story and an addon. However, we don't require that for our addon and can delete it.

toggling the tool toggles the outlines

Root-level preset

Before we can add our addon to the catalog, there's one item worth mentioning. Each Storybook addon must include a root-level preset to register the addon without any additional configuration from the user. Luckily for us, this was set up for us when we cloned the repository in the setup section. If you open your preset.js in the root directory, you'll see the following inside:

preview.js
function config(entry = []) {
  return [...entry, require.resolve("./dist/esm/preset/preview")];
}

function managerEntries(entry = []) {
  return [...entry, require.resolve("./dist/esm/preset/manager")];
}

module.exports = {
  managerEntries,
  config,
};
💡 Read the official Storybook documentation to learn more about presets.

Success! You now have a fully functional addon in your local Storybook. In the final chapter, learn how to list your addon in the catalog. That way you can share with your team and the Storybook community.

Keep your code in sync with this chapter. View bdb7aaa on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Add to catalog
Share your Storybook addon with the community
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookDocsTutorialsReleasesAddonsBlogGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify