@suphark/ui 0.4.3 → 0.5.1

package/src/kanban.ts

@@ -0,0 +1,9 @@
+/**
+ * @suphark/ui/kanban — ตัวช่วยบอร์ดหลายคอลัมน์บน dnd-kit
+ * แยกจาก barrel หลักเพราะ @dnd-kit/core สร้าง React context ตอน import (ใช้จาก server component ไม่ได้) เช่นเดียวกับ data-table
+ */
+export {
+  createKanbanCollisionDetection,
+  type KanbanCollisionOptions,
+  type KanbanColumnItems,
+} from "./lib/kanban-collision";

package/src/lib/formatters.ts

@@ -1,4 +1,4 @@
-import { differenceInDays, formatDistanceToNow } from "date-fns";
+import { differenceInCalendarDays, formatDistanceToNow } from "date-fns";
 import { th } from "date-fns/locale";
 
 /**
@@ -6,15 +6,17 @@ import { th } from "date-fns/locale";
  * ยกมาจาก supplychain `lib/utils/formatters.ts` เฉพาะส่วนที่ไม่ผูก domain
  */
 
-/** วันที่แบบสัมพัทธ์ภาษาไทย เช่น "วันนี้", "เมื่อวาน", "3 วันที่แล้ว", "2 เดือนที่แล้ว" */
+/** วันที่แบบสัมพัทธ์ภาษาไทย เช่น "วันนี้", "เมื่อวาน", "พรุ่งนี้", "10 วันที่ผ่านมา", "ใน 2 เดือน" */
 export function formatRelativeThaiDate(date: Date | string | number | null | undefined): string {
   if (!date) return "ไม่ได้ระบุ";
   const d = new Date(date);
   if (Number.isNaN(d.getTime())) return "ไม่ได้ระบุ";
 
-  const diffDays = Math.abs(differenceInDays(new Date(), d));
+  // เทียบเป็นวันปฏิทิน (ไม่ใช่ 24 ชม.) และคงเครื่องหมาย — อนาคต 1 วันคือ "พรุ่งนี้" ไม่ใช่ "เมื่อวาน"
+  const diffDays = differenceInCalendarDays(new Date(), d);
   if (diffDays === 0) return "วันนี้";
   if (diffDays === 1) return "เมื่อวาน";
+  if (diffDays === -1) return "พรุ่งนี้";
 
   return formatDistanceToNow(d, { addSuffix: true, locale: th });
 }

package/src/lib/kanban-collision.ts

@@ -0,0 +1,118 @@
+import {
+  type Collision,
+  type CollisionDetection,
+  closestCenter,
+  closestCorners,
+  pointerWithin,
+  type UniqueIdentifier,
+} from "@dnd-kit/core";
+
+type DetectionArgs = Parameters<CollisionDetection>[0];
+
+/** id ของการ์ดในแต่ละคอลัมน์ (key = id คอลัมน์) — ส่ง Map ที่ memo ไว้ หรือฟังก์ชันที่คืน Map ล่าสุด */
+export type KanbanColumnItems =
+  | ReadonlyMap<string, ReadonlySet<string>>
+  | (() => ReadonlyMap<string, ReadonlySet<string>>);
+
+export interface KanbanCollisionOptions {
+  columnItems: KanbanColumnItems;
+  /**
+   * แปลง droppable id ให้เป็น id คอลัมน์ — สำหรับ droppable อื่นของคอลัมน์ที่ไม่ใช่รายการการ์ด
+   * (เช่น handle ลากเรียงคอลัมน์ `column-drag:<id>`) คืน `null` ถ้าไม่ใช่คอลัมน์
+   * ค่าเริ่มต้น: id ที่เป็น key ใน `columnItems`
+   */
+  resolveColumnId?: (id: UniqueIdentifier) => string | null;
+}
+
+// การ์ดที่ใกล้ pointer ที่สุดตามแนวตั้ง (fallback closestCenter เมื่อไม่มี pointer เช่น keyboard)
+function nearestToPointer(
+  args: DetectionArgs,
+  candidates: DetectionArgs["droppableContainers"],
+): Collision | null {
+  if (candidates.length === 0) return null;
+  const pointer = args.pointerCoordinates;
+  if (!pointer) {
+    return closestCenter({ ...args, droppableContainers: candidates })[0] ?? null;
+  }
+  let best: Collision | null = null;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (const container of candidates) {
+    const rect = args.droppableRects.get(container.id);
+    if (!rect) continue;
+    const distance = Math.abs(pointer.y - (rect.top + rect.height / 2));
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      best = { id: container.id, data: { droppableContainer: container, value: distance } };
+    }
+  }
+  return best;
+}
+
+/**
+ * Collision detection สำหรับบอร์ดแบบ Kanban (dnd-kit): หลายคอลัมน์ แต่ละคอลัมน์เป็น SortableContext
+ *
+ * ปัญหาที่แก้: `pointerWithin` ตรง ๆ จะรายงาน "คอลัมน์" เป็น `over` ทุกครั้งที่ pointer อยู่ในช่องว่างระหว่างการ์ด
+ * หรือใต้การ์ดสุดท้าย → dnd-kit ล้าง transform ของทุกการ์ด (การ์ดเด้งกลับ) และปล่อยตรงนั้นจะไปท้ายคอลัมน์
+ * ตัวนี้แปลง pointer ที่อยู่ในคอลัมน์แต่ไม่ทับการ์ดให้เป็น "การ์ดที่ใกล้ที่สุดในคอลัมน์นั้น" (ไม่นับการ์ดที่กำลังลาก
+ * เพราะ rect ของมันตาม slot ที่เลื่อนไปแล้ว) และรายงาน droppable ของรายการคอลัมน์เฉพาะเมื่อคอลัมน์ว่าง
+ *
+ * ลากคอลัมน์ (active id แปลงเป็นคอลัมน์ได้) → pointerWithin ปกติ, fallback closestCorners
+ *
+ *   const columnItems = useMemo(() => new Map(columns.map((c) => [c.id, new Set(c.cardIds)])), [columns]);
+ *   const collisionDetection = useMemo(
+ *     () => createKanbanCollisionDetection({ columnItems, resolveColumnId: (id) => columnIdFromHandle(id) }),
+ *     [columnItems],
+ *   );
+ *   <DndContext collisionDetection={collisionDetection} …>
+ *
+ * ข้อควรระวังฝั่ง CSS: wrapper ของการ์ดห้าม `overflow-hidden` — dnd-kit ใส่ transform ที่ node ที่ `setNodeRef`
+ * ถ้าถูกครอบด้วย overflow-hidden การ์ดที่ขยับหลบจะถูก clip หายไป
+ */
+export function createKanbanCollisionDetection({
+  columnItems,
+  resolveColumnId,
+}: KanbanCollisionOptions): CollisionDetection {
+  const getColumns = () => (typeof columnItems === "function" ? columnItems() : columnItems);
+
+  const columnOf = (id: UniqueIdentifier): string | null => {
+    const columns = getColumns();
+    const key = String(id);
+    if (columns.has(key)) return key;
+    if (resolveColumnId) {
+      const resolved = resolveColumnId(id);
+      if (resolved !== null && columns.has(resolved)) return resolved;
+    }
+    return null;
+  };
+
+  return (args) => {
+    const pointerCollisions = pointerWithin(args);
+    const isColumnDrag = columnOf(args.active.id) !== null;
+    if (isColumnDrag) {
+      return pointerCollisions.length > 0 ? pointerCollisions : closestCorners(args);
+    }
+
+    const cardCollision = pointerCollisions.find((collision) => columnOf(collision.id) === null);
+    if (cardCollision) return [cardCollision];
+
+    const columnCollision = pointerCollisions.find((collision) => columnOf(collision.id) !== null);
+    if (!columnCollision) return closestCorners(args);
+
+    const columnId = columnOf(columnCollision.id) as string;
+    const ids = getColumns().get(columnId);
+    const cardContainers = args.droppableContainers.filter(
+      (container) => container.id !== args.active.id && ids?.has(String(container.id)),
+    );
+    const nearest = nearestToPointer(args, cardContainers);
+    if (nearest) return [nearest];
+
+    // คอลัมน์ว่าง: รายงาน droppable ของรายการคอลัมน์ (ไม่ใช่ handle) ให้ onDragOver ย้ายการ์ดเข้าคอลัมน์
+    const listContainer = args.droppableContainers.find(
+      (container) => String(container.id) === columnId,
+    );
+    if (listContainer) {
+      return [{ id: listContainer.id, data: { droppableContainer: listContainer, value: 0 } }];
+    }
+    return [columnCollision];
+  };
+}

package/src/pwa.ts

@@ -0,0 +1,24 @@
+/**
+ * @suphark/ui/pwa — ชุด Progressive Web App: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช
+ * `PullToRefresh` ใช้ next/navigation จึงแยกจาก barrel หลักเหมือน `@suphark/ui/next`
+ */
+export {
+  type BeforeInstallPromptEvent,
+  getInstallPrompt,
+  setInstallPrompt,
+  subscribeToInstallPrompt,
+} from "./components/pwa/install-prompt-store";
+export {
+  PULL_TO_REFRESH_TEXT_EN,
+  PULL_TO_REFRESH_TEXT_TH,
+  PullToRefresh,
+  type PullToRefreshText,
+} from "./components/pwa/pull-to-refresh";
+export {
+  PWA_INSTALL_CARD_TEXT_EN,
+  PWA_INSTALL_CARD_TEXT_TH,
+  PwaInstallCard,
+  type PwaInstallCardText,
+} from "./components/pwa/pwa-install-card";
+export { PwaServiceWorkerRegistration } from "./components/pwa/pwa-service-worker-registration";
+export { canReloadNow, watchServiceWorkerUpdates } from "./components/pwa/service-worker-updates";

package/src/styles.css

@@ -216,3 +216,15 @@ body,
 .font-sans {
   font-family: var(--font-sans);
 }
+
+/* ผู้ใช้ตั้ง "ลดการเคลื่อนไหว" → ตัด animation/transition ของทุก component (tw-animate, animate-spin, dialog zoom …) */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}