@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/timeline.tsx

@@ -1,671 +0,0 @@
-import { useState, type CSSProperties } from "react";
-
-import { useTranslation } from "@godxjp/ui/i18n";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Timeline,
-  RangeTimeline,
-  type TimelineItem,
-} from "@godxjp/ui/data-display";
-import { Switch } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { ArrowRightLeft, MessageSquare } from "lucide-react";
-
-/**
- * Timeline — vertical event list with an icon rail; the current item gets a
- * highlighted glyph. Composed only from real @godxjp/ui components.
- */
-const items: TimelineItem[] = [
-  {
-    title: "承認待ち",
-    location: "経理 田中",
-    time: "10:24",
-    note: "金額が20万円を超えるため部長承認が必要",
-    current: true,
-  },
-  { title: "仕訳を作成", location: "システム", time: "10:20" },
-  { title: "請求書を発行", location: "営業 グエン", time: "09:50" },
-  { title: "受注を登録", location: "営業 グエン", time: "09:30" },
-];
-
-// Second shape: a title-only minimal item, and the current step at the END
-// (so the connector line is omitted on the highlighted item).
-const compactItems: TimelineItem[] = [
-  { title: "出荷完了", location: "東京倉庫", time: "14:02" },
-  { title: "梱包" },
-  { title: "ピッキング中", current: true },
-];
-
-// Pattern A — route stepper: numbered circles via variant="ordinal";
-// status drives colour only, `location` reads "from → to".
-const routeItems: TimelineItem[] = [
-  { title: "集荷", location: "東京 → 名古屋", status: "pending" },
-  { title: "幹線輸送", location: "名古屋 → 大阪", status: "pending" },
-  { title: "ラストマイル", location: "大阪 → 配達先", status: "pending" },
-];
-
-// Pattern B — VAT / approval tracker: variant="status" picks the glyph by
-// status (done → check, current → filled dot, pending → number).
-const approvalItems: TimelineItem[] = [
-  { title: "請求書を発行", location: "営業 グエン", time: "09:50", status: "done" },
-  { title: "仕訳を作成", location: "システム", time: "10:20", status: "done" },
-  { title: "承認待ち", location: "経理 田中", time: "10:24", status: "current" },
-  { title: "消費税を計上", location: "経理", status: "pending" },
-];
-
-// Fourth shape: `title` is a NODE WITH A WIDTH OF ITS OWN, which is the only shape that can
-// show whether the title actually spans the row. Every case above passes a bare string, and a
-// string is already narrower than the row, so a title that shrink-wraps looks identical to one
-// that fills — the defect hides in plain sight. A Card as the title makes the width visible; the
-// truncating id is the other half, a title whose intrinsic width EXCEEDS the row, which must
-// shrink rather than push `time` off the end. Measured by check:timeline-title-fill.
-const richItems: TimelineItem[] = [
-  {
-    title: (
-      <Card>
-        <CardContent>
-          <Text weight="medium">請求書 INV-2026-0912 を承認しました</Text>
-        </CardContent>
-      </Card>
-    ),
-    time: "11:05",
-    status: "done",
-  },
-  {
-    title: (
-      <Text truncate mono>
-        INV-2026-09-0001-APPROVAL-CHAIN-SEGMENT-0007-RECONCILIATION
-      </Text>
-    ),
-    // A full CJK timestamp on purpose: it breaks between any two glyphs, so nothing floors its
-    // width and a title with an `auto` flex-basis would squeeze it onto three lines.
-    time: "2026年9月12日 11:18",
-    status: "current",
-  },
-];
-
-export default function Demo() {
-  const { t, locale } = useTranslation();
-  const [gantt, setGantt] = useState({ width: 280, busy: false });
-  // An activity log (gh#1092): every row already happened, so none is "done" or "upcoming" —
-  // `status: "log"` keeps the neutral dot and adds no screen-reader status prefix.
-  const logItems: TimelineItem[] = [
-    {
-      title: t("timelineDocs.log.status"),
-      time: "10/01 08:12",
-      status: "log",
-      icon: ArrowRightLeft,
-    },
-    {
-      title: t("timelineDocs.log.comment"),
-      time: "10/01 09:30",
-      status: "log",
-      icon: MessageSquare,
-    },
-    { title: t("timelineDocs.log.assignee"), time: "10/01 10:05", status: "log" },
-  ];
-  const dayLabel = (day: number) =>
-    new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }).format(
-      Date.UTC(2026, 8, day),
-    );
-  const monthLabel = (month: number) =>
-    new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", timeZone: "UTC" }).format(
-      Date.UTC(2026, month, 1),
-    );
-  return (
-    <PageContainer title="Timeline" subtitle="現在のステップを強調する縦型のイベント一覧">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>承認フロー</CardTitle>
-            <CardDescription>
-              items 配列を渡し、進行中のステップに current: true
-              を付与します。variant=&quot;icon&quot;
-              が既定で、全ステップ共通のドットグリフを描きます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Timeline variant="icon" items={items} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>出荷ステータス</CardTitle>
-            <CardDescription>
-              タイトルのみの最小項目と、最後尾の current（接続線が省略される）を示します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Timeline items={compactItems} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>density=&quot;compact&quot;</CardTitle>
-            <CardDescription>
-              Item gap drops to --space-stack-sm (8px) for a long log such as an issue history. antd
-              has no Timeline density; this is a godx extension.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Timeline variant="status" density="compact" items={approvalItems} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("timelineDocs.log.title")}</CardTitle>
-            <CardDescription>{t("timelineDocs.log.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Timeline density="compact" items={logItems} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>配送ルート進捗</CardTitle>
-            <CardDescription>
-              variant="ordinal" で各ステップを連番（1,2,3…）で表示し、status
-              で色だけを切り替えます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Timeline variant="ordinal" items={routeItems} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>承認・消費税トラッカー</CardTitle>
-            <CardDescription>
-              variant="status" は status ごとにグリフを切り替えます（done → チェック、current →
-              塗りつぶしドット、pending → 連番）。進捗レールの色は1つだけ：
-              done・current・通過済みの線 はすべて --primary で塗られ、current
-              はリング（--timeline-dot-current-ring-width）と グリフで区別します。Steps の finish /
-              process と同じ約束です。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Timeline variant="status" items={approvalItems} />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>タイトルにノードを渡す</CardTitle>
-            <CardDescription>
-              title は ReactNode です。自身の幅を持つノード（Card
-              など）を渡しても行いっぱいに広がり、内容が行より広い場合は time
-              を押し出さずに切り詰められます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Timeline variant="status" items={richItems} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>進捗レールの色をテーマで戻す</CardTitle>
-            <CardDescription>
-              done の緑と current の紫という 27.8 までの配色に戻したい場合は、塗りとインクを
-              対にしてテーマで指定します。塗りだけを戻すと、若竹の緑にほぼ白のグリフが乗って 2.18:1
-              になり AA を満たしません（gh#643）。同じ要領で --timeline-dot-current-background と
-              --timeline-line-completed-background も再着色できます。
-            </CardDescription>
-          </CardHeader>
-          {/* The knobs are declared on the CARD BODY, not on the Timeline: custom properties
-              inherit, so one scope retints every Timeline inside it — which is how a service
-              theme sets them (once, globally, or under `[data-tenant]`), not per call site. */}
-          <CardContent
-            style={
-              {
-                "--timeline-dot-done-background": "hsl(var(--success))",
-                "--timeline-dot-done-foreground": "hsl(var(--success-foreground))",
-              } as CSSProperties
-            }
-          >
-            <Timeline variant="status" items={approvalItems} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>RangeTimeline</CardTitle>
-            <CardDescription>
-              日単位の軸。行ごとの区切り線と、列ごとの縦線が本体全体に引かれます（bordered は既定で
-              true）。土日は columns[].muted
-              で本体の高さいっぱいに塗り分け、表示範囲の外にある期間は、その方向の端に矢印付きで示します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RangeTimeline
-              label={t("rangeTimeline.schedule")}
-              today={8}
-              bands={[{ label: monthLabel(8), units: 14 }]}
-              columns={Array.from({ length: 14 }, (_, index) => {
-                const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
-                return {
-                  label: new Intl.NumberFormat(locale).format(index + 1),
-                  units: 1,
-                  muted: weekday === 0 || weekday === 6,
-                };
-              })}
-              rows={[
-                { id: "design", label: "要件定義", start: 0, end: 3 },
-                { id: "build", label: "実装", start: 3, end: 10 },
-                { id: "review", label: "レビュー", start: 9, end: 12 },
-                { id: "kickoff", label: "キックオフ（前月）", start: -12, end: -9 },
-                { id: "release", label: "リリース（来月）", start: 20, end: 22 },
-              ].map((row) => ({
-                ...row,
-                startLabel: dayLabel(row.start + 1),
-                endLabel: dayLabel(row.end + 1),
-              }))}
-            />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("rangeTimelineDocs.resizeTitle")}</CardTitle>
-            <CardDescription>{t("rangeTimelineDocs.resizeDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Switch
-                checked={gantt.busy}
-                onCheckedChange={(busy) => setGantt((state) => ({ ...state, busy }))}
-                aria-label={t("rangeTimelineDocs.busyToggle")}
-              />
-              <RangeTimeline
-                label={t("rangeTimeline.schedule")}
-                columns={Array.from({ length: 14 }, (_, index) => ({
-                  label: new Intl.NumberFormat(locale).format(index + 1),
-                  units: 1,
-                }))}
-                rows={[
-                  {
-                    id: "r1",
-                    label: t("rangeTimelineDocs.longTask"),
-                    start: 1,
-                    end: 6,
-                    startLabel: "",
-                    endLabel: "",
-                    color: "#2563eb",
-                    tooltip: t("rangeTimelineDocs.longTask"),
-                  },
-                  {
-                    id: "r3",
-                    label: t("rangeTimelineDocs.doneTask"),
-                    start: 0,
-                    end: 2,
-                    startLabel: "",
-                    endLabel: "",
-                    color: "#16a34a",
-                    muted: true,
-                  },
-                  {
-                    id: "r4",
-                    label: t("rangeTimelineDocs.lateTask"),
-                    start: 3,
-                    end: 8,
-                    startLabel: "",
-                    endLabel: "",
-                    color: "#f59e0b",
-                    overdue: true,
-                  },
-                  {
-                    id: "r5",
-                    label: t("rangeTimelineDocs.plannedTask"),
-                    start: 2,
-                    end: 9,
-                    startLabel: "",
-                    endLabel: "",
-                    color: "#7c3aed",
-                    plan: { start: 2, end: 6 },
-                  },
-                  {
-                    id: "r2",
-                    label: t("rangeTimelineDocs.undatedTask"),
-                    start: null,
-                    end: null,
-                    startLabel: "",
-                    endLabel: "",
-                  },
-                ]}
-                resizableLabel={{ min: 180, max: 520 }}
-                labelWidth={gantt.width}
-                onLabelWidthChange={(width) => setGantt((state) => ({ ...state, width }))}
-                busy={gantt.busy}
-              />
-              <Text size="sm" tone="muted">
-                {t("rangeTimelineDocs.width", {
-                  width: new Intl.NumberFormat(locale).format(gantt.width),
-                })}
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("rangeTimelineDocs.schedulesTitle")}</CardTitle>
-            <CardDescription>{t("rangeTimelineDocs.schedulesDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RangeTimeline
-              label={t("rangeTimeline.schedule")}
-              planLabel={t("rangeTimelineDocs.baseline")}
-              columns={Array.from({ length: 14 }, (_, index) => ({
-                label: new Intl.NumberFormat(locale).format(index + 1),
-                units: 1,
-              }))}
-              rows={[
-                {
-                  id: "phase",
-                  label: t("rangeTimelineDocs.phase"),
-                  start: null,
-                  end: null,
-                  startLabel: "",
-                  endLabel: "",
-                  emptyHint: false,
-                },
-                {
-                  id: "design",
-                  label: t("rangeTimelineDocs.design"),
-                  start: 0,
-                  end: 3,
-                  startLabel: "",
-                  endLabel: "",
-                  color: "#16a34a",
-                  plan: { start: 0, end: 4 },
-                },
-                {
-                  id: "build",
-                  label: t("rangeTimelineDocs.build"),
-                  start: 4,
-                  end: 9,
-                  startLabel: "",
-                  endLabel: "",
-                  color: "#2563eb",
-                  plan: { start: 4, end: 7 },
-                  emphasis: "critical",
-                },
-                {
-                  id: "release",
-                  label: t("rangeTimelineDocs.release"),
-                  start: null,
-                  end: 10,
-                  startLabel: "",
-                  endLabel: "",
-                  shape: "milestone",
-                  color: "#7c3aed",
-                  plan: { start: null, end: 8 },
-                },
-                {
-                  id: "ops",
-                  label: t("rangeTimelineDocs.ops"),
-                  start: 6,
-                  end: 12,
-                  startLabel: "",
-                  endLabel: "",
-                  openEnd: true,
-                  emphasis: "warning",
-                },
-                {
-                  id: "legacy",
-                  label: t("rangeTimelineDocs.legacy"),
-                  start: 2,
-                  end: 5,
-                  startLabel: "",
-                  endLabel: "",
-                  cancelled: true,
-                },
-                {
-                  id: "audit",
-                  label: t("rangeTimelineDocs.audit"),
-                  start: null,
-                  end: 5,
-                  startLabel: "",
-                  endLabel: "",
-                },
-              ]}
-              links={[
-                { id: "design-build", from: "design", to: "build" },
-                {
-                  id: "build-release",
-                  from: "build",
-                  to: "release",
-                  type: "FF",
-                  violated: true,
-                  label: t("rangeTimelineDocs.violation"),
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        {/* sticky sits OUTSIDE a Card on purpose: Card clips (`overflow: hidden`), and a clipping
-            ancestor becomes the box the header sticks to — the same limit as antd Table sticky. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>sticky · the axis stays on screen (gh#1044)</CardTitle>
-            <CardDescription>
-              A long schedule scrolled by the page, placed as a page section rather than inside a
-              Card (a Card clips, which would pin the header to the card instead of the viewport).
-              With sticky the band and tick rows stay at the top of the viewport — offsetHeader
-              clears a fixed app topbar — and still scroll sideways with the body.
-            </CardDescription>
-          </CardHeader>
-        </Card>
-        <RangeTimeline
-          data-testid="range-timeline-sticky"
-          label={t("rangeTimeline.schedule")}
-          sticky={{ offsetHeader: 0 }}
-          today={8}
-          bands={[{ label: monthLabel(8), units: 30 }]}
-          columns={Array.from({ length: 30 }, (_, index) => ({
-            label: new Intl.NumberFormat(locale).format(index + 1),
-            units: 1,
-          }))}
-          rows={Array.from({ length: 40 }, (_, index) => ({
-            id: `task-${index + 1}`,
-            label: `Task ${index + 1}`,
-            start: index % 20,
-            end: (index % 20) + 5,
-            startLabel: dayLabel((index % 20) + 1),
-            endLabel: dayLabel((index % 20) + 6),
-          }))}
-        />
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>月をまたぐ日単位の軸（bands）</CardTitle>
-            <CardDescription>
-              9月25日から10月7日まで。bands
-              の月の境界は、その月の1日の列の境界にぴったり重なります。
-              始まりが月の途中なので、最初の月の帯は6日分だけの幅です。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RangeTimeline
-              label={t("rangeTimeline.schedule")}
-              bands={[
-                { label: monthLabel(8), units: 6 },
-                { label: monthLabel(9), units: 7 },
-              ]}
-              columns={Array.from({ length: 13 }, (_, index) => {
-                const date = new Date(Date.UTC(2026, 8, 25 + index));
-                return {
-                  label: new Intl.NumberFormat(locale).format(date.getUTCDate()),
-                  units: 1,
-                  muted: date.getUTCDay() === 0 || date.getUTCDay() === 6,
-                };
-              })}
-              rows={[
-                { id: "migration", label: "移行", start: 3, end: 8 },
-                { id: "october", label: "10月の作業", start: 6, end: 12 },
-              ].map((row) => ({
-                ...row,
-                startLabel: dayLabel(25 + row.start),
-                endLabel: dayLabel(25 + row.end),
-              }))}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>密度（density）— 1日の列幅</CardTitle>
-            <CardDescription>
-              同じ31日分の軸を density で三段。compact は1日42px、default
-              は従来どおり56px、comfortable は70px です。動くのは列幅だけで、行の高さもバーの高さも
-              ラベル列の幅も変わりません。画面に入る日数を増やしたいときは compact
-              を選びます（app.css でトークンを書く必要はありません）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {(["compact", "default", "comfortable"] as const).map((density) => (
-                <div key={density}>
-                  <Text size="xs" tone="muted">
-                    density=&quot;{density}&quot;
-                  </Text>
-                  <RangeTimeline
-                    label={t("rangeTimeline.schedule")}
-                    density={density}
-                    today={8}
-                    bands={[{ label: monthLabel(8), units: 31 }]}
-                    columns={Array.from({ length: 31 }, (_, index) => {
-                      const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
-                      return {
-                        label: new Intl.NumberFormat(locale).format(index + 1),
-                        units: 1,
-                        muted: weekday === 0 || weekday === 6,
-                      };
-                    })}
-                    rows={[
-                      { id: "design", label: "要件定義", start: 0, end: 6 },
-                      { id: "build", label: "実装", start: 7, end: 22 },
-                      { id: "review", label: "レビュー", start: 20, end: 29 },
-                    ].map((row) => ({
-                      ...row,
-                      startLabel: dayLabel(row.start + 1),
-                      endLabel: dayLabel(row.end + 1),
-                    }))}
-                  />
-                </div>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>
-            <CardDescription>
-              units
-              は日数です。9月30・10月31・11月30と幅が異なっても、本体の縦線はヘッダーの列の境界に揃います。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RangeTimeline
-              label={t("rangeTimeline.schedule")}
-              columns={[
-                { label: monthLabel(8), units: 30 },
-                { label: monthLabel(9), units: 31 },
-                { label: monthLabel(10), units: 30 },
-              ]}
-              rows={[
-                { id: "phase-1", label: "第1期", start: 0, end: 44 },
-                { id: "phase-2", label: "第2期", start: 45, end: 90 },
-              ].map((row) => ({
-                ...row,
-                startLabel: dayLabel(row.start + 1),
-                endLabel: dayLabel(row.end + 1),
-              }))}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>罫線なし（bordered=false）</CardTitle>
-            <CardDescription>
-              ヘッダーの列線だけを残し、本体の罫線を外します。muted の列の塗りは残ります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RangeTimeline
-              label={t("rangeTimeline.schedule")}
-              bordered={false}
-              columns={Array.from({ length: 7 }, (_, index) => ({
-                label: dayLabel(index + 1),
-                units: 1,
-                muted: index === 5,
-              }))}
-              rows={[
-                {
-                  id: "example",
-                  label: "期日確認",
-                  start: 1,
-                  end: 4,
-                  startLabel: dayLabel(2),
-                  endLabel: dayLabel(5),
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>親子のある作業（depth と折りたたみ）</CardTitle>
-            <CardDescription>
-              行を深さ優先の順に並べ、depth
-              を渡すと、ラベルの列の中で段ごとに字下げされます。次の行が
-              より深い行は親になり、開閉ボタンが付きます。「実装」は defaultExpandedValues
-              に含まれていないため折りたたまれており、子の行もそのバーも表示されません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RangeTimeline
-              label={t("rangeTimeline.schedule")}
-              today={4}
-              columns={Array.from({ length: 14 }, (_, index) => {
-                const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
-                return {
-                  label: new Intl.NumberFormat(locale).format(index + 1),
-                  units: 1,
-                  muted: weekday === 0 || weekday === 6,
-                };
-              })}
-              defaultExpandedValues={["design", "api"]}
-              rows={[
-                { id: "design", label: "設計", depth: 0, start: 0, end: 5 },
-                { id: "screens", label: "画面設計", depth: 1, start: 0, end: 2 },
-                { id: "api", label: "API設計", depth: 1, start: 2, end: 5 },
-                { id: "endpoints", label: "エンドポイント定義", depth: 2, start: 2, end: 3 },
-                { id: "build", label: "実装", depth: 0, start: 6, end: 12 },
-                { id: "frontend", label: "フロントエンド", depth: 1, start: 6, end: 10 },
-                { id: "backend", label: "バックエンド", depth: 1, start: 6, end: 12 },
-                { id: "release", label: "リリース", depth: 0, start: 13, end: 13 },
-              ].map((row) => ({
-                ...row,
-                startLabel: dayLabel(row.start + 1),
-                endLabel: dayLabel(row.end + 1),
-              }))}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}