@suphark/ui 0.5.0 → 0.6.0

package/src/hooks/use-ticker.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/**
+ * นาฬิกากลางต่อ interval — ทุก component ที่ขอ interval เท่ากันแชร์ `setInterval` ตัวเดียว
+ * (ตาราง 50 แถวที่แสดง "x นาทีที่แล้ว" เดิมมี 50 timers) — เริ่มเมื่อมีผู้ใช้ตัวแรก หยุดเมื่อตัวสุดท้ายถอด
+ */
+type Ticker = { listeners: Set<() => void>; tick: number; handle: number | null };
+const tickers = new Map<number, Ticker>();
+
+function getTicker(intervalMs: number): Ticker {
+  let t = tickers.get(intervalMs);
+  if (!t) {
+    t = { listeners: new Set(), tick: 0, handle: null };
+    tickers.set(intervalMs, t);
+  }
+  return t;
+}
+
+function subscribe(intervalMs: number, listener: () => void): () => void {
+  const t = getTicker(intervalMs);
+  t.listeners.add(listener);
+  if (t.handle === null) {
+    t.handle = window.setInterval(() => {
+      t.tick += 1;
+      for (const l of t.listeners) l();
+    }, intervalMs);
+  }
+  return () => {
+    t.listeners.delete(listener);
+    if (t.listeners.size === 0 && t.handle !== null) {
+      window.clearInterval(t.handle);
+      t.handle = null;
+    }
+  };
+}
+
+const subscribeNoop = () => () => {};
+const zero = () => 0;
+
+/**
+ * คืนตัวเลขที่เพิ่มทุก `intervalMs` (ใช้เป็น dep ให้คำนวณใหม่) — `0`/undefined = ไม่ tick
+ * บน server ได้ 0 เสมอ
+ */
+export function useTicker(intervalMs: number | undefined): number {
+  const active = typeof intervalMs === "number" && intervalMs > 0;
+  return useSyncExternalStore(
+    active ? (l) => subscribe(intervalMs, l) : subscribeNoop,
+    active ? () => getTicker(intervalMs).tick : zero,
+    zero,
+  );
+}

package/src/index.ts

@@ -13,6 +13,7 @@
 export type { DateRange } from "react-day-picker";
 // sonner: `toast()` คู่กับ <Toaster /> — แอปไม่ต้องติดตั้ง sonner เอง
 export { toast } from "sonner";
+export { ActionForm } from "./components/shared/action-form";
 export * from "./components/shared/button";
 export { ClientRedirect } from "./components/shared/client-redirect";
 export { Combobox } from "./components/shared/combobox";
@@ -51,6 +52,7 @@ export {
 export { FormFieldRadioCards } from "./components/shared/form/form-field-radio-cards";
 export { FormFieldRadioGroup } from "./components/shared/form/form-field-radio-group";
 export { FormFieldSelect, type SelectOption } from "./components/shared/form/form-field-select";
+export { CheckboxField, LabeledField } from "./components/shared/form/labeled-field";
 export {
   SimpleSelect,
   type SimpleSelectGroup,
@@ -58,7 +60,7 @@ export {
   type SimpleSelectOptions,
   type SimpleSelectProps,
 } from "./components/shared/form/simple-select";
-export { FormMessage, type FormState } from "./components/shared/form-message";
+export { type FormAction, FormMessage, type FormState } from "./components/shared/form-message";
 export { Initials, initialsOf } from "./components/shared/initials";
 export { ErrorState, type RouteError } from "./components/shared/layout/error-state";
 export {
@@ -156,9 +158,12 @@ export * from "./components/ui/tooltip";
 export { useConfirm } from "./hooks/use-confirm";
 export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
 export { useIsMobile } from "./hooks/use-mobile";
+export { useMounted } from "./hooks/use-mounted";
+export { useTicker } from "./hooks/use-ticker";
 export { useTrackedState } from "./hooks/use-tracked-state";
 export { copyText, selectContents } from "./lib/copy-text";
 export { formatRelativeThaiDate, formatThaiFullDate } from "./lib/formatters";
+export { getDateTimeFormat, getNumberFormat } from "./lib/intl-cache";
 export {
   type AtomicPermissionRequirement,
   type CheckPermissionOptions,

package/src/lib/intl-cache.ts

@@ -0,0 +1,31 @@
+/**
+ * cache ตัว formatter ของ Intl — constructor ของ Intl.NumberFormat/DateTimeFormat แพง (โหลดข้อมูล locale)
+ * ตารางที่มีเซลล์ตัวเลข/วันที่หลายร้อยช่องจะสร้างซ้ำทุกเซลล์ทุก render ถ้าไม่ cache
+ * key = locale + options (JSON) — options ของเราเป็น object เล็ก ๆ ไม่มี key แปลก
+ */
+const numberFormats = new Map<string, Intl.NumberFormat>();
+const dateTimeFormats = new Map<string, Intl.DateTimeFormat>();
+
+function keyOf(locale: string, options: object | undefined): string {
+  return `${locale}|${options ? JSON.stringify(options) : ""}`;
+}
+
+export function getNumberFormat(locale: string, options?: Intl.NumberFormatOptions) {
+  const key = keyOf(locale, options);
+  let f = numberFormats.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat(locale, options);
+    numberFormats.set(key, f);
+  }
+  return f;
+}
+
+export function getDateTimeFormat(locale: string, options?: Intl.DateTimeFormatOptions) {
+  const key = keyOf(locale, options);
+  let f = dateTimeFormats.get(key);
+  if (!f) {
+    f = new Intl.DateTimeFormat(locale, options);
+    dateTimeFormats.set(key, f);
+  }
+  return f;
+}

package/src/next.ts

@@ -15,6 +15,7 @@ export {
   PageBreadcrumb,
   type PageBreadcrumbItem,
 } from "./components/shared/navigation/page-breadcrumb";
+export { Stepper, type StepperStep, type StepStatus } from "./components/shared/navigation/stepper";
 export { type RowAction, type RowActionItem, RowActions } from "./components/shared/row-actions";
 export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";
 export {