@godxjp/ui 31.31.7 → 32.0.0

package/docs/navigation/breadcrumb.tsx

@@ -1,207 +0,0 @@
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  CodeBlock,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Breadcrumb } from "@godxjp/ui/layout";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Breadcrumb — a STANDALONE "where am I" trail. Place `<Breadcrumb items={[…]} />` anywhere
- * (no shell required); it is NOT tied to AppShell or PageContainer. Pass one `items` array of
- * `{ label, to? }`; the segment with no `to` is the current page. Import from @godxjp/ui/layout.
- */
-const RouterLink = forwardRef<
-  HTMLAnchorElement,
-  AnchorHTMLAttributes<HTMLAnchorElement> & { to?: string }
->(function RouterLink({ to, href, ...props }, ref) {
-  return <a ref={ref} href={to ?? href} data-router-link="" {...props} />;
-});
-
-export default function Demo() {
-  const { t } = useTranslation();
-  const suite = t("breadcrumbExamples.longSuite");
-  const section = t("breadcrumbExamples.longSection");
-  return (
-    <PageContainer
-      title="Breadcrumb"
-      subtitle="Standalone location trail · pass one items array, the last (no `to`) is the current page"
-    >
-      <Flex direction="col" gap="lg">
-        {/* 1 · IN FOCUS — the bare component + what every part does. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>基本 · これがコンポーネントそのもの</CardTitle>
-            <CardDescription>
-              `&lt;Breadcrumb items={"{[…]}"} /&gt;` を置くだけ。シェル不要。リンクのセグメント (to
-              あり) はクリックで戻れ、末尾 (to なし) は現在地として aria-current=&quot;page&quot; の
-              span に、区切り記号と nav/aria は自動付与。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Breadcrumb
-              ariaLabel="基本例のパンくず"
-              items={[
-                { label: "ホーム", to: "/" },
-                { label: "会計", to: "/accounting" },
-                { label: "請求書 INV-0042" },
-              ]}
-              aria-label="基本例のパンくずリスト"
-            />
-          </CardContent>
-        </Card>
-
-        {/* 2 · ONE KNOB — depth is just the array length. Stacked so the scaling is obvious. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>深さ · items を増やすだけ</CardTitle>
-            <CardDescription>
-              2 から 4 階層まで、変えるのは配列の長さだけ。区切りと折り返しは自動。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Breadcrumb
-                items={[{ label: "ホーム", to: "/" }, { label: "仕訳一覧" }]}
-                ariaLabel="2階層のパンくずリスト"
-              />
-              <Breadcrumb
-                ariaLabel="短い例のパンくず"
-                items={[{ label: "ホーム", to: "/" }, { label: "仕訳一覧" }]}
-              />
-              <Breadcrumb
-                ariaLabel="深い階層例のパンくず"
-                items={[
-                  { label: "ホーム", to: "/" },
-                  { label: "給与管理", to: "/payroll" },
-                  { label: "2024年5月分給与明細" },
-                ]}
-                aria-label="3階層のパンくずリスト"
-              />
-              <Breadcrumb
-                ariaLabel="長いラベル例のパンくず"
-                items={[
-                  { label: "ホーム", to: "/" },
-                  { label: "給与管理", to: "/payroll" },
-                  { label: "経理部", to: "/payroll/departments/accounting" },
-                  { label: "田中 太郎" },
-                ]}
-                aria-label="4階層のパンくずリスト"
-              />
-              <Breadcrumb
-                ariaLabel="ルーターアダプター例のパンくず"
-                linkComponent={RouterLink}
-                items={[{ label: "ホーム", to: "/" }, { label: "アダプター例" }]}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* 3 · PLACEMENT — standalone, or the optional shell convenience. Reference, last. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>配置 · 単体 または シェルの任意プロップ</CardTitle>
-            <CardDescription>
-              単体でどこにでも置ける。任意で `PageContainer`/`AppShell` の `breadcrumb`
-              プロップに渡すと、ヘッダーの定位置に出る (シェルが強制するものではない)。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Text as="p" size="xs" tone="muted">
-                単体 (どこでも):
-              </Text>
-              {/* tabIndex: the snippet scrolls sideways on a narrow viewport and holds no
-                  focusable content, so without its own tab stop a keyboard user cannot reach the
-                  clipped end of the line (WCAG 2.1.1). */}
-              <CodeBlock size="xs" wrap={false}>
-                {`<Breadcrumb items={[{ label: "ホーム", to: "/" }, { label: "現在ページ" }]} />`}
-              </CodeBlock>
-              <Text as="p" size="xs" tone="muted">
-                PageContainer / AppShell の breadcrumb プロップに (任意):
-              </Text>
-              <CodeBlock size="xs" wrap={false}>
-                {`<PageContainer title="仕訳詳細" breadcrumb={[{ label: "ホーム", to: "/" }, { label: "JE-0042" }]}>`}
-              </CodeBlock>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Ant Design parity surface — separator / itemRender / item menu */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>separator · itemRender · menu (Ant Design パリティ)</CardTitle>
-            <CardDescription>
-              separator は既定のシェブロンを任意のノードに置き換える(空文字で消える)。常に
-              aria-hidden なので、読み上げは ol / li の構造のまま。menu は antd の
-              BreadcrumbItemType.menu で、その区切りを兄弟切り替えのメニューボタンにする
-              (パス付きエントリは role=&quot;menuitem&quot; を保ったまま本物のアンカーになる)。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <div id="antd-breadcrumb-slash">
-                <Breadcrumb
-                  ariaLabel="区切り文字のパンくず"
-                  separator="/"
-                  items={[
-                    { label: "ホーム", to: "/" },
-                    { label: "会員管理", to: "/members" },
-                    { label: "田中 太郎" },
-                  ]}
-                />
-              </div>
-              <div id="antd-breadcrumb-menu">
-                <Breadcrumb
-                  ariaLabel="プロジェクト切替のパンくず"
-                  items={[
-                    { label: "ホーム", to: "/" },
-                    {
-                      label: "プロジェクト A",
-                      to: "/p/a",
-                      menu: {
-                        items: [
-                          { value: "b", label: "プロジェクト B", to: "/p/b" },
-                          { value: "c", label: "プロジェクト C", to: "/p/c" },
-                          { value: "d", label: "プロジェクト D (準備中)", disabled: true },
-                        ],
-                      },
-                    },
-                    { label: "設定" },
-                  ]}
-                />
-              </div>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* gh#1046 — a long segment cut to one line, the full label in a tooltip. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("breadcrumbExamples.ellipsisTitle")}</CardTitle>
-            <CardDescription>{t("breadcrumbExamples.ellipsisDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div id="breadcrumb-ellipsis">
-              <Breadcrumb
-                ariaLabel={t("breadcrumbExamples.ellipsisAria")}
-                items={[
-                  { label: t("breadcrumbExamples.home"), to: "/" },
-                  { label: suite, to: "/suites/412", ellipsis: true },
-                  { label: section, ellipsis: true },
-                ]}
-              />
-            </div>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/navigation/card-tabs.tsx

@@ -1,344 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Tabs } from "@godxjp/ui/navigation";
-
-/**
- * CARD TABS — the strip and its panel as ONE object (gh#762).
- *
- * The screen this page is built from is the one the issue draws in ASCII: a saved-view strip over
- * a list, antd `type="editable-card"` shaped — closable views, a `+`, an action parked on the
- * trailing edge of the bar, and a body that the open tab opens INTO rather than sits above.
- *
- * Everything here is `Tabs` with documented props. There is no page-local CSS and no wrapper box
- * around the panel: the point of `bodied` is that the consumer no longer has to guess which box
- * to put underneath, because all three guesses were wrong (`<Card>` added a second 1px border at
- * a 9.708px radius over an 8px gap; `<Card variant="borderless">` and no box at all left the same
- * 8px gap). Measured after: 0px of gap, one continuous 1px line, and no line at all across the
- * active tab.
- */
-
-type SavedView = {
-  value: string;
-  label: string;
-  count: number;
-  /** antd `Tab.closable` — 「すべての課題」 is the system view and cannot be deleted. */
-  closable?: boolean;
-  rows: string[];
-};
-
-const INITIAL_VIEWS: SavedView[] = [
-  {
-    value: "all",
-    label: "すべての課題",
-    count: 340,
-    closable: false,
-    rows: [
-      "TASK-1042 · 請求書の様式を更新",
-      "TASK-1041 · 監査ログの保存期間",
-      "TASK-1038 · 権限表の棚卸",
-    ],
-  },
-  {
-    value: "mine",
-    label: "自分の担当",
-    count: 12,
-    rows: ["TASK-1042 · 請求書の様式を更新", "TASK-1029 · 締め処理の手順書"],
-  },
-  {
-    value: "review",
-    label: "レビュー待ち",
-    count: 0,
-    rows: [],
-  },
-];
-
-/** The list body a saved view opens into — a real panel, not a placeholder paragraph. */
-function ViewBody({ view }: { view: SavedView }) {
-  if (view.rows.length === 0) {
-    return (
-      <Text as="p" tone="muted">
-        この条件に一致する課題はありません。
-      </Text>
-    );
-  }
-  return (
-    <Flex direction="col" gap="sm">
-      {view.rows.map((row) => (
-        <Text key={row} as="p">
-          {row}
-        </Text>
-      ))}
-    </Flex>
-  );
-}
-
-const PLACEMENT_ITEMS = [
-  { value: "summary", label: "サマリ", content: <Text as="p">当月の売上合計 ¥4,820,000</Text> },
-  { value: "detail", label: "明細", content: <Text as="p">明細 24 件 · 未承認 2 件</Text> },
-  { value: "audit", label: "監査", content: <Text as="p">監査ログ 96 件</Text> },
-];
-
-const COUNT_ITEMS = [
-  {
-    value: "open",
-    label: "未対応",
-    count: 12,
-    countLabel: "件の課題",
-    content: <Text as="p">未対応 12 件</Text>,
-  },
-  {
-    value: "doing",
-    label: "対応中",
-    count: 340,
-    overflowCount: 999,
-    countLabel: "件の課題",
-    content: <Text as="p">対応中 340 件</Text>,
-  },
-  {
-    value: "capped",
-    label: "全期間",
-    count: 1280,
-    countLabel: "件の課題",
-    content: <Text as="p">全期間 1,280 件 · 既定の overflowCount は 99</Text>,
-  },
-  {
-    value: "empty",
-    label: "保留",
-    count: 0,
-    countLabel: "件の課題",
-    content: <Text as="p">保留 0 件</Text>,
-  },
-  {
-    value: "hidden-zero",
-    label: "却下",
-    count: 0,
-    showZero: false,
-    countLabel: "件の課題",
-    content: <Text as="p">showZero={"{false}"} なので 0 のピルは描かれない</Text>,
-  },
-  {
-    value: "off",
-    label: "アーカイブ",
-    disabled: true,
-    count: 7,
-    countLabel: "件の課題",
-    content: <Text as="p">アーカイブ</Text>,
-  },
-];
-
-export default function Demo() {
-  const [views, setViews] = useState(INITIAL_VIEWS);
-  const [activeView, setActiveView] = useState("all");
-  const [nextView, setNextView] = useState(1);
-
-  return (
-    <PageContainer
-      title="カードタブ"
-      subtitle="ストリップとパネルをひとつの箱にする bodied と、タブの件数バッジ。"
-    >
-      <Flex direction="col" gap="lg">
-        {/* THE SCREEN THE ISSUE DRAWS — saved views over a list. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>保存したビュー · editable-card + bodied</CardTitle>
-            <CardDescription>
-              antd の <code>type=&quot;editable-card&quot;</code> と同じ形。
-              <code>bodied</code> がパネルの枠・角丸・背景を描くので、ストリップとパネルが
-              ひとつの箱として読める。「すべての課題」は <code>closable: false</code>
-              なので × が出ない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Tabs
-              id="saved-views"
-              variant="editable-card"
-              bodied
-              value={activeView}
-              onValueChange={setActiveView}
-              extra={
-                <Button size="sm" variant="outline">
-                  フィルタを保存
-                </Button>
-              }
-              onEdit={(target, action) => {
-                if (action === "add") {
-                  const value = `view-${nextView}`;
-                  setViews((prev) => [
-                    ...prev,
-                    { value, label: `新しいビュー ${nextView}`, count: 0, rows: [] },
-                  ]);
-                  setNextView((n) => n + 1);
-                  setActiveView(value);
-                  return;
-                }
-                const key = String(target);
-                setViews((prev) => prev.filter((view) => view.value !== key));
-                setActiveView((current) =>
-                  current === key ? (views.find((v) => v.value !== key)?.value ?? "all") : current,
-                );
-              }}
-              items={views.map((view) => ({
-                value: view.value,
-                label: view.label,
-                closable: view.closable,
-                count: view.count,
-                overflowCount: 999,
-                countLabel: "件の課題",
-                content: <ViewBody view={view} />,
-              }))}
-            />
-          </CardContent>
-        </Card>
-
-        {/* THE DEFECT, SIDE BY SIDE. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>bodied なし / あり</CardTitle>
-            <CardDescription>
-              <code>bodied</code> なしの card ストリップは 8px 離れた透明なパネルの上に浮く —「card
-              と tab が 1 つに融合していない」と報告された形。あり側は隙間 0px、 線は 1
-              本、アクティブなタブの下辺だけが開いている。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  bodied なし（28.0.0 まで）
-                </Text>
-                <Tabs
-                  id="card-unbodied"
-                  defaultValue="summary"
-                  variant="card"
-                  items={PLACEMENT_ITEMS}
-                />
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  bodied
-                </Text>
-                <Tabs
-                  id="card-bodied"
-                  defaultValue="summary"
-                  variant="card"
-                  bodied
-                  items={PLACEMENT_ITEMS}
-                />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* EVERY PLACEMENT — the joined edge follows the strip. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>bodied × tabPlacement</CardTitle>
-            <CardDescription>
-              角丸が落ちる辺・枠が重なる辺は、ストリップの位置に従う。
-              <code>start</code> / <code>end</code> は論理値なので RTL でも反転する （48rem 以下では
-              top / bottom に折り返す）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              {(["top", "bottom", "start", "end"] as const).map((placement) => (
-                <Flex key={placement} direction="col" gap="sm">
-                  <Text as="p" size="sm" tone="muted">
-                    tabPlacement=&quot;{placement}&quot;
-                  </Text>
-                  <Tabs
-                    id={`card-bodied-${placement}`}
-                    defaultValue="summary"
-                    variant="card"
-                    bodied
-                    tabPlacement={placement}
-                    items={PLACEMENT_ITEMS}
-                  />
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* THE COUNT. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>タブの件数バッジ · count / countLabel</CardTitle>
-            <CardDescription>
-              <code>count</code> は Button・Toggle と同じカウンタ語彙で、
-              <code>Intl.NumberFormat</code> でロケール整形される。読み上げ名は 「未対応, 12
-              件の課題」 — 数字が直接ラベルに連結しないよう、ピルは <code>aria-hidden</code>、
-              読み上げ用の文だけが <code>sr-only</code> で隣に置かれる。 既定の上限は 99（
-              <code>overflowCount</code> で変更）、 0 を隠すには <code>showZero={"{false}"}</code>。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  variant=&quot;line&quot;
-                </Text>
-                <Tabs id="count-line" defaultValue="open" variant="line" items={COUNT_ITEMS} />
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  variant=&quot;card&quot; + bodied
-                </Text>
-                <Tabs
-                  id="count-card"
-                  defaultValue="open"
-                  variant="card"
-                  bodied
-                  items={COUNT_ITEMS}
-                />
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  size=&quot;sm&quot; / &quot;md&quot; / &quot;lg&quot;
-                </Text>
-                {(["sm", "md", "lg"] as const).map((size) => (
-                  <Tabs
-                    key={size}
-                    id={`count-${size}`}
-                    defaultValue="open"
-                    variant="line"
-                    size={size}
-                    items={COUNT_ITEMS.slice(0, 3)}
-                  />
-                ))}
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* The other joined pair the package already ships. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>もうひとつの「ひとつの箱」· Card tabList</CardTitle>
-            <CardDescription>
-              ストリップがカードの見出しの下に入る形は <code>Card tabList</code> が担当する （antd
-              `Card` の <code>tabList</code>）。枠はカードのもので、
-              <code>bodied</code> は要らない。card 系のストリップを単体で置くときだけ
-              <code>bodied</code> を使う。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Card
-              tabList={[
-                { key: "all", tab: "すべての課題", closable: false },
-                { key: "mine", tab: "自分の担当" },
-              ]}
-            >
-              <CardContent>
-                <Text as="p">カードの枠がそのままパネルの枠になる。</Text>
-              </CardContent>
-            </Card>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}