npm - @orbit-work/ui - Versions diffs - 0.1.0 - Mend

@orbit-work/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (755) hide show

package/src/components/domain/files/FilePreviewContentView/FilePreviewContentView.stories.tsx ADDED Viewed

@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Markdown } from "../../../composite/Markdown"
+import { FilePreviewContentView } from "./index"
+/**
+ * R2 fixture 修复：`name` 与 `onOpenDefault` / `onRequestOpenWithOptions` / `onOpenWith`
+ * 三个必填回调原来只有 unsupported 三条 story 传全，其余 story 页头文件名槽是空的；
+ * markdown 预览还缺 `renderMarkdown`，正文区一片空白。这里统一由 `BASE` 兜住，
+ * markdown 走 `composite/Markdown` 真渲。
+ */
+const BASE = {
+  name: "README.md",
+  onOpenDefault: () => console.log("open default"),
+  onRequestOpenWithOptions: async () => [],
+  onOpenWith: (option: unknown) => console.log("open with", option),
+  renderMarkdown: (content: string) => <Markdown source={content} />,
+} satisfies Partial<React.ComponentProps<typeof FilePreviewContentView>>
+const meta = {
+  title: "Files/FilePreviewContentView",
+  component: FilePreviewContentView,
+  parameters: {
+    layout: "padded",
+  },
+  args: BASE,
+  tags: ["autodocs"],
+} satisfies Meta<typeof FilePreviewContentView>
+export default meta
+type Story = StoryObj<typeof meta>
+const markdownContent = `# Sample Markdown
+This is a **bold** text and *italic* text.
+## Code Example
+\`\`\`typescript
+function hello() {
+  return "world"
+}
+\`\`\`
+- List item 1
+- List item 2`
+const codeContent = `function calculateTotal(items: Item[]): number {
+  return items.reduce((sum, item) => sum + item.price, 0)
+}`
+const csvContent = `name,age,city
+Alice,28,New York
+Bob,35,San Francisco
+Charlie,42,Seattle`
+export const MarkdownPreview: Story = {
+  args: {
+    fileKind: "markdown",
+    content: markdownContent,
+  },
+}
+/** 源码档：`defaultRawMarkdown` 是组件真有的入口（原来 story 传的 `rawMarkdownMode` 不在契约里，
+    页签永远停在「预览」）。 */
+export const MarkdownRawMode: Story = {
+  args: {
+    fileKind: "markdown",
+    content: markdownContent,
+    defaultRawMarkdown: true,
+  },
+}
+export const CodePreview: Story = {
+  args: {
+    name: "calculate-total.ts",
+    fileKind: "code",
+    content: codeContent,
+    language: "typescript",
+  },
+}
+export const CsvPreview: Story = {
+  args: {
+    name: "people.csv",
+    fileKind: "csv",
+    content: csvContent,
+  },
+}
+export const PdfPreview: Story = {
+  args: {
+    name: "sample.pdf",
+    fileKind: "pdf",
+    url: "",
+  },
+}
+// 内联 data: 文档：story 不出网，截图/交互测试不会挂在等网络上。
+const inlinePage = `data:text/html;charset=utf-8,${encodeURIComponent(
+  '<!doctype html><meta charset="utf-8"><body style="margin:0;height:100vh;display:flex;align-items:center;justify-content:center;font:14px system-ui,sans-serif;color:#5B5C58;background:#F1F0EA">内联网页内容</body>',
+)}`
+export const WebIframe: Story = {
+  args: {
+    name: "index.html",
+    fileKind: "web",
+    url: inlinePage,
+  },
+}
+export const OfficePreview: Story = {
+  args: {
+    name: "document.docx",
+    fileKind: "office",
+    url: "",
+  },
+}
+// 空态 G5 三行：一句人话 ＋ mono 文件名 ＋ 原因。props 是 `unsupportedReason`，
+// 原来 story 传的 `reason` 根本不存在于契约里，母题下面永远空着一行。
+export const UnsupportedFileType: Story = {
+  args: {
+    fileKind: "unsupported",
+    name: "firmware-v2.14.bin",
+    unsupportedReason: "这是二进制文件，没有可读的文本内容。",
+  },
+}
+export const UnsupportedTooLarge: Story = {
+  args: {
+    fileKind: "unsupported",
+    name: "session-trace-2026-08.log",
+    unsupportedReason: "文件超过 10 MB，先下载到本地再打开。",
+  },
+}
+export const UnsupportedEncrypted: Story = {
+  args: {
+    fileKind: "unsupported",
+    name: "薪酬表-2026Q3.xlsx",
+    unsupportedReason: "文件设了密码，先解除保护再预览。",
+  },
+}
+export const EmptyMarkdown: Story = {
+  args: {
+    fileKind: "markdown",
+    content: "",
+  },
+}
+export const EmptyCode: Story = {
+  args: {
+    name: "empty.js",
+    fileKind: "code",
+    content: "",
+    language: "javascript",
+  },
+}
+export const LongMarkdown: Story = {
+  args: {
+    name: "long-document.md",
+    fileKind: "markdown",
+    content:
+      `# Long Document\n\n` +
+      Array(50).fill("This is a paragraph with some content to demonstrate scrolling behavior.\n\n").join(""),
+  },
+}
+export const DifferentLanguages: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>TypeScript</h3>
+        <FilePreviewContentView
+          {...BASE}
+          name="sample.ts"
+          fileKind="code"
+          language="typescript"
+          content="const x: number = 42"
+        />
+      </div>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>Python</h3>
+        <FilePreviewContentView
+          {...BASE}
+          name="sample.py"
+          fileKind="code"
+          language="python"
+          content="def hello():\n    return 'world'"
+        />
+      </div>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>JSON</h3>
+        <FilePreviewContentView
+          {...BASE}
+          name="sample.json"
+          fileKind="code"
+          language="json"
+          content='{"name": "example", "value": 123}'
+        />
+      </div>
+    </div>
+  ),
+}
+export const AllFileKinds: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>Markdown</h3>
+        <FilePreviewContentView {...BASE} fileKind="markdown" content="# Hello\n\nThis is **markdown**" />
+      </div>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>Code</h3>
+        <FilePreviewContentView
+          {...BASE}
+          name="sample.ts"
+          fileKind="code"
+          language="typescript"
+          content="const x = 42"
+        />
+      </div>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>CSV</h3>
+        <FilePreviewContentView {...BASE} name="sample.csv" fileKind="csv" content="a,b,c\n1,2,3" />
+      </div>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>PDF</h3>
+        <FilePreviewContentView {...BASE} name="doc.pdf" fileKind="pdf" url="" />
+      </div>
+      <div>
+        <h3 style={{ marginTop: 0, fontSize: 14, color: "var(--ow-text-2)" }}>Unsupported</h3>
+        <FilePreviewContentView
+          {...BASE}
+          fileKind="unsupported"
+          name="firmware-v2.14.bin"
+          unsupportedReason="这是二进制文件，没有可读的文本内容。"
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/domain/files/FilePreviewContentView/FilePreviewContentViewSource.test.mjs ADDED Viewed

@@ -0,0 +1,44 @@
+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 styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const code = source.replace(/\{\/\*[\s\S]*?\*\/\}/g, "").replace(/\/\*[\s\S]*?\*\//g, "")
+// 判断表「页签：一套（底线式）」。预览/源码原来是 --ow-radius-xs 的 surface-2 填充丸，
+// 与 primitives/Tabs、与浏览器曲边页签并列成第三套形状。
+test("预览/源码切换坐 Tabs 底线式基座，手搓填充丸退场", () => {
+  assert.match(source, /import \{ Button, EmptyState, Tabs \} from "\.\.\/\.\.\/\.\.\/primitives"/)
+  assert.match(code, /<Tabs[\s\S]*?size="sm"[\s\S]*?activeKey=\{rawMarkdown \? "raw" : "preview"\}/)
+  assert.match(code, /onChange=\{\(key\) => setRawMarkdown\(key === "raw"\)\}/)
+  assert.doesNotMatch(code, /browser-file-preview__markdown-tab\$\{/)
+})
+test("填充丸的形状规则整族从 desktop-surfaces 删除，只留定位钩子", () => {
+  assert.doesNotMatch(styles, /\.browser-file-preview__markdown-tab[.:\s]/)
+  assert.match(styles, /\.browser-file-preview__markdown-tabs \{\s*flex-shrink: 0;\s*\}/)
+})
+// 判断表「空态：灰字居中 → G5」。unsupported 态原来是自画的 48px「碎文件」线描母题
+// ＋ 600 字重标题 ＋ 三行灰字居中，与 EmptyState 的信标母题并列成第二套空态语汇。
+test("unsupported 态走 EmptyState 原语，自造母题与标题槽退场", () => {
+  assert.match(source, /import \{ Button, EmptyState, Tabs \} from "\.\.\/\.\.\/\.\.\/primitives"/)
+  assert.match(code, /<EmptyState[\s\S]*?browser-file-preview__unsupported-line[\s\S]*?\/>/)
+  assert.doesNotMatch(code, /browser-file-preview__unsupported-icon/)
+  assert.doesNotMatch(code, /browser-file-preview__unsupported-title/)
+  // 自画的碎文件路径（M20 28l8 8M28 28l-8 8）整块删除
+  assert.doesNotMatch(code, /M20 28l8 8/)
+})
+test("动作钮走 EmptyState 的 action 槽，文件名仍是 mono 读数", () => {
+  assert.match(code, /action=\{[\s\S]*?browser-file-preview__unsupported-actions/)
+  assert.match(styles, /\.browser-file-preview__unsupported-name \{[\s\S]*?var\(--ow-font-mono\)/)
+  assert.match(styles, /\.browser-file-preview__unsupported-name \{[\s\S]*?tabular-nums/)
+})
+test("母题/标题两条形状规则从 desktop-surfaces 删除，只留 message 三行排布", () => {
+  assert.doesNotMatch(styles, /\.browser-file-preview__unsupported-icon\s*\{/)
+  assert.doesNotMatch(styles, /\.browser-file-preview__unsupported-title\s*\{/)
+  assert.match(styles, /\.browser-file-preview__unsupported-line \{\s*display: block;\s*\}/)
+})

package/src/components/domain/files/FilePreviewContentView/index.tsx ADDED Viewed

@@ -0,0 +1,125 @@
+"use client"
+import { type ReactNode, useState } from "react"
+import { CodePreview } from "../../../composite/CodePreview"
+import { Button, EmptyState, Tabs } from "../../../primitives"
+import type { AttachmentMenuOption } from "../../chat/Attachment"
+import { CsvPreview } from "../../office/CsvPreview"
+import { OfficePreview } from "../../office/OfficePreview"
+import { PdfPreview } from "../../office/PdfPreview"
+export interface FilePreviewContentViewProps {
+  name: string
+  fileKind: "markdown" | "code" | "pdf" | "office" | "csv" | "web" | "unsupported"
+  content?: string
+  language?: string
+  url?: string
+  fileType?: "word" | "excel" | "powerpoint"
+  unsupportedReason?: string
+  onClose?: () => void
+  /** markdown 预览/源码页签的初始档（非受控用法）。 */
+  defaultRawMarkdown?: boolean
+  /** 受控入口：传了就由宿主持有页签状态，配合 `onRawMarkdownChange`。 */
+  rawMarkdown?: boolean
+  onRawMarkdownChange?: (rawMarkdown: boolean) => void
+  renderMarkdown?: (content: string) => ReactNode
+  onOpenDefault: () => void | Promise<void>
+  onRequestOpenWithOptions: () => Promise<AttachmentMenuOption[]>
+  onOpenWith: (option: AttachmentMenuOption) => void | Promise<void>
+}
+export function FilePreviewContentView(props: FilePreviewContentViewProps) {
+  // 预览/源码页签：默认非受控（defaultRawMarkdown 给初始档），传了 rawMarkdown 就转受控。
+  const [uncontrolledRaw, setUncontrolledRaw] = useState(props.defaultRawMarkdown ?? false)
+  const rawMarkdown = props.rawMarkdown ?? uncontrolledRaw
+  const setRawMarkdown = (next: boolean) => {
+    if (props.rawMarkdown === undefined) setUncontrolledRaw(next)
+    props.onRawMarkdownChange?.(next)
+  }
+  const { name, fileKind, content = "", language = "", url = "", fileType = "word" } = props
+  if (fileKind === "markdown")
+    return (
+      <div className="browser-file-preview__markdown">
+        <div className="browser-file-preview__markdown-header">
+          <span className="browser-file-preview__markdown-name">{name}</span>
+          {/* 预览/源码＝页签，坐 Tabs 底线式基座（原来的 surface-2 填充丸手搓件已删，
+              判断表「页签一套」）。 */}
+          <Tabs
+            className="browser-file-preview__markdown-tabs"
+            size="sm"
+            items={[
+              { key: "preview", label: "预览" },
+              { key: "raw", label: "源码" },
+            ]}
+            activeKey={rawMarkdown ? "raw" : "preview"}
+            onChange={(key) => setRawMarkdown(key === "raw")}
+          />
+        </div>
+        <div className="browser-file-preview__markdown-body">
+          {rawMarkdown ? (
+            <CodePreview className="browser-file-preview__content" language="markdown" code={content} />
+          ) : (
+            props.renderMarkdown?.(content)
+          )}
+        </div>
+      </div>
+    )
+  if (fileKind === "code")
+    return <CodePreview className="browser-file-preview__content" language={language} code={content} />
+  if (fileKind === "csv")
+    return <CsvPreview className="browser-file-preview__content" content={content} fileName={name} />
+  if (fileKind === "pdf") return <PdfPreview className="browser-file-preview__content" src={url} fileName={name} />
+  if (fileKind === "web")
+    return (
+      <iframe
+        className="browser-file-preview__content browser-file-preview__web-iframe"
+        src={url}
+        title={name}
+        sandbox="allow-scripts allow-same-origin"
+      />
+    )
+  if (fileKind === "office")
+    return (
+      <OfficePreview
+        className="browser-file-preview__content"
+        src={url}
+        fileType={fileType}
+        onOpen={props.onOpenDefault}
+        onRequestOpenWithOptions={props.onRequestOpenWithOptions}
+        onOpenWith={props.onOpenWith}
+      />
+    )
+  // G5 空态：信标母题 ＋ 一句人话 ＋ mono 文件名 ＋ 动作钮（EmptyState 原语）。
+  // 原来是自造的「碎文件」48px 线描母题 ＋ 600 字重标题 ＋ 灰字居中三行，
+  // 判断表「空态：灰字居中 → G5」；母题唯一语汇是信标，别处不再另画一套。
+  return (
+    <div className="browser-file-preview__unsupported">
+      <EmptyState
+        message={
+          <>
+            <span className="browser-file-preview__unsupported-line">无法预览这个文件</span>
+            <span className="browser-file-preview__unsupported-name">{name}</span>
+            {props.unsupportedReason && (
+              <span className="browser-file-preview__unsupported-reason">{props.unsupportedReason}</span>
+            )}
+          </>
+        }
+        action={
+          // G5「一个动作」：原来是两颗并列 secondary、无主次。主动作＝「用默认应用打开」
+          // （primary，§4 行动极落点，暗档荧黄由 btn-primary 族承担），「关闭」降为 ghost
+          // 的退出路径，不与主动作争同一档。
+          <div className="browser-file-preview__unsupported-actions">
+            <Button variant="primary" type="button" onClick={props.onOpenDefault}>
+              使用默认应用打开
+            </Button>
+            {props.onClose && (
+              <Button variant="ghost" type="button" onClick={props.onClose}>
+                关闭
+              </Button>
+            )}
+          </div>
+        }
+      />
+    </div>
+  )
+}

package/src/components/domain/files/FileTree/FileTree.stories.tsx ADDED Viewed

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import type { FileTreeNode } from "../../../../types/file-tree"
+import { FileTree } from "./index"
+const meta = {
+  title: "Files/FileTree",
+  component: FileTree,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FileTree>
+export default meta
+type Story = StoryObj<typeof meta>
+const sampleTreeData: FileTreeNode[] = [
+  {
+    key: "1",
+    title: "src",
+    isLeaf: false,
+    children: [
+      { key: "1-1", title: "App.tsx", isLeaf: true, kind: "code" },
+      { key: "1-2", title: "index.tsx", isLeaf: true, kind: "code" },
+      {
+        key: "1-3",
+        title: "components",
+        isLeaf: false,
+        children: [
+          { key: "1-3-1", title: "Button.tsx", isLeaf: true, kind: "code" },
+          { key: "1-3-2", title: "Input.tsx", isLeaf: true, kind: "code" },
+        ],
+      },
+    ],
+  },
+  {
+    key: "2",
+    title: "public",
+    isLeaf: false,
+    children: [
+      { key: "2-1", title: "index.html", isLeaf: true, kind: "web" },
+      { key: "2-2", title: "favicon.ico", isLeaf: true },
+    ],
+  },
+  { key: "3", title: "package.json", isLeaf: true },
+  { key: "4", title: "README.md", isLeaf: true, kind: "markdown" },
+]
+const deepTreeData: FileTreeNode[] = [
+  {
+    key: "1",
+    title: "project",
+    isLeaf: false,
+    children: [
+      {
+        key: "1-1",
+        title: "src",
+        isLeaf: false,
+        children: [
+          {
+            key: "1-1-1",
+            title: "features",
+            isLeaf: false,
+            children: [
+              { key: "1-1-1-1", title: "auth", isLeaf: false, children: [] },
+              { key: "1-1-1-2", title: "dashboard", isLeaf: false, children: [] },
+            ],
+          },
+          { key: "1-1-2", title: "utils", isLeaf: false, children: [] },
+        ],
+      },
+      { key: "1-2", title: "tests", isLeaf: false, children: [] },
+    ],
+  },
+]
+export const Default: Story = {
+  render: () => {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>(["1"])
+    const [selectedKey, setSelectedKey] = useState<string>()
+    return (
+      <FileTree
+        treeData={sampleTreeData}
+        expandedKeys={expandedKeys}
+        onExpand={setExpandedKeys}
+        selectedKey={selectedKey}
+        onSelect={(node) => setSelectedKey(node.key)}
+      />
+    )
+  },
+}
+export const Empty: Story = {
+  render: () => {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>([])
+    return <FileTree treeData={[]} expandedKeys={expandedKeys} onExpand={setExpandedKeys} />
+  },
+}
+export const CustomEmptyText: Story = {
+  render: () => {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>([])
+    return <FileTree treeData={[]} expandedKeys={expandedKeys} onExpand={setExpandedKeys} emptyText="没有找到文件" />
+  },
+}
+export const AllExpanded: Story = {
+  render: () => {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>(["1", "1-3", "2"])
+    const [selectedKey, setSelectedKey] = useState<string>()
+    return (
+      <FileTree
+        treeData={sampleTreeData}
+        expandedKeys={expandedKeys}
+        onExpand={setExpandedKeys}
+        selectedKey={selectedKey}
+        onSelect={(node) => setSelectedKey(node.key)}
+      />
+    )
+  },
+}
+export const WithSelection: Story = {
+  render: () => {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>(["1", "1-3"])
+    const [selectedKey, setSelectedKey] = useState<string>("1-3-1")
+    return (
+      <FileTree
+        treeData={sampleTreeData}
+        expandedKeys={expandedKeys}
+        onExpand={setExpandedKeys}
+        selectedKey={selectedKey}
+        onSelect={(node) => {
+          console.log("select", node)
+          setSelectedKey(node.key)
+        }}
+      />
+    )
+  },
+}
+export const DeepNesting: Story = {
+  render: () => {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>(["1", "1-1", "1-1-1"])
+    const [selectedKey, setSelectedKey] = useState<string>()
+    return (
+      <FileTree
+        treeData={deepTreeData}
+        expandedKeys={expandedKeys}
+        onExpand={setExpandedKeys}
+        selectedKey={selectedKey}
+        onSelect={(node) => setSelectedKey(node.key)}
+      />
+    )
+  },
+}
+export const LazyLoading: Story = {
+  render: () => {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>([])
+    const [selectedKey, setSelectedKey] = useState<string>()
+    const [treeData, setTreeData] = useState<FileTreeNode[]>([
+      { key: "1", title: "folder1", isLeaf: false },
+      { key: "2", title: "folder2", isLeaf: false },
+      { key: "3", title: "file.txt", isLeaf: true },
+    ])
+    const loadData = async (node: FileTreeNode) => {
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      console.log("load", node.key)
+      setTreeData((prev) => {
+        const updateNode = (nodes: FileTreeNode[]): FileTreeNode[] =>
+          nodes.map((n) => {
+            if (n.key === node.key) {
+              return {
+                ...n,
+                children: [
+                  { key: `${n.key}-1`, title: "child1.ts", isLeaf: true, kind: "code" },
+                  { key: `${n.key}-2`, title: "child2.tsx", isLeaf: true, kind: "code" },
+                ],
+              }
+            }
+            if (n.children) {
+              return { ...n, children: updateNode(n.children) }
+            }
+            return n
+          })
+        return updateNode(prev)
+      })
+    }
+    return (
+      <FileTree
+        treeData={treeData}
+        expandedKeys={expandedKeys}
+        onExpand={setExpandedKeys}
+        selectedKey={selectedKey}
+        onSelect={(node) => setSelectedKey(node.key)}
+        loadData={loadData}
+      />
+    )
+  },
+}

package/src/components/domain/files/FileTree/FileTreeSource.test.mjs ADDED Viewed

@@ -0,0 +1,18 @@
+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")
+// 判断表「空态：灰字居中 → G5（信标图形 ＋ mono 一句话 ＋ 动作）」。
+// 原来是 <div className="py-6 text-ow-text-3 text-ow-fs-body-sm">{emptyText}</div>。
+test("空目录走 EmptyState 原语，不再手搓灰字居中", () => {
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/\.\.\/primitives"/)
+  assert.match(source, /<EmptyState message=\{emptyText\} markSize=\{32\}/)
+  assert.doesNotMatch(source, /text-ow-text-3 text-ow-fs-body-sm/)
+})
+test("空态容器带 data-ow-part 钩子，emptyText 契约不变", () => {
+  assert.match(source, /data-ow-part="empty"/)
+  assert.match(source, /emptyText = "空目录"/)
+})