@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/typography/typography.tsx

@@ -1,260 +0,0 @@
-import * as React from 'react';
-import { Check, Copy } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-// ─── Prose container ─────────────────────────────────────────────────────────
-
-export interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Prose 容器 — 给原始 HTML(Markdown 渲染产物 / CMS 富文本)套上一致排版样式。
- * 内部自动应用 Tailwind typography 风格的边距 / 标题字号 / 列表 / 链接 / 代码 / 引用。
- *
- * 注意:本组件刻意**不依赖** `@tailwindcss/typography` 插件 — 改用手写 selector
- * 链让样式可控、与 design tokens 对齐。
- */
-const Prose = React.forwardRef<HTMLDivElement, ProseProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'max-w-prose text-sm text-foreground',
-        // headings
-        '[&_h1]:mt-8 [&_h1]:mb-4 [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:tracking-tight',
-        '[&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-semibold',
-        '[&_h3]:mt-5 [&_h3]:mb-2 [&_h3]:text-xl [&_h3]:font-semibold',
-        '[&_h4]:mt-4 [&_h4]:mb-2 [&_h4]:text-lg [&_h4]:font-medium',
-        // paragraphs / lists
-        '[&_p]:my-3 [&_p]:leading-7',
-        '[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6',
-        '[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-6',
-        '[&_li]:my-1',
-        // inline
-        '[&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline',
-        '[&_strong]:font-semibold',
-        '[&_em]:italic',
-        // code
-        // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- inline `<code>` uses em-relative size to scale with surrounding text; not tokenizable since it depends on parent context.
-        '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em]',
-        '[&_pre]:my-4 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-4',
-        '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
-        // blockquote / hr
-        '[&_blockquote]:my-4 [&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground',
-        '[&_hr]:my-6 [&_hr]:border-border',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Prose.displayName = 'Prose';
-
-// ─── Title ───────────────────────────────────────────────────────────────────
-
-const titleSizes = {
-  1: 'text-3xl font-bold tracking-tight',
-  2: 'text-2xl font-semibold tracking-tight',
-  3: 'text-xl font-semibold',
-  4: 'text-lg font-medium',
-  5: 'text-base font-medium',
-  6: 'text-sm font-medium',
-} as const;
-
-export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  /**
-   * 层级(1~6),决定字号 / 粗细;同时映射为 `<h1>~<h6>` 标签 — 对齐 antd `Typography.Title.level`。
-   * @default 1
-   */
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-}
-
-const Title = React.forwardRef<HTMLHeadingElement, TitleProps>(
-  ({ level = 1, className, ...props }, ref) => {
-    const Comp = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    return (
-      <Comp ref={ref} className={cn(titleSizes[level], className)} {...props} />
-    );
-  },
-);
-Title.displayName = 'Title';
-
-// ─── Paragraph ───────────────────────────────────────────────────────────────
-
-export interface ParagraphProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {}
-
-const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  ({ className, ...props }, ref) => (
-    <p
-      ref={ref}
-      className={cn('text-sm leading-7 text-foreground', className)}
-      {...props}
-    />
-  ),
-);
-Paragraph.displayName = 'Paragraph';
-
-// ─── Text(行内文本,支持 antd ellipsis / copyable / color)──────────────────
-
-/**
- * Text 语义色 6 档(见 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md))。
- * 字面与 OpenTrek tokens 对齐:
- * - antd `secondary` → `muted`(对齐 `--muted-foreground`)
- * - antd `danger`    → `destructive`(对齐 `--destructive`)
- * - **不收 `info`** — 如需信息色,用 `primary`。
- */
-export type TextColor =
-  | 'default'
-  | 'muted'
-  | 'primary'
-  | 'success'
-  | 'warning'
-  | 'destructive';
-
-export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /**
-   * 语义色 — 6 档枚举,字面与 OpenTrek tokens 对齐(见 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md))。
-   * antd `type` 迁移:`secondary`→`muted`、`danger`→`destructive`。
-   * @default "default"
-   */
-  color?: TextColor;
-  /**
-   * 删除线。
-   * @default false
-   */
-  delete?: boolean;
-  /**
-   * 不可用(灰色 + 不可选)。
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * 加粗。
-   * @default false
-   */
-  strong?: boolean;
-  /**
-   * 行内代码样式(`code`)。
-   * @default false
-   */
-  code?: boolean;
-  /**
-   * 单行省略(antd `ellipsis` 简化版 — 只支持 boolean,行数 / suffix 留 v0.x)。
-   * @default false
-   */
-  ellipsis?: boolean;
-  /**
-   * 可复制(antd `copyable` 并集)— 末尾追加复制图标按钮。
-   * 传对象时可指定要复制的文本(默认是 children 的纯文本);传 `true` 用 children。
-   * @default false
-   */
-  copyable?: boolean | { text: string; tooltips?: [string, string] };
-}
-
-const colorClass: Record<TextColor, string> = {
-  default: 'text-foreground',
-  muted: 'text-muted-foreground',
-  primary: 'text-primary',
-  success: 'text-success',
-  warning: 'text-warning',
-  destructive: 'text-destructive',
-};
-
-const Text = React.forwardRef<HTMLSpanElement, TextProps>(
-  (
-    {
-      color = 'default',
-      delete: del = false,
-      disabled = false,
-      strong = false,
-      code = false,
-      ellipsis = false,
-      copyable = false,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [copied, setCopied] = React.useState(false);
-    const handleCopy = () => {
-      const text =
-        typeof copyable === 'object' && copyable.text
-          ? copyable.text
-          : typeof children === 'string'
-          ? children
-          : '';
-      void navigator.clipboard?.writeText(text).then(() => {
-        setCopied(true);
-        window.setTimeout(() => setCopied(false), 1500);
-      });
-    };
-
-    const cls = cn(
-      colorClass[color],
-      strong && 'font-semibold',
-      del && 'line-through',
-      disabled && 'cursor-not-allowed select-none opacity-50',
-      ellipsis && 'inline-block max-w-full truncate align-bottom',
-      code &&
-        // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- inline `<code>` uses em-relative size to scale with surrounding text; not tokenizable.
-        'rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em]',
-      className,
-    );
-
-    if (copyable) {
-      return (
-        <span className="inline-flex items-center gap-1">
-          <span ref={ref} className={cls} {...props}>
-            {children}
-          </span>
-          <button
-            type="button"
-            onClick={handleCopy}
-            aria-label={copied ? '已复制' : '复制'}
-            className="cursor-pointer rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
-            {copied ? (
-              <Check className="size-3.5 text-success" />
-            ) : (
-              <Copy className="size-3.5" />
-            )}
-          </button>
-        </span>
-      );
-    }
-
-    return (
-      <span ref={ref} className={cls} {...props}>
-        {children}
-      </span>
-    );
-  },
-);
-Text.displayName = 'Text';
-
-// ─── Link(antd 风格,默认下划线 hover)────────────────────────────────────
-
-export interface LinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** 语义色(同 Text 的 color)。 @default "default" */
-  color?: TextColor;
-}
-
-const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ className, color = 'default', ...props }, ref) => (
-    <a
-      ref={ref}
-      className={cn(
-        'underline-offset-4 transition-colors hover:underline',
-        color === 'default' ? 'text-primary' : colorClass[color],
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Link.displayName = 'Link';
-
-export { Prose, Title, Paragraph, Text, Link };

package/src/components/upload/upload.meta.md

@@ -1,156 +0,0 @@
----
-id: upload
-name: Upload
-displayName: 上传
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Upload 上传
-
-文件上传 — antd 独有补足。支持**点击 + 拖拽**双模式(`dragger`)、多文件、accept 过滤、`maxCount` / `maxSize` 校验、内置文件列表(显示文件名 / 进度 / 移除按钮)。**只负责前端选择与列表呈现 — 实际上传请求由消费方在 `onChange` 中发起**(组件不内置 XHR)。
-
-## When to use
-
-- 表单中的附件上传(简历、合同、头像、产品图)
-- 拖拽区域批量导入(数据文件、图片)
-- 需要展示上传进度时,通过受控 `fileList` + `status="uploading"` + `percent` 渲染
-
-## When NOT to use
-
-- 仅需读取本地图片用于客户端预览 → 直接用 `<input type="file">`
-- 服务端推送式同步 → 不在本组件职责内
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `fileList` | `UploadFileItem[]` | – | – | 已上传文件列表(受控)— 不传则组件内部维护本地列表(限制少,通常配 onChange)。 |
-| `accept` | `string` | – | – | 文件接受类型(等价 input.accept) — e.g. `image/*`, `.pdf,.docx`。 |
-| `multiple` | `boolean` | `false` | – | 是否支持多文件选择(antd `multiple` 并集)。 |
-| `maxCount` | `number` | – | – | 最大文件数(超出则忽略,触发 `onExceed`)。 |
-| `maxSize` | `number` | – | – | 单文件最大字节数(超出则忽略,触发 `onExceed`)。 |
-| `beforeUpload` | `( file: File, fileList: File[], ) => boolean \| File \| void \| Promise<boolean \| File \| void>` | – | – | 文件添加前的校验钩子(antd `beforeUpload` 并集)。 - 返回 `false` 拒绝当前文件 - 返回 `true` / `undefined` 允许 - 返回 新 `File` 对象可替换原文件(重命名 / 压缩等) - 支持异步 `Promise` 注意: 此钩子在 `maxCount` / `maxSize` 校验**之后**调用。 |
-| `dragger` | `boolean` | `false` | – | 启用拖拽上传(antd `Dragger` 并集) — 显示大块虚线区,可点击亦可拖拽。 |
-| `disabled` | `boolean` | – | – | 禁用上传(已选文件不可删除)。 |
-| `showFileList` | `boolean` | `true` | – | 是否显示文件列表(antd `showUploadList` 并集)。 |
-| `listType` | `'text' \| 'image' \| 'card'` | `"text"` | – | 文件列表的展示形态(antd `listType` 并集) — - `text`(默认):文件名 + 进度条,适用文档上传 - `image`:小缩略图 + 文件名,适用头像 / 附件预览 - `card`:网格大缩略图卡,适用多图上传 / 产品图库 |
-| `onChange` | `(next: UploadFileItem[]) => void` | – | – | 文件被添加(用户选择 / 拖入)时的回调 — 返回更新后的列表。 |
-| `onRemove` | `(file: UploadFileItem) => void` | – | – | 文件被移除时的回调。 |
-| `onExceed` | `(rejected: File[], reason: 'count' \| 'size') => void` | – | – | 超出 maxCount / maxSize 时的回调。 |
-| `children` | `React.ReactNode` | – | – | 触发器自定义内容(非 dragger 模式下渲染于 Button 内)。 |
-| `className` | `string` | – | – | – |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add upload` 时,以下 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)。 |
-| `progress` | component | 进度条 — Radix 线性 + antd 的 status / showInfo / size 并集 + 配套 ProgressCircle 环形 |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **不要在组件内做真上传** — 拿到 `onChange(files)` 后由消费方负责 fetch / axios,组件只管 UI
-- **进度场景**:必须用**受控** `fileList`,在 `onChange` 拿到 file 后启动上传,期间通过 `setState` 更新对应 item 的 `status="uploading"` + `percent`
-- **`maxCount` / `maxSize`**:校验失败会触发 `onExceed(rejected, reason)`,业务侧用 toast 提示;**不要**在组件外手动二次校验
-- **`accept`**:浏览器层过滤,**不能**当作安全校验 — 服务端仍需独立校验文件类型
-- **`dragger` 与 `children`**:dragger=true 时 children 替换默认提示文案;dragger=false 时 children 替换 Button 文本
-- **不要给 input 加 `name`** — Upload 不参与原生 form submit,数据由 `onChange` 取走
-
-## Examples
-
-```tsx
-import { Upload, type UploadFileItem } from '@/components/ui/upload';
-import { toast } from 'sonner';
-import * as React from 'react';
-
-// 点击上传
-<Upload
-  accept="image/*"
-  multiple
-  maxCount={3}
-  maxSize={5 * 1024 * 1024}
-  onExceed={(_, reason) =>
-    toast.error(reason === 'count' ? '最多 3 个文件' : '单文件不能超过 5MB')
-  }
-  onChange={(list) => console.log(list)}
-/>
-
-// 拖拽上传(Dragger)
-<Upload dragger multiple accept=".csv,.xlsx" onChange={(list) => uploadAll(list)} />
-
-// 带进度(受控)
-const [files, setFiles] = React.useState<UploadFileItem[]>([]);
-<Upload
-  fileList={files}
-  multiple
-  onChange={(next) => {
-    setFiles(next);
-    const fresh = next.filter((f) => f.status === 'done' && f.file);
-    fresh.forEach((item) => {
-      uploadXhr(item.file!, (percent) => {
-        setFiles((cur) =>
-          cur.map((f) => (f.uid === item.uid ? { ...f, status: 'uploading', percent } : f)),
-        );
-      });
-    });
-  }}
-/>
-```
-
----
-
-## Upload 形态 — 旧库 API → 新映射
-
-> 旧库 `Upload`(hybridcloud,含 Upload.Card / Upload.Dragger 子组件) → 新库 `Upload`(单组件 prop 切换)。
-> 新库**不内置网络层**(XHR/fetch)，由消费方在 `onChange` 中自行上传。
-
-### 命名 & 结构映射
-
-| 旧库                               | 新库                             | 说明                             |
-| ---------------------------------- | -------------------------------- | -------------------------------- |
-| `Upload`                           | `Upload`                         | 组件名相同                       |
-| `Upload.Card`                      | `<Upload listType="card" />`     | 子组件变 prop                    |
-| `Upload.Dragger`                   | `<Upload dragger />`             | 子组件变 prop                    |
-| `value / defaultValue`             | `fileList`                       | 文件列表(受控)                   |
-| `limit`                            | `maxCount`                       | 最大文件数                       |
-| `dragable`                         | `dragger`                        | 拖拽上传 prop                    |
-| `action / headers / method`        | 无(消费方自行请求)               | 架构差异:无内置 XHR              |
-| `onSuccess / onError / onProgress` | 无(通过 fileList.status/percent) | 状态驱动而非回调                 |
-| `beforeUpload`                     | _(未来 P1)_                      | MVP 用 accept + maxSize 前置过滤 |
-| `autoUpload`                       | _(未来 P1)_                      | MVP 仅选件,上传由消费方控制      |
-| `itemRender`                       | _(未来 P2)_                      | MVP 使用内置渲染                 |
-| `shape='card'`                     | `listType='card'` + dragger      | 组合代替                         |
-| `useDataURL`                       | 不复刻                           | 消费方 FileReader                |
-| `progressProps`                    | 不复刻                           | 内置简化 Progress                |
-| `isPreview / renderPreview`        | 不复刻                           | 无预览态                         |
-| `fileKeyName`                      | 不复刻                           | 固定用 uid                       |
-
-### 迁移 FAQ
-
-| 问题                | 回答                                                                                 |
-| ------------------- | ------------------------------------------------------------------------------------ |
-| 无 action 怎么上传? | 在 `onChange` 中拿到 `file` 对象，自行 fetch/XHR;通过 `setFiles` 更新 status/percent |
-| 怎么实现拖拽?       | `<Upload dragger />` 即可;虚线区域点击/拖放均可触发                                  |
-| 怎么限制文件类型?   | `accept="image/*"` 或 `accept=".pdf,.docx"`                                          |
-| 怎么显示上传进度?   | fileList item 设 `status:'uploading'` + `percent:50`                                 |
-| Card 模式怎么用?    | `<Upload listType="card" dragger />` — 网格缩略图 + 拖拽区                           |

package/src/components/upload/upload.stories.tsx

@@ -1,135 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Upload, type UploadFileItem } from './upload';
-
-const meta: Meta<typeof Upload> = {
-  title: '数据录入 · Data Entry/Upload',
-  component: Upload,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '文件上传 — 支持点击 + 拖拽双模式（Dragger），内置 maxCount / maxSize 校验、文件列表、进度条。组件只负责前端选择与列表呈现，真实上传请求由消费方在 onChange 中发起。等价 antd `Upload` + `Upload.Dragger`。',
-      },
-    },
-  },
-  argTypes: {
-    multiple: { control: 'boolean' },
-    dragger: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    accept: { control: 'text' },
-    listType: {
-      control: 'inline-radio',
-      options: ['text', 'image', 'card'],
-    },
-  },
-  args: { multiple: false, dragger: false, disabled: false, listType: 'text' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Upload>;
-
-export const Playground: Story = {};
-
-export const Dragger: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Upload dragger multiple accept=".csv,.xlsx,.json" />,
-};
-
-export const WithLimits: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Upload
-      multiple
-      maxCount={3}
-      maxSize={2 * 1024 * 1024}
-      onExceed={(rej, reason) =>
-        alert(
-          `${reason === 'count' ? '超出最大文件数' : '超出最大文件大小'}: ${rej
-            .map((f) => f.name)
-            .join(', ')}`,
-        )
-      }
-    />
-  ),
-};
-
-export const ControlledProgress: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [files, setFiles] = React.useState<UploadFileItem[]>([
-      { uid: 'demo-1', name: 'report.pdf', status: 'uploading', percent: 45 },
-      { uid: 'demo-2', name: 'cover.png', status: 'done' },
-      { uid: 'demo-3', name: 'broken.zip', status: 'error' },
-    ]);
-    return <Upload dragger multiple fileList={files} onChange={setFiles} />;
-  },
-};
-
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Upload dragger disabled />,
-};
-
-// ─── listType · 三种列表形态 ────────────────────────────────────
-
-const imageDemoFiles: UploadFileItem[] = [
-  {
-    uid: 'img-1',
-    name: 'avatar.png',
-    status: 'done',
-    thumbUrl: 'https://github.com/shadcn.png',
-  },
-  {
-    uid: 'img-2',
-    name: 'cover.jpg',
-    status: 'done',
-    thumbUrl: 'https://placehold.co/200x200/e5e7eb/6b7280?text=Cover',
-  },
-  { uid: 'img-3', name: 'broken.png', status: 'error' },
-];
-
-export const ListTypeImage: Story = {
-  name: 'listType="image" · 缩略图列表',
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [files, setFiles] = React.useState<UploadFileItem[]>(imageDemoFiles);
-    return (
-      <Upload
-        listType="image"
-        accept="image/*"
-        multiple
-        fileList={files}
-        onChange={setFiles}
-      />
-    );
-  },
-};
-
-export const ListTypeCard: Story = {
-  name: 'listType="card" · 网格卡',
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [files, setFiles] = React.useState<UploadFileItem[]>([
-      ...imageDemoFiles,
-      {
-        uid: 'img-4',
-        name: 'uploading.png',
-        status: 'uploading',
-        percent: 65,
-        thumbUrl: 'https://placehold.co/200x200/dbeafe/1d4ed8?text=65%25',
-      },
-    ]);
-    return (
-      <Upload
-        dragger
-        listType="card"
-        accept="image/*"
-        multiple
-        fileList={files}
-        onChange={setFiles}
-      />
-    );
-  },
-};