设计系统-设计系统

在所有DevCar web应用中共享的内部React组件库。出版于 design-zystem npm包。

技术堆栈

设置

npm install
npx playwright install chromium   # required once for Storybook browser tests

脚本

npm run build           # tsup → dist/ (CJS + ESM + .d.ts)
npm run storybook       # Storybook dev server on :6006
npm test                # behavioral unit tests (jsdom)
npm publish             # build + publish to npm

故事书

npm run storybook 上启动本地开发服务器 :6006 与交互式文档和故事为所有35+组件。每个组件都有一个自动生成的 文档 页面（道具表+现场游乐场）和多个变体故事。

生成静态版本 npm run build-storybook (输出 storybook-static/)用于部署到托管服务-未提交到repo。

结构

src/
  index.tsx             # barrel export
  Components/           # one folder per component
    <Name>/
      <Name>.tsx        # component + exported interface <Name>Props
      <Name>.css
      <Name>.stories.tsx
  data/
    colors.ts           # color palette
    globalMethods.ts    # shared helpers
__tests__/              # behavioral tests (vitest + @testing-library/react)
dist/                   # generated — do not edit

组件

布局

Box · Col · Row · Grid · PageContainer · Divider · Bulk

版式与媒体

Text · Bubble · Link · Icon · Image

输入

Button · Input · Checkbox · Radio · Switch · Select · MultiSelect · DatePicker

导航

Tabs · IconTabs · Stepper · Options

覆盖

Modal · NewModal · ModalConfirmation · Drawer · Popover · Tooltip

数据

List · ListItem · Table · CardSkeleton

用法

import { Button, Input, Modal } from 'design-zystem'

发布新版本

1. 撞 version 在 package.json
2. npm publish ——触发器 prepublishOnly → npm run build 自动
3. 更新 design-zystem 版本 ClientOffice/package.json + DeliveryApp/package.json

相关项目