addons/presets

25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Composing addons in presets without control

If you're working on a preset that loads third-party addons that you don't have control over and you need access to certain features (e.g., decorators) or provide additional configurations, you need to update your preset to allow loading and configuring the other addons.

Composing addons in presets with control

If you have control over the addons you want to customize, you can update your preset and implement a custom function to load any additional presets and provide the necessary configuration.

Preset addon configuration

Storybook preset addons are grouped collections of babel, webpack, and addons configurations to integrate Storybook with other technologies. The official preset-create-react-app is an example of a preset addon.

Presets offload configuration from users

Presets are global configuration options accessible from NodeJS. They are ideal for pre-configuring Webpack loaders, Babel plugins, and other library or framework-specific configurations. Presets offload the burden of configuration from the user to the addon.

Presets can automatically wrap stories without manual user configuration

Many libraries require that the app be wrapped by a Provider which provides data to components down the tree. Presets can describe behavior like adding wrappers automatically. If a user installs an addon that has Presets, the addon can instruct Storybook to wrap all stories in Provider. This allows users to start using a library with Storybook with a single line of config. The mechanism for wrapping each story is referred to as a Storybook decorator.

Preset addons integrate Storybook with other technologies

Preset addons help integrate Storybook with other technologies and libraries. An example is preset-create-react-app.

What are Storybook presets

Storybook presets are pre-configured settings or configurations that enable developers to quickly set up and customize their environment with a specific set of features, functionalities, or integrations.

Two types of presets: local and root-level

Preset addons are typically separated into two files with specific roles. Local presets encapsulate and organize configurations specific to the addon, including builder support, Babel, or third-party integrations. Root-level presets are user-facing and responsible for registering the addon without additional configuration from the user by bundling Storybook-related features via the previewAnnotations API and UI related features via the managerEntries API.

babelDefault API for Babel configuration

The babelDefault API allows you to customize Storybook's Babel configuration and add support for additional features. It will apply the provided configuration ahead of any other user presets, which can be further customized by the end user via the babel configuration option. The Babel configuration is only applied to frameworks that use Babel internally. If you enable it for a framework that uses a different compiler like SWC or esbuild, it will be ignored.

viteFinal API for Vite configuration

The viteFinal API can be used to modify the default Vite configuration and enable additional features in a preset addon.

webpackFinal API for Webpack configuration

The webpackFinal API allows you to customize the Webpack configuration in Storybook to add support for additional file types, apply specific loaders, configure plugins, or make any other necessary modifications. Once invoked, it will extend the default Webpack configuration with the provided configuration.

managerEntries API for loading third-party addons

The managerEntries API allows you to load third-party addons in a preset that you may not have control over but require access to specific features or additional configuration.

previewAnnotations API for story rendering settings

The previewAnnotations API allows you to provide additional settings to render stories for a preset, such as decorators or parameters. You can create a preview file that includes the decorator and make it available to the preset.

Private presets for advanced configuration

Private presets contain configuration options meant for development purposes and not for end-users. The .storybook/main.js|ts file is an example of a private preset that empowers you to modify the behavior and functionality of Storybook.

addons API for simplified addon registration

The addons API provides a simpler way to add addons to Storybook for addon consumers. It accepts an array of addon names and will automatically load them. The array of values supports references to additional presets and addons that should be included in the manager. Storybook will automatically detect whether the provided value is a preset or an addon and load it accordingly.

Entries API for registering preview entry points

Entries are the place to register entry points for the preview. This feature can be utilized to create a configure-storybook preset that automatically loads all *.stories.js files into Storybook, eliminating the need for users to copy-paste the same configuration repeatedly.

previewHead and previewBody APIs for HTML configuration

The previewHead and previewBody APIs allow you to configure the head and body HTML elements of the preview. Both accept a string and return a modified version, injecting the provided content into the HTML element. They work similarly to using the preview-head.html and preview-body.html files.

managerHead API for customizing manager UI

The managerHead API allows you to customize the manager (where Storybook's search, navigation, toolbars, and addons render), similar to how you would do it with the manager-head.html file.

previewMainTemplate API for custom template rendering

The previewMainTemplate API allows you to customize the template used by Storybook to render the UI by providing a reference to a custom template created as an ejs file.

managerWebpack API is deprecated and no longer works

Storybook relies on esbuild instead of Webpack to build the UI, so presets that depend on the managerWebpack API to configure the manager or load additional files other than CSS or images will no longer work. It is recommended to remove managerWebpack from your preset and adjust your configuration to convert any additional files to JavaScript.

Supported builders in Storybook

By default, Storybook provides support for the leading industry builders, including Webpack and Vite.

Customizing preview head and body with presets

You can modify the preview head or body HTML programmatically using a preset defined in the main.js file. Refer to the presets documentation for UI configuration details.

Addons that inject webpack configuration are often called presets

Addons that affect the build setup of Storybook by injecting their own webpack configuration to allow the use of other tools in Storybook are often referred to as presets.

Create React App preset support

Support for Create React App is handled by @storybook/preset-create-react-app. This preset enables support for all CRA features, including Sass/SCSS and TypeScript.

Presets bundle common configurations for technologies

Presets in Storybook bundle common configurations for various technologies into Storybook. Presets exist for Create React App and Ant Design, among others.

Give your agent this brain