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

package/src/components/domain/files/FileBrowser/FileBrowser.stories.tsx

@@ -1,397 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import type { FileTreeNode } from "../../../../types/file-tree"
-import { More } from "../../../composite/Icons"
-// 本文件已有一个名为 EmptyState 的 story 导出，原语按别名引入避免同名合并。
-import { Button, EmptyState as EmptyStatePrimitive } from "../../../primitives"
-import { FileBrowser } from "./index"
-
-const meta = {
-  title: "Files/FileBrowser",
-  component: FileBrowser,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof FileBrowser>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const mockTreeData: FileTreeNode[] = [
-  {
-    key: "/src",
-    title: "src",
-    isLeaf: false,
-    children: [
-      {
-        key: "/src/components",
-        title: "components",
-        isLeaf: false,
-        children: [
-          { key: "/src/components/Button.tsx", title: "Button.tsx", isLeaf: true },
-          { key: "/src/components/Input.tsx", title: "Input.tsx", isLeaf: true },
-          { key: "/src/components/Dialog.tsx", title: "Dialog.tsx", isLeaf: true },
-        ],
-      },
-      {
-        key: "/src/utils",
-        title: "utils",
-        isLeaf: false,
-        children: [
-          { key: "/src/utils/format.ts", title: "format.ts", isLeaf: true },
-          { key: "/src/utils/validate.ts", title: "validate.ts", isLeaf: true },
-        ],
-      },
-      { key: "/src/index.tsx", title: "index.tsx", isLeaf: true },
-      { key: "/src/App.tsx", title: "App.tsx", isLeaf: true },
-    ],
-  },
-  {
-    key: "/public",
-    title: "public",
-    isLeaf: false,
-    children: [
-      { key: "/public/index.html", title: "index.html", isLeaf: true },
-      { key: "/public/favicon.ico", title: "favicon.ico", isLeaf: true },
-    ],
-  },
-  { key: "/package.json", title: "package.json", isLeaf: true },
-  { key: "/tsconfig.json", title: "tsconfig.json", isLeaf: true },
-  { key: "/README.md", title: "README.md", isLeaf: true },
-]
-
-export const Default: Story = {
-  render: () => {
-    const [expandedKeys, setExpandedKeys] = useState<string[]>(["/src"])
-    const [selectedKey, setSelectedKey] = useState<string | null>(null)
-    const [treeCollapsed, setTreeCollapsed] = useState(false)
-
-    return (
-      <div style={{ display: "flex", height: "600px", border: "1px solid var(--ow-border)" }}>
-        <FileBrowser
-          breadcrumb={[
-            { key: "/", label: "workspace" },
-            { key: "/src", label: "src" },
-          ]}
-          onBreadcrumbClick={(key) => console.log("breadcrumb clicked:", key)}
-          actions={
-            // 原型 2316 头部右端就一枚「打开方式」；宿主实际挂的是它的下拉。
-            <Button variant="secondary" size="sm">
-              打开方式
-            </Button>
-          }
-          preview={
-            selectedKey ? (
-              <div style={{ padding: 20, color: "var(--ow-text-2)" }}>
-                <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>{selectedKey.split("/").pop()}</div>
-                <div style={{ fontSize: 13, color: "var(--ow-text-3)" }}>{selectedKey}</div>
-              </div>
-            ) : (
-              // 空态一律走 G5 原语（信标母题＋一句 text-2），不手搓灰字居中。
-              <div style={{ display: "grid", placeItems: "center", height: "100%" }}>
-                <EmptyStatePrimitive message="选择一个文件进行预览" />
-              </div>
-            )
-          }
-          treeData={mockTreeData}
-          expandedKeys={expandedKeys}
-          onExpand={setExpandedKeys}
-          selectedKey={selectedKey}
-          onSelectFile={(node) => setSelectedKey(node.key)}
-          treeCollapsed={treeCollapsed}
-          onToggleTree={() => setTreeCollapsed(!treeCollapsed)}
-        />
-      </div>
-    )
-  },
-}
-
-export const WithFilter: Story = {
-  render: () => {
-    const [expandedKeys, setExpandedKeys] = useState<string[]>(["/src", "/src/components"])
-    const [selectedKey, setSelectedKey] = useState<string | null>("/src/components/Button.tsx")
-    const [filterText, setFilterText] = useState("tsx")
-    const [treeCollapsed, setTreeCollapsed] = useState(false)
-
-    const filterTree = (nodes: FileTreeNode[], text: string): FileTreeNode[] => {
-      if (!text) return nodes
-      const lower = text.toLowerCase()
-      return nodes
-        .map((node) => {
-          if (node.isLeaf) {
-            return node.title.toLowerCase().includes(lower) ? node : null
-          }
-          const filtered = node.children ? filterTree(node.children, text) : []
-          if (filtered.length > 0) {
-            return { ...node, children: filtered }
-          }
-          return node.title.toLowerCase().includes(lower) ? node : null
-        })
-        .filter((node): node is FileTreeNode => node !== null)
-    }
-
-    const filteredTree = filterTree(mockTreeData, filterText)
-
-    return (
-      <div style={{ display: "flex", height: "600px", border: "1px solid var(--ow-border)" }}>
-        <FileBrowser
-          breadcrumb={[
-            { key: "/", label: "workspace" },
-            { key: "/src", label: "src" },
-            { key: "/src/components", label: "components" },
-          ]}
-          preview={
-            <div style={{ padding: 20 }}>
-              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 12, color: "var(--ow-text)" }}>Button.tsx</div>
-              <pre
-                style={{
-                  fontSize: 13,
-                  lineHeight: 1.6,
-                  color: "var(--ow-text-2)",
-                  fontFamily: "monospace",
-                }}
-              >
-                {`export function Button({ children }) {
-  return <button>{children}</button>
-}`}
-              </pre>
-            </div>
-          }
-          treeData={filteredTree}
-          expandedKeys={expandedKeys}
-          onExpand={setExpandedKeys}
-          selectedKey={selectedKey}
-          onSelectFile={(node) => setSelectedKey(node.key)}
-          filterText={filterText}
-          onFilterChange={setFilterText}
-          treeCollapsed={treeCollapsed}
-          onToggleTree={() => setTreeCollapsed(!treeCollapsed)}
-        />
-      </div>
-    )
-  },
-}
-
-export const TreeCollapsed: Story = {
-  render: () => {
-    const [treeCollapsed, setTreeCollapsed] = useState(true)
-    const [selectedKey, setSelectedKey] = useState<string | null>("/src/App.tsx")
-
-    return (
-      <div style={{ display: "flex", height: "600px", border: "1px solid var(--ow-border)" }}>
-        <FileBrowser
-          breadcrumb={[
-            { key: "/", label: "workspace" },
-            { key: "/src", label: "src" },
-          ]}
-          preview={
-            <div style={{ padding: 20 }}>
-              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 12, color: "var(--ow-text)" }}>App.tsx</div>
-              <pre
-                style={{
-                  fontSize: 13,
-                  lineHeight: 1.6,
-                  color: "var(--ow-text-2)",
-                  fontFamily: "monospace",
-                }}
-              >
-                {`import { Button } from './components/Button'
-
-export function App() {
-  return (
-    <div>
-      <h1>Hello World</h1>
-      <Button>Click me</Button>
-    </div>
-  )
-}`}
-              </pre>
-            </div>
-          }
-          treeData={mockTreeData}
-          expandedKeys={["/src"]}
-          onExpand={() => {}}
-          selectedKey={selectedKey}
-          onSelectFile={(node) => setSelectedKey(node.key)}
-          treeCollapsed={treeCollapsed}
-          onToggleTree={() => setTreeCollapsed(!treeCollapsed)}
-        />
-      </div>
-    )
-  },
-}
-
-export const EmptyState: Story = {
-  render: () => {
-    const [treeCollapsed, setTreeCollapsed] = useState(false)
-
-    return (
-      <div style={{ display: "flex", height: "600px", border: "1px solid var(--ow-border)" }}>
-        <FileBrowser
-          breadcrumb={[{ key: "/", label: "workspace" }]}
-          preview={
-            <div style={{ display: "grid", placeItems: "center", height: "100%" }}>
-              <EmptyStatePrimitive message="还没有选中文件，从目录树里挑一个" />
-            </div>
-          }
-          treeData={mockTreeData}
-          expandedKeys={[]}
-          onExpand={() => {}}
-          selectedKey={null}
-          onSelectFile={(node) => console.log("selected:", node.key)}
-          treeCollapsed={treeCollapsed}
-          onToggleTree={() => setTreeCollapsed(!treeCollapsed)}
-        />
-      </div>
-    )
-  },
-}
-
-export const WithActions: Story = {
-  render: () => {
-    const [expandedKeys, setExpandedKeys] = useState<string[]>(["/src"])
-    const [selectedKey, setSelectedKey] = useState<string | null>(null)
-    const [treeCollapsed, setTreeCollapsed] = useState(false)
-
-    return (
-      <div style={{ display: "flex", height: "600px", border: "1px solid var(--ow-border)" }}>
-        <FileBrowser
-          breadcrumb={[
-            { key: "/", label: "workspace" },
-            { key: "/src", label: "src" },
-          ]}
-          onBreadcrumbClick={(key) => console.log("navigate to:", key)}
-          actions={
-            <div style={{ display: "flex", gap: 8 }}>
-              <Button variant="ghost" size="sm" onClick={() => console.log("refresh")}>
-                刷新
-              </Button>
-              <Button variant="ghost" size="sm">
-                <More width={16} height={16} />
-              </Button>
-            </div>
-          }
-          preview={
-            selectedKey ? (
-              <div style={{ padding: 20 }}>
-                <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
-                  {selectedKey.split("/").pop()}
-                </div>
-              </div>
-            ) : (
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  height: "100%",
-                  color: "var(--ow-text-3)",
-                }}
-              >
-                选择文件
-              </div>
-            )
-          }
-          treeData={mockTreeData}
-          expandedKeys={expandedKeys}
-          onExpand={setExpandedKeys}
-          selectedKey={selectedKey}
-          onSelectFile={(node) => setSelectedKey(node.key)}
-          treeCollapsed={treeCollapsed}
-          onToggleTree={() => setTreeCollapsed(!treeCollapsed)}
-        />
-      </div>
-    )
-  },
-}
-
-export const LongBreadcrumb: Story = {
-  render: () => {
-    const [expandedKeys, setExpandedKeys] = useState<string[]>(["/src", "/src/components"])
-    const [selectedKey, setSelectedKey] = useState<string | null>("/src/components/Button.tsx")
-    const [treeCollapsed, setTreeCollapsed] = useState(false)
-
-    return (
-      <div style={{ display: "flex", height: "600px", border: "1px solid var(--ow-border)" }}>
-        <FileBrowser
-          breadcrumb={[
-            { key: "/", label: "workspace" },
-            { key: "/src", label: "src" },
-            { key: "/src/components", label: "components" },
-            { key: "/src/components/ui", label: "ui" },
-            { key: "/src/components/ui/forms", label: "forms" },
-          ]}
-          onBreadcrumbClick={(key) => console.log("navigate to:", key)}
-          preview={
-            <div style={{ padding: 20, color: "var(--ow-text-2)" }}>
-              <div style={{ fontSize: 14, fontWeight: 500 }}>Button.tsx</div>
-            </div>
-          }
-          treeData={mockTreeData}
-          expandedKeys={expandedKeys}
-          onExpand={setExpandedKeys}
-          selectedKey={selectedKey}
-          onSelectFile={(node) => setSelectedKey(node.key)}
-          treeCollapsed={treeCollapsed}
-          onToggleTree={() => setTreeCollapsed(!treeCollapsed)}
-        />
-      </div>
-    )
-  },
-}
-
-/**
- * 过渡档：`layout="preview-left"` 留住 DS 2.0 之前「预览在左、目录树在右 240」的次序，
- * 供宿主（apps/desktop 的 FilesTabBody）在自己那侧改完之前显式指定。头部工具条与
- * mono 面包屑列头两档共用。
- */
-export const PreviewLeftLegacy: Story = {
-  render: () => {
-    const [expandedKeys, setExpandedKeys] = useState<string[]>(["/src"])
-    const [selectedKey, setSelectedKey] = useState<string | null>("/src/App.tsx")
-    const [filterText, setFilterText] = useState("")
-
-    return (
-      <div style={{ display: "flex", height: "600px", border: "1px solid var(--ow-border)" }}>
-        <FileBrowser
-          layout="preview-left"
-          breadcrumb={[
-            { key: "/", label: "~" },
-            { key: "/src", label: "src" },
-            { key: "/src/App.tsx", label: "App.tsx" },
-          ]}
-          actions={
-            <Button variant="secondary" size="sm">
-              打开方式
-            </Button>
-          }
-          preview={
-            <div style={{ padding: 12 }}>
-              <pre
-                style={{
-                  margin: 0,
-                  fontSize: "var(--ow-fs-code)",
-                  lineHeight: "var(--ow-lh-code)",
-                  color: "var(--ow-text)",
-                  fontFamily: "var(--ow-font-mono)",
-                }}
-              >
-                {`export function App() {
-  return <div>Hello</div>
-}`}
-              </pre>
-            </div>
-          }
-          treeData={mockTreeData}
-          expandedKeys={expandedKeys}
-          onExpand={setExpandedKeys}
-          selectedKey={selectedKey}
-          onSelectFile={(node) => setSelectedKey(node.key)}
-          filterText={filterText}
-          onFilterChange={setFilterText}
-        />
-      </div>
-    )
-  },
-}

package/src/components/domain/files/FileBrowser/FileBrowserSource.test.mjs

@@ -1,75 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const here = new URL("./", import.meta.url)
-const source = await readFile(new URL("index.tsx", here), "utf8")
-// 断言只看代码，注释里出现的同名词不算数。
-const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\{\/\*[\s\S]*?\*\/\}/g, "")
-const types = await readFile(new URL("../../../../types/file-browser.ts", here), "utf8")
-const tree = await readFile(new URL("../FileTree/index.tsx", here), "utf8")
-const css = await readFile(new URL("../../../../../styles/components.css", here), "utf8")
-
-test("A11-B3：layout 开关存在且默认 tree-left（原型口径），preview-left 是宿主过渡档", () => {
-  assert.match(types, /export type FileBrowserLayout = "tree-left" \| "preview-left"/)
-  assert.match(types, /layout\?: FileBrowserLayout/)
-  assert.match(code, /layout = "tree-left"/)
-  assert.match(code, /const treeFirst = layout === "tree-left"/)
-})
-
-test("树列 44% ＋ 右分隔线；预览列 flex-1（原型 2319/2333）", () => {
-  assert.match(code, /treeFirst \? "w-\[44%\] min-w-0 border-r border-ow-border" : "w-60"/)
-  assert.match(code, /data-ow-part="preview"[\s\S]{0,220}flex flex-col flex-1 min-w-0 min-h-0/)
-})
-
-test("顶行工具条：过滤框（Field md·fs-caption·placeholder 过滤文件）＋ actions 槽 ＋ 折叠钮", () => {
-  assert.match(code, /import \{ Button, Field \}/)
-  assert.match(code, /filterPlaceholder = "过滤文件"/)
-  assert.match(code, /\[&_\[data-slot=field-control\]\]:\[font-size:var\(--ow-fs-caption\)\]/)
-  // 头部不再自绘第二套输入井，也不再放面包屑
-  assert.doesNotMatch(code, /<input\b|SearchInput/)
-  assert.match(code, /data-ow-part="header"[\s\S]{0,900}\{actions\}/)
-})
-
-test("面包屑下沉成预览列头：mono / fs-caption / text-3 ＋ 8·12 内距 ＋ 底线（原型 2334）", () => {
-  assert.match(
-    code,
-    /data-ow-part="breadcrumb"\n\s+className="flex items-center shrink-0 min-w-0 overflow-hidden px-3 py-2 border-b border-ow-border"/,
-  )
-  assert.match(code, /text-ow-fs-caption leading-\[1\.4\] \[font-family:var\(--ow-font-mono\)\]/)
-  assert.match(code, /text-ow-text-3 cursor-pointer/)
-})
-
-test("预览正文坐 --ow-code-bg，且贴地零影（§5）", () => {
-  assert.match(code, /data-ow-part="preview-body"[\s\S]{0,220}bg-\[var\(--ow-code-bg\)\]/)
-  assert.doesNotMatch(code, /shadow/)
-})
-
-test("圆角一律 token（§7 radius-literal），无裸 Tailwind 圆角刻度类", () => {
-  assert.doesNotMatch(code, /rounded-(xs|sm|md|lg|xl|2xl|3xl)\b/)
-  assert.match(code, /\[border-radius:var\(--ow-radius-xs\)\]/)
-})
-
-test("FileTree 行：字号 fs-caption、字体随壳继承 sans（不再行内写死 mono）、缩进单位 14", () => {
-  assert.match(tree, /text-ow-fs-caption leading-\[1\.6\] text-ow-text/)
-  assert.doesNotMatch(tree, /font-\[family-name:var\(--ow-font-mono\)\]/)
-  assert.match(css, /\.ow-file-tree-indent-unit \{ display: inline-block; width: 14px; \}/)
-  // 行几何不动：28 高 ＋ 选中＝--ow-current-bg ＋ 500 字重
-  assert.match(css, /\.ow-file-tree-node-content-wrapper \{[^}]*min-height: 28px/)
-  assert.match(css, /ow-file-tree-node-selected[\s\S]{0,160}background: var\(--ow-current-bg\)/)
-})
-
-/**
- * R2 L2-1-6：面包屑压缩策略。原来每段都 min-w-0 等比压缩，四层路径渲成
- * 「landi… / s… / compone… / hero.…」，当前文件名读不出来。
- * 现在末段不压缩、前置段留 4ch 底线、层数超过 4 就把中间层收成一枚「…」。
- */
-test("面包屑：末段不压缩，前置段留 4ch，超层折叠成「…」", () => {
-  assert.match(code, /const BREADCRUMB_MAX_VISIBLE = 4/)
-  assert.match(code, /isLast \? "shrink-0 min-w-0" : "min-w-\[4ch\]"/)
-  assert.match(code, /const hiddenBreadcrumb = collapsed \? segments\.slice\(1, segments\.length - 2\) : \[\]/)
-  // 折叠段挂完整路径 title，信息不丢
-  assert.match(code, /title=\{hiddenBreadcrumb\.map\(\(hiddenSegment\) => hiddenSegment\.label\)\.join\(" \/ "\)\}/)
-  // 旧写法（每段一律 min-w-0）不得回潮
-  assert.doesNotMatch(code, /<span key=\{segment\.key\} className="inline-flex items-center min-w-0">/)
-})