@storybook/addon-docs

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

List of all updates

• 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!

• security

  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!

• 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!

• 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!

Storybook 7.5 enhances your Storybook experience with several key updates:

• 💃🏼 Now supports Lit 3.0 and Vite 5

• 👻 storiesOf and storyStoreV6 officially deprecated

• 🔨 Fix Webpack5 build errors not being propagated

• 🀄 Support rename font import for Next.js

• ⬆️ Upgrade react-docgen to 6.0.x and improve argTypes

• ✨ Many Angular improvements such as introducing argsToTemplate , new schema debugging options, support for standalone directives, etc.

List of all updates

• Angular: Introduce argsToTemplate for property and event Bindings - #24434, thanks @valentinpalkovic!

• Angular: Add schema options (debugWebpack, webpackStatsJson, and more) - #24388, thanks @yannbf!

• Angular: Categorize legacy build options error - #24014, thanks @yannbf!

• Angular: Fix Angular 15 support and add zone.js v0.14.x support - #24367, thanks @valentinpalkovic!

• Angular: Allow loading standalone directives - #24448, thanks @osnoser1!

• CLI: Inform the user how to dedupe and strip color from info command - #24087, thanks @kasperpeulen!

• CLI: Add more information to storybook info command - #24003, thanks @JReinhold!

• CLI: Change /Date$/ to /Dates$/i - #24195, thanks @arup1221!

• CLI: Improve sanitization logic in crash reports - #24028, thanks @yannbf!

• CLI: Remove random commas in storybook upgrade logs - #22333, thanks @joaonunomota!

• Controls: Fix select / multiselect when value contains multiple spaces - #22334, thanks @oxcened!

• Core: Add class name to Storybook error name - #24371, thanks @yannbf!

• deprecated

  Core: Deprecate storyStoreV6 (including storiesOf) and storyIndexers - #23938, thanks @JReinhold!

• Doc Blocks: Add title to Meta prop types - #23370, thanks @iqbalcodes6602!

• ManagerAPI: Fix bug with story redirection when URL has partial storyId - #24345, thanks @ndelangen!

• NextJS: Support rename font import - #24406, thanks @yoshi2no!

• NextJS: Change babel plugins from proposal-... to transform-... - #24290, thanks @roottool!

• NextJS: Fix default next image loader when src has params - #24187, thanks @json-betsec!

• NextJS: Fix Image Context re-use via singleton - #24146, thanks @martinnabhan!

• NextJS: Improve support for Windows-style paths - #23695, thanks @T99!

• React: Upgrade react-docgen to 6.0.x and improve argTypes - #23825, thanks @shilman!

• Svelte: Fix docs generating when using lang="ts" or optional chaining - #24096, thanks @j3rem1e!

• UI: Filter some manager errors - #24217, thanks @yannbf!

• UI: Update ScrollArea with radix - #24413, thanks @cdedreuille!

• UI: Improve contrast ratio between focus / hover - #24205, thanks @chocoscoding!

• UI: Fix className missing in syntaxhighlighter - #24491, thanks @ndelangen!

• Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - #24166, thanks @bryanjtc!

• Vite: Support Vite 5 - #24395, thanks @IanVS!

• Web-components: Add Lit3 support - #24437, thanks @shilman!

• Webpack: Display errors on build - #24377, thanks @yannbf!

• Webpack: Categorize builder error - #24031, thanks @yannbf!

• Webpack: Use logger.warn on warnings - #24472, thanks @yannbf!

• Addon-docs: Resolve mdx-react-shim & @storybook/global correctly - #23941, thanks @ndelangen!

• Addons: Fix key is not a prop warning - #23935, thanks @kasperpeulen!

• CLI: Exclude addon-styling from upgrade - #23841, thanks @Integrayshaun!

• CLI: Improve autotitle stories format handling in GFM automigration - #23964, thanks @yannbf!

• CLI: Install latest version of non-core addon - #23956, thanks @Integrayshaun!

• CLI: Pass package manager to postinstall - #23913, thanks @Integrayshaun!

• CLI: Provide guidance for users who try to initialize Storybook on an empty dir - #23874, thanks @yannbf!

• CLI: Set server init generator to use Webpack5 - #23971, thanks @yannbf!

• Core: Add error categorization framework - #23653, thanks @yannbf!

• Core: Fix error thrown if docs.defaultName is unset - #23893, thanks @stilt0n!

• Core: Fix indexing for non-prefixed stories.* stories - #23974, thanks @shilman!

• Core: Fix race-condition relating to addons.setConfig - #23802, thanks @ndelangen!

• Core: Throw an error when detecting empty stories field - #23942, thanks @yannbf!

• security

  Dependencies: Upgrade escodegen to fix security issue - #23973, thanks @shilman!

• Index: Fix *.story.* CSF indexing - #23852, thanks @shilman!

• Logger: Fix double error messages/stack - #23919, thanks @ndelangen!

• Maintenance: Categorize server errors - #23912, thanks @yannbf!

• Maintenance: Move filtering of sidebar into the state - #23911, thanks @ndelangen!

• Maintenance: Remove need for react as peerDependency - #23897, thanks @ndelangen!

• Maintenance: Remove sourcemaps generation - #23936, thanks @ndelangen!

• Maintenance: Revert "WebpackBuilder: Remove need for react as peerDependency" - #23882, thanks @vanessayuenn!

• Manager API: Fix api.getAddonStatedefault value - #23804, thanks @sookmax!

• Preset: Add common preset overrides mechanism - #23915, thanks @yannbf!

• Publish: Don't distribute src files or unnecessary template files - #23853, thanks @shilman!

• Shortcuts: Execute preventDefault only if keyboard shortcuts are enabled - #23412, thanks @Spielboerg!

• Types: Fix React.ReactElement not found - #23967, thanks @abu-osos!

• UI: Add an experimental API for adding sidebar bottom toolbar - #23778, thanks @ndelangen!

• UI: Add an experimental API for adding sidebar filter functions at runtime - #23722, thanks @ndelangen!

• UI: Add an experimental API for adding sidebar top toolbar - #23811, thanks @ndelangen!

• UI: Removal of experimental components - #23907, thanks @ndelangen!

• Vue3: Add support for Global Apps install - #23772, thanks @chakAs3!

• Vue3: Use slot value directly if it's a string in source decorator - #23784, thanks @nasvillanueva!

• ✨ Indexer: Introduce new experimental indexer API - #23691, thanks @JReinhold!

• ✨ CLI: Update postinstall to look for addon script - #23791, thanks @Integrayshaun!

• ✨ Server: Add support for tags - #23660, thanks @JReinhold!

• 🐛 CSF-Tools: Remove prettier from printConfig - #23766, thanks @kasperpeulen!

• 🐛 Build: Support Chrome 100, Safari 15 and Firefox 91 - #23800, thanks @kasperpeulen!

• 🐛 Vue3: Don't automatically assign values to all slots - #23697, thanks @kasperpeulen!

• 🐛 Core: Fix composeStories typings - #23577, thanks @yannbf!

• 🐛 WebpackBuilder: Remove need for react as peerDependency - #23496, thanks @ndelangen!

• 🔧 Addon-docs, Core, Server: Use new indexer API - #23660, thanks @JReinhold!

• 🔧 Core-server: Improve internal types - #23632, thanks @JReinhold!

• 🔧 UI: Improve Link component - #23767, thanks @cdedreuille!

• 🔧 UI: Improve new Button component - #23765, thanks @cdedreuille!

• 🔧 UI: Update Button types to allow for no children on iconOnly buttons - #23735, thanks @cdedreuille!

• 🔧 UI: Upgrade Icon component - #23680, thanks @cdedreuille!

• deprecated

  🔧 Addons: Deprecate key in addon render function as it is not available anymore - #23792, thanks @kasperpeulen!

• 🔧 UI: Update IconButton and add new Toolbar component - #23795, thanks @cdedreuille!

This month, we're going to experiment with our launch cycle by making smaller but more frequent releases. Our goal is to bring you new features more quickly, while also smoothing the upgrade process.

Storybook 7.2 is the first of these new, faster releases:

• Automigration: Fix wrap-require automigration for common js main.js files - #23644, thanks @valentinpalkovic!

• CSF Tools: Use recast for printing in csf-tools - #23427, thanks @kasperpeulen!

• CSF-tools: Parse stories using typescript keywords 'satisfies' and 'as' - #23638, thanks @joaonunomota!

• Core: Fix channelOptions for serverChannel - #23615, thanks @ndelangen!

• NextJS: Add @babel/core as a dependency - #22450, thanks @valentinpalkovic!

• Vite: Fix config loading - project directory - #22240, thanks @nVitius!

• Angular: Fix initialization of Storybook in Angular 16.1 - #23598, thanks @valentinpalkovic!

• Dependencies: Downgrade jest-mock - #23597, thanks @ndelangen!

• Dependencies: Upgrade simple-update-notifier - #23396, thanks @dartess!

• Storyshots: Fix broken storyshots with angular - #23555, thanks @mattlewis92!

• TypeScript: Added expanded to CoreCommon_StorybookRefs to fix typescript errors - #23488, thanks @DotwoodMedia!

• TypeScript: Downgrade to the last version of type-fest that doesn't need typescript 5.0 - #23574, thanks @ndelangen!

• Vue2: Source Decorator reactivity - #23149, thanks @chakAs3!

• Router: Support RegExp in Route component - #23292, thanks @ndelangen!

• UI: Improve tabs component, more type correct, allow for FC as title - #23288, thanks @ndelangen!

• Addons: Improve code quality by using title as FC & sharing state via useAddonState - #23298, thanks @ndelangen!

• InteractionsAddon: Improve code quality by using title as FC & sharing state via useAddonState - #23291, thanks @ndelangen!

• UI: Add storyStatus to sidebar UI - #23342, thanks @ndelangen!

• Addon API: Add experimental page addon type - #23307, thanks @ndelangen!

• UI: Refactor Canvas component so we can improve types for PREVIEW addons and TAB addons - #23311, thanks @ndelangen!

• UI: Improve Button layout and props - #23356, thanks @cdedreuille!

• removed

  Dependencies: Remove references to api and the 2 deprecated channel packages - #23384, thanks @ndelangen!

• UI: Show the story status in the search results - #23441, thanks @ndelangen!

• UI: Create new form elements in the new Core UI (Input, TextArea, Select) - #23469, thanks @cdedreuille!

Storybook 7.1 is here! 🎉

• 🏄‍♀️ In-app onboarding to help you set up new projects

• 💅 Zero-config styling support for major libraries

• 🗃️ API reference documentation and TypeScript-first snippets

• 📇 Table of Contents for docs

• 🎨 Figma Design addon official support

• 📗 Vue3 source snippets and reactivity improvements

• 💯 Hundreds more fixes and improvements

  7.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 7.1.0-alpha.*, 7.1.0-beta.*, and 7.1.0-rc.* for the full list of changes.

For a better upgrade experience, please use one of the following commands:

npm or yarn 1: npx storybook@latest upgrade

pnpm: pnpm dlx storybook@latest upgrade

yarn berry: yarn dlx storybook@latest upgrade