@serenis / ui

Serenis设计系统的主UI组件库。提供可重用的React组件，包括故事书文档、设计令牌集成和可访问性支持。组件的样式与CSS模块和 @serenis/design-tokens.

安装

npm install @serenis/ui

快速启动

# Build
yarn workspace @serenis/ui build

# Dev (watch mode)
yarn workspace @serenis/ui dev

# Test
yarn workspace @serenis/ui test

# Typecheck
yarn workspace @serenis/ui typecheck

# Lint
yarn workspace @serenis/ui lint
yarn workspace @serenis/ui lint:css

当从npm中使用已发布的包时，只需加载一次组件CSS模块 import '@serenis/ui/css'。这是单船 dist/index.css 用于所有css模块组件。Monorepo应用程序解决 @serenis/ui To source不能导入它（应用捆绑器处理） *.module.css）. 每个组件的CSS加载可能会在以后取代它。

import '@serenis/ui/css'

import { cx } from '@serenis/design-tokens'
import { Button, Card } from '@serenis/ui'
;<Card>
  <div className={cx('flex', 'flex-col', 'gap-sm')}>
    <h2 className={cx('typography-h2')}>Session details</h2>
    <p className={cx('typography-paragraph', 'text-neutral-80')}>Your next session is scheduled for tomorrow.</p>
    <Button kind="primary">Confirm</Button>
  </div>
</Card>

目录结构

libraries/ui/
├── src/
│   ├── {ComponentName}/
│   │   ├── index.tsx               # Main component (or {ComponentName}.tsx)
│   │   ├── index.test.tsx          # Tests
│   │   ├── Playground.stories.tsx  # Primary Storybook story
│   │   ├── Overview.mdx            # Component documentation
│   │   └── types.ts                # Type definitions (if complex)
│   ├── Form/                       # Composite form module
│   │   ├── TextField/
│   │   ├── TextAreaField/
│   │   ├── SelectField/
│   │   ├── PasswordField/
│   │   ├── PhoneNumberField/
│   │   ├── PinCodeField/
│   │   ├── Autocomplete/
│   │   ├── MultiSelect/
│   │   ├── Checkbox/
│   │   ├── CheckboxButton/
│   │   ├── Radio/
│   │   ├── RadioButton/
│   │   ├── SliderField/
│   │   ├── Switch/
│   │   ├── SwitchField/
│   │   ├── FileUploadField/
│   │   ├── internal/               # Shared internal chrome and styles
│   ├── utils/                      # Shared utilities (shouldForwardProp)
│   └── index.ts                    # Public API barrel
├── dist/                           # Built output (gitignored)
├── tsup.config.ts                  # Bundle config
└── package.json

组件目录

类别匹配故事书(*.stories.tsx / Overview.mdx <Meta title>): 一般， 数据显示， 反馈， 形式， 导航， 布局.

一般

数据显示

反馈

形式

该桶还输出低级原语(TextInput， TextArea， Select， Checkbox， Radio， Switch， Hint， Label)用于高级使用-首选产品代码中下面的字段组件。

导航

布局

依赖关系

样式约定

• CSS模块：每个组件在一个colocation中拥有自己的样式 index.module.css;组件源中没有实用程序类。看到 文档/代理/ styling.md.
• 设计令牌 对于所有视觉值-永远不要硬编码十六进制颜色，像素大小或字体值。

文档

• 故事书每个组件都有一个 Playground.stories.tsx 和一个 Overview.mdx 它的来源在 libraries/ui/src/{ComponentName}/
• Overview.mdx：包含道具、模式、做/不做和已知异常的全面文档
• AGENTS.md：面向代理的API参考-参见 AGENTS.md

消费者

• 应用程序： apps/web (初级) apps/blog， apps/nutrition-blog， apps/website， apps/design-system (故事书主机)
• 库： libraries/shared-components （@serenis/shared-components)， libraries/ui-deprecated （遗产-首选） @serenis/ui）

构建

捆绑与 tsup 转化为ESM + CJS + TypeScript声明。工作空间依赖是外部化的。

许可证

PolyForm非商业1.0.0 -参见 许可证 查看全文。