@repo/ui - UI 组件库

基于 shadcn/ui 的 React UI 组件库，包含表单、对话框、按钮等常用组件。

安装

Workspace 内使用

{
  "dependencies": {
    "@repo/ui": "workspace:*"
  }
}

从 npmjs 使用

{
  "dependencies": {
    "@dofe/sso-ui": "^0.1.0"
  }
}

包含的组件

| 组件 | 描述 | | ------------------ | ---------------------------- | | Button | 按钮（多种变体） | | Dialog | 对话框 | | Form | 表单（集成 react-hook-form） | | Input | 输入框 | | Select | 选择器 | | Table | 表格 | | Tabs | 标签页 | | Toast/Sonner | 消息提示 | | Command | 命令面板（cmdk） | | Calendar | 日历 | | Checkbox | 复选框 | | Switch | 开关 | | Avatar | 头像 | | Badge | 标签 | | Card | 卡片 | | DropdownMenu | 下拉菜单 | | Popover | 弹出框 | | Progress | 进度条 | | Separator | 分隔线 | | Skeleton | 骨架屏 | | Slider | 滑块 | | Tooltip | 提示 | | Accordion | 折叠面板 | | Alert | 警告框 | | Label | 标签 | | Textarea | 文本域 | | ScrollArea | 滚动区域 | | Sheet | 侧边抽屉 | | Sidebar | 侧边栏 | | Carousel | 轮播 | | PasswordStrength | 密码强度指示器 |

使用示例

Button

import { Button } from '@repo/ui/components/button';

<Button variant="default">默认按钮</Button>
<Button variant="destructive">删除按钮</Button>
<Button variant="outline">边框按钮</Button>
<Button variant="ghost">透明按钮</Button>

Dialog

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogTrigger,
} from '@repo/ui/components/dialog';

<Dialog>
  <DialogTrigger>打开</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>标题</DialogTitle>
      <DialogDescription>描述</DialogDescription>
    </DialogHeader>
    <p>内容</p>
  </DialogContent>
</Dialog>

Form

import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@repo/ui/components/form';
import { Input } from '@repo/ui/components/input';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

const form = useForm({
  resolver: zodResolver(schema),
});

<Form {...form}>
  <FormField name="email" render={({ field }) => (
    <FormItem>
      <FormLabel>邮箱</FormLabel>
      <FormControl><Input {...field} /></FormControl>
      <FormMessage />
    </FormItem>
  )} />
</Form>

CSS 样式导入

// 导入全局样式
import '@dofe/sso-ui/globals.css';

目录结构

src/
├── components/        # React 组件
│   ├── button.tsx
│   ├── dialog.tsx
│   ├── form.tsx
│   └── ...
├── hooks/             # 组件内部 hooks
│   └── use-mobile.ts
├── lib/               # 工具函数
│   └ utils.ts
├── styles/            # 样式文件
│   └ globals.css
└── index.ts           # 导出汇总

构建

pnpm --filter @repo/ui build

Storybook

pnpm --filter @repo/ui storybook

NPM 发布流程

发布说明

本包在 workspace 内使用名称 @repo/ui，发布到 npmjs 时使用名称 @dofe/sso-ui。

发布脚本会自动处理名称转换：

• prepack - 发布前将名称改为 @dofe/sso-ui，移除 workspace 依赖
• postpack - 发布后恢复为 @repo/ui，恢复 workspace 依赖

发布命令

从根目录发布（推荐）

# 在 sso.dofe.ai 根目录执行

# 发布单个包
pnpm release:ui              # 发布 @dofe/sso-ui
pnpm release:ui:otp          # 带 OTP 发布

# 批量发布所有包
pnpm release:all             # 发布 contracts、hooks、ui
pnpm release:all:otp         # 带 OTP 批量发布

从包目录发布

# 进入 ui 目录
cd sso.dofe.ai/packages/ui

# 手动发布流程
pnpm build
node scripts/prepack.mjs
npm publish --access public --ignore-scripts --otp=<你的OTP码>
node scripts/postpack.mjs

从根目录发布流程详解

pnpm release:ui:otp

执行步骤：

1. 进入 packages/ui 目录
2. 运行 prepack 修改 package.json（名称、移除 workspace 依赖）
3. 执行 npm publish --access public --ignore-scripts --otp
4. 运行 postpack 恢复 package.json 原始状态

前置条件

1. npm 账户登录：

   npm login

2. 验证登录状态：

   npm whoami

3. 确保有 @dofe organization 的发布权限

Peer Dependencies

使用此包的项目需要安装以下依赖：

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

导出路径

| 导出路径 | 内容 | | ----------------------------- | -------------- | | @dofe/sso-ui | 所有组件 | | @dofe/sso-ui/globals.css | 全局样式 | | @dofe/sso-ui/postcss.config | PostCSS 配置 | | @dofe/sso-ui/components/* | 单个组件 | | @dofe/sso-ui/lib/* | 工具函数 | | @dofe/sso-ui/hooks/* | 组件内部 hooks |

常见问题

发布失败 "Cannot resolve @repo/utils"

确保运行了 prepack 脚本，它会移除 workspace 依赖。

本地安装失败 "Cannot resolve @repo/ui"

这是因为 workspace 依赖问题。确保在 sso.dofe.ai 项目根目录运行 pnpm install。