Back to docsRecipe

Recipe: Storybook story writer for a component

Generate a complete Storybook story file for any React component. Meridian inspects the component’s props, derives sensible argTypes, and writes a CSF 3 story with multiple variants.

Prompt

Write a Storybook 7+ CSF 3 story for the component
below. Infer argTypes from the TypeScript props.
Include Default, Loading, Empty, and Error states.
Use play functions for interactive stories where
appropriate. Export default metadata and named
exports for each story variant.

Context

Paste the full component source (TSX + props interface) into the context window. Meridian reads the prop types, default values, and any async data-fetching patterns to construct realistic mock data and argTypes with proper control mappings.

Output

  • CSF 3 story file with satisfied TypeScript strict mode
  • argTypes with control type, description, and table metadata
  • Decorator wrapping component in required providers
  • Play functions using userEvent and within for interaction tests
← All recipes