@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,189 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { ColorPicker, FormField } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/** A fixed tag palette (gh#1055): tags pick from it, never from free hex. */
-const TAG_PALETTE = ["#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#9333ea"];
-
-/**
- * ColorPicker — hex color swatch + optional editable hex input.
- * Always initialize state to a valid 3- or 6-digit hex string.
- * Use controlled mode (value + onValueChange); no uncontrolled path.
- * Composed only from real @godxjp/ui components.
- *
- * `presets` / `panelRender` port antd ColorPicker (gh#1055). Deviations from antd, on purpose:
- * - `colors` are hex strings only — the value is hex; antd also takes colour objects/gradients.
- * - There is no popover: the picker is inline, so `panelRender` replaces the inline body. The
- *   presets-only recipe is antd's own: `panelRender={(_, { components: { Presets } }) => <Presets />}`.
- * - Each swatch is a real radio (APG radio group, named by its hex, arrow keys select); antd's
- *   preset blocks are click-only divs.
- */
-export default function Demo() {
-  const [brandColor, setBrandColor] = useState("#2563eb");
-  const [accentColor, setAccentColor] = useState("#16a34a");
-  const [categoryColor, setCategoryColor] = useState("#dc2626");
-  const [validatedColor, setValidatedColor] = useState("#9333ea");
-  const [labelColor, setLabelColor] = useState("#16a34a");
-  const [tagColor, setTagColor] = useState("#2563eb");
-  const { t } = useTranslation();
-
-  return (
-    <PageContainer title="ColorPicker" subtitle="カラーピッカー · スウォッチ＋Hex入力">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ブランドカラー設定</CardTitle>
-            <CardDescription>
-              FormField と組み合わせてラベル・バリデーションを付与。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="brand-color" label="ブランドカラー">
-              <ColorPicker id="brand-color" value={brandColor} onValueChange={setBrandColor} />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>アクセントカラー（Hex入力付き）</CardTitle>
-            <CardDescription>
-              showHexInput={"{true}"} — デフォルト。Hex 文字列を直接編集可能。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="accent-color" label="アクセントカラー" helper="請求書のテーマカラー">
-              <ColorPicker
-                id="accent-color"
-                value={accentColor}
-                onValueChange={setAccentColor}
-                showHexInput
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>勘定科目カテゴリカラー（スウォッチのみ）</CardTitle>
-            <CardDescription>
-              showHexInput={"{false}"} — テーブルセルやサイドバーのコンパクト表示向け。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="category-color" label="カテゴリカラー">
-              <Flex direction="row" gap="md" className="items-center">
-                <ColorPicker
-                  id="category-color"
-                  value={categoryColor}
-                  onValueChange={setCategoryColor}
-                  showHexInput={false}
-                />
-                <Text tone="muted">選択中: {categoryColor}</Text>
-              </Flex>
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("showcase.colorPicker.presetsTitle")}</CardTitle>
-            <CardDescription>{t("showcase.colorPicker.presetsDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="label-color" label={t("showcase.colorPicker.paletteLabel")}>
-              <ColorPicker
-                id="label-color"
-                value={labelColor}
-                onValueChange={setLabelColor}
-                presets={[
-                  {
-                    key: "recommended",
-                    label: t("showcase.colorPicker.recommendedGroup"),
-                    colors: TAG_PALETTE,
-                  },
-                  {
-                    key: "recent",
-                    label: t("showcase.colorPicker.recentGroup"),
-                    colors: ["#2563eb", "#16a34a"],
-                    defaultOpen: false,
-                  },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("showcase.colorPicker.presetsOnlyTitle")}</CardTitle>
-            <CardDescription>{t("showcase.colorPicker.presetsOnlyDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField
-              id="tag-color"
-              label={t("showcase.colorPicker.tagColorLabel")}
-              helper={t("showcase.colorPicker.tagColorHelper")}
-            >
-              <ColorPicker
-                id="tag-color"
-                name="tag_color"
-                value={tagColor}
-                onValueChange={setTagColor}
-                presets={[
-                  {
-                    key: "tags",
-                    label: t("showcase.colorPicker.recommendedGroup"),
-                    colors: TAG_PALETTE,
-                  },
-                ]}
-                panelRender={(_, { components: { Presets } }) => <Presets />}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Hex バリデーションと確定動作</CardTitle>
-            <CardDescription>
-              Hex 入力は blur または Enter で確定。確定時に #RGB / #RRGGBB
-              形式でなければ、直前の有効な値へ自動的に巻き戻る。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField
-              id="validated-color"
-              label="ラベルカラー"
-              helper="例えば「zzz」と入力して Enter を押すと、入力は破棄され #9333EA に戻る。"
-            >
-              <ColorPicker
-                id="validated-color"
-                value={validatedColor}
-                onValueChange={setValidatedColor}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>無効状態</CardTitle>
-            <CardDescription>
-              disabled · スウォッチと Hex 入力の両方が無効化される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="disabled-color" label="テーマカラー">
-              <ColorPicker id="disabled-color" value="#6b7280" disabled />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/command-palette.tsx

@@ -1,179 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import {
-  CommandPalette,
-  type CommandPaletteItem,
-  type CommandPaletteLabels,
-} from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-const labels: CommandPaletteLabels = {
-  open: "画面を検索",
-  title: "コマンドパレット",
-  description: "移動先または実行する操作を検索します。",
-  placeholder: "画面や操作を検索…",
-  empty: "一致する項目はありません。",
-  loading: "候補を読み込み中…",
-  move: "移動",
-  select: "開く",
-  close: "閉じる",
-};
-
-const groups = [
-  {
-    id: "screens",
-    label: "画面",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", meta: "/dashboard" },
-      { id: "members", label: "メンバー管理", meta: "/organization/members" },
-      {
-        id: "billing",
-        label: "請求とサブスクリプション",
-        meta: "権限が必要",
-        disabled: true,
-      },
-    ],
-  },
-  {
-    id: "actions",
-    label: "操作",
-    items: [{ id: "invite", label: "メンバーを招待", meta: "⌘ I" }],
-  },
-];
-
-const directory = [
-  { id: "tanaka", label: "田中 太郎", meta: "経理部" },
-  { id: "suzuki", label: "鈴木 花子", meta: "情報システム部" },
-  { id: "sato", label: "佐藤 健", meta: "営業部" },
-  { id: "takahashi", label: "高橋 美咲", meta: "人事部" },
-];
-
-const serverLabels: CommandPaletteLabels = {
-  ...labels,
-  open: "メンバーを検索",
-  title: "メンバー検索",
-  description: "サーバー検索で該当するメンバーを表示します。",
-  placeholder: "氏名または部署で検索…",
-  empty: "該当するメンバーはいません。",
-  loading: "検索中…",
-};
-
-/**
- * Server-backed search-as-you-type. The consumer owns the query (`onSearchChange`) and the result
- * set, so `shouldFilter={false}` stops the palette from scoring the same rows a second time — and
- * with it off the palette derives the empty node from `groups`, never from cmdk's scheduled count.
- * `loading` is held for the whole in-flight window: a request that has not answered is not an
- * empty result, so "該当なし" can only appear on a query the server actually answered.
- */
-function ServerSearchDemo() {
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState(directory);
-  const [loading, setLoading] = useState(false);
-  const requestRef = useRef(0);
-
-  useEffect(() => {
-    const request = (requestRef.current += 1);
-    setLoading(true);
-    const timer = setTimeout(() => {
-      if (request !== requestRef.current) return;
-      const trimmed = query.trim();
-      setResults(
-        trimmed === ""
-          ? directory
-          : directory.filter((entry) => `${entry.label}${entry.meta}`.includes(trimmed)),
-      );
-      setLoading(false);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [query]);
-
-  return (
-    <Flex direction="col" gap="md">
-      <CommandPalette
-        shouldFilter={false}
-        search={query}
-        onSearchChange={setQuery}
-        loading={loading}
-        groups={[{ id: "members", label: "メンバー", items: results }]}
-        labels={serverLabels}
-        onSelect={(item) => setQuery(String(item.label))}
-      />
-      <Text size="sm" tone="muted" aria-live="polite">
-        {`クエリ: ${query === "" ? "(未入力)" : query} · 結果 ${results.length} 件`}
-      </Text>
-    </Flex>
-  );
-}
-
-/**
- * CommandPalette — searchable keyboard navigation with controlled async/error states and a durable
- * selected-item readout. Press Command/Ctrl+K or use the trigger.
- */
-export default function Demo() {
-  const [selected, setSelected] = useState<CommandPaletteItem | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string>();
-
-  return (
-    <PageContainer title="CommandPalette" subtitle="キーボード検索 · 選択 · loading/error recovery">
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>組織コンソールの移動先</CardTitle>
-          <CardDescription>
-            Command/Ctrl+K で開き、矢印キーで移動し、Enter で選択します。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Flex direction="col" gap="md">
-            <CommandPalette
-              groups={groups}
-              labels={labels}
-              loading={loading}
-              error={error}
-              onSelect={(item) => setSelected(item)}
-            />
-            <Text size="sm" tone="muted" aria-live="polite">
-              {selected ? `選択: ${String(selected.label)}` : "まだ項目を選択していません。"}
-            </Text>
-            <Flex gap="sm" wrap>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  setError(undefined);
-                  setLoading((current) => !current);
-                }}
-              >
-                読み込み状態を切替
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  setLoading(false);
-                  setError((current) => (current ? undefined : "候補を取得できませんでした。"));
-                }}
-              >
-                エラー状態を切替
-              </Button>
-            </Flex>
-          </Flex>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>サーバー検索（search-as-you-type）</CardTitle>
-          <CardDescription>
-            `onSearchChange` でクエリを受け取り、結果を `groups` として返します。`shouldFilter=
-            false` でクライアント側の再フィルタを止め、空状態は `groups` から決まります。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ServerSearchDemo />
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}