Socket
Socket
Sign inDemoInstall

@storybook/addons

Package Overview
Dependencies
72
Maintainers
6
Versions
1491
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

@storybook/addons

Storybook addons store

    7.6.0
    GitHub
    npm

Version published
Maintainers
6
Weekly downloads
4,944,884
decreased by-13.81%

Weekly downloads

Package description

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

Changelog

Source

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>

Readme

Source

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.

Keywords

FAQs

Last updated on 28 Nov 2023

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc