1828737 - Upgrade to Storybook version 7

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

Storybook version 7 was released at the beginning of April. Migrating to the newest version isn't urgent, but it would be nice to keep things up to date to ensure compatibility with addons and libraries and to take advantage of newer features (they have a real dark mode now). There's potential for pain around some of the addons and custom webpack logic we've added, but hopefully it won't be too bad.

There's a migration guide available on Storybook's site: https://storybook.js.org/docs/web-components/migration-guide

We tried upgrading to a pre-release version 7 back in December but ran into issues - it seemed like web component support and/or ES Module support wasn't quite sorted out. Hopefully things are more stable now.

Comment 1

[Hanna Jones [:hjones]]

Attachment: Bug 1828737 - upgrade to Storybook V7 r=mstriemer,#recomp-reviewers

This patch upgrades Storybook to the latest version. Had to do a decent bit of hacking around with our customizations to get them to keep working. Probably the biggest change was we now have to use an indexer for our markdown stories, and in order to get the information we need we have to do the same transformations that we do in the loader. For that reason I moved a lot of the loader logic out into a utils file. It feels pretty redundant to have the loader and the indexer...but I'm not sure if there's an alternative right now.

Also worth noting - I turned off the auto generated docs in favor of our READMEs, which I added args tables to. We don't have these for all our components yet, so we might want to file bugs to start adding them. If we would prefer to keep those docs pages for now I think I can configure Storybook to keep generating them

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1828737 - add table of contents to docs stories r=#recomp-reviewers

Takes advantage of the fact that were on Storybook V7 to add a TOC to our docs stories.

Depends on D197218

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f8bc9cc2b552
upgrade to Storybook V7 r=reusable-components-reviewers,tgiles

Comment 4

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/f8bc9cc2b552

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c964173b08eb
add table of contents to docs stories r=reusable-components-reviewers,tgiles

Comment 6

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/c964173b08eb