@suphark/ui 0.1.0

package/src/components/shared/button/submit-button.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import { Plus, Save } from "lucide-react";
+import type * as React from "react";
+
+interface SubmitButtonProps extends ActionButtonProps {
+  /**
+   * Toggles the button's default text/icon between Create and Edit modes.
+   * Defaults to 'false' (Create mode).
+   */
+  isEditing?: boolean;
+  /**
+   * (Optional) Custom text to display when isEditing is false.
+   * Defaults to 'Create New'.
+   */
+  createText?: React.ReactNode;
+  /**
+   * (Optional) Custom text to display when isEditing is true.
+   * Defaults to 'Save'.
+   */
+  editText?: React.ReactNode;
+}
+
+/**
+ * A reusable submit button component for forms.
+ *
+ * This component wraps `ActionButton` and sets `type="submit"` by default.
+ * It's designed to be used within a form and receive its loading state
+ * from the form's `isSubmitting` state.
+ *
+ * @param {boolean} [isLoading] - (Required) Pass the form's `isSubmitting` state here.
+ * @param {boolean} [isEditing] - (Optional) Toggles between Create (false) and Edit (true) modes.
+ * @param {React.ReactNode} [children] - (Optional) Explicitly sets the button text, overriding defaults.
+ * @param {React.ReactNode} [createText] - (Optional) Default text for 'Create' mode if children is not set.
+ * @param {React.ReactNode} [editText] - (Optional) Default text for 'Edit' mode if children is not set.
+ * @param {React.ReactElement} [icon] - (Optional) Overrides the default icon.
+ */
+export function SubmitButton({
+  children,
+  icon,
+  isLoading,
+  isEditing = false,
+  createText = "Create New",
+  editText = "Save",
+  ...props
+}: SubmitButtonProps) {
+  const buttonText = children ?? (isEditing ? editText : createText);
+  const buttonIcon = icon ?? (isEditing ? <Save /> : <Plus />);
+  return (
+    <ActionButton type="submit" isLoading={isLoading} icon={buttonIcon} {...props}>
+      {buttonText}
+    </ActionButton>
+  );
+}

package/src/components/shared/client-redirect.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function ClientRedirect({ to }: { to: string }) {
+  useEffect(() => {
+    window.location.replace(to);
+  }, [to]);
+
+  return null;
+}

package/src/components/shared/combobox.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@suphark/ui/components/ui/command";
+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";
+
+interface ComboboxProps {
+  options: { label: string; value: string }[];
+  value: string;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  ariaLabel?: string;
+  className?: string;
+  disabled?: boolean;
+  /**
+   * ขึ้นบรรทัดใหม่เมื่อข้อความยาวเกินช่อง แทนการตัดเป็น "..."
+   *
+   * ต้องจัดการในตัวนี้เอง ส่ง className จากข้างนอกอย่างเดียวไม่พอ เพราะข้อความถูกห่อด้วย
+   * span ที่ตั้ง truncate ไว้ ซึ่งบังคับไม่ให้ขึ้นบรรทัดใหม่เสมอ
+   */
+  wrapText?: boolean;
+}
+
+export function Combobox({
+  options,
+  value,
+  onSelect,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results found.",
+  ariaLabel,
+  className,
+  disabled,
+  wrapText = false,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-label={
+              ariaLabel ??
+              (value ? options.find((option) => option.value === value)?.label : placeholder)
+            }
+            aria-expanded={open}
+            className={cn(
+              "w-full justify-between font-normal",
+              !value && "text-muted-foreground",
+              wrapText && "h-auto min-h-9 whitespace-normal py-2 text-left",
+              className,
+            )}
+            disabled={disabled}
+          />
+        }
+      >
+        <span
+          className={cn("min-w-0", wrapText ? "wrap-break-word whitespace-normal" : "truncate")}
+        >
+          {value ? options.find((option) => option.value === value)?.label : placeholder}
+        </span>
+        <ChevronsUpDown
+          className={cn(
+            "ml-2 h-4 w-4 shrink-0 opacity-50 print:hidden",
+            wrapText && "self-start",
+            disabled && "hidden",
+          )}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="w-[--anchor-width] p-0">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    onSelect(option.value === value ? "" : option.value);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+/**
+ * รายการแถว (แทนตารางหนัก ๆ): แต่ละแถวมีชื่อหลัก, บรรทัดรอง, ป้ายสถานะ และเมนู "…"
+ * อ่านง่ายบนมือถือกว่าตาราง และบังคับให้แต่ละแถวมีข้อมูลเท่าที่จำเป็น
+ */
+export function DataList({
+  children,
+  className,
+  empty,
+  count,
+}: {
+  children: ReactNode;
+  className?: string;
+  /** แสดงเมื่อ count === 0 */
+  empty?: ReactNode;
+  count?: number;
+}) {
+  if (count === 0 && empty) return <>{empty}</>;
+  return (
+    <ul className={cn("divide-y rounded-xl border bg-card text-card-foreground", className)}>
+      {children}
+    </ul>
+  );
+}
+
+export function DataRow({
+  leading,
+  title,
+  subtitle,
+  meta,
+  badges,
+  actions,
+  className,
+}: {
+  /** avatar / ไอคอน */
+  leading?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** ข้อมูลเสริมด้านขวา (เช่น วันที่, path) */
+  meta?: ReactNode;
+  badges?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <li className={cn("flex items-center gap-3 px-4 py-3", className)}>
+      {leading}
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          <span className="truncate text-sm font-medium">{title}</span>
+          {badges}
+        </div>
+        {subtitle && <span className="truncate text-xs text-muted-foreground">{subtitle}</span>}
+      </div>
+      {meta && (
+        <div className="hidden shrink-0 text-right text-xs text-muted-foreground sm:block">
+          {meta}
+        </div>
+      )}
+      {actions && <div className="shrink-0">{actions}</div>}
+    </li>
+  );
+}

package/src/components/shared/date/date-range-picker.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import { Calendar } from "@suphark/ui/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { Separator } from "@suphark/ui/components/ui/separator";
+import { cn } from "@suphark/ui/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+interface DateRangePickerProps {
+  value: DateRange | undefined;
+  onValueChange: (range: DateRange | undefined) => void;
+  placeholder?: string;
+  className?: string;
+  triggerClassName?: string;
+  align?: "start" | "end" | "center";
+  showClear?: boolean;
+  title?: string;
+  variant?: "default" | "outline" | "ghost";
+}
+
+export function DateRangePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date range",
+  className,
+  triggerClassName,
+  align = "start",
+  showClear = true,
+  title,
+  variant = "outline",
+}: DateRangePickerProps) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <Popover>
+        <PopoverTrigger
+          render={
+            <Button
+              variant={variant}
+              size="sm"
+              className={cn(
+                "h-8 justify-start text-left font-normal",
+                title && "border-dashed",
+                value?.from && title && "border-solid bg-accent",
+                !value && "text-muted-foreground",
+                triggerClassName,
+              )}
+            />
+          }
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {title ||
+            (value?.from ? (
+              value.to ? (
+                <>
+                  {format(value.from, "PP")} - {format(value.to, "PP")}
+                </>
+              ) : (
+                format(value.from, "PP")
+              )
+            ) : (
+              <span>{placeholder}</span>
+            ))}
+          {title && value?.from && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                1
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                  {format(value.from, "PP")}
+                  {value.to && <> - {format(value.to, "PP")}</>}
+                </Badge>
+              </div>
+            </>
+          )}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align={align}>
+          <Calendar
+            autoFocus
+            mode="range"
+            defaultMonth={value?.from}
+            selected={value}
+            onSelect={onValueChange}
+            numberOfMonths={2}
+          />
+          {showClear && value?.from && (
+            <div className="border-t p-3">
+              <Button
+                variant="ghost"
+                className="w-full font-normal text-xs"
+                onClick={() => onValueChange(undefined)}
+              >
+                Clear selection
+              </Button>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+/** รายการ label/value สองคอลัมน์ */
+export function DescriptionList({
+  items,
+  className,
+}: {
+  items: Array<[ReactNode, ReactNode]>;
+  className?: string;
+}) {
+  return (
+    <dl
+      className={cn(
+        "grid grid-cols-[minmax(120px,max-content)_1fr] gap-x-4 gap-y-1.5 text-sm",
+        className,
+      )}
+    >
+      {items.map(([k, v], i) => (
+        <div key={typeof k === "string" ? k : i} className="contents">
+          <dt className="text-muted-foreground">{k}</dt>
+          <dd className="min-w-0 break-words">{v}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/components/shared/empty-row.tsx

@@ -0,0 +1,13 @@
+import { TableCell, TableRow } from "@suphark/ui/components/ui/table";
+import type { ReactNode } from "react";
+
+/** แถว "ยังไม่มีข้อมูล" ของตาราง */
+export function EmptyRow({ colSpan, children }: { colSpan: number; children: ReactNode }) {
+  return (
+    <TableRow className="hover:bg-transparent">
+      <TableCell colSpan={colSpan} className="py-6 text-center text-muted-foreground">
+        {children}
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/components/shared/empty-state.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+/** หน้าว่าง = คำเชิญให้ทำขั้นถัดไป: ไอคอน, ประโยคเดียวว่าคืออะไร, ปุ่มเดียวว่าทำอะไรต่อ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed px-6 py-12 text-center",
+        className,
+      )}
+    >
+      {icon && <div className="mb-1 text-muted-foreground [&_svg]:size-8">{icon}</div>}
+      <p className="text-sm font-medium">{title}</p>
+      {description && <p className="max-w-sm text-sm text-muted-foreground">{description}</p>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+}

package/src/components/shared/env-snippet.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import { useUiText } from "./ui-text";
+
+/**
+ * บล็อก .env สำเร็จรูป: คัดลอกทั้งก้อนปุ่มเดียว (Clerk-style "quick copy")
+ * ค่าที่เป็น secret แสดงจริง (หน้าที่เรียกต้องเป็นหน้า "แสดงครั้งเดียว" อยู่แล้ว)
+ */
+export function EnvSnippet({
+  title = ".env.local",
+  lines,
+  copyLabel,
+}: {
+  title?: string;
+  /** [key, value] ตามลำดับ; value ว่าง = ให้ผู้ใช้เติมเอง */
+  lines: Array<[key: string, value: string]>;
+  copyLabel?: string;
+}) {
+  const text = useUiText();
+  const [copied, setCopied] = useState(false);
+  const content = lines.map(([k, v]) => `${k}=${v}`).join("\n");
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(`${content}\n`);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // clipboard ไม่ได้ (http/permission) — ผู้ใช้ยังเลือกข้อความคัดลอกเองได้
+    }
+  }
+  return (
+    <div className="overflow-hidden rounded-lg border bg-card">
+      <div className="flex items-center justify-between gap-2 border-b bg-muted px-3 py-1.5">
+        <span className="font-mono text-xs text-muted-foreground">{title}</span>
+        <Button type="button" variant="outline" size="xs" onClick={copy}>
+          {copied ? <CheckIcon /> : <CopyIcon />}
+          {copied ? text.copied : (copyLabel ?? text.copy)}
+        </Button>
+      </div>
+      <pre className="overflow-x-auto px-3 py-2.5 font-mono text-xs leading-6">
+        {lines.map(([k, v]) => (
+          <div key={k}>
+            <span className="text-muted-foreground">{k}=</span>
+            <span className="break-all">{v}</span>
+          </div>
+        ))}
+      </pre>
+    </div>
+  );
+}
+
+/** สุ่ม secret สำหรับ session cookie ของแอป (base64url 48 ไบต์ ≥ 32 ตัวอักษรตามที่ SDK ต้องการ) */
+export function randomSecret(bytes = 48): string {
+  const buf = new Uint8Array(bytes);
+  crypto.getRandomValues(buf);
+  let s = "";
+  for (const b of buf) s += String.fromCharCode(b);
+  return btoa(s).replaceAll("+", "-").replaceAll("/", "_").replace(/=+$/, "");
+}

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

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SimpleSelect, type SimpleSelectGroup, type SimpleSelectOption } from "../simple-select";
+
+describe("SimpleSelect Component", () => {
+  it("renders flat options and displays label instead of raw ID", () => {
+    const options: SimpleSelectOption[] = [
+      { value: "none", label: "ไม่ระบุ" },
+      { value: "550e8400-e29b-41d4-a716-446655440000", label: "โครงการ A" },
+      { value: "660e8400-e29b-41d4-a716-446655440001", label: "โครงการ B" },
+    ];
+
+    render(
+      <SimpleSelect
+        value="550e8400-e29b-41d4-a716-446655440000"
+        options={options}
+        onValueChange={vi.fn()}
+      />,
+    );
+
+    // Should display the label "โครงการ A"
+    expect(screen.getByText("โครงการ A")).toBeInTheDocument();
+    // Should NOT display the raw UUID
+    expect(screen.queryByText("550e8400-e29b-41d4-a716-446655440000")).not.toBeInTheDocument();
+  });
+
+  it("renders grouped options and displays label for selected item", () => {
+    const groups: SimpleSelectGroup[] = [
+      {
+        label: "กลุ่มที่ 1",
+        options: [
+          { value: "step-1::field-1", label: "เลขที่เอกสาร (Text)" },
+          { value: "step-1::field-2", label: "คู่ค้า (Select)" },
+        ],
+      },
+      {
+        label: "กลุ่มที่ 2",
+        options: [{ value: "step-2::field-3", label: "ยอดเงิน (Number)" }],
+      },
+    ];
+
+    render(<SimpleSelect value="step-1::field-2" options={groups} onValueChange={vi.fn()} />);
+
+    expect(screen.getByText("คู่ค้า (Select)")).toBeInTheDocument();
+    expect(screen.queryByText("step-1::field-2")).not.toBeInTheDocument();
+  });
+
+  it("uses fallbackLabel when the selected value is not in options", () => {
+    const options: SimpleSelectOption[] = [{ value: "opt-1", label: "ตัวเลือก 1" }];
+
+    render(
+      <SimpleSelect
+        value="orphaned-step-id::field-abc"
+        options={options}
+        fallbackLabel={(val) => `ค้นพบจากประวัติ: ${val.split("::").pop()}`}
+        onValueChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("ค้นพบจากประวัติ: field-abc")).toBeInTheDocument();
+  });
+
+  it("renders placeholder when value is empty or unset", () => {
+    const options: SimpleSelectOption[] = [{ value: "opt-1", label: "ตัวเลือก 1" }];
+
+    render(
+      <SimpleSelect value="" options={options} placeholder="กรุณาเลือก..." onValueChange={vi.fn()} />,
+    );
+
+    expect(screen.getByText("กรุณาเลือก...")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,93 @@
+"use client";
+
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@suphark/ui/components/ui/form";
+import { Switch } from "@suphark/ui/components/ui/switch";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+import type { Control, FieldValues, Path } from "react-hook-form";
+
+type FormFieldBooleanProps<T extends FieldValues> = {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+} & (
+  | {
+      variant?: "checkbox"; // Default
+      checkboxProps?: ComponentProps<typeof Checkbox>;
+      className?: string; // Container className
+    }
+  | {
+      variant: "switch";
+      switchProps?: ComponentProps<typeof Switch>;
+      className?: string; // Container className
+    }
+);
+
+export function FormFieldBoolean<T extends FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  disabled,
+  className,
+  ...props
+}: FormFieldBooleanProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => {
+        if (props.variant === "switch") {
+          return (
+            <FormItem
+              className={cn(
+                "flex flex-row items-center justify-between rounded-lg border p-4",
+                className,
+              )}
+            >
+              <div className="space-y-0.5">
+                <FormLabel className="text-base">{label}</FormLabel>
+                {description && <FormDescription>{description}</FormDescription>}
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                  disabled={disabled}
+                  {...props.switchProps}
+                />
+              </FormControl>
+            </FormItem>
+          );
+        }
+
+        // Default: Checkbox
+        return (
+          <FormItem className={cn("flex flex-row items-start space-x-3 space-y-0", className)}>
+            <FormControl>
+              <Checkbox
+                checked={field.value}
+                onCheckedChange={field.onChange}
+                disabled={disabled}
+                {...props.checkboxProps}
+              />
+            </FormControl>
+            <div className="space-y-1 leading-none">
+              <FormLabel>{label}</FormLabel>
+              {description && <FormDescription>{description}</FormDescription>}
+            </div>
+          </FormItem>
+        );
+      }}
+    />
+  );
+}