@godxjp/ui 19.0.0 → 19.2.0

package/docs/showcase/settings-security-mfa.tsx

@@ -0,0 +1,145 @@
+/**
+ * Showcase · case5 — Security / two-factor settings (Bảo mật · Xác thực hai lớp)
+ *
+ * The CORRECT build of the screen that keeps getting hand-rolled wrong. Every defect from the
+ * freelanced version is fixed here by following rules that ALREADY exist in the godx-ui MCP:
+ *
+ *   ✗ wrong (hand-rolled)                        ✓ here (rule)
+ *   ─────────────────────────────────────────────────────────────────────────────────────────
+ *   factor row = a centered <div> with the       ListRow — leading icon · title/description ·
+ *     title duplicated as its own description       trailing action (no redundant copy)   (#113)
+ *   "Xoá" rendered as plain black text            destructive-toned ghost button — delete is a
+ *                                                    destructive action, color carries intent
+ *   every action a full-width stacked bar         right-aligned, auto-width actions; ONE primary
+ *     (rule 217 explicitly forbids this)             per card, secondary = outline      (rule 217)
+ *   📱 / ✉️ emoji as "icons"                       lucide icons (no emoji in product UI) (anti-tell)
+ *   brand glyph = a styled <span> (size/radius    Avatar primitive — real brand mark      (#116)
+ *     baked as literals)
+ *
+ * Built ENTIRELY from real @godxjp/ui primitives. reference-design DNA: small headings, 14/1.7 body,
+ * one --primary action, 1px-border surfaces, no resting shadow, quiet factual copy, no emoji.
+ */
+import { KeyRound, Mail, ShieldCheck, Smartphone } from "lucide-react";
+
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ListRow,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+// A row-level delete is destructive but low-emphasis — a ghost button toned destructive (color
+// carries the intent without a heavy solid-red fill). This is the canonical "delete in a list" action.
+function DeleteAction({ label }: { label: string }) {
+  return (
+    <Button
+      size="sm"
+      variant="ghost"
+      className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+    >
+      {label}
+    </Button>
+  );
+}
+
+export default function SecurityMfaShowcase() {
+  return (
+    <PageContainer title="Bảo mật" subtitle="Quản lý mật khẩu, xác thực 2 lớp và passkey.">
+      <Flex direction="col" gap="lg" className="max-w-3xl">
+        {/* Account identity — the brand mark is an Avatar primitive, not a styled span. */}
+        <Flex direction="row" align="center" gap="sm">
+          <Avatar className="rounded-md">
+            <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+              T
+            </AvatarFallback>
+          </Avatar>
+          <Flex direction="col" gap="xs">
+            <Text weight="medium">Tài khoản godx</Text>
+            <Text size="xs" tone="muted">
+              tu-phuc-vu@famgia.com
+            </Text>
+          </Flex>
+        </Flex>
+
+        {/* Two-factor authentication. Enrolled factors are ListRows; add/manage actions live in the
+         *  trailing slot per row — NOT a stack of full-width bars. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Xác thực hai lớp</CardTitle>
+            <CardDescription>Yêu cầu xác minh thêm khi đăng nhập.</CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              leading={<Mail aria-hidden="true" className="size-4" />}
+              title="OTP qua email"
+              description="Gửi mã tới t•••@famgia.com"
+              trailing={
+                <>
+                  <Badge tone="success" icon={null}>
+                    Đã bật
+                  </Badge>
+                  <DeleteAction label="Xoá" />
+                </>
+              }
+            />
+            <ListRow
+              leading={<Smartphone aria-hidden="true" className="size-4" />}
+              title="Ứng dụng xác thực"
+              description="Chưa thiết lập"
+              trailing={
+                <Button size="sm" variant="outline">
+                  Thiết lập
+                </Button>
+              }
+            />
+            <ListRow
+              leading={<KeyRound aria-hidden="true" className="size-4" />}
+              title="Passkey"
+              description="1 thiết bị · MacBook Pro"
+              trailing={
+                <Button size="sm" variant="ghost">
+                  Quản lý
+                </Button>
+              }
+            />
+          </CardContent>
+        </Card>
+
+        {/* Recovery codes — a card whose single action sits in a right-aligned footer (rule 217:
+         *  primary rightmost, never a centered/full-width bar). */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Mã khôi phục</CardTitle>
+            <CardDescription>
+              Dùng khi bạn không truy cập được thiết bị xác thực. Còn lại 8 mã chưa dùng.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" align="center" gap="sm">
+              <ShieldCheck aria-hidden="true" className="text-success size-4" />
+              <Text size="sm" tone="muted">
+                Đã tạo ngày 12/03/2026
+              </Text>
+            </Flex>
+          </CardContent>
+          <CardFooter separated className="justify-end gap-2">
+            <Button variant="ghost" size="sm">
+              Tải xuống
+            </Button>
+            <Button variant="outline" size="sm">
+              Tạo lại mã
+            </Button>
+          </CardFooter>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/showcase/table-approval-queue.tsx

@@ -0,0 +1,199 @@
+/**
+ * Showcase · アクセス承認キュー / Access approval queue (gh#253) — the canonical five-column
+ * approval collection at 1440 · 1024 · 390 using ONLY public API.
+ *
+ * The whole responsive contract is `Table preset="action-collection"` plus a `priority` on each
+ * column's `TableHead`/`TableCell`. Below the collapse step the package swaps the desktop
+ * intrinsic column widths for the token-owned priority measures under `table-layout: fixed` and
+ * lets cells wrap, so 申請者 · 対象 · 理由 · 申請日時 · 操作 all stay inside the initial 390px
+ * frame — no page-local CSS, no consumer width, no hidden column, no horizontal scroll.
+ *
+ * The table stays a REAL table at every width: `<thead>` / `<th scope>` / `<tr>` / `<td>` are
+ * untouched, so header association and screen-reader table navigation are identical at 390 and at
+ * 1440. Row actions are a single kebab menu, the affordance whose measure the preset reserves
+ * first — it can never be pushed outside the viewport.
+ *
+ * Content is JA + EN + VI, including a deliberately long reason and a long resource path.
+ */
+import { ClipboardCheck, LayoutDashboard, MoreHorizontal, ScrollText } from "lucide-react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@godxjp/ui/navigation";
+
+type Request = {
+  id: string;
+  requester: string;
+  requesterMail: string;
+  target: string;
+  reason: string;
+  requestedAt: string;
+  state: "pending" | "escalated";
+};
+
+const REQUESTS: Request[] = [
+  {
+    id: "req-1041",
+    requester: "田中 太郎",
+    requesterMail: "taro.tanaka@example.co.jp",
+    target: "会計 / 請求書エクスポート",
+    reason: "月次決算のため請求データの一括出力権限が必要です。",
+    requestedAt: "2026-08-03T09:12:00+09:00",
+    state: "pending",
+  },
+  {
+    id: "req-1042",
+    requester: "Nguyễn Thị Hồng Ánh",
+    requesterMail: "hong.anh.nguyen@example.vn",
+    target: "Kho vận / Quản trị phiếu xuất kho khu vực miền Nam",
+    reason:
+      "Cần quyền quản trị để xử lý phiếu xuất kho tồn đọng của chi nhánh miền Nam trong kỳ kiểm kê quý III.",
+    requestedAt: "2026-08-03T11:47:00+09:00",
+    state: "escalated",
+  },
+  {
+    id: "req-1043",
+    requester: "Margaret Whitmore-Ashcombe",
+    requesterMail: "margaret.whitmore@example.com",
+    target: "Identity / Service account administration",
+    reason: "Rotating the service-account credentials scheduled for the August maintenance window.",
+    requestedAt: "2026-08-04T02:05:00+09:00",
+    state: "pending",
+  },
+  {
+    id: "req-1044",
+    requester: "佐藤 花子",
+    requesterMail: "hanako.sato@example.co.jp",
+    target: "勤怠 / 部門レポート",
+    reason: "部門別の残業集計を確認するため。",
+    requestedAt: "2026-08-04T08:30:00+09:00",
+    state: "pending",
+  },
+];
+
+const REQUESTED_AT = new Intl.DateTimeFormat("ja-JP", {
+  dateStyle: "short",
+  timeStyle: "short",
+  timeZone: "Asia/Tokyo",
+});
+
+export default function TableApprovalQueue() {
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          product={{ name: "GodX Platform", role: "運用管理" }}
+          activeId="approvals"
+          sections={[
+            {
+              label: "運用",
+              items: [
+                { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+                { id: "approvals", label: "アクセス承認", icon: ClipboardCheck },
+                { id: "audit", label: "監査ログ", icon: ScrollText },
+              ],
+            },
+          ]}
+        />
+      }
+      topbar={<Topbar start={<Text weight="medium">アクセス承認</Text>} />}
+    >
+      <PageContainer
+        title="アクセス承認"
+        subtitle="Access approval · Phê duyệt truy cập"
+        density="compact"
+        variant="flush"
+      >
+        <Card>
+          <CardContent flush>
+            <Table preset="action-collection" collapseBelow="sm">
+              <TableHeader>
+                <TableRow>
+                  <TableHead priority="primary" scope="col">
+                    申請者
+                  </TableHead>
+                  <TableHead priority="secondary" scope="col">
+                    対象
+                  </TableHead>
+                  <TableHead scope="col">理由</TableHead>
+                  <TableHead priority="meta" scope="col">
+                    申請日時
+                  </TableHead>
+                  <TableHead priority="actions" scope="col">
+                    <span className="sr-only">操作</span>
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {REQUESTS.map((request) => (
+                  <TableRow key={request.id}>
+                    <TableCell priority="primary">
+                      <Flex direction="col" gap="xs">
+                        <Text size="sm">{request.requester}</Text>
+                        <Text size="xs" tone="muted">
+                          {request.requesterMail}
+                        </Text>
+                      </Flex>
+                    </TableCell>
+                    <TableCell priority="secondary">
+                      <Flex direction="col" gap="xs" align="start">
+                        <Text size="sm">{request.target}</Text>
+                        {request.state === "escalated" && (
+                          <Badge tone="warning">エスカレーション</Badge>
+                        )}
+                      </Flex>
+                    </TableCell>
+                    <TableCell>
+                      <Text size="sm">{request.reason}</Text>
+                    </TableCell>
+                    <TableCell priority="meta">
+                      <Text size="xs" tone="muted">
+                        <time dateTime={request.requestedAt}>
+                          {REQUESTED_AT.format(new Date(request.requestedAt))}
+                        </time>
+                      </Text>
+                    </TableCell>
+                    <TableCell priority="actions">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="xs"
+                            aria-label={`${request.requester} の申請の操作`}
+                          >
+                            <MoreHorizontal aria-hidden />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>承認する</DropdownMenuItem>
+                          <DropdownMenuItem>却下する</DropdownMenuItem>
+                          <DropdownMenuItem>詳細を表示</DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </PageContainer>
+    </AppShell>
+  );
+}