Storybook 6.3 Release 📐

[shilman]

SB6.3 adds new UI development and testing features, while continuing to evolve with the JS ecosystem:

Schedule

• ✅ 6.3.0-alpha.0 2021-04-08
• ✅ 6.3.0-beta.0 2021-05-25
• ✅ 6.3.0-rc.0 2021-06-09
• ✅ 6.3.0 2021-06-23

Contents

Storybook 6.3 contains hundreds of features and bugfixes. For a full list, see CHANGELOG.md. Some highlights:

Core

• Core: Support manager build with webpack5 Core: Support manager build with webpack5 #15001
• Core: Single story option in iframe view Core: Single story option in iframe view  #14875
• Core: Built-in stories.json support for composition Core: Built-in static stories.json support #14945
• Core: Target modern browsers with --modern flag Core: Support modern browser target #14954
• Core: Enable community builders Core: Enable community builders #14545 CLI: Support community builders in sb init #14651
• Core: Enable gzip compression on the development server Core: Enable gzip compression on the development server #14459
• Core: Allow string in object arg and support fractional numbers in URL args Core: Allow string in object arg and support fractional numbers in URL args #14511
• UI: Support * wildcard option in storySort order array UI: Support * wildcard option in storySort order array #14531
• Core: Add globals URL param and remove from sessionStorage Core: Add globals URL param and remove from sessionStorage #15056

Frameworks

• React: Support autogenerated ArgTypes in webpack5 React: Upgrade to @storybook/react-docgen-typescript-plugin #14991
• Web-components: Support lit 2 with back-compat Web-components: Support lit 2 with back-compat #14898
• Web-components: Add full reload listening to server-side-events Web-components: Add full reload listening to server-side-events #14445
• Angular: Angular 12 support CLI: Add Angular 12 + docs inline rendering support #14928
• Angular: Docs inline rendering by default in new projects CLI: Add Angular 12 + docs inline rendering support #14928
• Angular: Support Ivy addon Angular: Support Ivy addon #14649
• Angular: Create actions for Outputs by default Angular: Create actions for Outputs by default #14299
• Angular: Add angular builder to start + build storybook Angular: Add angular builder to start + build storybook #15061
• Preact: Add React compat by default Preact: Add react compat by default #14555
• Preact: Fix hooks when used in stories Preact: Fix hooks when used in stories, preact-kitchen-sink #14473
• CLI: Add Server template generator CLI: Add Server template generator #13979

Addons

• Essentials: Add measure and outline addons Essentials: Add measure and outline addons #15107
• Addon-docs: Exclude decorators in dynamic source snippets Addon-docs: Exclude decorators in dynamic source snippets #14652
• Controls: Rework handling of default values Controls: Update all controls to have explicit handling for undefined #14899
• A11y: Upgrade axe-core to 4.2.0 Addon-a11y/Storyshots: Upgrade axe-core to 4.2.0 and related dependencies #14749
• API: Support addon keyboard shortcuts API: Add addon keyboard shortcuts & create shortcuts for addon-viewport #14658
• Viewport: Add keyboard shortcuts API: Add addon keyboard shortcuts & create shortcuts for addon-viewport #14658
• Toolbars: Add customizable keyboard navigation shortcuts Toolbars: Add customizable keyboard navigation shortcuts #15169
• Actions: Display DOM Event/CustomEvent data Addon-actions: Display DOM Event/CustomEvent data #14879
• Actions: Add 'New Action' indicator Addon-actions: Add 'New Action' indicator #14728

Help us test!

We'd love your feedback in the form of Github issues. 🙏

To upgrade an existing project to 6.3 prerelease version:

npx sb@next upgrade --prerelease

And check migration instructions if you see anything weird.

And for a new project:

npx sb@next init

🧾 Migration instructions

[panmona]

In the release notes it says: "Reuse your stories in unit tests: Jest, Cypress & more".
Can someone maybe link me to the right place to get more info about this? I couldn't anything about it in the changelog 🤔

[NicolasBonduel]

@panmau I believe they are referring to this: https://medium.com/storybookjs/testing-lib-storybook-react-8c36716fab86
Looks great! Can't wait to try it out.