Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook: Next steps for better experience when developing UI components #17973

Closed
6 of 8 tasks
gziolo opened this issue Oct 16, 2019 · 12 comments
Closed
6 of 8 tasks

Storybook: Next steps for better experience when developing UI components #17973

gziolo opened this issue Oct 16, 2019 · 12 comments
Labels
Needs Decision Needs a decision to be actionable or relevant Storybook Storybook and its stories for components [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@gziolo
Copy link
Member

gziolo commented Oct 16, 2019

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

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)
@gziolo gziolo added [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. Storybook Storybook and its stories for components labels Oct 16, 2019
@ItsJonQ
Copy link

ItsJonQ commented Oct 16, 2019

@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
Copy link
Member Author

gziolo commented Oct 22, 2019

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
Copy link
Contributor

enejb commented Oct 23, 2019

Just added one for FormToggle Component #18085

@brentswisher
Copy link
Contributor

brentswisher commented Feb 25, 2020

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:

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
Copy link
Member Author

gziolo commented Apr 17, 2020

It looks like http://wordpress.github.io/storybook is no longer updated after merging changes to master. I filed #21669.

@gziolo gziolo added the [Status] In Progress Tracking issues with work in progress label May 15, 2020
@haszari
Copy link
Contributor

haszari commented Aug 20, 2020

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:

@gziolo
Copy link
Member Author

gziolo commented Oct 26, 2020

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

@haszari
Copy link
Contributor

haszari commented Oct 29, 2020

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:

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
Copy link
Member Author

gziolo commented Dec 18, 2020

@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
Copy link
Contributor

haszari commented Dec 19, 2020

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

@gziolo
Copy link
Member Author

gziolo commented Feb 2, 2021

@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.

@gziolo gziolo added Needs Decision Needs a decision to be actionable or relevant and removed [Status] In Progress Tracking issues with work in progress labels Feb 2, 2021
@ItsJonQ
Copy link

ItsJonQ commented Feb 9, 2021

@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.

@gziolo gziolo closed this as completed Feb 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Decision Needs a decision to be actionable or relevant Storybook Storybook and its stories for components [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
None yet
Development

No branches or pull requests

5 participants