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

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

@@ -1,333 +0,0 @@
-"use client"
-
-import { type FormEventHandler, type ReactNode, useCallback, useEffect, useId, useRef } from "react"
-import { createPortal } from "react-dom" // ui-imports-guard-disable-line
-import { FOCUSABLE, trapTab } from "../../../lib/focusTrap"
-import { cn } from "../../../lib/utils"
-import { Button } from "../../primitives"
-import { Close, WarningTriangle } from "../Icons"
-
-export type DialogVariant = "default" | "danger"
-/** 头部图标底：plain＝裸图标（默认）；其余＝功能色 tint 徽章（仅状态语境用，§7 图标色规） */
-export type DialogIconTone = "plain" | "info" | "warning" | "error"
-
-const ICON_TONE_CLASS: Record<Exclude<DialogIconTone, "plain">, string> = {
-  info: "bg-[var(--ow-info-tint)] text-[color:var(--ow-info-on-tint)]",
-  warning: "bg-[var(--ow-warning-tint)] text-[color:var(--ow-warning-on-tint)]",
-  error: "bg-[var(--ow-error-tint)] text-[color:var(--ow-error-on-tint)]",
-}
-
-/** 可聚焦元素选择器 —— 焦点圈闭环用（§6 focus-visible 必达且不得逃出模态）。 */
-
-export type DialogProps = {
-  /** 是否打开 */
-  open: boolean
-  /** 变体：danger＝破坏性确认（tint 图标徽章＋error 主按钮） */
-  variant?: DialogVariant
-  /** 标题 */
-  title?: ReactNode
-  /** 标题下的副文案 */
-  subtitle?: ReactNode
-  /** 标题前的图标；danger 变体缺省用告警三角 */
-  icon?: ReactNode
-  /** 图标底档；默认 danger 变体走 error 徽章，其余裸图标 */
-  iconTone?: DialogIconTone
-  /** 正文 */
-  children?: ReactNode
-  /** 脚部动作槽；给了就完全接管脚部（覆盖 onConfirm 便捷档） */
-  actions?: ReactNode
-  /** 便捷确认档：不传 actions 时渲染「取消＋确认」，确认按钮随 variant 取 primary/danger */
-  onConfirm?: () => void
-  confirmLabel?: ReactNode
-  cancelLabel?: ReactNode
-  confirmDisabled?: boolean
-  confirmLoading?: boolean
-  /** 遮罩点击/关闭钮/Escape 的统一出口 */
-  onClose?: () => void
-  /** 右上角关闭钮 */
-  closable?: boolean
-  /** 点遮罩关闭（默认 true） */
-  closeOnOverlayClick?: boolean
-  /** Escape 关闭（默认 true） */
-  closeOnEscape?: boolean
-  /** 宽度（三槽档默认 440；bare 档默认不设，交给内容/调用方 CSS） */
-  width?: number | string
-  /** 关掉默认内边距 —— 自管间距的面板内容用 */
-  padded?: boolean
-  /**
-   * 裸壳档：只出遮罩＋立面，不渲染头/体/脚三槽，内容自带全部结构。
-   * 供 OrbitworkModal 兼容层与自带 chrome 的预览壳使用。
-   */
-  bare?: boolean
-  /** 给了就把立面渲染成 <form>，脚部提交钮可用 type="submit" */
-  onSubmit?: FormEventHandler<HTMLFormElement>
-  /** 无 title 时的无障碍名 */
-  ariaLabel?: string
-  className?: string
-  overlayClassName?: string
-  /**
-   * 是否 portal 到 `document.body`（缺省 true）。
-   * false＝就地渲染整棵遮罩树：给 storybook 画框内取证用（画框自带 transform，
-   * 会把 `position: fixed` 的遮罩收进画框），也给需要弹层留在自己层叠上下文里的宿主用。
-   */
-  portal?: boolean
-  /**
-   * 是否把立面钉进视口（缺省 true）：写 `max-w-[90vw] max-h-[85vh]`，bare 档另加 `overflow-auto`。
-   * false＝这三样一概不写，尺寸上限与滚动全交给 `className`／消费方 CSS
-   *（定尺弹窗——如设置的 960×640 ＋ 右栏内滚——走这一档，免得两条上限打架、滚出第二条滚动条）。
-   */
-  fitViewport?: boolean
-}
-
-/**
- * Dialog —— DS 2.0 唯一模态基座（合并 OrbitworkModal）。
- *
- * 立面按 §5：`--ow-scrim` 遮罩 ＋ `--ow-shadow-modal` ＋ 1px `--ow-border`，
- * z 取 `--ow-z-modal`；圆角按 §7 取 `--ow-radius-modal`(16)。
- * 动效按 §9：唯一缓动 `--ow-ease-beacon`，遮罩 200ms / 面板 320ms 纯淡入
- * （禁缩放位移）；`.ow-motion` 使 prefers-reduced-motion 下静态入场。
- * 行为：Escape 关闭、Tab 焦点圈闭环、关闭后焦点还给触发元素。
- * 落点：缺省 portal 到 `document.body`；`portal={false}` 就地出树（画框取证／宿主自管层叠）。
- * 尺寸：缺省 `fitViewport` 把立面钉进视口（90vw/85vh）；`fitViewport={false}` 交给 className 定尺。
- * R3 中性件——不含任何信标/荧黄元素。
- */
-export function Dialog({
-  open,
-  variant = "default",
-  title,
-  subtitle,
-  icon,
-  iconTone,
-  children,
-  actions,
-  onConfirm,
-  confirmLabel = "确认",
-  cancelLabel = "取消",
-  confirmDisabled = false,
-  confirmLoading = false,
-  onClose,
-  closable = true,
-  closeOnOverlayClick = true,
-  closeOnEscape = true,
-  width,
-  padded = true,
-  bare = false,
-  onSubmit,
-  ariaLabel,
-  className = "",
-  overlayClassName = "",
-  portal = true,
-  fitViewport = true,
-}: DialogProps) {
-  const surfaceRef = useRef<HTMLElement | null>(null)
-  const restoreRef = useRef<HTMLElement | null>(null)
-  // 回调 ref：同一份状态既挂 <div> 也挂 <form>（onSubmit 档），避免两套 ref 类型。
-  const setSurface = useCallback((node: HTMLElement | null) => {
-    surfaceRef.current = node
-  }, [])
-  const reactId = useId()
-  const titleId = `${reactId}-title`
-  const descId = `${reactId}-desc`
-
-  const requestClose = useCallback(() => {
-    onClose?.()
-  }, [onClose])
-
-  // Escape 出口 ＋ Tab 焦点圈闭环（捕获阶段，弹层内焦点不外泄）。
-  useEffect(() => {
-    if (!open) return undefined
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && closeOnEscape) {
-        event.stopPropagation()
-        requestClose()
-        return
-      }
-      if (event.key !== "Tab") return
-      const surface = surfaceRef.current
-      if (!surface) return
-      trapTab(event, surface)
-    }
-    document.addEventListener("keydown", onKeyDown, true)
-    return () => document.removeEventListener("keydown", onKeyDown, true)
-  }, [open, closeOnEscape, requestClose])
-
-  // 入场取焦（自带 autofocus / data-autofocus 的内容优先），离场把焦点还给触发元素。
-  // 消费方要指定入场焦点，用 `data-autofocus` 而不是 React 的 `autoFocus` prop：
-  // React 不会把 autoFocus 写成 DOM 属性，而是在 commit 阶段直接 .focus()——那发生在
-  // 本 effect 之前，等这里读 activeElement 时焦点已在立面内，还焦目标就丢了（关闭后回不到触发元素）。
-  useEffect(() => {
-    if (!open) return undefined
-    restoreRef.current = (document.activeElement as HTMLElement | null) ?? null
-    const surface = surfaceRef.current
-    if (surface && !surface.contains(document.activeElement)) {
-      const target =
-        surface.querySelector<HTMLElement>("[autofocus],[data-autofocus]") ??
-        surface.querySelector<HTMLElement>(FOCUSABLE)
-      ;(target ?? surface).focus()
-    }
-    return () => {
-      restoreRef.current?.focus?.()
-    }
-  }, [open])
-
-  if (!open) return null
-  // 只有 portal 档需要真实 document；就地渲染档在 SSR 下照常出树。
-  if (portal && typeof document === "undefined") return null
-
-  const hasHeader = !bare && (title !== undefined || (closable && !!onClose))
-  const showConfirmRow = !bare && !actions && !!onConfirm
-  const hasFooter = !bare && (!!actions || showConfirmRow)
-  const headerIcon = icon ?? (variant === "danger" ? <WarningTriangle aria-hidden="true" /> : null)
-  const tone: DialogIconTone = iconTone ?? (variant === "danger" ? "error" : "plain")
-
-  const surfaceClass = cn(
-    "relative box-border outline-none",
-    // fitViewport 档才把立面钉进视口；false 时上限与自滚全交给 className（定尺弹窗用）。
-    fitViewport && "max-w-[90vw] max-h-[85vh]",
-    // 裸壳档保留旧 OrbitworkModal 的块级+自滚布局，内容自带 chrome；三槽档用列式弹性布局。
-    bare ? fitViewport && "overflow-auto" : "flex flex-col overflow-hidden",
-    "bg-[var(--ow-popover-bg)] [border-radius:var(--ow-radius-modal)]",
-    "border border-[color:var(--ow-border)] shadow-[var(--ow-shadow-modal)]",
-    "animate-[fade-in_var(--ow-dur-3)_var(--ow-ease-beacon)]",
-    className,
-  )
-  const resolvedWidth = width ?? (bare ? undefined : 440)
-  const surfaceStyle: React.CSSProperties = {}
-  if (resolvedWidth !== undefined) surfaceStyle.width = resolvedWidth
-  if (!bare) surfaceStyle.padding = padded ? "var(--ow-space-6, 24px)" : 0
-
-  const body = (
-    <>
-      {hasHeader && (
-        <div data-slot="dialog-header" className="flex items-start justify-between gap-3 mb-4 flex-shrink-0">
-          <div className="flex-1 min-w-0 flex items-start gap-3">
-            {headerIcon && (
-              <span
-                data-ow-part="icon"
-                data-ow-tone={tone}
-                className={cn(
-                  "flex-[0_0_auto] inline-flex items-center justify-center",
-                  tone === "plain"
-                    ? "w-5 h-5 text-[color:var(--ow-text-2)] [&>svg]:w-5 [&>svg]:h-5"
-                    : cn(
-                        // §7 形状表：999 只留给带状态点/计数的 chip 与真圆件；
-                        // 头部图标徽章与页头图标钮同口径，落 8px 行动档。
-                        "w-8 h-8 [border-radius:var(--ow-radius-action)] [&>svg]:w-4 [&>svg]:h-4",
-                        ICON_TONE_CLASS[tone],
-                      ),
-                )}
-              >
-                {headerIcon}
-              </span>
-            )}
-            <div className="flex-1 min-w-0">
-              {title !== undefined && (
-                <div
-                  id={titleId}
-                  data-ow-part="title"
-                  className="text-[color:var(--ow-text)] font-semibold text-ow-fs-subtitle leading-[1.3] font-[family-name:var(--ow-font-sans)]"
-                >
-                  {title}
-                </div>
-              )}
-              {subtitle !== undefined && (
-                <div
-                  id={descId}
-                  data-ow-part="subtitle"
-                  className="mt-1 text-[color:var(--ow-text-3)] font-normal text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)]"
-                >
-                  {subtitle}
-                </div>
-              )}
-            </div>
-          </div>
-          {closable && onClose && (
-            <Button
-              variant="ghost"
-              size="md"
-              type="button"
-              data-ow-part="close"
-              icon={<Close />}
-              aria-label="关闭"
-              onClick={requestClose}
-            />
-          )}
-        </div>
-      )}
-      <div
-        data-slot="dialog-body"
-        className="flex-1 min-h-0 overflow-y-auto text-[color:var(--ow-text-2)] font-normal text-ow-fs-body leading-6 font-[family-name:var(--ow-font-sans)]"
-      >
-        {children}
-      </div>
-      {hasFooter && (
-        <div data-slot="dialog-actions" className="flex items-center justify-end gap-3 mt-5 flex-shrink-0">
-          {actions ?? (
-            <>
-              {onClose && (
-                <Button variant="secondary" type="button" onClick={requestClose}>
-                  {cancelLabel}
-                </Button>
-              )}
-              <Button
-                variant={variant === "danger" ? "danger" : "primary"}
-                type="button"
-                loading={confirmLoading}
-                disabled={confirmDisabled}
-                onClick={onConfirm}
-              >
-                {confirmLabel}
-              </Button>
-            </>
-          )}
-        </div>
-      )}
-    </>
-  )
-
-  const surfaceProps = {
-    "data-slot": "dialog",
-    "data-ow-part": "surface",
-    "data-ow-variant": variant,
-    role: "dialog",
-    "aria-modal": true as const,
-    "aria-labelledby": title !== undefined ? titleId : undefined,
-    "aria-describedby": subtitle !== undefined ? descId : undefined,
-    "aria-label": title === undefined ? ariaLabel : undefined,
-    tabIndex: -1,
-    className: surfaceClass,
-    style: surfaceStyle,
-  }
-
-  const content = bare ? children : body
-
-  const overlay = (
-    <div
-      data-slot="dialog-overlay"
-      data-ow-part="overlay"
-      className={cn(
-        "ow-motion fixed inset-0 flex items-center justify-center p-4",
-        "z-[var(--ow-z-modal)] bg-[var(--ow-scrim)]",
-        "animate-[fade-in_var(--ow-dur-2)_var(--ow-ease-beacon)]",
-        overlayClassName,
-      )}
-      onMouseDown={(event) => {
-        if (!closeOnOverlayClick) return
-        if (event.target !== event.currentTarget) return
-        requestClose()
-      }}
-    >
-      {onSubmit ? (
-        <form {...surfaceProps} ref={setSurface} onSubmit={onSubmit}>
-          {content}
-        </form>
-      ) : (
-        <div {...surfaceProps} ref={setSurface}>
-          {content}
-        </div>
-      )}
-    </div>
-  )
-
-  return portal ? createPortal(overlay, document.body) : overlay
-}

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

@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { DropZone } from "./index"
-
-const meta = {
-  title: "Composite/DropZone",
-  component: DropZone,
-  parameters: { layout: "padded" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof DropZone>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const Frame = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ width: 480, maxWidth: "100%" }}>{children}</div>
-)
-
-export const Default: Story = {
-  render: () => (
-    <Frame>
-      <DropZone hint="支持 PNG、JPG、PDF，单个不超过 20 MB" />
-    </Frame>
-  ),
-}
-
-export const WithoutButton: Story = {
-  name: "只拖不选",
-  render: () => (
-    <Frame>
-      <DropZone actionLabel={null} message="把文件拖到这里" />
-    </Frame>
-  ),
-}
-
-export const DragGesture: Story = {
-  name: "拖入手势期",
-  render: () => (
-    <Frame>
-      <p style={{ margin: "0 0 8px", fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
-        从桌面拖一个文件进来：边框换 --ow-drop-border、底换 --ow-drop-bg，文案同时切成「松手放到这里」 （R1
-        双编码）。松手即熄，属状态极手势期豁免，不计全屏配额。
-      </p>
-      <DropZone onFiles={() => {}} />
-    </Frame>
-  ),
-}
-
-export const Loading: Story = {
-  name: "上传中",
-  render: () => (
-    <Frame>
-      <DropZone loading loadingLabel="正在上传 3 个文件" />
-    </Frame>
-  ),
-}
-
-export const ErrorState: Story = {
-  name: "错误",
-  render: () => (
-    <Frame>
-      <DropZone
-        error="这个文件太大了，换个小于 20 MB 的再试。"
-        errorDetail='{"code":"FILE_TOO_LARGE","size":"38.4MB"}'
-      />
-    </Frame>
-  ),
-}
-
-export const Disabled: Story = {
-  name: "禁用",
-  render: () => (
-    <Frame>
-      <DropZone disabled message="当前不能上传文件" />
-    </Frame>
-  ),
-}
-
-export const CustomContent: Story = {
-  name: "自定义内容",
-  render: () => (
-    <Frame>
-      <DropZone>
-        <span style={{ fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
-          把整个文件夹拖进来，我按目录结构导入。
-        </span>
-      </DropZone>
-    </Frame>
-  ),
-}
-
-export const DualTheme: Story = {
-  name: "双主题对照",
-  parameters: { layout: "fullscreen" },
-  render: () => (
-    <div style={{ display: "flex" }}>
-      {(["light", "dark"] as const).map((theme) => (
-        <div key={theme} data-theme={theme} style={{ flex: 1, background: "var(--ow-bg)", padding: 16 }}>
-          <DropZone hint="支持 PNG、JPG、PDF" />
-          <div style={{ height: 12 }} />
-          <DropZone disabled message="当前不能上传文件" />
-        </div>
-      ))}
-    </div>
-  ),
-}

package/src/components/composite/DropZone/DropZoneSource.test.mjs

@@ -1,68 +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")
-const spinner = await readFile(new URL("../../primitives/Spinner/index.tsx", import.meta.url), "utf8")
-
-// check-ds2 也扫测试文件，违规写法拼接构造，免得守卫把断言本身当成违规。
-const NO_UNIFORM_DISABLED = new RegExp(`disabled:${"opacity"}-`)
-
-test("静息落点 = 2px 虚线 --ow-border-strong + 圆角 card(12)，贴地 0 影", () => {
-  assert.match(source, /border-2 border-dashed \[border-radius:var\(--ow-radius-card\)\]/)
-  assert.match(source, /border-\[color:var\(--ow-border-strong\)\]/)
-  assert.doesNotMatch(source, /shadow-|box-shadow/)
-})
-
-test("拖入手势期用 --ow-drop-* 语义 token（状态极手势期豁免）", () => {
-  assert.match(source, /border-\[color:var\(--ow-drop-border\)\] bg-\[var\(--ow-drop-bg\)\]/)
-  // R2：组件里不得直写荧黄本体，只经语义 token 间接获得
-  assert.doesNotMatch(source, /var\(--ow-yellow|var\(--ow-beacon|var\(--ow-accent-dot/)
-})
-
-test("R1 双编码：拖入态除了变色，文案同时换成另一句", () => {
-  assert.match(source, /activeMessage = "松手放到这里"/)
-  assert.match(source, /dragging \? activeMessage : message/)
-})
-
-test("地面交互底色按 §5 递进：hover → press（非 pop 档，落点不是弹层）", () => {
-  assert.match(source, /hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]/)
-  assert.doesNotMatch(source, /hover:bg-\[var\(--ow-hover-pop\)\]/)
-})
-
-test("状态完整性：禁用逐 token、上传中小转子、错误走 InlineMessage", () => {
-  assert.match(
-    source,
-    /border-\[color:var\(--ow-disabled-border\)\] bg-\[var\(--ow-disabled-bg\)\] text-\[color:var\(--ow-disabled-text\)\]/,
-  )
-  assert.doesNotMatch(source, NO_UNIFORM_DISABLED)
-  // W-R2：转子本体收到 primitives/Spinner（§9 唯一转子帧），本件只消费不再手抄
-  assert.match(source, /import \{ Spinner \} from "\.\.\/\.\.\/primitives\/Spinner"/)
-  assert.match(source, /<Spinner size="md" \/>/)
-  assert.doesNotMatch(source, /<svg/)
-  assert.match(spinner, /motion-safe:animate-\[ow-spin_var\(--ow-dur-spin-fast\)_linear_infinite\]/)
-  assert.match(spinner, /strokeWidth="1.5"/)
-  assert.match(source, /<InlineMessage variant="error"/)
-})
-
-// §6 状态表：忙态不得保留可交互反馈。busy=disabled||loading 已拦住 browse()，
-// 样式也必须撤掉手型光标与 hover/press 底，否则「点了没反应」。
-test("上传中＝非交互态：cursor-default，不留 hover/press 反馈", () => {
-  assert.match(
-    source,
-    /loading\s*\n?\s*\? "cursor-default border-\[color:var\(--ow-border-strong\)\] text-\[color:var\(--ow-text-2\)\]"/,
-  )
-  // hover/press 只挂在最后一支（rest 可点档）上
-  assert.equal(source.match(/hover:bg-\[var\(--ow-hover\)\]/g)?.length, 1)
-})
-
-test("空态母题走 EmptyState 原语，浏览按钮阻止冒泡（否则弹两次文件框）", () => {
-  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
-  assert.match(source, /e\.stopPropagation\(\)\s*\n\s*browse\(\)/)
-})
-
-test("动效 ease-beacon + dur-1；任意值 var() 带类型标注", () => {
-  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
-  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
-  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
-})