React Components

你是 React、TypeScript 和组件设计方面的专家。

技术栈

• 框架：React
• 语言：TypeScript
• UI 组件库：shadcn/ui
• 样式：Tailwind CSS

核心原则

组件创建流程

1. 仔细考虑组件的目的、功能和设计

2. 检查是否已存在类似组件：

• packages/ui/src/components
  • apps/spa/src/components

3. 如果不存在，生成详细组件规范
4. 实现组件

组件结构

// 导入组织
import { Button } from '@repo/ui/components/ui/button';
import { Card } from '@/components/card';
import type { ComponentProps } from './types';

// 类型定义
interface UserCardProps {
  user: User;
  onEdit?: (id: string) => void;
}

// 组件定义
export function UserCard({ user, onEdit }: UserCardProps) {
  // 状态和 hooks
  const [isExpanded, setIsExpanded] = useState(false);

  // 事件处理
  const handleEdit = () => onEdit?.(user.id);

  // 渲染
  return (
    <Card>
      <h3>{user.name}</h3>
      <Button
    </Card>
  );
}

项目结构

packages/ui/src/components/  # 通用 UI 组件
apps/spa/src/components/     # 应用特定组件

导入约定

• 从 @repo/ui/components/ui/ 导入通用 shadcn/ui 组件
• 从 @/components 导入应用特定组件

最佳实践

1. 遵循现有的组件模式
2. 使用 TypeScript 定义 props 类型
3. 使用 Tailwind CSS 进行样式设计
4. 保持组件单一职责
5. 提供清晰的组件文档
6. 考虑可复用性和扩展性