@godxjp/ui 19.0.0 → 19.2.0

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

@@ -0,0 +1,149 @@
+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>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/form/examples/employee-settings.tsx

@@ -0,0 +1,267 @@
+import { useState } from "react";
+
+import {
+  CheckboxGroup,
+  Field,
+  Form,
+  FormField,
+  Input,
+  RadioGroup,
+  Select,
+  Switch,
+  TimePicker,
+} from "@godxjp/ui/data-entry";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Avatar,
+  AvatarFallback,
+} from "@godxjp/ui/data-display";
+import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { Settings, ShieldCheck, User, Users } from "lucide-react";
+
+const sections: SidebarSectionProp[] = [
+  {
+    label: "設定",
+    items: [
+      { id: "profile", label: "プロフィール", icon: User },
+      { id: "members", label: "メンバー", icon: Users },
+      { id: "security", label: "セキュリティ", icon: ShieldCheck },
+      { id: "preferences", label: "環境設定", icon: Settings },
+    ],
+  },
+];
+
+/**
+ * Employee settings — a horizontal-layout (labelWidth) settings screen using Card sections. Shows
+ * read-only system fields (employee number, joined date), a disabled field, controlled selects and
+ * choice groups, and a save flow with a pending spinner and a "保存しました" success Alert. The
+ * action bar lives in the page footer (Cancel + Save, primary rightmost — rule 41). Composed only
+ * from real @godxjp/ui primitives; typography via the Text primitive.
+ */
+export default function Demo() {
+  const [name, setName] = useState("山田 太郎");
+  const [department, setDepartment] = useState("sales");
+  const [role, setRole] = useState("member");
+  const [notify, setNotify] = useState<string[]>(["email", "slack"]);
+  const [coreStart, setCoreStart] = useState("10:00");
+  const [coreEnd, setCoreEnd] = useState("15:00");
+  const [twoFactor, setTwoFactor] = useState(true);
+  const [status, setStatus] = useState<"idle" | "pending" | "saved">("idle");
+
+  function dirty() {
+    if (status === "saved") setStatus("idle");
+  }
+
+  function handleSave(event: React.FormEvent) {
+    event.preventDefault();
+    setStatus("pending");
+    window.setTimeout(() => setStatus("saved"), 1000);
+  }
+
+  const pending = status === "pending";
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="profile"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreBooks", role: "設定", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={
+        <Topbar
+          start={
+            <Avatar className="rounded-md">
+              <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+                C
+              </AvatarFallback>
+            </Avatar>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="従業員設定"
+        breadcrumb={[{ label: "設定", to: "#" }, { label: "プロフィール" }]}
+        footer={
+          <Flex direction="row" wrap gap="sm" justify="end">
+            <Button variant="outline" type="button" disabled={pending}>
+              キャンセル
+            </Button>
+            <Button type="submit" form="settings-form" loading={pending} loadingText="保存中…">
+              保存
+            </Button>
+          </Flex>
+        }
+      >
+        {/* One <form> wraps all sections (nested <form> is invalid HTML). The Form sets a default
+            horizontal layout; the 勤務・通知 fields below override to vertical per-field. */}
+        <Form id="settings-form" onSubmit={handleSave} layout="horizontal" labelWidth={140}>
+          <Flex direction="col" gap="lg" className="max-w-2xl">
+            {status === "saved" ? (
+              <Alert tone="success">
+                <AlertTitle>保存しました</AlertTitle>
+                <AlertDescription>従業員設定を更新しました。</AlertDescription>
+              </Alert>
+            ) : null}
+
+            <Card>
+              <CardHeader>
+                <CardTitle level={2}>基本情報</CardTitle>
+                <CardDescription>
+                  ラベルは固定幅の列に横並び（horizontal）。システム発番の項目は read-only。
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="ui-form">
+                  <FormField id="es-number" label="従業員番号">
+                    <Input id="es-number" readOnly value="EMP-2021-0042" />
+                  </FormField>
+                  <FormField id="es-joined" label="入社日">
+                    <Input id="es-joined" readOnly value="2021-04-01" />
+                  </FormField>
+                  <FormField id="es-name" label="氏名" required>
+                    <Input
+                      id="es-name"
+                      value={name}
+                      onChange={(e) => {
+                        setName(e.target.value);
+                        dirty();
+                      }}
+                      disabled={pending}
+                    />
+                  </FormField>
+                  <FormField id="es-email" label="メール（変更不可 · disabled）">
+                    <Input id="es-email" disabled value="taro@example.co.jp" />
+                  </FormField>
+                  <FormField id="es-dept" label="所属部署">
+                    <Select
+                      id="es-dept"
+                      name="department"
+                      value={department}
+                      onValueChange={(v: string) => {
+                        setDepartment(v);
+                        dirty();
+                      }}
+                      disabled={pending}
+                      options={[
+                        { value: "sales", label: "営業部" },
+                        { value: "accounting", label: "経理部" },
+                        { value: "engineering", label: "開発部" },
+                      ]}
+                    />
+                  </FormField>
+                  <FormField id="es-role" label="権限">
+                    <RadioGroup
+                      value={role}
+                      onValueChange={(v) => {
+                        setRole(v);
+                        dirty();
+                      }}
+                      orientation="horizontal"
+                      options={[
+                        { value: "admin", label: "管理者" },
+                        { value: "member", label: "一般" },
+                        { value: "viewer", label: "閲覧のみ" },
+                      ]}
+                    />
+                  </FormField>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle level={2}>勤務・通知</CardTitle>
+                <CardDescription>コアタイムと通知チャネル、二要素認証の設定。</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Flex direction="col" gap="md">
+                  <Flex direction="row" gap="md" wrap>
+                    <FormField id="es-core-start" label="コアタイム開始" layout="vertical">
+                      <TimePicker
+                        id="es-core-start"
+                        name="core_start"
+                        value={coreStart}
+                        onValueChange={(v) => {
+                          setCoreStart(v);
+                          dirty();
+                        }}
+                        minuteStep={15}
+                      />
+                    </FormField>
+                    <FormField id="es-core-end" label="コアタイム終了" layout="vertical">
+                      <TimePicker
+                        id="es-core-end"
+                        name="core_end"
+                        value={coreEnd}
+                        onValueChange={(v) => {
+                          setCoreEnd(v);
+                          dirty();
+                        }}
+                        minuteStep={15}
+                      />
+                    </FormField>
+                  </Flex>
+                  <FormField
+                    id="es-notify"
+                    label="通知チャネル"
+                    helper="複数選択可"
+                    layout="vertical"
+                  >
+                    <CheckboxGroup
+                      value={notify}
+                      onValueChange={(v) => {
+                        setNotify(v);
+                        dirty();
+                      }}
+                      orientation="horizontal"
+                      options={[
+                        { value: "email", label: "メール" },
+                        { value: "slack", label: "Slack" },
+                        { value: "sms", label: "SMS" },
+                      ]}
+                    />
+                  </FormField>
+                  <Field
+                    id="es-2fa"
+                    label="二要素認証を有効にする"
+                    description="ログイン時にワンタイムコードを要求します"
+                  >
+                    <Switch
+                      id="es-2fa"
+                      checked={twoFactor}
+                      onCheckedChange={(c) => {
+                        setTwoFactor(c);
+                        dirty();
+                      }}
+                      disabled={pending}
+                    />
+                  </Field>
+                  <Text tone="muted" size="xs">
+                    変更は「保存」を押すまで反映されません。
+                  </Text>
+                </Flex>
+              </CardContent>
+            </Card>
+          </Flex>
+        </Form>
+      </PageContainer>
+    </AppShell>
+  );
+}