What is @storybook/addons?
The @storybook/addons package is a core module for Storybook that provides the infrastructure to build and use addons, which are essentially plugins that can be used to extend Storybook's UI and behavior. Addons can be used to add new features, integrate with other tools, customize the panel within Storybook, and enhance the development workflow.
What are @storybook/addons's main functionalities?
Addon Registration
This feature allows developers to register new addons with Storybook. The code sample demonstrates how to import the addons API and use it to register a custom addon.
import { addons } from '@storybook/addons';
import MyAddon from './my-addon';
addons.register('my-addon', MyAddon);
Addon Panel Creation
This feature allows developers to create new panels in the Storybook UI. The code sample shows how to add a new panel using the addons API.
import { addons, types } from '@storybook/addons';
import MyPanel from './my-panel';
addons.add('my-panel', {
type: types.PANEL,
title: 'My Panel',
render: ({ active, key }) => (
<MyPanel active={active} key={key} />
)
});
Addon Tool Registration
This feature enables the addition of tools to the Storybook toolbar. The code sample illustrates how to register a new tool that will be displayed when the view mode is set to 'story'.
import { addons, types } from '@storybook/addons';
import MyTool from './my-tool';
addons.add('my-tool', {
type: types.TOOL,
title: 'My Tool',
match: ({ viewMode }) => viewMode === 'story',
render: MyTool
});
Other packages similar to @storybook/addons
@storybook/api
The @storybook/api package provides a set of functions and hooks that can be used to interact with Storybook's internal state and events. It is similar to @storybook/addons in that it allows for extension and customization of Storybook, but it focuses more on the state and event management aspects.
@storybook/components
The @storybook/components package offers a library of pre-built components that can be used within Storybook addons. While @storybook/addons provides the framework for creating and managing addons, @storybook/components provides the building blocks for the UI of those addons.
@storybook/theming
The @storybook/theming package allows for customization of Storybook's appearance through theming. It is similar to @storybook/addons in that it enhances the Storybook experience, but it specifically targets the visual style rather than functionality or UI extension.
The contents of this package have moved to @storybook/preview-api
and @storybook/manager-api
. Please update your import depending on where are using this API.
This package will no longer be released as part of the 8.0 release of storybook.
7.6.0
Storybook 7.6 is here with increased performance and much more!
- 🔥 Improved SWC support
- 🧪 New test utilities and fast build mode
- 🔼 NextJS SWC + avif support & fixes
- 🤡 SvelteKit page and navigation mocking
- ⚛️ React-docgen upgrade
- 🎨 Controls a11y, background theming, and viewports
- 🩺 CLI: The doctor is in!
- 🚫 Addons: Remove React as a peer dependency
- 🪦 Storyshots and Vue2 deprecated
<details>
<summary>
List of all updates
</summary>
- Actions: Attach spies on actions across stories when defined in meta - #24451, thanks @kasperpeulen!
- Actions: Fix
@storybook/core-events/preview-errors
dependency missing for Yarn PnP - #24973, thanks @JReinhold!
- Actions: Fix missing crypto module crashing React Native - #24546, thanks @dannyhw!
- Actions: Warn on implicit actions - #24856, thanks @kasperpeulen!
- Addon A11y: Avoid CSP issue - #24477, thanks @Marklb!
- Addon: Move Visual Test addon to the code directory - #24771, thanks @cdedreuille!
- Addons, core: Make
react
and Storybook packages devDependencies
where possible - #24676, thanks @JReinhold!
- Addons, core: Make
react
and Storybook packages devDependencies
where possible - ATTEMPT 2 - #24834, thanks @JReinhold!
- Angular: Add source-map option to builder - #24466, thanks @valentinpalkovic!
- Angular: Handle nested module metadata - #24798, thanks @valentinpalkovic!
- Angular: Include object configured styles - #24768, thanks @valentinpalkovic!
- Babel: Update all @babel/* dependencies - #24610, thanks @valentinpalkovic!
- CLI: Add "doctor" command - #22236, thanks @yannbf!
- CLI: Add @storybook/addon-designs to non-core list - #24507, thanks @yannbf!
- CLI: Ensure errors with opening the browser are caught - #24668, thanks @xueyawei!
- CLI: Ignore
addon-onboarding
when checking versions - #24634, thanks @JReinhold!
- CLI: Use @storybook/test in template stories - #24393, thanks @yannbf!
- Controls: Improve accessibility of BooleanControl for screen readers - #24418, thanks @danielmarcano!
- Core-Server: Ignore all node_module folders for watchpack - #24553, thanks @valentinpalkovic!
- Core: Add deprecation notice for Vite + CommonJS - #23950, thanks @JReinhold!
- Core: Detect no matching export error in storybook start and build - #24877, thanks @yannbf!
- Core: Fix
useStoryPrepared
hook failing with undefined
data - #22631, thanks @SpookyJelly!
- Core: Fix pnp support when cache dir is outside working dir - #24572, thanks @valentinpalkovic!
- Core: Fix post message channel location.search access for React Native - #24545, thanks @dannyhw!
- Core: Gracefully handle error when parsing preview.js file - #24858, thanks @yannbf!
- Core: Make warnOnIncompatibleAddons fault-tolerant - #24880, thanks @taozhou-glean!
- Dependencies: Fix Yarn 4 failing to install due to jscodeshift dependency issue - #24914, thanks @samvv!
- Dependencies: Update @babel/traverse and @babel/core to fix vulnerability - #24670, thanks @valentinpalkovic!
- Dependencies: Update browserify-sign transitive dependency - #24674, thanks @valentinpalkovic!
- Dependencies: Update jscodeshift to v0.15.1 - #24882, thanks @epreston!
- Dependencies: Update nx dependencies to v17 - #24671, thanks @valentinpalkovic!
- Doc Blocks: Add support for
of
prop to Primary
block - #23849, thanks @Wilson2k!
- Doc Blocks: Remove
defaultProps
in Stories
block - #24506, thanks @WouterK12!
- Docs: Changes corresponding to docs design updates - #24925, thanks @kylegach!
- Maintenance: Split renderers preview entrypoints - #24623, thanks @ndelangen!
- Manager: Update
store.settings.lastTrackedStoryId
- #24115, thanks @rashidshamloo!
- ManagerAPI: Fix setting status without index, crashes storybook - #24866, thanks @ndelangen!
- ManagerBuilder: Fix
"type": "commonjs"
compatibility - #24534, thanks @ndelangen!
- Next.js: Add avif support - #24611, thanks @valentinpalkovic!
- Next.js: Add back image context CommonJS export - #24885, thanks @martinnabhan!
- Next.js: Add experimental SWC support - #24852, thanks @valentinpalkovic!
- Next.js: Fix Fast Refresh config for SWC mode - #24991, thanks @valentinpalkovic!
- Next.js: Fix forwarding ref for Image component - #24648, thanks @valentinpalkovic!
- Next.js: Fix import path in swc loader - #24922, thanks @valentinpalkovic!
- Next.js: Fix react-docgen usage with preset-env settings - #24993, thanks @valentinpalkovic!
- Next.js: Remove duplicate Fast Refresh plugin init - #24963, thanks @valentinpalkovic!
- React: Upgrade
react-docgen
to v7 - #24530, thanks @shilman!
- ReactNative: Fix missing assert dep in docs-tools - #24732, thanks @dannyhw!
- Svelte: Fix decorators always running twice - #24921, thanks @paoloricciuti!
- Svelte: Fix source with decorators always showing the
SlotDecorator
component - #24800, thanks @JReinhold!
- SvelteKit: Add experimental page and navigation mocking - #24795, thanks @paoloricciuti!
- SvelteKit: Default to log an action for
goto
, invalidate
and invalidateAll
- #24955, thanks @paoloricciuti!
- SWC: Add settings for react and preact - #24805, thanks @valentinpalkovic!
- Test Build: Add env-variable support to
--test
CLI-flag - #24862, thanks @ndelangen!
- Test Build: Add tests and rename to camelCase - #24911, thanks @ndelangen!
- Test Build: Disable composition when
--test
is true
- #24799, thanks @ndelangen!
- Test Build: Disable docs related stuff for test builds - #24691, thanks @ndelangen!
- Test Build: Disable telemetry for test builds - #24706, thanks @kasperpeulen!
- Test Build: Disable warnOnIncompatibleAddons - #24797, thanks @ndelangen!
- Test Build: Filter out addon-docs from essentials in the test build - #24994, thanks @kasperpeulen!
- Test Build: Fix disabledAddons filter - #24924, thanks @IanVS!
- Test Build: Fix indexer bug - #24890, thanks @ndelangen!
- Test Build: Globalize
@storybook/blocks
if build.test.emptyBlocks
is true
- #24650, thanks @ndelangen!
- Test Build: Implement builder options for test build - #24826, thanks @kasperpeulen!
- Test Build: Improve config loading & naming - #24837, thanks @ndelangen!
- Test Build: No sourcemaps for test builds - #24804, thanks @ndelangen!
- Test Build: Revert defaulting to SWC in test build, but keep using esbuild for minification - #24843, thanks @kasperpeulen!
- Test: Create @storybook/test package based on vitest - #24392, thanks @kasperpeulen!
- Test: Don't attach action to function mock if action was added already - #24966, thanks @tmeasday!
- Test: Model loaders as before each and restore mocks properly - #24948, thanks @kasperpeulen!
- Theming: Add theme variable to set the preview background color - #24575, thanks @JReinhold!
- Typescript: Add 'skipCompiler' option to TypeScript presets - #24847, thanks @valentinpalkovic!
- UI: Fix horizontal scroll bar in Canvas hidden by styling - #24408, thanks @yoshi2no!
- UI: improve A11Y remove redundant styling rules, update icon color - #24402, thanks @tolkadot!
- UI: Logo fixed value - #24726, thanks @black-arm!
- UI: Update zIndex on NotificationList to fix the notification not being clickable in certain cases - #24602, thanks @yoshi2no!
- Viewport: Add newer device viewports - #24777, thanks @Tomo5524!
- Vite: Prevent non-deterministic build output - #24833, thanks @henkerik!
- Webpack: Add export-order-loader and remove babel-plugin-named-exports-order - #24749, thanks @valentinpalkovic!
- Webpack: Add react-docgen loader and remove babel-plugin-react-docgen - #24762, thanks @valentinpalkovic!
- Webpack: Fix race condition for export-order loader - #24817, thanks @valentinpalkovic!
- Webpack: Hide critical dependency warning - #24784, thanks @valentinpalkovic!
- Webpack: Only load babel config when babel-loader is used - #25002, thanks @valentinpalkovic!
- Webpack: Resolve circular dependency and fix HMR - #24974, thanks @valentinpalkovic!
</details>