@godxjp/ui 19.1.0 → 19.3.1

package/docs/data-entry/calendar.tsx

@@ -0,0 +1,180 @@
+import { useState } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@godxjp/ui/data-display";
+import { Calendar } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { CalendarIcon } from "lucide-react";
+import { ja } from "react-day-picker/locale";
+import type { DateRange } from "react-day-picker";
+
+/**
+ * Calendar — styled react-day-picker grid for single, multiple, or range
+ * selection. Embed inside a Popover for picker UX; use DatePicker /
+ * DateRangePicker for form-submittable inputs instead. Composed only from
+ * real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [issueDate, setIssueDate] = useState<Date | undefined>(new Date(2026, 3, 15));
+  const [range, setRange] = useState<DateRange | undefined>({
+    from: new Date(2026, 3, 1),
+    to: new Date(2026, 3, 30),
+  });
+  const [shiftDays, setShiftDays] = useState<Date[] | undefined>([
+    new Date(2026, 3, 6),
+    new Date(2026, 3, 13),
+    new Date(2026, 3, 20),
+  ]);
+
+  return (
+    <PageContainer
+      title="Calendar"
+      subtitle="カレンダーグリッド · 常時表示またはポップオーバー内で使用"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>単一日付選択 (インライン常時表示)</CardTitle>
+            <CardDescription>
+              mode="single" で日付を選択。フォームに送信が必要な場合は DatePicker を使用する。ja
+              ロケールで曜日・月名を日本語表示。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Calendar
+              mode="single"
+              selected={issueDate}
+              onSelect={setIssueDate}
+              defaultMonth={issueDate}
+              locale={ja}
+              disabled={{ before: new Date(2026, 0, 1) }}
+              footer={
+                issueDate
+                  ? `選択日: ${issueDate.toLocaleDateString("ja-JP")}`
+                  : "発行日を選択してください"
+              }
+              aria-label="発行日カレンダー"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>範囲選択 · Popover 内</CardTitle>
+            <CardDescription>
+              mode="range" でポップオーバー内に配置。DateRangePicker
+              はこのパターンにフォーム送信を加えた上位コンポーネント。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline">
+                  <CalendarIcon />
+                  期間を選択
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto" style={{ padding: 0 }} align="start">
+                <Calendar
+                  mode="range"
+                  selected={range}
+                  onSelect={setRange}
+                  defaultMonth={range?.from}
+                  locale={ja}
+                  numberOfMonths={2}
+                  disabled={{ after: new Date(2027, 2, 31) }}
+                  autoFocus
+                  aria-label="レポート期間カレンダー"
+                />
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>年月ドロップダウン (captionLayout="dropdown")</CardTitle>
+            <CardDescription>
+              過去の会計期間に素早くジャンプする場合に便利。startMonth / endMonth
+              でナビゲーション範囲を絞る。captionLayout は dropdown-months / dropdown-years
+              で月のみ・年のみのドロップダウンにも切り替え可能。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Calendar
+              mode="single"
+              selected={issueDate}
+              onSelect={setIssueDate}
+              defaultMonth={issueDate}
+              locale={ja}
+              captionLayout="dropdown"
+              startMonth={new Date(2020, 0, 1)}
+              endMonth={new Date(2030, 11, 31)}
+              aria-label="会計期間カレンダー"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>複数日選択 (mode="multiple")</CardTitle>
+            <CardDescription>
+              mode="multiple" で個別の複数日を選択 (Date[])。max
+              で選択上限を制限できる。ここでは出勤シフト日を最大 5 日まで選択。showOutsideDays=
+              {"{false}"} で前後月のはみ出し日を非表示にしている。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Calendar
+              mode="multiple"
+              selected={shiftDays}
+              onSelect={setShiftDays}
+              defaultMonth={shiftDays?.[0]}
+              locale={ja}
+              max={5}
+              showOutsideDays={false}
+              footer={
+                shiftDays && shiftDays.length > 0
+                  ? `選択日数: ${shiftDays.length} 日`
+                  : "出勤日を選択してください"
+              }
+              aria-label="出勤シフトカレンダー"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>フッター操作 (showToday / showClose)</CardTitle>
+            <CardDescription>
+              showToday で「今日」へジャンプして選択、showClose で onClose を呼ぶ。両方とも既定は
+              off。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Calendar
+              mode="single"
+              selected={issueDate}
+              onSelect={setIssueDate}
+              defaultMonth={issueDate}
+              locale={ja}
+              showToday
+              showClose
+              onClose={() => setIssueDate(undefined)}
+              aria-label="請求日カレンダー (フッター付き)"
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/cascader.tsx

@@ -0,0 +1,378 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Cascader, FormField } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import type { TreeOptionProp } from "@godxjp/ui/props";
+
+/**
+ * Cascader — 階層パスピッカー（カラム式）。
+ * value は常に string[] (単一) または string[][] (複数)。
+ * 絶対に flat な string を渡さない。
+ * Composed only from real @godxjp/ui components.
+ */
+
+const EXPENSE_CATEGORIES = [
+  {
+    value: "operating",
+    label: "営業費用",
+    children: [
+      {
+        value: "selling",
+        label: "販売費",
+        children: [
+          { value: "advertising", label: "広告宣伝費" },
+          { value: "travel", label: "旅費交通費" },
+          { value: "entertainment", label: "交際費" },
+        ],
+      },
+      {
+        value: "admin",
+        label: "一般管理費",
+        children: [
+          { value: "salary", label: "給料手当" },
+          { value: "rent", label: "地代家賃" },
+          { value: "utilities", label: "水道光熱費" },
+          { value: "supplies", label: "消耗品費" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "non-operating",
+    label: "営業外費用",
+    children: [
+      { value: "interest", label: "支払利息" },
+      { value: "fx-loss", label: "為替差損" },
+    ],
+  },
+];
+
+const REGIONS = [
+  {
+    value: "kanto",
+    label: "関東",
+    children: [
+      {
+        value: "tokyo",
+        label: "東京都",
+        children: [
+          { value: "shinjuku", label: "新宿区" },
+          { value: "shibuya", label: "渋谷区" },
+          { value: "chiyoda", label: "千代田区" },
+        ],
+      },
+      {
+        value: "kanagawa",
+        label: "神奈川県",
+        children: [
+          { value: "yokohama", label: "横浜市" },
+          { value: "kawasaki", label: "川崎市" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "kansai",
+    label: "関西",
+    children: [
+      {
+        value: "osaka",
+        label: "大阪府",
+        children: [
+          { value: "osaka-city", label: "大阪市" },
+          { value: "sakai", label: "堺市" },
+        ],
+      },
+      {
+        value: "kyoto",
+        label: "京都府",
+        children: [{ value: "kyoto-city", label: "京都市" }],
+      },
+    ],
+  },
+];
+
+/**
+ * 配送区分ツリー — ノード単位のフラグを実演:
+ * - disabled: そのノード（および子）を選択不可（休止中の区分）
+ * - isLeaf: 子を持たない葉として扱い、カスケード矢印を出さない
+ * - disableCheckbox: TreeOption 共通フラグ（チェックボックスのみ無効化の意図を表す）
+ */
+const SHIPPING_TYPES: TreeOptionProp[] = [
+  {
+    value: "domestic",
+    label: "国内配送",
+    children: [
+      { value: "standard", label: "通常便" },
+      { value: "express", label: "速達便", disableCheckbox: true },
+      { value: "cool", label: "クール便（休止中）", disabled: true },
+    ],
+  },
+  {
+    value: "international",
+    label: "国際配送（準備中）",
+    disabled: true,
+    children: [{ value: "ems", label: "EMS" }],
+  },
+  // isLeaf: 子なしの確定ノード（カスケードしない）
+  { value: "pickup", label: "店頭受取", isLeaf: true },
+];
+
+/**
+ * fieldNames で実 API 形状（id / name / items）を value/label/children へ写像。
+ * 実データは value/label/children 以外のキーを使うことが多い。
+ */
+const ORG_UNITS = [
+  {
+    id: "sales",
+    name: "営業本部",
+    items: [
+      { id: "sales-east", name: "東日本営業部" },
+      { id: "sales-west", name: "西日本営業部" },
+    ],
+  },
+  {
+    id: "dev",
+    name: "開発本部",
+    items: [
+      { id: "dev-frontend", name: "フロントエンド部" },
+      { id: "dev-backend", name: "バックエンド部" },
+    ],
+  },
+];
+
+/**
+ * Resolve a value-path (string[]) to its human labels by walking the option tree.
+ * `value` carries machine codes; a readout must never show those — map to labels.
+ * `keys` adapts to fieldNames-mapped data (e.g. id/name/items).
+ */
+function pathToLabels(
+  options: readonly Record<string, any>[],
+  path: string[],
+  keys = { value: "value", label: "label", children: "children" },
+): string[] {
+  const labels: string[] = [];
+  let level: readonly Record<string, any>[] | undefined = options;
+  for (const seg of path) {
+    const node = level?.find((n) => n[keys.value] === seg);
+    if (!node) break;
+    labels.push(String(node[keys.label]));
+    level = node[keys.children] as readonly Record<string, any>[] | undefined;
+  }
+  return labels;
+}
+
+const ORG_KEYS = { value: "id", label: "name", children: "items" };
+
+export default function Demo() {
+  const [categoryPath, setCategoryPath] = useState<string[]>([]);
+  const [regionPath, setRegionPath] = useState<string[]>([]);
+  const [multiPaths, setMultiPaths] = useState<string[][]>([]);
+  const [shippingPaths, setShippingPaths] = useState<string[][]>([]);
+  const [orgPath, setOrgPath] = useState<string[]>([]);
+  const [hoverPath, setHoverPath] = useState<string[]>([]);
+
+  return (
+    <PageContainer
+      title="Cascader"
+      subtitle="階層パスピッカー · value は string[] (単一) / string[][] (複数)"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>経費カテゴリ選択（単一・検索付き）</CardTitle>
+            <CardDescription>
+              費用科目の階層パスを選択。showSearch でリーフまで全文検索できる。 選択パス:{" "}
+              {categoryPath.length > 0
+                ? pathToLabels(EXPENSE_CATEGORIES, categoryPath).join(" / ")
+                : "未選択"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="category-path" label="経費カテゴリ">
+              <Cascader
+                id="category-path"
+                options={EXPENSE_CATEGORIES}
+                value={categoryPath}
+                onValueChange={(v) => setCategoryPath(v as string[])}
+                showSearch
+                placeholder="カテゴリを選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>地域選択（単一・changeOnSelect）</CardTitle>
+            <CardDescription>
+              changeOnSelect=true で中間ノードも確定値として選択可能。 選択パス:{" "}
+              {regionPath.length > 0 ? pathToLabels(REGIONS, regionPath).join(" / ") : "未選択"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="region-path" label="地域">
+              <Cascader
+                id="region-path"
+                options={REGIONS}
+                value={regionPath}
+                onValueChange={(v) => setRegionPath(v as string[])}
+                changeOnSelect
+                placeholder="地域を選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>複数経費カテゴリ（multiple）</CardTitle>
+            <CardDescription>
+              multiple=true で string[][] を管理。チェックボックスで複数パスを選択。 選択数:{" "}
+              {multiPaths.length} パス
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="multi-category" label="経費カテゴリ（複数）">
+              <Cascader
+                id="multi-category"
+                options={EXPENSE_CATEGORIES}
+                multiple
+                value={multiPaths}
+                onValueChange={(v) => setMultiPaths(v as string[][])}
+                showSearch
+                placeholder="カテゴリを選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>地域選択（expandTrigger=&quot;hover&quot;）</CardTitle>
+            <CardDescription>
+              expandTrigger=&quot;hover&quot; で列のホバーだけで次の階層が展開（既定は
+              &quot;click&quot;）。 リーフはクリックで確定。 選択パス:{" "}
+              {hoverPath.length > 0 ? pathToLabels(REGIONS, hoverPath).join(" / ") : "未選択"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="hover-region" label="地域（ホバー展開）">
+              <Cascader
+                id="hover-region"
+                options={REGIONS}
+                value={hoverPath}
+                onValueChange={(v) => setHoverPath(v as string[])}
+                expandTrigger="hover"
+                placeholder="地域を選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>配送区分（ノード単位フラグ・複数）</CardTitle>
+            <CardDescription>
+              ノードの disabled で「クール便」「国際配送」を選択不可（薄表示）に、isLeaf
+              で「店頭受取」を 子なし確定ノードに。 選択数: {shippingPaths.length} パス
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="shipping-type" label="配送区分">
+              <Cascader
+                id="shipping-type"
+                options={SHIPPING_TYPES}
+                multiple
+                value={shippingPaths}
+                onValueChange={(v) => setShippingPaths(v as string[][])}
+                placeholder="配送区分を選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>組織選択（fieldNames でキー写像）</CardTitle>
+            <CardDescription>
+              実 API 形状（id / name / items）を fieldNames=&#123;&#123; value: &quot;id&quot;,
+              label: &quot;name&quot;, children: &quot;items&quot; &#125;&#125; で写像。 選択パス:{" "}
+              {orgPath.length > 0
+                ? pathToLabels(ORG_UNITS, orgPath, ORG_KEYS).join(" / ")
+                : "未選択"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="org-unit" label="所属組織">
+              <Cascader
+                id="org-unit"
+                options={ORG_UNITS as unknown as TreeOptionProp[]}
+                fieldNames={{ value: "id", label: "name", children: "items" }}
+                value={orgPath}
+                onValueChange={(v) => setOrgPath(v as string[])}
+                placeholder="組織を選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              非制御モード（defaultValue・allowClear=&#123;false&#125;）
+            </CardTitle>
+            <CardDescription>
+              defaultValue で初期パスを与え、状態を内部管理（非制御）。allowClear=&#123;false&#125;
+              で クリア（×）ボタンを無効化し、必須項目として常に値を保持。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="default-category" label="既定カテゴリ（非制御）">
+              <Cascader
+                id="default-category"
+                options={EXPENSE_CATEGORIES}
+                defaultValue={["operating", "selling", "advertising"]}
+                allowClear={false}
+                placeholder="カテゴリを選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>無効状態（disabled・選択済み）</CardTitle>
+            <CardDescription>
+              disabled で操作不可。value
+              を与えて「選択済みのまま無効化」も表現（編集権限なしの読み取り表示）。
+              無効時はクリア（×）も非表示。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="disabled-empty" label="無効（未選択）">
+                <Cascader
+                  id="disabled-empty"
+                  options={EXPENSE_CATEGORIES}
+                  disabled
+                  placeholder="カテゴリを選択..."
+                />
+              </FormField>
+              <FormField id="disabled-selected" label="無効（選択済み）">
+                <Cascader
+                  id="disabled-selected"
+                  options={EXPENSE_CATEGORIES}
+                  disabled
+                  defaultValue={["operating", "admin", "salary"]}
+                  placeholder="カテゴリを選択..."
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}