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

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

@@ -1,115 +0,0 @@
-import type { ReactNode } from "react"
-import { Button } from "../../../primitives"
-import { EmptyState } from "../../../primitives/EmptyState"
-import { InlineMessage } from "../../../primitives/InlineMessage"
-import { Spinner } from "../../../primitives/Spinner"
-import { DesktopCatalogDetailShell, DesktopDetailSection } from "../../desktop/DesktopCatalogView"
-
-/**
- * SkillDetailPanelView —— 技能详情面板（DesktopCatalogView 详情壳的技能配方）。
- *
- * 导航、Hero、按钮区由 `DesktopCatalogDetailShell` 统一给；本件只排「简介 / 授权 /
- * 详细说明」三节，并把「详细说明」这一节的 §6 容器三态定稿：
- * 载＝<20px 小转子（1.5px 描边圆环 + 90° 缺口 · linear 0.9s · 色随所在文字）＋一句话；
- * 空＝EmptyState 原语（信标 mono 母题 + 一句 text-2，禁插画禁 emoji）；
- * 错＝InlineMessage error（人话一句 + mono 技术详情 ≤2 行 + 重试钮）。
- * R3 中性件——不带信标元素、不占极。
- */
-export interface SkillDetailPanelViewProps {
-  avatar: ReactNode
-  name: string
-  author?: string
-  version?: string
-  /** 更新时间（「3 天前」）：进 hero 的 mono 元信息行。 */
-  updatedAt?: ReactNode
-  /** 状态签：标题右边紧跟的那一枚（已安装 / 有更新 / 正在安装）。 */
-  status?: ReactNode
-  /** 归属签等附加标记，排在状态签之后。 */
-  badge?: ReactNode
-  brief?: string
-  authorization?: ReactNode
-  docContent?: ReactNode
-  loading: boolean
-  loadingText?: string
-  /** 说明加载失败时的人话一句；给了就顶掉空态 */
-  error?: ReactNode
-  /** 错误技术详情：mono ≤2 行 */
-  errorDetail?: string
-  onRetry?: () => void
-  emptyText?: string
-  backLabel: string
-  onBack: () => void
-  actions?: ReactNode
-}
-
-export function SkillDetailPanelView({
-  avatar,
-  name,
-  author,
-  version,
-  updatedAt,
-  status,
-  badge,
-  brief,
-  authorization,
-  docContent,
-  loading,
-  loadingText = "正在读取说明…",
-  error,
-  errorDetail,
-  onRetry,
-  emptyText = "暂无详细说明",
-  backLabel,
-  onBack,
-  actions,
-}: SkillDetailPanelViewProps) {
-  return (
-    <DesktopCatalogDetailShell
-      avatar={avatar}
-      name={name}
-      author={author}
-      version={version}
-      updatedAt={updatedAt}
-      kind="技能"
-      status={status}
-      badges={badge}
-      /* A4-B4：简介从正文第一节升到 hero 标题下的那一句（原型 2172）。原来它是正文里的
-         「简介」节，与页头的名字隔着一条分隔线——二级页的自我介绍不该排在正文里。 */
-      summary={brief}
-      actions={actions}
-      backLabel={backLabel}
-      onBack={onBack}
-    >
-      {authorization && <DesktopDetailSection title="授权">{authorization}</DesktopDetailSection>}
-      <DesktopDetailSection title="详细说明">
-        {loading ? (
-          <div className="skd__loading" role="status">
-            <Spinner size="md" />
-            <span>{loadingText}</span>
-          </div>
-        ) : error ? (
-          <InlineMessage
-            variant="error"
-            detail={errorDetail}
-            action={
-              onRetry && (
-                <Button variant="secondary" size="sm" onClick={onRetry}>
-                  重试
-                </Button>
-              )
-            }
-          >
-            {error}
-          </InlineMessage>
-        ) : docContent ? (
-          <div className="skd__doc">{docContent}</div>
-        ) : (
-          /* A5-B4：`markSize={32}` 这条逃生舱撤掉——文档区是详情页里的整栏内容位，
-              md 档的 40 就是给这种块内空态定的；单独调一个 32 只会让全库多一个「差不多
-              但不一样」的体量。左对齐仍由 `.skd__empty-state` 给（这块跟着正文走，不居中）。 */
-          <EmptyState className="skd__empty-state" message={emptyText} />
-        )}
-      </DesktopDetailSection>
-    </DesktopCatalogDetailShell>
-  )
-}

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

@@ -1,274 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Skill } from "../../../composite/Icons"
-import { SkillAvatarView, skillGlyph } from "../SkillAvatarView"
-import { SkillDetailView } from "./index"
-
-const meta = {
-  title: "Skills/SkillDetailView",
-  component: SkillDetailView,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof SkillDetailView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const defaultAvatar = <SkillAvatarView className="g" glyph={skillGlyph("code-review", "代码走查")} />
-
-const sampleDoc = `## 它能做什么
-
-- 读这次改动，挑出会出问题的地方
-- 按项目里已有的写法给建议，不硬套风格
-- 顺手把提交说明起个头
-
-## 怎么用
-
-在对话里 @ 这个技能，或者直接敲 \`/review\`。`
-
-export const NotInstalled: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: false,
-    onInstall: () => console.log("install"),
-  },
-}
-
-export const Installed: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    onUse: () => console.log("use"),
-    onOpenDir: () => console.log("open dir"),
-    onUninstall: () => console.log("uninstall"),
-  },
-}
-
-export const Installing: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: false,
-    installing: true,
-    onInstall: () => console.log("install"),
-  },
-}
-
-export const Outdated: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    outdated: true,
-    onUpdate: () => console.log("update"),
-    onUse: () => console.log("use"),
-    onOpenDir: () => console.log("open dir"),
-    onUninstall: () => console.log("uninstall"),
-  },
-}
-
-export const Updating: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    outdated: true,
-    installing: true,
-    onUpdate: () => console.log("update"),
-    onUse: () => console.log("use"),
-    onOpenDir: () => console.log("open dir"),
-    onUninstall: () => console.log("uninstall"),
-  },
-}
-
-export const Loading: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    loading: true,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    onUse: () => console.log("use"),
-  },
-}
-
-export const EmptyDoc: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    loading: false,
-    emptyText: "这个技能还没写说明",
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    onUse: () => console.log("use"),
-  },
-}
-
-export const WithAuthorization: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "GitHub Integration",
-    author: "Orbitwork 官方",
-    version: "2.0.0",
-    brief: "Connect your GitHub repositories",
-    authorization: (
-      <div
-        style={{
-          padding: 12,
-          background: "var(--ow-surface-2)",
-          border: "1px solid var(--ow-border)",
-          borderRadius: 8,
-          fontSize: 13,
-          color: "var(--ow-text-2)",
-        }}
-      >
-        <div style={{ marginBottom: 8, fontWeight: 600, color: "var(--ow-text)" }}>Authorization Required</div>
-        <div>This skill requires access to your GitHub account.</div>
-      </div>
-    ),
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    onUse: () => console.log("use"),
-  },
-}
-
-export const WithCustomAction: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "Deploy Tool",
-    author: "Orbitwork 官方",
-    version: "1.5.0",
-    brief: "One-click deployment to production",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    actionLabel: "Deploy Now",
-    actionIcon: <Skill />,
-    onUse: () => console.log("deploy"),
-    onOpenDir: () => console.log("open dir"),
-    onUninstall: () => console.log("uninstall"),
-  },
-}
-
-export const WithMenuItems: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    menuItems: [
-      { key: "settings", label: "Settings", icon: <Skill /> },
-      { key: "docs", label: "Documentation", icon: <Skill /> },
-    ],
-    onMenuSelect: (key) => console.log("menu select", key),
-    onUse: () => console.log("use"),
-    onOpenDir: () => console.log("open dir"),
-    onUninstall: () => console.log("uninstall"),
-  },
-}
-
-export const ActionDisabled: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "返回插件 · 技能",
-    onBack: () => console.log("back"),
-    installed: true,
-    actionDisabled: true,
-    onUse: () => console.log("use"),
-  },
-}
-
-export const MinimalMetadata: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "Simple Skill",
-    docContent: sampleDoc,
-    loading: false,
-    backLabel: "Back",
-    onBack: () => console.log("back"),
-    installed: false,
-    onInstall: () => console.log("install"),
-  },
-}
-
-/** 错：说明拉不下来时给人话一句 + mono 技术详情 + 重试；壳的第三态。 */
-export const DocError: Story = {
-  args: {
-    avatar: defaultAvatar,
-    name: "代码走查",
-    author: "Orbitwork 官方",
-    version: "1.0.0",
-    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
-    loading: false,
-    error: "说明没读出来，可能是服务暂时不通",
-    errorDetail: "GET /v1/skills/code-review/doc → 504\nrequest-id: 9c41ad72-8e3f-4b20-a1d6-5f0c7e2b93aa",
-    onRetry: () => {},
-    backLabel: "返回插件 · 技能",
-    onBack: () => {},
-    installed: true,
-    onUse: () => {},
-  },
-}

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

@@ -1,121 +0,0 @@
-"use client"
-
-import { type ReactNode, useState } from "react"
-import { type DetailMenuItem, UninstallConfirmDialog } from "../../../composite/DetailChrome"
-import { Folder, Skill, Trash } from "../../../composite/Icons"
-import { StatusTag } from "../../../composite/StatusTag"
-import { DesktopAgentDetailActions, catalogInstallStatus } from "../../desktop/DesktopCatalogView"
-import { SkillDetailPanelView } from "../SkillDetailPanelView"
-
-export interface SkillDetailViewProps {
-  avatar: ReactNode
-  name: string
-  author?: string
-  version?: string
-  /** 更新时间（「3 天前」）：进 hero 的 mono 元信息行。 */
-  updatedAt?: ReactNode
-  badge?: ReactNode
-  brief?: string
-  authorization?: ReactNode
-  docContent?: ReactNode
-  loading: boolean
-  loadingText?: string
-  /** 说明加载失败时的人话一句 */
-  error?: ReactNode
-  /** 错误技术详情：mono ≤2 行 */
-  errorDetail?: string
-  onRetry?: () => void
-  emptyText?: string
-  backLabel: string
-  onBack: () => void
-  installed: boolean
-  outdated?: boolean
-  installing?: boolean
-  actionLabel?: ReactNode
-  actionIcon?: ReactNode
-  actionDisabled?: boolean
-  menuItems?: DetailMenuItem[]
-  onMenuSelect?: (key: string) => void
-  onInstall?: () => void
-  onUpdate?: () => void
-  onUse?: () => void
-  onOpenDir?: () => void
-  onUninstall?: () => void
-}
-
-/**
- * SkillDetailView —— 技能详情接管页（SkillDetailPanelView + 目录壳动作组 + 卸载确认）。
- * 容器三态、Hero、按钮组都在壳里，本件只接卸载确认这一段本地状态。
- */
-export function SkillDetailView(props: SkillDetailViewProps) {
-  const [confirmUninstall, setConfirmUninstall] = useState(false)
-  /* A4-B4：hero 标题旁的状态签与卡上同一枚（同词表同形）——安装态本来只体现在按钮文案上，
-     「这个技能现在装没装」得靠读按钮反推。 */
-  const installStatus = catalogInstallStatus({
-    installed: props.installed,
-    outdated: props.outdated,
-    installing: props.installing,
-  })
-  const actions = (
-    <DesktopAgentDetailActions
-      installed={props.installed}
-      outdated={props.outdated}
-      installing={props.installing}
-      primaryLabel={props.actionLabel ?? "使用技能"}
-      primaryIcon={props.actionIcon ?? <Skill />}
-      primaryVisible={Boolean(props.onUse)}
-      primaryDisabled={props.actionDisabled}
-      onInstall={props.onInstall}
-      onUpdate={props.onUpdate}
-      onPrimaryAction={() => props.onUse?.()}
-      menuItems={[
-        ...(props.menuItems ?? []),
-        ...(props.onOpenDir ? [{ key: "openDir", label: "打开目录", icon: <Folder /> }] : []),
-        ...(props.onUninstall
-          ? [{ key: "uninstall", label: "卸载", icon: <Trash />, danger: true, disabled: props.installing }]
-          : []),
-      ]}
-      onMenuSelect={(key) => {
-        props.onMenuSelect?.(key)
-        if (key === "openDir") props.onOpenDir?.()
-        if (key === "uninstall") setConfirmUninstall(true)
-      }}
-    />
-  )
-  return (
-    <>
-      <SkillDetailPanelView
-        avatar={props.avatar}
-        name={props.name}
-        author={props.author}
-        version={props.version}
-        updatedAt={props.updatedAt}
-        status={installStatus && <StatusTag status={installStatus} />}
-        badge={props.badge}
-        brief={props.brief}
-        authorization={props.authorization}
-        docContent={props.docContent}
-        loading={props.loading}
-        loadingText={props.loadingText}
-        error={props.error}
-        errorDetail={props.errorDetail}
-        onRetry={props.onRetry}
-        emptyText={props.emptyText}
-        backLabel={props.backLabel}
-        onBack={props.onBack}
-        actions={actions}
-      />
-      {confirmUninstall && props.onUninstall && (
-        <UninstallConfirmDialog
-          title="卸载技能"
-          description={`将从本地移除「${props.name}」。`}
-          onCancel={() => setConfirmUninstall(false)}
-          onConfirm={() => {
-            setConfirmUninstall(false)
-            props.onUninstall?.()
-          }}
-        />
-      )}
-    </>
-  )
-}

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

@@ -1,128 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { SkillImportDialogView, SkillImportResultDialogView } from "./index"
-
-const meta = {
-  title: "Skills/SkillImportDialogView",
-  component: SkillImportDialogView,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof SkillImportDialogView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const ImportDialog: Story = {
-  args: {
-    onClose: () => console.log("close"),
-    onInstallArchive: () => console.log("install archive"),
-    onInstallDirectory: () => console.log("install directory"),
-  },
-}
-
-export const ResultSuccess: StoryObj<typeof SkillImportResultDialogView> = {
-  render: (args) => <SkillImportResultDialogView {...args} />,
-  args: {
-    summary: { success: 3, failed: 0, skipped: 0 },
-    items: [
-      { sourceName: "code-review.zip", name: "代码审查", status: "success" },
-      { sourceName: "deploy-helper.zip", name: "部署助手", status: "success" },
-      { sourceName: "test-generator.zip", name: "测试生成器", status: "success" },
-    ],
-    onClose: () => console.log("close"),
-  },
-}
-
-export const ResultMixed: StoryObj<typeof SkillImportResultDialogView> = {
-  render: (args) => <SkillImportResultDialogView {...args} />,
-  args: {
-    summary: { success: 2, failed: 1, skipped: 1 },
-    items: [
-      { sourceName: "skill-a.zip", name: "技能 A", status: "success" },
-      { sourceName: "skill-b.zip", name: "技能 B", status: "failed", reason: "缺少 SKILL.md 文件" },
-      { sourceName: "skill-c.zip", name: "技能 C", status: "skipped", reason: "已存在同名技能" },
-      { sourceName: "skill-d.zip", name: "技能 D", status: "success" },
-    ],
-    onClose: () => console.log("close"),
-  },
-}
-
-export const ResultAllFailed: StoryObj<typeof SkillImportResultDialogView> = {
-  render: (args) => <SkillImportResultDialogView {...args} />,
-  args: {
-    summary: { success: 0, failed: 3, skipped: 0 },
-    items: [
-      { sourceName: "invalid-1.zip", status: "failed", reason: "无效的压缩包格式" },
-      { sourceName: "invalid-2.zip", status: "failed", reason: "缺少 SKILL.md 文件" },
-      { sourceName: "invalid-3.zip", status: "failed", reason: "技能配置解析失败" },
-    ],
-    onClose: () => console.log("close"),
-  },
-}
-
-export const ResultSingleSuccess: StoryObj<typeof SkillImportResultDialogView> = {
-  render: (args) => <SkillImportResultDialogView {...args} />,
-  args: {
-    summary: { success: 1, failed: 0, skipped: 0 },
-    items: [{ sourceName: "my-skill.tgz", name: "我的技能", status: "success" }],
-    onClose: () => console.log("close"),
-  },
-}
-
-export const ResultManyItems: StoryObj<typeof SkillImportResultDialogView> = {
-  render: (args) => <SkillImportResultDialogView {...args} />,
-  args: {
-    summary: { success: 8, failed: 2, skipped: 3 },
-    items: [
-      { sourceName: "s1.zip", name: "Skill 1", status: "success" },
-      { sourceName: "s2.zip", name: "Skill 2", status: "success" },
-      { sourceName: "s3.zip", name: "Skill 3", status: "failed", reason: "版本不兼容" },
-      { sourceName: "s4.zip", name: "Skill 4", status: "success" },
-      { sourceName: "s5.zip", name: "Skill 5", status: "skipped", reason: "已安装" },
-      { sourceName: "s6.zip", name: "Skill 6", status: "success" },
-      { sourceName: "s7.zip", name: "Skill 7", status: "success" },
-      { sourceName: "s8.zip", name: "Skill 8", status: "failed", reason: "依赖缺失" },
-      { sourceName: "s9.zip", name: "Skill 9", status: "success" },
-      { sourceName: "s10.zip", name: "Skill 10", status: "skipped", reason: "已安装" },
-      { sourceName: "s11.zip", name: "Skill 11", status: "success" },
-      { sourceName: "s12.zip", name: "Skill 12", status: "success" },
-      { sourceName: "s13.zip", name: "Skill 13", status: "skipped", reason: "已安装" },
-    ],
-    onClose: () => console.log("close"),
-  },
-}
-
-export const ResultNoName: StoryObj<typeof SkillImportResultDialogView> = {
-  render: (args) => <SkillImportResultDialogView {...args} />,
-  args: {
-    summary: { success: 1, failed: 1, skipped: 0 },
-    items: [
-      { sourceName: "archive-1.zip", status: "success" },
-      { sourceName: "archive-2.zip", status: "failed", reason: "解析失败" },
-    ],
-    onClose: () => console.log("close"),
-  },
-}
-
-export const ResultLongNames: StoryObj<typeof SkillImportResultDialogView> = {
-  render: (args) => <SkillImportResultDialogView {...args} />,
-  args: {
-    summary: { success: 2, failed: 1, skipped: 0 },
-    items: [
-      {
-        sourceName: "very-long-filename-for-skill-package.tar.gz",
-        name: "这是一个非常长的技能名称用于测试 UI 显示效果",
-        status: "success",
-      },
-      {
-        sourceName: "another-extremely-long-archive-name.zip",
-        name: "另一个很长的技能名称",
-        status: "failed",
-        reason: "缺少必需的配置文件 SKILL.md，无法完成导入操作",
-      },
-      { sourceName: "short.zip", name: "短名称", status: "success" },
-    ],
-    onClose: () => console.log("close"),
-  },
-}

package/src/components/domain/skills/SkillImportDialogView/SkillImportDialogViewSource.test.mjs

@@ -1,11 +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("skill import dialog advertises all supported local archive formats", () => {
-  assert.match(source, /支持 \.zip、\.tar\.gz 和 \.tgz 技能包/)
-  assert.match(source, /onInstallArchive/)
-  assert.match(source, /onInstallDirectory/)
-})