@suphark/ui 0.1.0

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

@@ -0,0 +1,86 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@suphark/ui/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@suphark/ui/components/ui/select";
+// --- START: CODE TO EDIT ---
+// [EDIT] 👈 Import TAILWIND_COLORS เข้ามาโดยตรง
+import { getStatusColorTheme, TAILWIND_COLORS } from "@suphark/ui/lib/status-colors";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+import type { Control, FieldValues, Path } from "react-hook-form";
+
+// --- END: CODE TO EDIT ---
+
+// [DELETE] 👈 ไม่จำเป็นต้องใช้ type นี้จากภายนอกแล้ว
+// type SelectOption = {
+//   value: string;
+//   label: string;
+// };
+
+interface FormFieldColorSelectProps<T extends FieldValues> extends ComponentProps<typeof Select> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  // [DELETE] 👈 เอา options prop ออก
+  // options: SelectOption[];
+  placeholder?: string;
+}
+
+export function FormFieldColorSelect<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  ...props
+}: FormFieldColorSelectProps<T>) {
+  const colorOptions = TAILWIND_COLORS.map((color) => ({
+    value: color.name,
+    label: color.label,
+  }));
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>
+            {label} {props.required && <span className="text-red-500">*</span>}
+          </FormLabel>
+          <Select onValueChange={field.onChange} value={field.value} {...props}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={placeholder} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {/* ใช้ colorOptions ที่สร้างขึ้นภายใน */}
+              {colorOptions.map((option) => {
+                const theme = getStatusColorTheme(option.value);
+                return (
+                  <SelectItem key={option.value} value={option.value}>
+                    <div className="flex items-center gap-2">
+                      <span className={cn("h-4 w-4 rounded-full", theme.background)} />
+                      <span>{option.label}</span>
+                    </div>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,167 @@
+"use client";
+
+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 { cn } from "@suphark/ui/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { useEffect, useState, useTransition } from "react";
+import type { FieldValues, Path } from "react-hook-form";
+
+interface FormFieldComboboxProps<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;
+  placeholder?: string;
+  fetcher: () => Promise<{ label: string; value: string; subLabel?: string; [key: string]: any }[]>;
+  /**
+   * คีย์สำหรับแคชและตัดสินว่าต้องโหลดใหม่หรือไม่
+   * จำเป็นเมื่อส่ง fetcher เป็น arrow function แบบ inline (identity เปลี่ยนทุก render)
+   * ถ้าไม่ส่ง จะใช้ตัว fetcher เองเป็นคีย์ตามเดิม
+   */
+  fetcherKey?: string;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+  autoFocus?: boolean;
+  onSelect?: (option: { label: string; value: string; [key: string]: any }) => void;
+}
+
+// Singleton client-side cache to persist combobox options across mounts/renders
+const comboboxCache = new Map<any, { label: string; value: string; subLabel?: string }[]>();
+
+export function FormFieldCombobox<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder = "Select...",
+  fetcher,
+  fetcherKey,
+  disabled,
+  required,
+  className,
+  autoFocus,
+  onSelect,
+}: FormFieldComboboxProps<T>) {
+  const cacheKey = fetcherKey ?? fetcher;
+  const [options, setOptions] = useState<{ label: string; value: string; subLabel?: string }[]>(
+    () => comboboxCache.get(cacheKey) || [],
+  );
+  const [isLoading, startTransition] = useTransition();
+  const [open, setOpen] = React.useState(false);
+
+  // เก็บ fetcher ล่าสุดไว้ใน ref เพื่อไม่ให้ arrow function แบบ inline
+  // (identity ใหม่ทุก render) ทำให้ยิงโหลดซ้ำทุกครั้งที่ฟอร์ม re-render
+  const fetcherRef = React.useRef(fetcher);
+  fetcherRef.current = fetcher;
+
+  useEffect(() => {
+    // แสดงค่าจากแคชก่อนเพื่อลดการกระพริบ แล้วค่อยโหลดค่าล่าสุดทับ
+    const cached = comboboxCache.get(cacheKey);
+    if (cached) setOptions(cached);
+
+    startTransition(async () => {
+      try {
+        const data = await fetcherRef.current();
+        setOptions(data);
+        comboboxCache.set(cacheKey, data);
+      } catch (error) {
+        console.error("Failed to fetch combobox options:", error);
+      }
+    });
+  }, [cacheKey]);
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className={cn("flex flex-col gap-1.5", className)}>
+          <FormLabel>
+            {label} {required && <span className="text-red-500">*</span>}
+          </FormLabel>
+          <FormControl>
+            <Popover open={open} onOpenChange={setOpen}>
+              <PopoverTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    className={cn(
+                      "w-full justify-between font-normal",
+                      !field.value && "text-muted-foreground",
+                    )}
+                    disabled={disabled}
+                    autoFocus={autoFocus}
+                  />
+                }
+              >
+                <span className="flex-1 whitespace-normal text-left">
+                  {field.value
+                    ? options.find((option) => option.value === field.value)?.label
+                    : options.length === 0 && isLoading
+                      ? "Loading..."
+                      : placeholder}
+                </span>
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </PopoverTrigger>
+              <PopoverContent className="w-[--anchor-width] p-0">
+                <Command>
+                  <CommandInput placeholder={`ค้นหา ${placeholder.toLowerCase()}...`} />
+                  <CommandList>
+                    <CommandEmpty>ไม่พบข้อมูล</CommandEmpty>
+                    <CommandGroup>
+                      {options.map((option) => (
+                        <CommandItem
+                          key={option.value}
+                          value={`${option.label} ${option.subLabel || ""}`}
+                          onSelect={() => {
+                            field.onChange(option.value === field.value ? "" : option.value);
+                            onSelect?.(option);
+                            setOpen(false);
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              field.value === option.value ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium text-sm">{option.label}</span>
+                            {option.subLabel && (
+                              <span className="text-muted-foreground text-xs leading-tight">
+                                {option.subLabel}
+                              </span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import { DatePicker } from "@suphark/ui/components/ui/date-picker";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@suphark/ui/components/ui/form";
+import type { Control, FieldValues, Path } from "react-hook-form";
+
+interface FormFieldDateProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function FormFieldDate<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder = "เลือกวันที่...",
+  required,
+  disabled,
+  className,
+}: FormFieldDateProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className="flex flex-col">
+          <FormLabel>
+            {label} {required && <span className="text-red-500">*</span>}
+          </FormLabel>
+          <FormControl>
+            <DatePicker
+              value={field.value}
+              onChange={field.onChange}
+              disabled={disabled}
+              placeholder={placeholder}
+              className={className}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/src/components/shared/form/form-field-formatted-number.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@suphark/ui/components/ui/form";
+import { Input } from "@suphark/ui/components/ui/input";
+import type * as React from "react";
+import type { Control, FieldValues, Path } from "react-hook-form"; // Removed unused imports
+import {
+  type NumberFormatValues,
+  NumericFormat,
+  type NumericFormatProps,
+} from "react-number-format";
+
+// Get Input props type correctly
+type ShadcnInputProps = React.ComponentPropsWithoutRef<typeof Input>;
+
+// Define props based on NumericFormatProps and RHF needs
+interface FormFieldFormattedNumberProps<TFieldValues extends FieldValues = FieldValues>
+  extends Omit<
+    NumericFormatProps<ShadcnInputProps>,
+    | "value"
+    | "defaultValue"
+    | "name"
+    | "form"
+    | "ref"
+    | "customInput"
+    | "getInputRef"
+    | "onValueChange"
+    | "onBlur"
+    | "type"
+    | "onChange"
+    | "valueIsNumericString"
+  > {
+  name: Path<TFieldValues>;
+  control: Control<TFieldValues>;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  inputClassName?: string;
+  formItemClassName?: string;
+}
+
+export function FormFieldFormattedNumber<TFieldValues extends FieldValues = FieldValues>({
+  name,
+  control,
+  label,
+  description,
+  required,
+  thousandSeparator = true,
+  decimalScale,
+  allowNegative = false,
+  prefix,
+  suffix,
+  inputClassName,
+  formItemClassName,
+  ...numericFormatProps // Rest are valid NumericFormatProps passed down
+}: FormFieldFormattedNumberProps<TFieldValues>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field: { onChange, onBlur, value, ref, ...fieldRest } }) => (
+        <FormItem className={formItemClassName}>
+          {label && (
+            <FormLabel>
+              {label}
+              {required && <span className="text-destructive">*</span>}
+            </FormLabel>
+          )}
+          <FormControl>
+            <NumericFormat
+              {...fieldRest}
+              getInputRef={ref}
+              value={value as string | number | null | undefined}
+              onValueChange={(values: NumberFormatValues) => {
+                onChange(values.floatValue ?? undefined);
+              }}
+              onBlur={onBlur}
+              thousandSeparator={thousandSeparator}
+              decimalScale={decimalScale}
+              allowNegative={allowNegative}
+              prefix={prefix}
+              suffix={suffix}
+              {...numericFormatProps}
+              customInput={Input}
+              className={inputClassName}
+              valueIsNumericString={false}
+              allowLeadingZeros={false}
+            />
+          </FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}