@suphark/ui 0.1.0

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

@@ -0,0 +1,368 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { Kbd } from "@suphark/ui/components/ui/kbd";
+import {
+  Accessibility,
+  ArrowRight,
+  Boxes,
+  CheckCircle2,
+  Compass,
+  FileCode2,
+  Layers,
+  Palette,
+  RefreshCw,
+  Search,
+  Sparkles,
+  Zap,
+} from "lucide-react";
+
+interface ShowcaseOverviewProps {
+  onSelectTab: (tab: string) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export function ShowcaseOverview({
+  onSelectTab,
+  searchQuery,
+  onSearchChange,
+}: ShowcaseOverviewProps) {
+  const pillars = [
+    {
+      id: "guidelines",
+      tab: "guidelines-recipes",
+      title: "1. Web Interface Guidelines",
+      subtitle: "Mandatory Baseline Standard",
+      icon: Accessibility,
+      badge: "Baseline",
+      description:
+        "มาตรฐานการเข้าถึง (A11y), Keyboard Navigation, Focus Rings, Accessible Labels, Error Recovery และ Motion Accessibility ตาม Vercel Web Interface Guidelines",
+      highlights: [
+        "Visible focus rings (focus-visible:ring-2)",
+        "Icon buttons have aria-label / sr-only",
+        "Dialogs/Sheets require accessible Title & Description",
+        "Clear error guidance without user-blame",
+      ],
+    },
+    {
+      id: "shadcn",
+      tab: "primitives",
+      title: "2. shadcn/ui Primitives",
+      subtitle: "Source-Owned UI Architecture",
+      icon: Boxes,
+      badge: "60+ Primitives",
+      description:
+        "คอมโพเนนต์พื้นฐานที่ครอบคลุมทั้ง UI และ Base UI ผสมผสานผ่าน Tailwind v4 Semantic Tokens และ Composition-first pattern",
+      highlights: [
+        "FieldGroup + Field for unified forms",
+        "InputGroup for icons & embedded actions",
+        "Button loading with Spinner + data-icon",
+        "Items strictly within their Group containers",
+      ],
+    },
+    {
+      id: "frontend-design",
+      tab: "guidelines-recipes",
+      title: "3. Frontend Design & UX Voice",
+      subtitle: "Intentionality & Copywriting",
+      icon: Sparkles,
+      badge: "User Voice",
+      description:
+        "การออกแบบที่เจาะจงกับแอปงานภายในของ Suphark การจัดลำดับสายตา ความกระชับสแกนง่าย และภาษา UX ที่เน้นสิ่งที่ผู้ใช้ควบคุมได้ (Active Voice)",
+      highlights: [
+        "Dense & scannable operational density",
+        "Active voice actions ('Save changes', not 'Submit')",
+        "Action-to-toast consistency ('Publish' -> 'Published')",
+        "Empty states as invitations to act",
+      ],
+    },
+    {
+      id: "redesign",
+      tab: "guidelines-recipes",
+      title: "4. Redesign Workflow",
+      subtitle: "Behavior-Preserving Evolution",
+      icon: RefreshCw,
+      badge: "Safety",
+      description:
+        "ระเบียบการปรับปรุง UI โดยคงความสามารถเดิม 100% เช่น RBAC Permissions, Data Contracts, Routes, Server Actions, Filters, และ Pagination",
+      highlights: [
+        "Preserve server action guards & auth contracts",
+        "Preserve URL search params & filter states",
+        "Preserve loading skeletons & empty fallbacks",
+        "Zero-regression verification plan",
+      ],
+    },
+  ];
+
+  const quickLinks = [
+    { name: "Semantic Color Tokens", tab: "foundations", icon: Palette },
+    { name: "Buttons & Action Hierarchy", tab: "primitives", icon: Zap },
+    { name: "Field-based Forms & InputGroup", tab: "forms", icon: Layers },
+    { name: "Data Tables & States", tab: "data-display", icon: Boxes },
+    { name: "Overlays (Dialog, Sheet, Drawer)", tab: "overlays", icon: Compass },
+    { name: "Domain Patterns & Code Recipes", tab: "domain-patterns", icon: FileCode2 },
+  ];
+
+  return (
+    <div className="flex flex-col gap-8">
+      {/* Hero Banner */}
+      <section className="relative overflow-hidden rounded-2xl border bg-gradient-to-br from-card via-card to-muted/40 p-6 md:p-8 shadow-xs">
+        <div className="flex flex-col gap-4 max-w-4xl">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="default" className="gap-1">
+              <Sparkles className="size-3" /> @suphark/ui Design System
+            </Badge>
+            <Badge variant="secondary">Next.js App Router</Badge>
+            <Badge variant="outline">Tailwind v4</Badge>
+            <Badge variant="outline">shadcn/ui</Badge>
+            <Badge variant="outline">Web Interface Guidelines</Badge>
+          </div>
+
+          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground">
+            ภาพรวมระบบการออกแบบและมาตรฐาน UI ของทุกแอป
+          </h2>
+
+          <p className="text-sm md:text-base text-muted-foreground leading-relaxed">
+            ศูนย์กลางมาตรฐานการออกแบบและการประกอบคอมโพเนนต์สำหรับทุกแอปของ Suphark (Pi Auth, DueBell, Pi
+            PDF, supplychain) เน้นความกระชับ สแกนง่าย รองรับงานประจำวันที่มีข้อมูลหนาแน่น (Operational Density)
+            ผสาน 4 เสาหลัก: <strong>Web Interface Guidelines</strong>,{" "}
+            <strong>shadcn/ui Primitives</strong>,<strong>Frontend Design & UX Copy</strong>, และ{" "}
+            <strong>Redesign Safety Workflow</strong>
+          </p>
+
+          <div className="flex flex-wrap items-center gap-3 pt-2">
+            <Button onClick={() => onSelectTab("primitives")} className="gap-2">
+              <Boxes className="size-4" /> สำรวจคอมโพเนนต์ทั้งหมด
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => onSelectTab("domain-patterns")}
+              className="gap-2"
+            >
+              <Compass className="size-4" /> ตัวอย่างหน้าจอ
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => onSelectTab("guidelines-recipes")}
+              className="gap-2"
+            >
+              <FileCode2 className="size-4" /> Code Recipes & Agent Rules
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Global Quick Search */}
+      <section className="flex flex-col gap-3">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div>
+            <h3 className="text-lg font-semibold text-foreground">ค้นหาคอมโพเนนต์และคู่มือ</h3>
+            <p className="text-xs text-muted-foreground">
+              พิมพ์ชื่อคอมโพเนนต์, Token, Pattern หรือ Rule ที่ต้องการค้นหา
+            </p>
+          </div>
+          <div className="w-full sm:w-80">
+            <InputGroup>
+              <InputGroupAddon>
+                <Search className="size-4 text-muted-foreground" />
+              </InputGroupAddon>
+              <InputGroupInput
+                placeholder="เช่น button, field, dialog, token..."
+                value={searchQuery}
+                onChange={(e) => onSearchChange(e.target.value)}
+              />
+            </InputGroup>
+          </div>
+        </div>
+
+        {/* Quick jump tags */}
+        <div className="flex flex-wrap items-center gap-2 pt-1">
+          <span className="text-xs text-muted-foreground flex items-center gap-1">
+            <Kbd>Jump to</Kbd>
+          </span>
+          {quickLinks.map((link) => (
+            <button
+              key={link.name}
+              type="button"
+              onClick={() => onSelectTab(link.tab)}
+              className="inline-flex items-center gap-1.5 rounded-md border bg-card px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer"
+            >
+              <link.icon className="size-3" />
+              {link.name}
+            </button>
+          ))}
+        </div>
+      </section>
+
+      {/* The 4 Pillars */}
+      <section className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1">
+          <h3 className="text-lg font-semibold text-foreground">
+            สถาปัตยกรรม 4 เสาหลัก (The 4 UI Pillars)
+          </h3>
+          <p className="text-xs text-muted-foreground">
+            ทุกหน้าจอและฟีเจอร์ใน codebase นี้ต้องสอดคล้องกับหลักการทั้ง 4 ด้านอย่างเคร่งครัด
+          </p>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          {pillars.map((pillar) => {
+            const Icon = pillar.icon;
+            return (
+              <Card
+                key={pillar.id}
+                className="flex flex-col justify-between border transition-all hover:border-primary/50 hover:shadow-xs"
+              >
+                <CardHeader className="pb-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                      <Icon className="size-5" />
+                    </div>
+                    <Badge variant="secondary" className="text-xs font-normal">
+                      {pillar.badge}
+                    </Badge>
+                  </div>
+                  <CardTitle className="text-base font-semibold pt-2">{pillar.title}</CardTitle>
+                  <CardDescription className="text-xs">{pillar.subtitle}</CardDescription>
+                </CardHeader>
+
+                <CardContent className="flex flex-col gap-3 pb-3">
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    {pillar.description}
+                  </p>
+                  <div className="flex flex-col gap-1.5 rounded-md bg-muted/50 p-2.5">
+                    {pillar.highlights.map((item) => (
+                      <div key={item} className="flex items-start gap-1.5 text-xs">
+                        <CheckCircle2 className="size-3.5 text-primary mt-0.5 shrink-0" />
+                        <span className="text-foreground/90">{item}</span>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+
+                <CardFooter className="pt-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-between text-xs"
+                    onClick={() => onSelectTab(pillar.tab)}
+                  >
+                    ดูรายละเอียด
+                    <ArrowRight className="size-3.5" />
+                  </Button>
+                </CardFooter>
+              </Card>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Operational Principles */}
+      <section className="rounded-xl border bg-card p-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <h3 className="text-base font-semibold">กติกางานออกแบบระดับระบบ (System Design Rules)</h3>
+            <p className="text-xs text-muted-foreground">
+              ข้อควรปฏิบัติและข้อห้ามสำหรับการสร้างและแก้ไข UI ใน codebase นี้
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="flex flex-col gap-2 rounded-lg border border-primary/20 bg-primary/5 p-4">
+              <h4 className="font-semibold text-xs text-primary uppercase tracking-wider">
+                ✓ สิ่งที่ต้องทำ (Do)
+              </h4>
+              <ul className="flex flex-col gap-2 text-xs text-muted-foreground">
+                <li className="flex items-start gap-2">
+                  <CheckCircle2 className="size-3.5 text-primary mt-0.5 shrink-0" />
+                  <span>
+                    ใช้ <code>FieldGroup</code> และ <code>Field</code> เป็นโครงสร้างฟอร์มเสมอ
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle2 className="size-3.5 text-primary mt-0.5 shrink-0" />
+                  <span>
+                    ใช้ <code>flex flex-col gap-*</code> หรือ grid gap แทน <code>space-x/y</code>
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle2 className="size-3.5 text-primary mt-0.5 shrink-0" />
+                  <span>
+                    ใส่ <code>aria-label</code> ใน icon-only button ทุกตัวโดยไม่มีข้อยกเว้น
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle2 className="size-3.5 text-primary mt-0.5 shrink-0" />
+                  <span>
+                    ใช้ <code>size-*</code> เมื่อความกว้างและความสูงเท่ากัน (เช่น Avatar, Icon box)
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle2 className="size-3.5 text-primary mt-0.5 shrink-0" />
+                  <span>
+                    เตรียม 3 สถานะข้อมูลเสมอ: Ready, Loading Skeleton, และ Empty State ที่มี CTA
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="flex flex-col gap-2 rounded-lg border border-destructive/20 bg-destructive/5 p-4">
+              <h4 className="font-semibold text-xs text-destructive uppercase tracking-wider">
+                ✕ สิ่งที่ต้องหลีกเลี่ยง (Avoid)
+              </h4>
+              <ul className="flex flex-col gap-2 text-xs text-muted-foreground">
+                <li className="flex items-start gap-2">
+                  <span className="text-destructive font-bold shrink-0">•</span>
+                  <span>
+                    ห้ามใช้ raw color utility เช่น <code>bg-blue-500</code> หรือ{" "}
+                    <code>text-red-500</code> ในระบบงานจริง
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-destructive font-bold shrink-0">•</span>
+                  <span>
+                    ห้ามกำหนด arbitrary pixel font sizes เช่น <code>text-[10px]</code> หรือ{" "}
+                    <code>text-[9px]</code>
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-destructive font-bold shrink-0">•</span>
+                  <span>
+                    ห้ามใส่ manual <code>z-index</code> บน overlay (Dialog, Sheet, Popover จัดการเอง)
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-destructive font-bold shrink-0">•</span>
+                  <span>
+                    ห้ามแก้ไขไฟล์ใน <code>src/components/ui/*</code> โดยตรงโดยไม่ได้รับอนุญาต
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-destructive font-bold shrink-0">•</span>
+                  <span>
+                    ห้ามสร้าง Dialog หรือ Sheet โดยไม่มี Title และ Description สำหรับ Screen Reader
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}