How to call child component stories from a parent Storybook story

You can call other stories from a Storybook story.

This is useful when rendering stories for parent child components.

For example let's say you have a child component with its story.

First import the child component story:

import * as MyChildComponentStories from '../MyChildComponent/MyChildComponent.stories';

From the parent component story you can do any of this two options to render the subcomponent

Render the child component from the parent component story:

const Template: ComponentStory<typeof MyParentComponent> = (args) => (
  <MyParentComponent {...args}>
    <MyChildComponentStories.Expanded {...MyChildComponentStories.Expanded.args} />
    <MyChildComponentStories.Collapsed {...MyChildComponentStories.Collapsed.args} />
  </MyParentComponent>
);

Use the children args from the parent story:

ParentDefault.args = {
  someProp: '123',
  children: <MyChildComponentStories.Collapsed {...MyChildComponentStories.Collapsed.args} />
};