Storybook #768
Storybook #768
Conversation
|
I'm going to park the bus on this and come back to it later. I've managed to do something where running in dev mode (i.e. There's no point merging this till it is close to being a drop-in solution for what playground does already so this will languish for a while. |
|
Turns out that was nothing to do with require.context faffing, but instead babel transforms. A small "fix" later and we're back in business |
package.json
Outdated
| @@ -82,6 +83,7 @@ | |||
| } | |||
| }, | |||
| "devDependencies": { | |||
| "@percy-io/percy-storybook": "^2.1.0", | |||
| "@percy/puppeteer": "^0.4.0", | |||
There was a problem hiding this comment.
Nope. I'm going to do the big nuking at the end when I'm happy I've not missed anything.
|
|
||
| ### Testing on mobile or a virtual machine | ||
|
|
||
| 1. Run `yarn dev:host` | ||
| 1. Run `yarn dev` |
There was a problem hiding this comment.
storybook binds on all IP addresses so we don't need a special command to run on a particular IP anymore
|
Just a couple small suggestions. This looks fantastic! |
|
@kaelig: "Is webpack verbosity avoidable" - I've updated to run in "quiet mode" which removes most of the progress noise. You still get the chunk info but at least it doesn't hose your entire scrollback now. |
There was a problem hiding this comment.
🎩 LGTM. I'll leave thorough review of the code to a web developer with more context.
My main feedback is there are a number of TODO comments in the code, and you mentioned a couple of things that needed fixing when we went over it during our pairing session. While I recognize those things don't need to be dealt with immediately, I would prefer issues were opened reflecting that work, vs. keeping it in your memory or documenting it in the code.
|
Should we squash the commits into a feature commit to keep the commit history clean? |
Yep I was intending to do that just before I merge on monday, after we push our release out. |
Ran with the same command (`yarn dev`) this contains all the functionality you know and love - hot reloading, a playground, percy snapshots just with a different veneer
WHY are these changes introduced?
We currently use the playground as a scratchpad and as a way of showcasing our existing components examples (as extracted from the component READMEs). The existing components pages are screenshot using Percy for regression testing and ran through pa11y for accessibility auditing.
Other teams within Shopify want to do similar things with their component libraries and are looking at using Storybook as the tool to do it.
Leveraging an existing tool and its plugin ecosystem feels preferable to making our own home-baked one from a maintenance and improvement perspective. Packaging any of our own custom functionality as storybook plugins that can then be consumed by other teams that would also find it useful also feels like an easier sell than making them use a bespoke thing.
WHAT is this pull request doing?
This PR introduces storybook as replacement to the playground. The dev features you know - a hot reloadable playground and examples extracted from the component READMEs are both present, along with support for percy screenshots (using percy's official storybook plugin) and pa11y integration.
How to 🎩
yarn run devto run storybook and click around the examples