Storybook: Next steps for better experience when developing UI components

[gziolo]

Storybook was introduced in #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 (Framework: Add native storybook for components. #17829)
• Add stories for all @wordpress/components which contain examples in their README files
• Add knobs extension to allow dynamic modifications of props directly in Storybook (Storybook: Add stories for Checkbox control component #17891)
• Explore whether it's possible and makes sense to integrate the playground into the Storybook (Storybook: Try to integrate the playground into Storybook #18191)
• Investigate StoryShots addon which adds automatic Jest Snapshot Testing for Storybook (Storybook: Add StoryShots integration to generate unit tests #18031)
• Investigate options for visual testing (see Try: Visual regression test coverage for Cover block #28554)

Tweaks

• Include knobs integration to all existing stories
• 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 (Storybook: Apply a set of enhancements to the existing stories #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 #17973 (comment).

[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 #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
• custom-gradient-picker (Add the storybook story for the CustomGradientPicker component #21591)
• date-time (Storybook: Add DateTimePicker #22024)
• dimension-control
• disabled (Add storybook story for Disabled component #20514)
• drop-zone (Add storybook story for DropZone component #20596)
• dropdown-menu(Add storybook story for DropdownMenu component #21122)
• focal-point-picker
• focusable-iframe (Add storybook story for the FocusableIframe component #22324)
• form-file-upload
• form-toggle
• form-token-field
• gradient-picker (Add the storybook story for the GradientPicker component #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
• notice (Add storybook story for Notice component #20545)
• query-controls
• responsive-wrapper
• sandbox
• select-control (Add storybook story for the SelectControl component #20482)
• shortcut
• slot-fill (Components: Refactor SlotFill #19242)
• text-control (Add storybook story for text-control component #20467)
• textarea-control (Add storybook story for the TextAreaControl component #20472)
• toolbar-button (Add storybook story for the ToolbarButton component #20974)
• toolbar-context
• toolbar-item
• tree-select (Add TreeSelect component to Storybook #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 #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:

• upgrade Storybook to 6.0 woocommerce/woocommerce-blocks#3039
• Update Storybook to latest woocommerce/woocommerce-admin#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: woocommerce/woocommerce-blocks#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).

[gziolo]

@haszari I opened #27813 that upgrades Storybook to v6. I didn't look at the section wit best practices shared in https://storybook.js.org/blog/storybook-6-migration-guide/ yet :)

[haszari]

@gziolo Nice! We haven't managed to migrate to controls in woocommerce-blocks yet btw.

[gziolo]

@ItsJonQ and @saramarcondes, should we close this issue in favor of the tracking issue #28399 for the new Component System? It would be more beneficial to have good coverage for G2 components in the first place.

There are still some components that don't have stories written but we would have to refresh the list otherwise.

I also don't see any work to add Storybook integration for React Native. The question is whether it is something that the mobile team is interested to champion.

[ItsJonQ]

@gziolo I think we can probably close this up. Having Storybook in the project is valuable. However, it hasn't been clear how to best structure the stories. Some of the previous components also made it difficult to do so.

I have hope that the stories for the new components will do much better.

Re: React Native. It's not something I have a lot of experience in I'm afraid :(. I'm not familiar with the RN workflow other than using Expo - so I won't know how best to setup Storybook as part of the Gutenberg workflow for RN.