React 组件库设计系统

项目介绍

这是一套从零构建的企业级 React 组件库，旨在为团队提供统一的设计语言和开发规范。组件库注重可访问性、可定制性和开发体验。

设计原则

1. 可访问性优先

所有组件遵循 WCAG 2.1 AA 标准：

• 键盘导航支持
• ARIA 标签完整
• 屏幕阅读器友好
• 对比度符合标准

2. 可定制化

采用 Design Token 架构，支持主题切换：

// 主题配置
const lightTheme: Theme = {
  colors: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    background: '#ffffff',
    text: '#1f2937',
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
};

3. 类型安全

100% TypeScript 编写，提供完整的类型定义：

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  disabled?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  fullWidth?: boolean;
}

组件展示

Button 组件

支持多种变体和尺寸：

<Button variant="primary" size="md">
  Primary
</Button>

<Button variant="outline" size="md" leftIcon={<SaveIcon />}>
  Save Changes
</Button>

<Button variant="ghost" loading>
  Loading...
</Button>

Form 组件

完整的表单解决方案：

<Form onSubmit={handleSubmit}>
  <FormField
    label="Email"
    error={errors.email?.message}
  >
    <Input
      {...register('email')}
      type="email"
      placeholder="Enter your email"
    />
  </FormField>

  <FormField
    label="Password"
    error={errors.password?.message}
  >
    <Input
      {...register('password')}
      type="password"
    />
  </FormField>

  <Button type="submit">Submit</Button>
</Form>

Modal 组件

支持多种配置：

<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Delete Confirmation"
  size="md"
  footer={
    <>
      <Button variant="outline" onClick={onClose}>
        Cancel
      </Button>
      <Button variant="danger" onClick={handleDelete}>
        Delete
      </Button>
    </>
  }
>
  <p>Are you sure you want to delete this item?</p>
</Modal>

技术栈

技术	用途
React 18	UI 框架
TypeScript	类型系统
Stitches	CSS-in-JS
Radix UI	无样式组件原语
Storybook	组件文档
Vitest	单元测试
Testing Library	组件测试

文档站点

使用 Storybook 构建交互式文档：

• 组件用法示例
• Props 文档
• 代码演示
• 设计规范说明

贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支
3. 编写组件和测试
4. 更新文档
5. 提交 Pull Request