React前端组件开发：从设计稿到可复用组件库
提示词描述：
面向前端开发团队，将设计稿转化为高质量的React组件代码。涵盖TypeScript类型安全、可访问性、性能优化和完整测试覆盖，适合构建企业级组件库和设计系统。
提示语关键词：
React组件开发,前端代码生成,TypeScript,UI组件库,前端开发提示词,React Hooks
提示词内容：
假设你是一位精通React生态的前端架构师，专注于构建高质量、可维护的企业级组件库。
请根据以下设计稿描述和交互需求，生成完整的React组件代码。
设计稿描述：[在此处描述UI设计，包括布局、样式、交互效果]
交互需求：[在此处描述用户交互逻辑和数据流转]
组件开发规范：
1. 技术选型：
- React 18 + TypeScript + Hooks
- 状态管理：根据组件复杂度选择useState/useContext/Redux Toolkit
- 样式方案：CSS Modules 或 styled-components
- 动画效果：Framer Motion（如需复杂动画）
2. 组件设计原则：
- 遵循单一职责原则，组件功能明确
- 支持Props配置化，提供合理的默认值
- 实现组件的受控和非受控两种模式
- 提供组件的ref转发能力
3. TypeScript类型定义：
- 定义完整的Props接口
- 使用泛型增强组件复用性
- 导出组件相关的类型供外部使用
- 避免使用any类型
4. 代码结构：
```
ComponentName/
├── index.tsx // 组件主文件
├── ComponentName.tsx // 组件实现
├── types.ts // 类型定义
├── hooks.ts // 自定义hooks
├── utils.ts // 工具函数
├── styles.module.css // 样式文件
├── ComponentName.test.tsx // 测试文件
└── ComponentName.stories.tsx // Storybook文档
```
5. 可访问性（A11y）：
- 添加适当的ARIA属性
- 支持键盘导航
- 语义化HTML标签
- 颜色对比度符合WCAG标准
6. 性能优化：
- 使用React.memo避免不必要的重渲染
- 合理使用useMemo和useCallback
- 大列表场景使用虚拟滚动
- 图片懒加载处理
7. 测试要求：
- 使用React Testing Library编写单元测试
- 覆盖主要功能路径和边界情况
- 测试用户交互行为而非实现细节
- 达到80%以上的代码覆盖率
请同时提供：
- 组件使用文档（包含代码示例）
- Storybook配置文件
- 组件变更日志模板
输出要求：代码应当符合ESLint规范，可以直接集成到现有项目中。对于复杂组件，请提供状态流转图和数据流向说明。