@godxjp/ui 31.31.7 → 32.0.0

package/docs/general/typography.tsx

@@ -1,542 +0,0 @@
-import { useTranslation } from "@godxjp/ui/i18n";
-import {
-  Button,
-  Heading,
-  Link,
-  Paragraph,
-  Text,
-  Title,
-  Typography,
-  VisuallyHidden,
-} from "@godxjp/ui/general";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  DataTable,
-  Tree,
-} from "@godxjp/ui/data-display";
-import { Breadcrumb, Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-/**
- * Text + Heading — the typographic primitives. Use these INSTEAD of a hand-rolled
- * `<span className="text-[13px] font-medium text-muted-foreground">`. Size is a step of the
- * golden-ratio type scale (never an arbitrary px); tone/weight are semantic tokens.
- */
-const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"] as const;
-/** The display ramp — its own card below, because it is a different ramp, not three more steps. */
-const displaySizes = ["3xl", "4xl", "5xl"] as const;
-const tones = ["default", "muted", "primary", "success", "warning", "destructive", "info"] as const;
-const levels = [1, 2, 3, 4] as const;
-
-/** Heading tone — every branch paired with the section it actually belongs on. */
-const headingTones = [
-  { tone: "default", title: "請求サマリー" },
-  { tone: "muted", title: "補足情報" },
-  { tone: "primary", title: "今月の重点項目" },
-  { tone: "success", title: "月次締め処理が完了しました" },
-  { tone: "warning", title: "承認待ちの申請があります" },
-  { tone: "destructive", title: "同期に失敗した明細" },
-  { tone: "info", title: "システムメンテナンスのお知らせ" },
-] as const;
-
-type SuiteRow = { id: string; title: string };
-
-export default function Demo() {
-  const { t } = useTranslation();
-  const longTitle = t("textExamples.ellipsisLongTitle");
-  const suiteRows: SuiteRow[] = [
-    { id: "TS-0412", title: longTitle },
-    { id: "TS-0413", title: t("textExamples.ellipsisShortTitle") },
-  ];
-  return (
-    <PageContainer
-      title="Typography"
-      subtitle="Text + Heading · token-driven type, never an arbitrary px className"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Heading levels</CardTitle>
-            <CardDescription>
-              level sets BOTH the --heading-h* size token and the semantic &lt;h1..h4&gt; element —
-              unless `size` overrides the size alone (see the display ramp below), which leaves the
-              document outline where the author put it.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              {levels.map((level) => (
-                <Heading key={level} level={level}>
-                  H{level} · 請求書一覧
-                </Heading>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Heading tone</CardTitle>
-            <CardDescription>
-              level は文書構造、tone は意味です。見出しの tone は Text
-              と同じ意味論トークンを読むため、 節の状態を色で示しても文書階層は変わりません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {headingTones.map(({ tone, title }) => (
-                <Flex key={tone} direction="col" gap="xs">
-                  <Heading level={3} tone={tone}>
-                    {title}
-                  </Heading>
-                  <Text size="2xs" mono tone="muted">
-                    {`tone="${tone}"`}
-                  </Text>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tone=&quot;inherit&quot; · 面が決める</CardTitle>
-            <CardDescription>
-              他の tone は絶対的なトークンを塗るため、色つきの面に置いた途端にページの文字色へ戻って
-              しまいます。inherit はその面が持つ対になる前景色をそのまま使う唯一のメンバーです。
-              これを入れる前、--primary の上の Text は --foreground を塗って 2.45:1
-              でした（gh#643）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* ui-audit-disable-next-line no-hand-rolled-surface no-utility-layout no-utility-spacing — the COLOURED SURFACE is the subject here, exactly as in docs/foundation/colors.tsx */}
-              <div className="bg-primary text-primary-foreground rounded-md p-4">
-                <Flex direction="col" gap="xs">
-                  <Heading level={3} tone="inherit">
-                    請求サマリー
-                  </Heading>
-                  <Text tone="inherit">今月の請求は締め処理まで完了しています。</Text>
-                  <Text size="2xs" mono tone="inherit">
-                    {`tone="inherit"`}
-                  </Text>
-                </Flex>
-              </div>
-              <Text size="xs" tone="muted">
-                同じ二行を tone=&quot;default&quot; で置くと、面ではなくページの文字色を塗ります。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Text sizes</CardTitle>
-            <CardDescription>
-              size is a type-scale step (2xs / xs / sm / md / lg / xl) — sm is the base. No px.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="xs">
-              {sizes.map((size) => (
-                <Text key={size} size={size}>
-                  {size} — 関連する仕訳データを表示します
-                </Text>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · 10 段の共通ラダー（Text と Heading が共有）</CardTitle>
-            <CardDescription>
-              size は Text と Heading が共有する一本のラダーです。2xs…2xl は UI
-              ランプ（--font-size-base × φ^¼、管理画面の密度）、3xl…5xl はマーケティング用の
-              ディスプレイランプ（--font-size-display と --font-size-display-ratio
-              から導出）。別ランプなので、サービスは管理画面に一切触れずにヒーローだけを調整できます。
-              ここに至る公開 API が無かったため、どのマーケティングページも自前の font-size
-              クラスを書いていました（gh#826）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              {/* Heading `size` over the WHOLE ladder. `level` keeps the document outline — every
-                  row below is the same <h2> — and `size` moves the ramp alone. Ten drawn branches,
-                  which is the evidence check:frame-coverage wants for a new public prop. */}
-              <Flex direction="col" gap="sm">
-                {[...sizes, ...displaySizes].map((size) => (
-                  <Flex key={size} direction="row" gap="sm" align="baseline">
-                    <Heading level={2} size={size}>
-                      国境を越える物流を、ひとつに
-                    </Heading>
-                    <Text size="2xs" mono tone="muted">
-                      {`size="${size}"`}
-                    </Text>
-                  </Flex>
-                ))}
-              </Flex>
-
-              {/* The hero shape the two website showcases used to hand-write. `level` and `size`
-                  are separate axes — antd is the one system that conflates them, and it is also
-                  the only one with no display range at all (38px ceiling), which is the same fact
-                  twice. On a marketing page this headline IS the page title and takes `level={1}`:
-                  a real <h1> at 54px, with no admin screen's <h1> moving. It is `level={2}` here
-                  only because PageContainer already renders this page's one <h1> (WCAG 1.3.1). */}
-              <Flex direction="col" gap="xs">
-                <Heading level={2} size="5xl">
-                  Ship it everywhere
-                </Heading>
-                <Text size="xl" tone="muted">
-                  リード文は UI ランプの xl / 2xl のままで十分です — 大きくすべきは見出しだけ。
-                </Text>
-                <Text size="2xs" mono tone="muted">
-                  {`<Heading level={1} size="5xl"> + <Text size="xl" tone="muted"> — zero bespoke classes`}
-                </Text>
-              </Flex>
-
-              {/* The same ladder on Text — a stat figure is display-sized but is NOT a heading, so
-                  it must be reachable without inventing an <h*> for it. This is exactly why the
-                  size axis has to be separate from the semantic one. */}
-              <Flex direction="col" gap="xs">
-                {displaySizes.map((size) => (
-                  <Flex key={size} direction="row" gap="sm" align="baseline">
-                    <Text size={size} weight="bold" tone="primary" tabular>
-                      98.4%
-                    </Text>
-                    <Text size="2xs" mono tone="muted">
-                      {`<Text size="${size}" weight="bold" tabular>`}
-                    </Text>
-                  </Flex>
-                ))}
-              </Flex>
-
-              {/* Paragraph and Link read the SAME TextSizeProp, so widening the ladder widened
-                  their public surface too. Drawn over the whole ladder rather than left as an
-                  undrawn branch — an undrawn branch is what refused the 28.6.0 release. */}
-              <Flex direction="col" gap="xs">
-                {[...sizes, ...displaySizes].map((size) => (
-                  <Flex key={size} direction="row" gap="sm" align="baseline">
-                    <Paragraph size={size} tone="muted">
-                      「速い」
-                    </Paragraph>
-                    <Link href="#typography" size={size}>
-                      詳しく
-                    </Link>
-                    <Text size="2xs" mono tone="muted">
-                      {`<Paragraph size="${size}"> · <Link size="${size}">`}
-                    </Text>
-                  </Flex>
-                ))}
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Tone + weight</CardTitle>
-            <CardDescription>
-              tone maps to semantic foreground tokens; weight is the 3-weight canon (400/500/700).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Flex direction="row" gap="md" wrap align="center">
-                {tones.map((tone) => (
-                  <Text key={tone} tone={tone} weight="medium">
-                    {tone}
-                  </Text>
-                ))}
-              </Flex>
-              <Flex direction="row" gap="md" wrap align="center">
-                <Text weight="regular">Regular 400</Text>
-                <Text weight="medium">Medium 500</Text>
-                <Text weight="bold">Bold 700</Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Numbers, codes, truncation</CardTitle>
-            <CardDescription>
-              tabular for figures, mono for ids, truncate for one line, clamp for N lines.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Text tabular weight="medium">
-                ¥1,240,000
-              </Text>
-              <Text size="xs" mono tone="muted">
-                RC-204881 · JAN 4987241135219
-              </Text>
-              <Text truncate className="max-w-64">
-                とても長い説明テキストが一行に収まらない場合は省略記号で切り詰められます。
-              </Text>
-              {/* clamp={2} — the card-description case (dxs-platform/platform#427): a long
-               * Japanese description limited to 2 lines, full text kept in the DOM. */}
-              <Text as="p" size="sm" tone="muted" clamp={2} className="max-w-64">
-                クラウド会計・請求書発行・経費精算・勤怠管理までを一つの契約で提供する統合バックオフィスサービスです。組織の規模や業種に合わせてプランを選択でき、導入後もデータ移行と運用支援を継続的に受けられます。
-              </Text>
-              <Flex direction="row" gap="sm" align="center">
-                <Text>明細を確認してください。</Text>
-                <Button size="xs" variant="link">
-                  詳細
-                </Button>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Links in running content</CardTitle>
-            <CardDescription>
-              link は色ではなく「これはリンクである」という手がかりです。ホバーだけでなく
-              キーボードフォーカスでも下線が出るため、hover: だけのユーティリティでは
-              届かない利用者にも伝わります。色は tone のままなので、tone=&quot;destructive&quot;
-              のリンクは destructive のまま下線を引きます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" gap="md" wrap align="center">
-                <Text as="a" href="#typography" link>
-                  既定 · tone は primary
-                </Text>
-                <Text as="a" href="#typography" link tone="destructive">
-                  取り消す
-                </Text>
-                <Text as="a" href="#typography" link size="xs" tone="muted">
-                  すべての通知を見る
-                </Text>
-              </Flex>
-
-              {/* The case Button variant="link" cannot serve. `.ui-button` is a control box —
-               * white-space: nowrap, flex-shrink: 0, a --control-height tier and inline padding —
-               * so in a cell it neither wraps to a second line nor shares the row's line box.
-               * `<Text link>` is text, so it does both. */}
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>キー</TableHead>
-                    <TableHead>件名</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>
-                      <Text size="xs" mono tone="muted">
-                        PKG-128
-                      </Text>
-                    </TableCell>
-                    <TableCell>
-                      <Text as="a" href="#typography" link>
-                        ログイン画面の余白が狭く、パスワード再設定リンクが本文と重なって見える
-                      </Text>
-                    </TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>
-                      <Text size="xs" mono tone="muted">
-                        PKG-129
-                      </Text>
-                    </TableCell>
-                    <TableCell>
-                      <Text as="a" href="#typography" link>
-                        請求書PDFの明細行
-                      </Text>
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-
-              <Text size="xs" tone="muted">
-                アクション（送信・展開）にはリンク風の Button variant=&quot;link&quot;
-                を使います。本文の中のリンクは Text link です。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>antd Typography · Title / Paragraph / Link</CardTitle>
-            <CardDescription>
-              antd の Typography をそのまま移植したもの。Text と Heading は変わらず、Title は 5
-              段階、Paragraph は rows 付きの ellipsis、Link は target=&quot;_blank&quot; に rel
-              を自動で付けます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Typography>
-                <Title level={3}>請求サマリー</Title>
-                <Paragraph>今月の請求は 3 件です。明細は各行のリンクから確認できます。</Paragraph>
-                <Link href="#typography">変更履歴を見る</Link>
-              </Typography>
-
-              <Title level={5}>内訳（level 5 · Heading にはない段）</Title>
-
-              <Paragraph ellipsis={{ rows: 2, expandable: true }}>
-                ログイン画面の余白が狭く、パスワード再設定リンクが本文と重なって見えます。
-                発生条件は 390px 幅の端末で、日本語ロケールのときのみです。
-                再現手順とスクリーンショットは添付の通りです。
-              </Paragraph>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("textExamples.ellipsisTitle")}</CardTitle>
-            <CardDescription>{t("textExamples.ellipsisDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <ResponsiveGrid columns={{ sm: 2, lg: 3 }}>
-                <Flex direction="col" gap="xs">
-                  <Text size="xs" tone="muted">
-                    {t("textExamples.ellipsisPlain")}
-                  </Text>
-                  <Text ellipsis={{ tooltip: true }}>{longTitle}</Text>
-                </Flex>
-                <Flex direction="col" gap="xs">
-                  <Text size="xs" tone="muted">
-                    {t("textExamples.ellipsisLink")}
-                  </Text>
-                  <Text asChild link ellipsis={{ tooltip: true }}>
-                    <a href="#typography">{longTitle}</a>
-                  </Text>
-                </Flex>
-                <Flex direction="col" gap="xs">
-                  <Text size="xs" tone="muted">
-                    {t("textExamples.ellipsisTree")}
-                  </Text>
-                  <Tree
-                    aria-label={t("textExamples.ellipsisTree")}
-                    treeData={[
-                      {
-                        value: "suite",
-                        label: longTitle,
-                        children: [
-                          { value: "case-1", label: t("textExamples.ellipsisShortTitle") },
-                        ],
-                      },
-                    ]}
-                    defaultExpandedValues={["suite"]}
-                    titleRender={(node) => <Text ellipsis={{ tooltip: true }}>{node.label}</Text>}
-                  />
-                </Flex>
-              </ResponsiveGrid>
-              <DataTable<SuiteRow>
-                label={t("textExamples.ellipsisTable")}
-                data={suiteRows}
-                getRowId={(row) => row.id}
-                columns={[
-                  { key: "id", header: "ID", width: "7rem", render: (row) => row.id },
-                  {
-                    key: "title",
-                    header: (
-                      <Text ellipsis={{ tooltip: true }}>
-                        {t("textExamples.ellipsisLongHeader")}
-                      </Text>
-                    ),
-                    width: "12rem",
-                    ellipsis: true,
-                    sortable: true,
-                    sorter: (a, b) => a.title.localeCompare(b.title),
-                    render: (row) => <Text ellipsis={{ tooltip: true }}>{row.title}</Text>,
-                  },
-                ]}
-              />
-              <Breadcrumb
-                ariaLabel={t("textExamples.ellipsisBreadcrumb")}
-                items={[
-                  { label: t("textExamples.ellipsisCrumbHome"), to: "#typography" },
-                  { label: longTitle, to: "#typography", ellipsis: true },
-                  { label: longTitle, ellipsis: true },
-                ]}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>copyable · editable · 装飾</CardTitle>
-            <CardDescription>
-              antd の copyable / editable と、7 つの装飾フラグ。装飾は本物の要素を包むので、意味が
-              スクリーンリーダーにも届きます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Text mono copyable>
-                RC-204881
-              </Text>
-              <Text editable>案件名をここで直接編集できます</Text>
-              <Text type="secondary">
-                type=&quot;secondary&quot;（tone=&quot;muted&quot; と同じ軸）
-              </Text>
-              <Text disabled>disabled · 使えないことを示します</Text>
-              <Text>
-                <Text code>npm run build</Text> と <Text keyboard>Ctrl</Text> +{" "}
-                <Text keyboard>S</Text>、<Text mark>強調</Text>、<Text delete>取り消し</Text>、
-                <Text strong>強い</Text>、<Text italic>斜体</Text>
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("textExamples.preservedText")}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Text as="p" whitespace="pre-wrap">
-              {t("textExamples.sampleText")}
-            </Text>
-            <VisuallyHidden>{t("textExamples.preservedText")}</VisuallyHidden>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("textExamples.breakTitle")}</CardTitle>
-            <CardDescription>{t("textExamples.breakDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t("textExamples.breakColumnOwner")}</TableHead>
-                  <TableHead>{t("textExamples.breakColumnEmail")}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>
-                    <Text size="sm">{t("textExamples.breakSampleName")}</Text>
-                  </TableCell>
-                  <TableCell>
-                    <Text size="sm" break="anywhere">
-                      hanako.sato.customer-success-team@example-enterprise-holdings.co.jp
-                    </Text>
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}