Storybook Story Generator

When to Use

• After building a new component that needs Storybook coverage
• When existing stories are incomplete or outdated
• During documentation sprints to fill Storybook gaps
• When onboarding a component library to Storybook for the first time

The Prompt

Generate Storybook stories (CSF 3 format) for this component.

Include these stories:
1. **Default** — The component with default props
2. **All Variants** — One story per visual variant (e.g., primary, secondary, outline)
3. **All Sizes** — One story per size option
4. **States** — Stories for: hover, focus, disabled, loading, error
5. **With Icons** — If the component supports icons, show leading and trailing
6. **Long Content** — Stress test with very long text
7. **Responsive** — Mobile and desktop viewport decorators
8. **Playground** — All args exposed for interactive testing

For each story:
- Use descriptive story names
- Add JSDoc comments explaining what the story demonstrates
- Include argTypes with proper controls (select, boolean, text)
- Add a parameters.docs.description for each story

Use this component code:
[paste your component code here]

Example Output

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
  argTypes: {
    variant: {
      control: "select",
      options: ["primary", "secondary", "ghost"],
      description: "Visual style of the button",
    },
    size: {
      control: "select",
      options: ["sm", "md", "lg"],
    },
    disabled: { control: "boolean" },
    loading: { control: "boolean" },
  },
  tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof Button>;

/** Default button with primary variant */
export const Default: Story = {
  args: { children: "Button", variant: "primary", size: "md" },
};

/** All visual variants side by side */
export const Variants: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "12px" }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  ),
};

/** Disabled state - no hover or click interaction */
export const Disabled: Story = {
  args: { children: "Disabled", disabled: true },
};

/** Loading state with spinner */
export const Loading: Story = {
  args: { children: "Saving...", loading: true },
};

/** Stress test with long content */
export const LongContent: Story = {
  args: {
    children: "This is a very long button label that should truncate or wrap",
  },
};