Gutenberg: Storybook: Next steps for better experience when developing UI components

[gziolo]

Storybook was introduced in https://github.com/WordPress/gutenberg/pull/17475. The idea was to have a tool for developing UI components in isolation for React. It is integrated with GitHub pages and folks can see how this tool works in action at http://wordpress.github.io/gutenberg/design-system/components/.

Next steps

• [ ] Add React Native version of Storybook (https://github.com/WordPress/gutenberg/pull/17829)
• [ ] Add stories for all @wordpress/components which contain examples in their README files
• [x] Add knobs extension to allow dynamic modifications of props directly in Storybook (https://github.com/WordPress/gutenberg/pull/17891)
• [x] Explore whether it's possible and makes sense to integrate the playground into the Storybook (https://github.com/WordPress/gutenberg/pull/18191)
• [x] Investigate StoryShots addon which adds automatic Jest Snapshot Testing for Storybook (https://github.com/WordPress/gutenberg/pull/18031)
• [ ] Investigate options for visual testing

Tweaks

• [x] Include knobs integration to all existing stories
• [x] ~Ensure all exported constants with components start with upper-case to make it easier to use React hooks inside without triggering lint errors~ Move out all React hooks from the exported story functions to their own components (#18030)

[ItsJonQ]

@gziolo 👋
Here's a checklist for the components to help with the Storybook effort. I've noticed @mkaz adding a bunch (which is amazing!). I think this will help

Stories for Components

_Edit by @gziolo:_

See the updated list in https://github.com/WordPress/gutenberg/issues/17973#issuecomment-591093951.

[gziolo]

Here's a checklist for the components to help with the Storybook effort. I've noticed @mkaz adding a bunch (which is amazing!). I think this will help

Thanks @ItsJonQ! For those who would like to help, @mkaz posted more details about how to add a story for the existing component: https://mkaz.blog/code/coding-a-storybook-story/. It includes also a live coding demo ✨

[enejb]

Just added one for FormToggle Component https://github.com/WordPress/gutenberg/pull/18085

[brentswisher]

It looks like the checklist of outstanding components has gotten a little out of date. I went through the components directory and made an updated list:

Outstanding Components:

• [ ] autocomplete
• [ ] circular-option-picker
• [x] custom-gradient-picker (#21591)
• [ ] date-time (#22024)
• [ ] dimension-control
• [x] disabled (#20514)
• [ ] drop-zone (#20596)
• [x] dropdown-menu(#21122)
• [ ] focal-point-picker
• [ ] focusable-iframe (#22324)
• [ ] form-file-upload
• [ ] form-toggle
• [ ] form-token-field
• [x] gradient-picker (#21588)
• [ ] higher-order/navigate-regions/
• [ ] higher-order/with-constrained-tabbing/
• [ ] higher-order/with-fallback-styles/
• [ ] higher-order/with-filters/
• [ ] higher-order/with-focus-outside/
• [ ] higher-order/with-focus-return/
• [ ] higher-order/with-notices/
• [ ] higher-order/with-spoken-messages/
• [ ] isolated-event-container
• [ ] keyboard-shortcuts
• [ ] menu-group
• [ ] menu-item
• [ ] menu-items-choice
• [ ] navigable-container
• [x] notice (#20545)
• [ ] query-controls
• [ ] responsive-wrapper
• [ ] sandbox
• [x] select-control (#20482)
• [ ] shortcut
• [x] slot-fill (#19242)
• [x] text-control (#20467)
• [x] textarea-control (#20472)
• [x] toolbar-button (#20974)
• [ ] toolbar-context
• [ ] toolbar-item
• [x] tree-select (#20496)

I plan on working through all of these components and add the missing stories, but if anyone is interested in helping out, please do! I will try to update this comment with PR Numbers as they get created and check them off as they get merged so it's easier to see where it is at.

[gziolo]

It looks like http://wordpress.github.io/storybook is no longer updated after merging changes to master. I filed https://github.com/WordPress/gutenberg/issues/21669.

[haszari]

Do you have plans to upgrade Gutenberg project to latest version of Storybook (6+)?

It looks like it has a new API, so might be some code churn updating – might need to tweak all existing stories, and update build/config too.

However Storybook 6 might provide some dev-experience benefits, so could be worthwhile. Specifically, args may automatically handle interactive UI for props (previously Knobs addon; now Controls in 6+). There are probably other benefits too, I'm still investigating.

In WooCommerce Blocks we're considering upgrading to 6. So if Gutenberg is sticking with 5, OR is likely to upgrade, we're keen to align and learn from your experience.

Here's some more info about the upgrade:

• https://storybook.js.org/docs/react/writing-stories/args
• https://storybook.js.org/docs/react/writing-stories/introduction#using-args
• https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5

[gziolo]

@haszari, we always want to have tooling in their most recent version. Did you manage to migrate WooCommerce Blocks to use v6?

[haszari]

we always want to have tooling in their most recent version.

❤️ 🚀 Indeed!

Did you manage to migrate WooCommerce Blocks to use v6?

Yes - see PRs for woo blocks and wc-admin:

• https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3039
• https://github.com/woocommerce/woocommerce-admin/pull/5105

We're now running Storybook 6.x, but we haven't adopted all new features yet. The 6.0 way of doing interactive props (args) seems powerful, but I couldn't get it working for our components. Tracking this in a blocks issue here: https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/3041

So with that in mind, I'd recommend upgrading to 6.x, and if it's not practical to switch to args, continue using knobs addon, or worst case manually hint args (though this is unfortunate, basically another proptypes declaration).