@godxjp/ui 21.0.0 → 22.0.0

package/docs/data-entry/date-range-picker.tsx

@@ -1,175 +0,0 @@
-import { useState } from "react";
-import { ja } from "date-fns/locale";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { DateRangePicker, FormField } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { DateRange } from "react-day-picker";
-
-/**
- * DateRangePicker — WAI-ARIA date-range control with two typeable ISO inputs
- * + popover calendar. Submits as ${name}_from / ${name}_to. Never compose
- * two DatePickers side-by-side to fake a range. Composed only from real
- * @godxjp/ui components.
- */
-export default function Demo() {
-  const [period, setPeriod] = useState<DateRange | undefined>({
-    from: new Date(2026, 3, 1),
-    to: new Date(2027, 2, 31),
-  });
-  const [reportRange, setReportRange] = useState<DateRange | undefined>(undefined);
-  const [campaign, setCampaign] = useState<DateRange | undefined>({
-    from: new Date(2026, 5, 1),
-    to: new Date(2026, 5, 30),
-  });
-
-  return (
-    <PageContainer
-      title="DateRangePicker"
-      subtitle="期間入力 · 開始/終了 ISO 入力 + 範囲カレンダーポップオーバー"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>基本 (controlled)</CardTitle>
-            <CardDescription>
-              value + onValueChange
-              で制御。開始/終了を直接タイプ入力するか、カレンダーアイコンを開いて
-              範囲を選択できる。name=&#34;period&#34; を指定すると period_from / period_to として
-              ISO yyyy-MM-dd でフォーム送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="period" label="会計期間" required>
-              <DateRangePicker
-                id="period"
-                name="period"
-                value={period}
-                onValueChange={setPeriod}
-                fromDate={new Date(2020, 0, 1)}
-                toDate={new Date(2030, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>レポート期間フィルター (未選択)</CardTitle>
-            <CardDescription>
-              初期値なし。選択後は reportRange_from / reportRange_to
-              がクエリパラメータとして使われる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="report-range" label="レポート期間">
-              <DateRangePicker
-                id="report-range"
-                name="reportRange"
-                value={reportRange}
-                onValueChange={setReportRange}
-                fromDate={new Date(2024, 0, 1)}
-                toDate={new Date(2026, 11, 31)}
-                placeholder="yyyy-mm-dd"
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>非制御 (defaultValue)</CardTitle>
-            <CardDescription>
-              value / onValueChange を渡さず defaultValue
-              で初期範囲だけ与える。状態はコンポーネント内部で 保持され、name=&#34;fiscal_year&#34;
-              のまま fiscal_year_from / fiscal_year_to として送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="fiscal-year" label="会計年度 (初期値のみ)">
-              <DateRangePicker
-                id="fiscal-year"
-                name="fiscal_year"
-                defaultValue={{
-                  from: new Date(2026, 3, 1),
-                  to: new Date(2027, 2, 31),
-                }}
-                fromDate={new Date(2020, 0, 1)}
-                toDate={new Date(2030, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>locale で日本語カレンダー</CardTitle>
-            <CardDescription>
-              locale=&#123;ja&#125; を渡すとポップオーバーのカレンダーが日本語表記 (曜日・月名)
-              になる。 入力欄は常に ISO yyyy-MM-dd を保持する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="campaign-period" label="キャンペーン期間">
-              <DateRangePicker
-                id="campaign-period"
-                name="campaign_period"
-                value={campaign}
-                onValueChange={setCampaign}
-                locale={ja}
-                fromDate={new Date(2024, 0, 1)}
-                toDate={new Date(2027, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>disabled 状態</CardTitle>
-            <CardDescription>確定済み期間や読み取り専用フィールドに使用。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="locked-period" label="確定期間">
-              <DateRangePicker
-                id="locked-period"
-                name="locked_period"
-                value={{
-                  from: new Date(2025, 3, 1),
-                  to: new Date(2026, 2, 31),
-                }}
-                disabled
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>期間プリセットと確定</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="preset-range" label="集計期間">
-              <DateRangePicker
-                id="preset-range"
-                name="report"
-                format="yyyy/MM/dd"
-                needConfirm
-                allowEmpty={[false, true]}
-                showWeek
-                minDate={new Date(2026, 0, 1)}
-                maxDate={new Date(2026, 11, 31)}
-                presets={[
-                  {
-                    label: "9月",
-                    value: () => ({ from: new Date(2026, 8, 1), to: new Date(2026, 8, 30) }),
-                  },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/month-picker.tsx

@@ -1,101 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, MonthPicker } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/** MonthPicker — typeable yyyy/MM field with a localized month-grid affordance. */
-export default function Demo() {
-  const [month, setMonth] = useState<Date | undefined>(new Date(2026, 6, 1));
-
-  return (
-    <PageContainer title="MonthPicker" subtitle="年月入力 · yyyy/MM + 月グリッド">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Controlled · form submission</CardTitle>
-            <CardDescription>
-              value + onValueChange で制御し、name は yyyy/MM の表示値を送信する。直接入力と
-              月グリッド選択のどちらも利用できる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="billing-month" label="請求年月" required helper="yyyy/MM 形式">
-              <MonthPicker
-                id="billing-month"
-                name="billing_month"
-                value={month}
-                onValueChange={setMonth}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Uncontrolled · bounded years</CardTitle>
-            <CardDescription>
-              defaultValue で内部状態を初期化し、fromYear / toYear で年移動を制限する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="fiscal-month" label="会計年月">
-              <MonthPicker
-                id="fiscal-month"
-                name="fiscal_month"
-                defaultValue={new Date(2025, 3, 1)}
-                fromYear={2024}
-                toYear={2027}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Clear affordance variants</CardTitle>
-            <CardDescription>
-              値がある既定状態ではクリア操作を表示する。必須フィールドでは allowClear=false
-              にして不用意な空値を防ぐ。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="clearable-month" label="クリア可能">
-                <MonthPicker id="clearable-month" defaultValue={new Date(2026, 0, 1)} />
-              </FormField>
-              <FormField id="fixed-month" label="クリア不可" required>
-                <MonthPicker
-                  id="fixed-month"
-                  defaultValue={new Date(2026, 0, 1)}
-                  allowClear={false}
-                />
-              </FormField>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Disabled · empty and populated</CardTitle>
-            <CardDescription>権限不足または確定済みデータの操作不可状態。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="disabled-month-empty" label="無効（未選択）">
-                <MonthPicker id="disabled-month-empty" disabled />
-              </FormField>
-              <FormField id="disabled-month-value" label="無効（選択済み）">
-                <MonthPicker
-                  id="disabled-month-value"
-                  defaultValue={new Date(2026, 8, 1)}
-                  disabled
-                />
-              </FormField>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/month-range-picker.tsx

@@ -1,115 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, MonthRangePicker } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { DateRange } from "react-day-picker";
-
-/**
- * MonthRangePicker — 年月 (yyyy/MM) 範囲入力。DateRangePicker と同じ
- * 「ひとつのコントロール [開始 → 終了 ✕ 📅]」規約で、月グリッドポップオーバーを
- * 視覚的アフォーダンスとして持つ。逆順 (from > to) は自動で入れ替え正規化される。
- * MonthPicker を 2 つ並べて範囲を偽装しないこと。
- */
-export default function Demo() {
-  const [closing, setClosing] = useState<DateRange | undefined>({
-    from: new Date(2026, 0, 1),
-    to: new Date(2026, 5, 1),
-  });
-  const [negotiation, setNegotiation] = useState<DateRange | undefined>(undefined);
-
-  return (
-    <PageContainer
-      title="MonthRangePicker"
-      subtitle="年月範囲入力 · 開始/終了 yyyy/MM 入力 + 月グリッドポップオーバー"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>基本 (controlled)</CardTitle>
-            <CardDescription>
-              value + onValueChange で制御。開始/終了を直接タイプ入力するか、カレンダーアイコンから
-              月グリッドで 2 ステップ選択 (開始 → 終了)。逆順に選んでも from ≤ to
-              に自動正規化される。name=&#34;closing_ym&#34; を指定すると closing_ym_from /
-              closing_ym_to として yyyy/MM でフォーム送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="closing-ym" label="締め年月" required>
-              <MonthRangePicker
-                id="closing-ym"
-                name="closing_ym"
-                value={closing}
-                onValueChange={setClosing}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>検索フィルター (未選択)</CardTitle>
-            <CardDescription>
-              初期値なし。確定済み範囲の上でもう一度選ぶと新しい範囲が開始される (reset-on-complete
-              · 開始月が固まって選び直せない、が起きない)。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="negotiation-ym" label="商談発生年月">
-              <MonthRangePicker
-                id="negotiation-ym"
-                name="search_negotiation_ym"
-                value={negotiation}
-                onValueChange={setNegotiation}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>非制御 (defaultValue) + 年クランプ</CardTitle>
-            <CardDescription>
-              defaultValue で初期範囲だけ与え、fromYear / toYear
-              でグリッドの年ナビゲーションを境界年で止める。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="fiscal-ym" label="会計年度範囲 (2024–2027)">
-              <MonthRangePicker
-                id="fiscal-ym"
-                name="fiscal_ym"
-                defaultValue={{
-                  from: new Date(2026, 3, 1),
-                  to: new Date(2027, 2, 1),
-                }}
-                fromYear={2024}
-                toYear={2027}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>disabled 状態</CardTitle>
-            <CardDescription>確定済み範囲や読み取り専用フィールドに使用。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="locked-ym" label="確定範囲">
-              <MonthRangePicker
-                id="locked-ym"
-                name="locked_ym"
-                value={{
-                  from: new Date(2025, 3, 1),
-                  to: new Date(2026, 2, 1),
-                }}
-                disabled
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}