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

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

@@ -1,265 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useEffect, useState } from "react"
-import { BeaconSpinner } from "../../../composite/BeaconSpinner"
-import { OfficePreview } from "./index"
-
-const meta = {
-  title: "Office/OfficePreview",
-  component: OfficePreview,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof OfficePreview>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// 本地 fixture（.storybook/public/fixtures/，见该目录 README）。原来三个 src 全是公网外链
-// （calibre-ebook.com / file-examples.com / scholar.harvard.edu），离线与 CI 下一律取不到，
-// 十几个「内容 story」渲出来全是错误态卡——Storybook 里根本看不到真实内容。
-const sampleDocUrl = "/fixtures/sample.docx"
-const sampleXlsxUrl = "/fixtures/sample.xlsx"
-const samplePptxUrl = "/fixtures/sample.pptx"
-/** 故意取不到的本地路径：staticDirs 直接 404，不出网，也不会把 networkidle 拖挂。 */
-const missingDocUrl = "/fixtures/does-not-exist.docx"
-
-export const WordDefault: Story = {
-  args: {
-    src: sampleDocUrl,
-    fileType: "word",
-  },
-}
-
-export const WordWithOpenButton: Story = {
-  args: {
-    src: sampleDocUrl,
-    fileType: "word",
-    onOpen: () => console.log("Opening with system default"),
-  },
-}
-
-export const WordWithOpenWithMenu: Story = {
-  args: {
-    src: sampleDocUrl,
-    fileType: "word",
-    onRequestOpenWithOptions: async () => [
-      { label: "使用 Microsoft Word 打开", id: "word", icon: "📄" },
-      { label: "使用 Google Docs 打开", id: "google", icon: "🌐" },
-      { label: "使用 Pages 打开", id: "pages", icon: "📝" },
-    ],
-    onOpenWith: (option) => console.log("Opening with:", option.label),
-  },
-}
-
-export const WordLoading: Story = {
-  args: {
-    fileType: "word",
-    loading: (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 12,
-          color: "var(--ow-text-2)",
-        }}
-      >
-        {/* §9 旋转圈退役：原是手搓 3px 描边环自转 1s、断口色取 --ow-primary（行动极落点，
-            暗档即荧黄）。改挂锁定件 BeaconSpinner size=32 → 完整信标，加载态占状态极·限一处，
-            下面「正在加载」一句出 R1 文字编码。 */}
-        <BeaconSpinner size={32} aria-label="正在加载 Word 文档" />
-        <p>正在加载 Word 文档...</p>
-      </div>
-    ),
-  },
-}
-
-export const WordEmpty: Story = {
-  args: {
-    fileType: "word",
-  },
-}
-
-/** 打不开：内建错误态＝InlineMessage error tint 三件套。裸英文（`Failed to fetch` 一类）
- *  归成中文一句人话，原文降级到折叠的 mono 详情（§6 人话一句 ＋ mono ≤2 行）。 */
-export const WordError: Story = {
-  args: {
-    src: missingDocUrl,
-    fileType: "word",
-  },
-}
-
-/** 载入：内建 Skeleton 呼吸（禁 shimmer）。story 把 fetch 冻在 pending 好让这一态停住。 */
-export const WordLoadingSkeleton: Story = {
-  decorators: [
-    (Story) => {
-      const original = globalThis.fetch
-      globalThis.fetch = (() => new Promise<Response>(() => {})) as typeof fetch
-      useEffect(
-        () => () => {
-          globalThis.fetch = original
-        },
-        [original],
-      )
-      return <Story />
-    },
-  ],
-  args: {
-    src: "/fixtures/never.docx",
-    fileType: "word",
-  },
-}
-
-export const ExcelDefault: Story = {
-  args: {
-    src: sampleXlsxUrl,
-    fileType: "excel",
-  },
-}
-
-export const ExcelWithOpenButton: Story = {
-  args: {
-    src: sampleXlsxUrl,
-    fileType: "excel",
-    onOpen: () => console.log("Opening with system default"),
-  },
-}
-
-export const ExcelWithOpenWithMenu: Story = {
-  args: {
-    src: sampleXlsxUrl,
-    fileType: "excel",
-    onRequestOpenWithOptions: async () => [
-      { label: "使用 Microsoft Excel 打开", id: "excel", icon: "📊" },
-      { label: "使用 Google Sheets 打开", id: "sheets", icon: "🌐" },
-      { label: "使用 Numbers 打开", id: "numbers", icon: "🔢" },
-    ],
-    onOpenWith: (option) => console.log("Opening with:", option.label),
-  },
-}
-
-export const ExcelEmpty: Story = {
-  args: {
-    fileType: "excel",
-  },
-}
-
-export const PowerPointDefault: Story = {
-  args: {
-    src: samplePptxUrl,
-    fileType: "powerpoint",
-  },
-}
-
-export const PowerPointWithNavigation: Story = {
-  render: () => {
-    return (
-      <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
-        <OfficePreview src={samplePptxUrl} fileType="powerpoint" style={{ flex: 1 }} />
-      </div>
-    )
-  },
-}
-
-export const PowerPointWithOpenButton: Story = {
-  args: {
-    src: samplePptxUrl,
-    fileType: "powerpoint",
-    onOpen: () => console.log("Opening with system default"),
-  },
-}
-
-export const PowerPointWithOpenWithMenu: Story = {
-  args: {
-    src: samplePptxUrl,
-    fileType: "powerpoint",
-    onRequestOpenWithOptions: async () => [
-      { label: "使用 Microsoft PowerPoint 打开", id: "powerpoint", icon: "📽️" },
-      { label: "使用 Google Slides 打开", id: "slides", icon: "🌐" },
-      { label: "使用 Keynote 打开", id: "keynote", icon: "🎬" },
-    ],
-    onOpenWith: (option) => console.log("Opening with:", option.label),
-  },
-}
-
-export const PowerPointEmpty: Story = {
-  args: {
-    fileType: "powerpoint",
-  },
-}
-
-export const UnknownTypeEmpty: Story = {
-  args: {
-    fileType: "unknown",
-  },
-}
-
-export const ConstrainedWidth: Story = {
-  render: () => (
-    <div style={{ maxWidth: 800, margin: "0 auto", height: "100vh" }}>
-      <OfficePreview src={sampleDocUrl} fileType="word" style={{ height: "100%" }} />
-    </div>
-  ),
-}
-
-export const FullScreenWord: Story = {
-  render: () => (
-    <div style={{ height: "100vh" }}>
-      <OfficePreview src={sampleDocUrl} fileType="word" style={{ height: "100%" }} />
-    </div>
-  ),
-}
-
-export const FullScreenExcel: Story = {
-  render: () => (
-    <div style={{ height: "100vh" }}>
-      <OfficePreview src={sampleXlsxUrl} fileType="excel" style={{ height: "100%" }} />
-    </div>
-  ),
-}
-
-export const FullScreenPowerPoint: Story = {
-  render: () => (
-    <div style={{ height: "100vh" }}>
-      <OfficePreview src={samplePptxUrl} fileType="powerpoint" style={{ height: "100%" }} />
-    </div>
-  ),
-}
-
-export const SplitView: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 16, height: "100vh", padding: 16 }}>
-      <div style={{ flex: 1 }}>
-        <OfficePreview src={sampleDocUrl} fileType="word" style={{ height: "100%" }} />
-      </div>
-      <div style={{ flex: 1 }}>
-        <OfficePreview src={sampleXlsxUrl} fileType="excel" style={{ height: "100%" }} />
-      </div>
-    </div>
-  ),
-}
-
-export const WithCustomContainer: Story = {
-  render: () => (
-    <div
-      style={{
-        height: "100vh",
-        background: "var(--ow-bg)",
-        padding: 24,
-      }}
-    >
-      <div
-        style={{
-          height: "100%",
-          background: "var(--ow-surface)",
-          border: "1px solid var(--ow-border)",
-          borderRadius: 12,
-          overflow: "hidden",
-        }}
-      >
-        <OfficePreview src={samplePptxUrl} fileType="powerpoint" style={{ height: "100%" }} />
-      </div>
-    </div>
-  ),
-}

package/src/components/domain/office/OfficePreview/OfficePreviewDialog.stories.tsx

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { OfficePreviewDialog } from "./OfficePreviewDialog"
-
-// 本地 fixture（.storybook/public/fixtures/，见该目录 README）。原来五个 story 一个都不给 src，
-// 渲出来全是「暂无 Word 文档」空态，story 注释描述的「适配器铺满内容区」一格没渲。
-const sampleDocUrl = "/fixtures/sample.docx"
-const sampleXlsxUrl = "/fixtures/sample.xlsx"
-const samplePptxUrl = "/fixtures/sample.pptx"
-
-const meta = {
-  title: "Preview/OfficePreviewDialog",
-  component: OfficePreviewDialog,
-  parameters: { layout: "fullscreen" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof OfficePreviewDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** Word：壳出标题栏与动作组，适配器铺满内容区（chrome=false，无双层边框）。 */
-export const Word: Story = {
-  args: {
-    open: true,
-    fileName: "组件验收清单.docx",
-    fileType: "word",
-    src: sampleDocUrl,
-    meta: "18 KB",
-    onClose: () => {},
-    onDownload: () => {},
-  },
-}
-
-/** Excel：x-spreadsheet 的 canvas 网格恒为浅档，所以衬底走 plain 不叠纸。 */
-export const Excel: Story = {
-  args: {
-    open: true,
-    fileName: "2026-预算表.xlsx",
-    fileType: "excel",
-    src: sampleXlsxUrl,
-    meta: "1 个工作表",
-    onClose: () => {},
-  },
-}
-
-/** PowerPoint：缩略图列表用中性选中底（不再借 --ow-primary，暗档那是荧黄）。 */
-export const PowerPoint: Story = {
-  args: {
-    open: true,
-    fileName: "品牌回顾.pptx",
-    fileType: "powerpoint",
-    src: samplePptxUrl,
-    meta: "3 页",
-    onClose: () => {},
-  },
-}
-
-/** 加载中 / 解析失败：三态一律由壳承担。 */
-export const Loading: Story = {
-  args: { open: true, fileName: "大文件.xlsx", fileType: "excel", loading: true, onClose: () => {} },
-}
-
-export const ParseFailed: Story = {
-  args: {
-    open: true,
-    fileName: "老格式.doc",
-    fileType: "word",
-    error: "这个文件解析不了，只支持 .docx / .xlsx / .pptx。",
-    errorDetail: "Unsupported OLE2 compound document",
-    onClose: () => {},
-  },
-}

package/src/components/domain/office/OfficePreview/OfficePreviewDialog.tsx

@@ -1,43 +0,0 @@
-"use client"
-
-import { FilePreviewDialog, type FilePreviewDialogProps } from "../../files/PreviewDialog"
-import { OfficePreview, type OfficePreviewProps } from "./index"
-
-/**
- * OfficePreviewDialog —— Office 适配器 ×「PreviewDialog 壳」的现成组合
- * （蓝图批次④：`PreviewDialog 壳 + Code/Csv/Image/Markdown/Office/Pdf 适配器`）。
- *
- * 分工就是壳语法本身：
- *  - **壳**（`FilePreviewDialog`）出模态立面、48 标题栏（文件名 mono＋tabular-nums）、
- *    下载/打开方式动作组、以及 §6 的载/错/空三态；
- *  - **适配器**（`OfficePreview`，`chrome={false}`）只出内容，不再自绘边框。
- *
- * 衬底走 `plain`：Word/Excel/PPT 三个渲染器各自带纸（docx 白页衬灰底、pptx 幻灯片底、
- * x-spreadsheet 恒亮 canvas 网格），壳再叠 `paper` 会纸中纸。
- *
- * 继承自：OfficePreview（原自带卡片立面的独立预览）。
- */
-export type OfficePreviewDialogProps = Omit<FilePreviewDialogProps, "children" | "surface"> &
-  Pick<OfficePreviewProps, "src" | "fileType" | "onOpen" | "onRequestOpenWithOptions" | "onOpenWith">
-
-export function OfficePreviewDialog({
-  src,
-  fileType,
-  onOpen,
-  onRequestOpenWithOptions,
-  onOpenWith,
-  ...shell
-}: OfficePreviewDialogProps) {
-  return (
-    <FilePreviewDialog {...shell} surface="plain">
-      <OfficePreview
-        chrome={false}
-        src={src}
-        fileType={fileType}
-        onOpen={onOpen}
-        onRequestOpenWithOptions={onRequestOpenWithOptions}
-        onOpenWith={onOpenWith}
-      />
-    </FilePreviewDialog>
-  )
-}

package/src/components/domain/office/OfficePreview/OfficePreviewSource.test.mjs

@@ -1,126 +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("PowerPoint preview switches slides with vertical arrow keys while active", () => {
-  assert.match(source, /event\.key !== ['"]ArrowUp['"] && event\.key !== ['"]ArrowDown['"]/)
-  assert.match(source, /event\.key === ['"]ArrowUp['"] \? -1 : 1/)
-  assert.match(source, /Math\.min\(Math\.max\(current \+ offset, 0\), slideCount - 1\)/)
-  assert.match(source, /tabIndex=\{0\}/)
-  assert.match(source, /onKeyDown=\{handlePptxKeyDown\}/)
-  assert.match(source, /event\.currentTarget\.focus\(\{ preventScroll: true \}\)/)
-})
-
-test("PowerPoint preview exposes keyboard focus and keeps the active thumbnail visible", () => {
-  assert.match(source, /role="region"/)
-  assert.match(source, /aria-label=\{`PowerPoint 预览，第 \$\{activeSlide \+ 1\} 页，共 \$\{slideCount\} 页`\}/)
-  assert.match(source, /activeThumbnail\?\.scrollIntoView\(\{ block: ['"]nearest['"] \}\)/)
-  // R2：焦点环三件套（§6 既定态）——环宽/环色/缝全走 token，不再写死 2 与 -2px。
-  // 这一格铺满壳内容区且父级 overflow-hidden，正 offset 会被裁掉，故缝取负值内收。
-  assert.ok(source.includes("focus-visible:[outline:var(--ow-focus-ring-w)_solid_var(--ow-focus-ring)]"))
-  assert.ok(source.includes("focus-visible:[outline-offset:calc(var(--ow-focus-ring-offset)*-1)]"))
-  assert.ok(!source.includes("focus-visible:outline-2"))
-  assert.ok(!source.includes("outline-ow-focus-border"))
-})
-
-// R2：载态优先于空态——原来 `!src` 分支排在 `state === "loading"` 之前，state 恒为 idle，
-// 自定义 loading 节点（WordLoading story）永不可达，渲出来是空态不是载态。
-test("自定义 loading 节点可达：调用方自述载中优先于空态", () => {
-  assert.match(source, /const selfDeclaredLoading = !src && loadingNode != null/)
-  assert.match(source, /\{state === "loading" \|\| selfDeclaredLoading \? \(/)
-})
-
-// R2：§7 控件高——pptx 工具条不再用 py-1.5 靠 6+28+6 凑 40，与 PdfPreview header 同口径钉死。
-test("§7 控件高：pptx 工具条钉 --ow-h-lg(40)", () => {
-  assert.match(source, /data-ow-part="pptx-toolbar"[\s\S]*?style=\{\{ height: "var\(--ow-h-lg\)" \}\}/)
-  assert.doesNotMatch(source, /gap-1 py-1\.5 px-3/)
-})
-
-// ─── W3 空态 G5 清扫 ───
-
-test("§6 容器三态：空＝EmptyState 母题 / 载＝Skeleton 呼吸 / 错＝InlineMessage", () => {
-  assert.match(source, /import \{ Skeleton \} from "\.\.\/\.\.\/\.\.\/composite\/Skeleton"/)
-  assert.match(source, /import \{ Button, EmptyState, InlineMessage \} from "\.\.\/\.\.\/\.\.\/primitives"/)
-  assert.match(source, /<EmptyState message=\{`暂无 \$\{FILE_TYPE_LABELS\[fileType\]\}`\} \/>/)
-  assert.match(source, /data-ow-part="loading"[\s\S]*?<Skeleton variant="line"/)
-  assert.match(source, /data-ow-part="error"[\s\S]*?<InlineMessage variant="error" detail=\{errorDetail\}>/)
-})
-
-test("三态不再共用 text-3 灰字居中的 div，自画的彩色文件类型图标整族删除", () => {
-  assert.doesNotMatch(source, /data-ow-part="empty"[\s\S]{0,200}?text-ow-text-3/)
-  assert.doesNotMatch(source, /FILE_TYPE_ICONS/)
-  assert.doesNotMatch(source, /加载中…/)
-})
-
-test("裸英文错误归中文人话，原文只进 mono 详情（§6 人话一句＋mono ≤2 行）", () => {
-  assert.match(source, /class OfficeLoadError extends Error/)
-  assert.match(source, /function localizeOfficeError\(raw: string, fileType: OfficeFileType\): string/)
-  assert.match(source, /const \[errorDetail, setErrorDetail\] = useState\(""\)/)
-  assert.match(
-    source,
-    /setErrorMsg\(err instanceof OfficeLoadError \? err\.human : localizeOfficeError\(raw, fileType\)\)/,
-  )
-  assert.match(source, /setErrorDetail\(err instanceof OfficeLoadError \? err\.detail : raw\)/)
-  // 抛点自带中文人话；HTTP 状态码降级成 detail
-  assert.match(source, /throw new OfficeLoadError\(\s*`\$\{FILE_TYPE_LABELS\[fileType\]\}没取到/)
-  assert.match(source, /`HTTP \$\{response\.status\} \$\{response\.statusText\}`\.trim\(\)/)
-  assert.doesNotMatch(source, /new Error\(`加载失败/)
-  assert.doesNotMatch(source, /new Error\(`不支持的文件类型/)
-})
-
-test("loading / error 覆盖槽仍在（对外 API 不变）", () => {
-  assert.match(source, /\{loadingNode \?\? \(/)
-  assert.match(source, /\{errorNode \?\? \(/)
-})
-
-// W5 移交项⑥：Excel 无工作表时原来由 renderExcel 直接 innerHTML 写一段
-// `<p class="ow-office-preview__empty-text">无工作表内容</p>`。那个节点不在 React 树里，
-// G5 母题进不去。现在 renderExcel 返回 null＝没挂实例，空态由 React 的 state="empty" 接管。
-test("Excel 空工作簿走 React 空态分支，不再 innerHTML 写灰字 <p>", async () => {
-  assert.match(source, /type RenderState = "idle" \| "loading" \| "ready" \| "empty" \| "error"/)
-  assert.match(source, /\): Promise<\(\(\) => void\) \| null> \{/)
-  assert.match(source, /if \(!workbook\.worksheets\.length\) return null/)
-  assert.match(source, /if \(!dispose\) \{\s*setState\("empty"\)/)
-  assert.match(source, /state === "empty" \? \([\s\S]{0,200}?<EmptyState message="这个表格里没有工作表。" \/>/)
-  // innerHTML 空态与它的 CSS 规则一并退役（零消费方）
-  assert.doesNotMatch(source, /ow-office-preview__empty-text|container\.innerHTML/)
-  const components = await readFile(new URL("../../../../../styles/components.css", import.meta.url), "utf8")
-  assert.doesNotMatch(components, /^\.ow-office-preview__empty-text \{/m)
-})
-
-// ── W5 残留清扫：贴地零影 / 表面档 / 线宽 / 图标语系 ──
-
-/** 只在「代码」上验禁令：注释里点名旧写法是文档，不是用法。 */
-const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
-
-test("§5 贴地零影：pptx 幻灯片是面板内的贴地内容，立边靠 1px --ow-border", () => {
-  assert.match(code, /data-ow-part="pptx-slide"[\s\S]*?border border-ow-border/)
-  assert.doesNotMatch(code, /shadow-\[var\(--ow-shadow-/)
-})
-
-test("§5 表面三档：缩略图栏取实心 --ow-surface，毛玻璃整套退场", () => {
-  assert.match(code, /data-ow-part="pptx-thumbs"[\s\S]*?bg-ow-surface/)
-  assert.doesNotMatch(code, /backdrop-blur/)
-  assert.doesNotMatch(code, /-webkit-backdrop-filter/)
-  assert.doesNotMatch(code, /bg-ow-bg\/72/)
-})
-
-test("线宽一档：缩略图外框 2px → 1px --ow-border", () => {
-  assert.doesNotMatch(code, /border-2 border-ow-border/)
-  assert.match(code, /data-ow-part="slide"[\s\S]*?border border-ow-border/)
-})
-
-test("§7 图标语系单一：工具条缩放钮走 Icons 族 ZoomIn/ZoomOut，手绘 path 退场", () => {
-  assert.match(source, /import \{ ZoomIn, ZoomOut \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
-  assert.match(code, /<ZoomOut width=\{14\} height=\{14\} \/>/)
-  assert.match(code, /<ZoomIn width=\{14\} height=\{14\} \/>/)
-  assert.doesNotMatch(code, /d="M5 12h14"/)
-  assert.doesNotMatch(code, /d="M12 5v14M5 12h14"/)
-})
-
-test("空态槽不再借用 loading 覆盖槽（loading 是加载指示器，不是空态）", () => {
-  assert.match(code, /data-ow-part="empty"[\s\S]{0,200}?<EmptyState message=/)
-  assert.doesNotMatch(code, /\{loadingNode \?\? <EmptyState/)
-})