@suphark/ui 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.31.0] — 2026-10-06
+
+> 0.30.0 ถูก publish ก่อน commit ของ `NotificationCenter` (ตรวจ tarball แล้วไม่มีไฟล์ `shared/notification-center.tsx`) จึงเลื่อนมาออกเป็น 0.31.0 — ของอื่นใน 0.30.0 อยู่ครบตามรายการข้างล่าง
+
+### Added
+
+- **`NotificationCenter`** — ศูนย์การแจ้งเตือน (ยกจาก DueBell `notification-modal` + `urgent-bills-widget`): ชิปนับหลายกลุ่มที่กดกรองได้ + รายการที่ต้องจัดการ พร้อมปุ่มลัดต่อรายการและเมนู "…" · ออกแบบตามข้อกำหนดที่ DueBell ให้มา — ชิปเป็น array (`counts`) ไม่ใช่ prop ตายตัว, คำสั่งเป็น array (`actions` + `menuActions`), ของโดเมนส่งเป็น node ที่แอปเตรียมแล้ว (`status`/`meta`/`footer` — ยอดเงินที่ซ่อนได้, ความคืบหน้ารอบ), **แพ็กเกจไม่ฟอร์แมตวันที่เอง** และ **ไม่ตัดรายการเอง** (จะจำกัดจำนวนให้แอป slice ก่อนแล้วส่ง `viewAll` — ตัวเลขในชิปจึงตรงกับที่ผู้ใช้เห็นเสมอ); `busy` ปิดปุ่มทุกตัวระหว่างทำคำสั่งลัด · คีย์ `UiText.notifications`
+
 ## [0.30.0] — 2026-10-05
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/shared/notification-center.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import { ActionMenu } from "@suphark/ui/components/shared/action-menu";
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import { BellIcon, ChevronRightIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+export type NotificationTone = "default" | "info" | "success" | "warning" | "destructive";
+
+const ACCENT: Record<NotificationTone, string> = {
+  default: "border-l-border",
+  info: "border-l-info",
+  success: "border-l-success",
+  warning: "border-l-warning",
+  destructive: "border-l-destructive",
+};
+
+const ICON_TONE: Record<NotificationTone, string> = {
+  default: "bg-muted text-muted-foreground",
+  info: "bg-info-subtle text-info-subtle-foreground",
+  success: "bg-success-subtle text-success-subtle-foreground",
+  warning: "bg-warning-subtle text-warning-subtle-foreground",
+  destructive: "bg-destructive-subtle text-destructive-subtle-foreground",
+};
+
+const CHIP_TONE: Record<NotificationTone, string> = {
+  default: "border-border bg-muted text-muted-foreground",
+  info: "border-info-border bg-info-subtle text-info-subtle-foreground",
+  success: "border-success-border bg-success-subtle text-success-subtle-foreground",
+  warning: "border-warning-border bg-warning-subtle text-warning-subtle-foreground",
+  destructive: "border-destructive-border bg-destructive-subtle text-destructive-subtle-foreground",
+};
+
+const ACTION_TONE: Record<NotificationTone, string> = {
+  default: "",
+  info: "text-info-subtle-foreground",
+  success: "text-success-subtle-foreground",
+  warning: "text-warning-subtle-foreground",
+  destructive: "text-destructive",
+};
+
+export interface NotificationChip {
+  key: string;
+  label: ReactNode;
+  count: number;
+  tone?: NotificationTone;
+  /** กดเพื่อกรอง — ไม่ส่ง = ชิปนับอย่างเดียว */
+  onSelect?: () => void;
+  active?: boolean;
+}
+
+export interface NotificationAction {
+  key: string;
+  label: string;
+  onSelect: () => void;
+  icon?: ReactNode;
+  tone?: NotificationTone;
+  /** ปุ่มหลักของแถว (เด่นกว่าตัวอื่น) — ปกติมีตัวเดียว */
+  primary?: boolean;
+  disabled?: boolean;
+}
+
+export interface NotificationEntry {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  tone?: NotificationTone;
+  /**
+   * สถานะ/กำหนดเวลาที่ **แอปฟอร์แมตมาแล้ว** (เช่น `<DueDateBadge>` หรือ "23 ก.ย. · พรุ่งนี้")
+   * แพ็กเกจไม่ฟอร์แมตวันที่เอง เพราะปี พ.ศ./ภาษาเป็นของแอป
+   */
+  status?: ReactNode;
+  /** บรรทัดเล็กใต้ชื่อ เช่น กลุ่ม · หมวดหมู่ */
+  meta?: ReactNode;
+  /** ท้ายแถว — เรื่องเฉพาะโดเมน เช่นยอดเงิน (ซ่อนได้) หรือความคืบหน้ารอบ */
+  footer?: ReactNode;
+  /** ยังไม่ได้อ่าน — จุดหน้าชื่อ + พื้นจาง */
+  unread?: boolean;
+  /** ปุ่มในแถว (ปุ่มที่ `primary` จะเด่นสุด) */
+  actions?: ReadonlyArray<NotificationAction>;
+  /** คำสั่งรองใน "…" */
+  menuActions?: ReadonlyArray<NotificationAction>;
+  /** คลิกทั้งแถว (ปุ่มในแถว stopPropagation ให้แล้ว) */
+  onSelect?: () => void;
+}
+
+export interface NotificationCenterProps {
+  /**
+   * รายการที่จะแสดง — **แพ็กเกจไม่ตัดรายการเอง** ถ้าจะจำกัดจำนวนให้แอป slice มาก่อน
+   * แล้วส่ง `viewAll` เพื่อพาไปหน้ารวม (ตัวเลขใน `counts` จึงตรงกับสิ่งที่ผู้ใช้เห็นเสมอ)
+   */
+  items: ReadonlyArray<NotificationEntry>;
+  /** ชิปนับด้านบน — กี่กลุ่มก็ได้ (เกินกำหนด / รอตรวจสอบ / ใกล้ถึงกำหนด / เลื่อนเตือนอยู่ …) */
+  counts?: ReadonlyArray<NotificationChip>;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** ไม่มีรายการ — ส่ง element เองได้ทั้งก้อน */
+  empty?: ReactNode;
+  /** ลิงก์/ปุ่ม "ดูทั้งหมด" มุมขวาบน */
+  viewAll?: { label?: ReactNode; onSelect: () => void };
+  /** กำลังทำคำสั่งลัดอยู่ — ปิดปุ่มทั้งหมดกันกดซ้ำ */
+  busy?: boolean;
+  className?: string;
+}
+
+/**
+ * ศูนย์การแจ้งเตือน: ชิปนับ + รายการที่ต้องจัดการ พร้อมปุ่มลัดต่อรายการ (ยกจาก DueBell)
+ * ทุกอย่างที่เป็นของโดเมน — วันที่/สถานะ/ยอดเงิน/ความคืบหน้า — ส่งเข้ามาเป็น node ที่แอปเตรียมแล้ว
+ * วางในหน้าได้ตรง ๆ หรือใส่ใน `SimpleDialog`/`SimpleSheet` เป็นกล่องแจ้งเตือนก็ได้
+ *
+ *   <NotificationCenter
+ *     counts={[{ key: "overdue", label: "เกินกำหนด", count: 3, tone: "destructive" }]}
+ *     items={bills.map((b) => ({ id: b.id, title: b.title, status: <DueDateBadge … />,
+ *       footer: <Amount value={b.amount} />, actions: [{ key: "pay", label: "จ่ายเลย", primary: true, onSelect: … }] }))}
+ *     viewAll={{ onSelect: () => router.push("/alerts") }} />
+ */
+export function NotificationCenter({
+  items,
+  counts,
+  title,
+  description,
+  empty,
+  viewAll,
+  busy = false,
+  className,
+}: NotificationCenterProps) {
+  const text = useUiText();
+  const heading = title ?? text.notifications?.title ?? "การแจ้งเตือน";
+
+  return (
+    <section
+      data-slot="notification-center"
+      aria-label={typeof heading === "string" ? heading : undefined}
+      className={cn("flex flex-col gap-3", className)}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <h2 className="font-semibold text-sm">{heading}</h2>
+          {description && <p className="text-muted-foreground text-xs">{description}</p>}
+          {counts && counts.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              {counts.map((chip) => {
+                const tone = chip.tone ?? "default";
+                const content = (
+                  <>
+                    {chip.label}
+                    <span className="font-semibold tabular-nums">{chip.count}</span>
+                  </>
+                );
+                const shared = cn(
+                  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-label",
+                  CHIP_TONE[tone],
+                  chip.active && "ring-2 ring-ring/40",
+                );
+                return chip.onSelect ? (
+                  <button
+                    key={chip.key}
+                    type="button"
+                    aria-pressed={chip.active ?? false}
+                    onClick={chip.onSelect}
+                    className={cn(shared, "transition-colors hover:brightness-95")}
+                  >
+                    {content}
+                  </button>
+                ) : (
+                  <span key={chip.key} className={shared}>
+                    {content}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        {viewAll && (
+          <Button variant="ghost" size="sm" onClick={viewAll.onSelect} className="shrink-0">
+            {viewAll.label ?? text.notifications?.viewAll ?? "ดูทั้งหมด"}
+            <ChevronRightIcon />
+          </Button>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        (empty ?? (
+          <div className="flex flex-col items-center gap-1 py-8 text-center">
+            <BellIcon className="size-8 text-muted-foreground/60" aria-hidden="true" />
+            <p className="font-medium text-sm">
+              {text.notifications?.empty ?? "ไม่มีรายการที่ต้องจัดการ"}
+            </p>
+          </div>
+        ))
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {items.map((item) => (
+            <NotificationRow key={item.id} item={item} busy={busy} />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+function NotificationRow({ item, busy }: { item: NotificationEntry; busy: boolean }) {
+  const text = useUiText();
+  const tone = item.tone ?? "default";
+  const clickable = Boolean(item.onSelect);
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: แถวมีปุ่มของตัวเองอยู่แล้ว คลิกทั้งแถวเป็นทางลัดของเมาส์
+    <li
+      data-slot="notification-row"
+      data-unread={item.unread || undefined}
+      onClick={item.onSelect}
+      className={cn(
+        "flex gap-3 rounded-xl border border-l-4 bg-card p-3",
+        ACCENT[tone],
+        item.unread && "bg-muted/40",
+        clickable && "cursor-pointer transition-colors hover:bg-muted/60",
+      )}
+    >
+      {item.icon && (
+        <span
+          className={cn(
+            "flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4.5",
+            ICON_TONE[tone],
+          )}
+        >
+          {item.icon}
+        </span>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        <div className="flex flex-wrap items-start justify-between gap-x-2 gap-y-1">
+          <p className="flex min-w-0 items-center gap-1.5 font-semibold text-sm leading-snug">
+            {item.unread && (
+              <span className="size-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
+            )}
+            <span className="min-w-0 break-words">{item.title}</span>
+          </p>
+          {item.status && <span className="shrink-0">{item.status}</span>}
+        </div>
+        {item.meta && (
+          <p className="flex flex-wrap items-center gap-1.5 text-muted-foreground text-xs">
+            {item.meta}
+          </p>
+        )}
+        {item.description && <p className="text-muted-foreground text-xs">{item.description}</p>}
+        {(item.footer || item.actions || item.menuActions) && (
+          <div className="flex flex-wrap items-end justify-between gap-2 pt-0.5">
+            <div className="min-w-0">{item.footer}</div>
+            {(item.actions?.length || item.menuActions?.length) && (
+              // คลิกปุ่มไม่ให้ไปโดน onSelect ของทั้งแถว
+              // biome-ignore lint/a11y/noStaticElementInteractions: ตัวกั้นคลิกเฉย ๆ ไม่ใช่ตัวควบคุม
+              // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดกดปุ่มข้างในตรง ๆ อยู่แล้ว
+              <div
+                className="flex shrink-0 flex-wrap items-center gap-1.5"
+                onClick={(event) => event.stopPropagation()}
+              >
+                {item.actions?.map((action) => (
+                  <Button
+                    key={action.key}
+                    size="sm"
+                    variant={
+                      action.primary
+                        ? action.tone === "destructive"
+                          ? "destructive"
+                          : "default"
+                        : "outline"
+                    }
+                    disabled={busy || action.disabled}
+                    onClick={action.onSelect}
+                    className={cn(!action.primary && ACTION_TONE[action.tone ?? "default"])}
+                  >
+                    {action.icon}
+                    {action.label}
+                  </Button>
+                ))}
+                {item.menuActions && item.menuActions.length > 0 && (
+                  <ActionMenu
+                    label={text.actions}
+                    items={item.menuActions.map((action) => ({
+                      label: action.label,
+                      icon: action.icon,
+                      destructive: action.tone === "destructive",
+                      disabled: busy || action.disabled,
+                      onClick: action.onSelect,
+                    }))}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </li>
+  );
+}

package/src/components/shared/ui-text.tsx

@@ -65,6 +65,8 @@ export interface UiText {
   }>;
   /** ErrorState เซสชันหมดอายุ (optional) */
   sessionExpired?: Partial<{ title: string; description: string; signIn: string }>;
+  /** NotificationCenter (optional) */
+  notifications?: Partial<{ title: string; empty: string; viewAll: string }>;
   /** SelectionBar (optional) — `selected` ใช้ `{count}` */
   selection?: Partial<{ selected: string; clear: string }>;
   /** DataTable (optional) — `rowsSelected` ใช้ `{selected}`/`{total}`, `pageOf` ใช้ `{page}`/`{pages}` */
@@ -237,6 +239,11 @@ export const UI_TEXT_TH: UiText = {
       "คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง แล้วระบบจะพากลับมาหน้านี้",
     signIn: "เข้าสู่ระบบ",
   },
+  notifications: {
+    title: "การแจ้งเตือน",
+    empty: "ไม่มีรายการที่ต้องจัดการ",
+    viewAll: "ดูทั้งหมด",
+  },
   selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
   sortable: {
     handle: "ลากเพื่อจัดลำดับ",
@@ -396,6 +403,11 @@ export const UI_TEXT_EN: UiText = {
       "You were signed out while working. Unsaved changes are lost — sign in again and we will bring you back to this page.",
     signIn: "Sign in",
   },
+  notifications: {
+    title: "Notifications",
+    empty: "Nothing needs your attention",
+    viewAll: "View all",
+  },
   selection: { selected: "{count} selected", clear: "Clear selection" },
   sortable: {
     handle: "Drag to reorder",

package/src/index.ts

@@ -175,6 +175,14 @@ export {
   toIdentifier,
 } from "./components/shared/name-id-fields";
 export { Notice, type NoticeTone } from "./components/shared/notice";
+export {
+  type NotificationAction,
+  NotificationCenter,
+  type NotificationCenterProps,
+  type NotificationChip,
+  type NotificationEntry,
+  type NotificationTone,
+} from "./components/shared/notification-center";
 export { type DecimalLike, FormattedNumber } from "./components/shared/number/formatted-number";
 export { PageHeader } from "./components/shared/page-header";
 export { PageSkeleton } from "./components/shared/page-skeleton";