Page MenuHomePhabricator

Add Storybook for Dagit components
ClosedPublic

Authored by dish on Tue, Oct 6, 4:49 PM.

Details

Summary

Introduce Storybook so that we have a playground for component testing and iteration, add some TopNav examples.

Also modify TopNav to occupy a little less vertical space.

Test Plan

yarn storybook within dagit, verify that it renders nicely.

Run dagit, verify that top nav renders as expected.

Diff Detail

Repository
R1 dagster
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

dish requested review of this revision.Tue, Oct 6, 4:54 PM

This is great! I think this is also going to be especially useful for incrementally isolating components so that we can use them in different places such as docs. I'm curious to see how some of the more complex components that are heavily tied to GraphQL queries + types will be rendered in storybook.

This revision is now accepted and ready to land.Tue, Oct 6, 8:15 PM
js_modules/dagit/.storybook/preview.js
35–37

What does this do?

I'm curious to see how some of the more complex components that are heavily tied to GraphQL queries + types will be rendered in storybook.

At Stripe we used a mocked Apollo schema that could be used in Jest and our component explorer (which is being transitioned to Storybook). It returned overridable mock data, and allowed setting loading or error states. Super useful. I think it'd be cool to set something like that up here too.

js_modules/dagit/.storybook/preview.js
35–37

Ah, I didn't add this part, so I'm not sure. It's in the default for the config. (I added the rest.)

This revision was landed with ongoing or failed builds.Tue, Oct 6, 8:34 PM
This revision was automatically updated to reflect the committed changes.