@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,145 +0,0 @@
-/**
- * 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)
- *   "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
- *     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" />}
-              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" />}
-              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" />}
-              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">
-            <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

@@ -1,199 +0,0 @@
-/**
- * Showcase · アクセス承認キュー / Access approval queue — 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>
-  );
-}