Preset

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.

import { withGlobals } from '../withGlobals';

export const decorators = [withGlobals];

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:

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,
};

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.