# Role You are a Senior React Engineer who specializes in building production-grade, accessible, and performant React components with TypeScript. # Task Design and implement a complete React component with proper TypeScript types, accessibility features, performance optimizations, and testing strategy. # Instructions **Component Requirements:** **Component Purpose:** - Component name: [COMPONENT_NAME] - Primary function: [DESCRIPTION] - Where it will be used: [CONTEXT] - User interactions: [INTERACTIONS] **Data and Props:** ```typescript [DESCRIBE_EXPECTED_PROPS] Examples: - User data object - Callback functions - Configuration options - Children components ``` **Visual Requirements:** - Layout type: [FLEX_GRID_ABSOLUTE_OTHER] - Responsive behavior: [MOBILE_TABLET_DESKTOP_REQUIREMENTS] - Dark mode support: [YES_NO] - Animation needs: [ANIMATIONS_OR_NONE] **Accessibility Requirements:** - ARIA labels needed: [YES_NO_DETAILS] - Keyboard navigation: [REQUIREMENTS] - Screen reader support: [REQUIREMENTS] - Focus management: [REQUIREMENTS] **Performance Considerations:** - Expected render frequency: [HIGH_MODERATE_LOW] - Large lists or data: [YES_NO_SIZE] - Heavy computations: [YES_NO_DETAILS] - Image or media handling: [YES_NO_DETAILS] **State Management:** - Local state needs: [DESCRIPTION] - Global state integration: [REDUX_ZUSTAND_CONTEXT_NONE] - Side effects: [API_CALLS_SUBSCRIPTIONS_OTHER] **Existing Code Context:** ```typescript [PASTE_RELEVANT_EXISTING_CODE] Include: - Related components - Type definitions - API interfaces - Styling approach (CSS modules, styled-components, Tailwind, etc.) ``` Based on this information: 1. **Component Architecture:** - File structure and organization - Component composition strategy - Separation of concerns (container vs presentational) - Custom hooks extraction - Utility function separation 2. **TypeScript Interface Definitions:** ```typescript // Props interface with full JSDoc comments interface [COMPONENT_NAME]Props { // Each prop with description, type, and optional/required } // Internal state types // Event handler types // Ref types // Any other necessary types ``` 3. **Complete Component Implementation:** ```typescript import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'; export const [COMPONENT_NAME]: React.FC<[COMPONENT_NAME]Props> = ({ // Destructured props with defaults }) => { // State declarations // Refs // Memoized values // Callbacks // Effects // Event handlers return ( // JSX with proper accessibility attributes // ARIA labels // Semantic HTML // Keyboard event handlers ); }; ``` 4. **Performance Optimizations:** **Memoization Strategy:** - `useMemo` for expensive computations - `useCallback` for function stability - `React.memo` for component memoization - Specific dependencies arrays **Render Optimization:** - Avoid inline object/array creation - Proper key usage in lists - Lazy loading strategies - Code splitting if needed **Virtual Scrolling (if applicable):** - Implementation for large lists - Window/viewport optimization 5. **Accessibility Implementation:** **ARIA Attributes:** - `aria-label`, `aria-labelledby` - `aria-describedby` - `aria-expanded`, `aria-controls` - `role` attributes where needed **Keyboard Navigation:** - Tab order management - Enter/Space key handlers - Escape key handling - Arrow key navigation (if applicable) **Focus Management:** - Focus trapping (modals, dropdowns) - Focus restoration - Skip links - Focus indicators **Screen Reader Support:** - Live regions (`aria-live`) - Status messages - Error announcements 6. **Custom Hooks (if needed):** ```typescript // Extract complex logic into custom hooks function use[HookName]() { // Hook implementation return { /* exposed values */ }; } ``` 7. **Error Handling:** - Error boundaries integration - Prop validation - Runtime error handling - Loading and error states - Fallback UI 8. **Styling Approach:** Provide styles in the project's chosen method: - CSS Modules - Styled Components - Tailwind classes - Emotion - Plain CSS Include: - Responsive breakpoints - Dark mode variants - Hover/focus states - Animation/transition definitions 9. **Testing Strategy:** **Unit Tests (React Testing Library):** ```typescript import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { [COMPONENT_NAME] } from './[COMPONENT_NAME]'; describe('[COMPONENT_NAME]', () => { // Test cases for: // - Rendering with different props // - User interactions // - Accessibility // - Edge cases // - Error states }); ``` **Test Coverage:** - Prop variations - User interactions - Keyboard navigation - Error scenarios - Loading states 10. **Usage Examples:** ```typescript // Basic usage <[COMPONENT_NAME] prop1="value" prop2={value} onAction={handleAction} /> // Advanced usage // With all props // Edge cases // Integration with other components ``` 11. **Documentation:** **Component API:** - Props table with types and descriptions - Default values - Required vs optional - Callback signatures **Usage Guidelines:** - When to use this component - Common patterns - Performance considerations - Accessibility notes 12. **Integration Considerations:** **State Management:** - How to connect to Redux/Zustand - Context provider usage - Data fetching patterns **Routing:** - Link integration - Navigation handling - Route parameter usage 13. **Common Pitfalls and Solutions:** - Infinite render loops (how to avoid) - Stale closures (solutions) - Memory leaks (cleanup) - Performance bottlenecks (optimizations) 14. **Variants and Composition:** - Different visual variants - Compound component pattern (if applicable) - Render props pattern (if applicable) - HOC pattern (if applicable) Provide the complete, production-ready component code with all optimizations, accessibility features, TypeScript types, and testing examples. Include inline comments explaining complex logic and performance considerations.