@godxjp/ui 19.1.0 → 19.3.1

package/docs/navigation/toolbar.tsx

@@ -0,0 +1,339 @@
+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 value={memberStatus} onValueChange={setMemberStatus}>
+                    <SelectTrigger aria-label="ステータス">
+                      <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 value={memberRole} onValueChange={setMemberRole}>
+                    <SelectTrigger aria-label="権限">
+                      <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 value={status} onValueChange={setStatus}>
+                    <SelectTrigger aria-label="ステータス">
+                      <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 value={fiscalPeriod} onValueChange={setFiscalPeriod}>
+                    <SelectTrigger aria-label="会計期間">
+                      <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 value={department} onValueChange={setDepartment}>
+                  <SelectTrigger aria-label="部門">
+                    <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 defaultValue="all">
+                  <SelectTrigger aria-label="勘定科目">
+                    <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

@@ -0,0 +1,191 @@
+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>
+  );
+}