@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/descriptions/descriptions.meta.md

@@ -1,83 +0,0 @@
----
-id: descriptions
-name: Descriptions
-displayName: 描述列表
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Descriptions 描述列表
-
-描述列表 — antd 独有补足。**键值对详情**(资源详情 / 用户信息 / 配置预览),声明式 `items` 数组驱动,自动布局到等分列。
-
-## When to use
-
-- 资源 / 用户 / 订单详情页的元信息块
-- 弹窗 / 抽屉里的当前状态展示
-- 静态配置预览(以读为主,无编辑)
-
-## When NOT to use
-
-- 可编辑表单 → `Form`
-- 表格(行 = 同质对象)→ `Table`
-- 富文本 → `Prose`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `title` | `React.ReactNode` | – | – | 顶部标题。 |
-| `items` | `DescriptionsItem[]` | – | ✓ | 字段列表。 |
-| `column` | `1 \| 2 \| 3 \| 4` | `3` | – | 列数(antd `column` 并集) — 等分。响应式可在容器侧加 className 处理。 |
-| `layout` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 布局方向。`horizontal`(默认):label 在左,value 在右;`vertical`:label 在上,value 在下。 |
-| `bordered` | `boolean` | `false` | – | 带边框(每项独立单元格)。 |
-| `size` | `'sm' \| 'md' \| 'default'` | `"default"` | – | 尺寸。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add descriptions` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-> `DescriptionsItem`:`{ label; value; span?: number }`(`span > 1` 让该项跨多列)。
-
-## AI 生成纪律
-
-- **`column` 与窗口宽度匹配**:窄屏 1~2 列,宽屏 3~4 列
-- **关键字段加 span**:重要内容跨 2 列让它更醒目
-- **`bordered={true}` 用于详情页 / Card 内**:有边框更清晰;`bordered={false}` 适合 Sheet / Drawer
-- **value 用 Text 子组件**:状态用 `<Badge>`,链接用 `<Link>`,**不要**纯字符串硬塞颜色
-- **不要超过 12 项**:多了认知负担;> 12 项考虑分组(多个 `Descriptions` 配 Title)
-
-## Examples
-
-```tsx
-import { Descriptions } from '@/components/ui/descriptions';
-import { Badge } from '@/components/ui/badge';
-
-<Descriptions
-  title="项目信息"
-  bordered
-  items={[
-    { label: '项目名', value: '运营后台' },
-    { label: '状态', value: <Badge variant="success">运行中</Badge> },
-    { label: '所有者', value: 'lyca' },
-    { label: '创建时间', value: '2024-12-01' },
-    { label: '描述', value: '中后台运营管理系统', span: 3 },
-  ]}
-/>;
-```

package/src/components/descriptions/descriptions.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Descriptions } from './descriptions';
-import { Badge } from '@/components/badge/badge';
-
-const meta: Meta<typeof Descriptions> = {
-  title: '数据展示 · Data Display/Descriptions',
-  component: Descriptions,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '描述列表 — 键值对详情（资源详情 / 用户信息 / 配置预览）。声明式 items 数组驱动，自动布局，支持横/纵布局、bordered、span 跨列。等价 antd Descriptions。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Descriptions>;
-
-const items = [
-  { label: '项目名', value: '运营后台' },
-  { label: '状态', value: <Badge variant="success">运行中</Badge> },
-  { label: '所有者', value: 'lyca' },
-  { label: '创建时间', value: '2024-12-01' },
-  { label: '更新时间', value: '2026-05-15' },
-  { label: '描述', value: '中后台运营管理系统,服务于内部产品团队', span: 3 },
-];
-
-export const Bordered: Story = {
-  render: () => (
-    <div className="w-[720px]">
-      <Descriptions title="项目信息" items={items} bordered />
-    </div>
-  ),
-};
-
-export const Plain: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-[720px]">
-      <Descriptions title="项目信息" items={items} />
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-[720px]">
-      <Descriptions
-        title="项目信息(垂直布局)"
-        items={items}
-        layout="vertical"
-        bordered
-      />
-    </div>
-  ),
-};

package/src/components/descriptions/descriptions.tsx

@@ -1,137 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-
-export interface DescriptionsItem {
-  /** 字段标签。 */
-  label: React.ReactNode;
-  /** 字段值。 */
-  value: React.ReactNode;
-  /** 跨列数(默认 1)。 */
-  span?: number;
-}
-
-export interface DescriptionsProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** 顶部标题。 */
-  title?: React.ReactNode;
-  /** 字段列表。 */
-  items: DescriptionsItem[];
-  /**
-   * 列数(antd `column` 并集) — 等分。响应式可在容器侧加 className 处理。
-   * @default 3
-   */
-  column?: 1 | 2 | 3 | 4;
-  /**
-   * 布局方向。`horizontal`(默认):label 在左,value 在右;`vertical`:label 在上,value 在下。
-   * @default "horizontal"
-   */
-  layout?: 'horizontal' | 'vertical';
-  /**
-   * 带边框(每项独立单元格)。
-   * @default false
-   */
-  bordered?: boolean;
-  /**
-   * 尺寸。
-   * @default "default"
-   */
-  size?: 'sm' | 'md' | 'default';
-}
-
-const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
-  (
-    {
-      title,
-      items,
-      column = 3,
-      layout = 'horizontal',
-      bordered = false,
-      size = 'md',
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          bordered && 'overflow-hidden rounded-md border border-border',
-          className,
-        )}
-        {...props}
-      >
-        {title ? (
-          <div
-            className={cn(
-              'font-semibold',
-              bordered
-                ? 'border-b border-b-border bg-muted/50 px-4 py-2 text-xs'
-                : 'mb-3 text-base',
-            )}
-          >
-            {title}
-          </div>
-        ) : null}
-        <div
-          className={cn(
-            'grid',
-            {
-              1: 'grid-cols-1',
-              2: 'grid-cols-2',
-              3: 'grid-cols-3',
-              4: 'grid-cols-4',
-            }[column],
-            bordered
-              ? 'divide-x divide-y divide-border'
-              : 'gap-x-6 gap-y-3 p-0',
-          )}
-        >
-          {items.map((it, i) => (
-            <div
-              key={i}
-              style={{
-                gridColumn:
-                  it.span && it.span > 1 ? `span ${it.span}` : undefined,
-              }}
-              className={cn(
-                bordered
-                  ? layout === 'horizontal'
-                    ? 'flex divide-x divide-border'
-                    : 'flex flex-col'
-                  : layout === 'horizontal'
-                  ? 'flex gap-3'
-                  : 'flex flex-col gap-1',
-              )}
-            >
-              <div
-                className={cn(
-                  'shrink-0 text-xs text-muted-foreground',
-                  bordered &&
-                    (layout === 'horizontal'
-                      ? 'w-32 bg-muted/30 px-3 py-2'
-                      : 'border-b border-b-border bg-muted/30 px-3 py-2'),
-                  !bordered && layout === 'horizontal' && 'min-w-24',
-                )}
-              >
-                {it.label}
-              </div>
-              <div
-                className={cn(
-                  'text-xs',
-                  bordered ? 'flex-1 px-3 py-2' : 'flex-1',
-                )}
-              >
-                {it.value}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-);
-Descriptions.displayName = 'Descriptions';
-
-export { Descriptions };

package/src/components/dialog/dialog.meta.md

@@ -1,168 +0,0 @@
----
-id: dialog
-name: Dialog
-displayName: 对话框
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Dialog 对话框
-
-模态对话框 — Radix Dialog + antd Modal 并集。**组合式 API**(shadcn 风格,非 antd 的 props 配置式),通过 `DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription` 子组件灵活组装内容。视觉上**圆角 16px**(`--radius-dialog`)、**无 border**(纯白 + shadow 分界)、内置 X 关闭按钮在标题区右侧、`size` 四档绑定 `--layout-dialog-{sm|md|lg|xl}`。
-
-> antd 用户对照:`title` → `<DialogTitle>`,`children` → `<DialogContent>`,`footer` → `<DialogFooter>`,`onOk/onCancel` → 自行接 `<DialogClose>` 与回调;`width` → `size` 或 `className` 自定义 `max-w-[...]`。
-
-## When to use
-
-- 需要用户确认或输入的阻断式交互(表单提交、详情展示)
-- 多步骤向导(Step / 表单分步)
-- 复杂内容(无法用 Popover 装下)
-
-## When NOT to use
-
-- 危险确认 → `AlertDialog`(语义更强,无关闭按钮)
-- 侧边滑出 → `Sheet`
-- 移动端底部弹出 → `Drawer`
-- 短暂提示 → `Sonner`(toast)
-- 行内编辑 → `Popover`
-
-## Size 档位(token 绑定)
-
-| size | token                | OpenTrek 基准 | 典型场景                             |
-| ---- | -------------------- | ------------- | ------------------------------------ |
-| `sm` | `--layout-dialog-sm` | 400px         | 确认 / 单字段输入 / 简短表单         |
-| `md` | `--layout-dialog-md` | 600px         | **默认**,常规编辑表单 / 简单详情     |
-| `lg` | `--layout-dialog-lg` | 800px         | 复杂表单 / 多 tab / 富文本编辑       |
-| `xl` | `--layout-dialog-xl` | 1200px        | 数据预览 / 表格嵌入 / 设计画布等大图 |
-
-> 数值是 OpenTrek variant 的基准;其他 variant(如 uni-manager)按自己的 tokens 给值,组件不变。
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `DialogContent` 的 props;`Dialog`(Root)透传 Radix `open / defaultOpen / onOpenChange / modal`。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `showClose` | `boolean` | `true` | – | 是否在标题区右侧显示默认关闭按钮(antd Modal 默认行为)。 |
-| `size` | `DialogSize` | `"md"` | – | 对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm\|md\|lg\|xl}`。 OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add dialog` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-dialog@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0 react-dom@>=18
-```
-<!-- auto:deps:end -->
-
-> 子组件:`Dialog`(Root)/ `DialogTrigger` / `DialogContent` / `DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription` / `DialogClose` / `DialogOverlay` / `DialogPortal`。
-
-## AI 生成纪律
-
-- **`DialogTitle` 必有**:无障碍要求(屏幕阅读器朗读),即使视觉上不显示也要 `<VisuallyHidden>` 包一层
-- **`DialogDescription` 推荐有**:不强制但能显著改善可达性
-- **不嵌套 Dialog**:嵌套对话框是反模式 — 一次只展示一个,用步骤导航替代
-- **`onOpenChange` 关闭后清表单**:用户可能 ESC 关闭,需要清理状态
-- **Footer 主操作右对齐**:遵循 design `principles.md` P3 Predictability(主操作位置一致)
-- **危险动作单独走 `AlertDialog`**:Dialog 不强制二次确认,destructive 场景必须切换组件
-- **`size` 选择**:不要为了"显得大气"一律 `lg`/`xl` — 信息密度匹配档位,过宽内容反而难读;表单场景默认 `md` 即可
-- **不要硬编码圆角 / 宽度**:圆角已绑定 `--radius-dialog`,不要在 `className` 里覆盖 `rounded-*`;宽度优先用 `size`,只有需要锁绝对像素时才用 `className="max-w-[var(--xxx)]"` 形式继续走 tokens
-- **不要画外边框**:`DialogContent` 已 `border-0`,设计上靠 shadow 与背景对比分界,加 `border` 会破坏 OpenTrek 视觉(P3 一致性)
-
-## Examples
-
-```tsx
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-
-// 基础(默认 md = 600px)
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">编辑</Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>编辑资料</DialogTitle>
-      <DialogDescription>保存后立即生效。</DialogDescription>
-    </DialogHeader>
-    {/* form fields */}
-    <DialogFooter>
-      <DialogClose asChild>
-        <Button variant="outline">取消</Button>
-      </DialogClose>
-      <Button>保存</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-
-// 大尺寸 + 受控
-const [open, setOpen] = React.useState(false);
-<Dialog open={open} onOpenChange={setOpen}>
-  <DialogContent size="xl">{/* ... */}</DialogContent>
-</Dialog>;
-
-// 隐藏 X 关闭(强制用户走 Footer 按钮)
-<DialogContent showClose={false}>...</DialogContent>;
-```
-
----
-
-## Dialog 形态 — 旧库 API → 新映射
-
-> 旧库 `Dialog`(hybridcloud,含 Dialog.show / Dialog.confirm / Dialog.alert) → 新库 `Dialog`(声明式组合) + `AlertDialog`(确认弹窗)。
-> 新库基于 Radix Dialog Primitive,组合式子组件架构(非配置式 prop)。
-
-### 命名 & 结构映射
-
-| 旧库                                  | 新库                                 | 说明                         |
-| ------------------------------------- | ------------------------------------ | ---------------------------- |
-| `Dialog`                              | `Dialog` + 子组件                    | 组合式(非 props 配置式)      |
-| `Dialog.confirm()` / `Dialog.alert()` | `AlertDialog`                        | 声明式替代命令式             |
-| `Dialog.show()`                       | _(未来 P1: useConfirm hook)_         | MVP 用声明式 + useState 控制 |
-| `visible`                             | `open`                               | 受控状态                     |
-| `onClose`                             | `onOpenChange`                       | 开关回调                     |
-| `title` (prop)                        | `<DialogTitle>`                      | 子组件组合                   |
-| `footer` (prop)                       | `<DialogFooter>`                     | 子组件组合                   |
-| `size: mini/small/medium/large`       | `size: 'sm' \| 'md' \| 'lg' \| 'xl'` | token 驱动宽度               |
-| `closeable / closeMode`               | `showClose` + Radix 内建 Esc/点击外  | 简化                         |
-| 快捷类型 error/success/warning        | _(未来 P2: ConfirmDialog preset)_    | MVP 自行组合 icon + 文案     |
-| `cache` (保留 DOM)                    | Radix `forceMount`                   | 已支持                       |
-| `hasMask`                             | 不复刻                               | 始终有 overlay(无障碍)       |
-| `locale`                              | 不复刻                               | 开发者直接写按钮文案         |
-| `v2/align/minMargin/isFullScreen`     | 不复刻                               | 旧 v1 遗留                   |
-
-### 迁移 FAQ
-
-| 问题                            | 回答                                                                                        |
-| ------------------------------- | ------------------------------------------------------------------------------------------- |
-| 命令式 Dialog.confirm 怎么替代? | 用 `<AlertDialog>` 声明式 + `open` 受控;或等 P1 useConfirm hook                             |
-| footer 怎么写?                  | `<DialogFooter><Button variant="outline">取消</Button><Button>确定</Button></DialogFooter>` |
-| 怎么阻止点击外部关闭?           | 用 `<AlertDialog>` 而非 `<Dialog>`;或设 `onInteractOutside={(e) => e.preventDefault()}`     |
-| size 对应宽度?                  | sm=400px, md=600px, lg=800px, xl=1000px(token 变量控制)                                     |