Update Storybook deps, switch to new Storybook api/format, consider using args in Storybook stories

[haszari]

Looking at the Storybook docs, I think there's a new way to declare your components props, which will automatically generate docs and knobs (now called Controls):

https://storybook.js.org/docs/react/writing-stories/args

https://storybook.js.org/docs/react/writing-stories/introduction#using-args

Maybe we can use this to make it easier to write stories & document our components.

We might need to upgrade for this – and we probably should anyway. We're on "@storybook/react": "5.3.18",, latest is 6+:

(Side note: why is RenovateBot not suggesting this update?!)

[haszari]

Might split this into two separate issues – update vs adopt args.

[haszari]

Tried updating all storybook deps to latest, storybook build fails – I think this means we need core/js or to hook it up to our babel config. Getting lots of errors like this:

haszari@cxr woocommerce-blocks % npm run storybook                                                                      

> @woocommerce/[email protected] storybook /Users/haszari/_automattic/merch-repos/woocommerce-blocks
> start-storybook  -c ./storybook -p 6006 --ci

info @storybook/react v6.0.13

… lots of output …

ERROR in ./assets/js/base/components/block-error-boundary/index.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/haszari/_automattic/merch-repos/woocommerce-blocks/assets/js/base/components/block-error-boundary'
 @ ./assets/js/base/components/block-error-boundary/index.js 1:0-41
 @ ./assets/js/base/utils/render-frontend.js
 @ ./assets/js/base/utils/index.js
 @ ./assets/js/base/context/add-to-cart-form/form-state/index.js
 @ ./assets/js/base/context/add-to-cart-form/index.js
 @ ./assets/js/base/context/index.js
 @ ./assets/js/base/components/cart-checkout/totals/totals-coupon-code-input/stories/index.js
 @ ./assets/js sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)stories\/(?!\.)(?=.)[^/]*?\.js)$
 @ ./storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-a11y/dist/a11yRunner.js-generated-other-entry.js ./node_modules/@storybook/addon-a11y/dist/a11yHighlight.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./storybook/preview.js-generated-config-entry.js ./storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack

[nerrad]

(Side note: why is RenovateBot not suggesting this update?!)

Because renovate is configured to pin versions and it appears when pinning, it will only update patch releases within that range. I don't think renovate should be configured to pin devDependencies (see #2811)

[haszari]

There is a migration guide: https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5

We should follow that. Being stuck on 5 will probably become painful fast ..

[haszari]

Gutenberg core are still on 5.0, I asked if they are planning to upgrade here: WordPress/gutenberg#17973

[haszari]

FYI @nerrad I moved this into current sprint. I want to get a good handle on this before investing more time in writing new stories. Ideally we adopt 6.0 now and get the new stuff for new stories. Worst case, we confirm that we shouldn't update to 6 for some reason, or updating is blocked because we need to rewrite stories.