Update storybook 6

[saralohr]

The goal of this PR was to remove vulnerabilities in the TS-UI repo, and Storybook 5 was the source of some of those so this includes an update to Storybook 6.

What was done:

• Addressed nested vulnerabilities
  • Our high risk vulnerabilities were all nested dependencies. I tried out setting these in a resolutions section in package.json with npm-force-resolutions. It is running as a pre-install script and seems to be doing the job. Happy to hear other suggestions on handling this if this is not the preferred method.

found 0 vulnerabilities in 3420 scanned packages

• Update to Storybook 6
  • Storybook 6 has a bunch of cool features and some breaking changes, so this is a first pass at getting us set up in v6. There is a lot more that can be unlocked by moving from the storiesOf format to CSF or MDX stories.
  • v6 ships with a new config setup that has a lot more baked in. Was able to remove the entire webpack config and more
  • Added exports to all the stories so that they work with the Docs add-on, which is what shows all props on the component (used to be Info addon but that is deprecated)
  • Included new addon for showing rendered HTML
  • knobs is deprecated and wasn't working on some of the components (and causing errors) so I removed it in those cases. SB6 ships with a new Controls feature that is meant to replace knobs. It supposedly works out of the box once you update to Component Story Format.

[saralohr]

PS if you want to take Storybook 6 for a spin without running it locally you can view it here: https://deploy-preview-696--ts-ui-storybook.netlify.app/?path=/docs/button--default

[ryanwi]

Awesome 💯 . How does the CI look with these 2 lines uncommented? https://github.com/teamsnap/teamsnap-ui/blob/master/.github/workflows/main.yml#L42 . Based on what you mentioned, that should be good to enable?

[saralohr]

Oh yeah, good call... we'll see!

[bradjteamsnap]

Nice! did you end running any migrations scripts, or do it all by hand?

[saralohr]

I ended up doing it by hand. The migration script for transferring from storiesOf to CSF still required a lot manual parsing after the fact, so I abandoned that for another day. And then there were so many weird errors juggling between npm run build and build-storybook and start-storybook (these last two are totally different for some reason), that I just had to go step by step to keep track of what was breaking what. Good game of whack-a-mole!

[ryanwi]

I'm all onboard! But, I know little of storybook so deferring to the experts on that.

[l3aconator]

LGTM! Pulled locally and ran the Storybook commands and looked through the components in the UI.