Spike: Storybook Documentation Spike

[Shadae]

User Story

As a UI Developer, etc, we have decided to move forward with utilizing Material UI components within Automate to iterate faster. After a few team discussions we have also decided that to document the designed shared components we will bring in https://storybook.js.org/ to hold them for referencing. In the past we have have spun libraries to do this. But we are going to do a small exploratory spike to see what this would look like and how it will change our development process.

Definition of Done

• Pull in https://storybook.js.org/ https://storybook.js.org/docs/guides/guide-angular/
• Put an Automate styled material component within Storybook
• Reference and use that component insides of Automate
• Do walk through for team on issues, faves, blocking items.

Demo Script / Repro Steps

[vjeffrey]

would be AWESOME to demo these spike results when ready :)

[SEAjamieD]

FYI - there is currently an issue using the latest Storybook (5.3.11)
referenced here: storybookjs/storybook#9749

All is well reported as long as you use 5.3.10 for now

I'm currently running into an issue around storybook being unable to find some Modules so if anyone figures this piece out ... please hit me up!

[SEAjamieD]

ok...so as kind of expected here, we need to add redux and stencil/redux as dev dependencies in the package.json

"redux": "^4.0.4",
"@stencil/redux": "^0.1.1",

[tarablack01]

Github: https://github.com/chef/chef-design-system
NPM: https://www.npmjs.com/package/chef-design-system
Chromatic QA: https://www.chromaticqa.com/
ng-packagr: https://github.com/ng-packagr/ng-packagr