@suphark/ui 0.4.2 → 0.4.3

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.4.3] — 2026-09-19
+
+### Added
+
+- **`useConfirm()`** (barrel) — `window.confirm` แบบ promise บน ConfirmDialog สำหรับโค้ดฝั่ง client ที่ไม่ใช่ server action (ยกมาจาก DueBell ที่ย้าย window.confirm 8 จุดด้วย hook นี้): `const { confirm, confirmDialog } = useConfirm(); if (!(await confirm({ description, destructive: true }))) return;` แล้ว render `{confirmDialog}`; เรียกซ้ำขณะเปิดอยู่ → คำขอเดิม resolve(false)
+- `ConfirmSpec` object รับ `destructive?` (RowActions/ConfirmActionButton ใช้เป็นตัวทับค่าเดิมของรายการ/variant)
+- README: ตาราง "ยืนยันก่อนทำ — ห้ามใช้ window.confirm" (เลือก RowActions.confirm / ConfirmActionButton / useConfirm / ConfirmDialog) และหมายเหตุ Turbopack ค้าง `Package path ./styles.css is exported … but no valid target file` หลังอัปเดตแพ็กเกจ = cache ของ dev server ให้ลบ `.next`
+
 ## [0.4.2] — 2026-09-19
 
 ### Added

package/README.md

@@ -51,11 +51,15 @@ import { ThemeProvider, Toaster } from "@suphark/ui";
 
 แอปจะ type-check source ของแพ็กเกจด้วย — แพ็กเกจผ่าน `strict` + `noUncheckedIndexedAccess` + `verbatimModuleSyntax` อยู่แล้ว
 
+### หลังอัปเดตเวอร์ชันแพ็กเกจ
+
+ถ้า Turbopack ค้าง `Package path ./styles.css is exported … but no valid target file` (หรือ resolve entry อื่นไม่ได้) หลัง `pnpm install` เวอร์ชันใหม่ — เป็น cache ของ dev server ไม่ใช่ปัญหาแพ็กเกจ: หยุด dev server แล้วลบ `.next` ของแอป
+
 ## การ import
 
 ```ts
 // ทุกอย่างที่ไม่พึ่ง Next — primitives, shared, theme, hooks, cn
-import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, cn } from "@suphark/ui";
+import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, ConfirmDialog, useConfirm, cn } from "@suphark/ui";
 
 // ของที่ใช้ next/navigation หรือ next/link + โครงแอป
 import { AppShell, UserMenu, filterNav, FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";
@@ -140,6 +144,19 @@ export default async function Layout({ children }) {
 <div style={{ "--brand": tenant.color, "--brand-foreground": "oklch(0.985 0 0)" } as React.CSSProperties}>…</div>
 ```
 
+### ยืนยันก่อนทำ — ห้ามใช้ `window.confirm`
+
+webview/automation บางตัวปิด `window.confirm` ทิ้ง (กดแล้วไม่เกิดอะไร) และไม่เข้า design system — ใช้ 3 ตัวนี้แทน
+
+| สถานการณ์ | ใช้ |
+| --- | --- |
+| รายการในเมนู … ท้ายแถว | `RowActions` / `RowMenu` prop `confirm` (string หรือ `{ title, description, confirmLabel }`) |
+| ปุ่มเดี่ยวเรียก server action | `ConfirmActionButton` (`@suphark/ui/next`) — `confirm` + `action` + `data` |
+| โค้ด client อื่น ๆ (fetch/mutation เอง) | `const { confirm, confirmDialog } = useConfirm(); if (!(await confirm({ description, destructive: true }))) return;` แล้ว render `{confirmDialog}` |
+| คุม state เอง | `ConfirmDialog` controlled |
+
+ข้อความค่าเริ่มต้น (หัว/ปุ่ม) มาจาก `UiText.confirmTitle` / `UiText.confirm`
+
 ### สิทธิ์ (ActionButton/LinkButton `permission` prop)
 
 แพ็กเกจไม่รู้จักระบบสิทธิ์ของแอป — ครอบด้วย `UiPermissionProvider` แล้วส่งฟังก์ชัน `check(requirement, options)` ของแอปเข้ามา ถ้าไม่ครอบ = อนุญาตทุกอย่าง

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "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/button/confirm-action-button.tsx

@@ -36,7 +36,7 @@ export function ConfirmActionButton({
   const [open, setOpen] = useState(false);
   const [pending, start] = useTransition();
   const spec = normalizeConfirm(confirm);
-  const destructive = variant === "destructive";
+  const destructive = spec.destructive ?? variant === "destructive";
   return (
     <>
       <ActionButton

package/src/components/shared/confirm-dialog.tsx

@@ -22,6 +22,8 @@ export type ConfirmSpec =
       description: ReactNode;
       confirmLabel?: string;
       cancelLabel?: string;
+      /** ปุ่มยืนยันสีแดง (RowActions ใช้ `destructive` ของรายการเป็นค่าเริ่มต้นอยู่แล้ว) */
+      destructive?: boolean;
     };
 
 /** แปลง ConfirmSpec เป็น object เสมอ */

package/src/components/shared/row-actions.tsx

@@ -107,7 +107,7 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
           description={spec.description}
           confirmLabel={spec.confirmLabel}
           cancelLabel={spec.cancelLabel}
-          destructive={confirming.destructive}
+          destructive={spec.destructive ?? confirming.destructive}
           onConfirm={() => {
             const it = confirming;
             setConfirming(null);

package/src/hooks/use-confirm.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import {
+  ConfirmDialog,
+  type ConfirmSpec,
+  normalizeConfirm,
+} from "@suphark/ui/components/shared/confirm-dialog";
+import { type ReactNode, useCallback, useState } from "react";
+
+/**
+ * `window.confirm` แบบ promise บน ConfirmDialog — สำหรับโค้ดฝั่ง client ที่ไม่ใช่ server action
+ * (เช่น กดลบแล้วเรียก fetch/mutation เอง) — ยกมาจาก DueBell
+ *
+ *   const { confirm, confirmDialog } = useConfirm();
+ *   async function remove() {
+ *     if (!(await confirm({ description: "ลบรายการนี้?", destructive: true }))) return;
+ *     …
+ *   }
+ *   return <>{confirmDialog}<Button onClick={remove}>ลบ</Button></>;
+ *
+ * ต้อง render `confirmDialog` ในต้นไม้ของ component ที่เรียก hook (ครั้งเดียวต่อ hook)
+ * เรียก `confirm` ซ้ำขณะกล่องเปิดอยู่ → คำขอเดิม resolve(false) แล้วแสดงคำขอใหม่แทน
+ */
+export function useConfirm(): {
+  confirm: (spec: ConfirmSpec) => Promise<boolean>;
+  confirmDialog: ReactNode;
+} {
+  const [request, setRequest] = useState<{
+    options: Exclude<ConfirmSpec, string>;
+    resolve: (ok: boolean) => void;
+  } | null>(null);
+
+  const confirm = useCallback(
+    (spec: ConfirmSpec) =>
+      new Promise<boolean>((resolve) => {
+        setRequest((prev) => {
+          prev?.resolve(false);
+          return { options: normalizeConfirm(spec), resolve };
+        });
+      }),
+    [],
+  );
+
+  function settle(ok: boolean) {
+    request?.resolve(ok);
+    setRequest(null);
+  }
+
+  const confirmDialog = request ? (
+    <ConfirmDialog
+      open
+      onOpenChange={(open) => !open && settle(false)}
+      title={request.options.title}
+      description={request.options.description}
+      confirmLabel={request.options.confirmLabel}
+      cancelLabel={request.options.cancelLabel}
+      destructive={request.options.destructive}
+      onConfirm={() => settle(true)}
+    />
+  ) : null;
+
+  return { confirm, confirmDialog };
+}

package/src/index.ts

@@ -142,6 +142,7 @@ export * from "./components/ui/toggle";
 export * from "./components/ui/toggle-group";
 export * from "./components/ui/tooltip";
 // ---------- lib / hooks ----------
+export { useConfirm } from "./hooks/use-confirm";
 export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
 export { useIsMobile } from "./hooks/use-mobile";
 export { copyText, selectContents } from "./lib/copy-text";