@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/acme-portal.tsx

@@ -1,461 +0,0 @@
-/**
- * Showcase · ACME customer portal — a TOKEN-ONLY re-theme of @godxjp/ui.
- *
- * Proves the brief: can the ACME design system (gold #DFA930 · navy #0C1A31 ·
- * red #CD3913 · Source Sans 3 · 14px radius · navy-tinted shadows) be produced by
- * CONFIGURING TOKENS ALONE — no component edits, no new components? Every block below
- * is a real @godxjp/ui primitive; the ONLY ACME-specific code is the scoped token
- * block in `THEME` (anchor + semantic tokens under `[data-tenant="acme"]`).
- *
- *   page chrome ........ AppShell + Sidebar + Topbar
- *   header + CTA ....... PageContainer (extra) + Button (default = gold primary)
- *   KPI row ............ ResponsiveGrid + StatCard
- *   "Cần xử lý" ........ Card + rows + Badge(tone) + Button
- *   journey ............ Card + Progress / Steps
- *   orders ............. Card + Table + Badge(tone)  (the centerpiece)
- *
- * Token map (ACME → godxjp anchor/semantic, HSL components):
- *   gold → --primary/--ring/--warning · navy → --foreground/--secondary · red → --destructive
- *   #1F9D55 → --success · #2563C9 → --info · Source Sans 3 → --font-family-sans
- *   14px → --radius (+ exact 4/6/10/14/20/28 steps) · navy → --shadow-color · 16px → --font-size-base
- */
-import * as React from "react";
-import {
-  Bell,
-  Boxes,
-  CheckCircle2,
-  CreditCard,
-  FileText,
-  Headphones,
-  LayoutDashboard,
-  type LucideIcon,
-  Package,
-  Plane,
-  Plus,
-  Search,
-  Ship,
-  Warehouse,
-  Wallet,
-  AlertTriangle,
-  ReceiptText,
-} from "lucide-react";
-
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  ListRow,
-  Progress,
-  StatCard,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  type BadgeProps,
-} from "@godxjp/ui/data-display";
-import { SearchInput } from "@godxjp/ui/data-entry";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  ResponsiveGrid,
-  Sidebar,
-  type SidebarSectionProp,
-} from "@godxjp/ui/layout";
-
-type BadgeTone = NonNullable<BadgeProps["tone"]>;
-
-// ── The ENTIRE ACME customisation: a SCOPED token block. No component touched. ───────────
-// The whole brand lives under `[data-tenant="acme"]` — true multi-tenant theming. This works
-// because the library declares its colour/radius utilities with `@theme inline`, so `bg-primary`
-// etc. inline `hsl(var(--primary))` and re-resolve a scoped --primary at the element (a plain
-// @theme froze them at :root). Colours, the focus ring (--focus-ring-color/-width), the brand glow
-// (--shadow-glow), gradients (--gradient-hero/-glow), the card lift (--card-shadow) and the modal
-// scrim (--overlay-background) are ALL configured here as tokens — nothing else.
-// Scoped note: radius derives through intermediate tokens (--card-radius/--control-radius/
-// --radius-*) that compute at their declaring element, so a scoped re-theme re-declares them here
-// (a :root single-brand theme needs only --radius). See docs/CUSTOMER-THEMING.md.
-const THEME = `
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,900&display=swap');
-[data-tenant="acme"] {
-  /* Brand / action */
-  --primary: 41 73% 53%;             /* gold #DFA930 */
-  --primary-foreground: 217 61% 12%; /* navy text on gold */
-  --ring: 41 73% 53%;                /* gold focus ring */
-  --accent: 42 81% 96%;              /* gold-50 hover tint */
-  --accent-foreground: 41 72% 44%;   /* gold-700 */
-  /* Surfaces / text */
-  --background: 0 0% 100%;
-  --foreground: 217 61% 12%;         /* navy */
-  --card: 0 0% 100%;
-  --card-foreground: 217 61% 12%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 217 61% 12%;
-  --secondary: 217 61% 12%;          /* navy button */
-  --secondary-foreground: 0 0% 100%;
-  --muted: 216 33% 97%;              /* neutral-50 */
-  --muted-foreground: 216 16% 40%;   /* neutral-600, darkened to clear WCAG AA 4.5:1 on cards */
-  --border: 217 24% 89%;             /* neutral-200 */
-  --input: 216 20% 57%;              /* neutral-500 · a CONTROL boundary, not chrome. neutral-300
-                                        was 1.65:1 on the white card and failed WCAG SC 1.4.11.
-                                        3.38:1 on card, 3.14:1 on --muted. --border stays neutral-200. */
-  /* Fixed status signalling (ACME semantic palette) */
-  --success: 152 78% 26%; --success-foreground: 0 0% 100%;  /* darker green: AA for delta text + white-on-fill */
-  --warning: 41 73% 53%;  --warning-foreground: 217 61% 12%;  /* = brand gold */
-  --destructive: 12 83% 44%; --destructive-foreground: 0 0% 100%;
-  --info: 217 69% 47%; --info-foreground: 0 0% 100%;
-  /* A TRACK IS A QUIET SURFACE, AND THIS THEME REPOINTED --secondary AT AN ACTION COLOUR.
-     Progress reads --progress-track-background, which defaults to hsl(var(--secondary)) — a pale
-     neutral in the stock palette. Here --secondary is the navy BUTTON, so the bar's track came out
-     near-black and the fill (a MARK: nothing is written on it, so SC 1.4.11 asks 3:1 against the
-     track) measured 2.50:1 success / 2.90:1 warning on it. Naming the track is the fix; the fills
-     then sit on --muted like everywhere else. Any theme that repurposes --secondary owes this line. */
-  --progress-track-background: hsl(var(--muted));
-  /* Shape - base radius + exact ACME steps; re-declare the intermediates so the scope re-resolves */
-  --radius: 0.875rem;                /* 14px card */
-  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
-  --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px;
-  --card-radius: var(--radius); --control-radius: var(--radius);
-  /* Elevation - navy-tinted ramp + a soft navy card lift + a gold CTA glow */
-  --shadow-color: 12 26 49;
-  --card-shadow: 0 1px 2px rgb(12 26 49 / 0.06), 0 10px 28px -14px rgb(12 26 49 / 0.22);
-  --shadow-glow: 0 6px 18px hsl(41 73% 53% / 0.34);
-  /* Focus ring → brand gold (also covered by --ring, set explicitly for clarity) */
-  --focus-ring-color: 41 73% 53%;
-  /* Gradients - a faint gold hero wash (keeps navy text readable) + an ambient corner glow */
-  --gradient-hero: linear-gradient(180deg, hsl(42 81% 96%), transparent);
-  --gradient-glow: radial-gradient(50% 60% at 92% -8%, hsl(41 73% 53% / 0.10), transparent 70%);
-  /* Modal scrim → navy */
-  --overlay-background: rgb(12 26 49 / 0.55);
-  /* Type */
-  --font-size-base: 1rem;            /* 16px ACME body */
-  --font-family-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, system-ui, sans-serif;
-}
-
-/* Dark NAVY sidebar chrome - the ACME signature (gold-on-navy). Done by SCOPING the colour
- * ROLES to the .app-sidebar region: the Sidebar's own CSS reads --card / --foreground /
- * --muted-foreground / --accent / --border, so re-pointing them here turns the whole nav dark with
- * NO component change. The active row uses the new --sidebar-item-active-* knobs for a gold tint. */
-[data-tenant="acme"] .app-sidebar {
-  --card: 217 61% 12%;              /* navy #0C1A31 surface */
-  --foreground: 0 0% 100%;          /* white logo + active text base */
-  --muted-foreground: 217 40% 74%;  /* navy-200 inactive nav text */
-  --accent: 217 45% 18%;            /* hover row */
-  --border: 217 38% 22%;            /* subtle navy dividers */
-  --sidebar-item-active-background: hsl(41 73% 53% / 0.16);  /* gold tint on the selected row */
-  --sidebar-item-active-foreground: hsl(41 73% 53%);          /* gold active label */
-}
-`;
-
-// ── Mock data ─────────────────────────────────────────────────────────────────────────────
-const KPIS: Array<{
-  label: string;
-  value: string;
-  delta: string;
-  inverse?: boolean;
-  icon: LucideIcon;
-}> = [
-  { label: "Đơn đang xử lý", value: "12", delta: "+3 hôm nay", icon: Package },
-  { label: "Đang vận chuyển", value: "8", delta: "Nhật → Việt Nam", icon: Ship },
-  { label: "Đã giao tháng này", value: "47", delta: "+9 vs tháng trước", icon: CheckCircle2 },
-  { label: "Công nợ", value: "¥18,400", delta: "1 hoá đơn quá hạn", inverse: true, icon: Wallet },
-];
-
-const QUEUE: Array<{
-  icon: LucideIcon;
-  tone: BadgeTone;
-  title: string;
-  meta: string;
-  action: string;
-}> = [
-  {
-    icon: ReceiptText,
-    tone: "warning",
-    title: "Báo giá BG-2041 chờ bạn duyệt",
-    meta: "ZOZOTOWN · 3 sản phẩm · 24.800¥ · hết hạn sau 6 giờ",
-    action: "Xem báo giá",
-  },
-  {
-    icon: AlertTriangle,
-    tone: "destructive",
-    title: "Hoá đơn INV-2080 quá hạn 4 ngày",
-    meta: "9.800¥ · vui lòng thanh toán để tiếp tục gom đơn",
-    action: "Thanh toán",
-  },
-  {
-    icon: Plane,
-    tone: "info",
-    title: "Kiện PKG-000038 sẵn sàng xuất kho",
-    meta: "8 sản phẩm · 2,8kg · Saitama → Hà Nội",
-    action: "Theo dõi",
-  },
-];
-
-const JOURNEY: Array<{ stage: string; pct: number; tone: "success" | "warning" }> = [
-  { stage: "Mua hộ tại Nhật", pct: 100, tone: "success" },
-  { stage: "Về kho Saitama", pct: 100, tone: "success" },
-  { stage: "Vận chuyển quốc tế", pct: 64, tone: "warning" },
-  { stage: "Giao tận nơi (VN)", pct: 0, tone: "warning" },
-];
-
-const ORDERS: Array<{
-  id: string;
-  product: string;
-  source: string;
-  status: string;
-  tone: BadgeTone;
-  total: string;
-}> = [
-  {
-    id: "TXM-100241",
-    product: "Áo khoác UNIQLO ×2",
-    source: "Nhật",
-    status: "Đang giao",
-    tone: "info",
-    total: "¥12,800",
-  },
-  {
-    id: "TXM-100240",
-    product: "Mỹ phẩm Shiseido",
-    source: "Nhật",
-    status: "Tại kho VN",
-    tone: "success",
-    total: "¥8,400",
-  },
-  {
-    id: "TXM-100239",
-    product: "Giày Nike Air",
-    source: "Hàn",
-    status: "Chờ thanh toán",
-    tone: "warning",
-    total: "₩96,000",
-  },
-  {
-    id: "TXM-100238",
-    product: "Đồng hồ Casio",
-    source: "Nhật",
-    status: "Mua hộ",
-    tone: "muted",
-    total: "¥6,200",
-  },
-  {
-    id: "TXM-100237",
-    product: "Sữa Meiji ×6",
-    source: "Nhật",
-    status: "Đã giao",
-    tone: "success",
-    total: "¥9,900",
-  },
-];
-
-const NAV_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "Mua hộ",
-    items: [
-      { id: "dashboard", label: "Tổng quan", icon: LayoutDashboard },
-      { id: "orders", label: "Đơn mua hộ", icon: Boxes, badge: 12 },
-      { id: "tracking", label: "Tra cứu vận đơn", icon: Search },
-      { id: "warehouse", label: "Kho của tôi", icon: Warehouse, badge: 8 },
-    ],
-  },
-  {
-    label: "Tài khoản",
-    items: [
-      { id: "billing", label: "Thanh toán", icon: CreditCard, badge: 1 },
-      { id: "invoices", label: "Hoá đơn", icon: FileText },
-      { id: "support", label: "Hỗ trợ", icon: Headphones },
-    ],
-  },
-];
-
-export default function AcmePortalShowcase() {
-  const [activeNav, setActiveNav] = React.useState("dashboard");
-
-  const sidebar = (
-    <Sidebar
-      activeId={activeNav}
-      onSelect={setActiveNav}
-      sections={NAV_SECTIONS}
-      product={{ name: "ACME", role: "Cổng khách hàng" }}
-    />
-  );
-
-  return (
-    <div data-tenant="acme">
-      {/* The one and only ACME-specific code: a scoped token block. */}
-      <style>{THEME}</style>
-      <AppShell
-        sidebar={sidebar}
-        topbarLeft={<Text as="strong">Cổng khách hàng</Text>}
-        topbarRight={
-          <Flex direction="row" gap="sm" align="center">
-            <SearchInput
-              defaultValue=""
-              placeholder="Tìm mã đơn, sản phẩm…"
-              aria-label="Tìm kiếm"
-              className="w-64"
-            />
-            <Button variant="outline" size="icon" aria-label="Thông báo">
-              <Bell aria-hidden="true" />
-            </Button>
-            <Avatar>
-              <AvatarFallback>NA</AvatarFallback>
-            </Avatar>
-            <Text size="xs" tone="muted" tabular>
-              Nguyễn An · VIP
-            </Text>
-          </Flex>
-        }
-      >
-        <PageContainer
-          title="Xin chào, An"
-          subtitle="Mua hộ &amp; vận chuyển quốc tế · Nhật / Hàn → Việt Nam"
-          extra={
-            <Flex direction="row" gap="sm">
-              <Button variant="outline" size="sm">
-                <Search aria-hidden="true" />
-                Tra cứu đơn
-              </Button>
-              <Button size="sm">
-                <Plus aria-hidden="true" />
-                Tạo đơn mua hộ
-              </Button>
-            </Flex>
-          }
-        >
-          <Flex direction="col" gap="lg">
-            {/* KPI row */}
-            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-              {KPIS.map((k) => (
-                <StatCard
-                  key={k.label}
-                  icon={k.icon}
-                  label={k.label}
-                  value={k.value}
-                  delta={k.delta}
-                  inverse={k.inverse}
-                />
-              ))}
-            </ResponsiveGrid>
-
-            {/* Queue + Journey */}
-            <ResponsiveGrid columns={{ sm: 1, md: 1, lg: 2 }}>
-              <Card className="self-start">
-                <CardHeader>
-                  <CardTitle level={2}>Cần bạn xử lý</CardTitle>
-                  <CardAction>
-                    <Text size="xs" tone="muted">
-                      {QUEUE.length} việc
-                    </Text>
-                  </CardAction>
-                </CardHeader>
-                <CardContent flush>
-                  <ul className="divide-border divide-y">
-                    {QUEUE.map((q) => (
-                      <ListRow
-                        as="li"
-                        key={q.title}
-                        leading={
-                          <Badge
-                            tone={q.tone}
-                            variant="outline"
-                            icon={q.icon}
-                            aria-label={q.title}
-                          />
-                        }
-                        title={q.title}
-                        description={q.meta}
-                        trailing={
-                          <Button variant="outline" size="sm">
-                            {q.action}
-                          </Button>
-                        }
-                      />
-                    ))}
-                  </ul>
-                </CardContent>
-              </Card>
-
-              <Card className="self-start">
-                <CardHeader>
-                  <CardTitle level={2}>Hành trình đơn TXM-100241</CardTitle>
-                  <CardAction>
-                    <Badge tone="info" variant="outline">
-                      <Plane aria-hidden="true" /> Đang vận chuyển
-                    </Badge>
-                  </CardAction>
-                </CardHeader>
-                <CardContent>
-                  <Flex direction="col" gap="md">
-                    {JOURNEY.map((j) => (
-                      <Progress
-                        key={j.stage}
-                        value={j.pct}
-                        label={`${j.stage} · ${j.pct}%`}
-                        tone={j.tone}
-                      />
-                    ))}
-                  </Flex>
-                </CardContent>
-              </Card>
-            </ResponsiveGrid>
-
-            {/* Orders table — the centerpiece */}
-            <Card>
-              <CardHeader>
-                <CardTitle level={2}>Đơn mua hộ gần đây</CardTitle>
-                <CardAction>
-                  <Button variant="ghost" size="sm">
-                    <Wallet aria-hidden="true" />
-                    Xem tất cả
-                  </Button>
-                </CardAction>
-              </CardHeader>
-              <CardContent flush>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Mã đơn</TableHead>
-                      <TableHead>Sản phẩm</TableHead>
-                      <TableHead>Nguồn</TableHead>
-                      <TableHead>Trạng thái</TableHead>
-                      <TableHead className="text-end">Giá trị</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {ORDERS.map((o) => (
-                      <TableRow key={o.id}>
-                        <TableCell>
-                          <Text mono size="xs">
-                            {o.id}
-                          </Text>
-                        </TableCell>
-                        <TableCell>{o.product}</TableCell>
-                        <TableCell>{o.source}</TableCell>
-                        <TableCell>
-                          <Badge tone={o.tone} variant="outline">
-                            {o.status}
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-end tabular-nums">{o.total}</TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </CardContent>
-            </Card>
-          </Flex>
-        </PageContainer>
-      </AppShell>
-    </div>
-  );
-}