Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Framework: Add Component Storybook. #17475
This PR adds Storybook support to the repo and uses it to create a storybook for
It also adds plugins for automatically running and displaying accessibility tests right besides stories, simulating color blindness, and changing the viewport size/device.
The PR also modifies the Travis config so that the storybook is deployed to GitHub Pages using the
This gave me the idea that maybe the GitHub Pages page should use a custom domain in
How has this been tested?
The new storybook was verified to work in development (
Passing a11y Tests
Failing a11y Tests
Color Blindness Simulator
There is also the playground.
I guess, all individual solutions makes sense but we should coordinate everything and bring them as close as possible so we don't have to maintain 6 completely independent apps with their own unique tooling and build steps. Do you have any thoughts on how this could be consolidated as much as possible?
Should we start with some sort of proposal which describes the role of every tool and how they can benefit workflows of different types of contributors?
Thanks, @epiqueras – storybook has improved since the last time I looked at it. The keyboard shortcuts are handy.
Is there a chance we can get as part of the netlify deploy? Not having to run it locally will be super useful. I thought twice before running it locally :)
The in-browser test also look like a useful tool.
On styles – the link uses the default browser styles, do you think it would make sense to put it in some WordPress style context?
How was the story format chosen? Both mdx and
And few additions that would be helpful, even if not in this PR:
This is a much simpler alternative approach. We should however, theme it so that it looks more like WordPress docs, but that can be a different PR.
Yeah, those are parallel things.
Yeah, Storybook can support React Native.
This is a very conservative start. I'm making no assumptions about any sort of decision beyond using Storybook for the component playground.
Yeah it looks like it reclaimed its throne in the UI playground space. They even support MDX docs now.
Yeah me too. I just added it.
I'm not sure. I added the Gutenberg styles, but if this will be potentially used outside of a WordPress context, maybe it's a sign we need to add more default styles?
MDX is for authoring freeform Docs with embedded stories like React Styleguidist. It can and should complement the playground.
The addon that does that is out of date, so it might be a bit involved, but another PR can take care of it.
I almost added the Knobs addon, but linking props to it is a very manual process and I want to be conservative about enforcing things on contributors. If we think it's worth it, we can add it.
Yeah, that's what MDX will be for.
Just took a look! @epiqueras thank you for putting this together! I think Storybook is a fantastic addition to the UI dev/design work flow (essential IMO).
@gziolo Re: documentation
@epiqueras shared this link with me:
If we're able to get this into Storybook, then it is able to accommodate the needs that the doc site (that I had proposed) attempted to address.
P.S. I'm a big fan of Storybook knobs :). The reason is because it allows folks to very quickly QA things in the browser. A great example is text values.
"What if this person has no first name?"
You can add these things via knobs, and see if/how the UI breaks
Folks can do this directly in the Netlify generated deploy preview within PRs.
I've gone ahead and added the new MDX doc features.
Every story file now gets a docs page automatically generated, but you can overwrite them with custom MDX files.
I've also added a stand-alone documentation page as an example.
I think this new "Docs" feature suite removes the need for most of the plugins talked about above. We can always add more later on PRs that actually make real use of them.
Here is more information on the new features:
Take a look at how pages are automatically generated, how MDX can be used to overwrite them, and how you can theme the docs and export them on their own.
@epiqueras Could you try to create stories for a component that has JSX?
I'm using your PR to create stories for
It's fixed if I add an empty
@diegohaz It was picking up the root babel config and that transforms JSX into calls to
https://wordpress.github.io/gutenberg/ is broken, not sure if this is related to this PR but we need ot investigate it.
See the section about the playground: