Add storybook

[scotttrinh]

Saw the existing components page and the note there about swapping it out:

dual-power-app/pages/components.tsx

Line 24 in 0f26bcd

// TODO: Replace with some design system / component library exercise tool

Wanted to open an issue and propose the only tool I'm personally familiar with: Storybook.

If that seems like a reasonable approach, I can work on adding the basic infrastructure and can look at porting our existing component demos to it (or someone can take that on separately).

• Basic local Storybook setup useful for development Add very basic Storybook #116
• Deployed Storybook that is accessible for review in PRs
• Deployed Storybook that is accessible to the public

[scotttrinh]

Probably another question is whether we care about hosting the storybook, or do we just want to have it available for local development? I imagine we'd want to host it since that would make it easier to review PRs, but we can perhaps take that work on in chunks? First development-environment only, and then figure out the best way to host it from within the app itself? Maybe that's trivial enough to do all at once.

[patcon]

Hi 👋🏻 I've just been following along.

+1 to storybook

The GitHub Action config is a bit noisy due to how that specific project works, but here's a config for using Chromatic (easy, free storybook hosting). Just make sure to substitute in your own projectToken pls -- we left our token public due to seemingly low-risk and how it made PRs from forks simpler :)
https://github.com/GCTC-NTGC/gc-digital-talent/blob/ef2a66c8e882a788f358f38c420642b232e62a11/.github/workflows/storybook.yml#L77

[scotttrinh]

@patcon

I was initially thinking of hosting the storybook directly from the Next site, much like the existing components demo page. Any advantages you can think of for hosting it on a separate host?

[sparklestheunicorn]

We had an integrated storybook instance but ran into issues with it and decided to remove it and go with the current simpler approach. Getting a development version running seems worthwhile, so please feel free to go ahead with that work!

[scotttrinh]

We had an integrated storybook instance but ran into issues with it and decided to remove it and go with the current simpler approach.

Is there any record of the "issues" that were encountered or any requirements we'd like to see here the Storybook was making difficult? See #116 for my first pass at getting something working: getting WindiCSS to work was a bit of a struggle, but finally get it working there.

[sparklestheunicorn]

Thanks @scotttrinh ! This looks good and is now merged. I also updated the UI components issue to specify adding to the SB and migrating the existing components, which shouldn't be too hard.

[patcon]

Any advantages you can think of for hosting it on a separate host?

@scotttrinh Hm. 🤔 Well, we originally only set ours up for the auto-deploy of the storybook, but ended up leaning into their free visual diffing as well (it snapshots each component and raises flags when they change). So it's nice in that we discovered something useful unexpectedly. We didn't plan to use it, but enabled it for kicks, and it's been growing on us: GCTC-NTGC/gc-digital-talent#1953 (comment)

Example changeset: https://www.chromatic.com/pullrequest?appId=61e099a1bb1465003a73d3ce&number=1953&view=changes

And adding chromatic is as little as 3 lines in a GitHub action workflow file, so the custom action takes care of most of it

[scotttrinh]

@patcon

That looks pretty cool, actually! What's the process for deciding technical decisions like this? I feel like depending on another 3rd party platform is at least worth getting some consensus on from those with some more context than what I have. @mis4mike do you have any thoughts on this?

Maybe it's worth adding a todo list to this issue's description so we can track all of the steps to getting something robust here. I'll throw some preliminary ideas there and we can update.

[sparklestheunicorn]

These seem cool and I don't have strong feelings about which way we go with it. I'd be interested to see if we could get this integrated with our Vercel deployments (or auto-deployed alongside them). As for bigger-picture decision-making, I would loop in @replygirl and consider joining our basecamp instance (send an intro to blacksocialists.us/contact with your name and email for access). We have bi-weekly meetings for planning and onboarding.

In general, we are do-ocratic so long as changes are aligned with the big picture, so bring your ideas and passions 😄

[sparklestheunicorn]

@scotttrinh @patcon We're talking about using Chromatic at the design meeting and it sounds like a good solution for us. We can add a subdomain through Vercel. If either of y'all feels like taking this work on, it would be much appreciated. Please let me or @replygirl know if you need help with anything.

[scotttrinh]

@mis4mike Great, I'm glad there is consensus on that 🎉 @patcon do you have the bandwidth to pick up where we are at right now? If not, I'll have time in the coming week to work on it and getting the rest of the components moved over to the Storybook.

[patcon]

Nice! I think I can chip in within the week. Will share code as soon as I have something, and welcome anyone else to run from wherever I pause (my toes are unsteppable!)

[replygirl]

Added #128 for the Chromatic part