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

package/src/components/composite/AssistantChannelCard/index.tsx

@@ -1,102 +0,0 @@
-import type { ReactNode } from "react"
-import { Badge, Button, Card, Switch } from "../../primitives"
-import { DingTalk, Feishu, WeCom } from "../Icons"
-
-export type AssistantChannelPlatform = "dingtalk" | "feishu" | "wecom"
-
-export interface AssistantChannelCardProps {
-  platform: AssistantChannelPlatform
-  connected: boolean
-  enabled: boolean
-  loading?: boolean
-  busy?: boolean
-  onConfigure: () => void
-  onToggle?: () => void
-}
-
-/**
- * 卡骨架槽位类（DS 2.0 统一语法）：
- * 容器内距由 `Card` 体槽给（px-3.5 py-3 ＝ 横 14 / 纵 12）；卡内字段槽一律 8（gap-2），
- * 头部图标↔文本走 ListRow 家族的 12 槽（gap-3），标题↔描述 4。
- * BEM 类名保留为 DOM 钩子（apps/desktop e2e 依赖 `.assistant-card__title`），
- * 几何与字号已从 styles/assistant-settings.css 收回到这里的 token 类。
- */
-const HEAD_CLASS = "flex items-center gap-3 min-w-0 max-sm:flex-col max-sm:items-start"
-const ICON_CLASS = "assistant-card__icon shrink-0 w-6 h-6"
-const MAIN_CLASS = "assistant-card__main flex-1 min-w-0 flex flex-col gap-1"
-const TITLE_ROW_CLASS = "assistant-card__title-row flex items-center gap-2 min-w-0"
-const TITLE_CLASS =
-  "assistant-card__title min-w-0 truncate font-semibold text-ow-fs-title-sm leading-[1.4] text-ow-text font-[family-name:var(--ow-font-sans)]"
-const DESC_CLASS =
-  "assistant-card__desc font-normal text-ow-fs-caption leading-[1.5] text-ow-text-3 font-[family-name:var(--ow-font-sans)]"
-const ACTIONS_CLASS = "assistant-actions shrink-0 flex items-center justify-end gap-2 max-sm:w-full"
-
-const PLATFORM_META: Record<
-  AssistantChannelPlatform,
-  {
-    title: string
-    description: string
-    icon: ReactNode
-  }
-> = {
-  dingtalk: {
-    title: "钉钉",
-    description: "接收钉钉私聊与群聊消息，并接入 Orbitwork 会话。",
-    icon: <DingTalk className={ICON_CLASS} />,
-  },
-  feishu: {
-    title: "飞书",
-    description: "接收飞书私聊与群聊消息，并接入 Orbitwork 会话。",
-    icon: <Feishu className={ICON_CLASS} />,
-  },
-  wecom: {
-    title: "企业微信",
-    description: "接收企业微信私聊与群聊消息，并接入 Orbitwork 会话。",
-    icon: <WeCom className={ICON_CLASS} />,
-  },
-}
-
-/**
- * AssistantChannelCard — 第三方助理通道卡（钉钉 / 飞书 / 企业微信）。
- *
- * 立面走 `Card` 基座（§5 贴地：0 影 ＋ 1px `--ow-border` ＋ `--ow-surface`，§7 圆角 12）；
- * 动作钮走 `Button` 基座 secondary/md（高 32，圆角 `--ow-radius-action`），
- * 加载态用基座转子（R1 形编码）而非灰掉；开关走 `Switch` 原语。
- * 平台图标是第三方品牌标（§15 皮肤边界豁免官方色），落图标档 24。
- */
-export function AssistantChannelCard({
-  platform,
-  connected,
-  enabled,
-  loading = false,
-  busy = false,
-  onConfigure,
-  onToggle,
-}: AssistantChannelCardProps): React.ReactElement {
-  const meta = PLATFORM_META[platform]
-
-  return (
-    <Card>
-      <div data-ow-part="head" className={`assistant-card__head ${HEAD_CLASS}`}>
-        {meta.icon}
-        <div data-ow-part="labels" className={MAIN_CLASS}>
-          <div className={TITLE_ROW_CLASS}>
-            <div className={TITLE_CLASS}>{meta.title}</div>
-            {connected && (
-              <Badge variant={enabled ? "success" : "normal"} dot>
-                {enabled ? "已连接" : "已停止"}
-              </Badge>
-            )}
-          </div>
-          <div className={DESC_CLASS}>{meta.description}</div>
-        </div>
-        <div data-ow-part="action" className={ACTIONS_CLASS}>
-          <Button variant="secondary" onClick={onConfigure} loading={loading} disabled={busy}>
-            配置
-          </Button>
-          {connected && onToggle && <Switch checked={enabled} onChange={onToggle} disabled={busy} />}
-        </div>
-      </div>
-    </Card>
-  )
-}

package/src/components/composite/AssistantToggleRow/AssistantToggleRow.stories.tsx

@@ -1,197 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { AssistantToggleRow } from "./index"
-
-const meta = {
-  title: "Composite/AssistantToggleRow",
-  component: AssistantToggleRow,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof AssistantToggleRow>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Enabled: Story = {
-  args: {
-    title: "Code Suggestions",
-    description: "Get AI-powered code completion and suggestions",
-    checked: true,
-    onChange: (checked) => console.log("toggle", checked),
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    title: "Auto-format",
-    description: "Automatically format code on save",
-    checked: false,
-    onChange: (checked) => console.log("toggle", checked),
-  },
-}
-
-export const DisabledState: Story = {
-  args: {
-    title: "Premium Feature",
-    description: "This feature is only available for premium users",
-    checked: false,
-    onChange: (checked) => console.log("toggle", checked),
-    disabled: true,
-  },
-}
-
-export const DisabledStateChecked: Story = {
-  args: {
-    title: "System Required",
-    description: "This setting cannot be changed",
-    checked: true,
-    onChange: (checked) => console.log("toggle", checked),
-    disabled: true,
-  },
-}
-
-export const ShortTitle: Story = {
-  args: {
-    title: "Debug",
-    description: "Enable debug mode for development",
-    checked: true,
-    onChange: (checked) => console.log("toggle", checked),
-  },
-}
-
-export const LongTitle: Story = {
-  args: {
-    title: "Enable Advanced Code Analysis and Performance Monitoring",
-    description: "Monitor performance metrics and analyze code quality in real-time",
-    checked: false,
-    onChange: (checked) => console.log("toggle", checked),
-  },
-}
-
-export const LongDescription: Story = {
-  args: {
-    title: "Security Scanning",
-    description:
-      "Automatically scan your codebase for security vulnerabilities, outdated dependencies, and potential bugs. This will run on every commit and pull request.",
-    checked: true,
-    onChange: (checked) => console.log("toggle", checked),
-  },
-}
-
-export const MultilineDescription: Story = {
-  args: {
-    title: "Telemetry",
-    description:
-      "Send anonymous usage data to help improve the product. This includes crash reports, feature usage, and performance metrics. Your code is never sent.",
-    checked: false,
-    onChange: (checked) => console.log("toggle", checked),
-  },
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
-      <AssistantToggleRow
-        title="Enabled Feature"
-        description="This feature is currently enabled"
-        checked={true}
-        onChange={(checked) => console.log("enabled", checked)}
-      />
-      <AssistantToggleRow
-        title="Disabled Feature"
-        description="This feature is currently disabled"
-        checked={false}
-        onChange={(checked) => console.log("disabled", checked)}
-      />
-      <AssistantToggleRow
-        title="Disabled Control (Off)"
-        description="Cannot be toggled"
-        checked={false}
-        onChange={(checked) => console.log("disabled-off", checked)}
-        disabled={true}
-      />
-      <AssistantToggleRow
-        title="Disabled Control (On)"
-        description="Cannot be toggled"
-        checked={true}
-        onChange={(checked) => console.log("disabled-on", checked)}
-        disabled={true}
-      />
-    </div>
-  ),
-}
-
-export const SettingsPanel: Story = {
-  render: () => (
-    <div
-      style={{
-        background: "var(--ow-surface)",
-        border: "1px solid var(--ow-border)",
-        borderRadius: 8,
-        padding: 16,
-        maxWidth: 600,
-      }}
-    >
-      <h3 style={{ margin: "0 0 16px 0", fontSize: 16, fontWeight: 600, color: "var(--ow-text)" }}>Editor Settings</h3>
-      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <AssistantToggleRow
-          title="Line Numbers"
-          description="Show line numbers in the editor"
-          checked={true}
-          onChange={(checked) => console.log("line-numbers", checked)}
-        />
-        <AssistantToggleRow
-          title="Word Wrap"
-          description="Wrap long lines to fit in the viewport"
-          checked={false}
-          onChange={(checked) => console.log("word-wrap", checked)}
-        />
-        <AssistantToggleRow
-          title="Minimap"
-          description="Show code minimap on the right side"
-          checked={true}
-          onChange={(checked) => console.log("minimap", checked)}
-        />
-        <AssistantToggleRow
-          title="Breadcrumbs"
-          description="Show file path breadcrumbs at the top"
-          checked={true}
-          onChange={(checked) => console.log("breadcrumbs", checked)}
-        />
-      </div>
-    </div>
-  ),
-}
-
-export const MixedStates: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 600 }}>
-      <AssistantToggleRow
-        title="AI Assistance"
-        description="Get intelligent code suggestions and completions"
-        checked={true}
-        onChange={(checked) => console.log("ai", checked)}
-      />
-      <AssistantToggleRow
-        title="Telemetry"
-        description="Help improve the product by sending anonymous usage data"
-        checked={false}
-        onChange={(checked) => console.log("telemetry", checked)}
-      />
-      <AssistantToggleRow
-        title="Beta Features"
-        description="Try experimental features before they're released (requires restart)"
-        checked={false}
-        onChange={(checked) => console.log("beta", checked)}
-      />
-      <AssistantToggleRow
-        title="Enterprise Mode"
-        description="Connect to your organization's secure environment"
-        checked={false}
-        onChange={(checked) => console.log("enterprise", checked)}
-        disabled={true}
-      />
-    </div>
-  ),
-}

package/src/components/composite/AssistantToggleRow/index.tsx

@@ -1,35 +0,0 @@
-import { ListRow } from "../ListRow"
-
-export interface AssistantToggleRowProps {
-  title: string
-  description: string
-  checked: boolean
-  onChange: (checked: boolean) => void
-  disabled?: boolean
-}
-
-/**
- * @deprecated 已并入行家族 `ListRow`（蓝图批次② ListRow 合并件）。
- * 新代码直接写 `<ListRow control="switch" checked onCheckedChange />`；
- * 本导出只是给包外消费方留的薄兼容层，形态全部由 ListRow 承担。
- */
-export function AssistantToggleRow({
-  title,
-  description,
-  checked,
-  onChange,
-  disabled,
-}: AssistantToggleRowProps): React.ReactElement {
-  return (
-    <ListRow
-      title={title}
-      description={description}
-      control="switch"
-      checked={checked}
-      onCheckedChange={onChange}
-      disabled={disabled}
-      divider={false}
-      className="px-0"
-    />
-  )
-}

package/src/components/composite/AttachmentCard/AttachmentCard.stories.tsx

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { AttachmentCard, Attachments } from "./index"
-
-const meta = {
-  title: "Composite/AttachmentCard",
-  component: AttachmentCard,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '已并入 Domain/Chat/Attachment（variant="tile" / "image"）。本页是 @deprecated 兼容层，新用法看 Attachment。',
-      },
-    },
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof AttachmentCard>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const PdfFile: Story = {
-  args: {
-    name: "Design-System-Spec.pdf",
-    size: "2.4 MB",
-    type: "pdf",
-    status: "completed",
-    onRemove: () => console.log("remove"),
-  },
-}
-
-export const DocFile: Story = {
-  args: {
-    name: "Project-Requirements.docx",
-    size: "854 KB",
-    type: "doc",
-    status: "completed",
-    onRemove: () => console.log("remove"),
-  },
-}
-
-export const ExcelFile: Story = {
-  args: {
-    name: "Q3-Financial-Report.xlsx",
-    size: "1.2 MB",
-    type: "xls",
-    status: "completed",
-    onRemove: () => console.log("remove"),
-  },
-}
-
-export const Uploading: Story = {
-  args: {
-    name: "Large-Video-File.mp4",
-    size: "45 MB",
-    type: "doc",
-    status: "uploading",
-    progress: 67,
-    onRemove: () => console.log("remove"),
-  },
-}
-
-export const UploadError: Story = {
-  args: {
-    name: "Failed-Upload.zip",
-    size: "15 MB",
-    type: "doc",
-    status: "error",
-    onRemove: () => console.log("remove"),
-    onRetry: () => console.log("retry"),
-  },
-}
-
-export const ImageThumbnail: Story = {
-  args: {
-    name: "screenshot.png",
-    thumbnail: "https://picsum.photos/200/200",
-    status: "completed",
-    onRemove: () => console.log("remove"),
-    onPreview: () => console.log("preview"),
-  },
-}
-
-export const ImageThumbnailError: Story = {
-  args: {
-    name: "failed-image.jpg",
-    thumbnail: "https://picsum.photos/200/201",
-    status: "error",
-    onRemove: () => console.log("remove"),
-    onRetry: () => console.log("retry"),
-  },
-}
-
-export const LongFileName: Story = {
-  args: {
-    name: "Very-Long-File-Name-That-Should-Wrap-Across-Multiple-Lines-In-The-Card.pdf",
-    size: "3.7 MB",
-    type: "pdf",
-    status: "completed",
-    onRemove: () => console.log("remove"),
-  },
-}
-
-export const MultipleAttachments: Story = {
-  render: () => (
-    <Attachments>
-      <AttachmentCard name="Design-Spec.pdf" size="2.4 MB" type="pdf" onRemove={() => console.log("remove 1")} />
-      <AttachmentCard
-        name="screenshot.png"
-        thumbnail="https://picsum.photos/200/200"
-        onRemove={() => console.log("remove 2")}
-        onPreview={() => console.log("preview")}
-      />
-      <AttachmentCard name="Report.xlsx" size="1.2 MB" type="xls" onRemove={() => console.log("remove 3")} />
-      <AttachmentCard
-        name="Uploading.mp4"
-        size="45 MB"
-        type="doc"
-        status="uploading"
-        progress={45}
-        onRemove={() => console.log("remove 4")}
-      />
-    </Attachments>
-  ),
-}

package/src/components/composite/AttachmentCard/index.tsx

@@ -1,80 +0,0 @@
-import type { ReactNode } from "react"
-import { Attachment, AttachmentList, type AttachmentStatus } from "../../domain/chat/Attachment"
-
-export type AttachmentCardProps = {
-  /** File name */
-  name: string
-  /** File size label (e.g. "754 KB") */
-  size?: string
-  /** File type badge (e.g. "PDF", "DOC") */
-  type?: "pdf" | "doc" | "xls" | "img" | string
-  /** Optional thumbnail URL for image attachments */
-  thumbnail?: string
-  /** Upload lifecycle displayed inside the composer attachment strip. */
-  status?: "uploading" | "completed" | "error"
-  /** Upload progress from 0 to 100. */
-  progress?: number
-  /** Shows a remove action on card hover/focus. */
-  onRemove?: () => void
-  /** Shows a retry action for failed uploads. */
-  onRetry?: () => void
-  /** Opens the image attachment preview. */
-  onPreview?: () => void
-  className?: string
-}
-
-const STATUS: Record<NonNullable<AttachmentCardProps["status"]>, AttachmentStatus> = {
-  uploading: "uploading",
-  completed: "done",
-  error: "error",
-}
-
-/**
- * Composer 附件条里的单个附件（方片 / 缩略图两档）。
- *
- * @deprecated DS 2.0 起并入 `Attachment`（domain/chat/Attachment）：无缩略走
- * `variant="tile"`，有缩略走 `variant="image"`。本导出是薄兼容层，只做状态词映射
- * （completed → done）与 meta 读数拼装；新代码直接用 `Attachment`。
- */
-export function AttachmentCard({
-  name,
-  size,
-  type = "doc",
-  thumbnail,
-  status = "completed",
-  progress = 0,
-  onRemove,
-  onRetry,
-  onPreview,
-  className = "",
-}: AttachmentCardProps) {
-  const label = type.toUpperCase()
-  return (
-    <Attachment
-      variant={thumbnail ? "image" : "tile"}
-      name={name}
-      meta={size ? `${label} · ${size}` : label}
-      kind={type}
-      thumbnail={thumbnail}
-      status={STATUS[status]}
-      progress={progress}
-      onOpen={onPreview}
-      onRetry={onRetry}
-      onRemove={onRemove}
-      className={className}
-    />
-  )
-}
-
-/**
- * 附件横排条。
- *
- * @deprecated DS 2.0 起并入 `AttachmentList`（`layout="strip"`）。
- */
-export function Attachments({ children, className = "" }: { children: ReactNode; className?: string }) {
-  return (
-    <AttachmentList layout="strip" className={className}>
-      {children}
-    </AttachmentList>
-  )
-}

package/src/components/composite/BackButton/BackButton.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { BackButton } from "./index"
-
-const meta = {
-  title: "Composite/BackButton",
-  component: BackButton,
-  parameters: { layout: "centered" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof BackButton>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** 默认 icon-only：无障碍名走 label（默认「返回」）。 */
-export const IconOnly: Story = {
-  args: {},
-}
-
-/** 带文案：图标在左，可见文案即无障碍名。 */
-export const WithLabel: Story = {
-  args: { children: "返回站点", label: "返回站点" },
-}
-
-/** 三档尺寸：28 / 32 / 40。 */
-export const Sizes: Story = {
-  render: () => (
-    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-      <BackButton size="sm" />
-      <BackButton size="md" />
-      <BackButton size="lg" />
-      <BackButton size="sm">返回</BackButton>
-      <BackButton size="md">返回</BackButton>
-      <BackButton size="lg">返回</BackButton>
-    </div>
-  ),
-}
-
-/** 禁用态：逐 token 禁用色，非统一透明度。 */
-export const Disabled: Story = {
-  render: () => (
-    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-      <BackButton disabled />
-      <BackButton disabled>返回定时任务</BackButton>
-    </div>
-  ),
-}
-
-/** 用在标题栏 leading 槽里的样子。 */
-export const InTitleBar: Story = {
-  render: () => (
-    <div
-      style={{
-        width: 480,
-        height: "var(--ow-titlebar-h)",
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "0 12px",
-        background: "var(--ow-surface)",
-        borderBottom: "1px solid var(--ow-border)",
-      }}
-    >
-      <BackButton size="sm" label="返回列表" />
-      <span style={{ fontSize: 13, fontWeight: 500, color: "var(--ow-text)" }}>每日构建</span>
-    </div>
-  ),
-}
-
-/** 双主题对照。 */
-export const ThemeMatrix: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 16 }}>
-      {(["light", "dark"] as const).map((theme) => (
-        <div
-          key={theme}
-          data-theme={theme}
-          style={{
-            background: "var(--ow-bg)",
-            padding: 16,
-            display: "flex",
-            gap: 8,
-            border: "1px solid var(--ow-border)",
-            borderRadius: "var(--ow-radius-card)",
-          }}
-        >
-          <BackButton />
-          <BackButton>返回</BackButton>
-          <BackButton disabled>返回</BackButton>
-        </div>
-      ))}
-    </div>
-  ),
-}

package/src/components/composite/BackButton/BackButtonSource.test.mjs

@@ -1,29 +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("BackButton 归口 ghost + chevron-left，不自造样式", () => {
-  assert.match(source, /variant="ghost"/)
-  assert.match(source, /ChevLeft/)
-  assert.doesNotMatch(source, /variant="unstyled"/)
-  assert.doesNotMatch(source, /className="ch-ic--back"/)
-  assert.doesNotMatch(source, /--ow-primary-bg|--ow-info-bg/)
-})
-
-test("状态与命中区交给 Button 原语；不重写 hover/press/focus", () => {
-  assert.doesNotMatch(source, /hover:|active:|focus-visible:/)
-  assert.match(source, /size = "md"/)
-})
-
-test("icon-only 时才写 aria-label，带文案时不覆盖可见名", () => {
-  assert.match(source, /const iconOnly = children == null/)
-  assert.match(source, /aria-label=\{iconOnly \? label : undefined\}/)
-  assert.match(source, /data-slot="back-button"/)
-})
-
-test("中性件：禁信标/荧黄（R3），无 Tailwind 歧义任意值", () => {
-  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
-  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
-})