Standard Template for Component Stories

[nathanstilwell]

Our storybook efforts have been very adhoc up until now. In the prototyping work that's been done so far some patterns have emerged. At a minimum I think there should be two sub-views to each component story.

Example

The Example view should document a components features (props, states, interactions, etc). Here are some example examples 😄 ,

---

---

Here I took the simple approach of a basic description and demonstrating the possible states for each prop.

Questions

• Should we have example usage for a component? Such as displaying it in context?
• Should we provide guidelines for when to use the component and when to use a different component?
• What else are we missing?

Demo

The Demo view should provide an interactive place to allow contributors, implementers, and designers to experiment with different states of a component. This could be to test multiple props at once, determine capabilities to see if this component is well suited to a task, or to determine correctness of a component.

Questions

• I rolled these by hand in prototyping, is there a way to automate creating these?
• Would this be useful in automated testing somehow?
• I used the Knobs plugin here but are there better tools out there?
• What else?

Others?

Are there other standard views that would be essential to have in our stories? I thought using something like the README plugin would be quite nice for providing more technical documentation about prop types and usage. I'm sure there's more that I'm missing.