@godxjp/ui 19.1.0 → 19.2.0

package/docs/layout/master-detail.tsx

@@ -0,0 +1,387 @@
+import { useState } from "react";
+import { CreditCard, ShieldCheck, Users } from "lucide-react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, MasterDetail, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * MasterDetail · チーム画面 (SCR-110) の正準構成 — 流動的な一覧 + 固定幅の詳細レール。
+ *
+ * Shows: rail="detail" (既定 · 1fr / 320px) と rail="master" (先頭ナビゲーションレール)、
+ * railWidth compact/standard、collapseBelow の全段階、そして master 側の選択コントロールを
+ * aria-controls / フォーカス移動で detail region に結び付ける方法。
+ *
+ * 幾何はすべてトークン所有 (--master-detail-rail-*, --master-detail-gap,
+ * --master-detail-collapse-below)。このページには grid-template-columns も
+ * 画面幅ごとの余白指定も一切ありません — 1440 / 1024 / 390 のいずれでも同じ JSX です。
+ *
+ * 選択とキーボード操作は呼び出し側の責務 (ここでは DataTable の行クリックと
+ * aria-pressed のトグルボタン)。MasterDetail はレイアウトと 2 つの region だけを所有します。
+ */
+
+type Team = {
+  id: string;
+  name: string;
+  owner: string;
+  members: number;
+  updatedAt: string;
+  status: "active" | "pending";
+};
+
+const TEAMS: Team[] = [
+  {
+    id: "core",
+    name: "コアプラットフォーム",
+    owner: "佐藤 智",
+    members: 24,
+    updatedAt: "2026-07-28",
+    status: "active",
+  },
+  {
+    id: "billing",
+    name: "請求基盤",
+    owner: "田中 花子",
+    members: 12,
+    updatedAt: "2026-07-26",
+    status: "active",
+  },
+  {
+    id: "support",
+    name: "カスタマーサポート",
+    owner: "鈴木 一郎",
+    members: 38,
+    updatedAt: "2026-07-21",
+    status: "pending",
+  },
+  {
+    id: "security",
+    name: "セキュリティ",
+    owner: "高橋 美咲",
+    members: 6,
+    updatedAt: "2026-07-19",
+    status: "active",
+  },
+];
+
+const SERVICES = [
+  {
+    id: "members",
+    label: "メンバー管理",
+    description: "招待、状態、所属チーム",
+    icon: Users,
+    count: 128,
+  },
+  {
+    id: "security",
+    label: "セキュリティ",
+    description: "MFAポリシーと監査ログ",
+    icon: ShieldCheck,
+    count: 6,
+  },
+  {
+    id: "billing",
+    label: "請求",
+    description: "プラン、請求書、支払い方法",
+    icon: CreditCard,
+    count: 12,
+  },
+];
+
+const RAIL_WIDTHS = ["compact", "standard"] as const;
+const COLLAPSE_STEPS = ["token", "sm", "md", "lg", "xl", "false"] as const;
+const MASTER_VIEWPORTS = ["auto", "compact", "standard"] as const;
+
+/**
+ * 実サービスの「長い」コレクション (gh#231)。auto のままだと一覧が数千 px に伸び、
+ * 積み重なった 390px 画面では詳細がフォールドの遥か下に押し出される。
+ */
+const MEMBERS = Array.from({ length: 60 }, (_, i) => ({
+  id: `member-${i + 1}`,
+  name: `メンバー ${i + 1}`,
+  role: i % 3 === 0 ? "管理者" : i % 3 === 1 ? "編集者" : "閲覧者",
+}));
+
+const numberFormat = new Intl.NumberFormat("ja-JP");
+const dateFormat = new Intl.DateTimeFormat("ja-JP", { dateStyle: "medium" });
+const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
+
+const TEAM_DETAIL_ID = "master-detail-team-detail";
+const SERVICE_DETAIL_ID = "master-detail-service-detail";
+const MEMBER_DETAIL_ID = "master-detail-member-detail";
+
+export default function Demo() {
+  const [teamId, setTeamId] = useState("core");
+  const [railWidth, setRailWidth] = useState<(typeof RAIL_WIDTHS)[number]>("standard");
+  const [collapseStep, setCollapseStep] = useState<(typeof COLLAPSE_STEPS)[number]>("token");
+  const [serviceId, setServiceId] = useState("members");
+  const [masterViewport, setMasterViewport] =
+    useState<(typeof MASTER_VIEWPORTS)[number]>("compact");
+  const [memberId, setMemberId] = useState(MEMBERS[0].id);
+
+  const team = TEAMS.find((item) => item.id === teamId) ?? TEAMS[0];
+  const service = SERVICES.find((item) => item.id === serviceId) ?? SERVICES[0];
+  const ServiceIcon = service.icon;
+  const member = MEMBERS.find((item) => item.id === memberId) ?? MEMBERS[0];
+
+  // "token" は prop を渡さない = テーマの --master-detail-collapse-below に委ねる状態。
+  const collapseBelow =
+    collapseStep === "token" ? undefined : collapseStep === "false" ? false : collapseStep;
+
+  const columns: ColumnDef<Team>[] = [
+    {
+      key: "name",
+      header: "チーム",
+      sortable: true,
+      render: (row) => (
+        <Flex direction="row" align="center" gap="sm">
+          <Text weight="medium" truncate>
+            {row.name}
+          </Text>
+          {row.id === teamId ? <Badge tone="info">選択中</Badge> : null}
+        </Flex>
+      ),
+    },
+    { key: "owner", header: "オーナー", hiddenOnMobile: true },
+    {
+      key: "members",
+      header: "人数",
+      align: "right",
+      sortable: true,
+      render: (row) => <Text tabular>{numberFormat.format(row.members)}</Text>,
+    },
+    {
+      key: "status",
+      header: "状態",
+      render: (row) => <Badge status={row.status} />,
+    },
+    {
+      key: "updatedAt",
+      header: "更新日",
+      align: "right",
+      hiddenOnMobile: true,
+      render: (row) => <Text tabular>{formatDate(row.updatedAt)}</Text>,
+    },
+  ];
+
+  return (
+    <PageContainer
+      title="チーム"
+      subtitle="一覧が伸縮し、詳細レールは 320px を保つ (SCR-110)"
+      breadcrumb={[{ label: "組織" }, { label: "チーム" }]}
+      extra={
+        <Flex direction="col" gap="sm">
+          <Flex direction="row" wrap align="center" gap="sm">
+            <Text size="xs" tone="muted">
+              railWidth
+            </Text>
+            {RAIL_WIDTHS.map((value) => (
+              <Button
+                key={value}
+                size="sm"
+                variant={railWidth === value ? "default" : "outline"}
+                aria-pressed={railWidth === value}
+                onClick={() => setRailWidth(value)}
+              >
+                {value}
+              </Button>
+            ))}
+          </Flex>
+          <Flex direction="row" wrap align="center" gap="sm">
+            <Text size="xs" tone="muted">
+              collapseBelow
+            </Text>
+            {COLLAPSE_STEPS.map((value) => (
+              <Button
+                key={value}
+                size="sm"
+                variant={collapseStep === value ? "default" : "outline"}
+                aria-pressed={collapseStep === value}
+                onClick={() => setCollapseStep(value)}
+              >
+                {value}
+              </Button>
+            ))}
+          </Flex>
+          <Flex direction="row" wrap align="center" gap="sm">
+            <Text size="xs" tone="muted">
+              masterViewport
+            </Text>
+            {MASTER_VIEWPORTS.map((value) => (
+              <Button
+                key={value}
+                size="sm"
+                variant={masterViewport === value ? "default" : "outline"}
+                aria-pressed={masterViewport === value}
+                onClick={() => setMasterViewport(value)}
+              >
+                {value}
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+      }
+    >
+      <Flex direction="col" gap="lg">
+        {/* ── 1. 正準構成: rail="detail" (既定) — 流動的な一覧 + 固定幅の詳細レール ── */}
+        <MasterDetail
+          railWidth={railWidth}
+          collapseBelow={collapseBelow}
+          masterLabel="チーム一覧"
+          detailLabel={`${team.name} の詳細`}
+          detailId={TEAM_DETAIL_ID}
+          master={
+            <Card>
+              <CardContent flush>
+                <DataTable
+                  data={TEAMS}
+                  columns={columns}
+                  getRowId={(row) => row.id}
+                  onRowClick={(row) => setTeamId(row.id)}
+                />
+              </CardContent>
+            </Card>
+          }
+        >
+          <Flex direction="col" gap="md">
+            <Card>
+              <CardHeader>
+                <CardTitle level={2} className="text-base">
+                  {team.name}
+                </CardTitle>
+                <CardDescription>オーナー: {team.owner}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Flex direction="col" gap="sm">
+                  <Flex direction="row" justify="between" align="baseline" gap="sm">
+                    <Text tone="muted">メンバー</Text>
+                    <Text tabular weight="medium">
+                      {numberFormat.format(team.members)}
+                    </Text>
+                  </Flex>
+                  <Flex direction="row" justify="between" align="baseline" gap="sm">
+                    <Text tone="muted">状態</Text>
+                    <Badge status={team.status} />
+                  </Flex>
+                  <Flex direction="row" justify="between" align="baseline" gap="sm">
+                    <Text tone="muted">最終更新</Text>
+                    <Text tabular>{formatDate(team.updatedAt)}</Text>
+                  </Flex>
+                </Flex>
+              </CardContent>
+            </Card>
+            <Button className="w-full">メンバーを招待</Button>
+          </Flex>
+        </MasterDetail>
+
+        {/* ── 2. rail="master" — 先頭ナビゲーションレール + 流動的な詳細面。
+               master 側のボタンが aria-controls で detail region を指し、
+               「詳細へ移動」は tabIndex={-1} の region にフォーカスを移す。 ── */}
+        <MasterDetail
+          rail="master"
+          railWidth="compact"
+          masterLabel="管理カテゴリー"
+          detailLabel={`${service.label} の詳細`}
+          detailId={SERVICE_DETAIL_ID}
+          master={
+            <Flex direction="col" gap="xs">
+              {SERVICES.map((item) => {
+                const Icon = item.icon;
+                const active = item.id === serviceId;
+
+                return (
+                  <Button
+                    key={item.id}
+                    variant={active ? "secondary" : "ghost"}
+                    aria-pressed={active}
+                    aria-controls={SERVICE_DETAIL_ID}
+                    onClick={() => setServiceId(item.id)}
+                  >
+                    <Icon aria-hidden="true" />
+                    {item.label}
+                    <Badge tone="neutral">{numberFormat.format(item.count)}</Badge>
+                  </Button>
+                );
+              })}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => document.getElementById(SERVICE_DETAIL_ID)?.focus()}
+              >
+                詳細へ移動
+              </Button>
+            </Flex>
+          }
+        >
+          <Card>
+            <CardHeader>
+              <Flex align="center" gap="sm">
+                <ServiceIcon aria-hidden="true" />
+                <CardTitle level={2}>{service.label}</CardTitle>
+              </Flex>
+              <CardDescription>{service.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <Text>現在の設定件数: {numberFormat.format(service.count)}</Text>
+                <Button>設定を開く</Button>
+              </Flex>
+            </CardContent>
+          </Card>
+        </MasterDetail>
+
+        {/* ── 3. masterViewport — 長い実コレクションを境界付きビューポートに収める (gh#231)。
+               auto: 一覧が 60 行ぶん伸び、390px では詳細がフォールドの遥か下に落ちる。
+               compact / standard: --master-detail-master-viewport-* が block サイズを
+               上限とし、コレクションは region の中でスクロールする。
+               region 自体が tabIndex={0} のスクロールコンテナなので、キーボードだけでも
+               スクロールできる (WCAG 2.1.1) — フォーカスは閉じ込められない。 ── */}
+        <MasterDetail
+          rail="detail"
+          masterViewport={masterViewport}
+          masterLabel="メンバー一覧（スクロール領域）"
+          detailLabel={`${member.name} の詳細`}
+          detailId={MEMBER_DETAIL_ID}
+          master={
+            <Flex direction="col" gap="xs">
+              {MEMBERS.map((item) => (
+                <Button
+                  key={item.id}
+                  variant={item.id === memberId ? "secondary" : "ghost"}
+                  aria-pressed={item.id === memberId}
+                  aria-controls={MEMBER_DETAIL_ID}
+                  onClick={() => setMemberId(item.id)}
+                >
+                  {item.name}
+                  <Badge tone="neutral">{item.role}</Badge>
+                </Button>
+              ))}
+            </Flex>
+          }
+        >
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>{member.name}</CardTitle>
+              <CardDescription>権限: {member.role}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Text tone="muted">
+                masterViewport=&quot;{masterViewport}&quot; · 一覧は{" "}
+                {masterViewport === "auto" ? "コンテンツ全高" : "トークン上限つきスクロール"}
+              </Text>
+            </CardContent>
+          </Card>
+        </MasterDetail>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/layout/org-switcher.tsx

@@ -0,0 +1,131 @@
+import { useState } from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  Flex,
+  OrgSwitcher,
+  type OrgSwitcherLabels,
+  PageContainer,
+  ResponsiveGrid,
+} from "@godxjp/ui/layout";
+
+const organizations = [
+  {
+    id: "godx",
+    name: "Godx株式会社",
+    meta: "Owner",
+    // `badgeLabel` is what a screen reader announces — the trigger's accessible name comes from
+    // `labels.trigger`, so the visual Badge alone would never reach assistive technology.
+    badge: <Badge variant="secondary">Trial</Badge>,
+    badgeLabel: "トライアルプラン",
+  },
+  {
+    id: "platform",
+    name: "非常に長い組織名株式会社プラットフォーム開発本部",
+    meta: "Member",
+    badge: <Badge variant="outline">Enterprise</Badge>,
+    badgeLabel: "エンタープライズプラン",
+  },
+  { id: "suspended", name: "Archived Workspace", meta: "利用停止", disabled: true },
+];
+
+const labels: OrgSwitcherLabels = {
+  trigger: (name) => `現在の組織: ${name}`,
+  title: "組織を選択",
+  search: "組織を検索",
+  empty: "組織が見つかりません。",
+  loading: "組織を読み込み中",
+  retry: "再試行",
+};
+
+/**
+ * OrgSwitcher — controlled organization selection plus explicit loading and recoverable error
+ * states. Use the responsive mode to inspect the popover contract without viewport inference.
+ */
+export default function Demo() {
+  const [value, setValue] = useState("godx");
+  const [error, setError] = useState<string | undefined>("組織一覧を取得できませんでした。");
+
+  return (
+    <PageContainer title="OrgSwitcher" subtitle="選択 · 検索 · collapsed · loading/error">
+      <ResponsiveGrid columns={{ sm: 1, lg: 2 }}>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>デスクトップの組織選択</CardTitle>
+            <CardDescription>
+              検索可能なpopover。選択状態はconsumerが保持します。`responsive=&quot;auto&quot;`は共有
+              トークン `--sheet-responsive-breakpoint-width`（48rem）で popover と bottom sheet
+              を切り替えます。badgeはtriggerとmenu行の末尾に並びます（collapsed時は非表示）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <OrgSwitcher
+                organizations={organizations}
+                value={value}
+                onValueChange={setValue}
+                labels={labels}
+                responsive="auto"
+              />
+              <Text size="sm" tone="muted" aria-live="polite">
+                選択中: {organizations.find((organization) => organization.id === value)?.name}
+              </Text>
+              <OrgSwitcher
+                organizations={organizations}
+                value={value}
+                labels={labels}
+                collapsed
+                responsive="sheet"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>非同期状態</CardTitle>
+            <CardDescription>
+              loadingとerrorは選択操作の代わりに同じ所有surfaceへ表示されます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <OrgSwitcher
+                organizations={organizations}
+                value={value}
+                labels={labels}
+                loading
+                responsive="popover"
+              />
+              <OrgSwitcher
+                organizations={organizations}
+                value={value}
+                labels={labels}
+                error={error}
+                onRetry={() => setError(undefined)}
+                responsive="popover"
+              />
+              {!error ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setError("再試行に失敗しました。")}
+                >
+                  エラーを復元
+                </Button>
+              ) : null}
+            </Flex>
+          </CardContent>
+        </Card>
+      </ResponsiveGrid>
+    </PageContainer>
+  );
+}