@orbit-work/ui 0.1.0

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

@@ -0,0 +1,304 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "../../primitives"
+import { ErrorCircle, InfoCircle, Sparkles, SuccessCircle, WarningTriangle } from "../Icons"
+import { Toast, ToastRegion } from "./index"
+
+const meta = {
+  title: "Primitives/Toast",
+  component: Toast,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Toast>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Info: Story = {
+  args: {
+    variant: "info",
+    children: "工作区已切到只读模式，改动不会写回。",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    children: "操作已完成。",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    children: "这条设置改动会影响所有成员，确认一下。",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+    children: "操作没执行成功。",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const LongMessage: Story = {
+  args: {
+    variant: "info",
+    children: "这是一条更长的通知，用来演示正文超出一行时怎么折行——文案本身没有长度上限，但一屏里最好别超过三行。",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const ShortMessage: Story = {
+  args: {
+    variant: "success",
+    children: "已完成",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const WithoutIcon: Story = {
+  args: {
+    variant: "info",
+    showIcon: false,
+    children: "不带图标的一条通知",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const WithoutDismissButton: Story = {
+  args: {
+    variant: "success",
+    children: "这条通知不能手动关掉",
+  },
+}
+
+export const CustomIcon: Story = {
+  args: {
+    variant: "info",
+    icon: <Sparkles />,
+    children: "用自定义图标替掉默认的 info 图标",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const CustomDuration: Story = {
+  args: {
+    variant: "warning",
+    children: "2 秒后自动消失",
+    duration: 2000,
+    onDismiss: () => console.log("Toast auto-dismissed after 2s"),
+  },
+}
+
+export const NoDuration: Story = {
+  args: {
+    variant: "error",
+    children: "不自动消失（duration=0）",
+    duration: 0,
+    onDismiss: () => console.log("Toast manually dismissed"),
+  },
+}
+
+export const ChineseContent: Story = {
+  args: {
+    variant: "success",
+    children: "操作已成功完成",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const MixedLanguageContent: Story = {
+  args: {
+    variant: "error",
+    children: "文件上传失败，重试一次。",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const MultilineContent: Story = {
+  args: {
+    variant: "warning",
+    children: "第一行文案\n第二行文案\n第三行文案",
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const WithBoldText: Story = {
+  args: {
+    variant: "info",
+    children: (
+      <>
+        <strong>注意：</strong>这一句被加重，用来演示行内富文本
+      </>
+    ),
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const WithLink: Story = {
+  args: {
+    variant: "warning",
+    children: (
+      <>
+        有新版本可用。{" "}
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault()
+            console.log("Link clicked")
+          }}
+        >
+          查看详情
+        </a>
+      </>
+    ),
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, minWidth: 360 }}>
+      <Toast variant="info" onDismiss={() => console.log("Info dismissed")}>
+        提示消息
+      </Toast>
+      <Toast variant="success" onDismiss={() => console.log("Success dismissed")}>
+        成功消息
+      </Toast>
+      <Toast variant="warning" onDismiss={() => console.log("Warning dismissed")}>
+        警告消息
+      </Toast>
+      <Toast variant="error" onDismiss={() => console.log("Error dismissed")}>
+        错误消息
+      </Toast>
+    </div>
+  ),
+}
+
+export const WithInlineAction: Story = {
+  args: {
+    variant: "success",
+    children: "已归档 3 个任务",
+    action: (
+      <Button variant="link" size="sm">
+        撤销
+      </Button>
+    ),
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+export const MaxWidth: Story = {
+  args: {
+    variant: "info",
+    children:
+      "宽度上限 420：超过就换行，不会把整条 toast 撑到屏幕那么宽。这一句故意写得很长，用来看第二行的行高和左边图标的对齐。",
+    action: (
+      <Button variant="link" size="sm">
+        查看
+      </Button>
+    ),
+    onDismiss: () => console.log("Toast dismissed"),
+  },
+}
+
+/** 双主题并排；不写死主题，靠 data-theme 属性驱动。 */
+export const BothThemes: Story = {
+  args: { children: "" },
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div
+          key={theme}
+          data-theme={theme}
+          style={{
+            background: "var(--ow-bg)",
+            padding: 16,
+            borderRadius: 12,
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+          }}
+        >
+          <Toast variant="info" duration={0}>
+            正在后台处理
+          </Toast>
+          <Toast variant="success" duration={0} onDismiss={() => {}}>
+            文件已上传
+          </Toast>
+          <Toast variant="warning" duration={0} onDismiss={() => {}}>
+            网络不稳定
+          </Toast>
+          <Toast variant="error" duration={0} onDismiss={() => {}}>
+            上传失败，请重试
+          </Toast>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/** ToastRegion：右上角堆叠、间距 8、z＝--ow-z-toast。 */
+export const InToastRegion: Story = {
+  args: { children: "" },
+  render: () => (
+    <div style={{ position: "relative", width: 640, height: 260, background: "var(--ow-bg)", borderRadius: 12 }}>
+      <ToastRegion>
+        <Toast variant="success" onDismiss={() => console.log("Toast 1 dismissed")}>
+          File uploaded successfully
+        </Toast>
+        <Toast variant="info" onDismiss={() => console.log("Toast 2 dismissed")}>
+          Processing in background
+        </Toast>
+        <Toast variant="warning" onDismiss={() => console.log("Toast 3 dismissed")}>
+          Connection unstable
+        </Toast>
+      </ToastRegion>
+    </div>
+  ),
+}
+
+export const MixedStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, minWidth: 360 }}>
+      <Toast variant="success" showIcon onDismiss={() => console.log("With both")}>
+        With icon and dismiss
+      </Toast>
+      <Toast variant="info" showIcon={false} onDismiss={() => console.log("No icon")}>
+        Without icon, with dismiss
+      </Toast>
+      <Toast variant="warning" showIcon>
+        With icon, no dismiss
+      </Toast>
+      <Toast variant="error" showIcon={false}>
+        Without icon or dismiss
+      </Toast>
+    </div>
+  ),
+}
+
+export const CustomIconsForEachVariant: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, minWidth: 360 }}>
+      <Toast variant="info" icon={<Sparkles />} onDismiss={() => console.log("Dismissed")}>
+        Info with star icon
+      </Toast>
+      <Toast variant="success" icon={<InfoCircle />} onDismiss={() => console.log("Dismissed")}>
+        Success with info icon
+      </Toast>
+      <Toast variant="warning" icon={<ErrorCircle />} onDismiss={() => console.log("Dismissed")}>
+        Warning with error icon
+      </Toast>
+      <Toast variant="error" icon={<WarningTriangle />} onDismiss={() => console.log("Dismissed")}>
+        Error with warning icon
+      </Toast>
+    </div>
+  ),
+}

package/src/components/composite/Toast/ToastSource.test.mjs

@@ -0,0 +1,63 @@
+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 css = await readFile(new URL("../../../../styles/globals.css", import.meta.url), "utf8")
+
+test("toast exposes semantic default icons that can be hidden without a spacer", () => {
+  assert.match(source, /showIcon\?: boolean/)
+  assert.match(source, /showIcon = true/)
+  assert.match(source, /showIcon && \(/)
+  assert.match(source, /icon \?\? defaultIcons\[variant\]/)
+  assert.doesNotMatch(source, /data-ow-part="icon"[^}]*margin/s)
+})
+
+test("error toasts stay visible for ten seconds by default", () => {
+  assert.match(source, /duration = variant === "error" \? 10_000 : 4000/)
+})
+
+test("toast four semantic states use the tint family plus a distinct icon (R1 dual coding)", () => {
+  assert.match(source, /info: "bg-\[var\(--ow-info-tint\)\] text-\[color:var\(--ow-info-on-tint\)\]"/)
+  assert.match(source, /success: "bg-\[var\(--ow-success-tint\)\] text-\[color:var\(--ow-success-on-tint\)\]"/)
+  assert.match(source, /warning: "bg-\[var\(--ow-warning-tint\)\] text-\[color:var\(--ow-warning-on-tint\)\]"/)
+  assert.match(source, /error: "bg-\[var\(--ow-error-tint\)\] text-\[color:var\(--ow-error-on-tint\)\]"/)
+  assert.match(source, /data-ow-role=\{variant\}/)
+  assert.match(source, /role=\{variant === "error" \? "alert" : "status"\}/)
+  assert.doesNotMatch(source, /border-left/)
+  // 任意值 var() 必须带类型标注，否则 tailwind-merge 会按错误分组吞类
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+})
+
+test("toast keeps popover elevation: no inversion, radius 12, 1px border, shadow-pop, max-width 420", () => {
+  assert.match(source, /border border-ow-border/)
+  assert.match(source, /bg-ow-popover-bg/)
+  assert.match(source, /shadow-\[var\(--ow-shadow-pop\)\]/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-card\)\]/)
+  assert.match(source, /max-w-\[420px\]/)
+  // toast 不是 tooltip：禁反色底
+  assert.doesNotMatch(source, /tooltip-bg|--ow-inverse/)
+})
+
+test("toast entrance animates opacity only — no translate (DS2 §9)", () => {
+  assert.match(source, /animate-\[toast-in_200ms_var\(--ow-ease-beacon\)\]/)
+  const keyframe = css.match(/@keyframes toast-in \{[\s\S]*?\n\}/)
+  assert.ok(keyframe, "toast-in keyframe missing from globals.css")
+  assert.doesNotMatch(keyframe[0], /transform|translate/)
+  assert.match(keyframe[0], /opacity: 0/)
+})
+
+test("toast supports an inline action and a labelled close control", () => {
+  assert.match(source, /data-ow-part="action"/)
+  // 关闭钮保持 Button ghost·sm icon-only 盒（28×28，§7 控件高刻度），只压图标到 14
+  assert.match(source, /data-ow-part="close"[\s\S]*?icon=\{<Close className="w-3\.5 h-3\.5"/)
+  assert.ok(!/data-ow-part="close"[\s\S]{0,200}?className="w-3 h-3 p-0/.test(source))
+  assert.match(source, /aria-label="关闭通知"/)
+  assert.match(source, /data-ow-part="icon"[^}]*w-5 h-5/s)
+})
+
+test("toast region stacks top-right with 8px gap at the toast z layer", () => {
+  assert.match(source, /data-slot="toast-region"/)
+  assert.match(source, /absolute top-4 right-4 z-\[var\(--ow-z-toast\)\][^"]*flex flex-col items-end gap-2/)
+  assert.match(source, /pointer-events-none/)
+})

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

@@ -0,0 +1,135 @@
+"use client"
+
+import { type ReactNode, useEffect } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives"
+import { Close, ErrorCircle, InfoCircle, SuccessCircle, WarningTriangle } from "../Icons"
+
+export type ToastVariant = "info" | "success" | "warning" | "error"
+
+export interface ToastProps {
+  variant?: ToastVariant
+  /** Custom icon. Defaults to the semantic icon for the selected variant. */
+  icon?: ReactNode
+  /** Whether to render the leading icon. */
+  showIcon?: boolean
+  children: ReactNode
+  /** 行内操作（如「撤销」），放在消息与关闭钮之间 */
+  action?: ReactNode
+  /** 自动消失毫秒数；默认 error 10000、其余 4000。传 0 表示不自动消失。 */
+  duration?: number
+  onDismiss?: () => void
+  className?: string
+}
+
+const defaultIcons: Record<ToastVariant, ReactNode> = {
+  info: <InfoCircle />,
+  success: <SuccessCircle />,
+  warning: <WarningTriangle />,
+  error: <ErrorCircle />,
+}
+
+/**
+ * Toast — DS2 瞬时通知（§5 立面 · §7 圆角 · §9 动效）。
+ *
+ * 立面＝popover 待遇「不反色」：`--ow-popover-bg` 底＋1px `--ow-border`＋`--ow-shadow-pop`，
+ * 圆角 card(12)、max-width 420；z 由 ToastRegion 承担（`--ow-z-toast`）。
+ * 四语义态＝tint 族图标底章（`--ow-{v}-tint` 底 + `--ow-{v}-on-tint` 字色）＋形状各异的语义图标，
+ * 颜色只作第二编码（R1）。中性件，禁信标荧黄（R3）。
+ * 入场仅 opacity——§9 禁位移式反馈，旧 8px translateY 已删。
+ */
+const toastSurface =
+  "relative flex items-center gap-2.5 w-full max-w-[420px] px-3.5 py-2.5 overflow-clip [border-radius:var(--ow-radius-card)] border border-ow-border bg-ow-popover-bg shadow-[var(--ow-shadow-pop)] font-normal text-ow-fs-ui leading-[1.4] text-ow-text pointer-events-auto animate-[toast-in_200ms_var(--ow-ease-beacon)]"
+
+/** tint 族图标底章：tint 底配 on-tint 字色（§2 语义配对） */
+const iconTintMap: Record<ToastVariant, string> = {
+  info: "bg-[var(--ow-info-tint)] text-[color:var(--ow-info-on-tint)]",
+  success: "bg-[var(--ow-success-tint)] text-[color:var(--ow-success-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)]",
+}
+
+export function Toast({
+  variant = "info",
+  icon,
+  showIcon = true,
+  children,
+  action,
+  /** 错误留 10s（可读完再消失），其余 4s。研发 754d2b4 同一口径。 */
+  duration = variant === "error" ? 10_000 : 4000,
+  onDismiss,
+  className,
+}: ToastProps) {
+  useEffect(() => {
+    if (!duration || !onDismiss) return
+    const t = setTimeout(onDismiss, duration)
+    return () => clearTimeout(t)
+  }, [duration, onDismiss])
+
+  return (
+    <div
+      data-slot="toast"
+      data-variant={variant}
+      data-ow-part="surface"
+      data-ow-role={variant}
+      className={cn(toastSurface, className)}
+      role={variant === "error" ? "alert" : "status"}
+    >
+      {showIcon && (
+        <span
+          data-ow-part="icon"
+          className={cn(
+            "inline-flex shrink-0 items-center justify-center w-5 h-5 [border-radius:var(--ow-radius-xs)] [&>svg]:w-4 [&>svg]:h-4",
+            iconTintMap[variant],
+          )}
+          aria-hidden="true"
+        >
+          {icon ?? defaultIcons[variant]}
+        </span>
+      )}
+      <span data-ow-part="message" className="flex-1 min-w-0 break-words">
+        {children}
+      </span>
+      {action && (
+        <span data-ow-part="action" className="shrink-0">
+          {action}
+        </span>
+      )}
+      {onDismiss && (
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          data-ow-part="close"
+          className="shrink-0 text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text)]"
+          onClick={onDismiss}
+          aria-label="关闭通知"
+          icon={<Close className="w-3.5 h-3.5" aria-hidden="true" />}
+        />
+      )}
+    </div>
+  )
+}
+
+export interface ToastRegionProps {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * ToastRegion — 右上角堆叠容器，间距 8，z＝`--ow-z-toast`。
+ * 保持 `absolute` 定位：模态内可就近挂一个局部 region（见 SessionShareDialog）。
+ */
+export function ToastRegion({ children, className }: ToastRegionProps) {
+  return (
+    <div
+      data-slot="toast-region"
+      className={cn(
+        "absolute top-4 right-4 z-[var(--ow-z-toast)] pointer-events-none flex flex-col items-end gap-2",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}