@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/tree-select/tree-select.tsx

@@ -1,206 +0,0 @@
-import * as React from 'react';
-import { ChevronDown, X } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { Button } from '@/components/button/button';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/popover/popover';
-import { Tree, type TreeNode } from '@/components/tree/tree';
-
-export interface TreeSelectProps {
-  /** 树形数据(antd `treeData` 并集)。 */
-  data: TreeNode[];
-  /**
-   * 多选模式 — 启用后下拉内的 Tree 变为 checkable;value 是 key 数组。
-   * @default false
-   */
-  multiple?: boolean;
-  /**
-   * 受控 value:
-   *   - `multiple=false`:`string`(单 key)/ `undefined`(未选)
-   *   - `multiple=true`:`string[]`
-   */
-  value?: string | string[];
-  /** uncontrolled 初值。 */
-  defaultValue?: string | string[];
-  /** value 变化回调。 */
-  onChange?: (value: string | string[]) => void;
-  /**
-   * 默认展开全部节点(antd `treeDefaultExpandAll` 并集)。
-   * @default false
-   */
-  defaultExpandAll?: boolean;
-  /** 占位文本。 @default "请选择" */
-  placeholder?: string;
-  /** 整体禁用。 */
-  disabled?: boolean;
-  /** 触发器 className。 */
-  className?: string;
-  /**
-   * 触发器尺寸。
-   * @default "default"
-   */
-  size?: 'sm' | 'md' | 'default' | 'lg';
-  /**
-   * 显示清除按钮(antd `allowClear` 并集) — 触发器有值时右侧出现 ✕,点击清空。
-   * @default false
-   */
-  allowClear?: boolean;
-}
-
-function flattenLabelMap(nodes: TreeNode[]): Map<string, React.ReactNode> {
-  const map = new Map<string, React.ReactNode>();
-  const walk = (n: TreeNode) => {
-    map.set(n.key, n.title);
-    n.children?.forEach(walk);
-  };
-  nodes.forEach(walk);
-  return map;
-}
-
-/**
- * 树形下拉选择 — antd 独有补足。**等价 antd `TreeSelect`**。
- * 把 `Tree` 嵌入 Popover,提供单选(selectable)或多选(checkable)两种模式 — 组织架构 / 分类树形选择常用。
- */
-const TreeSelect = React.forwardRef<HTMLButtonElement, TreeSelectProps>(
-  (
-    {
-      data,
-      multiple = false,
-      value,
-      defaultValue,
-      onChange,
-      defaultExpandAll = false,
-      placeholder = '请选择',
-      disabled = false,
-      className,
-      size = 'md',
-      allowClear = false,
-    },
-    ref,
-  ) => {
-    const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<string | string[]>(
-      defaultValue ?? (multiple ? [] : ''),
-    );
-    const current = isControlled ? value! : internal;
-
-    const [open, setOpen] = React.useState(false);
-
-    const labelMap = React.useMemo(() => flattenLabelMap(data), [data]);
-
-    const display = React.useMemo(() => {
-      if (multiple) {
-        const arr = (current as string[]) ?? [];
-        if (arr.length === 0) return '';
-        if (arr.length <= 3) return arr.map((k) => labelMap.get(k) ?? k);
-        return `已选 ${arr.length} 项`;
-      }
-      const k = current as string;
-      return k ? labelMap.get(k) : '';
-    }, [current, labelMap, multiple]);
-
-    const renderDisplay = () => {
-      if (!display) return placeholder;
-      if (Array.isArray(display)) {
-        return (
-          <span className="flex flex-wrap gap-1">
-            {display.map((d, i) => (
-              <span
-                key={i}
-                className="inline-flex items-center rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground"
-              >
-                {d}
-              </span>
-            ))}
-          </span>
-        );
-      }
-      return <span className="truncate">{display}</span>;
-    };
-
-    const hasValue = multiple
-      ? Array.isArray(current) && current.length > 0
-      : !!current;
-
-    const handleClear = (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const next = multiple ? [] : '';
-      if (!isControlled) setInternal(next);
-      onChange?.(next);
-    };
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            ref={ref}
-            type="button"
-            variant="outline"
-            size={size}
-            disabled={disabled}
-            className={cn(
-              'group/treeselect min-w-panel-sm justify-between font-normal',
-              !display && 'text-muted-foreground',
-              className,
-            )}
-          >
-            <span className="min-w-0 flex-1 text-left">{renderDisplay()}</span>
-            {allowClear && hasValue && !disabled ? (
-              <span
-                role="button"
-                tabIndex={-1}
-                aria-label="清除"
-                onClick={handleClear}
-                onMouseDown={(e) => e.stopPropagation()}
-                className="ml-2 hidden shrink-0 rounded-sm text-muted-foreground transition-colors hover:text-foreground group-hover/treeselect:inline-flex"
-              >
-                <X className="size-3.5" />
-              </span>
-            ) : null}
-            <ChevronDown
-              className={cn(
-                'ml-2 size-4 shrink-0 opacity-50',
-                allowClear && hasValue && 'group-hover/treeselect:hidden',
-              )}
-            />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-72 p-1" align="start">
-          {multiple ? (
-            <Tree
-              data={data}
-              checkable
-              selectable={false}
-              defaultExpandAll={defaultExpandAll}
-              checkedKeys={current as string[]}
-              onCheck={(next) => {
-                if (!isControlled) setInternal(next);
-                onChange?.(next);
-              }}
-            />
-          ) : (
-            <Tree
-              data={data}
-              defaultExpandAll={defaultExpandAll}
-              selectedKeys={current ? [current as string] : []}
-              onSelect={(next) => {
-                const v = next[0] ?? '';
-                if (!isControlled) setInternal(v);
-                onChange?.(v);
-                setOpen(false);
-              }}
-            />
-          )}
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-TreeSelect.displayName = 'TreeSelect';
-
-export { TreeSelect };

package/src/components/typography/typography.meta.md

@@ -1,149 +0,0 @@
----
-id: typography
-name: Typography
-displayName: 排版
-type: component
-category: general
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Typography 排版
-
-排版组件 — `Prose`(富文本容器)+ shadcn 风格 `Title / Paragraph / Text / Link` + antd `Text` 的 `strong / delete / disabled / code / ellipsis / copyable` 并集。语义色采用 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md) 统一 `color` API。
-
-> Prose 不依赖 `@tailwindcss/typography` 插件,样式手写并对齐 OpenTrek tokens。
-
-## When to use
-
-- **Prose**:Markdown / CMS 富文本渲染容器(自动套排版样式)
-- **Title**:页面 / 区块标题(`level={1..6}` 自动映射 `<h1>~<h6>`,对齐 antd `Typography.Title.level`)
-- **Paragraph**:正文段落(行高 / 字号 / 颜色统一)
-- **Text**:行内文本带语义色(`color`) / 强调 / 复制
-- **Link**:语义化链接(`color` + 默认下划线 hover)
-
-## When NOT to use
-
-- 富文本编辑(可编辑) → 用 Tiptap / Lexical 等编辑器
-- 单一颜色文本 → 直接 `<span className="text-...">`,无需包装
-- 多行 ellipsis(2 行 / 3 行) → 自行 `line-clamp-N`(本组件 ellipsis 仅单行)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成，数据源是 [`typography.tsx`](./typography.tsx) 的 `TextProps` interface JSDoc。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `color` | `TextColor` | `"default"` | – | 语义色 — 6 档枚举,字面与 OpenTrek tokens 对齐(见 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md))。 antd `type` 迁移:`secondary`→`muted`、`danger`→`destructive`。 |
-| `delete` | `boolean` | `false` | – | 删除线。 |
-| `disabled` | `boolean` | `false` | – | 不可用(灰色 + 不可选)。 |
-| `strong` | `boolean` | `false` | – | 加粗。 |
-| `code` | `boolean` | `false` | – | 行内代码样式(`code`)。 |
-| `ellipsis` | `boolean` | `false` | – | 单行省略(antd `ellipsis` 简化版 — 只支持 boolean,行数 / suffix 留 v0.x)。 |
-| `copyable` | `boolean \| { text: string; tooltips?: [string, string] }` | `false` | – | 可复制(antd `copyable` 并集)— 末尾追加复制图标按钮。 传对象时可指定要复制的文本(默认是 children 的纯文本);传 `true` 用 children。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成，数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add typography` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`Title level` 决定标签**:不要用 `<h2>` 配 `level={1}`,语义会冲突
-- **`Text color` 优先于 className 颜色**:语义色让暗色模式自动适配
-- **`copyable` 仅当 children 是 string**:富节点请显式传 `copyable={{ text: '...' }}`
-- **`ellipsis` 单行**:多行省略请直接 `className="line-clamp-2"`
-- **Prose 内部不要嵌套 Prose**:嵌套排版会双倍间距
-
-## Typography 形态 — 旧库 API → 新库映射
-
-旧库(Teamix 1.0 / `@alifd/next.Typography` + `Typography.Text` / `Typography.Paragraph` / `Typography.H1`~`H6`)与新库(`Typography` / `Title` / `Paragraph` / `Text` / `Link` / `Prose`)逐项对应。
-
-### 组件拆合
-
-| 旧库 | 新库 | 备注 |
-| --- | --- | --- |
-| `Typography` | `Prose` | 富文本容器,渲染 Markdown / CMS 输出 |
-| `Typography.H1` ~ `Typography.H6` | `<Title level={1..6}>` | level 决定字号 + 标签;新增 level=6 对齐 antd |
-| `Typography.Paragraph` | `Paragraph` | 同义 |
-| `Typography.Text` | `Text` | 行内文本 |
-| — | `Link` | 新增 — 语义化 `<a>` 元素 |
-
-### Props / 值映射
-
-| 旧库 | 新库 | 备注 |
-| --- | --- | --- |
-| `<Text type="secondary">` | `<Text color="muted">` | ADR 0021 语义色重命名 |
-| `<Text type="danger">` | `<Text color="destructive">` | ADR 0021 — 不收 antd `error` / `danger` 别名 |
-| `<Text strong>` | `<Text strong>` | 行为一致 |
-| `<Text delete>` | `<Text delete>` | 行为一致 |
-| `<Text code>` | `<Text code>` | 行为一致 |
-| `<Text disabled>` | `<Text disabled>` | 行为一致 |
-| `<Text ellipsis>` | `<Text ellipsis>` | P0 已实现 — 单行 truncate;多行用 `className="line-clamp-N"` |
-| `<Text copyable>` | `<Text copyable>` | P0 已实现 — 默认复制 children;传对象指定 `text` |
-| `<Text copyable={{ text }}>` | `<Text copyable={{ text }}>` | 对象签名一致 |
-| `size="body1/body2/caption/overline"` | className `text-sm/text-xs/...` | shadcn 字号通过 Tailwind 直控,不抽 prop |
-| `mark` 黄色高亮 | 直接用 `<mark>` 标签 | HTML 原生 |
-| `underline` | `className="underline"` | Tailwind utility |
-| `editable` 行内编辑 | 不修复 — 用 Tiptap / Lexical / Input + state | 复杂度高,业务低频 |
-
-### 不修复清单
-
-| 旧库能力 | 理由 |
-| --- | --- |
-| `mark` / `underline` / `delete` / `code` 全 prop | 直接用 HTML 原生 / Tailwind utility 更简洁,只保留 `delete` / `code` 的便捷 prop |
-| `editable` 行内编辑 | 业务低频 + 复杂度高,推荐用 Tiptap 等编辑器 |
-| `component` 自定义根标签 | shadcn 走 `asChild` (Slot) 替代 — 需要时用 `<Title asChild><span>...</span></Title>` |
-
-## Examples
-
-```tsx
-import { Prose, Title, Paragraph, Text, Link } from '@/components/ui/typography';
-
-// 标题层级
-<Title level={1}>页面标题</Title>
-<Title level={2}>章节标题</Title>
-
-// 段落
-<Paragraph>正文段落,统一字号 / 行高 / 颜色。</Paragraph>
-
-// 行内文本
-<Text color="success" strong>成功</Text>
-<Text color="destructive" delete>已废弃</Text>
-<Text disabled>不可用</Text>
-<Text code>const x = 1</Text>
-<Text ellipsis>这是一段非常长的文字...被截断</Text>
-<Text copyable>可复制的文本</Text>
-<Text copyable={{ text: 'lyca@teamix.dev' }}>邮箱(复制不同的内容)</Text>
-
-// 链接
-<Link href="/docs">文档</Link>
-<Link href="/danger" color="destructive">危险链接</Link>
-
-// Prose 容器(渲染 Markdown 等富文本)
-<Prose>
-  <h1>Markdown 标题</h1>
-  <p>段落...</p>
-  <ul><li>列表项</li></ul>
-  <pre><code>console.log('hi')</code></pre>
-</Prose>
-```

package/src/components/typography/typography.stories.tsx

@@ -1,116 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Prose, Title, Paragraph, Text, Link } from './typography';
-
-const meta: Meta<typeof Text> = {
-  title: '通用 · General/Typography',
-  component: Text,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '排版组件 — Prose 富文本容器 + Title / Paragraph / Text / Link，合并 antd 的 `type` / `strong` / `delete` / `disabled` / `code` / `ellipsis` / `copyable` 能力。语义色采用 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md) 统一 `color` API(antd `type` 的 secondary/success/warning/danger 合并为 `color` 的 muted/success/warning/destructive)。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Text>;
-
-export const Titles: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-2">
-      {([1, 2, 3, 4, 5] as const).map((l) => (
-        <Title key={l} level={l}>
-          Level {l} 标题
-        </Title>
-      ))}
-    </div>
-  ),
-};
-
-export const TextColors: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-2 text-sm">
-      <Text>默认</Text>
-      <Text color="muted">次要</Text>
-      <Text color="primary">信息 / 主颜色</Text>
-      <Text color="success">成功</Text>
-      <Text color="warning">警告</Text>
-      <Text color="destructive">危险</Text>
-      <Text strong>加粗</Text>
-      <Text delete>已废弃</Text>
-      <Text disabled>不可用</Text>
-      <Text code>const x = 1</Text>
-    </div>
-  ),
-};
-
-export const Copyable: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-2 text-sm">
-      <Text copyable>这段文字可复制</Text>
-      <Text copyable={{ text: 'lyca@teamix.dev' }}>邮箱(复制实际地址)</Text>
-    </div>
-  ),
-};
-
-export const Ellipsis: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-48">
-      <Text ellipsis>
-        这是一段非常非常非常长的文字内容,在窄容器内会被自动截断成单行。
-      </Text>
-    </div>
-  ),
-};
-
-export const Links: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-2 text-sm">
-      <Link href="#docs" onClick={(e) => e.preventDefault()}>
-        文档
-      </Link>
-      <Link
-        href="#delete"
-        color="destructive"
-        onClick={(e) => e.preventDefault()}
-      >
-        危险操作链接
-      </Link>
-    </div>
-  ),
-};
-
-export const ProseDemo: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Prose>
-      <h1>Prose 容器</h1>
-      <p>
-        Prose 给原始 HTML(Markdown 渲染产物 / CMS 富文本)套上一致排版样式 —
-        标题字号、段落行高、列表样式、代码块、引用。
-      </p>
-      <h2>子标题</h2>
-      <p>
-        访问 <a href="#">链接</a> 查看更多。<strong>强调</strong> <em>斜体</em>{' '}
-        <code>inline-code</code>。
-      </p>
-      <ul>
-        <li>列表项 1</li>
-        <li>列表项 2</li>
-        <li>列表项 3</li>
-      </ul>
-      <blockquote>这是一段引用文字。</blockquote>
-      <pre>
-        <code>{`function hello() {\n  return 'world';\n}`}</code>
-      </pre>
-    </Prose>
-  ),
-};