@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-entry/command.tsx

@@ -1,341 +0,0 @@
-import { useEffect, useState } from "react";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@godxjp/ui/data-display";
-import {
-  Checkbox,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@godxjp/ui/data-entry";
-import { Skeleton } from "@godxjp/ui/feedback";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { ChevronDown } from "lucide-react";
-
-/**
- * Command — キーボードナビゲーション対応のコマンドパレット。
- * 必ずツリー構造を守る: Command > CommandInput + CommandList > CommandGroup > CommandItem。
- * CommandItem は必ず CommandList の内側に配置する。
- * CommandEmpty は CommandList の内側に置くと自動で表示/非表示が切り替わる。
- * Composed only from real @godxjp/ui components.
- */
-
-type Suggestion = { value: string; label: string };
-
-const VENDOR_DIRECTORY: Suggestion[] = [
-  { value: "v-001", label: "株式会社山田商事" },
-  { value: "v-002", label: "山下電機株式会社" },
-  { value: "v-003", label: "やまと運輸サービス" },
-  { value: "v-004", label: "佐藤工業株式会社" },
-  { value: "v-005", label: "田中物産" },
-];
-
-const MEMBERS: Suggestion[] = [
-  { value: "m-001", label: "山田 太郎" },
-  { value: "m-002", label: "佐藤 花子" },
-  { value: "m-003", label: "鈴木 一郎" },
-  { value: "m-004", label: "高橋 美咲" },
-  { value: "m-005", label: "PHAM THAI DUONG（プロジェクト外）" },
-];
-
-export default function Demo() {
-  // Card 1: grouped quick-select. Controlled `value` pre-highlights an item so the
-  // [aria-selected=true] accent is visible at rest, without keyboard interaction.
-  const [account, setAccount] = useState<string>("1020");
-
-  // Card 2: action palette — its own independent state (Rule #6).
-  const [action, setAction] = useState<string>("");
-
-  // Card 3: async server-side search. `shouldFilter={false}` + controlled input +
-  // an externally-fetched result list, staged mid-flight so the loading row renders.
-  const [query, setQuery] = useState<string>("やま");
-  const [loading, setLoading] = useState<boolean>(true);
-  const [results, setResults] = useState<Suggestion[]>([]);
-
-  // Card 4: filter facet — a checklist, so the list is `split` (ruled rows, 0 list padding).
-  const [assignees, setAssignees] = useState<string[]>(["m-002"]);
-  const toggleAssignee = (member: string) =>
-    setAssignees((current) =>
-      current.includes(member) ? current.filter((m) => m !== member) : [...current, member],
-    );
-
-  useEffect(() => {
-    let active = true;
-    setLoading(true);
-    // Simulated server round-trip; the delay keeps the loading state observable at rest.
-    const timer = setTimeout(() => {
-      if (!active) return;
-      const q = query.trim();
-      setResults(q ? VENDOR_DIRECTORY.filter((v) => v.label.includes(q)) : []);
-      setLoading(false);
-    }, 1500);
-    return () => {
-      active = false;
-      clearTimeout(timer);
-    };
-  }, [query]);
-
-  return (
-    <PageContainer
-      title="Command"
-      subtitle="コマンドパレット / キーボードナビゲーション · cmdk ベース"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>勘定科目クイック選択</CardTitle>
-            <CardDescription>
-              グループ化された科目リストをキーボードで素早く選択。 ハイライト中の科目を value
-              で制御（現在: {account || "未選択"}）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Command label="勘定科目クイック選択" loop value={account} onValueChange={setAccount}>
-              <CommandInput placeholder="科目名・コードで検索..." />
-              <CommandList>
-                <CommandEmpty>該当する科目がありません。</CommandEmpty>
-                <CommandGroup heading="資産">
-                  <CommandItem value="1010" onSelect={setAccount}>
-                    1010 · 現金
-                  </CommandItem>
-                  <CommandItem value="1020" onSelect={setAccount}>
-                    1020 · 普通預金
-                  </CommandItem>
-                  <CommandItem value="1030" onSelect={setAccount}>
-                    1030 · 売掛金
-                  </CommandItem>
-                  <CommandItem value="1040" onSelect={setAccount}>
-                    1040 · 前払費用
-                  </CommandItem>
-                </CommandGroup>
-                <CommandGroup heading="負債">
-                  <CommandItem value="2010" onSelect={setAccount}>
-                    2010 · 買掛金
-                  </CommandItem>
-                  <CommandItem value="2020" onSelect={setAccount}>
-                    2020 · 未払費用
-                  </CommandItem>
-                  <CommandItem value="2030" onSelect={setAccount} disabled>
-                    2030 · 廃止済科目（選択不可）
-                  </CommandItem>
-                </CommandGroup>
-                <CommandGroup heading="収益">
-                  <CommandItem value="4010" onSelect={setAccount}>
-                    4010 · 売上高
-                  </CommandItem>
-                  <CommandItem value="4020" onSelect={setAccount}>
-                    4020 · 受取利息
-                  </CommandItem>
-                </CommandGroup>
-                <CommandGroup heading="費用">
-                  <CommandItem value="5010" onSelect={setAccount}>
-                    5010 · 売上原価
-                  </CommandItem>
-                  <CommandItem value="5020" onSelect={setAccount}>
-                    5020 · 給料手当
-                  </CommandItem>
-                  <CommandItem value="5030" onSelect={setAccount}>
-                    5030 · 旅費交通費
-                  </CommandItem>
-                  <CommandItem value="5040" onSelect={setAccount}>
-                    5040 · 通信費
-                  </CommandItem>
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>担当者フィルター（split）</CardTitle>
-            <CardDescription>
-              Popover + Command に split を付けると、行間に区切り線・リスト余白 0・行は popover
-              の端まで届く一つの箱として描画されます。チェックボックスで複数選択（選択中:{" "}
-              {assignees.length} 名）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline">
-                  担当者{assignees.length > 0 ? ` (${assignees.length})` : ""}
-                  <ChevronDown aria-hidden="true" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent flush align="start">
-                <Command label="担当者を絞り込む" split>
-                  <CommandInput placeholder="担当者 を絞り込む" />
-                  <CommandList>
-                    <CommandEmpty>該当する担当者がいません。</CommandEmpty>
-                    <CommandGroup>
-                      {MEMBERS.map((member) => {
-                        const checked = assignees.includes(member.value);
-                        return (
-                          <CommandItem
-                            key={member.value}
-                            value={member.label}
-                            aria-checked={checked}
-                            onSelect={() => toggleAssignee(member.value)}
-                          >
-                            {/* The ROW is the option and owns the click; the box only mirrors it,
-                                so it leaves the tab ring (TreeSelect does the same). */}
-                            <Checkbox
-                              checked={checked}
-                              tabIndex={-1}
-                              onCheckedChange={() => toggleAssignee(member.value)}
-                              aria-labelledby={`assignee-${member.value}`}
-                            />
-                            <span id={`assignee-${member.value}`}>{member.label}</span>
-                          </CommandItem>
-                        );
-                      })}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>勤怠アクションパレット（Cmd+K 想定）</CardTitle>
-            <CardDescription>
-              ページ横断のクイックアクション。キーワードで絞り込み、Enter で実行。 実行:{" "}
-              {action || "なし"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Command label="アクションパレット" loop vimBindings={false}>
-              <CommandInput placeholder="アクションを検索..." />
-              <CommandList>
-                <CommandEmpty>一致するアクションがありません。</CommandEmpty>
-                <CommandGroup heading="打刻">
-                  <CommandItem
-                    value="clock-in"
-                    keywords={["出勤", "打刻", "開始"]}
-                    onSelect={setAction}
-                  >
-                    出勤打刻
-                  </CommandItem>
-                  <CommandItem
-                    value="clock-out"
-                    keywords={["退勤", "打刻", "終了"]}
-                    onSelect={setAction}
-                  >
-                    退勤打刻
-                  </CommandItem>
-                  <CommandItem value="break-start" keywords={["休憩", "開始"]} onSelect={setAction}>
-                    休憩開始
-                  </CommandItem>
-                </CommandGroup>
-                <CommandGroup heading="申請">
-                  <CommandItem
-                    value="apply-leave"
-                    keywords={["有給", "休暇", "申請"]}
-                    onSelect={setAction}
-                  >
-                    有給休暇申請
-                  </CommandItem>
-                  <CommandItem
-                    value="apply-overtime"
-                    keywords={["残業", "時間外", "申請"]}
-                    onSelect={setAction}
-                  >
-                    時間外勤務申請
-                  </CommandItem>
-                  <CommandItem
-                    value="apply-remote"
-                    keywords={["テレワーク", "在宅", "リモート", "申請"]}
-                    onSelect={setAction}
-                  >
-                    テレワーク申請
-                  </CommandItem>
-                </CommandGroup>
-                <CommandGroup heading="ナビゲーション">
-                  <CommandItem
-                    value="nav-dashboard"
-                    keywords={["ダッシュボード", "トップ", "ホーム"]}
-                    onSelect={setAction}
-                  >
-                    ダッシュボードへ移動
-                  </CommandItem>
-                  <CommandItem
-                    value="nav-attendance"
-                    keywords={["勤怠", "一覧", "確認"]}
-                    onSelect={setAction}
-                  >
-                    勤怠一覧へ移動
-                  </CommandItem>
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>取引先サーバー検索（非同期）</CardTitle>
-            <CardDescription>
-              shouldFilter={"{false}"} で内蔵フィルタを無効化し、入力値（value /
-              onValueChange）でサーバー検索した結果だけを表示。 取得中はローディング行、0 件は
-              CommandEmpty を表示。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Command label="取引先サーバー検索" loop shouldFilter={false}>
-              <CommandInput
-                placeholder="取引先名で検索..."
-                value={query}
-                onValueChange={setQuery}
-              />
-              <CommandList aria-busy={loading}>
-                {loading ? (
-                  <Flex
-                    direction="col"
-                    gap="sm"
-                    className="ui-command-group"
-                    role="option"
-                    aria-disabled="true"
-                    aria-label="読み込み中"
-                    aria-live="polite"
-                  >
-                    <Skeleton className="h-8 w-full" />
-                    <Skeleton className="h-8 w-full" />
-                    <Skeleton className="h-8 w-full" />
-                  </Flex>
-                ) : (
-                  <>
-                    <CommandEmpty>該当する取引先が見つかりません。</CommandEmpty>
-                    {results.length > 0 ? (
-                      <CommandGroup heading="検索結果">
-                        {results.map((v) => (
-                          <CommandItem key={v.value} value={v.value} onSelect={() => undefined}>
-                            {v.label}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    ) : null}
-                  </>
-                )}
-              </CommandList>
-            </Command>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/country-picker-recipe.tsx

@@ -1,175 +0,0 @@
-import { useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { FormField, Select } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { SelectLoadParams, SelectLoadResult, SelectOption } from "@godxjp/ui/data-entry";
-
-/**
- * Country picker — a RECIPE, not a component. There is no CountrySelect in @godxjp/ui:
- * a country picker is just a data-driven `Select`. The INTERNATIONAL-STANDARD way to build it:
- *   - values are ISO 3166-1 alpha-2 codes (you keep only the code array);
- *   - labels are derived at render time from CLDR via `Intl.DisplayNames(locale, {type:"region"})`,
- *     so they are correct AND localized — never hardcode country names per language;
- *   - do NOT use emoji regional-indicator flags (🇯🇵): they do not render on Windows / many Linux.
- *     If you want flags, ship an SVG set and draw it via `renderOption`.
- * showSearch filters a short bundled list; loadOptions scales to a long remote list (server search +
- * pagination), with selectedLabel covering a value whose option page hasn't loaded yet. name= submits
- * the ISO code with the form. Real @godxjp/ui only.
- */
-
-// You bundle the ISO 3166-1 alpha-2 codes you support (there is no Intl enumerator for "all regions").
-const COUNTRY_CODES = ["JP", "CN", "KR", "VN", "SG", "US", "GB", "DE", "FR", "AU"] as const;
-
-const REGION_GROUP: Record<string, string> = {
-  JP: "アジア",
-  CN: "アジア",
-  KR: "アジア",
-  VN: "アジア",
-  SG: "アジア",
-  GB: "ヨーロッパ",
-  DE: "ヨーロッパ",
-  FR: "ヨーロッパ",
-  US: "その他",
-  AU: "その他",
-};
-
-// Localized display names come from CLDR. In a real app pass the active locale (e.g. from
-// useAppContext().locale); here we render Japanese names to match the surrounding demo.
-const regionNames = new Intl.DisplayNames(["ja"], { type: "region" });
-
-const COUNTRIES: SelectOption[] = COUNTRY_CODES.map((code) => ({
-  value: code,
-  label: regionNames.of(code) ?? code,
-  group: REGION_GROUP[code],
-}));
-
-// A real picker over every country uses loadOptions: the server filters + paginates, the client
-// never bundles the full list. We simulate latency so fetching/empty states are real, and filter
-// the bundled set by localized name OR ISO code (server-side in production).
-async function loadCountries({ query }: SelectLoadParams): Promise<SelectLoadResult> {
-  await new Promise((resolve) => setTimeout(resolve, 600));
-  const needle = query.trim().toLowerCase();
-  const options = needle
-    ? COUNTRIES.filter(
-        (c) => c.label.toLowerCase().includes(needle) || c.value.toLowerCase().includes(needle),
-      )
-    : COUNTRIES;
-  return { options, hasMore: false };
-}
-
-// renderOption draws an ISO-code chip + CLDR name. NOT an emoji flag (broken on Windows/Linux); a
-// real product ships an SVG flag set and renders it here. Tokens only — no hex, no inline style.
-function renderCountry(option: SelectOption) {
-  return (
-    <Flex align="center" gap="sm">
-      <Badge variant="secondary">{option.value}</Badge>
-      <Text truncate>{option.label}</Text>
-    </Flex>
-  );
-}
-
-export default function Demo() {
-  const [billing, setBilling] = useState("JP");
-  const [partner, setPartner] = useState("");
-  const [residence, setResidence] = useState("VN");
-
-  return (
-    <PageContainer
-      title="Country picker (recipe)"
-      subtitle="国選択は Select のレシピ · 専用コンポーネントは無い（値は ISO コード、名称は CLDR）"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>請求先の国（必須・日本デフォルト・クリア不可）</CardTitle>
-            <CardDescription>
-              value は ISO 3166-1 alpha-2 コード、ラベルは
-              Intl.DisplayNames（CLDR）で生成する（国名を
-              ハードコードしない・絵文字フラグも使わない）。 showSearch で絞り込み、name
-              でフォーム送信。 必須項目なのでクリア ✕ は出さない（allowClear はデフォルト false）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="billing-country" label="請求先の国" required>
-              <Select
-                id="billing-country"
-                name="billingCountry"
-                value={billing}
-                onValueChange={setBilling}
-                showSearch
-                searchPlaceholder="国名 / ISO コードで検索..."
-                emptyMessage="該当する国がありません"
-                options={COUNTRIES}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>取引先の国（任意・クリア可）</CardTitle>
-            <CardDescription>
-              allowClear を付けて「指定なし」に戻せるようにする（デフォルトは false）。placeholder
-              で空状態を案内する。 任意項目なので未選択（プレースホルダー表示）を初期値にしている。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="partner-country" label="取引先の国">
-              <Select
-                id="partner-country"
-                name="partnerCountry"
-                value={partner}
-                onValueChange={setPartner}
-                showSearch
-                allowClear
-                placeholder="国を選択..."
-                searchPlaceholder="国名 / ISO コードで検索..."
-                emptyMessage="該当する国がありません"
-                options={COUNTRIES}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>居住国（loadOptions・遠隔リスト・SVG フラグ枠）</CardTitle>
-            <CardDescription>
-              全世界の長いリストは options を同梱せず loadOptions でサーバー検索＋ページングする。
-              読み込み中は loadingMessage、0 件は emptyMessage を出す。selectedLabel は値の option
-              が まだ読み込まれていないときの表示名。renderOption で ISO
-              コードチップ＋国名を描画（絵文字 フラグは使わず、実運用では SVG フラグを差し込む）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="residence-country" label="居住国">
-              <Select
-                id="residence-country"
-                name="residenceCountry"
-                value={residence}
-                onValueChange={setResidence}
-                showSearch
-                loadOptions={loadCountries}
-                renderOption={renderCountry}
-                selectedLabel={regionNames.of(residence) ?? residence}
-                placeholder="国を選択..."
-                searchPlaceholder="国名 / ISO コードで検索..."
-                loadingMessage="国を読み込み中..."
-                emptyMessage="該当する国がありません"
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}