@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/typography/meta.md

@@ -0,0 +1,151 @@
+# Prose
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+排版 Typography
+基础文本排版组件集：Title / Paragraph / Text / Link + Prose 富文本容器。
+对齐 antd Typography 的 `type`/`strong`/`delete`/`disabled`/`code`/`ellipsis`/`copyable`/`italic`/`underline`/`mark`/`keyboard` 能力。
+
+## 使用场景
+
+- 文章 / 博客 / 笔记中展示标题与正文
+- 需要可复制 / 可省略 / 带语义色的文本
+- Markdown / CMS 富文本渲染产物套排版样式
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `level` | `1 \| 2 \| 3 \| 4 \| 5` | `1` | – | 层级（1~5），决定字号 / 粗细；同时映射为 `<h1>~<h5>` 标签。 |
+| `color` | `TypographyColor` | – | – | 语义色。@default "default" |
+| `color` | `TypographyColor` | `"default"` | – | 语义色 — 6 档枚举，对齐 OpenTrek tokens（ADR 0021）。 antd `type` 迁移：`secondary` → `muted`、`danger` → `destructive`。 |
+| `delete` | `boolean` | – | – | 删除线。@default false |
+| `disabled` | `boolean` | – | – | 不可用（灰色 + 不可选）。@default false |
+| `strong` | `boolean` | – | – | 加粗。@default false |
+| `italic` | `boolean` | – | – | 斜体。@default false |
+| `underline` | `boolean` | – | – | 下划线。@default false |
+| `mark` | `boolean` | – | – | 高亮标记。@default false |
+| `keyboard` | `boolean` | – | – | 键盘样式。@default false |
+| `code` | `boolean` | – | – | 行内代码样式。@default false |
+| `ellipsis` | `boolean` | `false` | – | 单行省略（CSS truncate）。 |
+| `copyable` | `boolean \| CopyableConfig` | `false` | – | 可复制 — 末尾追加复制图标按钮。 传对象时可指定要复制的文本；传 `true` 用 children。 |
+| `color` | `TypographyColor` | – | – | 语义色。@default "primary" |
+
+## 示例
+
+### Titles
+
+```tsx
+<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>
+```
+
+### TextColors
+
+```tsx
+<div className="flex flex-col gap-2">
+  <Text>默认文本</Text>
+  <Text color="muted">次要文本</Text>
+  <Text color="primary">主色文本</Text>
+  <Text color="success">成功文本</Text>
+  <Text color="warning">警告文本</Text>
+  <Text color="destructive">危险文本</Text>
+</div>
+```
+
+### Decorations
+
+```tsx
+<div className="flex flex-col gap-2">
+  <Text strong>加粗 Strong</Text>
+  <Text italic>斜体 Italic</Text>
+  <Text underline>下划线 Underline</Text>
+  <Text delete>删除线 Delete</Text>
+  <Text disabled>不可用 Disabled</Text>
+  <Text code>代码 Code</Text>
+  <Text mark>高亮标记 Mark</Text>
+  <Text keyboard>Ctrl + S</Text>
+</div>
+```
+
+### Copyable
+
+```tsx
+<div className="flex flex-col gap-3">
+  <Text copyable>这段文字可复制</Text>
+  <Text copyable={{ text: 'lyca@teamix.dev' }}>邮箱（复制实际地址）</Text>
+</div>
+```
+
+### Ellipsis
+
+```tsx
+<div className="w-48">
+  <Text ellipsis>
+    这是一段非常非常非常长的文字内容，在窄容器内会被自动截断成单行并显示省略号。
+  </Text>
+</div>
+```
+
+### ParagraphDemo
+
+```tsx
+<div className="max-w-md flex flex-col gap-2">
+  <Paragraph>
+    Teamix Evo 是面向产品研发场景的 AI Coding
+    套件,提供设计体系、技能、组件、文档等可装配资产。
+  </Paragraph>
+  <Paragraph color="muted">
+    次要段落 — 通常用于补充说明或辅助信息。
+  </Paragraph>
+</div>
+```
+
+### Links
+
+```tsx
+<div className="flex flex-col gap-2">
+  <Link href="#" onClick={(e) => e.preventDefault()}>
+    默认链接
+  </Link>
+  <Link href="#" color="destructive" onClick={(e) => e.preventDefault()}>
+    危险操作链接
+  </Link>
+  <Link href="#" color="muted" onClick={(e) => e.preventDefault()}>
+    次要链接
+  </Link>
+</div>
+```
+
+### ProseDemo
+
+```tsx
+<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>
+```

package/src/components/typography/stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Prose, Title, Paragraph, Text, Link } from '.';
+
+const meta: Meta<typeof Text> = {
+  title: '通用 · General/Typography 排版',
+  component: Text,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '排版 — 基础文本排版组件集，覆盖标题 / 正文 / 行内文本 / 链接 / 富文本容器。shadcn function 组件 + antd Typography 并集能力（`color` / `strong` / `delete` / `disabled` / `code` / `ellipsis` / `copyable` / `italic` / `underline` / `mark` / `keyboard`）：`color` 对齐 ADR 0021 六档语义色，antd `type` 的 `secondary` → `muted`、`danger` → `destructive`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Titles: Story = {
+  name: '标题 Title',
+  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 = {
+  name: '语义色 Color',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Text>默认文本</Text>
+      <Text color="muted">次要文本</Text>
+      <Text color="primary">主色文本</Text>
+      <Text color="success">成功文本</Text>
+      <Text color="warning">警告文本</Text>
+      <Text color="destructive">危险文本</Text>
+    </div>
+  ),
+};
+
+export const Decorations: Story = {
+  name: '文本修饰',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Text strong>加粗 Strong</Text>
+      <Text italic>斜体 Italic</Text>
+      <Text underline>下划线 Underline</Text>
+      <Text delete>删除线 Delete</Text>
+      <Text disabled>不可用 Disabled</Text>
+      <Text code>代码 Code</Text>
+      <Text mark>高亮标记 Mark</Text>
+      <Text keyboard>Ctrl + S</Text>
+    </div>
+  ),
+};
+
+export const Copyable: Story = {
+  name: '可复制 Copyable',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Text copyable>这段文字可复制</Text>
+      <Text copyable={{ text: 'lyca@teamix.dev' }}>邮箱（复制实际地址）</Text>
+    </div>
+  ),
+};
+
+export const Ellipsis: Story = {
+  name: '省略 Ellipsis',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-48">
+      <Text ellipsis>
+        这是一段非常非常非常长的文字内容，在窄容器内会被自动截断成单行并显示省略号。
+      </Text>
+    </div>
+  ),
+};
+
+export const ParagraphDemo: Story = {
+  name: '段落 Paragraph',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="max-w-md flex flex-col gap-2">
+      <Paragraph>
+        Teamix Evo 是面向产品研发场景的 AI Coding
+        套件,提供设计体系、技能、组件、文档等可装配资产。
+      </Paragraph>
+      <Paragraph color="muted">
+        次要段落 — 通常用于补充说明或辅助信息。
+      </Paragraph>
+    </div>
+  ),
+};
+
+export const Links: Story = {
+  name: '链接 Link',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Link href="#" onClick={(e) => e.preventDefault()}>
+        默认链接
+      </Link>
+      <Link href="#" color="destructive" onClick={(e) => e.preventDefault()}>
+        危险操作链接
+      </Link>
+      <Link href="#" color="muted" onClick={(e) => e.preventDefault()}>
+        次要链接
+      </Link>
+    </div>
+  ),
+};
+
+export const ProseDemo: Story = {
+  name: '富文本容器 Prose',
+  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>
+  ),
+};