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

package/src/components/domain/skills/SkillCardView/SkillCardView.stories.tsx

@@ -1,374 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { SkillAvatarView, skillGlyph } from "../SkillAvatarView"
-import { SkillCardView } from "./index"
-
-const meta = {
-  title: "Skills/SkillCardView",
-  component: SkillCardView,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof SkillCardView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const defaultAvatar = <SkillAvatarView className="gly" glyph={skillGlyph("code-review", "代码走查")} />
-
-/**
- * 卡内头像统一走 SkillAvatarView。R2·T2 起**在目录卡里**章色由卡钉档（中性
- * `--ow-surface-2` ＋ `--ow-text-2`，原型 4569–4570），`skillGlyph` 的身份色轮转只在
- * 卡外的场合（会话菜单 / 命令面板 / 详情面）还生效——这里看到的就是卡内的中性档。
- */
-const iconAvatar = (id: string, name: string) => <SkillAvatarView className="gly" glyph={skillGlyph(id, name)} />
-
-export const NotInstalled: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    installed: false,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("install"),
-  },
-}
-
-export const Installed: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    installed: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("use"),
-  },
-}
-
-export const Installing: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    installed: false,
-    installing: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("install"),
-  },
-}
-
-export const Outdated: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    version: "1.0.0",
-    installed: true,
-    outdated: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("update"),
-  },
-}
-
-export const Updating: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    version: "1.0.0",
-    installed: true,
-    outdated: true,
-    installing: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("update"),
-  },
-}
-
-export const WithVersion: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    version: "2.1.0",
-    installed: true,
-    showVersion: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("use"),
-  },
-}
-
-export const WithVersionOutdated: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    version: "1.5.2",
-    installed: true,
-    outdated: true,
-    showVersion: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("update"),
-  },
-}
-
-export const ActionDisabled: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    installed: false,
-    actionDisabled: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("install"),
-  },
-}
-
-export const CustomActionLabel: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    installed: true,
-    actionLabel: "Configure",
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("configure"),
-  },
-}
-
-export const CustomActionVariant: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    installed: true,
-    actionVariant: "unstyled",
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("use"),
-  },
-}
-
-export const NoDescription: Story = {
-  args: {
-    name: "Simple Skill",
-    avatar: iconAvatar("skill-4", "技能"),
-    installed: false,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("install"),
-  },
-}
-
-export const LongName: Story = {
-  args: {
-    name: "Advanced Code Review and Static Analysis Tool",
-    desc: "Comprehensive code review with security scanning",
-    avatar: defaultAvatar,
-    installed: false,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("install"),
-  },
-}
-
-export const LongDescription: Story = {
-  args: {
-    name: "代码走查",
-    desc: "Automatically review pull requests, suggest improvements, detect code smells, check for security vulnerabilities, verify test coverage, and ensure code style consistency across your entire codebase",
-    avatar: defaultAvatar,
-    installed: true,
-    onOpen: () => console.log("open"),
-    onAction: () => console.log("use"),
-  },
-}
-
-export const AllStates: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
-      <SkillCardView
-        name="Not Installed"
-        desc="This skill is not installed yet"
-        avatar={iconAvatar("skill-2", "技能")}
-        installed={false}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("install")}
-      />
-      <SkillCardView
-        name="Installing"
-        desc="Currently being installed"
-        avatar={iconAvatar("skill-8", "技能")}
-        installed={false}
-        installing={true}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("install")}
-      />
-      <SkillCardView
-        name="Installed"
-        desc="Ready to use"
-        avatar={iconAvatar("skill-0", "技能")}
-        installed={true}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("use")}
-      />
-      <SkillCardView
-        name="Update Available"
-        desc="A new version is available"
-        avatar={iconAvatar("skill-0", "技能")}
-        version="1.0.0"
-        installed={true}
-        outdated={true}
-        showVersion={true}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("update")}
-      />
-      <SkillCardView
-        name="Updating"
-        desc="Installing new version"
-        avatar={iconAvatar("skill-4", "技能")}
-        version="1.0.0"
-        installed={true}
-        outdated={true}
-        installing={true}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("update")}
-      />
-    </div>
-  ),
-}
-
-export const SkillLibrary: Story = {
-  render: () => (
-    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 16 }}>
-      <SkillCardView
-        name="代码走查"
-        desc="AI-powered code review and suggestions"
-        avatar={iconAvatar("skill-4", "技能")}
-        installed={true}
-        version="2.1.0"
-        showVersion={true}
-        onOpen={() => console.log("open review")}
-        onAction={() => console.log("use review")}
-      />
-      <SkillCardView
-        name="测试生成"
-        desc="Generate unit tests automatically"
-        avatar={iconAvatar("skill-5", "技能")}
-        installed={false}
-        onOpen={() => console.log("open test")}
-        onAction={() => console.log("install test")}
-      />
-      <SkillCardView
-        name="文档助手"
-        desc="Generate API docs and comments"
-        avatar={iconAvatar("skill-5", "技能")}
-        installed={true}
-        outdated={true}
-        version="1.5.0"
-        showVersion={true}
-        onOpen={() => console.log("open docs")}
-        onAction={() => console.log("update docs")}
-      />
-      <SkillCardView
-        name="重构助手"
-        desc="Smart code refactoring suggestions"
-        avatar={iconAvatar("skill-4", "技能")}
-        installed={true}
-        onOpen={() => console.log("open refactor")}
-        onAction={() => console.log("use refactor")}
-      />
-      <SkillCardView
-        name="安全扫描"
-        desc="Detect security vulnerabilities"
-        avatar={iconAvatar("skill-3", "技能")}
-        installed={false}
-        installing={true}
-        onOpen={() => console.log("open security")}
-        onAction={() => console.log("install security")}
-      />
-      <SkillCardView
-        name="Performance"
-        desc="Analyze and optimize performance"
-        avatar={iconAvatar("skill-4", "技能")}
-        installed={false}
-        onOpen={() => console.log("open perf")}
-        onAction={() => console.log("install perf")}
-      />
-    </div>
-  ),
-}
-
-/** 卡脚结构化元信息：Chip 胶囊，计数位 mono + tabular-nums（读数口径由壳统一给）。 */
-export const WithMetaItems: Story = {
-  args: {
-    name: "代码走查",
-    desc: "读改动、挑问题、给建议，顺着项目里已有的写法来",
-    avatar: defaultAvatar,
-    version: "1.2.0",
-    showVersion: true,
-    installed: false,
-    metaItems: [
-      { key: "cat", label: "开发工具" },
-      { key: "uses", label: "使用", count: "3.2k" },
-      { key: "tools", label: "工具", count: 7 },
-    ],
-    onOpen: () => {},
-    onAction: () => {},
-  },
-}
-
-/**
- * 状态签一览（R2·T2）：`installed / outdated / installing` 三个布尔在件内映射成
- * `StatusTag` 的 `installed / update / installing` 三档（原型 4562–4570 `statusOf`：
- * 安装中最优先，没装就不出签，装了再看有没有更新），`mine` 出归属签「我的」。
- * 一张卡至多一枚状态签 ＋ 一枚归属签，归属签在左。
- */
-export const StatusTags: Story = {
-  render: () => (
-    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 14 }}>
-      <SkillCardView
-        name="深度研究"
-        desc="搜索、去重并交叉验证来源，产出带引用的结构化报告。"
-        avatar={iconAvatar("deep-research", "深")}
-        version="1.4.2"
-        showVersion
-        installed
-        metaItems={[{ key: "updated", label: "3 天前" }]}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("use")}
-      />
-      <SkillCardView
-        name="文档助手"
-        desc="创建、改写并排版专业文档，保留原有结构与样式。"
-        avatar={iconAvatar("doc-writer", "文")}
-        version="2.0.0"
-        showVersion
-        installed
-        outdated
-        metaItems={[{ key: "updated", label: "2 周前" }]}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("update")}
-      />
-      <SkillCardView
-        name="演示生成"
-        desc="把一段结论整理成可讲的页面顺序与讲稿。"
-        avatar={iconAvatar("slides", "演")}
-        version="0.6.3"
-        showVersion
-        installed={false}
-        installing
-        metaItems={[{ key: "updated", label: "上个月" }]}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("install")}
-      />
-      <SkillCardView
-        name="周报格式"
-        desc="按我们组的模板整理周报：进展、阻塞、下周计划。"
-        avatar={iconAvatar("my-weekly", "周")}
-        version="0.3.0"
-        showVersion
-        installed
-        mine
-        metaItems={[{ key: "updated", label: "今天" }]}
-        onOpen={() => console.log("open")}
-        onAction={() => console.log("use")}
-      />
-    </div>
-  ),
-}

package/src/components/domain/skills/SkillCardView/SkillCardViewSource.test.mjs

@@ -1,35 +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")
-
-/* R2·T2：技能卡的状态签接线。宿主（SkillsCenter → SkillCard.tsx:65–87）本来就在传
-   installed / outdated / installing 三个布尔，件里映射一下就出签，宿主零改动。 */
-
-test("三个布尔映射成 StatusTag 的三档（原型 4562–4570 statusOf）", () => {
-  // 安装中最优先 → 没装就不出签 → 装了再看有没有更新。
-  assert.match(
-    source,
-    /const status: StatusTagPreset \| undefined = installing\s*\n\s*\? "installing"\s*\n\s*: !installed\s*\n\s*\? undefined\s*\n\s*: outdated\s*\n\s*\? "update"\s*\n\s*: "installed"/,
-  )
-  assert.match(source, /status=\{status\}/)
-})
-
-test("归属签「我的」走同一件 StatusTag，不另起一套写法", () => {
-  assert.match(source, /import \{ StatusTag, type StatusTagPreset \} from "\.\.\/\.\.\/\.\.\/composite\/StatusTag"/)
-  assert.match(source, /mine\?: boolean/)
-  assert.match(source, /badge=\{mine \? <StatusTag status="mine" \/> : undefined\}/)
-})
-
-test("状态签只走 status 一条路：不再同时传 updateAvailable", () => {
-  // 壳里的去重条款已在 Q3 撤掉（「有更新」签与「更新」钮照原型并存），
-  // 这里若还传 updateAvailable，一张卡会出两枚「有更新」。
-  assert.doesNotMatch(source, /updateAvailable=/)
-})
-
-test("状态签是唯一形：件内不自造 span/Tag/Chip 状态块", () => {
-  assert.doesNotMatch(source, /connector-update-tag/)
-  assert.doesNotMatch(source, /<Chip\b/)
-  assert.doesNotMatch(source, /<Tag\b/)
-})

package/src/components/domain/skills/SkillCardView/index.tsx

@@ -1,88 +0,0 @@
-import type { ReactNode } from "react"
-import { StatusTag, type StatusTagPreset } from "../../../composite/StatusTag"
-import { type DesktopCatalogCardMetaItem, DesktopCatalogCardView } from "../../desktop/DesktopCatalogView"
-
-/**
- * SkillCardView —— 技能卡（DesktopCatalogView 壳的技能配方）。
- *
- * 骨架、立面、hover/press/focus 与三态动作钮全部由 `DesktopCatalogCardView` 提供；
- * 本件只负责技能域的文案与动作态推导（安装/更新/使用/进行中）。
- * 卡脚元信息走 `metaItems`，由壳拼成一条 mono + tabular-nums 的文字带。A4-B2 后
- * `showVersion` 的语义是「版本号出不出现在**卡脚那条带的头一段**」——版本胶囊已从名称行撤走，
- * 名称行只留名字与状态签。R3 中性件——不带信标元素。
- *
- * R2·T2 起本件还负责**状态签**：`installed / outdated / installing` 三个布尔映射成
- * `StatusTag` 的 `installed / update / installing`（原型 4562–4570 `statusOf`），
- * `mine` 出归属签「我的」。宿主（`SkillCard.tsx:65–87`）本来就在传前三个布尔，
- * 零改动即出签。字形章的色档由目录卡钉成中性，本件不管色。
- */
-export interface SkillCardViewProps {
-  name: string
-  desc?: string
-  avatar: ReactNode
-  version?: string
-  outdated?: boolean
-  installed: boolean
-  installing?: boolean
-  actionDisabled?: boolean
-  showVersion?: boolean
-  actionLabel?: string
-  actionVariant?: "secondary" | "unstyled"
-  /**
-   * 归属签「我的」（原型 4646）。宿主的 `DisplayableSkill` 一期还没有 owner 字段，
-   * 缺省不出签；目录接口补上后只要多传一个布尔，见交接单。
-   */
-  mine?: boolean
-  /** 卡脚元信息（用量/评分/分类计数等）；读数自动 mono */
-  metaItems?: DesktopCatalogCardMetaItem[]
-  onOpen: () => void
-  onAction: () => void
-}
-
-export function SkillCardView({
-  name,
-  desc,
-  avatar,
-  version,
-  outdated,
-  installed,
-  installing = false,
-  showVersion = false,
-  actionLabel,
-  actionVariant = "secondary",
-  actionDisabled,
-  mine,
-  metaItems,
-  onOpen,
-  onAction,
-}: SkillCardViewProps): React.ReactElement {
-  const label =
-    actionLabel ?? (installing ? (outdated ? "更新中…" : "安装中…") : outdated ? "更新" : installed ? "使用" : "安装")
-  // 状态签映射（R2·T2，原型 4562–4570 `statusOf`）：安装中最优先，没装就不出签，
-  // 装了再看有没有更新。这三档与卡脚动作钮说的是两件事（现状 vs 能做什么），并存不矛盾。
-  // 只走 `status` 一条路，不再同时传 `updateAvailable`——否则一张卡会出两枚「有更新」。
-  const status: StatusTagPreset | undefined = installing
-    ? "installing"
-    : !installed
-      ? undefined
-      : outdated
-        ? "update"
-        : "installed"
-  return (
-    <DesktopCatalogCardView
-      avatar={avatar}
-      name={name}
-      version={showVersion ? version : undefined}
-      status={status}
-      badge={mine ? <StatusTag status="mine" /> : undefined}
-      description={desc}
-      metaItems={metaItems}
-      actionLabel={label}
-      actionVariant={actionVariant}
-      actionState={outdated ? "update" : installed ? "installed" : "default"}
-      actionDisabled={installing || actionDisabled}
-      onOpen={onOpen}
-      onAction={onAction}
-    />
-  )
-}

package/src/components/domain/skills/SkillDetailPanelView/SkillDetailPanelView.stories.tsx

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Tag } from "../../../composite/Tag"
-import { Button } from "../../../primitives"
-import { Chip } from "../../../primitives/Chip"
-import { SkillAvatarView, skillGlyph } from "../SkillAvatarView"
-import { SkillDetailPanelView } from "./index"
-
-/**
- * SkillDetailPanelView —— 技能详情面板。
- * 「详细说明」这一节承担 §6 容器三态：载（小转子）· 空（EmptyState 母题）· 错（InlineMessage）。
- */
-const meta = {
-  title: "Skills/SkillDetailPanelView",
-  component: SkillDetailPanelView,
-  parameters: { layout: "fullscreen" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof SkillDetailPanelView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const avatar = <SkillAvatarView className="g" glyph={skillGlyph("code-review", "代码走查")} />
-
-/** 授权态用 Chip 胶囊：点色是第二编码，文字把状态说清（R1）。 */
-const authorized = <Chip dot="success" label="已授权，可以直接用" />
-const notAuthorized = <Chip dot="pending" label="已安装，还没授权" />
-
-const doc = `## 它能做什么
-
-- 读这次改动，挑出会出问题的地方
-- 按项目里已有的写法给建议，不硬套风格
-- 顺手把提交说明起个头
-
-## 怎么用
-
-在对话里 @ 这个技能，或者直接敲 \`/review\`。`
-
-const base = {
-  avatar,
-  name: "代码走查",
-  author: "Orbitwork 官方",
-  version: "1.0.0",
-  badge: <Tag variant="success">官方</Tag>,
-  brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-  authorization: authorized,
-  backLabel: "返回插件 · 技能",
-  onBack: () => {},
-  actions: <Button variant="primary">安装</Button>,
-}
-
-/** 常态：三节齐备。 */
-export const Complete: Story = {
-  args: { ...base, docContent: doc, loading: false },
-}
-
-/** 载：<20px 小转子（1.5px 描边 + 90° 缺口 · linear 0.9s · 色随所在文字）+ 一句话。 */
-export const Loading: Story = {
-  args: {
-    ...base,
-    loading: true,
-    actions: (
-      <Button variant="primary" disabled>
-        安装
-      </Button>
-    ),
-  },
-}
-
-/** 空：EmptyState 原语——信标 mono 母题 + 一句 text-2，禁插画禁 emoji。 */
-export const EmptyDoc: Story = {
-  args: { ...base, loading: false, emptyText: "这个技能还没写说明" },
-}
-
-/** 错：人话一句 + mono 技术详情（可折叠）+ 重试钮。 */
-export const DocError: Story = {
-  args: {
-    ...base,
-    loading: false,
-    error: "说明没读出来，可能是服务暂时不通",
-    errorDetail: "GET /v1/skills/code-review/doc → 504\nrequest-id: 9c41ad72-8e3f-4b20-a1d6-5f0c7e2b93aa",
-    onRetry: () => {},
-  },
-}
-
-/** 未授权：状态点换成 pending 中性灰，文字同步换说法。 */
-export const NotAuthorized: Story = {
-  args: { ...base, authorization: notAuthorized, docContent: doc, loading: false },
-}
-
-/** 无作者、无徽标的最简档。 */
-export const Minimal: Story = {
-  args: {
-    ...base,
-    author: undefined,
-    version: undefined,
-    badge: undefined,
-    brief: undefined,
-    authorization: undefined,
-    docContent: doc,
-    loading: false,
-  },
-}
-
-/** 长简介：text-wrap: pretty + 保留换行，最宽 680。 */
-export const LongBrief: Story = {
-  args: {
-    ...base,
-    loading: false,
-    docContent: doc,
-    brief:
-      "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。它会先把这次改动的范围理清楚，再逐个文件看：哪些是重构、哪些是新逻辑、哪些只是格式变动；然后只在真正可能出问题的地方说话，其余保持安静。",
-  },
-}