@suphark/ui 0.7.0 → 0.8.0

package/src/components/shared/dropzone.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { formatBytes } from "@suphark/ui/lib/formatters";
+import { cn } from "@suphark/ui/lib/utils";
+import { UploadCloud } from "lucide-react";
+import {
+  type ChangeEvent,
+  type DragEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+
+export type DropzoneRejectReason = "size" | "type" | "multiple";
+
+export interface DropzoneText {
+  /** ข้อความหลักในการ์ด */
+  title: string;
+  /** "หรือ" ก่อนปุ่ม */
+  or: string;
+  /** ปุ่มเลือกไฟล์ */
+  browse: string;
+  /** ข้อความบน overlay ตอนลากไฟล์เข้าหน้า */
+  overlay: string;
+  /** ขนาดสูงสุด — รับข้อความขนาดที่ฟอร์แมตแล้ว */
+  maxSize: (size: string) => string;
+}
+
+const TEXT: Record<"th" | "en", DropzoneText> = {
+  th: {
+    title: "ลากไฟล์มาวางที่นี่",
+    or: "หรือ",
+    browse: "เลือกไฟล์",
+    overlay: "วางไฟล์ที่นี่",
+    maxSize: (s) => `ไฟล์ละไม่เกิน ${s}`,
+  },
+  en: {
+    title: "Drag files here",
+    or: "or",
+    browse: "Browse files",
+    overlay: "Drop files here",
+    maxSize: (s) => `Up to ${s} per file`,
+  },
+};
+
+export interface DropzoneProps {
+  onFiles: (files: File[]) => void;
+  /** ไฟล์ที่ไม่ผ่าน (เกินขนาด / ชนิดไม่ตรง accept / เกิน 1 ไฟล์เมื่อ multiple=false) */
+  onRejected?: (files: File[], reason: DropzoneRejectReason) => void;
+  /** รับหลายไฟล์ (ค่าเริ่มต้น true) */
+  multiple?: boolean;
+  /** เหมือน `<input accept>`: "image/*,.pdf,application/zip" — ใช้กรองทั้งตอนเลือกและตอนวาง */
+  accept?: string;
+  /** ขนาดสูงสุดต่อไฟล์ (byte) */
+  maxBytes?: number;
+  disabled?: boolean;
+  /** เลือกทั้งโฟลเดอร์ (`webkitdirectory`) — ตอนวางโฟลเดอร์จะไล่อ่านไฟล์ข้างในให้ */
+  directory?: boolean;
+  /** ข้อความช่วยใต้ปุ่ม (ค่าเริ่มต้นแสดง maxBytes ถ้ามี) */
+  hint?: ReactNode;
+  /** ไอคอนในการ์ด (ค่าเริ่มต้น UploadCloud) */
+  icon?: ReactNode;
+  /**
+   * โหมด overlay: ห่อ `children` (เช่น ตารางไฟล์) แล้วโชว์ชั้น "วางไฟล์ที่นี่" ทับเฉพาะตอนลากไฟล์เข้าหน้า
+   * ไม่ส่ง children = การ์ดเดี่ยว (เส้นประ + ไอคอน + ข้อความ + ปุ่มเลือกไฟล์)
+   */
+  overlay?: boolean;
+  children?: ReactNode;
+  language?: "th" | "en";
+  text?: Partial<DropzoneText>;
+  className?: string;
+}
+
+/** ตรวจตาม `accept` ของ input: ".pdf" (นามสกุล), "image/*" (กลุ่ม), "application/pdf" (ตรงตัว) */
+export function matchesAccept(file: File, accept?: string): boolean {
+  if (!accept?.trim()) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept
+    .split(",")
+    .map((a) => a.trim().toLowerCase())
+    .filter(Boolean)
+    .some((a) => {
+      if (a.startsWith(".")) return name.endsWith(a);
+      if (a.endsWith("/*")) return type.startsWith(a.slice(0, -1));
+      return type === a;
+    });
+}
+
+function hasFiles(e: DragEvent | globalThis.DragEvent): boolean {
+  return Array.from(e.dataTransfer?.types ?? []).includes("Files");
+}
+
+/** ไล่อ่านไฟล์จาก DataTransfer — รองรับโฟลเดอร์ผ่าน webkitGetAsEntry (Chrome/Edge/Safari) */
+async function readDataTransfer(dt: DataTransfer, recurse: boolean): Promise<File[]> {
+  const items = Array.from(dt.items ?? []);
+  const entries = recurse
+    ? items.map((it) => (it.kind === "file" ? it.webkitGetAsEntry?.() : null))
+    : [];
+  if (!recurse || entries.every((e) => !e)) return Array.from(dt.files ?? []);
+  const out: File[] = [];
+  async function walk(entry: FileSystemEntry | null): Promise<void> {
+    if (!entry) return;
+    if (entry.isFile) {
+      const file = await new Promise<File | null>((resolve) =>
+        (entry as FileSystemFileEntry).file(resolve, () => resolve(null)),
+      );
+      if (file) out.push(file);
+    } else if (entry.isDirectory) {
+      const reader = (entry as FileSystemDirectoryEntry).createReader();
+      // readEntries คืนเป็นชุด (Chrome สูงสุด 100/ครั้ง) ต้องเรียกซ้ำจนว่าง
+      for (;;) {
+        const batch = await new Promise<FileSystemEntry[]>((resolve) =>
+          reader.readEntries(resolve, () => resolve([])),
+        );
+        if (batch.length === 0) break;
+        for (const child of batch) await walk(child);
+      }
+    }
+  }
+  for (const entry of entries) await walk(entry);
+  return out;
+}
+
+/**
+ * พื้นที่ลากวางไฟล์ 2 โหมด — การ์ดเดี่ยว หรือ overlay ห่อเนื้อหา (แบบ Google Drive):
+ * กรอง `accept`/`maxBytes`/`multiple` ให้แล้วส่ง `onFiles` เฉพาะที่ผ่าน ที่ไม่ผ่านไป `onRejected` แยกตามเหตุผล
+ * คลิกการ์ด/ปุ่ม/Enter เปิด file picker (input ซ่อน); `directory` เลือกและวางทั้งโฟลเดอร์
+ */
+export function Dropzone({
+  onFiles,
+  onRejected,
+  multiple = true,
+  accept,
+  maxBytes,
+  disabled = false,
+  directory = false,
+  hint,
+  icon,
+  overlay = false,
+  children,
+  language = "th",
+  text: textProp,
+  className,
+}: DropzoneProps) {
+  const text: DropzoneText = { ...TEXT[language], ...textProp };
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputId = useId();
+  const [active, setActive] = useState(false);
+  // dragenter/dragleave ยิงซ้ำตามลูกทุกตัว — นับลึกเพื่อรู้ว่าออกนอกจริง
+  const depth = useRef(0);
+
+  const submit = useCallback(
+    (all: File[]) => {
+      const bySize: File[] = [];
+      const byType: File[] = [];
+      let ok = all.filter((f) => {
+        if (!matchesAccept(f, accept)) {
+          byType.push(f);
+          return false;
+        }
+        if (maxBytes != null && f.size > maxBytes) {
+          bySize.push(f);
+          return false;
+        }
+        return true;
+      });
+      if (!multiple && ok.length > 1) {
+        onRejected?.(ok.slice(1), "multiple");
+        ok = ok.slice(0, 1);
+      }
+      if (byType.length) onRejected?.(byType, "type");
+      if (bySize.length) onRejected?.(bySize, "size");
+      if (ok.length) onFiles(ok);
+    },
+    [accept, maxBytes, multiple, onFiles, onRejected],
+  );
+
+  function openPicker() {
+    if (!disabled) inputRef.current?.click();
+  }
+  function onInputChange(e: ChangeEvent<HTMLInputElement>) {
+    const files = Array.from(e.target.files ?? []);
+    e.target.value = ""; // เลือกไฟล์เดิมซ้ำได้
+    if (files.length) submit(files);
+  }
+
+  // โหมด overlay: รู้ว่ากำลังลากไฟล์เข้าหน้า (window) — ไม่ต้องลากให้ถึงตัว wrapper ก่อน
+  useEffect(() => {
+    if (!overlay || disabled) return;
+    const enter = (e: globalThis.DragEvent) => {
+      if (!hasFiles(e)) return;
+      depth.current += 1;
+      setActive(true);
+    };
+    const leave = () => {
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) setActive(false);
+    };
+    const over = (e: globalThis.DragEvent) => {
+      if (hasFiles(e)) e.preventDefault(); // ไม่งั้น browser เปิดไฟล์เมื่อวางนอก dropzone
+    };
+    const drop = () => {
+      depth.current = 0;
+      setActive(false);
+    };
+    window.addEventListener("dragenter", enter);
+    window.addEventListener("dragleave", leave);
+    window.addEventListener("dragover", over);
+    window.addEventListener("drop", drop);
+    return () => {
+      window.removeEventListener("dragenter", enter);
+      window.removeEventListener("dragleave", leave);
+      window.removeEventListener("dragover", over);
+      window.removeEventListener("drop", drop);
+    };
+  }, [overlay, disabled]);
+
+  const dragProps = {
+    onDragEnter: (e: DragEvent) => {
+      if (disabled || !hasFiles(e)) return;
+      e.preventDefault();
+      if (!overlay) {
+        depth.current += 1;
+        setActive(true);
+      }
+    },
+    onDragOver: (e: DragEvent) => {
+      if (disabled || !hasFiles(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+    },
+    onDragLeave: () => {
+      if (overlay) return;
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) setActive(false);
+    },
+    onDrop: async (e: DragEvent) => {
+      if (disabled || !hasFiles(e)) return;
+      e.preventDefault();
+      depth.current = 0;
+      setActive(false);
+      const files = await readDataTransfer(e.dataTransfer, directory);
+      if (files.length) submit(files);
+    },
+  };
+
+  const input = (
+    <input
+      ref={inputRef}
+      id={inputId}
+      type="file"
+      className="sr-only"
+      tabIndex={-1}
+      multiple={multiple}
+      accept={accept}
+      disabled={disabled}
+      onChange={onInputChange}
+      // input.click() ก็ยิง click ที่ bubble ขึ้นการ์ด → จะเปิด picker ซ้ำ
+      onClick={(e) => e.stopPropagation()}
+      // React ไม่รู้จัก prop นี้ — ส่งเป็น attribute ตรง ๆ
+      {...(directory ? { webkitdirectory: "" } : {})}
+    />
+  );
+
+  if (overlay) {
+    return (
+      <div
+        data-slot="dropzone"
+        data-active={active || undefined}
+        className={cn("relative", className)}
+        {...dragProps}
+      >
+        {children}
+        {input}
+        {active && (
+          <div
+            role="status"
+            className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-primary border-dashed bg-primary/5 text-primary backdrop-blur-[1px]"
+          >
+            {icon ?? <UploadCloud className="size-8" aria-hidden="true" />}
+            <p className="font-semibold text-sm">{text.overlay}</p>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  const defaultHint =
+    hint ?? (maxBytes != null ? text.maxSize(formatBytes(maxBytes, "en-US")) : null);
+  return (
+    <div
+      data-slot="dropzone"
+      data-active={active || undefined}
+      data-disabled={disabled || undefined}
+      onClick={openPicker}
+      className={cn(
+        "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed bg-muted/30 px-4 py-8 text-center transition-colors",
+        "hover:border-primary/50 hover:bg-muted/50",
+        "data-active:border-primary data-active:bg-primary/5",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:hover:border-border data-disabled:hover:bg-muted/30",
+        className,
+      )}
+      {...dragProps}
+    >
+      <span className="text-muted-foreground [&_svg]:size-8">
+        {icon ?? <UploadCloud aria-hidden="true" />}
+      </span>
+      <p className="font-medium text-sm">{text.title}</p>
+      <p className="flex items-center gap-2 text-muted-foreground text-xs">
+        {text.or}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={disabled}
+          onClick={(e) => {
+            e.stopPropagation();
+            openPicker();
+          }}
+        >
+          {text.browse}
+        </Button>
+      </p>
+      {defaultHint && <p className="text-muted-foreground text-xs">{defaultHint}</p>}
+      {input}
+    </div>
+  );
+}

package/src/components/shared/file-type-icon.tsx

@@ -0,0 +1,171 @@
+import { cn } from "@suphark/ui/lib/utils";
+import {
+  File,
+  FileArchive,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  Folder,
+  type LucideIcon,
+  Presentation,
+} from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type FileKind =
+  | "folder"
+  | "image"
+  | "video"
+  | "audio"
+  | "pdf"
+  | "doc"
+  | "sheet"
+  | "slides"
+  | "zip"
+  | "code"
+  | "text"
+  | "default";
+
+const EXT: Record<string, FileKind> = {
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  webp: "image",
+  svg: "image",
+  bmp: "image",
+  heic: "image",
+  avif: "image",
+  mp4: "video",
+  mov: "video",
+  webm: "video",
+  mkv: "video",
+  avi: "video",
+  mp3: "audio",
+  m4a: "audio",
+  wav: "audio",
+  flac: "audio",
+  ogg: "audio",
+  aac: "audio",
+  pdf: "pdf",
+  doc: "doc",
+  docx: "doc",
+  odt: "doc",
+  rtf: "doc",
+  xls: "sheet",
+  xlsx: "sheet",
+  csv: "sheet",
+  ods: "sheet",
+  ppt: "slides",
+  pptx: "slides",
+  odp: "slides",
+  key: "slides",
+  zip: "zip",
+  rar: "zip",
+  "7z": "zip",
+  gz: "zip",
+  tar: "zip",
+  tgz: "zip",
+  txt: "text",
+  md: "text",
+  log: "text",
+  js: "code",
+  ts: "code",
+  tsx: "code",
+  jsx: "code",
+  json: "code",
+  html: "code",
+  css: "code",
+  py: "code",
+  go: "code",
+  rs: "code",
+  java: "code",
+  sql: "code",
+  sh: "code",
+  yml: "code",
+  yaml: "code",
+  xml: "code",
+};
+
+/** ประเภทไฟล์จาก mime (หลัก) หรือนามสกุลของ `filename` (สำรอง) — ใช้เลือกไอคอน/สี */
+export function getFileKind(mime?: string | null, filename?: string | null): FileKind {
+  const m = (mime ?? "").toLowerCase();
+  if (m === "inode/directory" || m === "folder") return "folder";
+  if (m.startsWith("image/")) return "image";
+  if (m.startsWith("video/")) return "video";
+  if (m.startsWith("audio/")) return "audio";
+  if (m === "application/pdf") return "pdf";
+  if (m.includes("spreadsheet") || m.includes("excel") || m === "text/csv") return "sheet";
+  if (m.includes("presentation") || m.includes("powerpoint")) return "slides";
+  if (m.includes("wordprocessing") || m.includes("msword") || m.includes("opendocument.text"))
+    return "doc";
+  if (m.includes("zip") || m.includes("compressed") || m.includes("x-tar") || m.includes("gzip"))
+    return "zip";
+  if (m.includes("json") || m.includes("javascript") || m.includes("xml") || m.includes("html"))
+    return "code";
+  if (m.startsWith("text/")) return "text";
+  const ext = (filename ?? "").split(".").pop()?.toLowerCase() ?? "";
+  return (filename?.includes(".") && EXT[ext]) || "default";
+}
+
+const ICON: Record<FileKind, LucideIcon> = {
+  folder: Folder,
+  image: FileImage,
+  video: FileVideo,
+  audio: FileAudio,
+  pdf: FileText,
+  doc: FileText,
+  sheet: FileSpreadsheet,
+  slides: Presentation,
+  zip: FileArchive,
+  code: FileCode,
+  text: FileText,
+  default: File,
+};
+
+/** สีตาม token (ไม่ใช้ palette ดิบ — ธีม dark ตามไปเอง) */
+const COLOR: Record<FileKind, string> = {
+  folder: "text-warning",
+  image: "text-primary",
+  video: "text-primary",
+  audio: "text-primary",
+  pdf: "text-destructive",
+  doc: "text-primary",
+  sheet: "text-success",
+  slides: "text-warning",
+  zip: "text-muted-foreground",
+  code: "text-muted-foreground",
+  text: "text-muted-foreground",
+  default: "text-muted-foreground",
+};
+
+/**
+ * ไอคอน lucide ตามชนิดไฟล์ (image/video/audio/pdf/doc/sheet/slides/zip/code/text/folder) สีตาม token
+ *   <FileTypeIcon mime="application/pdf" /> · <FileTypeIcon filename="report.xlsx" size={20} />
+ */
+export function FileTypeIcon({
+  mime,
+  filename,
+  size = 16,
+  className,
+  ...props
+}: Omit<ComponentProps<LucideIcon>, "size"> & {
+  mime?: string | null;
+  filename?: string | null;
+  /** ขนาดเป็น px (ค่าเริ่มต้น 16) */
+  size?: number;
+}) {
+  const kind = getFileKind(mime, filename);
+  const Icon = ICON[kind];
+  return (
+    <Icon
+      data-kind={kind}
+      aria-hidden="true"
+      className={cn("shrink-0", COLOR[kind], className)}
+      style={{ width: size, height: size }}
+      {...props}
+    />
+  );
+}

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

@@ -33,7 +33,7 @@ import { useUiText } from "./ui-text";
  * ฟอร์ม "สร้าง/แก้ไข" ในกล่องโต้ตอบ — เปิดจากปุ่ม (trigger) ปิดเองเมื่อสำเร็จ
  * ใช้แทนฟอร์มที่เคยวางค้างไว้บนหน้า เพื่อให้หน้า list สะอาดและมีการกระทำหลักอันเดียว
  */
-export function FormDialog({
+export function FormDialog<TData = undefined>({
   trigger,
   title,
   description,
@@ -49,7 +49,7 @@ export function FormDialog({
   trigger?: ReactElement;
   title: ReactNode;
   description?: ReactNode;
-  action: FormAction;
+  action: FormAction<TData>;
   submitLabel?: string;
   /** เนื้อฟอร์ม — เป็นฟังก์ชันได้เพื่อรับ `{ state, pending, errors, fieldError }` */
   children: ReactNode | ((ctx: FormRenderContext) => ReactNode);
@@ -66,7 +66,7 @@ export function FormDialog({
   const [uncontrolled, setUncontrolled] = useState(false);
   const open = controlledOpen ?? uncontrolled;
   const setOpen = onOpenChange ?? setUncontrolled;
-  const [state, formAction, pending] = useActionState<FormState, FormData>(action, null);
+  const [state, formAction, pending] = useActionState<FormState<TData>, FormData>(action, null);
   const [submitted, setSubmitted] = useState(0);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: ทำงานเมื่อผลของการ submit เปลี่ยนเท่านั้น

package/src/components/shared/form-message.tsx

@@ -3,8 +3,12 @@
 import { cn } from "@suphark/ui/lib/utils";
 import { useUiText } from "./ui-text";
 
-export type FormState =
-  | { ok: true; message?: string }
+/**
+ * ผลของ server action — `TData` = payload เมื่อสำเร็จ (เช่น key ที่ออกใหม่แสดงครั้งเดียว) อ่านได้จาก `onSuccess(state.data)`
+ * ของ ActionForm/FormDialog โดยไม่ต้อง cast
+ */
+export type FormState<TData = undefined> =
+  | { ok: true; message?: string; data?: TData }
   | {
       ok: false;
       /** ข้อความรวม (แสดงใน FormMessage) */
@@ -16,7 +20,7 @@ export type FormState =
 
 /** ค่าที่ ActionForm/FormDialog ส่งให้ children แบบฟังก์ชัน */
 export interface FormRenderContext {
-  state: FormState;
+  state: FormState<unknown>;
   pending: boolean;
   /** error รายช่องจาก state ล่าสุด (ว่างเมื่อสำเร็จ/ยังไม่ส่ง) */
   errors: Record<string, string | undefined>;
@@ -24,20 +28,23 @@ export interface FormRenderContext {
   fieldError: (name: string) => string | undefined;
 }
 
-export function formRenderContext(state: FormState, pending: boolean): FormRenderContext {
+export function formRenderContext(state: FormState<unknown>, pending: boolean): FormRenderContext {
   const errors = state && !state.ok ? (state.errors ?? {}) : {};
   return { state, pending, errors, fieldError: (name) => errors[name] };
 }
 
 /** server action สำหรับ FormDialog/ActionForm: (state ก่อนหน้า, FormData) → FormState */
-export type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;
+export type FormAction<TData = undefined> = (
+  prev: FormState<TData>,
+  formData: FormData,
+) => Promise<FormState<TData>>;
 
 /** ข้อความผลของ server action ใต้ฟอร์ม */
 export function FormMessage({
   state,
   className,
 }: {
-  state: FormState | undefined;
+  state: FormState<unknown> | undefined;
   className?: string;
 }) {
   const text = useUiText();