@suphark/ui 0.1.0

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

@@ -0,0 +1,372 @@
+"use client";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@suphark/ui/components/ui/command";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@suphark/ui/components/ui/form";
+import { Input } from "@suphark/ui/components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { Textarea } from "@suphark/ui/components/ui/textarea";
+import { useCopyToClipboard } from "@suphark/ui/hooks/use-copy-to-clipboard";
+import { cn } from "@suphark/ui/lib/utils";
+import { Command as CommandPrimitive } from "cmdk";
+import { Check, CircleAlert, Copy } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useState } from "react";
+import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
+
+// --- Types ---
+
+type BaseProps<T extends FieldValues> = {
+  control: any;
+  name: Path<T>;
+  label: string;
+  required?: boolean;
+  description?: string;
+  suffix?: string;
+};
+
+// Variant 1: Standard Input
+type StandardInputProps<T extends FieldValues> = BaseProps<T> & {
+  variant?: "default";
+  enableCopy?: boolean;
+  isNumeric?: boolean;
+} & Omit<ComponentProps<typeof Input>, "required" | "form" | "name" | "value" | "onChange">;
+
+// Variant 2: Autocomplete
+export type AutocompleteOption = {
+  value: string;
+  label: string;
+};
+type AutocompleteProps<T extends FieldValues> = BaseProps<T> & {
+  variant: "autocomplete";
+  data: AutocompleteOption[];
+  emptyMessage?: string;
+  placeholder?: string;
+  disabled?: boolean;
+};
+
+// Variant 3: Unique Check
+type UniqueCheckProps<T extends FieldValues> = BaseProps<T> & {
+  variant: "unique-check";
+  existingValues: string[] | ((value: string) => boolean);
+  uniqueErrorMessage?: string;
+  enableCopy?: boolean;
+} & Omit<ComponentProps<typeof InputGroupInput>, "required" | "form" | "name" | "value">;
+
+// Variant 4: Textarea
+type TextareaProps<T extends FieldValues> = BaseProps<T> & {
+  variant: "textarea";
+} & Omit<ComponentProps<typeof Textarea>, "required" | "form" | "name">;
+
+export type FormFieldInputProps<T extends FieldValues> =
+  | StandardInputProps<T>
+  | AutocompleteProps<T>
+  | UniqueCheckProps<T>
+  | TextareaProps<T>;
+
+// --- Helper Components ---
+
+function AutocompleteInput<T extends FieldValues>({
+  field,
+  data,
+  placeholder,
+  disabled,
+  emptyMessage = "No results found.",
+  required,
+}: {
+  field: ControllerRenderProps<T, Path<T>>;
+  data: AutocompleteOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  emptyMessage?: string;
+  required?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Command className="overflow-visible bg-transparent">
+      <div
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm ring-offset-background focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+          disabled && "cursor-not-allowed opacity-50",
+          required && !field.value && "border-input",
+        )}
+      >
+        <CommandPrimitive.Input
+          value={field.value as string}
+          onValueChange={field.onChange}
+          onFocus={() => setOpen(true)}
+          onBlur={() => setOpen(false)}
+          placeholder={placeholder}
+          disabled={disabled}
+          className="w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+        />
+      </div>
+      <div className="relative mt-1">
+        {open && field.value && (
+          <CommandList className="fade-in-0 zoom-in-95 absolute top-0 z-50 w-full animate-in rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
+            <CommandEmpty className="py-2 text-center text-muted-foreground text-sm">
+              {emptyMessage}
+            </CommandEmpty>
+            <CommandGroup>
+              {data.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    field.onChange(option.value as PathValue<T, Path<T>>);
+                    setOpen(false);
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      field.value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        )}
+      </div>
+    </Command>
+  );
+}
+
+function UniqueCheckInput<T extends FieldValues>({
+  field,
+  existingValues,
+  uniqueErrorMessage = "ข้อมูลนี้มีอยู่ในระบบแล้ว",
+  enableCopy,
+  ...props
+}: {
+  field: ControllerRenderProps<T, Path<T>>;
+  existingValues: string[] | ((value: string) => boolean);
+  uniqueErrorMessage?: string;
+  enableCopy?: boolean;
+} & Omit<ComponentProps<typeof InputGroupInput>, "value">) {
+  const value = field.value as string;
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+
+  // Determine if duplicate
+  let isDuplicate = false;
+  if (value) {
+    if (Array.isArray(existingValues)) {
+      isDuplicate = existingValues.includes(value);
+    } else {
+      isDuplicate = existingValues(value);
+    }
+  }
+
+  return (
+    <div>
+      <InputGroup className={cn(isDuplicate ? "border-red-500 ring-red-500" : "")}>
+        <InputGroupInput
+          {...field}
+          {...props}
+          value={value || ""}
+          className={cn(isDuplicate ? "text-red-600" : "")}
+        />
+        {isDuplicate && (
+          <InputGroupAddon>
+            <CircleAlert className="h-4 w-4 text-red-500" />
+          </InputGroupAddon>
+        )}
+        {enableCopy && (
+          <InputGroupButton
+            onClick={() => copyToClipboard(String(field.value || ""))}
+            type="button"
+            title="Copy to clipboard"
+          >
+            {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+          </InputGroupButton>
+        )}
+      </InputGroup>
+      {isDuplicate && (
+        <p className="mt-1 font-medium text-[0.8rem] text-red-500">{uniqueErrorMessage}</p>
+      )}
+    </div>
+  );
+}
+
+// --- Main Component ---
+
+/** ช่องกรอกที่มีปุ่มคัดลอก — แยกเป็น component เพื่อให้เรียก hook ที่ระดับบนสุดตาม rules of hooks */
+function CopyableInput(props: ComponentProps<typeof InputGroupInput>) {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  return (
+    <InputGroup>
+      <InputGroupInput {...props} />
+      <InputGroupButton
+        onClick={() => copyToClipboard(String(props.value || ""))}
+        type="button"
+        title="Copy to clipboard"
+      >
+        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+      </InputGroupButton>
+    </InputGroup>
+  );
+}
+
+export function FormFieldInput<T extends FieldValues>({
+  control,
+  name,
+  label,
+  required,
+  ...props
+}: FormFieldInputProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>
+            {label}{" "}
+            {required ? (
+              <span className="text-destructive" aria-hidden="true">
+                *
+              </span>
+            ) : null}
+            {required ? <span className="sr-only"> required</span> : null}
+          </FormLabel>
+          <FormControl>
+            {(() => {
+              if (props.variant === "autocomplete") {
+                const { data, emptyMessage, ...rest } = props as AutocompleteProps<T>;
+                return (
+                  <AutocompleteInput
+                    field={field}
+                    data={data}
+                    emptyMessage={emptyMessage}
+                    required={required}
+                    {...rest}
+                  />
+                );
+              } else if (props.variant === "unique-check") {
+                const { existingValues, uniqueErrorMessage, variant, enableCopy, ...rest } =
+                  props as UniqueCheckProps<T>;
+                return (
+                  <UniqueCheckInput
+                    field={field}
+                    existingValues={existingValues}
+                    uniqueErrorMessage={uniqueErrorMessage}
+                    enableCopy={enableCopy}
+                    {...rest}
+                  />
+                );
+              } else if (props.variant === "textarea") {
+                const { variant, ...rest } = props as TextareaProps<T>;
+                return (
+                  <Textarea
+                    {...field}
+                    {...rest}
+                    value={field.value ? String(field.value) : ""}
+                    className={cn(required && !field.value && "border-input", rest.className)}
+                  />
+                );
+              } else {
+                // Default Standard Input
+                const { variant, enableCopy, isNumeric, ...rest } = props as StandardInputProps<T>;
+
+                const value = field.value ? String(field.value) : "";
+
+                // --- Numeric Formatting Logic ---
+                let displayValue = value;
+                if (isNumeric && value !== "" && value !== "-") {
+                  const parts = value.split(".");
+                  const intPart = parts[0];
+                  const decimalPart = parts.length > 1 ? `.${parts[1]}` : "";
+                  const numInt = Number(intPart);
+                  if (!Number.isNaN(numInt)) {
+                    displayValue = numInt.toLocaleString("en-US") + decimalPart;
+                  }
+                }
+
+                const handleNumericChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+                  const rawValue = e.target.value.replace(/,/g, "");
+                  if (rawValue === "" || rawValue === "-" || rawValue.endsWith(".")) {
+                    field.onChange(rawValue as PathValue<T, Path<T>>);
+                    return;
+                  }
+                  const numValue = Number(rawValue);
+                  if (!Number.isNaN(numValue)) {
+                    field.onChange(numValue as PathValue<T, Path<T>>);
+                  }
+                };
+                // --------------------------------
+
+                if (enableCopy) {
+                  return (
+                    <CopyableInput
+                      {...field}
+                      {...rest}
+                      type={isNumeric ? "text" : rest.type}
+                      value={displayValue}
+                      onChange={isNumeric ? handleNumericChange : field.onChange}
+                    />
+                  );
+                }
+
+                if (props.suffix) {
+                  return (
+                    <InputGroup>
+                      <InputGroupInput
+                        {...field}
+                        {...rest}
+                        type={isNumeric ? "text" : rest.type}
+                        value={displayValue}
+                        onChange={isNumeric ? handleNumericChange : field.onChange}
+                        className={cn(required && !field.value && "border-input", rest.className)}
+                      />
+                      <InputGroupAddon className="bg-muted/50 px-3 text-muted-foreground text-xs">
+                        {props.suffix}
+                      </InputGroupAddon>
+                    </InputGroup>
+                  );
+                }
+
+                return (
+                  <Input
+                    {...field}
+                    {...rest}
+                    type={isNumeric ? "text" : rest.type}
+                    value={displayValue}
+                    onChange={isNumeric ? handleNumericChange : field.onChange}
+                    className={cn(required && !field.value && "border-input", rest.className)}
+                  />
+                );
+              }
+            })()}
+          </FormControl>
+          {props.description && (
+            <p className="text-[0.8rem] text-muted-foreground">{props.description}</p>
+          )}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/src/components/shared/form/form-field-radio-cards.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { FormControl, FormField, FormItem, FormMessage } from "@suphark/ui/components/ui/form";
+import { Label } from "@suphark/ui/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@suphark/ui/components/ui/radio-group";
+import { cn } from "@suphark/ui/lib/utils";
+import { type ReactNode, useId } from "react";
+import type { Control, FieldValues, Path } from "react-hook-form";
+
+type RadioCardOption = {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  colorClass?: string;
+};
+
+interface FormFieldRadioCardsProps<T extends FieldValues = any> {
+  control?: Control<T>;
+  name?: Path<T>;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  label?: string;
+  options: RadioCardOption[];
+  disabled?: boolean;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function FormFieldRadioCards<T extends FieldValues = any>({
+  control,
+  name,
+  value: propValue,
+  onValueChange: propOnValueChange,
+  label,
+  options,
+  disabled,
+  className,
+  size = "md",
+}: FormFieldRadioCardsProps<T>) {
+  const baseId = useId();
+
+  const renderContent = (value: string, onChange: (val: string) => void) => (
+    <div className="space-y-3">
+      {label && <Label className="block font-semibold text-base">{label}</Label>}
+      <RadioGroup
+        onValueChange={(val) => {
+          if (val !== null) onChange(val);
+        }}
+        value={value}
+        disabled={disabled}
+        className={cn("grid grid-cols-1 gap-4 md:grid-cols-2", className)}
+      >
+        {options.map((option) => {
+          const id = `${baseId}-${option.value}`;
+          return (
+            <div key={option.value} className="relative">
+              <RadioGroupItem value={option.value} id={id} className="peer sr-only" />
+              <Label
+                htmlFor={id}
+                className={cn(
+                  "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 transition-all hover:border-primary hover:bg-accent peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5",
+                  size === "sm" && "min-h-[70px] gap-1 p-2",
+                  size === "md" && "min-h-[100px] gap-2 p-4",
+                  size === "lg" && "min-h-[120px] gap-4 p-6",
+                  disabled && "cursor-not-allowed opacity-50",
+                )}
+              >
+                {option.icon && (
+                  <div className={cn(option.colorClass, size === "sm" ? "text-lg" : "text-2xl")}>
+                    {option.icon}
+                  </div>
+                )}
+
+                <div className="text-center">
+                  <div className={cn("font-bold", size === "sm" ? "text-xs" : "text-base")}>
+                    {option.label}
+                  </div>
+                  {option.description && (
+                    <div
+                      className={cn(
+                        "font-normal text-muted-foreground leading-tight",
+                        size === "sm" ? "text-xs" : "text-xs",
+                      )}
+                    >
+                      {option.description}
+                    </div>
+                  )}
+                </div>
+
+                <div
+                  className={cn(
+                    "absolute top-2 right-2 h-4 w-4 rounded-full border-2 border-muted transition-all",
+                    value === option.value && "scale-110 border-primary bg-primary",
+                  )}
+                >
+                  {value === option.value && (
+                    <div className="flex h-full w-full items-center justify-center">
+                      <div className="h-1.5 w-1.5 rounded-full bg-white" />
+                    </div>
+                  )}
+                </div>
+              </Label>
+            </div>
+          );
+        })}
+      </RadioGroup>
+    </div>
+  );
+
+  if (control && name) {
+    return (
+      <FormField
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <FormItem className="space-y-3">
+            <FormControl>{renderContent(field.value, field.onChange)}</FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  return renderContent(propValue || "", propOnValueChange || (() => {}));
+}

package/src/components/shared/form/form-field-radio-group.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { FormControl, FormItem, FormLabel, FormMessage } from "@suphark/ui/components/ui/form";
+import { RadioGroup, RadioGroupItem } from "@suphark/ui/components/ui/radio-group";
+import { type Control, Controller, type FieldValues, type Path } from "react-hook-form";
+
+type RadioOption = {
+  value: string;
+  label: string;
+};
+
+interface FormFieldRadioGroupProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  options: RadioOption[];
+  disabled?: boolean;
+}
+
+export function FormFieldRadioGroup<T extends FieldValues>({
+  control,
+  name,
+  label,
+  options,
+  disabled,
+}: FormFieldRadioGroupProps<T>) {
+  return (
+    <FormItem className="space-y-3">
+      <FormLabel>{label}</FormLabel>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <FormControl>
+            <RadioGroup
+              onValueChange={(value) => field.onChange(value === "null" ? null : value === "true")}
+              value={String(field.value)}
+              disabled={disabled}
+              className="flex items-center space-x-4"
+            >
+              {options.map((option) => (
+                <FormItem key={option.value} className="flex items-center space-x-2 space-y-0">
+                  <FormControl>
+                    <RadioGroupItem value={option.value} />
+                  </FormControl>
+                  <FormLabel className="font-normal">{option.label}</FormLabel>
+                </FormItem>
+              ))}
+            </RadioGroup>
+          </FormControl>
+        )}
+      />
+      <FormMessage />
+    </FormItem>
+  );
+}