Storybook 6.0 Release 🏆

[shilman]

Storybook 6 is now in RC! That means all of the breaking changes are in, and we don't expect any destabilizing changes between now and the final release, just lots of cleanup and bug fixing (famous last words...)

Schedule

• ✅ 6.0.0-alpha.0 2020-01-21
• ✅ 6.0.0-beta.0 2020-04-29
• ✅ 6.0.0-rc.0 2020-07-08
• 🏁 6.0.0 2020-08-10

Contents

6.0 RELEASE POST

• 💎 Essentials: Zero-configuration setup
• 🧬 Args: Next-generation, dynamic story format
• 🎛 Controls: Live edit component examples
• 🌐 Composition: Combine multiple Storybooks
• 📚 Documentation: Complete project overhaul

6.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 6.0.0-alpha.*, 6.0.0-beta.*, and 6.0.0-rc.* for the full list of changes. See MIGRATION.md to upgrade from 5.3 or earlier.

PRs and other docs of interest:

• Storybook Args RFC - next-gen dynamic component examples
  • (controls / runtime / actions / toolbars / docs controls)
• Composition - compose multiple storybooks into one
• Zero-config Typescript - pre-configured for all frameworks, easy customization
• Yarn 2 support - next generation package management
• Server - storybook for rails and other server-side components

Help wanted

We'd love your help testing out the new features, and will be documenting them here.

Migration guide

To upgrade all your @storybook/* packages to the latest pre-release, run:

npx sb@next upgrade --prerelease

We'll provide a user-friendly migration guide for 6.0. In the meantime, there's an exhaustive list of potentially breaking changes in MIGRATION.md. Most of the breaking changes have been deprecated for months, and most of the future breaking changes are implemented as backwards-compatible deprecations for now. So, while the list of breaking changes is long and scary-looking, in practice we expect most upgrades to succeed without much extra fiddling.

Storybook Args

Args are a new concept in Storybook's Component Story Format. We've prepared an RFC to explain the idea, the feature links above and updated CSF documentation.

On the more practical side, we have a a walkthrough to get you going with the initial implementation], and an open PR to add args to Storybook's Design System.

MORE HERE SOON

Thanks for your help and stay posted for more updates!

[chrisabrams]

5.3 introduced major changes even though it was a minor version release so not really sure what y'alls definition of major is.

[shilman]

@chrisabrams which major changes?

[chrisabrams]

We used to be able to provide addons as a function that returns an array; starting in 5.3 addons only supports an array it does not check to see if there is a function anymore. This broke all of our storybook setups (we have 100s setup this way).

[shilman]

@chrisabrams I see. Try renaming addons to managerEntries in your presets. We'll document this unintended breaking change in the migration guide. cc @ndelangen

[eroane-rms]

Hi @shilman! I'm very excited about 6.0 beta! During the alpha phase I have been following the Composition feature closely and almost managed to patch a bug in it along the way 😁

Can you share documentation about how you expect composition to work so I can report my findings on it better? My interest in it comes from my my use case. I want to compose multiple storybooks in a monorepo together and test the composed storybook in Chromatic as a single project.

To do this do I need to host each statically built storybook before composing? That is how it seems to work in the dev-kits example. Or will the cli bundle them together? How will the storybooks that are being composed generate their metadata.json and stories.json files?

Please let me know how I can help, I'd love to!

[adeelibr]

Thank you for all the amazing work you are doing. 👍 💯

[ndelangen]

@eroane-rms writing documentation about composition is on my task-list.

I expect to finish it next week.

[eybbus]

Hi, what is the current estimate on release of 6.0.0? My team were planning on moving from 5.2 to 5.3 but saw that 6.0 was scheduled to release yesterday.

[ndelangen]

We' working on some more docs, there's been talks of overhauling the docs-site even.

I'm working on fixing a list of bugs on the composition feature relating to CORS & auth.

There's also work being done to make storybook 6 auto-compatible with typescript (0-config)

And there's more delaying the release.. @shilman has some more info on this.

I'd say migrating to 5.3 is a good idea: you added deprecation warnings to certain things in 5.3.x on things we removed in 6.0. So you can be prepared for when those api's do drop.

See the CHANGELOG & MIGRATION guides

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md

[shilman]

Thanks @ndelangen. Yeah, working on an updated estimate now.

The big remaining items are:

• Stabilization of newly-added features
• Typescript support improvements (more on this soon)
• Documentation site updates
• Release packaging

[hipstersmoothie]

I love the addition of being able to choose the docgen! Is there any way currently to edit the options without a main.js?

[shilman]

@hipstersmoothie Nope. We're all in on main.js, so upgrade today (I'll write up a friendly upgrade guide as part of the 6.0 release). I think we're deprecating config.js in 6.0 and might remove it in 7.0.

[nnennajohn]

Hi @shilman, I got here from this thread: #7066 (comment)

Is there now a way to make the Docs tab default? Thank you.

[ghengeveld]

@nnennajohn See #7066 (comment)

[openscript]

@nnennajohn See #7066 (comment)

That removes the Canvas tab and doesn't make Docs the default tab.

[ghengeveld]

@nnennajohn See #7066 (comment)

That removes the Canvas tab and doesn't make Docs the default tab.

It will basically hide the UI tabs and panels and show the docs view by default. You can still toggle the UI tabs' and panels' visibility using keyboard shortcuts though.

It's the only option you have right now. We want to improve this but there's a lot of higher priority things. A pull request is welcome though 👍

[nnennajohn]

@ghengeveld ok. Thanks for pointing me to a solution.

[saravvij]

npx sb@next upgrade --prerelease - Upgrades storybook to alpha. How to upgrade storybook 5.x to rc release?

[shilman]

@saravvij npx sb@next upgrade --prerelease upgrades any version of storybook to the RC release. We'll publish a migration guide soon, but in the meantime the best resource for breaking changes etc. is https://github.com/storybookjs/storybook/blob/next/MIGRATION.md

[cescoferraro]

@shilman any tips on how to run it with typescript?
I thought i was having issues with the wrong library.
I am getting some errors like described on the link below
ccontrols/component-controls#6
i am running this on a pretty young next.js codebase

[shilman]

@cescoferraro this is an umbrella issue for the 6.0 release. Please open a separate issue describing your specific problem and we'll do our best to help there!

[tknickman]

Just chiming in to say we recently upgraded our storybook covering a big monorepo with custom webpack configs from 5.3.x to the latest 6.0 RC's (npx npm-check-updates '/storybook/' -n -u && npm install) and after the minimal changes following the migration docs everything is running great AND it fixed all the issues we were having with addon-docs (missing story source and missing prop-types).

kudos and can't wait for the full release 👍

[jimmyandrade]

Wow, looking forward for this ❤️

[jlawanson]

We' working on some more docs, there's been talks of overhauling the docs-site even.

I'm working on fixing a list of bugs on the composition feature relating to CORS & auth.

There's also work being done to make storybook 6 auto-compatible with typescript (0-config)

And there's more delaying the release.. @shilman has some more info on this.

I'd say migrating to 5.3 is a good idea: you added deprecation warnings to certain things in 5.3.x on things we removed in 6.0. So you can be prepared for when those api's do drop.

See the CHANGELOG & MIGRATION guides

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md

Hello @ndelangen Thank you for all your work! I wanted to check in and see how you're coming along with the CORS bugs on the composition feature because I am still getting errors.

[rannyeli]

Experiencing some CORS issue in 6.0.0-rc while using storybook composition feature.
I'm adding a ref for a local storybook:

refs: {
    react_components: { 
      title: "React Components", 
      url: "http://localhost:9010"
    },

The local storybook works well on port 9010, but not loaded from the combined storybook

dev-tools output:

[PazDak]

Is 6.0.0 still planning on general release today?

[ghengeveld]

Expected Monday afternoon/evening US time. Basically when @shilman wakes up in Taiwan.

[ghengeveld]

It's published 🚀

[shilman]

💥 release post coming 🔜