New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Create an Addon
React
Chapters
  • Introduction
  • Setup
  • Register addon
  • Track state
  • Decorators
  • Preset
  • Add to catalog
  • Conclusion

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.

Copy
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:

Copy
preset.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!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI