@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,373 +0,0 @@
-"use client"
-
-import { type ReactNode, useId } from "react"
-import { cn } from "../../../lib/utils"
-import { Button } from "../../primitives/Button"
-import { EmptyState } from "../../primitives/EmptyState"
-import { Skeleton } from "../Skeleton"
-
-/**
- * DataTable — DS 2.0 数据表（蓝图批次② 模式件 · R3 中性件，无信标元素）。
- *
- * 立面（§5）：贴地容器 0 影 + 1px `--ow-border`；表头底 `--ow-surface-2`（嵌套井档），
- * 行分隔 1px `--ow-border`；行 hover `--ow-hover` / press `--ow-press`（地面/面板档，
- * 不是 pop 档——表格不是弹层）。
- * 度量（§7）：行高 40（`--ow-row-h`），密档 32（`--ow-row-h-dense`）；容器圆角 12
- * （`--ow-radius-card`）。
- * 读数：`numeric` 列一律 mono + tabular-nums + 右对齐。
- * 状态（§6）：排序头 default/hover/press/focus-visible/disabled 齐；容器三态
- * 空（EmptyState 原语）/ 载（Skeleton 行，呼吸禁 shimmer）/ 错（`error` 一句人话 + mono 详情）。
- */
-
-export type DataTableAlign = "start" | "end"
-export type DataTableSortDirection = "asc" | "desc"
-export type DataTableSort = { key: string; direction: DataTableSortDirection }
-export type DataTableDensity = "default" | "dense"
-
-export interface DataTableColumn<T> {
-  /** 列标识；排序以此为键 */
-  key: string
-  /** 表头内容 */
-  header: ReactNode
-  /** 单元格渲染；缺省取 row[key] 的字符串形态 */
-  render?: (row: T, rowIndex: number) => ReactNode
-  /** 数字列：mono + tabular-nums + 右对齐（§7 读数口径） */
-  numeric?: boolean
-  /** 手动对齐；numeric 列默认 end */
-  align?: DataTableAlign
-  /** 该列可排序（表头变按钮，带三态排序图标） */
-  sortable?: boolean
-  /** 列宽，如 "160px" / "20%" */
-  width?: string | number
-  /** 表头为图标等非文本时的可访问名 */
-  headerLabel?: string
-}
-
-export interface DataTableProps<T> {
-  columns: DataTableColumn<T>[]
-  rows: T[]
-  /** 行 key 取值 */
-  rowKey: (row: T, index: number) => string
-  /** 行高档：default=40 · dense=32 */
-  density?: DataTableDensity
-  /** 当前排序；null = 未排序 */
-  sort?: DataTableSort | null
-  /** 点击可排序表头：asc → desc → 取消（传 null）三态循环 */
-  onSortChange?: (sort: DataTableSort | null) => void
-  /** 加载态：渲染 Skeleton 行，表头保留 */
-  loading?: boolean
-  /** 加载态骨架行数，默认 5 */
-  loadingRows?: number
-  /** 空态一句话（人话、不感叹、无 emoji），缺省「还没有数据」 */
-  emptyMessage?: ReactNode
-  /** 空态主按钮 */
-  emptyActionLabel?: string
-  onEmptyAction?: () => void
-  /** 错误一句人话；非空时替代表体 */
-  error?: string
-  /** 错误技术详情，mono ≤2 行 */
-  errorDetail?: string
-  /** 行点击（存在时行获得指针与键盘可达性） */
-  onRowClick?: (row: T, index: number) => void
-  /** 选中行 key（选中底 `--ow-selected-bg`，配合行首内容自带文字编码，R1） */
-  selectedRowKey?: string
-  /** 表格上方工具条槽（放 FilterBar / DataTableToolbar） */
-  toolbar?: ReactNode
-  /** 屏读用表格说明 */
-  caption?: string
-  /** 表头吸顶（z = --ow-z-sticky） */
-  stickyHeader?: boolean
-  className?: string
-}
-
-const cellPadding = "px-3"
-
-/**
- * 排序指示：上/下箭头两枚叠置，激活的一枚取 text，另一枚 text-3。
- * R1 双编码——方向由箭头「形状/位置」表达，颜色只是第二编码；未排序两枚同为 text-3。
- */
-function SortGlyph({ direction }: { direction?: DataTableSortDirection }) {
-  return (
-    <svg
-      className="shrink-0 w-3.5 h-3.5"
-      viewBox="0 0 14 14"
-      fill="none"
-      aria-hidden="true"
-      data-ow-part="sort-glyph"
-      data-ow-state={direction ?? "none"}
-    >
-      <desc>排序指示：上箭头为升序、下箭头为降序，激活方向着重显示。</desc>
-      <path
-        d="M4 6 7 3l3 3"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className={direction === "asc" ? "text-[color:var(--ow-text)]" : "text-[color:var(--ow-text-3)]"}
-      />
-      <path
-        d="M4 8l3 3 3-3"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className={direction === "desc" ? "text-[color:var(--ow-text)]" : "text-[color:var(--ow-text-3)]"}
-      />
-    </svg>
-  )
-}
-
-function nextSort(current: DataTableSort | null | undefined, key: string): DataTableSort | null {
-  if (!current || current.key !== key) return { key, direction: "asc" }
-  if (current.direction === "asc") return { key, direction: "desc" }
-  return null
-}
-
-function alignOf<T>(column: DataTableColumn<T>): DataTableAlign {
-  return column.align ?? (column.numeric ? "end" : "start")
-}
-
-export function DataTable<T>({
-  columns,
-  rows,
-  rowKey,
-  density = "default",
-  sort = null,
-  onSortChange,
-  loading = false,
-  loadingRows = 5,
-  emptyMessage = "还没有数据",
-  emptyActionLabel,
-  onEmptyAction,
-  error,
-  errorDetail,
-  onRowClick,
-  selectedRowKey,
-  toolbar,
-  caption,
-  stickyHeader = false,
-  className,
-}: DataTableProps<T>) {
-  const captionId = useId()
-  const rowHeight = density === "dense" ? "var(--ow-row-h-dense)" : "var(--ow-row-h)"
-  const showBody = !loading && !error && rows.length > 0
-  const showEmpty = !loading && !error && rows.length === 0
-
-  return (
-    <div
-      data-slot="data-table"
-      data-ow-density={density}
-      className={cn(
-        "w-full overflow-hidden bg-[var(--ow-surface)]",
-        "border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-card)]",
-        className,
-      )}
-    >
-      {toolbar}
-      <div className="w-full overflow-x-auto">
-        <table
-          className="w-full border-collapse text-ow-fs-ui text-[color:var(--ow-text)]"
-          aria-describedby={caption ? captionId : undefined}
-        >
-          {caption && (
-            <caption id={captionId} className="sr-only">
-              {caption}
-            </caption>
-          )}
-          <thead
-            data-ow-part="head"
-            className={cn("bg-[var(--ow-surface-2)]", stickyHeader && "sticky top-0 z-[var(--ow-z-sticky)]")}
-          >
-            <tr>
-              {columns.map((column) => {
-                const active = sort?.key === column.key ? sort.direction : undefined
-                const align = alignOf(column)
-                return (
-                  <th
-                    key={column.key}
-                    scope="col"
-                    data-ow-part="header-cell"
-                    aria-sort={
-                      column.sortable
-                        ? active === "asc"
-                          ? "ascending"
-                          : active === "desc"
-                            ? "descending"
-                            : "none"
-                        : undefined
-                    }
-                    style={{ width: column.width, height: rowHeight }}
-                    className={cn(
-                      cellPadding,
-                      "border-b border-[color:var(--ow-border)] font-medium",
-                      "text-[color:var(--ow-text-2)] whitespace-nowrap",
-                      align === "end" ? "text-right" : "text-left",
-                    )}
-                  >
-                    {column.sortable ? (
-                      <button
-                        type="button"
-                        data-ow-part="sort-button"
-                        data-ow-state={active ?? "none"}
-                        disabled={!onSortChange}
-                        aria-label={typeof column.header === "string" ? undefined : column.headerLabel}
-                        onClick={() => onSortChange?.(nextSort(sort, column.key))}
-                        className={cn(
-                          "inline-flex items-center gap-1.5 -mx-1 px-1 py-0.5 max-w-full",
-                          "bg-transparent border-none font-medium text-inherit cursor-pointer",
-                          "[border-radius:var(--ow-radius-2xs)]",
-                          "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
-                          "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
-                          "focus-visible:outline-none focus-visible:[box-shadow:var(--ow-focus-shadow)]",
-                          "disabled:cursor-not-allowed disabled:text-[color:var(--ow-disabled-text)] disabled:bg-transparent",
-                          active && "text-[color:var(--ow-text)]",
-                          align === "end" && "flex-row-reverse",
-                        )}
-                      >
-                        <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{column.header}</span>
-                        <SortGlyph direction={active} />
-                      </button>
-                    ) : (
-                      column.header
-                    )}
-                  </th>
-                )
-              })}
-            </tr>
-          </thead>
-          {showBody && (
-            <tbody data-ow-part="body">
-              {rows.map((row, rowIndex) => {
-                const key = rowKey(row, rowIndex)
-                const selected = selectedRowKey !== undefined && selectedRowKey === key
-                return (
-                  <tr
-                    key={key}
-                    data-ow-part="row"
-                    data-ow-role={selected ? "selected" : undefined}
-                    tabIndex={onRowClick ? 0 : undefined}
-                    aria-selected={selectedRowKey !== undefined ? selected : undefined}
-                    onClick={onRowClick ? () => onRowClick(row, rowIndex) : undefined}
-                    onKeyDown={
-                      onRowClick
-                        ? (event) => {
-                            // L3-2-1：只认落在行自己身上的键；行内的钮/链接自己处理 Enter/空格，
-                            // 不要在这里 preventDefault 把它们的默认 click 吃掉（鼠标路径有 stopPropagation，键盘没有）。
-                            if (event.target !== event.currentTarget) return
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault()
-                              onRowClick(row, rowIndex)
-                            }
-                          }
-                        : undefined
-                    }
-                    className={cn(
-                      "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
-                      "border-b border-[color:var(--ow-border)] last:border-b-0",
-                      "hover:bg-[var(--ow-hover)]",
-                      selected && "bg-[var(--ow-selected-bg)]",
-                      onRowClick &&
-                        "cursor-pointer active:bg-[var(--ow-press)] focus-visible:outline-none focus-visible:[box-shadow:var(--ow-focus-shadow)]",
-                    )}
-                  >
-                    {columns.map((column) => {
-                      const align = alignOf(column)
-                      return (
-                        <td
-                          key={column.key}
-                          data-ow-part="cell"
-                          style={{ height: rowHeight }}
-                          className={cn(
-                            cellPadding,
-                            align === "end" ? "text-right" : "text-left",
-                            column.numeric &&
-                              "font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]",
-                          )}
-                        >
-                          {column.render
-                            ? column.render(row, rowIndex)
-                            : String((row as Record<string, unknown>)[column.key] ?? "")}
-                        </td>
-                      )
-                    })}
-                  </tr>
-                )
-              })}
-            </tbody>
-          )}
-          {loading && (
-            <tbody data-ow-part="loading" aria-busy="true">
-              {Array.from({ length: loadingRows }, (_, index) => (
-                <tr key={`skeleton-${index}`} className="border-b border-[color:var(--ow-border)] last:border-b-0">
-                  {columns.map((column) => (
-                    <td key={column.key} style={{ height: rowHeight }} className={cellPadding}>
-                      <Skeleton variant="line" height={12} width={column.numeric ? "48%" : "72%"} />
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          )}
-        </table>
-      </div>
-      {showEmpty && (
-        /* R2 终扫：空态动作走 `action` 槽自传 secondary——空态不占行动极
-           （同 CatalogEmptyState / DesktopChatEmptyStateView）；EmptyState 的
-           actionLabel 快捷路径默认渲 primary，表格空态跟着它就多出一枚行动极。 */
-        <EmptyState
-          message={emptyMessage}
-          action={
-            emptyActionLabel ? (
-              <Button variant="secondary" size="md" onClick={onEmptyAction}>
-                {emptyActionLabel}
-              </Button>
-            ) : undefined
-          }
-          className="border-t border-[color:var(--ow-border)]"
-        />
-      )}
-      {error && (
-        <div
-          data-ow-part="error"
-          role="alert"
-          className="flex flex-col items-center gap-1.5 border-t border-[color:var(--ow-border)] px-4 py-8 text-center"
-        >
-          <p className="m-0 text-ow-fs-ui text-[color:var(--ow-text)]">{error}</p>
-          {errorDetail && (
-            <p className="m-0 max-w-full overflow-hidden text-ow-fs-mark-md leading-snug text-[color:var(--ow-text-3)] font-[family-name:var(--ow-font-mono)] [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2]">
-              {errorDetail}
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export interface DataTableToolbarProps {
-  /** 左侧：标题 / 计数 / 筛选件 */
-  children?: ReactNode
-  /** 右侧动作区：按钮组 */
-  actions?: ReactNode
-  className?: string
-}
-
-/**
- * DataTableToolbar — 贴在表格顶部的工具条外壳（FilterBar 的表格配方，见 FilterBar 文档）。
- * 只负责贴合：底 `--ow-surface`、底边 1px、无自身圆角（由 DataTable 容器裁切）。
- */
-export function DataTableToolbar({ children, actions, className }: DataTableToolbarProps) {
-  return (
-    <div
-      data-slot="data-table-toolbar"
-      className={cn(
-        "flex items-center gap-2 flex-wrap px-3 py-2",
-        "bg-[var(--ow-surface)] border-b border-[color:var(--ow-border)]",
-        className,
-      )}
-    >
-      <div className="flex items-center gap-2 flex-wrap min-w-0 flex-1">{children}</div>
-      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
-    </div>
-  )
-}

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

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Copy, Edit, Trash } from "../Icons"
-import { DetailOverflowMenu, UninstallConfirmDialog } from "./index"
-
-const meta = {
-  title: "Composite/DetailChrome",
-  component: DetailOverflowMenu,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof DetailOverflowMenu>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const defaultItems = [
-  { key: "edit", label: "编辑", icon: <Edit /> },
-  { key: "copy", label: "复制", icon: <Copy /> },
-  { key: "delete", label: "删除", icon: <Trash />, danger: true },
-]
-
-export const Default: Story = {
-  args: {
-    items: defaultItems,
-    onSelect: (key) => console.log("selected:", key),
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    items: defaultItems,
-    disabled: true,
-    onSelect: (key) => console.log("selected:", key),
-  },
-}
-
-export const WithDisabledItems: Story = {
-  args: {
-    items: [
-      { key: "edit", label: "编辑", icon: <Edit /> },
-      { key: "copy", label: "复制", icon: <Copy />, disabled: true },
-      { key: "delete", label: "删除", icon: <Trash />, danger: true },
-    ],
-    onSelect: (key) => console.log("selected:", key),
-  },
-}
-
-export const ConfirmDialog: Story = {
-  render: () => (
-    <UninstallConfirmDialog
-      title="确认卸载"
-      description="卸载后将无法使用该工具，是否继续？"
-      onCancel={() => console.log("cancelled")}
-      onConfirm={() => console.log("confirmed")}
-    />
-  ),
-  parameters: {
-    layout: "fullscreen",
-  },
-}

package/src/components/composite/DetailChrome/DetailChromeSource.test.mjs

@@ -1,31 +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")
-
-test("溢出菜单归口 primitives/Menu，不再自管开合与定位", () => {
-  assert.match(source, /import \{ Menu, type MenuItem \} from "\.\.\/\.\.\/primitives\/Menu"/)
-  assert.doesNotMatch(source, /useState|useEffect|addEventListener/)
-  assert.doesNotMatch(source, /className="skd__more/)
-  assert.doesNotMatch(source, /from "\.\.\/\.\.\/primitives\/Dropdown"/)
-})
-
-test("触发器是 ghost icon-only 按钮，不再 unstyled 手搓", () => {
-  assert.match(source, /variant="ghost"/)
-  assert.doesNotMatch(source, /variant="unstyled"/)
-  assert.doesNotMatch(source, /btn btn--icon/)
-  assert.match(source, /aria-label=\{label\}/)
-})
-
-test("卸载确认归口 composite/Dialog 的 danger 便捷档，不再 createPortal 手搓模态", () => {
-  assert.match(source, /import \{ Dialog \} from "\.\.\/Dialog"/)
-  assert.match(source, /variant="danger"/)
-  assert.match(source, /confirmLabel="卸载"/)
-  assert.doesNotMatch(source, /createPortal|className="ow-modal-host"|className="ow-confirm"/)
-})
-
-test("中性件（R3）：禁信标/荧黄；无 Tailwind 歧义任意值", () => {
-  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
-  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
-})

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

@@ -1,94 +0,0 @@
-"use client"
-
-import type { ReactNode } from "react"
-import { Button } from "../../primitives"
-import { Menu, type MenuItem } from "../../primitives/Menu"
-import { Dialog } from "../Dialog"
-import { More, Trash } from "../Icons"
-
-/**
- * DetailChrome — 详情页头部零件（DS 2.0 模式层薄壳）。
- *
- * 蓝图批次② 已把菜单归口 `primitives/Menu`、模态归口 `composite/Dialog`；
- * 本文件只留详情页语境下的两个配方，外观与状态全部由那两个基座承担：
- * - 溢出菜单：ghost icon-only 触发器 + Menu（弹层内行 hover 走 -pop 档，portal 后 fixed 定位不被裁）。
- * - 卸载确认：Dialog 的 danger 便捷确认档（scrim + modal 影 + 1px 边）。
- * 中性件（R3）：不引信标/荧黄。旧 `.skd__more` / `.ow-confirm` 手搓样式已废止。
- */
-
-/** @deprecated 改用 `MenuItem`（primitives/Menu）。保留字段以免包外 items 数组要改。 */
-export type DetailMenuItem = {
-  key: string
-  label: string
-  icon: ReactNode
-  danger?: boolean
-  disabled?: boolean
-}
-
-export function DetailOverflowMenu({
-  items,
-  disabled,
-  onSelect,
-  label = "更多操作",
-}: {
-  items: DetailMenuItem[]
-  disabled?: boolean
-  onSelect: (key: string) => void
-  /** 触发器无障碍名，默认「更多操作」 */
-  label?: string
-}) {
-  const menuItems: MenuItem[] = items.map((item) => ({
-    key: item.key,
-    label: item.label,
-    icon: item.icon,
-    danger: item.danger,
-    disabled: item.disabled,
-  }))
-
-  return (
-    <Menu
-      items={menuItems}
-      width={160}
-      align="end"
-      onSelect={onSelect}
-      ariaLabel={label}
-      trigger={
-        <Button
-          variant="ghost"
-          size="sm"
-          aria-label={label}
-          title={label}
-          disabled={disabled}
-          icon={<More width={16} height={16} aria-hidden="true" />}
-        />
-      }
-    />
-  )
-}
-
-export function UninstallConfirmDialog({
-  title,
-  description,
-  onCancel,
-  onConfirm,
-}: {
-  title: string
-  description: string
-  onCancel: () => void
-  onConfirm: () => void
-}) {
-  return (
-    <Dialog
-      open
-      variant="danger"
-      title={title}
-      icon={<Trash aria-hidden="true" />}
-      onClose={onCancel}
-      onConfirm={onConfirm}
-      confirmLabel="卸载"
-      cancelLabel="取消"
-    >
-      {description}
-    </Dialog>
-  )
-}