@suphark/ui 0.1.0

package/src/components/design-system/sections/showcase-primitives.tsx

@@ -0,0 +1,463 @@
+"use client";
+
+import {
+  AddNewButton,
+  CancelButton,
+  ConfirmButton,
+  DeleteButton,
+  PrintButton,
+  SaveButton,
+} from "@suphark/ui/components/shared/button";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@suphark/ui/components/ui/accordion";
+import { Avatar, AvatarFallback, AvatarImage } from "@suphark/ui/components/ui/avatar";
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import { ButtonGroup, ButtonGroupSeparator } from "@suphark/ui/components/ui/button-group";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@suphark/ui/components/ui/collapsible";
+import { Progress } from "@suphark/ui/components/ui/progress";
+import { Separator } from "@suphark/ui/components/ui/separator";
+import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { RefreshButton } from "@suphark/ui/next";
+import {
+  AlertCircle,
+  CheckCircle2,
+  ChevronDown,
+  Clock,
+  Download,
+  FileSpreadsheet,
+  Filter,
+  Package,
+  Plus,
+  Search,
+  Trash2,
+  User,
+  XCircle,
+} from "lucide-react";
+import * as React from "react";
+
+export function ShowcasePrimitives() {
+  const [loadingButtonActive, setLoadingButtonActive] = React.useState(false);
+  const [collapsibleOpen, setCollapsibleOpen] = React.useState(false);
+  const [progressVal, setProgressVal] = React.useState(68);
+
+  const buttonVariants = [
+    { variant: "default", label: "Default / Primary", desc: "Action หลักสูงสุดในแต่ละ Card/Page" },
+    { variant: "secondary", label: "Secondary", desc: "Supporting action หรือปุ่มระดับรอง" },
+    { variant: "outline", label: "Outline", desc: "Action ทั่วไป, Filter, Export, Preview" },
+    { variant: "ghost", label: "Ghost", desc: "Action ในตาราง หรือ Toolbar ที่ต้องการความโปร่งตา" },
+    {
+      variant: "destructive",
+      label: "Destructive",
+      desc: "การลบ, ยกเลิกสิทธิ์, หรือการกระทำที่ย้อนคืนไม่ได้",
+    },
+    { variant: "link", label: "Link", desc: "ข้อความนำทางในเนื้อหาแบบ Inline" },
+  ] as const;
+
+  const buttonSizes = [
+    { size: "xs", label: "xs (Dense Toolbar)" },
+    { size: "sm", label: "sm (Table Action)" },
+    { size: "default", label: "default (Form Main)" },
+    { size: "lg", label: "lg (Prominent CTA)" },
+  ] as const;
+
+  const statusBadges = [
+    {
+      label: "Approved / สมบูรณ์",
+      variant: "default",
+      icon: CheckCircle2,
+      className: "bg-success text-success-foreground border-transparent",
+    },
+    { label: "Under Review / รออนุมัติ", variant: "secondary", icon: Clock, className: "" },
+    { label: "Draft / ร่าง", variant: "outline", icon: Package, className: "" },
+    { label: "Rejected / ไม่อนุมัติ", variant: "destructive", icon: XCircle, className: "" },
+    {
+      label: "Pending Vendor / รอผู้ขาย",
+      variant: "outline",
+      icon: AlertCircle,
+      className: "border-amber-500/40 text-amber-600 bg-amber-50/50 dark:bg-amber-950/20",
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-8">
+      {/* Section Header */}
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">Core Primitives</Badge>
+          <span className="text-xs text-muted-foreground">
+            Buttons, Badges, Cards, Avatars & Structure
+          </span>
+        </div>
+        <h2 className="text-xl font-bold tracking-tight text-foreground">
+          คอมโพเนนต์พื้นฐานและการแสดงผลโครงสร้าง
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          ปุ่มกด, ป้ายสถานะ, การ์ดแสดงผล, และการประกอบคอมโพเนนต์ตามมาตรฐาน shadcn/ui
+        </p>
+      </div>
+
+      {/* Button Matrix */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-base">Button Hierarchy & Variants</CardTitle>
+              <CardDescription className="text-xs">
+                ลำดับความสำคัญของปุ่มและขนาดตามความเหมาะสมของหน้าจอ
+              </CardDescription>
+            </div>
+            <Badge variant="secondary">shadcn/ui Button</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-6">
+          {/* Variants row */}
+          <div className="flex flex-col gap-2">
+            <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              1. Button Variants
+            </h4>
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {buttonVariants.map((item) => (
+                <div
+                  key={item.variant}
+                  className="flex flex-col gap-2 rounded-md border p-3 bg-card"
+                >
+                  <div className="flex items-center justify-between">
+                    <Button variant={item.variant} size="sm">
+                      {item.label}
+                    </Button>
+                    <code className="text-xs text-muted-foreground font-mono">
+                      variant="{item.variant}"
+                    </code>
+                  </div>
+                  <p className="text-xs text-muted-foreground">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Sizes and Icon Buttons */}
+          <div className="grid gap-6 md:grid-cols-2">
+            {/* Sizes */}
+            <div className="flex flex-col gap-3">
+              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                2. Button Sizes
+              </h4>
+              <div className="flex flex-wrap items-center gap-2">
+                {buttonSizes.map((item) => (
+                  <Button key={item.size} size={item.size}>
+                    {item.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Icon buttons & Loading State */}
+            <div className="flex flex-col gap-3">
+              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                3. Icon Buttons & Loading State
+              </h4>
+              <div className="flex flex-wrap items-center gap-2">
+                <Button size="icon" aria-label="เพิ่มข้อมูลใหม่">
+                  <Plus />
+                </Button>
+                <Button size="icon" variant="outline" aria-label="ค้นหาข้อมูล">
+                  <Search />
+                </Button>
+                <Button size="icon" variant="ghost" aria-label="ฟิลเตอร์ข้อมูล">
+                  <Filter />
+                </Button>
+                <Button size="icon" variant="destructive" aria-label="ลบรายการ">
+                  <Trash2 />
+                </Button>
+
+                {/* Loading state button */}
+                <Button
+                  disabled={loadingButtonActive}
+                  onClick={() => {
+                    setLoadingButtonActive(true);
+                    setTimeout(() => setLoadingButtonActive(false), 2000);
+                  }}
+                >
+                  {loadingButtonActive && <Spinner data-icon="inline-start" />}
+                  {loadingButtonActive ? "กำลังบันทึก..." : "คลิกทดสอบ Loading"}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                * shadcn rule: Loading button ใช้{" "}
+                <code>&lt;Spinner data-icon="inline-start" /&gt;</code> ร่วมกับ <code>disabled</code>
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* ButtonGroup */}
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              4. ButtonGroup Primitive
+            </h4>
+            <div className="flex flex-wrap items-center gap-4">
+              <ButtonGroup>
+                <Button variant="outline" size="sm">
+                  Day
+                </Button>
+                <Button variant="outline" size="sm">
+                  Week
+                </Button>
+                <Button variant="outline" size="sm">
+                  Month
+                </Button>
+                <Button variant="outline" size="sm">
+                  Year
+                </Button>
+              </ButtonGroup>
+
+              <ButtonGroup>
+                <Button variant="outline" size="sm">
+                  <FileSpreadsheet data-icon="inline-start" />
+                  Excel
+                </Button>
+                <ButtonGroupSeparator />
+                <Button variant="outline" size="sm">
+                  <Download data-icon="inline-start" />
+                  PDF
+                </Button>
+              </ButtonGroup>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Shared Button Wrappers */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-base">Shared Action Button Wrappers</CardTitle>
+              <CardDescription className="text-xs">
+                คอมโพเนนต์ปุ่มมาตรฐานพร้อมสไตล์และไอคอนจาก <code>src/components/shared/button/*</code>
+              </CardDescription>
+            </div>
+            <Badge variant="outline">Shared Wrappers</Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap items-center gap-3">
+            <AddNewButton label="เพิ่มรายการใหม่" />
+            <SaveButton />
+            <RefreshButton />
+            <PrintButton />
+            <ConfirmButton />
+            <CancelButton />
+            <DeleteButton />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Badges & Status Indicators */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Badge & Status Indicators</CardTitle>
+          <CardDescription className="text-xs">
+            ป้ายสถานะสำหรับ workflow การจัดซื้อและกระบวนการอนุมัติ
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge>Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="outline">Outline</Badge>
+            <Badge variant="destructive">Destructive</Badge>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-wrap items-center gap-3">
+            {statusBadges.map((badge) => {
+              const Icon = badge.icon;
+              return (
+                <Badge
+                  key={badge.label}
+                  variant={badge.variant as any}
+                  className={`gap-1.5 py-1 px-2.5 ${badge.className}`}
+                >
+                  <Icon className="size-3.5" />
+                  {badge.label}
+                </Badge>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Full Card Composition & Avatar */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Full Card Composition */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <Badge variant="outline">RFQ-2026-0082</Badge>
+              <span className="text-xs text-muted-foreground">Updated today</span>
+            </div>
+            <CardTitle className="text-lg">Package Evaluation Summary</CardTitle>
+            <CardDescription className="text-xs">
+              โครงสร้าง Card แบบเต็มรูปแบบ (CardHeader / Title / Description / Content / Footer)
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <p className="text-sm text-muted-foreground">
+              แพ็กเกจจัดซื้อวัสดุงานระบบ MEP อยู่ระหว่างการตรวจสอบคุณสมบัติของผู้รับเหมา 3 ราย
+            </p>
+            <div className="flex items-center justify-between rounded-md bg-muted/50 p-3 text-xs">
+              <span>งบประมาณประมาณการ (Estimated Budget)</span>
+              <span className="font-semibold font-mono">฿ 12,450,000.00</span>
+            </div>
+          </CardContent>
+          <CardFooter className="flex items-center justify-between border-t pt-3">
+            <span className="text-xs text-muted-foreground">Approver: Project Director</span>
+            <Button size="sm">ดูรายละเอียดการประกวดราคา</Button>
+          </CardFooter>
+        </Card>
+
+        {/* Avatars, Progress & Collapsible */}
+        <div className="flex flex-col gap-4">
+          {/* Avatars */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">Avatar & AvatarFallback</CardTitle>
+            </CardHeader>
+            <CardContent className="flex items-center gap-4">
+              <Avatar className="size-10">
+                <AvatarImage
+                  src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80"
+                  alt="User"
+                />
+                <AvatarFallback>SP</AvatarFallback>
+              </Avatar>
+              <Avatar className="size-10">
+                <AvatarFallback className="bg-primary text-primary-foreground font-semibold">
+                  PM
+                </AvatarFallback>
+              </Avatar>
+              <Avatar className="size-10">
+                <AvatarFallback>
+                  <User className="size-4" />
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col">
+                <span className="font-medium text-xs">Procurement Team</span>
+                <span className="text-xs text-muted-foreground">3 reviewers active</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Progress & Spinner */}
+          <Card>
+            <CardHeader className="pb-2">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm">Progress & Spinner</CardTitle>
+                <span className="font-mono text-xs text-muted-foreground">{progressVal}%</span>
+              </div>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3">
+              <Progress value={progressVal} />
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Spinner /> กำลังประมวลผลการคำนวณราคาเฉลี่ย...
+                </div>
+                <Button
+                  size="xs"
+                  variant="outline"
+                  onClick={() => setProgressVal((prev) => (prev >= 100 ? 20 : prev + 20))}
+                >
+                  เพิ่ม Progress
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Accordion & Collapsible */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Accordion */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Accordion Primitive</CardTitle>
+            <CardDescription className="text-xs">สำหรับคำถามที่พบบ่อยหรือเงื่อนไขสัญญา</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Accordion className="w-full">
+              <AccordionItem value="item-1">
+                <AccordionTrigger className="text-xs font-medium">
+                  เกณฑ์การคัดเลือกผู้ชนะการประกวดราคา (Award Criteria)
+                </AccordionTrigger>
+                <AccordionContent className="text-xs text-muted-foreground">
+                  พิจารณาคะแนนเทคนิค 40% และข้อเสนอด้านราคา 60% โดยต้องผ่านเกณฑ์คุณสมบัติต่ำสุดที่กำหนด
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="item-2">
+                <AccordionTrigger className="text-xs font-medium">
+                  หลักประกันสัญญาและการชำระเงินงวดแรก (Payment Terms)
+                </AccordionTrigger>
+                <AccordionContent className="text-xs text-muted-foreground">
+                  วางเงินค้ำประกันธนาคาร 10% ของมูลค่าสัญญา และจ่ายเงินล่วงหน้าเมื่อส่งมอบแผนงานอนุมัติ
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </CardContent>
+        </Card>
+
+        {/* Collapsible */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Collapsible Primitive</CardTitle>
+            <CardDescription className="text-xs">สำหรับกล่องฟิลเตอร์ขั้นสูงหรือข้อมูลทางเลือก</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Collapsible
+              open={collapsibleOpen}
+              onOpenChange={setCollapsibleOpen}
+              className="flex flex-col gap-2"
+            >
+              <div className="flex items-center justify-between rounded-md border p-3 bg-muted/30">
+                <span className="text-xs font-medium">
+                  ตัวกรองขั้นสูง (Advanced Procurement Filters)
+                </span>
+                <CollapsibleTrigger render={<Button variant="ghost" size="xs" />}>
+                  <ChevronDown
+                    className={`size-3.5 transition-transform ${collapsibleOpen ? "rotate-180" : ""}`}
+                  />
+                </CollapsibleTrigger>
+              </div>
+              <CollapsibleContent className="flex flex-col gap-2 rounded-md border border-dashed p-3 text-xs text-muted-foreground">
+                <p>• กรองตามประเภทงบประมาณ: CAPEX / OPEX</p>
+                <p>• กรองตามช่วงระยะเวลาส่งมอบ (Lead Time)</p>
+                <p>• กรองเฉพาะคู่ค้าที่มีใบรับรอง ISO 9001 / ISO 14001</p>
+              </CollapsibleContent>
+            </Collapsible>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/components/shared/__tests__/multi-select-combobox.test.tsx

@@ -0,0 +1,180 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MultiSelectCombobox, type MultiSelectOption } from "../multi-select-combobox";
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+beforeEach(() => {
+  globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+const mockOptions: MultiSelectOption[] = [
+  { label: "หมวดงานโครงสร้าง", value: "structure" },
+  { label: "หมวดงานสถาปัตย์", value: "architecture" },
+  { label: "หมวดงานระบบไฟฟ้า", value: "electrical" },
+  { label: "หมวดงานสุขาภิบาล", value: "sanitary" },
+];
+
+describe("MultiSelectCombobox", () => {
+  it("renders with placeholder when no value is selected", () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectCombobox
+        options={mockOptions}
+        value={[]}
+        onChange={onChange}
+        placeholder="เลือกหมวดหมู่งาน..."
+      />,
+    );
+
+    expect(screen.getByText("เลือกหมวดหมู่งาน...")).toBeInTheDocument();
+  });
+
+  it("renders selected items always at the top of the dropdown list", async () => {
+    const onChange = vi.fn();
+    // 'electrical' is selected
+    render(
+      <MultiSelectCombobox options={mockOptions} value={["electrical"]} onChange={onChange} />,
+    );
+
+    const trigger = screen.getByRole("combobox");
+    fireEvent.click(trigger);
+
+    // Selected item 'electrical' should be rendered first under "รายการที่เลือก"
+    expect(screen.getByText("รายการที่เลือก")).toBeInTheDocument();
+    expect(screen.getByText("ตัวเลือกทั้งหมด")).toBeInTheDocument();
+
+    const optionItems = screen.getAllByRole("option");
+    expect(optionItems[0]).toHaveTextContent("หมวดงานระบบไฟฟ้า");
+    expect(optionItems[1]).toHaveTextContent("หมวดงานโครงสร้าง");
+    expect(optionItems[2]).toHaveTextContent("หมวดงานสถาปัตย์");
+    expect(optionItems[3]).toHaveTextContent("หมวดงานสุขาภิบาล");
+  });
+
+  it("allows selecting an unselected item and calling onChange with added value", () => {
+    const onChange = vi.fn();
+    render(<MultiSelectCombobox options={mockOptions} value={["structure"]} onChange={onChange} />);
+
+    const trigger = screen.getByRole("combobox");
+    fireEvent.click(trigger);
+
+    // Click 'architecture'
+    const archOption = screen.getByText("หมวดงานสถาปัตย์");
+    fireEvent.click(archOption);
+
+    expect(onChange).toHaveBeenCalledWith(["structure", "architecture"]);
+  });
+
+  it("allows unselecting an already selected item from the dropdown", () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectCombobox
+        options={mockOptions}
+        value={["structure", "electrical"]}
+        onChange={onChange}
+      />,
+    );
+
+    const trigger = screen.getByRole("combobox");
+    fireEvent.click(trigger);
+
+    // Click 'structure' option in dropdown to toggle off
+    const optionItems = screen.getAllByRole("option");
+    const structOption = optionItems.find((el) => el.textContent?.includes("หมวดงานโครงสร้าง"));
+    expect(structOption).toBeDefined();
+    fireEvent.click(structOption!);
+
+    expect(onChange).toHaveBeenCalledWith(["electrical"]);
+  });
+
+  it("removes a selected item when clicking the badge remove X button", () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectCombobox
+        options={mockOptions}
+        value={["structure", "sanitary"]}
+        onChange={onChange}
+      />,
+    );
+
+    const removeBtn = screen.getByLabelText("ลบ หมวดงานโครงสร้าง");
+    fireEvent.click(removeBtn);
+
+    expect(onChange).toHaveBeenCalledWith(["sanitary"]);
+  });
+
+  it("clears all selected items when clicking the clear all button", () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectCombobox
+        options={mockOptions}
+        value={["structure", "sanitary"]}
+        onChange={onChange}
+      />,
+    );
+
+    const clearAllBtn = screen.getByLabelText("ล้างทั้งหมด");
+    fireEvent.click(clearAllBtn);
+
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it("limits badges display with maxDisplay and shows overflow badge count", () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectCombobox
+        options={mockOptions}
+        value={["structure", "architecture", "electrical", "sanitary"]}
+        onChange={onChange}
+        maxDisplay={2}
+      />,
+    );
+
+    expect(screen.getByText("หมวดงานโครงสร้าง")).toBeInTheDocument();
+    expect(screen.getByText("หมวดงานสถาปัตย์")).toBeInTheDocument();
+    expect(screen.queryByText("หมวดงานระบบไฟฟ้า")).not.toBeInTheDocument();
+    expect(screen.getByText("+2 รายการ")).toBeInTheDocument();
+  });
+
+  it("filters options via search input preserving selected items on top", async () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectCombobox options={mockOptions} value={["electrical"]} onChange={onChange} />,
+    );
+
+    const trigger = screen.getByRole("combobox");
+    fireEvent.click(trigger);
+
+    const searchInput = screen.getByPlaceholderText("ค้นหา...");
+    fireEvent.change(searchInput, { target: { value: "งาน" } });
+
+    // All matching options still show, with selected 'electrical' on top
+    const options = screen.getAllByRole("option");
+    expect(options[0]).toHaveTextContent("หมวดงานระบบไฟฟ้า");
+  });
+
+  it("supports select all action when showSelectAll is true", () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectCombobox
+        options={mockOptions}
+        value={["structure"]}
+        onChange={onChange}
+        showSelectAll={true}
+      />,
+    );
+
+    const trigger = screen.getByRole("combobox");
+    fireEvent.click(trigger);
+
+    const selectAllBtn = screen.getByText("เลือกทั้งหมด");
+    fireEvent.click(selectAllBtn);
+
+    expect(onChange).toHaveBeenCalledWith(["structure", "architecture", "electrical", "sanitary"]);
+  });
+});

package/src/components/shared/__tests__/name-id-fields.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { toIdentifier } from "../name-id-fields";
+
+describe("toIdentifier", () => {
+  it("kebab: slug จากชื่อองค์กร", () => {
+    expect(toIdentifier("Acme PCL", "kebab")).toBe("acme-pcl");
+    expect(toIdentifier("  Acme  Co., Ltd. ", "kebab")).toBe("acme-co-ltd");
+    expect(toIdentifier("Café Résumé", "kebab")).toBe("cafe-resume");
+  });
+  it("camel: key ของ attribute", () => {
+    expect(toIdentifier("Cost Center", "camel")).toBe("costCenter");
+    expect(toIdentifier("2FA Enabled", "camel")).toBe("x2faEnabled");
+  });
+  it("upper: รหัสตำแหน่ง", () => {
+    expect(toIdentifier("Senior Director", "upper")).toBe("SENIOR_DIRECTOR");
+  });
+  it("ชื่อไทยล้วน → ว่าง (ให้ผู้ใช้ตั้งเอง); ผสม → เอาเฉพาะละติน", () => {
+    expect(toIdentifier("ฝ่ายวิศวกรรม", "kebab")).toBe("");
+    expect(toIdentifier("ฝ่าย IT Support", "kebab")).toBe("it-support");
+  });
+  it("ตัดความยาวแล้วไม่ทิ้งขีดท้าย", () => {
+    expect(toIdentifier("alpha beta gamma", "kebab", 11)).toBe("alpha-beta");
+  });
+});