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

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

@@ -1,304 +0,0 @@
-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

@@ -1,63 +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 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

@@ -1,135 +0,0 @@
-"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>
-  )
-}