@suphark/ui 0.1.0

package/src/components/shared/form/form-field-select.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@suphark/ui/components/ui/command";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@suphark/ui/components/ui/form";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@suphark/ui/components/ui/select";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
+
+// Unified Option Type
+export type SelectOption = {
+  value: string;
+  label: string;
+  // Combobox specific fields (optional)
+  subLabel?: string;
+  superLabel?: string;
+  searchableValue?: string;
+};
+
+// Base Props
+type BaseProps<T extends FieldValues> = {
+  control: any; // Using any to bypass deep generic reconciliation errors with Control<T, any> in RHF 7
+  name: Path<T>;
+  label: string;
+  options: SelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  formItemClassName?: string;
+  description?: string;
+};
+
+// Discriminated Union Props
+type FormFieldSelectProps<T extends FieldValues> = BaseProps<T> &
+  (
+    | {
+        variant?: "select"; // Default
+        onValueChange?: (value: string) => void;
+      }
+    | {
+        variant: "combobox";
+        searchPlaceholder?: string;
+        searchable?: boolean;
+        modal?: boolean;
+        emptyContent?: React.ReactNode;
+      }
+    | {
+        variant: "multiselect";
+        searchPlaceholder?: string;
+        creatable?: boolean;
+        modal?: boolean;
+      }
+  );
+
+// --- Combobox Internal Logic ---
+function ComboboxContent<T extends FieldValues>({
+  field,
+  options,
+  disabled,
+  placeholder,
+  searchPlaceholder,
+  searchable = true,
+  modal,
+  emptyContent,
+  required,
+  ariaLabel,
+}: {
+  field: ControllerRenderProps<T, Path<T>>;
+  options: SelectOption[];
+  disabled?: boolean;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  searchable?: boolean;
+  modal?: boolean;
+  emptyContent?: React.ReactNode;
+  required?: boolean;
+  ariaLabel: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  // Fix: Handle null/undefined field.value safely
+  const fieldVal = field.value ?? "";
+  const selectedOption = options.find((option) => option.value === fieldVal);
+  const selectedLabel = selectedOption?.label || placeholder;
+  const selectedCommandValue = selectedOption
+    ? selectedOption.searchableValue || selectedOption.label
+    : undefined;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={modal}>
+      <PopoverTrigger render={<FormControl />}>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-label={ariaLabel}
+          aria-expanded={open}
+          aria-required={required}
+          className={cn(
+            "w-full justify-between",
+            !fieldVal && "text-muted-foreground",
+            disabled && "cursor-not-allowed opacity-50",
+          )}
+          disabled={disabled}
+        >
+          <span className="truncate">{selectedLabel}</span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--anchor-width] p-0">
+        <Command defaultValue={selectedCommandValue}>
+          {searchable && <CommandInput placeholder={searchPlaceholder || "Search..."} />}
+          <CommandList>
+            {searchable ? <CommandEmpty>{emptyContent ?? "No results found."}</CommandEmpty> : null}
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.searchableValue || option.label}
+                  onSelect={() => {
+                    field.onChange(
+                      (option.value === fieldVal ? "" : option.value) as PathValue<T, Path<T>>,
+                    );
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      fieldVal === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  <div>
+                    {option.superLabel && (
+                      <p className="text-muted-foreground text-xs">{option.superLabel}</p>
+                    )}
+                    <span>{option.label}</span>
+                    {option.subLabel && (
+                      <p className="text-muted-foreground text-xs">{option.subLabel}</p>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// --- Multiselect Combobox Internal Logic ---
+function MultiSelectComboboxContent<T extends FieldValues>({
+  field,
+  options,
+  disabled,
+  placeholder,
+  searchPlaceholder,
+  creatable = false,
+  modal,
+  ariaLabel,
+}: {
+  field: ControllerRenderProps<T, Path<T>>;
+  options: SelectOption[];
+  disabled?: boolean;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  creatable?: boolean;
+  modal?: boolean;
+  ariaLabel: string;
+}) {
+  const rawValue = field.value || [];
+  const value = Array.isArray(rawValue) ? rawValue : [];
+
+  return (
+    <MultiSelectCombobox
+      options={options}
+      value={value}
+      onChange={(nextVal) => field.onChange(nextVal as PathValue<T, Path<T>>)}
+      disabled={disabled}
+      placeholder={placeholder}
+      searchPlaceholder={searchPlaceholder}
+      creatable={creatable}
+      modal={modal}
+      triggerRender={<FormControl />}
+      ariaLabel={ariaLabel}
+    />
+  );
+}
+
+export function FormFieldSelect<T extends FieldValues>({
+  control,
+  name,
+  label,
+  options,
+  placeholder,
+  formItemClassName,
+  description,
+  disabled,
+  required,
+  ...props
+}: FormFieldSelectProps<T>) {
+  // Safeguard: Deduplicate options by value to prevent React key warnings
+  const uniqueOptions = React.useMemo(() => {
+    const seen = new Set<string>();
+    return options.filter((option) => {
+      if (!option.value || seen.has(option.value)) return false;
+      seen.add(option.value);
+      return true;
+    });
+  }, [options]);
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className={formItemClassName}>
+          <FormLabel>
+            {label}{" "}
+            {required ? (
+              <span className="text-destructive" aria-hidden="true">
+                *
+              </span>
+            ) : null}
+            {required ? <span className="sr-only"> required</span> : null}
+          </FormLabel>
+
+          {props.variant === "combobox" ? (
+            <ComboboxContent
+              field={field}
+              options={uniqueOptions}
+              disabled={disabled}
+              placeholder={placeholder}
+              searchPlaceholder={props.searchPlaceholder}
+              searchable={props.searchable}
+              modal={props.modal}
+              emptyContent={props.emptyContent}
+              required={required}
+              ariaLabel={label}
+            />
+          ) : props.variant === "multiselect" ? (
+            <MultiSelectComboboxContent
+              field={field}
+              options={uniqueOptions}
+              disabled={disabled}
+              placeholder={placeholder}
+              searchPlaceholder={props.searchPlaceholder}
+              creatable={props.creatable}
+              modal={props.modal}
+              ariaLabel={label}
+            />
+          ) : (
+            <Select
+              items={uniqueOptions}
+              onValueChange={(val) => {
+                if (val !== null) {
+                  field.onChange(val);
+                  if (props.variant === "select" && props.onValueChange) {
+                    props.onValueChange(val as any);
+                  }
+                }
+              }}
+              value={field.value}
+              disabled={disabled}
+            >
+              <FormControl>
+                <SelectTrigger aria-required={required}>
+                  <SelectValue placeholder={placeholder}>
+                    {(val) => uniqueOptions.find((o) => o.value === val)?.label ?? val}
+                  </SelectValue>
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {uniqueOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+
+          {description && <p className="text-muted-foreground text-sm">{description}</p>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/src/components/shared/form/simple-select.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@suphark/ui/components/ui/select";
+import { cn } from "@suphark/ui/lib/utils";
+import * as React from "react";
+
+export interface SimpleSelectOption<T extends string = string> {
+  value: T;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface SimpleSelectGroup<T extends string = string> {
+  label?: string;
+  options: SimpleSelectOption<T>[];
+}
+
+export type SimpleSelectOptions<T extends string = string> =
+  | SimpleSelectOption<T>[]
+  | SimpleSelectGroup<T>[];
+
+export interface SimpleSelectProps<T extends string = string> {
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+  options: SimpleSelectOptions<T>;
+  placeholder?: string;
+  fallbackLabel?: (value: T) => React.ReactNode;
+  disabled?: boolean;
+  size?: "sm" | "default";
+  className?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+  ariaLabel?: string;
+}
+
+function isGroupList<T extends string>(
+  options: SimpleSelectOptions<T>,
+): options is SimpleSelectGroup<T>[] {
+  const first = options[0];
+  return first !== undefined && "options" in first;
+}
+
+export function SimpleSelect<T extends string = string>({
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  placeholder,
+  fallbackLabel,
+  disabled,
+  size = "default",
+  className,
+  triggerClassName,
+  contentClassName,
+  ariaLabel,
+}: SimpleSelectProps<T>) {
+  const { flatOptions, groups } = React.useMemo(() => {
+    if (isGroupList(options)) {
+      const flat = options.flatMap((g) => g.options);
+      return { flatOptions: flat, groups: options };
+    }
+    return {
+      flatOptions: options,
+      groups: [{ options }],
+    };
+  }, [options]);
+
+  const items = React.useMemo(
+    () =>
+      flatOptions.map((opt) => ({
+        value: opt.value,
+        label: opt.label,
+      })),
+    [flatOptions],
+  );
+
+  const optionsMap = React.useMemo(() => {
+    const map = new Map<string, React.ReactNode>();
+    for (const opt of flatOptions) {
+      map.set(opt.value, opt.label);
+    }
+    return map;
+  }, [flatOptions]);
+
+  const resolveLabel = React.useCallback(
+    (val: unknown) => {
+      if (val === undefined || val === null || val === "") {
+        return placeholder;
+      }
+      const strVal = String(val);
+      if (optionsMap.has(strVal)) {
+        return optionsMap.get(strVal);
+      }
+      if (fallbackLabel) {
+        return fallbackLabel(strVal as T);
+      }
+      return strVal;
+    },
+    [optionsMap, fallbackLabel, placeholder],
+  );
+
+  return (
+    <Select
+      items={items}
+      value={value}
+      // base-ui-ok: wrapper ตั้งใจเปิดให้ใช้ได้ทั้งแบบ controlled และ uncontrolled
+      // ผู้เรียกเลือกส่งอย่างใดอย่างหนึ่ง ค่าที่ส่งมาจึงไม่ใช่ค่าที่เปลี่ยนไปมา
+      defaultValue={defaultValue}
+      onValueChange={(val) => {
+        if (val !== null && onValueChange) {
+          onValueChange(val as T);
+        }
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        size={size}
+        aria-label={ariaLabel}
+        className={cn("w-full", triggerClassName, className)}
+      >
+        <SelectValue placeholder={placeholder}>{(val) => resolveLabel(val)}</SelectValue>
+      </SelectTrigger>
+      <SelectContent className={contentClassName}>
+        {groups.map((group, gIdx) => (
+          <React.Fragment key={group.label || `group-${gIdx}`}>
+            {gIdx > 0 && <SelectSeparator />}
+            <SelectGroup>
+              {group.label && (
+                <SelectLabel className="text-muted-foreground text-xs">{group.label}</SelectLabel>
+              )}
+              {group.options.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </React.Fragment>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

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

@@ -0,0 +1,109 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@suphark/ui/components/ui/dialog";
+import { useRouter } from "next/navigation";
+import {
+  type ReactElement,
+  type ReactNode,
+  startTransition,
+  useActionState,
+  useEffect,
+  useState,
+} from "react";
+import { FormMessage, type FormState } from "./form-message";
+import { useUiText } from "./ui-text";
+
+type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;
+
+/**
+ * ฟอร์ม "สร้าง/แก้ไข" ในกล่องโต้ตอบ — เปิดจากปุ่ม (trigger) ปิดเองเมื่อสำเร็จ
+ * ใช้แทนฟอร์มที่เคยวางค้างไว้บนหน้า เพื่อให้หน้า list สะอาดและมีการกระทำหลักอันเดียว
+ */
+export function FormDialog({
+  trigger,
+  title,
+  description,
+  action,
+  submitLabel,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  keepOpen = false,
+  contentClassName,
+}: {
+  /** ปุ่มเปิด (ต้องเป็น <Button> ของ shadcn — Base UI จะใช้ตัวนี้เป็น trigger โดยตรง) */
+  trigger?: ReactElement;
+  title: ReactNode;
+  description?: ReactNode;
+  action: FormAction;
+  submitLabel?: string;
+  children: ReactNode;
+  /** ควบคุมจากภายนอก (เช่นเปิดจาก RowActions) */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** ผลลัพธ์ต้องอ่านหลังสำเร็จ (เช่น secret แสดงครั้งเดียว) → ไม่ปิดเอง */
+  keepOpen?: boolean;
+  /** ความกว้าง/คลาสของ DialogContent (ค่าเริ่มต้น sm:max-w-md) */
+  contentClassName?: string;
+}) {
+  const router = useRouter();
+  const text = useUiText();
+  const [uncontrolled, setUncontrolled] = useState(false);
+  const open = controlledOpen ?? uncontrolled;
+  const setOpen = onOpenChange ?? setUncontrolled;
+  const [state, formAction, pending] = useActionState<FormState, FormData>(action, null);
+  const [submitted, setSubmitted] = useState(0);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ทำงานเมื่อผลของการ submit เปลี่ยนเท่านั้น
+  useEffect(() => {
+    if (state?.ok && !keepOpen) {
+      setOpen(false);
+      router.refresh();
+    } else if (state?.ok) {
+      router.refresh();
+    }
+  }, [state, submitted]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger render={trigger} />}
+      <DialogContent className={contentClassName ?? "sm:max-w-md"}>
+        <form
+          // ไม่ใช้ `action=` — React 19 รีเซ็ตฟอร์ม uncontrolled หลัง action จบทุกครั้ง (แม้คืน error)
+          // ทำให้ค่าที่พิมพ์หาย; เรียก action ใน transition เองแทน ฟอร์มจึงคงค่าไว้ให้แก้ต่อได้
+          onSubmit={(e) => {
+            e.preventDefault();
+            const fd = new FormData(e.currentTarget);
+            setSubmitted((n) => n + 1);
+            startTransition(() => formAction(fd));
+          }}
+          className="flex flex-col gap-4"
+        >
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+          <div className="flex flex-col gap-3">{children}</div>
+          <FormMessage state={state} />
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+              {text.cancel}
+            </Button>
+            <Button type="submit" disabled={pending}>
+              {submitLabel ?? text.save}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { useUiText } from "./ui-text";
+
+export type FormState = { ok: true; message?: string } | { ok: false; error: string } | null;
+
+/** ข้อความผลของ server action ใต้ฟอร์ม */
+export function FormMessage({
+  state,
+  className,
+}: {
+  state: FormState | undefined;
+  className?: string;
+}) {
+  const text = useUiText();
+  if (!state) return null;
+  return (
+    <p
+      role={state.ok ? "status" : "alert"}
+      className={cn(
+        "text-xs",
+        state.ok ? "text-emerald-700 dark:text-emerald-300" : "text-destructive",
+        className,
+      )}
+    >
+      {state.ok ? (state.message ?? text.success) : state.error}
+    </p>
+  );
+}

package/src/components/shared/initials.tsx

@@ -0,0 +1,33 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@suphark/ui/components/ui/avatar";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+
+/** ตัวอักษรย่อจากชื่อ (ไทย/อังกฤษ): "สมชาย ใจดี" → "สจ", "Suphark A." → "SA" */
+export function initialsOf(name: string | null | undefined, fallback = "?"): string {
+  const parts = (name ?? "").trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return fallback;
+  const first = [...(parts[0] ?? "")][0] ?? "";
+  const last = parts.length > 1 ? ([...(parts[parts.length - 1] ?? "")][0] ?? "") : "";
+  return (first + last).toUpperCase();
+}
+
+/** Avatar ของ shadcn + ตัวย่อชื่อ + สีพื้นคงที่ต่อชื่อ (ไม่ต้องมีรูป) */
+export function Initials({
+  name,
+  src,
+  className,
+  ...props
+}: ComponentProps<typeof Avatar> & { name: string | null | undefined; src?: string | null }) {
+  const hue = [...(name ?? "")].reduce((h, c) => (h * 31 + c.codePointAt(0)!) % 360, 7);
+  return (
+    <Avatar className={cn("shrink-0", className)} {...props}>
+      {src && <AvatarImage src={src} alt="" />}
+      <AvatarFallback
+        className="text-[0.7rem] font-medium"
+        style={{ backgroundColor: `oklch(0.93 0.04 ${hue})`, color: `oklch(0.4 0.08 ${hue})` }}
+      >
+        {initialsOf(name)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}