Migrate to Storybook?

[hobbes7878]

Tracking with a demo to see how painful/beneficial this would be here: https://github.com/reuters-graphics/storybook-demo

Demo site, here: https://reuters-graphics.github.io/storybook-demo/

[hobbes7878]

One definite downside:

For example: https://reuters-graphics.github.io/storybook-demo/?path=/docs/beforeafter--override-overlay-css

Often we teach folks to override styles within the components using global SCSS to match their page design.

Storybook doesn't seem to register :global SCSS tags in stories (and also leaks non-scoped SCSS into other component's stories, per storybookjs/storybook#12855).

Seems like we'd have trouble documenting SCSS overrides of component styles... but maybe it's OK to have fewer examples of overriding styles on individual components and just have a page in the docs dedicated to saying, here's how to think about overriding ANY styles in components.

[hobbes7878]

Worth a word about potential upsides here, too, I suppose.

Storybook is a mature component library framework, which means we won't have to maintain our own via sveltekit. Svelte is a community-supported framework in Storybook (not core), but it seems like it's well maintained, and even on the minds of SvelteKit core team to support.

The main future upside I see, though, is the benefit we get from the plugin ecosystem to add more testing into our components, including things like accessibility tests. It's also the framework dotcom uses, so in terms of compatibility, it's easier for them to look at what we're doing, if that becomes necessary.

I also wonder whether we're going to want something more robust to manage components NOW vs. regretting it later once we've scaled up with lots more stuff..

Worth tagging @MinamiFunakoshiTR in at this point to discuss and talk about specific pain points with the components we have.

Going forward with this means definite migration pain to move our docs into Storybook format, not to mention more customisation of styles and stuff I'd want to do in the app, but it's probably something we could pick at in a branch until it's done, too.

[hobbes7878]

For now, gonna take Storybook on a longer test run with a new, non-critical lib:
https://github.com/reuters-graphics/svelte-charts

If we're happy with it there, then we can decide to migrate this library to Storybook , as well.

[hobbes7878]

Development now tracking on the storybook branch..