@godxjp/ui 31.31.7 → 32.0.0

package/docs/layout/responsive-grid.tsx

@@ -1,403 +0,0 @@
-import { useState } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  ScrollArea,
-  StatCard,
-} from "@godxjp/ui/data-display";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";
-import { useTranslation } from "@godxjp/ui/i18n";
-
-/**
- * ResponsiveGrid · equal-width multi-column tile grid with automatic responsive
- * collapse (CSS container queries, not viewport). It OWNS its query container
- * (container-type: inline-size), so it responds to the width available to the grid
- * with no external container-type declaration. Direct children are typically
- * StatCard (self-contained bordered card · never wrap in Card/CardContent) or
- * Card+CardContent for richer tile bodies. columns accepts a number OR breakpoint
- * object { base?, sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
- * recognised collection shape instead of hand-rolling the breakpoint map. Composed only from
- * real @godxjp/ui components.
- */
-const KANBAN_LANES = [
-  { key: "todo", title: "未着手" },
-  { key: "doing", title: "進行中" },
-  { key: "done", title: "完了" },
-] as const;
-
-type KanbanLane = (typeof KANBAN_LANES)[number]["key"];
-
-const KANBAN_TASKS: { id: string; title: string; lane: KanbanLane; priority: string }[] = [
-  { id: "T-101", title: "請求書テンプレートの改訂", lane: "todo", priority: "high" },
-  { id: "T-102", title: "取引先マスタの重複整理", lane: "todo", priority: "medium" },
-  { id: "T-103", title: "月次締めチェックリスト", lane: "doing", priority: "low" },
-];
-
-export default function Demo() {
-  const { t } = useTranslation();
-  // Kanban: which lane each card is in, moved by native drag and drop.
-  const [tasks, setTasks] = useState(KANBAN_TASKS);
-  const moveTask = (id: string, lane: KanbanLane) =>
-    setTasks((current) => current.map((task) => (task.id === id ? { ...task, lane } : task)));
-  return (
-    <PageContainer
-      title="ResponsiveGrid"
-      subtitle="等幅タイルグリッド · KPI・カード比較・ダッシュボード行"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("responsiveGridDocs.boardTitle")}</CardTitle>
-            <CardDescription>{t("responsiveGridDocs.boardDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* gh#1175: a widget board — 2×1, 1×2 (rowSpan) and 1×1 cells, packed dense. */}
-            <ResponsiveGrid columns={4} dense>
-              <ResponsiveGrid.Item span={2}>
-                <StatCard label={t("responsiveGridDocs.revenue")} value="¥12,400,000" />
-              </ResponsiveGrid.Item>
-              <ResponsiveGrid.Item rowSpan={2}>
-                <StatCard label={t("responsiveGridDocs.tasks")} value="18" />
-              </ResponsiveGrid.Item>
-              <StatCard label={t("responsiveGridDocs.members")} value="14" />
-              <StatCard label={t("responsiveGridDocs.invoices")} value="2" />
-              <StatCard label={t("responsiveGridDocs.services")} value="3" />
-              <StatCard label={t("responsiveGridDocs.invitations")} value="0" />
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Compact mobile metrics</CardTitle>
-            <CardDescription>
-              columns=&#123;&#123; base: 2, sm: 4 &#125;&#125; keeps two columns below the first
-              container breakpoint and four above it.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ base: 2, sm: 4 }}>
-              <StatCard label="Services" value="3" />
-              <StatCard label="Members" value="14" />
-              <StatCard label="Invitations" value="0" />
-              <StatCard label="Invoices" value="2" />
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>コンテナクエリで折り返し（自己所有のクエリコンテナ）</CardTitle>
-            <CardDescription>
-              同じ columns=&#123;4&#125; でも、コンテナ幅で列数が変わる。左の広い領域は 4
-              列、右の狭いサイドバー（約 20rem）は 1 列に折り返す。ビューポート幅は同一なので、
-              折り返しの基準がコンテナ幅であることが分かる。ResponsiveGrid は自身のクエリコンテナ
-              （container-type: inline-size）を持つため、外側に @container を用意しなくても正しく
-              折り返す。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は var(--space-stack-md)
-              が既定で、gap prop で変更できます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SplitPane
-              asideWidth="sm"
-              aside={
-                <Flex direction="col" gap="sm">
-                  <Text tone="muted">狭いコンテナ（約 20rem）→ sm=1 列</Text>
-                  {/* No wrapping `@container` needed — ResponsiveGrid OWNS its query container. */}
-                  <ResponsiveGrid columns={4}>
-                    <StatCard label="今日の入金" value="¥420,000" />
-                    <StatCard label="未処理" value="6 件" />
-                  </ResponsiveGrid>
-                </Flex>
-              }
-            >
-              <Flex direction="col" gap="sm">
-                <Text tone="muted">広いコンテナ → lg=4 列</Text>
-                <ResponsiveGrid columns={4}>
-                  <StatCard label="月次売上" value="¥12,400,000" delta="+8%" hint="先月比" />
-                  <StatCard label="請求件数" value="486" delta="+12%" />
-                  <StatCard label="売掛金残高" value="¥3,180,000" hint="未回収 23件" />
-                  <StatCard label="回収率" value="97.2%" delta="+0.4%" />
-                </ResponsiveGrid>
-              </Flex>
-            </SplitPane>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Container stress · 320 / 768px 相当（外側コンテナ不要）</CardTitle>
-            <CardDescription>
-              固定幅の親の中でも、同じ columns=&#123;4&#125; が親幅で列数を変える。親には
-              container-type を付けていない。ResponsiveGrid が自身のスコープでクエリするため、
-              外側にコンテナ宣言がなくても 1 列に潰れない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {["max-w-80", "max-w-3xl"].map((width) => (
-                <div
-                  key={width}
-                  className={width}
-                  style={{ border: "1px solid hsl(var(--border))", padding: "var(--space-2)" }}
-                >
-                  <ResponsiveGrid columns={4}>
-                    {Array.from({ length: 4 }, (_, index) => (
-                      <div
-                        key={index}
-                        className="bg-muted rounded text-center"
-                        style={{ padding: "var(--space-3)" }}
-                      >
-                        {index + 1}
-                      </div>
-                    ))}
-                  </ResponsiveGrid>
-                </div>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>columns=&#123;4&#125; · KPI 行（StatCard 直置き）</CardTitle>
-            <CardDescription>
-              StatCard は自身がボーダー付き Card なので Card/CardContent でラップしない。 columns
-              数値指定時は sm=min(n,2) / md=min(n,3) / lg=n に自動変換。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={4}>
-              <StatCard label="月次売上" value="¥12,400,000" delta="+8%" hint="先月比" />
-              <StatCard label="請求件数" value="486" delta="+12%" />
-              <StatCard label="売掛金残高" value="¥3,180,000" hint="未回収 23件" />
-              <StatCard label="回収率" value="97.2%" delta="+0.4%" />
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>columns=&#123;3&#125; · 法人比較（Card+CardContent）</CardTitle>
-            <CardDescription>
-              StatCard 以外のリッチなタイルは Card+CardContent で構成。 columns=&#123;3&#125; → sm=2
-              / md=3 / lg=3 に自動変換。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={3}>
-              <Card>
-                <CardHeader>
-                  <CardTitle>東京本社</CardTitle>
-                  <CardDescription>JP-001</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Flex direction="col" gap="xs">
-                    <Text>売上: ¥8,200,000</Text>
-                    <Text tone="muted">取引先: 124社</Text>
-                  </Flex>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardHeader>
-                  <CardTitle>大阪支社</CardTitle>
-                  <CardDescription>JP-002</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Flex direction="col" gap="xs">
-                    <Text>売上: ¥3,100,000</Text>
-                    <Text tone="muted">取引先: 57社</Text>
-                  </Flex>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardHeader>
-                  <CardTitle>福岡拠点</CardTitle>
-                  <CardDescription>JP-003</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Flex direction="col" gap="xs">
-                    <Text>売上: ¥1,060,000</Text>
-                    <Text tone="muted">取引先: 31社</Text>
-                  </Flex>
-                </CardContent>
-              </Card>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              columns=&#123;&#123; sm: 1, md: 2, lg: 4 &#125;&#125; ·
-              ブレークポイントオブジェクト（3 段制御）
-            </CardTitle>
-            <CardDescription>
-              ブレークポイント指定オブジェクト: sm / md / lg
-              キーでコンテナ幅ごとの列数を個別に制御。
-              未指定キーは下位にフォールバック（lg→md→sm、md→sm、sm 既定 1）。 数値指定（sm=min(n,2)
-              / md=min(n,3) / lg=n の自動変換）では作れない 「sm=1 / md=2 /
-              lg=4」のような任意の組み合わせを表現できる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-              <StatCard layout="inline" label="契約金額" value="¥4,800,000" />
-              <StatCard layout="inline" label="消費税額" value="¥480,000" hint="税率 10%" />
-              <StatCard layout="inline" label="支払済" value="¥2,400,000" delta="-50%" inverse />
-              <StatCard layout="inline" label="残額" value="¥2,400,000" />
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              preset=&quot;pricing-plans&quot; · 課金プラン一覧（3/3/1）
-            </CardTitle>
-            <CardDescription>
-              名前付きコレクション geometry: コンテナ幅が lg ステップ（64rem）に達するまでは 1
-              列、そこから 3 列に切り替わる。ResponsiveGrid には lg
-              より上のステップが無いため、1024px 相当でも 1440px 相当でも同じ 3 列になる ·
-              課金プランカタログの「3/3/1」契約 （dxs-platform/platform#333）。`columns` の代わりに
-              `preset` を渡すだけで、呼び出し側がブレークポイント値を自作する必要がない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid preset="pricing-plans">
-              <Card>
-                <CardHeader>
-                  <CardTitle>スタンダード</CardTitle>
-                  <CardDescription>¥9,800 / 月</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Text tone="muted">小規模チーム向けの基本プラン。</Text>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardHeader>
-                  <CardTitle>プロフェッショナル</CardTitle>
-                  <CardDescription>¥29,800 / 月</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Text tone="muted">成長企業向けの推奨プラン。</Text>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardHeader>
-                  <CardTitle>エンタープライズ</CardTitle>
-                  <CardDescription>お問い合わせ</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Text tone="muted">大規模組織向けのカスタムプラン。</Text>
-                </CardContent>
-              </Card>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              flow=&quot;columns&quot; align=&quot;stretch&quot; · カンバンのレーン
-            </CardTitle>
-            <CardDescription>
-              align=&quot;stretch&quot;（antd Row
-              align）で全レーンが最も高いレーンと同じ高さになり、空の
-              「完了」レーンも全高のドロップ先になる。省略時は columns フローが start、rows フローが
-              stretch のまま。カードはドラッグでき、中の Select
-              はドラッグ画像をカードの外へ広げない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ScrollArea orientation="horizontal">
-              <ResponsiveGrid flow="columns" align="stretch">
-                {KANBAN_LANES.map((lane) => (
-                  <Card
-                    key={lane.key}
-                    data-lane={lane.key}
-                    onDragOver={(event) => event.preventDefault()}
-                    onDrop={(event) => {
-                      event.preventDefault();
-                      moveTask(event.dataTransfer.getData("text/plain"), lane.key);
-                    }}
-                  >
-                    <CardHeader>
-                      <CardTitle>{lane.title}</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                      <Flex direction="col" gap="sm">
-                        {tasks
-                          .filter((task) => task.lane === lane.key)
-                          .map((task) => (
-                            <Card
-                              key={task.id}
-                              draggable
-                              data-task={task.id}
-                              onDragStart={(event) =>
-                                event.dataTransfer.setData("text/plain", task.id)
-                              }
-                            >
-                              <CardContent>
-                                <Flex direction="col" gap="xs">
-                                  <Text tone="muted">{task.id}</Text>
-                                  <Text>{task.title}</Text>
-                                  <Select
-                                    aria-label={`${task.id} 優先度`}
-                                    name={`priority-${task.id}`}
-                                    defaultValue={task.priority}
-                                  >
-                                    <SelectTrigger size="sm">
-                                      <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      <SelectItem value="high">高</SelectItem>
-                                      <SelectItem value="medium">中</SelectItem>
-                                      <SelectItem value="low">低</SelectItem>
-                                    </SelectContent>
-                                  </Select>
-                                </Flex>
-                              </CardContent>
-                            </Card>
-                          ))}
-                      </Flex>
-                    </CardContent>
-                  </Card>
-                ))}
-              </ResponsiveGrid>
-            </ScrollArea>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>一覧と補助情報 2:1</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ base: 1, lg: 3 }} pad={{ block: 2 }}>
-              <ResponsiveGrid.Item span={{ base: 1, lg: 2 }}>
-                <Flex id="grid-main" surface="muted" pad={3}>
-                  <Text>メインの一覧</Text>
-                </Flex>
-              </ResponsiveGrid.Item>
-              <ResponsiveGrid.Item>
-                <Flex id="grid-rail" surface="muted" pad={3}>
-                  <Text>補助情報</Text>
-                </Flex>
-              </ResponsiveGrid.Item>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}