@godxjp/ui 31.31.8 → 32.0.0

package/docs/navigation/toolbar.tsx

@@ -1,347 +0,0 @@
-import { useState } from "react";
-import { Filter, X } from "lucide-react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  EmptyState,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  SearchInput,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Toolbar, ToolbarGroup } from "@godxjp/ui/navigation";
-
-const STATUS_LABEL: Record<string, string> = {
-  active: "有効",
-  invited: "招待中",
-  suspended: "停止",
-};
-const ROLE_LABEL: Record<string, string> = {
-  admin: "管理者",
-  member: "メンバー",
-  guest: "ゲスト",
-};
-
-/**
- * Toolbar + ToolbarGroup — the list-page filter strip (Toolbar is the renamed FilterBar, #197).
- * Place ABOVE the table Card — NEVER inside CardContent flush.
- * Each labelled filter control goes in a ToolbarGroup; SearchInput is placed directly.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const [search, setSearch] = useState("");
-  const [status, setStatus] = useState("all");
-  const [fiscalPeriod, setFiscalPeriod] = useState("all");
-  const [department, setDepartment] = useState("all");
-
-  // #197 — sticky filter strip with active-filter chips (clear-one / clear-all).
-  const [memberQuery, setMemberQuery] = useState("田中");
-  const [memberStatus, setMemberStatus] = useState("active");
-  const [memberRole, setMemberRole] = useState("all");
-
-  const activeChips = [
-    memberQuery.trim() && {
-      key: "q",
-      label: `検索: ${memberQuery.trim()}`,
-      tone: undefined as "success" | undefined,
-      clear: () => setMemberQuery(""),
-    },
-    memberStatus !== "all" && {
-      key: "status",
-      label: `状態: ${STATUS_LABEL[memberStatus]}`,
-      tone: "success" as const,
-      clear: () => setMemberStatus("all"),
-    },
-    memberRole !== "all" && {
-      key: "role",
-      label: `権限: ${ROLE_LABEL[memberRole]}`,
-      tone: undefined,
-      clear: () => setMemberRole("all"),
-    },
-  ].filter(Boolean) as { key: string; label: string; tone?: "success"; clear: () => void }[];
-
-  const hasMemberFilters = activeChips.length > 0;
-  function clearMemberFilters() {
-    setMemberQuery("");
-    setMemberStatus("all");
-    setMemberRole("all");
-  }
-
-  const hasActiveFilters =
-    search !== "" || status !== "all" || fiscalPeriod !== "all" || department !== "all";
-
-  function handleClear() {
-    setSearch("");
-    setStatus("all");
-    setFiscalPeriod("all");
-    setDepartment("all");
-  }
-
-  return (
-    <PageContainer
-      title="Toolbar / ToolbarGroup"
-      subtitle="List-page filter strip · place ABOVE the table card, not inside CardContent"
-    >
-      <Flex direction="col" gap="lg">
-        {/* #197 — sticky filter strip with active-filter chips over a long list */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>スティッキーフィルター · 適用中のチップ</CardTitle>
-            <CardDescription>
-              Toolbar `sticky` でリスト上部に固定 · SearchInput + Select
-              スロット、適用中の条件を削除可能なチップで表示 (個別解除 × / 一括解除)。 1024px
-              以下では縦積みに折り返す。チップの × は Badge の内側ではなく兄弟要素の Button
-              として描画する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            {/* A scroll container so the sticky strip stays pinned while the list scrolls. */}
-            <div className="max-h-80 overflow-y-auto">
-              <Toolbar
-                sticky
-                hasActiveFilters={hasMemberFilters}
-                onClear={clearMemberFilters}
-                className="border-border bg-card border-b"
-              >
-                <SearchInput
-                  aria-label="メンバーを検索"
-                  placeholder="氏名・メールで検索"
-                  value={memberQuery}
-                  onSearch={setMemberQuery}
-                  className="w-full sm:w-56"
-                />
-                <ToolbarGroup label="ステータス">
-                  <Select
-                    aria-label="ステータス"
-                    value={memberStatus}
-                    onValueChange={setMemberStatus}
-                  >
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">すべて</SelectItem>
-                      <SelectItem value="active">有効</SelectItem>
-                      <SelectItem value="invited">招待中</SelectItem>
-                      <SelectItem value="suspended">停止</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </ToolbarGroup>
-                <ToolbarGroup label="権限">
-                  <Select aria-label="権限" value={memberRole} onValueChange={setMemberRole}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="すべて" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">すべて</SelectItem>
-                      <SelectItem value="admin">管理者</SelectItem>
-                      <SelectItem value="member">メンバー</SelectItem>
-                      <SelectItem value="guest">ゲスト</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </ToolbarGroup>
-              </Toolbar>
-
-              {/* Active-filter chip row — each chip is a Badge label + a SIBLING × Button. */}
-              <Flex
-                direction="row"
-                wrap
-                align="center"
-                gap="xs"
-                className="border-border bg-muted/40 min-h-9 border-b"
-              >
-                <Flex direction="row" align="center" gap="xs">
-                  <Filter className="size-3.5" aria-hidden="true" />
-                  <Text size="xs" tone="muted">
-                    適用中
-                  </Text>
-                </Flex>
-                {!hasMemberFilters && (
-                  <Text size="xs" tone="muted">
-                    条件なし
-                  </Text>
-                )}
-                {activeChips.map((chip) => (
-                  <Flex key={chip.key} align="center" gap="xs">
-                    <Badge tone={chip.tone} variant="outline">
-                      {chip.label}
-                    </Badge>
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      aria-label={`${chip.label} を解除`}
-                      onClick={chip.clear}
-                    >
-                      <X aria-hidden="true" />
-                    </Button>
-                  </Flex>
-                ))}
-                {hasMemberFilters && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="ms-auto"
-                    onClick={clearMemberFilters}
-                  >
-                    すべて解除
-                  </Button>
-                )}
-              </Flex>
-
-              {/* Stand-in list body — long enough to scroll under the pinned strip. */}
-              <Flex direction="col">
-                {Array.from({ length: 14 }).map((_, i) => (
-                  <Flex
-                    key={i}
-                    direction="row"
-                    align="center"
-                    justify="between"
-                    className="border-border/60 border-b"
-                  >
-                    <Text size="sm">
-                      {memberQuery.trim() || "田中"} {i + 1} 番
-                    </Text>
-                    <Badge tone={memberStatus === "suspended" ? "destructive" : "success"}>
-                      {STATUS_LABEL[memberStatus === "all" ? "active" : memberStatus]}
-                    </Badge>
-                  </Flex>
-                ))}
-              </Flex>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Full filter bar above a representative table placeholder */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>仕訳一覧フィルター</CardTitle>
-            <CardDescription>
-              Toolbar + ToolbarGroup · SearchInput is placed directly (no ToolbarGroup); every other
-              control gets a ToolbarGroup with a label. hasActiveFilters drives the clear-all
-              button.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* Toolbar sits ABOVE the table — shown here inside CardContent for demo only */}
-              <Toolbar hasActiveFilters={hasActiveFilters} onClear={handleClear}>
-                <SearchInput
-                  placeholder="仕訳IDまたは摘要で検索"
-                  value={search}
-                  onSearch={setSearch}
-                />
-                <ToolbarGroup label="ステータス">
-                  <Select aria-label="ステータス" value={status} onValueChange={setStatus}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="すべて" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">すべて</SelectItem>
-                      <SelectItem value="draft">下書き</SelectItem>
-                      <SelectItem value="posted">承認済</SelectItem>
-                      <SelectItem value="voided">取消済</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </ToolbarGroup>
-                <ToolbarGroup label="会計期間">
-                  <Select
-                    aria-label="会計期間"
-                    value={fiscalPeriod}
-                    onValueChange={setFiscalPeriod}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="期間を選択" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">すべて</SelectItem>
-                      <SelectItem value="2024-q1">2024年 第1四半期</SelectItem>
-                      <SelectItem value="2024-q2">2024年 第2四半期</SelectItem>
-                      <SelectItem value="2024-q3">2024年 第3四半期</SelectItem>
-                      <SelectItem value="2024-q4">2024年 第4四半期</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </ToolbarGroup>
-              </Toolbar>
-
-              {/* Simulated table body */}
-              <EmptyState
-                variant="section"
-                titleAs="p"
-                title="DataTable がここに入ります · Toolbar は Card の外側 (上) に置く"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Minimal toolbar — search only */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>SearchInput のみ (ToolbarGroup なし)</CardTitle>
-            <CardDescription>
-              SearchInput は自己ラベル付きのためToolbarGroup 不要。 単一フィルターの場合は Toolbar +
-              SearchInput だけで完結する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Toolbar>
-              <SearchInput placeholder="取引先名で検索" value={search} onSearch={setSearch} />
-            </Toolbar>
-          </CardContent>
-        </Card>
-
-        {/* Department filter example */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>複数 ToolbarGroup · 部門・科目フィルター</CardTitle>
-            <CardDescription>
-              勤怠・経費レポート向け。各フィルターを ToolbarGroup でラベルを付けて並べる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Toolbar hasActiveFilters={department !== "all"} onClear={() => setDepartment("all")}>
-              <ToolbarGroup label="部門">
-                <Select aria-label="部門" value={department} onValueChange={setDepartment}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="部門を選択" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">全部門</SelectItem>
-                    <SelectItem value="accounting">経理部</SelectItem>
-                    <SelectItem value="sales">営業部</SelectItem>
-                    <SelectItem value="engineering">開発部</SelectItem>
-                    <SelectItem value="hr">人事部</SelectItem>
-                  </SelectContent>
-                </Select>
-              </ToolbarGroup>
-              <ToolbarGroup label="勘定科目">
-                <Select aria-label="勘定科目" defaultValue="all">
-                  <SelectTrigger>
-                    <SelectValue placeholder="科目を選択" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">すべての科目</SelectItem>
-                    <SelectItem value="ar">売掛金</SelectItem>
-                    <SelectItem value="ap">買掛金</SelectItem>
-                    <SelectItem value="cash">現金・預金</SelectItem>
-                    <SelectItem value="expense">経費</SelectItem>
-                  </SelectContent>
-                </Select>
-              </ToolbarGroup>
-            </Toolbar>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/providers/app-provider.tsx

@@ -1,191 +0,0 @@
-import { AppProvider, useAppContext } from "@godxjp/ui/app";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Label } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-/**
- * AppProvider · root locale/timezone/date-time context.
- * Mount ONCE at app root; every AppSettingPicker + formatDate reads from it automatically.
- * AppSettingPicker rendered here has NO value/onValueChange · it reads/writes AppProvider
- * context for the setting named by `kind`. Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <AppProvider
-      defaultLocale="ja"
-      defaultTimezone="Asia/Tokyo"
-      defaultDateFormat="iso"
-      defaultTimeFormat="24h"
-      theme="light"
-      brand="brand"
-      density="comfortable"
-      fontSize="lg"
-      scaling={1}
-      persist={false}
-    >
-      <PageContainer
-        title="AppProvider"
-        subtitle="ロケール・タイムゾーン・日時フォーマットのコンテキストプロバイダー"
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>概要</CardTitle>
-              <CardDescription>
-                AppProvider はアプリのルートに一度だけマウントする。defaultLocale / defaultTimezone
-                / defaultDateFormat / defaultTimeFormat を渡すと、ツリー内のすべての
-                AppSettingPicker と formatDate がそのコンテキストを共有する。persist=false
-                はストーリーやテストで localStorage を使わない場合に指定。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Text as="p" tone="muted">
-                このデモ全体が AppProvider でラップされており、以下の各 AppSettingPicker は value /
-                onValueChange なしでコンテキストを読み書きする。
-              </Text>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind=locale · 言語選択</CardTitle>
-              <CardDescription>
-                AppProvider の locale を自動で読み書きする。選択すると他の AppSettingPicker
-                のラベル言語も切り替わる。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm">
-                <Label htmlFor="demo-locale">表示言語</Label>
-                <AppSettingPicker kind="locale" appearance="labeled" id="demo-locale" />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind=timezone · タイムゾーン選択</CardTitle>
-              <CardDescription>
-                AppProvider の timezoneOptions を省略するとフル IANA リスト（約 600
-                件）を表示。timezoneOptions を渡すと絞り込める。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm">
-                <Label htmlFor="demo-timezone">タイムゾーン</Label>
-                <AppSettingPicker kind="timezone" id="demo-timezone" />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind=dateFormat · 日付フォーマット選択</CardTitle>
-              <CardDescription>
-                iso（yyyy-MM-dd）/ dmy（dd/MM/yyyy）/ mdy（MM/dd/yyyy）の 3 種から選択。dateFormat
-                コンテキストを読み書きし、以後の formatDate 呼び出しに即時反映される。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm">
-                <Label htmlFor="demo-date-format">日付フォーマット</Label>
-                <AppSettingPicker kind="dateFormat" id="demo-date-format" />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind=timeFormat · 時刻フォーマット選択</CardTitle>
-              <CardDescription>
-                24h / 12h を選択。timeFormat コンテキストを読み書きする。ja デフォルトは
-                24h。formatDate の time / datetime 出力に反映される。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm">
-                <Label htmlFor="demo-time-format">時刻フォーマット</Label>
-                <AppSettingPicker kind="timeFormat" id="demo-time-format" />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card accent="primary">
-            <CardHeader>
-              <CardTitle level={2}>設定パネル · 4 つの設定をまとめて配置</CardTitle>
-              <CardDescription>
-                ユーザー設定ページの典型パターン。AppProvider の中に kind 違いの AppSettingPicker
-                を並べると、それぞれがコンテキストを共有して連動する。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="row" gap="md" wrap>
-                <Flex direction="col" gap="sm" className="min-w-40 flex-1">
-                  <Label htmlFor="settings-locale">表示言語</Label>
-                  <AppSettingPicker kind="locale" appearance="labeled" id="settings-locale" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-56 flex-1">
-                  <Label htmlFor="settings-timezone">タイムゾーン</Label>
-                  <AppSettingPicker kind="timezone" id="settings-timezone" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
-                  <Label htmlFor="settings-date-format">日付フォーマット</Label>
-                  <AppSettingPicker kind="dateFormat" id="settings-date-format" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
-                  <Label htmlFor="settings-time-format">時刻フォーマット</Label>
-                  <AppSettingPicker kind="timeFormat" id="settings-time-format" />
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>テーマ軸 · theme / brand / density / fontSize</CardTitle>
-              <CardDescription>
-                見た目の状態も AppProvider が一元管理する。各 picker は HTML の data 属性と
-                コンテキストを同時に更新し、個別コンポーネントへの CSS 上書きを不要にする。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="row" gap="md" wrap>
-                {(["theme", "brand", "density", "fontSize"] as const).map((kind) => (
-                  <Flex key={kind} direction="col" gap="sm" className="min-w-40 flex-1">
-                    <Label htmlFor={`settings-${kind}`}>{kind}</Label>
-                    <AppSettingPicker kind={kind} id={`settings-${kind}`} />
-                  </Flex>
-                ))}
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <ProviderState />
-        </Flex>
-      </PageContainer>
-    </AppProvider>
-  );
-}
-
-function ProviderState() {
-  const state = useAppContext();
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>現在の provider state</CardTitle>
-        <CardDescription>
-          picker の変更が全 consumer に共有されることを目視確認するための状態表示。
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Text as="p">
-          locale={state.locale} · timezone={state.timezone} · date={state.dateFormat} · time=
-          {state.timeFormat} · theme={state.theme} · brand={state.brand ?? "custom"} · density=
-          {state.density} · fontSize={state.fontSize} · scaling={state.scaling ?? "density default"}
-        </Text>
-      </CardContent>
-    </Card>
-  );
-}