AI导哈

React组件库

基于React、TypeScript和Tailwind CSS构建的全功能、可访问的组件库，适用于现代Web应用开发。

  • by guigonzalez
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 guigonzalez/design-system-mcp

使用说明

AfterDS 2.0 组件库

一个基于AfterDS 2.0设计系统的、功能齐全且易于访问的组件库，采用React、TypeScript和Tailwind CSS构建。

组件

  • 输入 - 具有多种状态和验证功能的文本输入
  • 按钮 - 具有多种变体和状态的按钮组件
  • 徽章 - 小型状态指示器，具有多种变体
  • 手风琴 - 带有平滑动画的可折叠内容部分
  • 警报 - 适用于不同情境的变体通知消息

特点/特性

输入组件

  • 多个州默认状态、悬停状态、聚焦状态、错误状态、成功状态和禁用状态
  • 柔性标签支持必填和可选字段指示器
  • 辅助文本显示辅助文本、错误消息或成功消息

按钮组件

  • 6个变体主要（Primary）、次要（Secondary）、大纲（Outline）、幽灵（Ghost）、链接（Link）和次要链接（Link Secondary）
  • 2个尺寸小号（sm）和中号（md）
  • 国家正常状态、悬停状态、聚焦状态、禁用状态和加载状态
  • 破坏模式红色设计表示具有破坏性的操作
  • 图标支持按钮文本前后的图标
  • 加载状态内置加载旋转指示器

徽章组件

  • 4种变体默认、次要、破坏性（或“危险”）和轮廓
  • 2 形状圆形（药丸形）和方形（略带圆角）
  • 国家正常状态、悬停状态和聚焦状态
  • 紧凑设计小型、轻便的状态指示器
  • 灵活内容支持文本、数字或图标

手风琴组件

  • 2种模式单选（仅一项开启）或多选（多项开启）
  • 流畅的动画动画展开/折叠过渡效果
  • 国家关闭、打开和悬停
  • 受控/不受控支持有控制和无控制的使用方式
  • 可访问的完整的键盘导航和ARIA支持
  • 灵活内容可以包含任何内容（文本、图像、表单等）

警报组件

  • 2 种变体“Default and Destructive” 翻译成中文是“默认且具有破坏性”
  • 灵活结构标题、描述或自定义内容
  • 图标默认图标或自定义图标支持
  • ARIA 支持为无障碍性设置正确的role="alert"
  • 响应式的适应不同屏幕尺寸

将军

  • 可访问的采用无障碍设计最佳实践构建
  • TypeScript全面支持TypeScript，提供完整的类型定义
  • Tailwind CSS使用Tailwind CSS设计，便于自定义
  • 故事书交互式组件文档和测试
  • Inter 字体使用Inter字体家族的专业排版

设计令牌（或设计变量）

该组件使用的是AfterDS 2.0设计令牌：

  • 颜色自定义色板，符合设计系统
  • **字体排印学（或简称“排版”）**具有定义字体大小和粗细的Inter字体系列
  • 间距一致的间距尺度（2, 2.5, 3, 4 等）
  • 边框半径定义的边框半径值（小、中、大）

安装

# Install dependencies
npm install

用法

输入组件

基本示例

import { Input } from './components/Input';

function MyForm() {
  const [email, setEmail] = useState('');

  return (
    <Input
      label="Email"
      placeholder="Enter your email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      helperText="We'll never share your email"
    />
  );
}

输入属性（或：传入属性）

属性 类型 默认值 描述
label string - 输入框的标签文本
isRequired boolean false 显示必填星号 (*)
isOptional boolean false 显示“（可选）”文本
helperText string - 输入框下方的帮助文本
error string - 错误信息（激活错误状态）
success string - 成功消息（激活成功状态）
variant 'default' | 'error' | 'success' 'default' 输入变体
fullWidth boolean false 全宽输入
disabled boolean false 禁用状态

所有标准的HTML输入属性也均受支持。

示例

必填字段

<Input
  label="Email"
  placeholder="Enter your email"
  isRequired
  helperText="This field is required"
/>

可选字段

<Input
  label="Phone Number"
  placeholder="Optional phone"
  isOptional
  helperText="For account recovery"
/>

错误状态

<Input
  label="Email"
  placeholder="user@example.com"
  error="Please enter a valid email address"
/>

成功状态

<Input
  label="Username"
  placeholder="Choose username"
  success="This username is available!"
/>

禁用状态

<Input
  label="Username"
  placeholder="Cannot edit"
  disabled
  helperText="This field is disabled"
/>

按钮组件

基本示例

import { Button } from './components/Button';

function MyApp() {
  return (
    <>
      <Button variant="primary" size="md">
        Click Me
      </Button>

      <Button variant="secondary" size="sm" isLoading>
        Loading...
      </Button>
    </>
  );
}

按钮属性（或按钮属性集）

属性 类型 默认值 描述
（翻译结果） ------ ------ ---------
按钮变体样式 size 'sm' | 'md' 'md'
按钮尺寸 destructive boolean false
具有破坏性的动作设计（红色） isLoading boolean false
使用旋转图标显示加载状态 iconBefore ReactNode
- 按钮文字前的图标 iconAfter ReactNode
- 按钮文字后的图标 fullWidth boolean
宽度为全屏的按钮 disabled boolean false

| 禁用状态 |

所有标准的HTML按钮属性也都被支持。

按钮示例

const PlusIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path d="M8 3.5V12.5M3.5 8H12.5" stroke="currentColor" strokeWidth="1.5"/>
  </svg>
);

<Button variant="primary" iconBefore={<PlusIcon />} iconAfter={<PlusIcon />}>
  Add Item
</Button>

带有图标

<Button variant="primary" destructive>
  Delete Account
</Button>

破坏性行动

<Button variant="secondary" isLoading>
  Processing...
</Button>

加载状态

<Button variant="link" size="md">
  Learn More
</Button>

链接按钮

徽章组件

import { Badge } from './components/Badge';

function MyApp() {
  return (
    <>
      <Badge variant="default">New</Badge>
      <Badge variant="secondary">Beta</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Draft</Badge>
    </>
  );
}

基本示例

徽章属性 | 属性 | 类型 | 默认值 | 描述 | |------|------|---------|-------------| variant | 'default' \| 'secondary' \| 'destructive' \| 'outline' | 'default' | | 徽章变体风格 | rounded | boolean | true |

| 完全圆角（药丸形）或轻微圆角 |

所有标准的HTML span属性也均受支持。

徽章示例

<Badge variant="default" rounded>Rounded</Badge>
<Badge variant="default" rounded={false}>Square</Badge>

圆角与方形

<Badge variant="default">Active</Badge>
<Badge variant="secondary">Pending</Badge>
<Badge variant="destructive">Failed</Badge>
<Badge variant="outline">Draft</Badge>

状态指示器

<Badge variant="default">1</Badge>
<Badge variant="secondary">12</Badge>
<Badge variant="destructive">99+</Badge>

带数字

<p>
  New feature <Badge variant="default">New</Badge>
</p>
<p>
  You have <Badge variant="destructive">3</Badge> errors
</p>

内联使用

手风琴组件

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/Accordion';

function FAQ() {
  return (
    <Accordion type="single">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>

      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that match the design system.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

基本示例

手风琴道具

手风琴（容器） | 属性 | 类型 | 默认值 | 描述 | |------|------|---------|-------------| type | 'single' \| 'multiple' | 'single' | | 允许打开一个或多个项目 | defaultValue | string \| string[] | | - | 默认打开的项目（未受控） | value | string \| string[] | | - | 受控未结事项 | onValueChange | (value) => void |

| - | 当项目更改时的回调函数 |

“AccordionItem”翻译成中文是“折叠面板项”或“手风琴面板项”，具体取决于上下文和设计习惯，但通常指的是在用户界面中用于展示可折叠/展开内容的组件或项目 | 属性 | 类型 | 默认值 | 描述 | |------|------|---------|-------------| value （翻译为中文可保持原样，因为表格标题通常不直接翻译，但为符合要求，可解释为：）|------|------|---------|-------------|（表格列标题，分别表示：）|------|（第一列）|------|（第二列）|---------|（第三列）|-------------|（第四列） string | | disabled | - | 此项的唯一值（必填） | boolean | false |

|

| 禁用该项目 |

<Accordion type="single">
  <AccordionItem value="item-1">
    <AccordionTrigger>Question 1</AccordionTrigger>
    <AccordionContent>Answer 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Question 2</AccordionTrigger>
    <AccordionContent>Answer 2</AccordionContent>
  </AccordionItem>
</Accordion>

手风琴示例

<Accordion type="multiple">
  <AccordionItem value="item-1">
    <AccordionTrigger>Question 1</AccordionTrigger>
    <AccordionContent>Answer 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Question 2</AccordionTrigger>
    <AccordionContent>Answer 2</AccordionContent>
  </AccordionItem>
</Accordion>

单模式（仅打开一个项目）

<Accordion type="single" defaultValue="item-1">
  {/* items... */}
</Accordion>

多重模式（多个项目打开）

const [value, setValue] = useState('item-1');

<Accordion type="single" value={value} onValueChange={setValue}>
  {/* items... */}
</Accordion>

带有默认未结项目

受控手风琴

import { Alert } from './components/Alert';

function MyApp() {
  return (
    <>
      <Alert
        variant="default"
        title="Heads up!"
        description="You can add components to your app using the cli."
      />

      <Alert
        variant="destructive"
        title="Error"
        description="Your session has expired. Please log in again."
      />
    </>
  );
}

警报组件

基本示例 警报属性 | 属性 | 类型 | 默认值 | 描述 | variant |------|------|---------|-------------| 'default' \| 'destructive' | 'default' | | title | 警告变体样式 | string | | description | - | 警报标题 | string | | icon | - | 警报描述/信息 | ReactNode |

|

| - | 自定义图标（未提供时使用默认图标） |

所有标准的HTML div属性也均受支持。

<Alert
  variant="default"
  title="Heads up!"
  description="You can add components to your app using the cli."
/>

警报示例

<Alert
  variant="destructive"
  title="Error"
  description="Your session has expired. Please log in again."
/>

默认警报

<Alert variant="default" title="Update Available" />

破坏性警报

<Alert
  variant="destructive"
  description="Something went wrong. Please try again."
/>

仅标题

<Alert
  variant="default"
  title="Custom"
  description="Alert with custom icon"
  icon={<CustomIcon />}
/>

仅描述

<Alert variant="default" title="Markdown Support">
  <p>You can use custom content:</p>
  <ul>
    <li>Bullet points</li>
    <li>Links and buttons</li>
  </ul>
</Alert>

自定义图标

带有自定义内容

  • 现场演示已部署的站点 主应用程序
  • **:**https://guigonzalez.github.io/design-system-mcp/ 翻译为中文是：“https://guigonzalez.github.io/设计系统-MCP/”（注：实际网址翻译中，网址本身通常保持不变，这里的翻译仅针对网址描述部分进行，即“design-system-mcp”被翻译为“设计系统-MCP”，但实际使用时网址仍应保持原样）。不过，更常见的做法是直接保留网址不变，仅在需要解释或说明时提供中文描述。因此，简化的表述可以是：“该网址为：https://guigonzalez.github.io/design-system-mcp/” 故事书

： main https://guigonzalez.github.io/design-system-mcp/storybook/（中文可表述为：https://guigonzalez.github.io/design-system-mcp/storybook/（该网址指向一个设计系统的故事书页面））

两个网站都会通过GitHub Actions在每次推送时自动部署

分支。

npm run dev

发展 运行开发服务器 开放

http://localhost:5173 翻译为中文是：“本地主机：5173 端口”。不过，在中文语境中，我们通常不会直接这样翻译网址，而是会说“访问本地开发服务器的5173端口”或者“在本地运行的开发服务器上，通过5173端口访问”。但简化的翻译就是“本地主机：5173”

npm run storybook

查看演示。 运行 Storybook 开放

http://localhost:6006 翻译为中文是：“本地主机上的6006端口”。不过，通常我们不会直接这样翻译网址，而是根据上下文或用途来解释或描述它。在这个例子中，网址表示的是在本地计算机上运行的一个服务或应用，可以通过本地主机（localhost）和端口6006来访问

npm run build

查看Storybook。

npm run build-storybook

构建

构建Storybook main 部署

  1. 这个项目通过GitHub Actions自动部署到GitHub Pages。每次向（仓库）推送更改时
  2. 分支触发一个部署工作流，该工作流：
  3. 构建主应用程序

构建Storybook 将两者都部署到GitHub Pages如需详细的部署文档，请参阅

docs/deployment.md 翻译为中文是：“文档/部署指南.md” 或者 “docs/部署说明.md”（具体翻译可能根据上下文略有调整，但基本意思是“关于部署的文档文件”）

src/
├── components/
│   ├── Input/
│   │   ├── Input.tsx          # Input component
│   │   ├── Input.stories.tsx  # Input Storybook stories
│   │   └── index.ts           # Exports
│   ├── Button/
│   │   ├── Button.tsx         # Button component
│   │   ├── Button.stories.tsx # Button Storybook stories
│   │   └── index.ts           # Exports
│   ├── Badge/
│   │   ├── Badge.tsx          # Badge component
│   │   ├── Badge.stories.tsx  # Badge Storybook stories
│   │   └── index.ts           # Exports
│   ├── Accordion/
│   │   ├── Accordion.tsx      # Accordion component
│   │   ├── Accordion.stories.tsx # Accordion Storybook stories
│   │   └── index.ts           # Exports
│   └── Alert/
│       ├── Alert.tsx          # Alert component
│       ├── Alert.stories.tsx  # Alert Storybook stories
│       └── index.ts           # Exports
├── index.css                  # Global styles & Tailwind
├── App.tsx                    # Demo app
└── main.tsx                   # Entry point

。

组件结构

定制化 tailwind.config.jsTailwind 配置

该组件使用了在（某处）定义的自定义 Tailwind 配置

colors: {
  background: '#fcfaf8',
  foreground: '#181818',
  primary: { DEFAULT: '#ef6c00', foreground: '#ffffff' },
  secondary: { DEFAULT: '#ffefd9', foreground: '#ef6c00' },
  muted: { DEFAULT: '#f5f5f5', foreground: '#353535' },
  destructive: { DEFAULT: '#dc2626', foreground: '#ffffff' },
  success: { DEFAULT: '#16a34a', foreground: '#ffffff' },
  accent: { DEFAULT: '#ffffff', foreground: '#181818' },
  input: '#353535',
  border: '#e7e5e4',
}

在那里，您可以自定义颜色、间距以及其他设计元素。

  • 颜色标记/颜色代币
  • 浏览器支持
  • Chrome（最新版）
  • Firefox（最新版）

Safari（最新版）

Edge（最新版）

相关 MCP