@orbit-work/ui 0.1.1 → 0.1.2

package/src/components/composite/DataManagementSectionView/DataManagementSectionView.stories.tsx

@@ -1,123 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import type { ReactNode } from "react"
-import { DataManagementSectionView, type SharedResourceItem } from "./index"
-
-/**
- * 件级状态矩阵（R2 · L3-1-2 补）：此前只在 `Screens/SettingsSections` 的整屏里
- * 出过一次满配图，`emptyMessage` 分支与「只有一组」的形从没被覆盖过。
- */
-const meta = {
-  title: "Composite/DataManagementSectionView",
-  component: DataManagementSectionView,
-  parameters: { layout: "padded" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof DataManagementSectionView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-function Frame({ children }: { children: ReactNode }) {
-  return (
-    <div style={{ maxWidth: 640, background: "var(--ow-bg-panel)", color: "var(--ow-text)", padding: 20 }}>
-      {children}
-    </div>
-  )
-}
-
-const SITES: SharedResourceItem[] = [
-  { id: "s1", name: "2026 年度复盘", url: "share.orbitwork.cn/s/9d21", access: "公开访问" },
-  { id: "s2", name: "客户提案 · 星野", url: "share.orbitwork.cn/s/4f08", access: "指定成员" },
-]
-
-const SHARES: SharedResourceItem[] = [
-  { id: "c1", name: "把季度数据整理成图表", url: "share.orbitwork.cn/c/71ba", access: "公开访问" },
-  { id: "c2", name: "内网 Jira 连接排障", url: "share.orbitwork.cn/c/2c5e", access: "指定成员" },
-  { id: "c3", name: "PPT 模板批量替换", url: "share.orbitwork.cn/c/8a33", access: "公开访问" },
-]
-
-const noop = () => {}
-
-/** 默认：两组都有内容。眉标 ＋ 卡行 ＋ 行末两枚 28 描边钮（「停止分享」只走 danger 文字色）。 */
-export const Default: Story = {
-  args: { sites: SITES, shares: SHARES, onCopyLink: noop, onRevoke: noop },
-  render: (args) => (
-    <Frame>
-      <DataManagementSectionView {...args} />
-    </Frame>
-  ),
-}
-
-/** 只有站点：会话组整段不渲染（`ResourceGroup` 空数组直接返回 null），不留空眉标。 */
-export const SitesOnly: Story = {
-  args: { sites: SITES, shares: [], onCopyLink: noop, onRevoke: noop },
-  render: (args) => (
-    <Frame>
-      <DataManagementSectionView {...args} />
-    </Frame>
-  ),
-}
-
-/** 只有会话。 */
-export const SharesOnly: Story = {
-  args: { sites: [], shares: SHARES, onCopyLink: noop, onRevoke: noop },
-  render: (args) => (
-    <Frame>
-      <DataManagementSectionView {...args} />
-    </Frame>
-  ),
-}
-
-/** 两组都空：整段让位给 `EmptyState` 缺省档（§6 容器空态）。 */
-export const Empty: Story = {
-  args: { sites: [], shares: [], onCopyLink: noop, onRevoke: noop },
-  render: (args) => (
-    <Frame>
-      <DataManagementSectionView {...args} />
-    </Frame>
-  ),
-}
-
-/** 自定义空态副句：`emptyMessage` 分支。 */
-export const EmptyWithCustomMessage: Story = {
-  args: {
-    sites: [],
-    shares: [],
-    emptyMessage: "这个工作区还没有对外发布过任何东西。",
-    onCopyLink: noop,
-    onRevoke: noop,
-  },
-  render: (args) => (
-    <Frame>
-      <DataManagementSectionView {...args} />
-    </Frame>
-  ),
-}
-
-/** 长名称：名与 mono 读数各自 truncate，两枚钮 `shrink-0` 不被挤扁。 */
-export const LongNames: Story = {
-  args: {
-    sites: [
-      {
-        id: "s1",
-        name: "2026 年第三季度经营复盘（含区域拆分与渠道归因）终稿 v7",
-        url: "share.orbitwork.cn/s/9d21c4b7e0f2a18d",
-        access: "指定成员（12 人）",
-      },
-    ],
-    shares: [
-      {
-        id: "c1",
-        name: "把上个季度所有渠道的数据整理成一份可以直接汇报的图表",
-        url: "share.orbitwork.cn/c/71ba09ff",
-        access: "公开访问",
-      },
-    ],
-    onCopyLink: noop,
-    onRevoke: noop,
-  },
-  render: (args) => (
-    <Frame>
-      <DataManagementSectionView {...args} />
-    </Frame>
-  ),
-}

package/src/components/composite/DataManagementSectionView/DataManagementSectionViewSource.test.mjs

@@ -1,45 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
-const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
-
-test("A2-B5：两组齐了——已发布的站点 ＋ 本轮补上的已分享的会话（原型 2578–2600）", () => {
-  assert.match(code, /title="已发布的站点"/)
-  assert.match(code, /title="已分享的会话"/)
-  assert.match(code, /sites=\{sites\}|items=\{sites\}/)
-  assert.match(code, /items=\{shares\}/)
-})
-
-// R3（2026-09-04，Terry 意见 5）：卡形整枚作废，两组的条目回到**分隔线行**——
-// 贴边零内距、上下 12、行与行之间 1px --ow-border（`[data-ow-part=row]+&` 只在兄弟行之间画，
-// 组标题下不多一条）；组容器 gap-0 让那条线连成一条，组间距仍由外层 gap-3.5 给。
-test("眉标走 §8 中文口径；行是分隔线行（贴边零内距 · 上下 12 · 行间 1px --ow-border · 贴地零影）", () => {
-  assert.match(code, /--ow-fs-eyebrow-cjk,12px/)
-  assert.match(code, /--ow-ls-eyebrow-cjk,0\.08em/)
-  assert.match(code, /text-\[color:var\(--ow-eyebrow\)\]/)
-  assert.match(code, /data-ow-part="row"/)
-  assert.match(code, /px-0 py-3 border-\[color:var\(--ow-border\)\] \[\[data-ow-part=row\]\+&\]:border-t/)
-  // 卡形三件（1px 边 ＋ radius-lg ＋ surface 底）不得回流
-  assert.doesNotMatch(code, /\[border-radius:var\(--ow-radius-lg\)\]/)
-  assert.doesNotMatch(code, /bg-\[var\(--ow-surface\)\]/)
-  assert.match(code, /data-ow-part="group" className="flex flex-col gap-0 min-w-0"/)
-  assert.doesNotMatch(code, /shadow|backdrop-filter/)
-})
-
-test("§7 读数一律 mono + tabular-nums（链接 · 权限那一行）", () => {
-  assert.match(code, /\[font-family:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]/)
-})
-
-test("§4 行动极：两枚动作都是 secondary 描边，「停止分享」只换 --ow-danger 文字色", () => {
-  assert.equal((code.match(/variant="secondary" size="sm"/g) ?? []).length, 1)
-  assert.match(code, /text-\[color:var\(--ow-danger\)\]/)
-  assert.doesNotMatch(code, /variant="danger"|variant="primary"/)
-  assert.doesNotMatch(code, /--ow-beacon|--ow-yellow/)
-})
-
-test("§6 容器空态：两组都空时走 EmptyState，不自绘一行假列表", () => {
-  assert.match(code, /import \{ EmptyState \}/)
-  assert.match(code, /<EmptyState message=\{emptyMessage\} \/>/)
-})

package/src/components/composite/DataManagementSectionView/index.tsx

@@ -1,110 +0,0 @@
-"use client"
-
-import { cn } from "../../../lib/utils"
-import { Button } from "../../primitives/Button"
-import { EmptyState } from "../../primitives/EmptyState"
-
-/**
- * DataManagementSectionView — 设置「数据管理」段（A2-B5 · 原型 2578–2600）
- *
- * 两组「发出去还能收回来的东西」：**已发布的站点** 与 **已分享的会话**。
- * 原来只有站点一半，会话那一半在仓库里没有落点（裁决 2 点名要补）。
- * 每组＝眉标（§8 中文 500 / `--ow-fs-eyebrow-cjk` / `--ow-ls-eyebrow-cjk` / `--ow-eyebrow`）
- * ＋ 若干条卡行：名称（fs-ui/500，截断）＋ 一行 mono 读数「链接 · 权限」（fs-caption/text-2）
- * ＋ 右侧两枚 28 高描边钮：「复制链接」与 danger 文字色的「停止分享」。
- * 行：R3（Terry 意见 5）撤卡——贴边零内距、上下 12、行与行之间 1px `--ow-border`（§5 贴地零影）。
- * 「停止分享」是**破坏性动作但不是主行动**——按 §4 走描边形＋`--ow-danger` 文字，
- * 不用实心 danger 填充（一屏两组共 4 枚，实心会读成四个行动极）。
- */
-export interface SharedResourceItem {
-  id: string
-  /** 站点名 / 会话名 */
-  name: string
-  /** 分享链接（mono 读数），如 `share.orbitwork.cn/s/9d21` */
-  url: string
-  /** 权限标签，如「公开访问」「指定成员」 */
-  access: string
-}
-
-export interface DataManagementSectionViewProps {
-  sites: SharedResourceItem[]
-  shares: SharedResourceItem[]
-  onCopyLink: (item: SharedResourceItem) => void
-  onRevoke: (item: SharedResourceItem) => void
-  /** 两组都空时的一句话（§6 容器空态） */
-  emptyMessage?: string
-  className?: string
-}
-
-const eyebrowClass = [
-  "font-medium leading-none m-0",
-  "text-[length:var(--ow-fs-eyebrow-cjk,12px)]",
-  "tracking-[var(--ow-ls-eyebrow-cjk,0.08em)]",
-  "text-[color:var(--ow-eyebrow)]",
-].join(" ")
-
-function ResourceGroup({
-  title,
-  items,
-  onCopyLink,
-  onRevoke,
-}: {
-  title: string
-  items: SharedResourceItem[]
-  onCopyLink: (item: SharedResourceItem) => void
-  onRevoke: (item: SharedResourceItem) => void
-}) {
-  if (items.length === 0) return null
-  return (
-    <section data-ow-part="group" className="flex flex-col gap-0 min-w-0">
-      <h3 data-ow-part="group-title" className={cn(eyebrowClass, "pb-1")}>
-        {title}
-      </h3>
-      {items.map((item) => (
-        <div
-          key={item.id}
-          data-ow-part="row"
-          // R3（Terry 意见 5）：卡 → 分隔线行（贴边零内距、上下 12、行间 1px --ow-border）
-          className="flex items-center gap-3 min-w-0 px-0 py-3 border-[color:var(--ow-border)] [[data-ow-part=row]+&]:border-t"
-        >
-          <div className="flex-1 min-w-0 flex flex-col gap-0.5">
-            <span className="truncate text-ow-fs-ui font-medium leading-[1.3] text-[color:var(--ow-text)]">
-              {item.name}
-            </span>
-            <span className="truncate text-[length:var(--ow-fs-caption,12px)] leading-[1.4] text-[color:var(--ow-text-2)] [font-family:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]">
-              {item.url} · {item.access}
-            </span>
-          </div>
-          <Button variant="secondary" size="sm" className="shrink-0" onClick={() => onCopyLink(item)}>
-            复制链接
-          </Button>
-          <Button
-            variant="secondary"
-            size="sm"
-            className="shrink-0 text-[color:var(--ow-danger)] hover:text-[color:var(--ow-danger)]"
-            onClick={() => onRevoke(item)}
-          >
-            停止分享
-          </Button>
-        </div>
-      ))}
-    </section>
-  )
-}
-
-export function DataManagementSectionView({
-  sites,
-  shares,
-  onCopyLink,
-  onRevoke,
-  emptyMessage = "还没有发布出去的站点或分享出去的会话。",
-  className,
-}: DataManagementSectionViewProps) {
-  if (sites.length === 0 && shares.length === 0) return <EmptyState message={emptyMessage} />
-  return (
-    <div data-slot="data-management" className={cn("flex flex-col gap-3.5 min-w-0", className)}>
-      <ResourceGroup title="已发布的站点" items={sites} onCopyLink={onCopyLink} onRevoke={onRevoke} />
-      <ResourceGroup title="已分享的会话" items={shares} onCopyLink={onCopyLink} onRevoke={onRevoke} />
-    </div>
-  )
-}

package/src/components/composite/DataTable/DataTable.stories.tsx

@@ -1,159 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { Button } from "../../primitives/Button"
-import { Tag } from "../Tag"
-import { DataTable, type DataTableColumn, type DataTableSort, DataTableToolbar } from "./index"
-
-type Run = {
-  id: string
-  task: string
-  owner: string
-  duration: number
-  cost: number
-  state: "运行中" | "已完成" | "失败"
-}
-
-const rows: Run[] = [
-  { id: "r-1041", task: "季度销售复盘", owner: "林筱", duration: 342, cost: 12480, state: "已完成" },
-  { id: "r-1042", task: "站点回归巡检", owner: "赵珩", duration: 96, cost: 3120, state: "运行中" },
-  { id: "r-1043", task: "客户合同抽检", owner: "陈屿", duration: 1284, cost: 26900, state: "已完成" },
-  { id: "r-1044", task: "周报汇总", owner: "林筱", duration: 58, cost: 890, state: "失败" },
-  { id: "r-1045", task: "竞品价格抓取", owner: "沈砚", duration: 704, cost: 15230, state: "已完成" },
-]
-
-const stateVariant = { 运行中: "info", 已完成: "success", 失败: "error" } as const
-
-const columns: DataTableColumn<Run>[] = [
-  { key: "id", header: "运行 ID", numeric: true, sortable: true, width: 110 },
-  { key: "task", header: "任务", sortable: true },
-  { key: "owner", header: "发起人", width: 96 },
-  {
-    key: "state",
-    header: "状态",
-    width: 96,
-    render: (row) => (
-      <Tag variant={stateVariant[row.state]} size="sm" dot>
-        {row.state}
-      </Tag>
-    ),
-  },
-  // 可排序表头 = 文案 + 排序钮 + SortGlyph：列宽要放得下整个头，否则示例里读不出列名
-  { key: "duration", header: "用时（秒）", numeric: true, sortable: true, width: 132 },
-  { key: "cost", header: "消耗 token", numeric: true, sortable: true, width: 120 },
-]
-
-const meta = {
-  title: "Composite/DataTable",
-  component: DataTable,
-  parameters: { layout: "padded" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof DataTable<Run>>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const base = {
-  columns,
-  rows,
-  rowKey: (row: Run) => row.id,
-  caption: "近期运行记录",
-}
-
-export const Default: Story = {
-  args: base,
-}
-
-export const Dense: Story = {
-  name: "密档（行高 32）",
-  args: { ...base, density: "dense" },
-}
-
-export const Sortable: Story = {
-  name: "排序三态（升 → 降 → 取消）",
-  args: base,
-  render: (args) => {
-    const [sort, setSort] = useState<DataTableSort | null>({ key: "cost", direction: "desc" })
-    return <DataTable {...args} sort={sort} onSortChange={setSort} />
-  },
-}
-
-export const SortDisabled: Story = {
-  name: "排序禁用（未接 onSortChange）",
-  args: { ...base, sort: { key: "cost", direction: "asc" } },
-}
-
-export const RowInteraction: Story = {
-  name: "行可点 + 选中态",
-  args: base,
-  render: (args) => {
-    const [selected, setSelected] = useState("r-1043")
-    return <DataTable {...args} selectedRowKey={selected} onRowClick={(row) => setSelected(row.id)} />
-  },
-}
-
-export const WithToolbar: Story = {
-  name: "带工具条槽",
-  args: {
-    ...base,
-    toolbar: (
-      <DataTableToolbar actions={<Button size="sm">导出</Button>}>
-        <span className="text-ow-fs-ui text-[color:var(--ow-text-2)]">近 7 天运行</span>
-        <span className="text-ow-fs-mark-md text-[color:var(--ow-text-3)] font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]">
-          5 条
-        </span>
-      </DataTableToolbar>
-    ),
-  },
-}
-
-export const Loading: Story = {
-  name: "加载（Skeleton 行）",
-  args: { ...base, rows: [], loading: true },
-}
-
-export const Empty: Story = {
-  name: "空态（EmptyState 原语）",
-  args: {
-    ...base,
-    rows: [],
-    emptyMessage: "这段时间没有运行记录",
-    emptyActionLabel: "新建任务",
-    onEmptyAction: () => {},
-  },
-}
-
-export const ErrorState: Story = {
-  name: "错误（一句人话 + mono 详情）",
-  args: {
-    ...base,
-    rows: [],
-    error: "没能取到运行记录，稍后再试一次。",
-    errorDetail: "GET /api/runs → 503 upstream_unavailable (req_9f3a1c)",
-  },
-}
-
-export const StickyHeader: Story = {
-  name: "表头吸顶",
-  args: { ...base, stickyHeader: true },
-  render: (args) => (
-    <div style={{ height: 220, overflowY: "auto" }}>
-      <DataTable {...args} rows={[...rows, ...rows.map((row) => ({ ...row, id: `${row.id}-b` }))]} />
-    </div>
-  ),
-}
-
-/** 双主题对照：同一份 demo 逐字复制，主题由 data-theme 局部驱动，组件内不写死主题。 */
-export const ThemePair: Story = {
-  name: "双主题对照",
-  args: base,
-  render: (args) => (
-    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
-      <div data-theme="light" style={{ background: "var(--ow-bg)", padding: 16 }}>
-        <DataTable {...args} />
-      </div>
-      <div data-theme="dark" style={{ background: "var(--ow-bg)", padding: 16 }}>
-        <DataTable {...args} />
-      </div>
-    </div>
-  ),
-}

package/src/components/composite/DataTable/DataTableSource.test.mjs

@@ -1,96 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
-const stories = await readFile(new URL("./DataTable.stories.tsx", import.meta.url), "utf8")
-
-test("DataTable 是 R3 中性件：无信标/荧黄任何形态", () => {
-  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
-})
-
-test("表头底 = --ow-surface-2（嵌套井档），行分隔 1px --ow-border", () => {
-  assert.match(source, /bg-\[var\(--ow-surface-2\)\]/)
-  assert.match(source, /border-b border-\[color:var\(--ow-border\)\]/)
-})
-
-test("行高 40 / 密档 32 走 row-h token，容器贴地 0 影 + 1px 边 + 圆角 12", () => {
-  assert.match(source, /var\(--ow-row-h-dense\)/)
-  assert.match(source, /var\(--ow-row-h\)/)
-  assert.match(source, /border border-\[color:var\(--ow-border\)\] \[border-radius:var\(--ow-radius-card\)\]/)
-  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
-})
-
-test("行 hover 用地面档 --ow-hover / press --ow-press（表格不是弹层，不用 pop 档）", () => {
-  assert.match(source, /hover:bg-\[var\(--ow-hover\)\]/)
-  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
-  assert.doesNotMatch(source, /--ow-hover-pop|--ow-press-pop/)
-})
-
-test("数字列 mono + tabular-nums + 右对齐", () => {
-  assert.match(
-    source,
-    /column\.numeric &&\s*"font-\[family-name:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]"/,
-  )
-  assert.match(source, /column\.align \?\? \(column\.numeric \? "end" : "start"\)/)
-})
-
-test("排序三态循环 asc → desc → null，且 aria-sort 与箭头形差双编码（R1）", () => {
-  assert.match(source, /if \(current\.direction === "asc"\) return \{ key, direction: "desc" \}/)
-  assert.match(source, /return null/)
-  assert.match(source, /aria-sort=/)
-  assert.match(source, /data-ow-part="sort-glyph"/)
-})
-
-test("排序头状态齐：hover / active / focus-visible / disabled 逐 token（无统一透明度）", () => {
-  assert.match(source, /focus-visible:\[box-shadow:var\(--ow-focus-shadow\)\]/)
-  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
-  // 断言里不写全字面量，避免 check-ds2 的 disabled 规则误伤本测试文件
-  assert.doesNotMatch(source, new RegExp(["disabled:", "opacity-"].join("")))
-  assert.doesNotMatch(source, new RegExp(["--ow-opacity", "-disabled"].join("")))
-})
-
-test("容器三态：空态走 EmptyState 原语、加载走 Skeleton 行、错误一句人话 + mono 详情", () => {
-  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
-  assert.match(source, /<Skeleton variant="line"/)
-  assert.match(source, /data-ow-part="error"[\s\S]*role="alert"/)
-  assert.match(source, /errorDetail[\s\S]*font-\[family-name:var\(--ow-font-mono\)\]/)
-})
-
-test("动效只用 ease-beacon + 120/200/320 档", () => {
-  assert.match(source, /ease-\[var\(--ow-ease-beacon\)\]/)
-  assert.doesNotMatch(source, /duration-\[(?!var\(--ow-dur-[123]\))/)
-})
-
-test("z 用 --ow-z-* 梯度（吸顶表头 = sticky 档）", () => {
-  assert.match(source, /z-\[var\(--ow-z-sticky\)\]/)
-})
-
-test("Tailwind 任意值 var() 全部带类型标注（ambiguous-arbitrary 铁律）", () => {
-  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
-  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
-})
-
-test("stories 覆盖全部变体状态 + 双主题、不写死主题", () => {
-  for (const name of [
-    "Dense",
-    "Sortable",
-    "SortDisabled",
-    "RowInteraction",
-    "WithToolbar",
-    "Loading",
-    "Empty",
-    "ErrorState",
-    "StickyHeader",
-    "ThemePair",
-  ]) {
-    assert.match(stories, new RegExp(`export const ${name}\\b`))
-  }
-  assert.match(stories, /data-theme="light"/)
-  assert.match(stories, /data-theme="dark"/)
-})
-
-test("DataTableToolbar 是贴合工具条外壳（底 surface + 底边 1px，无自身圆角）", () => {
-  assert.match(source, /export function DataTableToolbar/)
-  assert.match(source, /data-slot="data-table-toolbar"/)
-})