addons/development

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

Local addon dependency in package.json

When developing an addon as a package, you cannot use `npm link` to add it to your project. Instead, list your addon as a local dependency in package.json using the `file://` protocol, for example: `"@storybook/addon-controls": "file:///home/username/myrepo"`. Run either `yarn` or `npm install` to install the addon.

HMR for standalone Storybook addons

For standalone addons, add a script to `package.json` with `"start": "npm run build -- --watch"` to enable hot module replacement (HMR) while developing.

HMR for local Storybook addons

If you are developing a local Storybook addon built on top of an existing Storybook installation, hot module replacement (HMR) is available out of the box.

Addon Kit TypeScript default and eject-ts command

The Addon Kit uses TypeScript by default. To convert the project to JavaScript instead, you can run the `eject-ts` command.

Addon Kit template for creating addons

The Addon Kit is a ready-to-use template repository featuring all the required building blocks, dependencies, and configurations to help you get started building an addon. To use it, visit the Addon Kit repository on GitHub and click the 'Use this template' button to create a new repository based on the Addon Kit's code.

Addon build system uses tsup and esbuild

Addons built in the Storybook ecosystem rely on tsup, a fast, zero-config bundler powered by esbuild, to transpile addon code into modern JavaScript that can run in the browser. The Addon Kit comes with a pre-configured tsup configuration file that can be customized.

Addon bundling targets different runtimes

Addons can interact with Storybook in various ways requiring different bundle outputs: presets are executed in a Node environment, while the manager and preview environments provide certain packages in the global scope. The tsup configuration handles these complexities by default, targeting different runtimes and environments appropriately.

Default source files for UI-based addons

By default, code for UI-based addons is located in one of the following files depending on the type: src/Tool.tsx for toolbar addons, src/Panel.tsx for panel addons, or src/Tab.tsx for tab addons.

useGlobals and useStorybookApi hooks for addon development

The useGlobals and useStorybookApi hooks from the manager-api package are used to access Storybook's APIs, allowing addon code to interact with Storybook functionality such as enabling or disabling the addon and accessing the Storybook API.

Button component and icons for addon UI

The Button component from storybook/internal/components can be used to render buttons in the toolbar. The @storybook/icons package provides a large set of appropriately sized and styled icons to choose from.

API setAddonShortcut method for keyboard shortcuts

The api.setAddonShortcut method registers a keyboard shortcut for an addon. It accepts an addon ID and an object with properties including label, defaultShortcut (array of keys), actionName, showInMenu (boolean), and action (callback function).

Toolbar addon match property for conditional rendering

The match property in toolbar addon configuration allows you to control where the addon is visible. It accepts a function that can check tabId and viewMode: viewMode can be 'story' or 'docs', and tabId identifies custom tabs. Examples: ({ viewMode }) => viewMode === 'story' shows the addon only in story canvas view, and ({ tabId }) => tabId === 'my-addon/tab' shows it only in a specific tab.

ESLint plugin installation steps

Install ESLint first. Then install eslint-plugin-storybook. Add plugin:storybook/recommended to the extends section of .eslintrc configuration file, omitting the eslint-plugin- prefix.

.eslintignore configuration for Storybook

Add !.storybook to .eslintignore file to ensure the plugin lints configuration files inside the .storybook directory, catching errors like mistyped addon names in main.js|ts files.

ESLint flat config for Storybook plugin

For ESLint flat config style, use eslint.config.js with: import { defineConfig, globalIgnores } from 'eslint/config'; export default defineConfig([ globalIgnores(['!.storybook'], 'Include Storybook Directory'), // ... ]);

ESLint version compatibility with Storybook plugin

ESLint ^9.0.0 requires Storybook plugin ^9.0.0 or ^0.10.0. ESLint ^8.57.0 requires Storybook plugin ^9.0.0 or ^0.10.0. ESLint ^7.0.0 requires Storybook plugin ~0.9.0.

Storybook ESLint plugin file pattern matching

The plugin is automatically applied only to files following *.stories.* (recommended) or *.story.* pattern. No configuration is required for this automatic behavior.

Override ESLint rules for Storybook stories

Use an overrides section in .eslintrc to apply rule changes only to story files. The files pattern should match the stories property in .storybook/main.js|ts. Example: files: ["**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)"] with rules like storybook/csf-component and storybook/default-exports.

Override rules in ESLint flat config

In eslint.config.js, add a configuration object with files matching the stories pattern and a rules object. Example: { files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'], rules: { 'storybook/csf-component': 'error', 'storybook/default-exports': 'off' } }

ESLint flat config with tseslint

When using tseslint utility functions, register the plugin differently: use tseslint.config(somePlugin, storybook.configs['flat/recommended']). Note that storybook config should not be destructured.

Storybook ESLint plugin MDX support

The Storybook ESLint plugin does not support MDX files.

Storybook ESLint plugin configurations

Available configurations are: csf, csf-strict, addon-interactions, and recommended. Flat config equivalents are: flat/csf, flat/csf-strict, flat/addon-interactions, flat/recommended.

Storybook ESLint rules reference

Supported rules: storybook/await-interactions (automatically fixable, in addon-interactions and recommended), storybook/context-in-play-function (in recommended and addon-interactions), storybook/csf-component (in csf and csf-strict), storybook/default-exports (automatically fixable, in csf, recommended, csf-strict), storybook/hierarchy-separator (automatically fixable, in csf, recommended, csf-strict), storybook/meta-inline-properties (not in any config), storybook/meta-satisfies-type (automatically fixable, not in any config), storybook/no-redundant-story-name (automatically fixable, in csf, recommended, csf-strict), storybook/no-renderer-packages (in recommended), storybook/no-stories-of (in csf-strict), storybook/no-title-property-in-meta (automatically fixable, in csf-strict), storybook/no-uninstalled-addons (in recommended), storybook/prefer-pascal-case (automatically fixable, in recommended), storybook/story-exports (in csf, recommended, csf-strict), storybook/use-storybook-expect (automatically fixable, in addon-interactions and recommended), storybook/use-storybook-testing-library (automatically fixable, in addon-interactions and recommended).

Give your agent this brain