@godxjp/ui 31.31.8 → 32.0.0

package/docs/layout/split-pane.tsx

@@ -1,532 +0,0 @@
-import { useState } from "react";
-import { Flex, PageContainer, ResponsiveGrid, Separator, SplitPane } from "@godxjp/ui/layout";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Badge,
-  StatCard,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { FileText, Building2, Calendar, CreditCard, ArrowRight } from "lucide-react";
-
-/**
- * SplitPane · main + fixed aside panel.
- * Shows: main list + detail panel, asideWidth sm/md, nested inside PageContainer.
- * It OWNS its query container (container-type: inline-size), so the two-column split
- * is chosen from the PANE's own width (≥48rem), not the viewport — a narrow embedded
- * pane on a large screen correctly stays single-column.
- * Composed only from real @godxjp/ui components.
- *
- * NOTE: <Flex> defaults to direction="row"; vertical stacks set direction="col"
- * explicitly. Spacing comes from the Flex `gap` prop or valid 4-point utilities
- * (gap-3, pt-2, ml-3) · never named classes like `gap-md` (no such utility exists).
- */
-
-type Invoice = {
-  id: string;
-  partner: string;
-  date: string;
-  amount: string;
-  status: "承認済" | "保留中" | "未承認";
-};
-
-const INVOICES: Invoice[] = [
-  {
-    id: "INV-0241",
-    partner: "株式会社アクメ",
-    date: "2026-05-31",
-    amount: "¥840,000",
-    status: "承認済",
-  },
-  {
-    id: "INV-0240",
-    partner: "グローバル商事",
-    date: "2026-05-29",
-    amount: "¥320,000",
-    status: "保留中",
-  },
-  {
-    id: "INV-0239",
-    partner: "イニテック有限会社",
-    date: "2026-05-28",
-    amount: "¥1,200,000",
-    status: "承認済",
-  },
-  {
-    id: "INV-0238",
-    partner: "フューチャー工業",
-    date: "2026-05-26",
-    amount: "¥460,000",
-    status: "未承認",
-  },
-  {
-    id: "INV-0237",
-    partner: "東京メディア",
-    date: "2026-05-24",
-    amount: "¥980,000",
-    status: "承認済",
-  },
-];
-
-const STATUS_TONE = {
-  承認済: "success",
-  保留中: "warning",
-  未承認: "destructive",
-} as const;
-
-const CHANNEL_MESSAGES = [
-  { author: "田中", at: "09:12", body: "今月の請求書、承認お願いします。" },
-  { author: "佐藤", at: "09:20", body: "アクメ社の分だけ金額が前月と違うようです。" },
-  { author: "鈴木", at: "09:31", body: "内訳を確認してスレッドに貼りました。" },
-];
-
-const THREAD_REPLIES = [
-  { author: "鈴木", body: "追加の保守費用が乗っています。" },
-  { author: "田中", body: "了解、契約書と突き合わせます。" },
-  { author: "佐藤", body: "ではこのまま承認で問題なさそうです。" },
-];
-
-const yenFormat = new Intl.NumberFormat("ja-JP", {
-  style: "currency",
-  currency: "JPY",
-  maximumFractionDigits: 0,
-});
-const yen = (n: number) => yenFormat.format(Math.round(n));
-const toNumber = (amount: string) => Number(amount.replace(/[^0-9]/g, ""));
-
-export default function Demo() {
-  const { t } = useTranslation();
-  const [selectedId, setSelectedId] = useState<string>("INV-0241");
-  const [asideWidth, setAsideWidth] = useState<"sm" | "md">("md");
-  const [threadOpen, setThreadOpen] = useState(true);
-
-  const selected = INVOICES.find((inv) => inv.id === selectedId) ?? INVOICES[0];
-  const base = toNumber(selected.amount);
-
-  return (
-    <PageContainer
-      title="SplitPane デモ"
-      subtitle="請求書一覧 + 詳細パネル"
-      breadcrumb={[{ label: "ホーム", to: "/" }, { label: "請求書一覧" }]}
-      extra={
-        <Flex direction="row" gap="sm">
-          <Button
-            size="sm"
-            variant={asideWidth === "sm" ? "default" : "outline"}
-            onClick={() => setAsideWidth("sm")}
-          >
-            asideWidth=&quot;sm&quot;
-          </Button>
-          <Button
-            size="sm"
-            variant={asideWidth === "md" ? "default" : "outline"}
-            onClick={() => setAsideWidth("md")}
-          >
-            asideWidth=&quot;md&quot;
-          </Button>
-        </Flex>
-      }
-    >
-      <Flex direction="col" gap="lg">
-        {/* ── Example 1: Invoice list + detail panel ── */}
-        <SplitPane
-          asideLabel="請求書詳細"
-          asideWidth={asideWidth}
-          aside={
-            <Flex direction="col" gap="md">
-              <Card>
-                <CardHeader>
-                  <Flex direction="row" justify="between" align="center" gap="sm">
-                    <CardTitle level={2} className="text-base">
-                      {selected.id}
-                    </CardTitle>
-                    <Badge tone={STATUS_TONE[selected.status]}>{selected.status}</Badge>
-                  </Flex>
-                  <CardDescription>請求書詳細</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Flex direction="col" gap="md">
-                    <Flex direction="row" align="center" gap="sm">
-                      <Building2 className="text-muted-foreground size-4 shrink-0" />
-                      <Flex direction="col" gap="xs">
-                        <Text size="xs" tone="muted">
-                          取引先
-                        </Text>
-                        <Text weight="medium">{selected.partner}</Text>
-                      </Flex>
-                    </Flex>
-                    <Flex direction="row" align="center" gap="sm">
-                      <Calendar className="text-muted-foreground size-4 shrink-0" />
-                      <Flex direction="col" gap="xs">
-                        <Text size="xs" tone="muted">
-                          請求日
-                        </Text>
-                        <Text tabular>{selected.date}</Text>
-                      </Flex>
-                    </Flex>
-                    <Flex direction="row" align="center" gap="sm">
-                      <CreditCard className="text-muted-foreground size-4 shrink-0" />
-                      <Flex direction="col" gap="xs">
-                        <Text size="xs" tone="muted">
-                          金額（税抜）
-                        </Text>
-                        <Text size="lg" weight="bold" tabular>
-                          {selected.amount}
-                        </Text>
-                      </Flex>
-                    </Flex>
-                  </Flex>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle level={2} className="text-sm">
-                    明細概要
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <Flex direction="col" gap="xs">
-                    <Flex direction="row" justify="between">
-                      <Text tone="muted">小計</Text>
-                      <Text tabular>{selected.amount}</Text>
-                    </Flex>
-                    <Flex direction="row" justify="between">
-                      <Text tone="muted">消費税 (10%)</Text>
-                      <Text tabular>{yen(base * 0.1)}</Text>
-                    </Flex>
-                    <Separator />
-                    <div>
-                      <Flex direction="row" justify="between">
-                        <Text weight="bold">合計</Text>
-                        <Text weight="bold" tabular>
-                          {yen(base * 1.1)}
-                        </Text>
-                      </Flex>
-                    </div>
-                  </Flex>
-                </CardContent>
-              </Card>
-
-              <Flex direction="col" gap="sm">
-                <Button className="w-full" disabled={selected.status === "承認済"}>
-                  <ArrowRight />
-                  承認
-                </Button>
-                <Button variant="outline" className="w-full">
-                  PDF ダウンロード
-                </Button>
-              </Flex>
-            </Flex>
-          }
-        >
-          {/* Main: invoice list — gap="sm" so the bordered cards breathe (xs let the
-              borders nearly collide against the airy gap="md" detail aside). */}
-          <Flex direction="col" gap="sm">
-            {INVOICES.map((inv) => {
-              const active = selectedId === inv.id;
-              return (
-                <Card
-                  key={inv.id}
-                  role="button"
-                  tabIndex={0}
-                  aria-pressed={active}
-                  aria-label={`請求書 ${inv.id} ${inv.partner}`}
-                  className={`focus-visible:ring-ring hover:border-primary/40 cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none ${
-                    active ? "border-primary bg-primary/5" : ""
-                  }`}
-                  onClick={() => setSelectedId(inv.id)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      setSelectedId(inv.id);
-                    }
-                  }}
-                >
-                  <CardContent>
-                    <Flex direction="row" align="center" gap="md">
-                      <FileText className="text-muted-foreground size-5 shrink-0" />
-                      <Flex direction="col" gap="xs" className="min-w-0 flex-1">
-                        <Flex direction="row" justify="between" align="center" gap="sm">
-                          <Text size="xs" tone="muted" mono>
-                            {inv.id}
-                          </Text>
-                          <Badge tone={STATUS_TONE[inv.status]}>{inv.status}</Badge>
-                        </Flex>
-                        <Flex direction="row" justify="between" align="baseline" gap="sm">
-                          <Text weight="medium" truncate>
-                            {inv.partner}
-                          </Text>
-                          <Text weight="bold" tabular className="shrink-0">
-                            {inv.amount}
-                          </Text>
-                        </Flex>
-                        <Text size="xs" tone="muted" tabular>
-                          {inv.date}
-                        </Text>
-                      </Flex>
-                    </Flex>
-                  </CardContent>
-                </Card>
-              );
-            })}
-          </Flex>
-        </SplitPane>
-
-        {/* ── Example 2: Summary stats + aside narration ── */}
-        <SplitPane
-          asideLabel="監査ログ詳細"
-          asideWidth="sm"
-          aside={
-            <Card>
-              <CardHeader>
-                <CardTitle level={2} className="text-sm">
-                  利用ガイド
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <Flex direction="col" gap="sm">
-                  <Text as="p" tone="muted">
-                    <Text as="strong" weight="bold">
-                      asideWidth=&quot;sm&quot;
-                    </Text>{" "}
-                    (20rem) · フィルター、統計サマリー、クイック操作などのコンパクトパネル向け。
-                  </Text>
-                  <Text as="p" tone="muted">
-                    <Text as="strong" weight="bold">
-                      asideWidth=&quot;md&quot;
-                    </Text>{" "}
-                    (22rem) · 詳細フォーム、タイムライン、長いメタデータリスト向け。
-                  </Text>
-                  <Text as="p" tone="muted">
-                    パネル自身の幅が 48rem 未満になると縦積みにフォールバックします
-                    （ビューポートではなくコンテナ基準）。 常にサイドバイサイドが必要な場合は CSS
-                    Grid を使用してください。
-                  </Text>
-                </Flex>
-              </CardContent>
-            </Card>
-          }
-        >
-          <Flex direction="col" gap="md">
-            <Text weight="medium">月次サマリー</Text>
-            <ResponsiveGrid columns={{ sm: 2, md: 2, lg: 2 }} gap="md">
-              <StatCard label="請求総額" value="¥3,800,000" delta="+8%" />
-              <StatCard label="承認済件数" value="3" hint="全5件中" />
-              <StatCard label="保留中" value="1" delta="-2" />
-              <StatCard label="未承認" value="1" delta="+1" inverse />
-            </ResponsiveGrid>
-          </Flex>
-        </SplitPane>
-
-        {/* ── Example 3: Collapsible rail — aside={null} closes it WITHOUT remounting main ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>開閉できるパネル · {"aside={null}"}</CardTitle>
-            <CardDescription>
-              {"aside={null}"} を渡すと <code>&lt;aside&gt;</code> は描画されず、1 カラム（gap
-              なし）に戻る。ラッパー（scope / pane / main）は残るので <code>children</code> の React
-              ツリー上の位置は変わらず、
-              再マウントされない（＝一覧のスクロール位置と状態が保たれる）。 閉じるときに{" "}
-              <code>SplitPane</code> ごと外す書き方は、ツリーの深さが変わるため
-              主カラムが再マウントされる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" align="center" gap="sm">
-                <Button
-                  size="sm"
-                  variant={threadOpen ? "default" : "outline"}
-                  onClick={() => setThreadOpen((open) => !open)}
-                >
-                  {threadOpen ? "スレッドを閉じる" : "スレッドを開く"}
-                </Button>
-                <Text size="xs" tone="muted" mono>
-                  {threadOpen ? "aside={<Thread />}" : "aside={null}"}
-                </Text>
-              </Flex>
-              <SplitPane
-                asideLabel="スレッド"
-                asideWidth="md"
-                aside={
-                  threadOpen ? (
-                    <Card>
-                      <CardHeader>
-                        <CardTitle level={3} className="text-sm">
-                          スレッド
-                        </CardTitle>
-                        <CardDescription>返信 3 件</CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <Flex direction="col" gap="sm">
-                          {THREAD_REPLIES.map((reply) => (
-                            <Flex key={reply.author} direction="col" gap="xs">
-                              <Text size="xs" tone="muted">
-                                {reply.author}
-                              </Text>
-                              <Text>{reply.body}</Text>
-                            </Flex>
-                          ))}
-                        </Flex>
-                      </CardContent>
-                    </Card>
-                  ) : null
-                }
-              >
-                <Card>
-                  <CardHeader>
-                    <CardTitle level={3} className="text-sm">
-                      #general
-                    </CardTitle>
-                    <CardDescription>
-                      パネルを開閉しても、この一覧は再マウントされない
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Flex direction="col" gap="sm">
-                      {CHANNEL_MESSAGES.map((message) => (
-                        <Flex key={message.author} direction="col" gap="xs">
-                          <Flex direction="row" justify="between" align="baseline" gap="sm">
-                            <Text weight="medium">{message.author}</Text>
-                            <Text size="xs" tone="muted" tabular>
-                              {message.at}
-                            </Text>
-                          </Flex>
-                          <Text tone="muted">{message.body}</Text>
-                        </Flex>
-                      ))}
-                    </Flex>
-                  </CardContent>
-                </Card>
-              </SplitPane>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── stackOrder="aside-first" (gh#1057) — the aside stacks ABOVE main when narrow ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("showcase.splitPaneStackOrder.title")}</CardTitle>
-            <CardDescription>{t("showcase.splitPaneStackOrder.lead")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Card className="max-w-md">
-              <CardContent>
-                <SplitPane
-                  stackOrder="aside-first"
-                  asideWidth="sm"
-                  asideLabel={t("showcase.splitPaneStackOrder.propertiesTitle")}
-                  aside={
-                    <Card variant="muted">
-                      <CardHeader>
-                        <CardTitle level={3} className="text-sm">
-                          {t("showcase.splitPaneStackOrder.propertiesTitle")}
-                        </CardTitle>
-                      </CardHeader>
-                      <CardContent>
-                        <Flex direction="col" gap="xs">
-                          <Flex direction="row" justify="between" gap="sm">
-                            <Text tone="muted">{t("showcase.splitPaneStackOrder.status")}</Text>
-                            <Badge tone="info">
-                              {t("showcase.splitPaneStackOrder.statusValue")}
-                            </Badge>
-                          </Flex>
-                          <Flex direction="row" justify="between" gap="sm">
-                            <Text tone="muted">{t("showcase.splitPaneStackOrder.assignee")}</Text>
-                            <Text>{THREAD_REPLIES[0].author}</Text>
-                          </Flex>
-                        </Flex>
-                      </CardContent>
-                    </Card>
-                  }
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle level={3} className="text-sm">
-                        {t("showcase.splitPaneStackOrder.threadTitle")}
-                      </CardTitle>
-                      <CardDescription>
-                        {t("showcase.splitPaneStackOrder.threadLead")}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <Flex direction="col" gap="sm">
-                        {CHANNEL_MESSAGES.map((message) => (
-                          <Flex key={message.author} direction="col" gap="xs">
-                            <Text weight="medium">{message.author}</Text>
-                            <Text tone="muted">{message.body}</Text>
-                          </Flex>
-                        ))}
-                      </Flex>
-                    </CardContent>
-                  </Card>
-                </SplitPane>
-              </CardContent>
-            </Card>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>
-            <CardDescription>
-              大きな viewport 内でも、パネル自身の幅で分割が決まる。狭い埋め込み（約 28rem）は 1
-              カラムに潰れ、広い埋め込み（約 56rem）は 2 カラムに分割する。ビューポート 幅は同一。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* Narrow embed → stays single column (the container is < 48rem). */}
-              <Card className="max-w-md">
-                <CardContent>
-                  <Text size="xs" tone="muted">
-                    約 28rem のコンテナ → 縦積み
-                  </Text>
-                  <SplitPane
-                    asideLabel="補助パネル（狭い埋め込み）"
-                    asideWidth="sm"
-                    aside={
-                      <Card variant="muted">
-                        <CardContent>補助パネル</CardContent>
-                      </Card>
-                    }
-                  >
-                    <Card variant="muted">
-                      <CardContent>メインコンテンツ</CardContent>
-                    </Card>
-                  </SplitPane>
-                </CardContent>
-              </Card>
-              {/* Wide embed → splits into two columns (the container is ≥ 48rem). */}
-              <Card className="max-w-4xl">
-                <CardContent>
-                  <Text size="xs" tone="muted">
-                    約 56rem のコンテナ → 2 カラム
-                  </Text>
-                  <SplitPane
-                    asideLabel="補助パネル（広い埋め込み）"
-                    asideWidth="sm"
-                    aside={
-                      <Card variant="muted">
-                        <CardContent>補助パネル</CardContent>
-                      </Card>
-                    }
-                  >
-                    <Card variant="muted">
-                      <CardContent>メインコンテンツ</CardContent>
-                    </Card>
-                  </SplitPane>
-                </CardContent>
-              </Card>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}