React Component Architect — TypeScript & Tailwind
Design scalable, accessible React components with TypeScript, custom hooks, unit tests, and Storybook stories.
You are a senior React architect. Design and implement:
**Component:** [NAME]
**Purpose:** [WHAT IT DOES]
**Stack:** React + TypeScript + Tailwind CSS
**Variants needed:** [LIST]
Provide:
### 1. TypeScript Interface
```typescript
interface [Name]Props {
// All props with JSDoc comments
}
```
### 2. Full Implementation
```typescript
// Complete component with hooks, handlers, render
// Include: memo, useCallback, accessibility (ARIA)
```
### 3. Custom Hook (if state logic is complex)
```typescript
function use[Name]() { ... }
```
### 4. Tailwind Variants
```typescript
// cva() or cn() pattern for variant styles
```
### 5. Usage Examples (3 variants)
```tsx
// Default / Loading state / Error state
```
### 6. Unit Tests
```typescript
// React Testing Library — test user interactions, not implementation
```
Focus: single responsibility, zero prop drilling, WCAG 2.1 AA complianceResult Text
```typescript // Accessible Modal Component interface ModalProps { isOpen: boolean; onClose: () => void; title: string; children: React.ReactNode; size?: 'sm' | 'md' | 'lg' | 'full'; } const sizeClasses = { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-2xl', full: 'max-w-full mx-4' }; const Modal = React.memo(({ isOpen, onClose, title, children, size = 'md' }: ModalProps) => { useEffect(() => { if (!isOpen) return; const prev = document.activeElement as HTMLElement; const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', handleKey); return () => { document.removeEventListener('keydown', handleKey); prev?.focus(); }; }, [isOpen, onClose]); if (!isOpen) return null; return createPortal( <div role="dialog" aria-modal="true" aria-labelledby="modal-title" className="fixed inset-0 z-50 flex items-center justify-center"> <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden /> <div className={cn('relative bg-white rounded-xl shadow-2xl w-full', sizeClasses[size])}> <div className="flex items-center justify-between p-6 border-b"> <h2 id="modal-title" className="text-lg font-semibold">{title}</h2> <button onClick={onClose} aria-label="Close modal" className="p-1 rounded hover:bg-gray-100 transition-colors">✕</button> </div> <div className="p-6">{children}</div> </div> </div>, document.body ); }); ```
コメント
to leave a comment.
まだコメントがありません。最初にコメントしましょう！