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

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

@@ -1,264 +0,0 @@
-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

@@ -1,77 +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("./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

@@ -1,224 +0,0 @@
-"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
-}