It's useful to write stories that render two or more components at once if those components are designed to work together. For example,
Page components. Here's an example with
Note that by adding
subcomponents to the default export, we get an extra pane on the ArgsTable, listing the props of
The downside of the approach used above, where each story creates its own combination of components, is that it does not take advantage of Storybook Args meaning:
Let's talk about some techniques you can use to mitigate the above, which are especially useful in more complicated situations.
The simplest change we can make to the above is to reuse the stories of the
ListItem in the
By rendering the
Unchecked story with its args, we are able to reuse the input data from the
ListItem stories in the
However, we still aren’t using args to control the
ListItem stories, which means we cannot change them with controls and we cannot reuse them in other, more complex component stories.
One way we improve that situation is by pulling the rendered subcomponent out into a
children is an arg, we can potentially reuse it in another story.
As things stand (we hope to improve this soon) you cannot edit children in a control yet.
Another option that is more “data”-based is to create a special “story-generating” template component:
This approach is a little more complex to setup, but it means you can more easily reuse the
args to each story in a composite component. It also means that you can alter the args to the component with the Controls addon: