Storybook Stories Generator

Generate comprehensive Storybook stories for the following React component library:

Component Library Details

• Library Name: [e.g., DesignSystem, UIKit]
• Framework: React with TypeScript
• Storybook Version: 7.x or 8.x
• Styling: [Tailwind CSS / CSS Modules / styled-components / Emotion]

Components to Document

List 3-5 components to create stories for:

Component 1: [Component Name, e.g., Button]

• Description: [Brief description of what the component does]
• Props:
  • variant: ['primary' | 'secondary' | 'danger']
  • size: ['sm' | 'md' | 'lg']
  • disabled: boolean
  • onClick: function
  • children: ReactNode
• Key States: Default, hover, disabled, loading (if applicable)

Component 2: [Component Name, e.g., Input]

• Description: [Brief description]
• Props: [List all props with types]
• Key States: [List different states to show]

[Add more components as needed]

Story Requirements

For each component, generate stories with:

1. Basic Stories

• Create a story for each main variant
• Include proper TypeScript typing with Meta and StoryObj
• Add tags: ['autodocs'] for automatic documentation
• Configure argTypes for interactive controls (select, radio, boolean, text)

2. Interactive Controls

Set up argTypes for:

• Select dropdowns for enum props (variant, size, etc.)
• Radio buttons for 2-3 options
• Boolean toggles for flags
• Text inputs for string content
• Number inputs for numeric values

3. Action Handlers

• Import fn from '@storybook/test'
• Add action handlers for all event props (onClick, onChange, onSubmit, etc.)
• Log action calls in the Actions panel

4. Decorators

Create decorators for:

• Adding margin/padding around components
• Providing theme context
• Centering components in viewport
• Adding background colors for visibility

5. Play Functions (Interaction Tests)

For interactive components (forms, modals, etc.):

• Import userEvent, within from '@storybook/testing-library'
• Import expect from '@storybook/jest'
• Simulate user interactions (typing, clicking, selecting)
• Assert expected outcomes

6. Composition Stories

Create stories showing:

• All variants side-by-side
• All sizes compared
• Different states in a grid
• Common usage patterns

7. MDX Documentation (Optional)

For key components, include MDX documentation with:

• Component overview
• Canvas preview of primary story
• Props table with Controls
• Usage guidelines
• Code examples

File Structure

Generate files following this structure:

src/components/
├── Button/
│   ├── Button.tsx
│   ├── Button.stories.tsx
│   └── Button.mdx (optional)
├── Input/
│   ├── Input.tsx
│   └── Input.stories.tsx
└── .storybook/
    ├── main.ts
    └── preview.tsx (global decorators)

Code Quality Requirements

• Use TypeScript strict mode
• Follow Storybook 7+ CSF3 format (Component Story Format)
• Include proper imports for all Storybook utilities
• Use descriptive story names (e.g., Primary, WithIcon, DisabledState)
• Organize stories logically in the Storybook sidebar with title paths
• Add helpful descriptions in argTypes
• Include realistic default values

Additional Features

• Add global decorators in preview.tsx for consistent theming
• Configure viewport addon for responsive testing
• Set up accessibility (a11y) addon for all stories
• Include dark mode variants if applicable

Generate complete, production-ready Storybook story files that provide comprehensive documentation and testing coverage for the component library.