Component Composition

Composing components in stories

You can compose multiple components together in a story to test how they interact. This is especially useful for testing parent-child relationships and data flow.

Composing a list component

Here's how to test a List component with Item children.

import { List, ListItem } from './List';

export default {
  component: List,
  title: 'Components/List',
};

export const WithItems = () => (
  <List>
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </List>
);

export const Empty = () => <List />;
export const Loading = () => <List loading />;

Testing data flow

Stories allow you to test how components handle different data, callbacks, and state changes without running the full application.

Avoid over-composition

Keep composed stories simple and focused. If a story becomes too complex, break it into smaller components.