Community outreach to upgrade addons to 7.0

[shilman]

Storybook 7 (SB7) contains 2.5 years worth of breaking change and community addons need to be updated for SB7 compatibility. (All core addons have already been updated and issues mitigated via automigrations.)

To support developers as they migrate their addons to Storybook 7, we've created an addon migration guide that outlines how to make your addons Storybook 7 compatible. We're keeping up-to-date records of the addons that are and aren't compatible with Storybook 7 and you can explore many of these in the lists below.

Most popular community addons by npm downloads:

• @storybook/addon-knobs (conversation started here) - open PR
• chromatic
• storybook-addon-designs (Supports Storybook 7 in a new package called @storybook/addon-designs - issue here)
• @storybook/addon-postcss (conversation started here) Haven't been maintained in 2 years, and is fully superseded by @storybook/addon-styling. @integrayshaun will release a version with a message telling users to migrate to @storybook/addon-styling.
• msw-storybook-addon (conversation started here)
• @storybook/testing-react (conversation started here)
• storybook-addon-next-router (checking this one off the list as the repository was archived as of 07/01/2023)
• storybook-addon-outline (deprecated in favor of @storybook/addon-outline)
• @storybook/addon-info (checking this one of the list as there's been no movement in the past 2 years and he's not actively maintained anymore as it's superseded by the Docs addon)
• @storybook/test-runner (conversation started here)
• storybook-addon-next (ongoing discussion here but deprecated in favor of @storybook/nextjs)
• storybook-docs-toc (conversation started here) (Archived as 1/08/2023 as Storybook now provides a table of contents as part of the 7.1 release)
• @storybook/addon-google-analytics (initial conversation started [here] (addon-google-analytics: not compatible with Storybook 7 beta #20366) and issue raised here to address the changes) - open PR
• storybook-addon-pseudo-states (conversation started here)
• storybook-dark-mode (PR open here)
• storybook-addon-gatsby (conversation started here)
• @etchteam/storybook-addon-css-variables-theme (conversation started here)
• storybook-addon-angular-router (answered via this issue)
• @storybook/addon-cssresources (conversation started here)
• @storybook/addon-ie11 (Storybook 7 will not support IE11, checking this one of the list)
• storybook-addon-grid (conversation started here)
• storybook-multilevel-sort (conversation started here)
• storybook-addon-i18next (conversation started here, PR here)
• storybook-source-link (conversation started here)
• babel-plugin-storybook-csf-title (conversation started here, looks like this is more or less superseded by the autotitle feature)
• @urql/storybook-addon (conversation started here)
• storybook-addon-apollo-client (conversation started here)
• storybook-addon-intl (conversation started here)
• storybook-addon-mock (already supporting Storybook 7 per this comment)
• @chakra-ui/storybook-addon (conversation started here)
• storybook-mobile-addon (conversation started here)
• @storybook/addon-queryparams (conversation started here)

FAQs

I'm maintaining an addon. How do I make it compatible with Storybook 7?

We highly recommend consulting our abridged addon migration guide. If you have any questions or encounter any issues, please reach out to Storybook maintainers in the #addons channel in the Storybook Discord community.

What do I do if an addon I'm using is incompatible with Storybook 7 but isn't on this list?

To share incompatibility errors, please open an issue on the repo of the relevant addon, asking the author to add Storybook 7 compatibility, and share this page with them for reference.

It's also really useful for us to know which addons aren't yet compatible, so please consider adding a comment here, especially if the addon is popular and causes a critical failure.

Finally, if you have the resources, please consider helping migrate that addon yourself!

[jonniebigodes]

@shilman If you don't mind, I'm going to assign myself to this as I've already started conversations with various maintainers. I'll keep updating the issue as feedback keeps rolling in. Sounds good?

[shilman]

Here's another one for the list @jonniebigodes

https://www.npmjs.com/package/storybook-addon-mock

[jonniebigodes]

@shilman, thanks for the reminder. I'm updating the list with this one, and there's already a discussion about it.

[shilman]

Another https://storybook.js.org/addons/storybook-addon-pseudo-states

[shilman]

A few more errors from @yannbf QA:

storybook-addon-designs

[Storybook] One of your manager-entries failed: http://localhost:6006/sb-addons/designs-9/register-bundle.mjs TypeError: Ae.register is not a function
at Rt (register-bundle.mjs:735:2317)
at register-bundle.mjs:735:2750

storybook-addon-mobile

[Storybook] One of your manager-entries failed: http://localhost:6006/sb-addons/storybook-mobile-10/register-bundle.mjs ReferenceError: regeneratorRuntime is not defined
at register-bundle.mjs:2:11869

[jonniebigodes]

@shilman and @yannbf, regarding storybook-addon-mobile, which one are you using? If it's this one it's pretty much abandoned. However, there's a fork here, and also a discussion is happening, which I'm going to follow up on.

Regarding the issue with the storybook-addon-designs, I've already added the relevant discussion around supporting Storybook 7.0. Nevertheless, if any of you is interested in tracking the progress, here's the link for reference

[swrobel]

@react-theming/storybook-addon is referenced in a recent blog post (as well as others) but it isn't compatible

[shilman]

@integrayshaun can you please help with this theming issue & provide guidance for best practices in 7.0? ☝

[ndelangen]

I've written a section in the MIGRATION.md-file about how addon-creators and addon-consumers can improve support for Storybook 7.0:

#21857

[ShaunEvening]

@integrayshaun can you please help with this theming issue & provide guidance for best practices in 7.0? ☝

Absolutely! I need to remove those addons from the recipe

[nutboltu]

@jonniebigodes just a head's up storybook-addon-mock has released new version which supports storybook v7.

[andrehil]

Can you add this one to the list? 😄
https://github.com/ccpu/storybook-addon-playwright

[jonniebigodes]

@nutboltu that's great to hear. Glad that you already updated the addon to support Storybook 7. I'll update the issue with this change

[jonniebigodes]

@andrehil thanks for the suggestion, we appreciate it, but cases such as the one you mentioned (i.e., archived repositories) will not feature here, for consistency's sake.

[taozhou-glean]

@storybook/addon-queryparams seems not on the list, but probably should too

[ldm-acn]

After the upgrade to version 7 I'm running the packages listed below and I'm getting an issue with storybook-addon-react-router-v6.

This is the conflict:

@storybook/components@"^6.4.0" from storybook-addon-react-router-v6@0.3.5
@storybook/components@"^7.0.0" from storybook-react-i18next@2.0.1

"@storybook/addon-actions": "^7.0.4",
"@storybook/addon-essentials": "^7.0.4",
"@storybook/addon-interactions": "^7.0.4",
"@storybook/addon-links": "^7.0.4",
"@storybook/builder-vite": "^7.0.4",
"@storybook/react": "^7.0.4",
"@storybook/testing-library": "^0.1.0",
"storybook-addon-react-router-v6": "^0.3.5",
"storybook-react-i18next": "^2.0.1",

[jonniebigodes]

@taozhou-glean appreciate the follow-up, and to give you a bit more context, the @storybook/addon-queryparams has been outdated for quite some time, if not mistaken, since version 6.4 as we don't have a dedicated maintainer for that particular addon. If you're ok with it and you're interested in getting support for Storybook 7, we'd love to see that. In the meantime, I'll add it to the list.

@ldm-acn, thanks for reaching out to us and letting us know. I saw that you already reached out to the maintainer of that particular addon, and based on his response, he was planning on releasing a new version next Thursday. With that, I was wondering if you could follow up with us and let us know if the new release will work with 7.0 so that we can adjust the list above and add this as well.

[taozhou-glean]

@taozhou-glean appreciate the follow-up, and to give you a bit more context, the @storybook/addon-queryparams has been outdated for quite some time, if not mistaken, since version 6.4 as we don't have a dedicated maintainer for that particular addon. If you're ok with it and you're interested in getting support for Storybook 7, we'd love to see that. In the meantime, I'll add it to the list.

Do we plan to deprecate it officially in the future ? I briefly checked the code there and it's such a small addon that everyone probably can easily make one themselves with a decorator ;) Anyway, I thought it's a good opportunity for myself to get a bit more familiar with storybook 7, so I have sent storybookjs/addon-queryparams#6 to add the support of v7 for that addon ;)

[DonatienD]

themeprovider-storybook (link) could probably be added to the list too.

[adnandedhawala]

Is the storybook-addon-codepen addon incompatible with storybook version 7?

[ShaunEvening]

@adnandedhawala Not yet. The maintainer hasn't upgraded to 7.0 in their dependencies
https://github.com/elseloop/storybook-addon-codepen/blob/main/package.json

[ShaunEvening]

@DonatienD It looks like the maintainer hasn't updated this addon in 2 years.

If you're looking for ThemeProvider support, I'd recommend using @storybook/addon-styling

[ldm-acn]

@ldm-acn, thanks for reaching out to us and letting us know. I saw that you already reached out to the maintainer of that particular addon, and based on his response, he was planning on releasing a new version next Thursday. With that, I was wondering if you could follow up with us and let us know if the new release will work with 7.0 so that we can adjust the list above and add this as well.

storybook-addon-react-router-v6 is now at version 1.0.0 and compatible with Storybook 7

[volnei]

@whitespace/storybook-addon-html

[volnei]

What about @storybook-addon-jsx?

[TylerAPfledderer]

@shilman @chakra-ui/storybook-addon is now waiting for release of its update!

chakra-ui/chakra-ui#7731

[pedaars]

what about storybook-addon-themes https://storybook.js.org/addons/storybook-addon-themes

[ShaunEvening]

@pedaars have you tried @storybook/addon-themes?

[pedaars]

@pedaars have you tried @storybook/addon-themes?

any example of getting it to work with scss

[ShaunEvening]

@pedaars if your Storybook is built with Webpack, you can configure scss using @storybook/addon-styling-webpack.

If you give me some more details about your Storybook, I can make a StackBlitz example for you to look at.

[maraisr]

@shilman storybook-addon-grid@0.4 is now v7 compatible 🎉

[vksingh26]

Hey @shilman, is there any plan to upgrade/migrate storybook-addon-preview addons? We have upgraded storybook with V7/V8 and when we try to consume preview addon, it throws error as seen in the screenshot.