@suphark/ui 0.1.0

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

@@ -0,0 +1,384 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import { Kbd, KbdGroup } from "@suphark/ui/components/ui/kbd";
+import { AlignLeft, Check, Copy, Info, Palette, Type } from "lucide-react";
+import * as React from "react";
+
+export function ShowcaseFoundations() {
+  const [copiedToken, setCopiedToken] = React.useState<string | null>(null);
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedToken(text);
+    setTimeout(() => setCopiedToken(null), 2000);
+  };
+
+  const coreTokens = [
+    {
+      name: "Background",
+      class: "bg-background text-foreground border",
+      token: "var(--background)",
+      tailwind: "bg-background / text-foreground",
+      usage: "Canvas หลักของหน้าเว็บ และสีข้อความตั้งต้น",
+    },
+    {
+      name: "Card",
+      class: "bg-card text-card-foreground border",
+      token: "var(--card)",
+      tailwind: "bg-card / text-card-foreground",
+      usage: "พื้นผิวของ Panels, Table Containers, และ Modal Surfaces",
+    },
+    {
+      name: "Primary",
+      class: "bg-primary text-primary-foreground",
+      token: "var(--primary)",
+      tailwind: "bg-primary / text-primary-foreground",
+      usage: "Primary actions, ปุ่มเน้นหลัก, Active Tab, และ Brand Accent",
+    },
+    {
+      name: "Secondary",
+      class: "bg-secondary text-secondary-foreground border",
+      token: "var(--secondary)",
+      tailwind: "bg-secondary / text-secondary-foreground",
+      usage: "Supporting actions, Secondary badges, และ Subtle highlight",
+    },
+    {
+      name: "Muted",
+      class: "bg-muted text-muted-foreground border",
+      token: "var(--muted)",
+      tailwind: "bg-muted / text-muted-foreground",
+      usage: "Skeleton placeholders, Subdued sections, Helper text",
+    },
+    {
+      name: "Destructive",
+      class: "bg-destructive text-white",
+      token: "var(--destructive)",
+      tailwind: "bg-destructive / text-destructive",
+      usage: "Irreversible actions, Delete confirmation, Error callouts",
+    },
+    {
+      name: "Success",
+      class: "bg-success text-success-foreground",
+      token: "var(--success)",
+      tailwind: "bg-success / text-success-foreground",
+      usage: "Approved status, Success badges, Positive rate variance",
+    },
+    {
+      name: "Border / Input / Ring",
+      class: "bg-card text-foreground border-2 border-ring",
+      token: "var(--border) / var(--ring)",
+      tailwind: "border-border / border-input / ring-ring",
+      usage: "เส้นขอบ component, input outline, และ accessible focus rings",
+    },
+  ];
+
+  const sidebarTokens = [
+    {
+      name: "Sidebar Background",
+      class: "bg-sidebar text-sidebar-foreground border",
+      token: "var(--sidebar)",
+    },
+    {
+      name: "Sidebar Primary",
+      class: "bg-sidebar-primary text-sidebar-primary-foreground",
+      token: "var(--sidebar-primary)",
+    },
+    {
+      name: "Sidebar Accent",
+      class: "bg-sidebar-accent text-sidebar-accent-foreground border",
+      token: "var(--sidebar-accent)",
+    },
+    {
+      name: "Sidebar Border",
+      class: "bg-sidebar-border h-4 w-full rounded",
+      token: "var(--sidebar-border)",
+    },
+  ];
+
+  const chartTokens = [
+    { name: "Chart 1 (Orange/Amber)", class: "bg-chart-1 text-white", token: "var(--chart-1)" },
+    { name: "Chart 2 (Teal/Cyan)", class: "bg-chart-2 text-white", token: "var(--chart-2)" },
+    { name: "Chart 3 (Slate/Blue)", class: "bg-chart-3 text-white", token: "var(--chart-3)" },
+    { name: "Chart 4 (Yellow/Gold)", class: "bg-chart-4 text-black", token: "var(--chart-4)" },
+    { name: "Chart 5 (Red/Rose)", class: "bg-chart-5 text-white", token: "var(--chart-5)" },
+  ];
+
+  const typeScale = [
+    {
+      role: "Page Title",
+      className: "text-2xl font-bold tracking-tight",
+      sample: "Bidding Package Review & Award",
+      usage: "ชื่อหน้าหลักของแต่ละ Module ใน PageShell",
+    },
+    {
+      role: "Section Title",
+      className: "text-lg font-semibold tracking-normal",
+      sample: "Vendor Qualification & Price Breakdown",
+      usage: "หัวข้อหลักของ Card, Dialog, Sheet, หรือ Tabs panel",
+    },
+    {
+      role: "Subsection Title",
+      className: "text-base font-semibold",
+      sample: "Material Specification & BOQ Rates",
+      usage: "หัวข้อย่อยใน Form sections หรือ Card sub-blocks",
+    },
+    {
+      role: "Base Body",
+      className: "text-sm leading-normal",
+      sample: "All bids submitted before the deadline are subject to procurement committee review.",
+      usage: "เนื้อหาหลัก, Table row data, Description, Input labels",
+    },
+    {
+      role: "Caption / Metadata",
+      className: "text-xs text-muted-foreground",
+      sample: "Last modified by procurement.manager@company.com • 15 mins ago",
+      usage: "Helper text, timestamp, audit metadata, table header captions",
+    },
+    {
+      role: "Monospace / Numbers",
+      className: "font-mono text-xs text-foreground",
+      sample: "PO-2026-08-9941 / THB 14,850,200.00 / SHA-256",
+      usage: "Code identifiers, Document numbers, Financial decimals, Hashes",
+    },
+  ];
+
+  const spatialRules = [
+    {
+      title: "Flex Spacing over space-x/y",
+      rule: "ใช้ flex flex-col gap-4 หรือ grid gap-4",
+      reason:
+        "Tailwind v4 และ modern layout รองรับ gap ได้ดีกว่า และไม่เจอปัญหามาร์จิ้นเพี้ยนเมื่อมี conditional children",
+    },
+    {
+      title: "Square Proportions (size-*)",
+      rule: "ใช้ size-8, size-10 แทน w-8 h-8",
+      reason: "กระชับ ชัดเจน และลดความผิดพลาดเรื่องอัตราส่วน 1:1 ของ Avatar, Icon Button และ Media boxes",
+    },
+    {
+      title: "Text Truncation & Flex Shrink",
+      rule: "ใช้ min-w-0 truncate บน flex child",
+      reason: "ป้องกันข้อความยาวล้นหน้าจอ (Text Overflow) ใน Table cell และ Toolbar",
+    },
+    {
+      title: "No Arbitrary Text Sizes",
+      rule: "ใช้ text-xs / text-sm / text-base แทน text-xs",
+      reason: "รักษา Vertical Rhythm และความสม่ำเสมอของสายตาทั้งระบบ",
+    },
+  ];
+
+  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">Foundations</Badge>
+          <span className="text-xs text-muted-foreground">Tokens, Typography & Spatial Layout</span>
+        </div>
+        <h2 className="text-xl font-bold tracking-tight text-foreground">
+          ระบบโทเค็น ฟอนต์ และมิติพื้นฐาน
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          ควบคุมธีม Light / Dark mode และความสอดคล้องของหน้าจอทั้งหมดจากศูนย์กลางที่ <code>globals.css</code>
+        </p>
+      </div>
+
+      {/* Semantic Color Tokens */}
+      <section className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-base font-semibold flex items-center gap-2">
+              <Palette className="size-4 text-primary" /> Semantic Color Tokens
+            </h3>
+            <p className="text-xs text-muted-foreground">
+              คลิกที่การ์ดเพื่อ Copy ชื่อ Tailwind utility ไปใช้งาน
+            </p>
+          </div>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          {coreTokens.map((token) => (
+            <div
+              key={token.name}
+              onClick={() => copyToClipboard(token.tailwind)}
+              className="group relative flex flex-col gap-2.5 rounded-lg border bg-card p-3 shadow-2xs transition-all hover:border-primary/50 hover:shadow-xs cursor-pointer"
+            >
+              <div
+                className={`flex h-12 w-full items-center justify-between rounded-md p-3 font-medium text-xs shadow-2xs ${token.class}`}
+              >
+                <span>{token.name}</span>
+                {copiedToken === token.tailwind ? (
+                  <Check className="size-3.5" />
+                ) : (
+                  <Copy className="size-3.5 opacity-0 transition-opacity group-hover:opacity-100" />
+                )}
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <code className="text-xs font-mono font-medium text-primary">{token.tailwind}</code>
+                <p className="text-xs text-muted-foreground leading-tight pt-1">{token.usage}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Sidebar & Chart Tokens */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Sidebar Tokens */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Sidebar Palette Tokens</CardTitle>
+            <CardDescription className="text-xs">
+              โทเค็นสำหรับ Navigation Sidebar ทั้งโหมดพับและขยาย
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-2 sm:grid-cols-2">
+            {sidebarTokens.map((item) => (
+              <div
+                key={item.name}
+                className="flex flex-col gap-1.5 rounded-md border p-2.5 bg-card"
+              >
+                <div
+                  className={`flex h-8 items-center justify-center rounded px-2 text-xs font-medium ${item.class}`}
+                >
+                  {item.name}
+                </div>
+                <code className="text-xs text-muted-foreground font-mono">{item.token}</code>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        {/* Chart Tokens */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Chart Palette Tokens</CardTitle>
+            <CardDescription className="text-xs">
+              ชุดสี 5 ลำดับสำหรับกราฟ Recharts และ Data Visualizations
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-2 grid-cols-5">
+            {chartTokens.map((item) => (
+              <div key={item.name} className="flex flex-col items-center gap-1">
+                <div
+                  className={`size-10 rounded-md flex items-center justify-center font-bold text-xs shadow-2xs ${item.class}`}
+                >
+                  {item.name.slice(6, 7)}
+                </div>
+                <span className="text-xs text-muted-foreground font-mono text-center">
+                  chart-{item.name.slice(6, 7)}
+                </span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Typography Scale */}
+      <section className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1">
+          <h3 className="text-base font-semibold flex items-center gap-2">
+            <Type className="size-4 text-primary" /> Typography Hierarchy (Noto Sans Thai Looped)
+          </h3>
+          <p className="text-xs text-muted-foreground">
+            ลำดับชั้นของตัวอักษรที่รองรับทั้งภาษาไทยและอังกฤษอย่างคมชัดบนทุกขนาดหน้าจอ
+          </p>
+        </div>
+
+        <Card>
+          <CardContent className="p-0 divide-y divide-border">
+            {typeScale.map((item) => (
+              <div
+                key={item.role}
+                className="flex flex-col gap-2 p-4 transition-colors hover:bg-muted/30 lg:flex-row lg:items-center lg:justify-between"
+              >
+                <div className="flex flex-col gap-1 w-full lg:w-1/3">
+                  <div className="flex items-center gap-2">
+                    <span className="font-semibold text-xs text-foreground">{item.role}</span>
+                    <Badge variant="outline" className="text-xs font-mono py-0">
+                      {item.className.split(" ")[0]}
+                    </Badge>
+                  </div>
+                  <code className="text-xs text-muted-foreground font-mono">{item.className}</code>
+                  <p className="text-xs text-muted-foreground">{item.usage}</p>
+                </div>
+                <div className="w-full lg:w-2/3 pt-1 lg:pt-0">
+                  <div className={`rounded-md bg-muted/40 p-3 border ${item.className}`}>
+                    {item.sample}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* Spatial, Keyboard & Layout Rules */}
+      <section className="grid gap-6 lg:grid-cols-2">
+        {/* Spatial Rules */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <AlignLeft className="size-4 text-primary" /> Spatial & Spacing Rules
+            </CardTitle>
+            <CardDescription className="text-xs">กฎเกณฑ์การจัดช่องว่างและสัดส่วนเลย์เอาต์</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            {spatialRules.map((rule) => (
+              <div key={rule.title} className="flex flex-col gap-1 rounded-md border p-3 bg-card">
+                <div className="flex items-center justify-between">
+                  <span className="font-semibold text-xs text-foreground">{rule.title}</span>
+                  <code className="text-xs text-primary font-mono">{rule.rule}</code>
+                </div>
+                <p className="text-xs text-muted-foreground">{rule.reason}</p>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        {/* Keyboard Shortcuts & Kbd Primitives */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <Info className="size-4 text-primary" /> Keyboard Shortcuts (Kbd Primitive)
+            </CardTitle>
+            <CardDescription className="text-xs">
+              แสดงปุ่มคีย์ลัดสำหรับผู้ใช้และ Accessibility Navigation
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <div className="flex items-center justify-between rounded-md border p-3 bg-card">
+              <span className="text-xs text-muted-foreground">Quick Search / Global Command</span>
+              <KbdGroup>
+                <Kbd>⌘</Kbd>
+                <Kbd>K</Kbd>
+              </KbdGroup>
+            </div>
+            <div className="flex items-center justify-between rounded-md border p-3 bg-card">
+              <span className="text-xs text-muted-foreground">Save Form / Submit Package</span>
+              <KbdGroup>
+                <Kbd>Ctrl</Kbd>
+                <Kbd>S</Kbd>
+              </KbdGroup>
+            </div>
+            <div className="flex items-center justify-between rounded-md border p-3 bg-card">
+              <span className="text-xs text-muted-foreground">Close Dialog / Clear Filter</span>
+              <Kbd>Esc</Kbd>
+            </div>
+            <div className="flex items-center justify-between rounded-md border p-3 bg-card">
+              <span className="text-xs text-muted-foreground">Next Table Row / Field</span>
+              <Kbd>Tab</Kbd>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}