@suphark/ui 0.1.0

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@suphark/ui/components/ui/tabs";
+import {
+  Boxes,
+  Compass,
+  FileCode2,
+  Layers,
+  LayoutGrid,
+  Palette,
+  ShieldAlert,
+  Zap,
+} from "lucide-react";
+import * as React from "react";
+import { ShowcaseDataDisplay } from "./sections/showcase-data-display";
+import { ShowcaseFeedback } from "./sections/showcase-feedback";
+import { ShowcaseForms } from "./sections/showcase-forms";
+import { ShowcaseFoundations } from "./sections/showcase-foundations";
+import { ShowcaseGuidelinesRecipes } from "./sections/showcase-guidelines-recipes";
+import { ShowcaseOverlaysNavigation } from "./sections/showcase-overlays-navigation";
+import { ShowcaseOverview } from "./sections/showcase-overview";
+import { ShowcasePrimitives } from "./sections/showcase-primitives";
+
+export function DesignSystemShowcase() {
+  const [activeTab, setActiveTab] = React.useState("overview");
+  const [searchQuery, setSearchQuery] = React.useState("");
+
+  const tabItems = [
+    { value: "overview", label: "ภาพรวม (Overview)", icon: LayoutGrid },
+    { value: "foundations", label: "Foundations & Tokens", icon: Palette },
+    { value: "primitives", label: "Core Primitives", icon: Boxes },
+    { value: "forms", label: "Forms & Inputs", icon: Layers },
+    { value: "data-display", label: "Data Display & States", icon: Zap },
+    { value: "overlays", label: "Overlays & Navigation", icon: Compass },
+    { value: "feedback", label: "Feedback & Alerts", icon: ShieldAlert },
+    { value: "guidelines-recipes", label: "Rules & Code Recipes", icon: FileCode2 },
+  ];
+
+  return (
+    <div className="flex flex-col gap-6 p-4 md:p-8 max-w-[1600px] mx-auto min-h-screen">
+      {/* Top Header */}
+      <header className="flex flex-col gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="flex items-center gap-2.5">
+            <div className="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground font-bold shadow-xs">
+              <Boxes className="size-5" />
+            </div>
+            <div>
+              <h1 className="text-xl md:text-2xl font-bold tracking-tight text-foreground">
+                @suphark/ui Design System & Showcase
+              </h1>
+              <p className="text-xs text-muted-foreground">
+                Living Component Showcase, Foundations, Patterns & Web Interface Guidelines
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="secondary" className="text-xs font-normal">
+              shadcn/ui base-nova
+            </Badge>
+            <Badge variant="outline" className="text-xs font-normal">
+              Tailwind v4
+            </Badge>
+            <Badge variant="outline" className="text-xs font-normal">
+              Base UI
+            </Badge>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Tab Navigation */}
+      <Tabs
+        value={activeTab}
+        onValueChange={(val) => {
+          if (val !== null) setActiveTab(val);
+        }}
+        className="flex flex-col gap-6"
+      >
+        <div className="overflow-x-auto pb-1">
+          <TabsList className="h-auto w-full min-w-max justify-start gap-1 p-1 bg-muted/60">
+            {tabItems.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <TabsTrigger
+                  key={tab.value}
+                  value={tab.value}
+                  className="gap-2 py-2 px-3 text-xs data-[state=active]:bg-card data-[state=active]:shadow-xs"
+                >
+                  <Icon className="size-3.5" />
+                  {tab.label}
+                </TabsTrigger>
+              );
+            })}
+          </TabsList>
+        </div>
+
+        {/* Tab Contents */}
+        <TabsContent value="overview" className="mt-0 outline-none">
+          <ShowcaseOverview
+            onSelectTab={setActiveTab}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+          />
+        </TabsContent>
+
+        <TabsContent value="foundations" className="mt-0 outline-none">
+          <ShowcaseFoundations />
+        </TabsContent>
+
+        <TabsContent value="primitives" className="mt-0 outline-none">
+          <ShowcasePrimitives />
+        </TabsContent>
+
+        <TabsContent value="forms" className="mt-0 outline-none">
+          <ShowcaseForms />
+        </TabsContent>
+
+        <TabsContent value="data-display" className="mt-0 outline-none">
+          <ShowcaseDataDisplay />
+        </TabsContent>
+
+        <TabsContent value="overlays" className="mt-0 outline-none">
+          <ShowcaseOverlaysNavigation />
+        </TabsContent>
+
+        <TabsContent value="feedback" className="mt-0 outline-none">
+          <ShowcaseFeedback />
+        </TabsContent>
+
+        <TabsContent value="guidelines-recipes" className="mt-0 outline-none">
+          <ShowcaseGuidelinesRecipes />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/components/design-system/sections/showcase-data-display.tsx

@@ -0,0 +1,454 @@
+"use client";
+
+import { FormattedNumber } from "@suphark/ui/components/shared/number/formatted-number";
+import { PrimarySecondaryText } from "@suphark/ui/components/shared/text/primary-secondary-text";
+import {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+} from "@suphark/ui/components/ui/attachment";
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@suphark/ui/components/ui/empty";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@suphark/ui/components/ui/item";
+import { RelativeDate } from "@suphark/ui/components/ui/relative-date";
+import { Skeleton } from "@suphark/ui/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@suphark/ui/components/ui/table";
+import {
+  AlertTriangle,
+  Download,
+  Eye,
+  FileCheck,
+  FileSpreadsheet,
+  FileText,
+  MoreHorizontal,
+  Package,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
+
+export function ShowcaseDataDisplay() {
+  const [dataState, setDataState] = React.useState<"ready" | "loading" | "empty">("ready");
+
+  const tableRows = [
+    {
+      code: "PKG-2026-041",
+      name: "งานจัดซื้อคอนกรีตผสมเสร็จ ผสมสารกันซึม",
+      category: "Material / Structural",
+      vendor: "Alpha Cement Co., Ltd.",
+      quantity: "1,200 m³",
+      unitRate: 2450.0,
+      totalAmount: 2940000.0,
+      status: "Approved",
+      badgeVariant: "default",
+      date: new Date(Date.now() - 1000 * 60 * 60 * 2),
+    },
+    {
+      code: "PKG-2026-042",
+      name: "งานจัดจ้างติดตั้งระบบแจ้งเหตุเพลิงไหม้ (Fire Alarm)",
+      category: "Subcontract / MEP",
+      vendor: "Beta Fire Engineering Ltd.",
+      quantity: "1 Lump Sum",
+      unitRate: 4850000.0,
+      totalAmount: 4850000.0,
+      status: "Under Review",
+      badgeVariant: "secondary",
+      date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2),
+    },
+    {
+      code: "PKG-2026-043",
+      name: "งานจัดซื้อกระจกลามิเนตกันเสียง Facade",
+      category: "Material / Architectural",
+      vendor: "Gamma Glass Architectural",
+      quantity: "850 m²",
+      unitRate: 3200.0,
+      totalAmount: 2720000.0,
+      status: "Draft",
+      badgeVariant: "outline",
+      date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5),
+    },
+    {
+      code: "PKG-2026-044",
+      name: "งานจัดจ้างเจาะเสาเข็ม Bored Pile Dia 800mm",
+      category: "Subcontract / Foundation",
+      vendor: "Delta Piling Co., Ltd.",
+      quantity: "140 Piles",
+      unitRate: 18500.0,
+      totalAmount: 2590000.0,
+      status: "Approved",
+      badgeVariant: "default",
+      date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 8),
+    },
+  ];
+
+  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">Data Presentation</Badge>
+          <span className="text-xs text-muted-foreground">
+            Tables, Triple States, Items, Attachments & Formatters
+          </span>
+        </div>
+        <h2 className="text-xl font-bold tracking-tight text-foreground">
+          การแสดงผลชุดข้อมูลและสถานะการทำงาน (Data Display & States)
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          ตารางข้อมูลที่มีความหนาแน่นสูง (Data-Dense Tables), การสลับ 3 สถานะ (Ready / Loading / Empty),
+          และตัวจัดรูปแบบตัวเลข-วันที่
+        </p>
+      </div>
+
+      {/* Triple State Demonstration */}
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <CardTitle className="text-base">Data Table & Triple State Lifecycle</CardTitle>
+              <CardDescription className="text-xs">
+                ทดสอบสลับระหว่าง Ready State, Geometry-Accurate Skeleton, และ Actionable Empty State
+              </CardDescription>
+            </div>
+            <div className="flex items-center gap-1 rounded-lg border bg-muted/40 p-1">
+              <Button
+                variant={dataState === "ready" ? "default" : "ghost"}
+                size="xs"
+                onClick={() => setDataState("ready")}
+              >
+                1. Ready Table
+              </Button>
+              <Button
+                variant={dataState === "loading" ? "default" : "ghost"}
+                size="xs"
+                onClick={() => setDataState("loading")}
+              >
+                2. Loading Skeleton
+              </Button>
+              <Button
+                variant={dataState === "empty" ? "default" : "ghost"}
+                size="xs"
+                onClick={() => setDataState("empty")}
+              >
+                3. Empty State
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {dataState === "ready" && (
+            <div className="rounded-md border bg-card overflow-hidden">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-[140px]">รหัส / Package</TableHead>
+                    <TableHead>รายการและหมวดหมู่งาน</TableHead>
+                    <TableHead>คู่ค้าที่เสนอราคา</TableHead>
+                    <TableHead className="text-center">สถานะ</TableHead>
+                    <TableHead className="text-right">จำนวน</TableHead>
+                    <TableHead className="text-right">ราคาต่อหน่วย</TableHead>
+                    <TableHead className="text-right font-semibold">มูลค่ารวม (THB)</TableHead>
+                    <TableHead className="text-center w-[70px]">จัดการ</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {tableRows.map((row) => (
+                    <TableRow key={row.code} className="hover:bg-muted/40 transition-colors">
+                      <TableCell className="font-mono text-xs font-medium text-foreground">
+                        {row.code}
+                      </TableCell>
+                      <TableCell>
+                        <PrimarySecondaryText
+                          primary={row.name}
+                          secondary={row.category}
+                          primaryClassName="font-medium text-xs text-foreground"
+                          secondaryClassName="text-xs text-muted-foreground"
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-col gap-0.5">
+                          <span className="text-xs font-medium">{row.vendor}</span>
+                          <RelativeDate
+                            date={row.date}
+                            className="text-xs text-muted-foreground flex items-center gap-1"
+                          />
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-center">
+                        <Badge
+                          variant={row.badgeVariant as any}
+                          className={
+                            row.status === "Approved" ? "bg-success text-success-foreground" : ""
+                          }
+                        >
+                          {row.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right text-xs font-mono">{row.quantity}</TableCell>
+                      <TableCell className="text-right text-xs font-mono">
+                        <FormattedNumber value={row.unitRate} />
+                      </TableCell>
+                      <TableCell className="text-right text-xs font-mono font-semibold text-foreground">
+                        <FormattedNumber value={row.totalAmount} />
+                      </TableCell>
+                      <TableCell className="text-center">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="size-7"
+                                aria-label="จัดการรายการ"
+                              />
+                            }
+                          >
+                            <MoreHorizontal className="size-4" />
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-44">
+                            <DropdownMenuGroup>
+                              <DropdownMenuLabel className="text-xs">
+                                ตัวเลือกรายการ
+                              </DropdownMenuLabel>
+                              <DropdownMenuItem className="text-xs gap-2">
+                                <Eye className="size-3.5" /> ดูรายละเอียด
+                              </DropdownMenuItem>
+                              <DropdownMenuItem className="text-xs gap-2">
+                                <FileSpreadsheet className="size-3.5" /> ส่งออก BOQ
+                              </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem className="text-xs gap-2 text-destructive">
+                              <Trash2 className="size-3.5" /> ลบแพ็กเกจ
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+
+          {dataState === "loading" && (
+            <div className="flex flex-col gap-3 rounded-md border p-4 bg-card">
+              <div className="flex items-center justify-between">
+                <Skeleton className="h-6 w-48" />
+                <Skeleton className="h-6 w-24" />
+              </div>
+              <Skeleton className="h-8 w-full" />
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          )}
+
+          {dataState === "empty" && (
+            <Empty className="border rounded-lg bg-card py-10">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <Package className="size-6 text-muted-foreground" />
+                </EmptyMedia>
+                <EmptyTitle>ไม่พบรายการแพ็กเกจจัดซื้อ</EmptyTitle>
+                <EmptyDescription>
+                  ยังไม่มีการสร้างแพ็กเกจในงวดนี้ หรือคำค้นหาไม่ตรงกับเงื่อนไขการค้นหา
+                </EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent>
+                <Button className="gap-2" size="sm">
+                  <Plus className="size-4" /> สร้างแพ็กเกจจัดซื้อใหม่
+                </Button>
+              </EmptyContent>
+            </Empty>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Item & Attachment Primitives */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Item Primitive */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Item & ItemGroup Primitive</CardTitle>
+            <CardDescription className="text-xs">
+              คอมโพเนนต์สำหรับแสดงแถวรายการที่มี Media, Badge, และ Inline Actions
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ItemGroup className="gap-2">
+              <Item variant="outline" className="p-3">
+                <ItemMedia variant="icon">
+                  <FileCheck className="size-4 text-primary" />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle className="text-xs">
+                    ใบรับรองคุณภาพ มอก. 20-2558 (Alpha Concrete)
+                  </ItemTitle>
+                  <ItemDescription className="text-xs">
+                    รับรองมาตรฐานคอนกรีตผสมเสร็จความแข็งแรงสูง • มีผลบังคับใช้ถึง 31 ธ.ค. 2570
+                  </ItemDescription>
+                </ItemContent>
+                <ItemActions>
+                  <Button variant="outline" size="xs">
+                    <Download className="size-3" />
+                  </Button>
+                </ItemActions>
+              </Item>
+
+              <Item variant="outline" className="p-3">
+                <ItemMedia variant="icon">
+                  <AlertTriangle className="size-4 text-amber-500" />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle className="text-xs">หนังสือค้ำประกันผลงาน (Performance Bond)</ItemTitle>
+                  <ItemDescription className="text-xs">
+                    อยู่ระหว่างรอหนังสือค้ำประกันฉบับจริงจากธนาคารกสิกรไทย
+                  </ItemDescription>
+                </ItemContent>
+                <ItemActions>
+                  <Badge variant="outline" className="text-xs">
+                    Pending
+                  </Badge>
+                </ItemActions>
+              </Item>
+            </ItemGroup>
+          </CardContent>
+        </Card>
+
+        {/* Attachment Primitive */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Attachment Primitive</CardTitle>
+            <CardDescription className="text-xs">
+              การ์ดไฟล์แนบพร้อมสถานะการอัปโหลด (Done / Uploading / Error)
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <AttachmentGroup>
+              <Attachment state="done" size="default">
+                <AttachmentMedia variant="icon">
+                  <FileSpreadsheet className="size-4 text-emerald-600" />
+                </AttachmentMedia>
+                <AttachmentContent>
+                  <AttachmentTitle>BOQ_Facade_Rev2.xlsx</AttachmentTitle>
+                  <AttachmentDescription>2.4 MB • Alpha Approved</AttachmentDescription>
+                </AttachmentContent>
+                <AttachmentActions>
+                  <AttachmentAction size="icon-xs" aria-label="ดาวน์โหลดไฟล์">
+                    <Download className="size-3" />
+                  </AttachmentAction>
+                </AttachmentActions>
+              </Attachment>
+
+              <Attachment state="done" size="default">
+                <AttachmentMedia variant="icon">
+                  <FileText className="size-4 text-primary" />
+                </AttachmentMedia>
+                <AttachmentContent>
+                  <AttachmentTitle>Tender_Terms_2026.pdf</AttachmentTitle>
+                  <AttachmentDescription>1.1 MB • Signed</AttachmentDescription>
+                </AttachmentContent>
+                <AttachmentActions>
+                  <AttachmentAction size="icon-xs" aria-label="ดาวน์โหลดไฟล์">
+                    <Download className="size-3" />
+                  </AttachmentAction>
+                </AttachmentActions>
+              </Attachment>
+            </AttachmentGroup>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Shared Formatters & Benchmark Analysis */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Value Formatters */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Shared Value Formatters</CardTitle>
+            <CardDescription className="text-xs">
+              Formatters เพื่อป้องกัน SSR Hydration Mismatch และคุม Locale ภาษาไทย
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <div className="flex items-center justify-between rounded-md border p-3 bg-card">
+              <div className="flex flex-col">
+                <span className="text-xs font-semibold">FormattedNumber (Currency)</span>
+                <span className="text-xs text-muted-foreground">ปัดทศนิยม 2 ตำแหน่ง พร้อมลูกน้ำ</span>
+              </div>
+              <span className="font-mono text-sm font-bold text-foreground">
+                ฿ <FormattedNumber value={18450750.5} />
+              </span>
+            </div>
+
+            <div className="flex items-center justify-between rounded-md border p-3 bg-card">
+              <div className="flex flex-col">
+                <span className="text-xs font-semibold">PrimarySecondaryText</span>
+                <span className="text-xs text-muted-foreground">ข้อความหลัก/รองแบบสองชั้น</span>
+              </div>
+              <PrimarySecondaryText
+                primary="นายตัวอย่าง ใจดี"
+                secondary="Chief Procurement Officer"
+                primaryClassName="font-medium text-xs"
+                secondaryClassName="text-xs text-muted-foreground"
+              />
+            </div>
+
+            <div className="flex items-center justify-between rounded-md border p-3 bg-card">
+              <div className="flex flex-col">
+                <span className="text-xs font-semibold">RelativeDate (Thai relative)</span>
+                <span className="text-xs text-muted-foreground">แสดงเวลาแบบสัมพัทธ์ภาษาไทย</span>
+              </div>
+              <RelativeDate date={new Date(Date.now() - 1000 * 60 * 30)} />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}