@orbit-work/ui 0.1.0

package/src/components/domain/office/CsvPreview/CsvPreview.stories.tsx

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { CsvPreview } from "./index"
+
+const meta = {
+  title: "Office/CsvPreview",
+  component: CsvPreview,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CsvPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const simpleCsv = `Name,Age,City
+Alice,28,New York
+Bob,35,Los Angeles
+Charlie,42,Chicago`
+
+const productCsv = `Product ID,Product Name,Category,Price,Stock,Supplier
+P001,Laptop,Electronics,899.99,45,TechCorp
+P002,Mouse,Electronics,19.99,230,AccessoriesPlus
+P003,Desk Chair,Furniture,299.00,12,OfficeSupply Co
+P004,Monitor,Electronics,449.50,67,TechCorp
+P005,Keyboard,Electronics,79.99,156,AccessoriesPlus`
+
+const salesCsv = `Date,Region,Sales Rep,Product,Quantity,Revenue,Commission
+2024-01-15,North,John Smith,Widget A,120,12000.00,600.00
+2024-01-15,South,Mary Johnson,Widget B,85,8500.00,425.00
+2024-01-16,East,Bob Williams,Widget A,200,20000.00,1000.00
+2024-01-16,West,Alice Brown,Widget C,150,15000.00,750.00
+2024-01-17,North,John Smith,Widget B,90,9000.00,450.00
+2024-01-17,South,Mary Johnson,Widget A,175,17500.00,875.00
+2024-01-18,East,Bob Williams,Widget C,110,11000.00,550.00
+2024-01-18,West,Alice Brown,Widget B,95,9500.00,475.00`
+
+const quotedCsv = `Name,Description,Notes
+"Smith, John","Senior Developer","Likes ""clean code"""
+"Johnson, Mary","Product Manager","Works on ""Project Alpha"""
+"Brown, Alice","Designer","Specializes in ""UI/UX"""`
+
+const tabDelimitedCsv = `Name	Age	Department	Salary
+John	28	Engineering	85000
+Mary	35	Marketing	72000
+Bob	42	Sales	95000`
+
+const semicolonCsv = `Name;Email;Phone
+Alice;alice@example.com;555-0101
+Bob;bob@example.com;555-0102
+Charlie;charlie@example.com;555-0103`
+
+const largeCsv = `ID,First Name,Last Name,Email,Department,Hire Date,Salary,Status
+1,John,Smith,john.smith@company.com,Engineering,2020-03-15,85000,Active
+2,Mary,Johnson,mary.j@company.com,Marketing,2019-07-22,72000,Active
+3,Bob,Williams,bob.w@company.com,Sales,2021-01-10,95000,Active
+4,Alice,Brown,alice.b@company.com,Design,2020-11-05,78000,Active
+5,Charlie,Davis,charlie.d@company.com,Engineering,2022-02-14,82000,Active
+6,Diana,Miller,diana.m@company.com,HR,2018-09-30,68000,Active
+7,Edward,Wilson,edward.w@company.com,Finance,2019-12-01,90000,Active
+8,Fiona,Moore,fiona.m@company.com,Engineering,2021-06-18,88000,Active
+9,George,Taylor,george.t@company.com,Sales,2020-08-25,92000,Active
+10,Hannah,Anderson,hannah.a@company.com,Marketing,2022-04-12,70000,Active
+11,Ian,Thomas,ian.t@company.com,Engineering,2019-05-20,95000,Active
+12,Julia,Jackson,julia.j@company.com,Design,2021-10-08,76000,Active
+13,Kevin,White,kevin.w@company.com,Sales,2020-02-29,89000,Active
+14,Laura,Harris,laura.h@company.com,HR,2022-01-15,65000,Active
+15,Michael,Martin,michael.m@company.com,Finance,2019-11-11,93000,Active
+16,Nancy,Thompson,nancy.t@company.com,Engineering,2021-03-22,84000,Active
+17,Oliver,Garcia,oliver.g@company.com,Marketing,2020-07-07,71000,Active
+18,Paula,Martinez,paula.m@company.com,Sales,2022-05-30,91000,Active
+19,Quinn,Robinson,quinn.r@company.com,Design,2019-08-14,79000,Active
+20,Rachel,Clark,rachel.c@company.com,Engineering,2021-12-01,87000,Active`
+
+const numericCsv = `Quarter,Revenue,Expenses,Net Profit,Growth %
+Q1 2023,1250000,890000,360000,8.5
+Q2 2023,1340000,920000,420000,12.3
+Q3 2023,1580000,980000,600000,15.7
+Q4 2023,1720000,1020000,700000,18.2`
+
+const emptyCellsCsv = `Name,Age,City,Country
+Alice,28,,USA
+Bob,,London,UK
+Charlie,42,Chicago,
+,,Paris,France`
+
+const singleColumnCsv = `Items
+Apple
+Banana
+Orange
+Grape
+Mango`
+
+const singleRowCsv = `Name,Email,Phone
+John Doe,john@example.com,555-0100`
+
+export const Default: Story = {
+  args: {
+    content: simpleCsv,
+    fileName: "data.csv",
+  },
+}
+
+export const Products: Story = {
+  args: {
+    content: productCsv,
+    fileName: "products.csv",
+  },
+}
+
+export const SalesData: Story = {
+  args: {
+    content: salesCsv,
+    fileName: "sales-report.csv",
+  },
+}
+
+export const QuotedFields: Story = {
+  args: {
+    content: quotedCsv,
+    fileName: "employees.csv",
+  },
+}
+
+export const TabDelimited: Story = {
+  args: {
+    content: tabDelimitedCsv,
+    fileName: "departments.tsv",
+  },
+}
+
+export const SemicolonDelimited: Story = {
+  args: {
+    content: semicolonCsv,
+    fileName: "contacts.csv",
+  },
+}
+
+export const LargeDataset: Story = {
+  args: {
+    content: largeCsv,
+    fileName: "employees.csv",
+  },
+}
+
+export const NumericData: Story = {
+  args: {
+    content: numericCsv,
+    fileName: "quarterly-report.csv",
+  },
+}
+
+export const WithEmptyCells: Story = {
+  args: {
+    content: emptyCellsCsv,
+    fileName: "incomplete-data.csv",
+  },
+}
+
+export const SingleColumn: Story = {
+  args: {
+    content: singleColumnCsv,
+    fileName: "items.csv",
+  },
+}
+
+export const SingleRow: Story = {
+  args: {
+    content: singleRowCsv,
+    fileName: "single-record.csv",
+  },
+}
+
+export const NoFileName: Story = {
+  args: {
+    content: simpleCsv,
+  },
+}
+
+export const WideTable: Story = {
+  args: {
+    content: `A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P
+1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
+17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32
+33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48`,
+    fileName: "wide-data.csv",
+  },
+}
+
+export const Loading: Story = {
+  name: "加载态（DataTable 骨架行呼吸）",
+  args: {
+    content: salesCsv,
+    fileName: "sales-report.csv",
+    loading: true,
+  },
+}
+
+export const Failed: Story = {
+  name: "错误态（一句人话 ＋ mono 详情）",
+  args: {
+    content: "",
+    fileName: "sales-report.csv",
+    error: "这份表格读不出来，可能在传输中被截断了。",
+    errorDetail: "CsvParseError: unexpected end of input at row 128",
+  },
+}
+
+export const EmptyFile: Story = {
+  name: "空态（文件没有数据）",
+  args: {
+    content: "",
+    fileName: "empty.csv",
+  },
+}
+
+/* ── 源码档（defaultMode="raw"）──────────────────────────────────────────
+   原来 18 个 story 全落在表格档，源码档的三态在 Storybook 里一格都看不见。 */
+
+export const RawDefault: Story = {
+  name: "源码档（原始 CSV 文本）",
+  args: {
+    content: salesCsv,
+    fileName: "sales-report.csv",
+    defaultMode: "raw",
+  },
+}
+
+export const RawLoading: Story = {
+  name: "源码档 · 加载态（Skeleton 呼吸）",
+  args: {
+    content: salesCsv,
+    fileName: "sales-report.csv",
+    defaultMode: "raw",
+    loading: true,
+  },
+}
+
+export const RawFailed: Story = {
+  name: "源码档 · 错误态（一句人话 ＋ mono 详情）",
+  args: {
+    content: "",
+    fileName: "sales-report.csv",
+    defaultMode: "raw",
+    error: "这份表格读不出来，可能在传输中被截断了。",
+    errorDetail: "CsvParseError: unexpected end of input at row 128",
+  },
+}
+
+export const CustomWidth: Story = {
+  render: () => (
+    <div style={{ maxWidth: 600, border: "1px solid var(--ow-border)", borderRadius: 8 }}>
+      <CsvPreview content={salesCsv} fileName="sales-report.csv" />
+    </div>
+  ),
+}
+
+export const FullWidth: Story = {
+  render: () => (
+    <div style={{ height: 500, border: "1px solid var(--ow-border)", borderRadius: 8 }}>
+      <CsvPreview content={largeCsv} fileName="employees.csv" />
+    </div>
+  ),
+}

package/src/components/domain/office/CsvPreview/CsvPreviewSource.test.mjs

@@ -0,0 +1,77 @@
+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("./CsvPreview.stories.tsx", import.meta.url), "utf8")
+
+test("表体归口 DataTable 语法，不再自己搭 <table>", () => {
+  assert.match(source, /import \{ DataTable, type DataTableColumn, DataTableToolbar \}/)
+  assert.match(source, /<DataTable<CsvRow>/)
+  assert.doesNotMatch(source, /<table|<thead|<tbody/)
+})
+
+test("行高密档 32 ＋ 表头吸顶由 DataTable 承担", () => {
+  assert.match(source, /density="dense"/)
+  assert.match(source, /stickyHeader/)
+})
+
+test("表格/源码切换走 SegmentedControl 原语（旧两枚手搓 Button 已归口）", () => {
+  assert.match(source, /import \{ SegmentedControl \}/)
+  assert.match(source, /<SegmentedControl[\s\S]*aria-label="预览方式"/)
+  assert.doesNotMatch(source, /data-ow-part="tab"/)
+})
+
+test("单元格与元信息 mono + tabular-nums（§7 读数）", () => {
+  assert.match(source, /numeric: true as const/)
+  assert.match(source, /font-\[family-name:var\(--ow-font-mono\)\][\s\S]*\[font-variant-numeric:tabular-nums\]/)
+})
+
+test("容器三态（空/载/错）转交 DataTable，不在本件重造", () => {
+  assert.match(source, /loading=\{loading\}/)
+  assert.match(source, /error=\{error\}/)
+  assert.match(source, /errorDetail=\{errorDetail\}/)
+  assert.match(source, /emptyMessage=/)
+})
+
+test("R3 中性件：无信标/荧黄", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
+})
+
+test("Tailwind 任意值 var() 带类型标注", () => {
+  assert.equal(source.match(/(?:text|border)-\[(?!color:)var\(/g), null)
+  assert.equal(source.match(/font-\[(?!family-name:)var\(/g), null)
+})
+
+// R2：源码档原来整支早返回，loading/error/errorDetail 三个 prop 被忽略——载中渲空白、
+// 出错渲原始文本，§6 三态在这一档缺席，而文件头注释却写着「三态都由 DataTable 承担」。
+test("源码档也有 §6 三态：Skeleton 呼吸载 / InlineMessage 人话＋mono 详情错", () => {
+  assert.match(source, /import \{ Skeleton \} from "\.\.\/\.\.\/\.\.\/composite\/Skeleton"/)
+  assert.match(source, /import \{ InlineMessage \} from "\.\.\/\.\.\/\.\.\/primitives\/InlineMessage"/)
+  assert.match(source, /mode === "raw"[\s\S]*?data-ow-part="loading"[\s\S]*?<Skeleton variant="line"/)
+  assert.match(source, /data-ow-part="error"[\s\S]*?<InlineMessage variant="error" detail=\{errorDetail\}>/)
+})
+
+// 卡骨架收口口径：容器 14（p-3.5），源码面原来是 p-4＝16。
+test("源码面内距收到 14（p-3.5），不再是裸 16", () => {
+  assert.match(source, /data-ow-part="raw" className="min-h-0 flex-1 overflow-auto p-3\.5"/)
+  assert.doesNotMatch(source, /data-ow-part="raw" className="min-h-0 flex-1 overflow-auto p-4"/)
+})
+
+// story 覆盖：源码档三态在 Storybook 里可见（defaultMode="raw" 是为此开的初始档入口）。
+test("stories 覆盖源码档三态", () => {
+  assert.match(stories, /defaultMode: "raw"/)
+  assert.match(stories, /export const RawLoading/)
+  assert.match(stories, /export const RawFailed/)
+})
+
+// 退化修复：600 宽下 Date / Sales Rep / Product 三列被 DataTable 的 `table w-full` 压折成
+// 两行、密档行高 32 翻倍。CSV 每格是一条读数，不许折行——表格改列宽随内容 + 单元格 nowrap，
+// 横向溢出交给 DataTable 自带的 overflow-x:auto。
+test("表格档单元格不折行：列宽随内容 + nowrap，横向靠滚动", () => {
+  const tableClass = source.match(/<DataTable<CsvRow>[\s\S]*?className="([^"]*)"/)?.[1] ?? ""
+  assert.match(tableClass, /\[&_table\]:w-auto/)
+  assert.match(tableClass, /\[&_table\]:min-w-full/)
+  assert.match(tableClass, /\[&_td\]:whitespace-nowrap/)
+  assert.match(tableClass, /\[&_th\]:whitespace-nowrap/)
+})

package/src/components/domain/office/CsvPreview/index.tsx

@@ -0,0 +1,224 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { cn } from "../../../../lib/utils"
+import { DataTable, type DataTableColumn, DataTableToolbar } from "../../../composite/DataTable"
+import { Skeleton } from "../../../composite/Skeleton"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+import { SegmentedControl } from "../../../primitives/SegmentedControl"
+
+export type CsvPreviewProps = {
+  /** Raw CSV content string */
+  content: string
+  /** File name displayed in the header */
+  fileName?: string
+  /** 加载态：交给 DataTable 的 Skeleton 行 */
+  loading?: boolean
+  /** 错误一句人话 */
+  error?: string
+  /** 错误技术详情，mono ≤2 行 */
+  errorDetail?: string
+  /** 初始预览方式，默认表格档；源码档的三态与表格档同口径。 */
+  defaultMode?: "table" | "raw"
+  className?: string
+}
+
+type CsvRow = { __i: number; cells: string[] }
+
+/**
+ * CsvPreview —— DS 2.0 表格预览适配器（蓝图批次④ preview 域，坐 PreviewDialog 壳内）。
+ *
+ * 表体一律走 `DataTable` 语法：表头底 `--ow-surface-2`、行高 32（密档）、行分隔 1px
+ * `--ow-border`、行 hover 地面档 `--ow-hover`（表格不是弹层，不用 pop 档）——这些口径
+ * 由 DataTable 单点承担，本适配器只负责解析与「表格 / 源码」切换。
+ * 切换用 `SegmentedControl` 原语（旧版两枚手搓 Button 的选中态已归口）。
+ * 单元格全部 mono＋tabular-nums（CSV 每列都算读数，§7）。
+ * 容器三态：表格档由 DataTable 承担（EmptyState / Skeleton 呼吸 / 一句人话＋mono 详情）；
+ * 源码档走同一套出口的手写版（Skeleton 呼吸 / InlineMessage 人话＋mono 详情）——
+ * 原先源码档整支早返回，loading/error/errorDetail 三个 prop 被忽略，载中渲空白、
+ * 出错渲原始文本，§6 三态在这一档缺席。
+ * R3 中性件：不带信标/荧黄。
+ */
+export function CsvPreview({
+  content,
+  fileName,
+  loading = false,
+  error,
+  errorDetail,
+  defaultMode = "table",
+  className = "",
+}: CsvPreviewProps): React.ReactElement {
+  const [mode, setMode] = useState<"table" | "raw">(defaultMode)
+  const { headers, rows } = useMemo(() => parseCsv(content), [content])
+
+  const columns: DataTableColumn<CsvRow>[] = useMemo(
+    () => [
+      {
+        key: "__i",
+        header: "#",
+        headerLabel: "行号",
+        numeric: true,
+        width: 56,
+        render: (row) => row.__i + 1,
+      },
+      ...headers.map((header, colIndex) => ({
+        key: `c${colIndex}`,
+        header,
+        // numeric＝mono + tabular-nums（CSV 单元格算读数），对齐仍按文本从左起。
+        numeric: true as const,
+        align: "start" as const,
+        render: (row: CsvRow) => row.cells[colIndex] ?? "",
+      })),
+    ],
+    [headers],
+  )
+
+  const tableRows: CsvRow[] = useMemo(() => rows.map((cells, i) => ({ __i: i, cells })), [rows])
+
+  const toolbar = (
+    <DataTableToolbar
+      actions={
+        <SegmentedControl
+          aria-label="预览方式"
+          size="sm"
+          value={mode}
+          onChange={(next) => setMode(next as "table" | "raw")}
+          options={[
+            { value: "table", label: "表格" },
+            { value: "raw", label: "源码" },
+          ]}
+        />
+      }
+    >
+      {fileName && (
+        <span
+          data-ow-part="filename"
+          className="truncate font-[family-name:var(--ow-font-mono)] text-ow-fs-ui font-medium [font-variant-numeric:tabular-nums] text-[color:var(--ow-text)]"
+        >
+          {fileName}
+        </span>
+      )}
+      <span
+        data-ow-part="meta"
+        className="font-[family-name:var(--ow-font-mono)] text-ow-fs-eyebrow [font-variant-numeric:tabular-nums] text-[color:var(--ow-text-3)]"
+      >
+        {rows.length} 行 × {headers.length} 列
+      </span>
+    </DataTableToolbar>
+  )
+
+  if (mode === "raw") {
+    return (
+      <div data-slot="csv-preview" className={cn("flex min-h-0 flex-1 flex-col overflow-hidden", className)}>
+        {toolbar}
+        {/* §6 容器三态在源码档也齐：载＝Skeleton 呼吸（禁 shimmer）· 错＝InlineMessage
+            一句人话＋折叠 mono 详情 · 其余渲源码。内距按卡骨架收口口径 14（原 p-4＝16）。 */}
+        {loading ? (
+          <div
+            data-ow-part="loading"
+            role="status"
+            aria-live="polite"
+            className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden p-3.5"
+          >
+            <Skeleton variant="line" height={14} width="72%" />
+            <Skeleton variant="line" height={14} />
+            <Skeleton variant="line" height={14} width="88%" />
+            <Skeleton variant="line" height={14} width="64%" />
+          </div>
+        ) : error ? (
+          <div data-ow-part="error" className="min-h-0 flex-1 overflow-auto p-3.5">
+            <InlineMessage variant="error" detail={errorDetail}>
+              {error}
+            </InlineMessage>
+          </div>
+        ) : (
+          <div data-ow-part="raw" className="min-h-0 flex-1 overflow-auto p-3.5">
+            <pre className="m-0 whitespace-pre-wrap break-words font-[family-name:var(--ow-font-mono)] text-ow-fs-ui font-normal leading-[1.6] [font-variant-numeric:tabular-nums] text-[color:var(--ow-text-2)]">
+              <code>{content}</code>
+            </pre>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div data-slot="csv-preview" className={cn("flex min-h-0 flex-1 flex-col overflow-hidden", className)}>
+      <DataTable<CsvRow>
+        /* 列宽随内容：DataTable 默认 `table w-full` 会把列压进容器宽度，CSV 的
+           Date / Sales Rep / Product 这种带空格或连字符的短语就被折成两行、行高从
+           密档 32 翻成 64——CSV 每格都是一条读数，折行等于把一个值劈成两截。
+           这里把表格改成 `w-auto min-w-full`（够窄时仍撑满容器，超宽时按内容延展），
+           单元格一律 nowrap，横向溢出交给 DataTable 自带的 overflow-x:auto 滚动。 */
+        className="min-h-0 flex-1 [&_table]:w-auto [&_table]:min-w-full [&_td]:whitespace-nowrap [&_th]:whitespace-nowrap"
+        toolbar={toolbar}
+        caption={fileName ? `${fileName} 的表格预览` : "表格预览"}
+        columns={columns}
+        rows={tableRows}
+        rowKey={(row) => String(row.__i)}
+        density="dense"
+        stickyHeader
+        loading={loading}
+        error={error}
+        errorDetail={errorDetail}
+        emptyMessage="文件是空的，没有可预览的数据。"
+      />
+    </div>
+  )
+}
+
+function parseCsv(content: string): { headers: string[]; rows: string[][] } {
+  const lines = content.trim().split(/\r?\n/)
+  if (lines.length === 0) return { headers: [], rows: [] }
+
+  const delimiter = detectDelimiter(lines[0] ?? "")
+  const headers = parseCsvLine(lines[0] ?? "", delimiter)
+  const rows = lines
+    .slice(1)
+    .filter((l) => l.trim())
+    .map((line) => parseCsvLine(line, delimiter))
+
+  return { headers, rows }
+}
+
+function detectDelimiter(line: string): string {
+  const commaCount = (line.match(/,/g) ?? []).length
+  const tabCount = (line.match(/\t/g) ?? []).length
+  const semicolonCount = (line.match(/;/g) ?? []).length
+  if (tabCount > commaCount && tabCount >= semicolonCount) return "\t"
+  if (semicolonCount > commaCount) return ";"
+  return ","
+}
+
+function parseCsvLine(line: string, delimiter: string): string[] {
+  const cells: string[] = []
+  let current = ""
+  let inQuotes = false
+
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i]
+    if (inQuotes) {
+      if (ch === '"') {
+        if (line[i + 1] === '"') {
+          current += '"'
+          i += 1
+        } else {
+          inQuotes = false
+        }
+      } else {
+        current += ch
+      }
+    } else {
+      if (ch === '"') {
+        inQuotes = true
+      } else if (ch === delimiter) {
+        cells.push(current)
+        current = ""
+      } else {
+        current += ch
+      }
+    }
+  }
+  cells.push(current)
+  return cells
+}