build: Upgrade Storybook to 5.2

[sahlhoff]

Hi all, you'll notice two storybook changes in this PR: Avatar and Card. Avatar is using the legacy storiesOf api but with addParameters({component: <component>}). Card is using the new CSF format.

Some notes:

I'm unable to get CSF to work with the source-loader. The source-loader is able to parse the legacy stories (and show the code) but is having issues showing the CSF code. There's similar issues on github.

You'll notice for both the Card and Avatar story we are able to parse the props in the props section. However this appears to be just the default props from the component. I did have some success using the docgenLoader – you'll see commented out in .storybook/webpack.config.js. This however had a severe impact on build performance and also LOTS of props got passed because in most cases we are extending HTMLAttributes.

The refactor to CSF is going to be a pretty large change to the codebase. CSF requires that there are only one component per file– this means potentially we could at least see double of the storybook files in components like button and form-field. I've got a lot of these changes stashed locally and I can follow up with them if we can figure out the webpack issues / source-loader.

Any thoughts or help, greatly appreciated! 🙏

Checklist

• branch has been rebased on the latest master commit
• tests are changed or added
• yarn test passes
• all (dev)dependencies that the module needs is added to its package.json
• code has been documented and, if applicable, usage described in README.md
• module has been added to canvas-kit-react and/or canvas-kit-css universal modules, if
  applicable
• design approved final implementation
• a11y approved final implementation
• code adheres to the API & Pattern guidelines

Additional References

Storybook's recommended docs configuration: https://github.com/storybookjs/storybook/tree/next/addons/docs#manual-configuration

Performance

[NicholasBoll]

It looks like the Chromatic CI check is failing on yarn build-storybook

[NicholasBoll]

If we don't want to list out all the properties on the host Element, it looks like props can be filtered out: storybookjs/storybook#8104 (comment)

[sahlhoff]

@NicholasBoll this should be able yarn build-storybook after we upgrade to emotion 10

[sahlhoff]

Discovered from strothj/react-docgen-typescript-loader#37

[NicholasBoll]

@anicholls There was some dependency mismatches, so we simply updated the yarn.lock file will all the latest changes and that fixed the issue, but added a lot of diffs to the yarn.lock file. Is this okay or should we narrow it down by updating the package.json file as well?

[lychyi]

@NicholasBoll Changes were manually introduced to yarn.lock?

[anicholls]

@NicholasBoll I told you 🤣

[NicholasBoll]

@sahlhoff @anicholls What happened here? https://www.chromaticqa.com/snapshot?appId=5d854c26ba934e0020f5e98a&id=5db78ba417a1ee0020846163

It looks like now there is a background image? It wasn't showing before?

[sahlhoff]

@NicholasBoll just looking at the resources panel in chrome– looks like previously it was incorrectly getting base64ed compared to current build. The story css has it explicitly set so going to assume we want it here.