React Component Generator

Create a production-ready React component for a {{component_name}}.

Component Description

{{description}}

Technical Requirements

• Framework: React 18+ with TypeScript
• Styling: {{styling_approach}}
• State Management: React hooks (useState, useReducer if complex)

Deliverables

1. Component Interface

interface {{component_name}}Props {
  // Define all props with JSDoc comments
}

2. Component Implementation

Include:

• Proper TypeScript typing
• Destructured props with defaults
• Error boundaries consideration
• Loading states
• Empty states
• Error states
• Proper event handlers
• Accessibility (ARIA labels, keyboard nav, focus management)

3. Styling

{{styling_approach}} implementation:

• Responsive design (mobile-first)
• Dark mode support
• CSS custom properties for theming

4. Hooks (if needed)

Extract complex logic into custom hooks:

• useComponentName.ts

5. Tests

Basic test file with:

• Render test
• Props test
• User interaction test
• Accessibility test

6. Storybook Story (optional)

Default export with common variants

Code Quality Requirements

• No any types
• Descriptive variable names
• Small, focused functions
• Comments only for "why", not "what"
• Consistent formatting