@suphark/ui 0.7.0 → 0.8.0

package/src/components/shared/tree-view.tsx

@@ -0,0 +1,325 @@
+"use client";
+
+import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronRight } from "lucide-react";
+import {
+  type DragEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export interface TreeNode {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** มีลูกแต่ยังไม่โหลด (ใช้กับ `loadChildren`) */
+  hasChildren?: boolean;
+  children?: TreeNode[];
+  disabled?: boolean;
+  /** ท้ายแถว เช่น จำนวน */
+  badge?: ReactNode;
+}
+
+export interface TreeViewProps {
+  nodes: TreeNode[];
+  selectedId?: string | null;
+  onSelect?: (id: string, node: TreeNode) => void;
+  /** คุม node ที่ขยายจากภายนอก (ใช้คู่ `onExpandedChange`) */
+  expandedIds?: ReadonlySet<string> | readonly string[];
+  defaultExpandedIds?: readonly string[];
+  onExpandedChange?: (ids: string[]) => void;
+  /** โหลดลูกแบบ lazy เมื่อขยาย node ที่ `hasChildren` และยังไม่มี `children` — cache ในตัว */
+  loadChildren?: (id: string, node: TreeNode) => Promise<TreeNode[]>;
+  /** HTML5 drag & drop: วางไฟล์/รายการลง node (ไฮไลต์ node ขณะลากทับ) */
+  onDrop?: (targetId: string, e: DragEvent<HTMLElement>, node: TreeNode) => void;
+  /** คืน false = node นี้ไม่รับวาง (ค่าเริ่มต้นรับทุก node เมื่อมี onDrop) */
+  canDrop?: (targetId: string, e: DragEvent<HTMLElement>, node: TreeNode) => boolean;
+  renderLabel?: (
+    node: TreeNode,
+    ctx: { expanded: boolean; selected: boolean; level: number },
+  ) => ReactNode;
+  /** แสดงเมื่อ `nodes` ว่าง */
+  emptyState?: ReactNode;
+  /** aria-label ของ tree */
+  label?: string;
+  /** ระยะเยื้องต่อระดับ (px, ค่าเริ่มต้น 12) */
+  indent?: number;
+  className?: string;
+}
+
+interface Row {
+  node: TreeNode;
+  level: number;
+  parentId: string | null;
+  expanded: boolean;
+  isBranch: boolean;
+}
+
+function toSet(ids?: ReadonlySet<string> | readonly string[]): Set<string> {
+  if (!ids) return new Set();
+  return ids instanceof Set ? new Set(ids) : new Set(ids as readonly string[]);
+}
+
+/**
+ * ต้นไม้ทั่วไป (โฟลเดอร์/หมวด/องค์กร) — `role=tree` ตาม WAI-ARIA: treeitem มี aria-expanded/selected/level,
+ * roving tabindex + คีย์บอร์ด ↑↓ เลื่อน, → ขยาย/เข้าไปลูกแรก, ← ยุบ/กลับไปแม่, Home/End, Enter/Space เลือก
+ * ลูกโหลด lazy ผ่าน `loadChildren` (Spinner ระหว่างโหลด, cache ในตัว); วางไฟล์ลง node ด้วย `onDrop`
+ * สีตาม token ของ Sidebar (แถวที่เลือก = bg-sidebar-accent) เพื่อวางใน sidebar ได้กลมกลืน
+ */
+export function TreeView({
+  nodes,
+  selectedId = null,
+  onSelect,
+  expandedIds: controlledExpanded,
+  defaultExpandedIds,
+  onExpandedChange,
+  loadChildren,
+  onDrop,
+  canDrop,
+  renderLabel,
+  emptyState,
+  label,
+  indent = 12,
+  className,
+}: TreeViewProps) {
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => toSet(defaultExpandedIds));
+  const expanded =
+    controlledExpanded !== undefined ? toSet(controlledExpanded) : uncontrolledExpanded;
+  const [loaded, setLoaded] = useState<Map<string, TreeNode[]>>(() => new Map());
+  const [loading, setLoading] = useState<Set<string>>(() => new Set());
+  const [focusId, setFocusId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<string | null>(null);
+  const itemRefs = useRef(new Map<string, HTMLElement>());
+
+  const setExpanded = useCallback(
+    (next: Set<string>) => {
+      if (controlledExpanded === undefined) setUncontrolledExpanded(next);
+      onExpandedChange?.([...next]);
+    },
+    [controlledExpanded, onExpandedChange],
+  );
+
+  const childrenOf = useCallback(
+    (node: TreeNode): TreeNode[] | undefined => node.children ?? loaded.get(node.id),
+    [loaded],
+  );
+
+  // แถวที่มองเห็น (ตามลำดับบนจอ) — ใช้ทั้ง render และเดินด้วยคีย์บอร์ด
+  const rows = useMemo(() => {
+    const out: Row[] = [];
+    const walk = (list: TreeNode[], level: number, parentId: string | null) => {
+      for (const node of list) {
+        const kids = childrenOf(node);
+        const isBranch = Boolean(node.hasChildren) || (kids?.length ?? 0) > 0;
+        const isExpanded = isBranch && expanded.has(node.id);
+        out.push({ node, level, parentId, expanded: isExpanded, isBranch });
+        if (isExpanded && kids) walk(kids, level + 1, node.id);
+      }
+    };
+    walk(nodes, 1, null);
+    return out;
+  }, [nodes, expanded, childrenOf]);
+
+  const tabStopId = focusId ?? selectedId ?? rows[0]?.node.id ?? null;
+
+  async function toggle(row: Row) {
+    const { node } = row;
+    if (!row.isBranch) return;
+    const next = new Set(expanded);
+    if (row.expanded) {
+      next.delete(node.id);
+      setExpanded(next);
+      return;
+    }
+    next.add(node.id);
+    setExpanded(next);
+    if (!childrenOf(node) && loadChildren && !loading.has(node.id)) {
+      setLoading((s) => new Set(s).add(node.id));
+      try {
+        const kids = await loadChildren(node.id, node);
+        setLoaded((m) => new Map(m).set(node.id, kids));
+      } catch {
+        setLoaded((m) => new Map(m).set(node.id, []));
+      } finally {
+        setLoading((s) => {
+          const n = new Set(s);
+          n.delete(node.id);
+          return n;
+        });
+      }
+    }
+  }
+
+  function focusRow(id: string) {
+    setFocusId(id);
+    itemRefs.current.get(id)?.focus();
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLElement>, index: number) {
+    const row = rows[index];
+    if (!row) return;
+    let handled = true;
+    switch (e.key) {
+      case "ArrowDown": {
+        const next = rows[index + 1];
+        if (next) focusRow(next.node.id);
+        break;
+      }
+      case "ArrowUp": {
+        const prev = rows[index - 1];
+        if (prev) focusRow(prev.node.id);
+        break;
+      }
+      case "ArrowRight":
+        if (row.isBranch && !row.expanded) void toggle(row);
+        else if (row.expanded) {
+          const next = rows[index + 1];
+          if (next && next.parentId === row.node.id) focusRow(next.node.id);
+        }
+        break;
+      case "ArrowLeft":
+        if (row.expanded) void toggle(row);
+        else if (row.parentId) focusRow(row.parentId);
+        break;
+      case "Home":
+        if (rows[0]) focusRow(rows[0].node.id);
+        break;
+      case "End": {
+        const last = rows[rows.length - 1];
+        if (last) focusRow(last.node.id);
+        break;
+      }
+      case "Enter":
+      case " ":
+        if (!row.node.disabled) onSelect?.(row.node.id, row.node);
+        break;
+      default:
+        handled = false;
+    }
+    if (handled) e.preventDefault();
+  }
+
+  if (nodes.length === 0) return <>{emptyState ?? null}</>;
+
+  return (
+    <ul
+      role="tree"
+      aria-label={label}
+      data-slot="tree-view"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+    >
+      {rows.map((row, index) => {
+        const { node, level } = row;
+        const selected = node.id === selectedId;
+        const isLoading = loading.has(node.id);
+        const droppable = Boolean(onDrop) && !node.disabled;
+        const labelContent = renderLabel ? (
+          renderLabel(node, { expanded: row.expanded, selected, level })
+        ) : (
+          <span className="min-w-0 flex-1 truncate">{node.label}</span>
+        );
+        return (
+          <li
+            key={node.id}
+            ref={(el) => {
+              if (el) itemRefs.current.set(node.id, el);
+              else itemRefs.current.delete(node.id);
+            }}
+            role="treeitem"
+            aria-level={level}
+            aria-selected={selected}
+            aria-expanded={row.isBranch ? row.expanded : undefined}
+            aria-disabled={node.disabled || undefined}
+            tabIndex={node.id === tabStopId ? 0 : -1}
+            data-id={node.id}
+            data-selected={selected || undefined}
+            data-drop-target={dropTarget === node.id || undefined}
+            onFocus={() => setFocusId(node.id)}
+            onKeyDown={(e) => onKeyDown(e, index)}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!node.disabled) onSelect?.(node.id, node);
+            }}
+            onDragOver={
+              droppable
+                ? (e) => {
+                    if (canDrop && !canDrop(node.id, e, node)) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (dropTarget !== node.id) setDropTarget(node.id);
+                  }
+                : undefined
+            }
+            onDragLeave={
+              droppable
+                ? (e) => {
+                    // ออกจากแถวจริง (ไม่ใช่ย้ายไปลูกในแถวเดียวกัน)
+                    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+                      setDropTarget((t) => (t === node.id ? null : t));
+                    }
+                  }
+                : undefined
+            }
+            onDrop={
+              droppable
+                ? (e) => {
+                    if (canDrop && !canDrop(node.id, e, node)) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setDropTarget(null);
+                    onDrop?.(node.id, e, node);
+                  }
+                : undefined
+            }
+            style={{ paddingInlineStart: (level - 1) * indent }}
+            className={cn(
+              "group/tree-item flex h-8 cursor-pointer items-center gap-1 rounded-md pr-2 outline-none transition-colors",
+              "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
+              "focus-visible:ring-2 focus-visible:ring-ring/50",
+              "data-selected:bg-sidebar-accent data-selected:font-medium data-selected:text-sidebar-accent-foreground",
+              "data-drop-target:bg-primary/10 data-drop-target:ring-2 data-drop-target:ring-primary/60",
+              "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+            )}
+          >
+            {/* ลูกศรยุบ/ขยาย — ไม่ใช่ button เพื่อไม่ซ้อน focusable ใน treeitem (คีย์บอร์ดใช้ ←/→) */}
+            <span
+              aria-hidden="true"
+              onClick={(e) => {
+                e.stopPropagation();
+                void toggle(row);
+              }}
+              className={cn(
+                "flex size-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground",
+                row.isBranch
+                  ? "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                  : "invisible",
+              )}
+            >
+              {isLoading ? (
+                <Spinner className="size-3.5" />
+              ) : (
+                <ChevronRight
+                  className={cn("size-4 transition-transform", row.expanded && "rotate-90")}
+                />
+              )}
+            </span>
+            {node.icon && (
+              <span className="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
+                {node.icon}
+              </span>
+            )}
+            {labelContent}
+            {node.badge && (
+              <span className="ml-auto shrink-0 text-muted-foreground text-xs">{node.badge}</span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/shared/upload-list.tsx

@@ -0,0 +1,233 @@
+"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 { AlertCircle, Check, ChevronDown, RotateCcw, X } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { FileTypeIcon } from "./file-type-icon";
+import { ProgressBar } from "./progress-bar";
+
+export type UploadStatus = "queued" | "uploading" | "done" | "error" | "aborted";
+
+export interface UploadItem {
+  id: string;
+  name: string;
+  sizeBytes: number;
+  /** 0–1 */
+  progress: number;
+  status: UploadStatus;
+  /** ข้อความเมื่อ status = error */
+  error?: string;
+  /** mime สำหรับไอคอน (ไม่ส่ง = เดาจากนามสกุล) */
+  mime?: string;
+}
+
+export interface UploadListText {
+  title: string;
+  /** สรุป "x/y เสร็จ" */
+  summary: (done: number, total: number) => string;
+  allDone: string;
+  queued: string;
+  aborted: string;
+  cancel: string;
+  retry: string;
+  clearDone: string;
+  collapse: string;
+  expand: string;
+}
+
+const TEXT: Record<"th" | "en", UploadListText> = {
+  th: {
+    title: "อัปโหลด",
+    summary: (d, t) => `${d}/${t} เสร็จ`,
+    allDone: "อัปโหลดเสร็จทั้งหมด",
+    queued: "รอคิว",
+    aborted: "ยกเลิกแล้ว",
+    cancel: "ยกเลิก",
+    retry: "ลองใหม่",
+    clearDone: "ล้างรายการที่เสร็จ",
+    collapse: "ยุบ",
+    expand: "ขยาย",
+  },
+  en: {
+    title: "Uploads",
+    summary: (d, t) => `${d}/${t} done`,
+    allDone: "All uploads complete",
+    queued: "Queued",
+    aborted: "Cancelled",
+    cancel: "Cancel",
+    retry: "Retry",
+    clearDone: "Clear completed",
+    collapse: "Collapse",
+    expand: "Expand",
+  },
+};
+
+export interface UploadListProps {
+  items: UploadItem[];
+  onCancel?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  /** แสดงปุ่มล้างรายการที่เสร็จ (done/aborted) */
+  onClearDone?: () => void;
+  /** ปุ่มปิดทั้งแผง (เช่นเมื่อเสร็จหมดแล้ว) */
+  onClose?: () => void;
+  /** ลอยมุมล่างขวาแบบ Google Drive */
+  floating?: boolean;
+  defaultCollapsed?: boolean;
+  title?: ReactNode;
+  language?: "th" | "en";
+  text?: Partial<UploadListText>;
+  className?: string;
+}
+
+/**
+ * รายการอัปโหลดพร้อม progress ต่อไฟล์ + สรุปรวม (x/y เสร็จ) ยุบ/ขยายได้ — ใช้ `ProgressBar` และ `FileTypeIcon`
+ * แอปเป็นคนคุมคิว/XHR เอง ส่งเฉพาะ `items` เข้ามา (ยกเลิก/ลองใหม่ยิง callback กลับ)
+ */
+export function UploadList({
+  items,
+  onCancel,
+  onRetry,
+  onClearDone,
+  onClose,
+  floating = false,
+  defaultCollapsed = false,
+  title,
+  language = "th",
+  text: textProp,
+  className,
+}: UploadListProps) {
+  const text: UploadListText = { ...TEXT[language], ...textProp };
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const total = items.length;
+  const done = items.filter((i) => i.status === "done").length;
+  const settled = items.every((i) => i.status === "done" || i.status === "aborted");
+  const hasClearable = items.some((i) => i.status === "done" || i.status === "aborted");
+  if (total === 0) return null;
+
+  return (
+    <section
+      data-slot="upload-list"
+      aria-label={typeof title === "string" ? title : text.title}
+      className={cn(
+        "flex flex-col overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm",
+        floating && "fixed right-4 bottom-4 z-50 w-[min(20rem,calc(100vw-2rem))] shadow-lg",
+        className,
+      )}
+    >
+      <header className="flex items-center gap-2 border-b bg-muted/40 px-3 py-2">
+        <div className="min-w-0 flex-1">
+          <p className="truncate font-semibold text-sm">{title ?? text.title}</p>
+          <p className="text-muted-foreground text-xs" aria-live="polite">
+            {settled && done === total ? text.allDone : text.summary(done, total)}
+          </p>
+        </div>
+        {onClearDone && hasClearable && (
+          <Button type="button" variant="ghost" size="sm" onClick={onClearDone}>
+            {text.clearDone}
+          </Button>
+        )}
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-label={collapsed ? text.expand : text.collapse}
+          aria-expanded={!collapsed}
+          onClick={() => setCollapsed((c) => !c)}
+        >
+          <ChevronDown className={cn("transition-transform", collapsed && "rotate-180")} />
+        </Button>
+        {onClose && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label={text.cancel}
+            onClick={onClose}
+          >
+            <X />
+          </Button>
+        )}
+      </header>
+      {!collapsed && (
+        <ul className="max-h-72 divide-y overflow-y-auto">
+          {items.map((item) => {
+            const pct = Math.round(Math.min(1, Math.max(0, item.progress)) * 100);
+            const cancelable = item.status === "queued" || item.status === "uploading";
+            const retryable = item.status === "error" || item.status === "aborted";
+            return (
+              <li
+                key={item.id}
+                data-status={item.status}
+                className="flex items-center gap-3 px-3 py-2"
+              >
+                <FileTypeIcon mime={item.mime} filename={item.name} size={20} />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-baseline gap-2">
+                    <p className="min-w-0 flex-1 truncate text-sm">{item.name}</p>
+                    <span className="shrink-0 text-muted-foreground text-xs tabular-nums">
+                      {item.status === "uploading"
+                        ? `${pct}%`
+                        : item.status === "queued"
+                          ? text.queued
+                          : item.status === "aborted"
+                            ? text.aborted
+                            : formatBytes(item.sizeBytes)}
+                    </span>
+                  </div>
+                  {(item.status === "uploading" || item.status === "queued") && (
+                    <ProgressBar
+                      value={pct}
+                      className="mt-1"
+                      aria-label={item.name}
+                      indicatorClassName={
+                        item.status === "queued" ? "bg-muted-foreground/40" : undefined
+                      }
+                    />
+                  )}
+                  {item.status === "error" && (
+                    <p
+                      role="alert"
+                      className="mt-0.5 flex items-center gap-1 text-destructive text-xs"
+                    >
+                      <AlertCircle className="size-3.5 shrink-0" aria-hidden="true" />
+                      <span className="truncate">{item.error ?? "error"}</span>
+                    </p>
+                  )}
+                </div>
+                {item.status === "done" && (
+                  <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-success text-success-foreground">
+                    <Check className="size-3" strokeWidth={3} aria-hidden="true" />
+                  </span>
+                )}
+                {cancelable && onCancel && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={`${text.cancel} ${item.name}`}
+                    onClick={() => onCancel(item.id)}
+                  >
+                    <X />
+                  </Button>
+                )}
+                {retryable && onRetry && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={`${text.retry} ${item.name}`}
+                    onClick={() => onRetry(item.id)}
+                  >
+                    <RotateCcw />
+                  </Button>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/index.ts

@@ -24,6 +24,13 @@ export {
   WEEKDAYS_TH,
 } from "./components/shared/calendar-month-grid";
 export { ClientRedirect } from "./components/shared/client-redirect";
+export {
+  ColorPicker,
+  type ColorPickerItem,
+  type ColorPickerProps,
+  type ColorPickerText,
+  ColorSwatch,
+} from "./components/shared/color-picker";
 export { Combobox } from "./components/shared/combobox";
 export {
   ConfirmDialog,
@@ -44,9 +51,17 @@ export {
   type PromptSpec,
   useDialogs,
 } from "./components/shared/dialogs-provider";
+export {
+  Dropzone,
+  type DropzoneProps,
+  type DropzoneRejectReason,
+  type DropzoneText,
+  matchesAccept,
+} from "./components/shared/dropzone";
 export { EmptyRow } from "./components/shared/empty-row";
 export { EmptyState } from "./components/shared/empty-state";
 export { EnvSnippet, randomSecret } from "./components/shared/env-snippet";
+export { type FileKind, FileTypeIcon, getFileKind } from "./components/shared/file-type-icon";
 export { FormFieldBoolean } from "./components/shared/form/form-field-boolean";
 export { FormFieldColorSelect } from "./components/shared/form/form-field-color-select";
 export { FormFieldCombobox } from "./components/shared/form/form-field-combobox";
@@ -109,6 +124,7 @@ export {
 } from "./components/shared/text/primary-secondary-text";
 export * from "./components/shared/theme";
 export { ClientDateFormatter } from "./components/shared/time/client-date-formatter";
+export { type TreeNode, TreeView, type TreeViewProps } from "./components/shared/tree-view";
 export {
   UI_TEXT_EN,
   UI_TEXT_TH,
@@ -116,6 +132,13 @@ export {
   UiTextProvider,
   useUiText,
 } from "./components/shared/ui-text";
+export {
+  type UploadItem,
+  UploadList,
+  type UploadListProps,
+  type UploadListText,
+  type UploadStatus,
+} from "./components/shared/upload-list";
 // ---------- shadcn/ui primitives ----------
 export * from "./components/ui/accordion";
 export * from "./components/ui/alert";
@@ -183,7 +206,7 @@ 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 { formatBytes, formatRelativeThaiDate, formatThaiFullDate } from "./lib/formatters";
 export { getDateTimeFormat, getNumberFormat } from "./lib/intl-cache";
 export {
   type AtomicPermissionRequirement,

package/src/lib/formatters.ts

@@ -44,3 +44,20 @@ export function formatThaiFullDate(date: Date | string | number | null | undefin
 
   return `${d.getDate()} ${THAI_MONTH_SHORT[d.getMonth()]} ${d.getFullYear() + 543}`;
 }
+
+/**
+ * ขนาดไฟล์อ่านง่าย (ฐาน 1024): 0 B, 1.5 KB, 12.3 MB, 1.2 GB — ตัวเลขทศนิยม 1 ตำแหน่งเมื่อ < 10
+ *   formatBytes(1536) → "1.5 KB"
+ */
+export function formatBytes(bytes: number | null | undefined, locale = "th-TH"): string {
+  if (bytes == null || !Number.isFinite(bytes) || bytes < 0) return "—";
+  const units = ["B", "KB", "MB", "GB", "TB"] as const;
+  let value = bytes;
+  let i = 0;
+  while (value >= 1024 && i < units.length - 1) {
+    value /= 1024;
+    i += 1;
+  }
+  const digits = i === 0 ? 0 : value < 10 ? 1 : 0;
+  return `${value.toLocaleString(locale, { maximumFractionDigits: digits })} ${units[i]}`;
+}