@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-entry/transfer.tsx

@@ -1,115 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Transfer } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Transfer — デュアルリストシャトル。
- * targetKeys を自分で管理し onValueChange で更新する。
- * TransferItemProp は { key, title, description?, disabled? }。
- * Never hand-roll a two-panel picker. Composed only from real @godxjp/ui components.
- */
-
-const ALL_ACCOUNTS = [
-  { key: "1010", title: "現金", description: "流動資産" },
-  { key: "1020", title: "普通預金", description: "流動資産" },
-  { key: "1030", title: "売掛金", description: "流動資産" },
-  { key: "1040", title: "前払費用", description: "流動資産" },
-  { key: "2010", title: "機械装置", description: "固定資産" },
-  { key: "2020", title: "車両運搬具", description: "固定資産" },
-  { key: "3010", title: "買掛金", description: "流動負債" },
-  { key: "3020", title: "未払費用", description: "流動負債" },
-  { key: "4010", title: "売上高", description: "収益" },
-  { key: "5010", title: "売上原価", description: "費用" },
-  { key: "5020", title: "給料手当", description: "費用" },
-  { key: "5030", title: "旅費交通費", description: "費用", disabled: true },
-];
-
-const REPORT_COLUMNS = [
-  { key: "col-date", title: "日付", description: "仕訳日付" },
-  { key: "col-no", title: "伝票番号", description: "仕訳番号" },
-  { key: "col-debit-acct", title: "借方科目", description: "借方勘定科目コード" },
-  { key: "col-debit-amt", title: "借方金額", description: "借方金額（円）" },
-  { key: "col-credit-acct", title: "貸方科目", description: "貸方勘定科目コード" },
-  { key: "col-credit-amt", title: "貸方金額", description: "貸方金額（円）" },
-  { key: "col-tax", title: "税区分", description: "消費税区分コード" },
-  { key: "col-dept", title: "部門", description: "計上部門" },
-  { key: "col-memo", title: "摘要", description: "仕訳摘要" },
-  { key: "col-partner", title: "取引先", description: "取引先名" },
-];
-
-export default function Demo() {
-  const [mappedKeys, setMappedKeys] = useState<string[]>(["1010", "1030"]);
-  const [reportKeys, setReportKeys] = useState<string[]>([
-    "col-date",
-    "col-no",
-    "col-debit-acct",
-    "col-credit-acct",
-  ]);
-
-  return (
-    <PageContainer
-      title="Transfer"
-      subtitle="デュアルリストシャトル · targetKeys を管理し onValueChange で更新する"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>外部勘定科目マッピング（検索付き）</CardTitle>
-            <CardDescription>
-              外部から取り込んだ科目（左）を社内正規科目（右）にマッピングする。 マッピング済み:{" "}
-              {mappedKeys.length} 件
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Transfer
-              dataSource={ALL_ACCOUNTS}
-              targetKeys={mappedKeys}
-              onValueChange={(nextKeys) => setMappedKeys(nextKeys)}
-              titles={["取込科目", "マッピング済"]}
-              showSearch
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>レポート列選択（追加専用）</CardTitle>
-            <CardDescription>
-              oneWay=true でレポートに列を追加のみ可能（削除不可）。 選択列: {reportKeys.length} 列
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Transfer
-              dataSource={REPORT_COLUMNS}
-              targetKeys={reportKeys}
-              onValueChange={(nextKeys) => setReportKeys(nextKeys)}
-              titles={["利用可能な列", "レポート列"]}
-              showSearch
-              oneWay
-            />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>検索・ページ分割・初期値</CardTitle>
-            <CardDescription>
-              表示中の有効な行だけを一括選択。移動後も別ページの選択を保持します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Transfer
-              dataSource={ALL_ACCOUNTS}
-              defaultValue={[]}
-              showSearch
-              pagination={{ pageSize: 3 }}
-              locale={{ notFoundContent: ["No matching accounts", "Nothing selected yet"] }}
-              name="accounts[]"
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/tree-select.tsx

@@ -1,204 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, TreeSelect } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * TreeSelect — 階層ツリーピッカー（Popover + 展開/折り畳み）。
- * 単一選択: onChange は string | undefined。
- * 複数/チェック可能: onChange は string[]。
- * SHOW_* 定数は TreeSelect.SHOW_CHILD / SHOW_PARENT / SHOW_ALL を使用。
- * Never a raw <select>. Composed only from real @godxjp/ui components.
- */
-
-const ACCOUNT_TREE = [
-  {
-    value: "assets",
-    label: "資産",
-    children: [
-      {
-        value: "current-assets",
-        label: "流動資産",
-        children: [
-          { value: "cash", label: "現金" },
-          { value: "bank", label: "普通預金" },
-          { value: "ar", label: "売掛金" },
-          { value: "prepaid", label: "前払費用" },
-        ],
-      },
-      {
-        value: "fixed-assets",
-        label: "固定資産",
-        children: [
-          { value: "machinery", label: "機械装置" },
-          { value: "vehicles", label: "車両運搬具" },
-          { value: "furniture", label: "器具備品" },
-        ],
-      },
-    ],
-  },
-  {
-    value: "liabilities",
-    label: "負債",
-    children: [
-      {
-        value: "current-liabilities",
-        label: "流動負債",
-        children: [
-          { value: "ap", label: "買掛金" },
-          { value: "accrued", label: "未払費用" },
-          { value: "tax-payable", label: "未払消費税" },
-        ],
-      },
-      {
-        value: "long-term",
-        label: "固定負債",
-        children: [{ value: "long-loan", label: "長期借入金" }],
-      },
-    ],
-  },
-  {
-    value: "equity",
-    label: "純資産",
-    children: [
-      { value: "capital", label: "資本金" },
-      { value: "retained", label: "繰越利益剰余金" },
-    ],
-  },
-  {
-    value: "revenue",
-    label: "収益",
-    children: [
-      { value: "sales", label: "売上高" },
-      { value: "other-income", label: "営業外収益" },
-    ],
-  },
-  {
-    value: "expenses",
-    label: "費用",
-    children: [
-      { value: "cogs", label: "売上原価" },
-      { value: "salary-exp", label: "給料手当" },
-      { value: "rent-exp", label: "地代家賃" },
-      { value: "travel-exp", label: "旅費交通費" },
-    ],
-  },
-];
-
-const DEPT_TREE = [
-  {
-    value: "hq",
-    label: "本社",
-    children: [
-      {
-        value: "finance-div",
-        label: "財務本部",
-        children: [
-          { value: "accounting", label: "経理部" },
-          { value: "treasury", label: "財務部" },
-        ],
-      },
-      {
-        value: "sales-div",
-        label: "営業本部",
-        children: [
-          { value: "sales-east", label: "東日本営業部" },
-          { value: "sales-west", label: "西日本営業部" },
-        ],
-      },
-    ],
-  },
-  {
-    value: "branch",
-    label: "支社",
-    children: [
-      { value: "osaka-branch", label: "大阪支社" },
-      { value: "nagoya-branch", label: "名古屋支社" },
-    ],
-  },
-];
-
-export default function Demo() {
-  const [glAccount, setGlAccount] = useState<string | undefined>();
-  const [deptFilter, setDeptFilter] = useState<string[]>([]);
-
-  return (
-    <PageContainer
-      title="TreeSelect"
-      subtitle="階層ツリーピッカー · 単一は string、複数は string[] を返す"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>勘定科目選択（単一・検索付き）</CardTitle>
-            <CardDescription>
-              科目ツリーから1科目を選択。showSearch + treeDefaultExpandAll で素早くアクセス。
-              選択値: {glAccount ?? "未選択"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="gl-account" label="勘定科目">
-              <TreeSelect
-                id="gl-account"
-                treeData={ACCOUNT_TREE}
-                value={glAccount}
-                onValueChange={(v) => setGlAccount(v as string | undefined)}
-                showSearch
-                treeDefaultExpandAll
-                placeholder="科目を選択..."
-                allowClear
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>部門フィルター（複数選択 + チェックボックス）</CardTitle>
-            <CardDescription>
-              treeCheckable で親選択が子に連鎖。SHOW_PARENT で表示を集約。 選択数:{" "}
-              {deptFilter.length} 件
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="dept-filter" label="部門">
-              <TreeSelect
-                id="dept-filter"
-                treeData={DEPT_TREE}
-                value={deptFilter}
-                onValueChange={(v) => setDeptFilter(v as string[])}
-                treeCheckable
-                showCheckedStrategy={TreeSelect.SHOW_PARENT}
-                showSearch
-                placeholder="部門を選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>費用科目（チェック非連鎖・SHOW_ALL）</CardTitle>
-            <CardDescription>
-              treeCheckStrictly=true で親子独立選択。SHOW_ALL で全チェックノードを表示。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="expense-accounts" label="費用科目">
-              <TreeSelect
-                id="expense-accounts"
-                treeData={ACCOUNT_TREE}
-                treeCheckable
-                treeCheckStrictly
-                showCheckedStrategy={TreeSelect.SHOW_ALL}
-                placeholder="費用科目を複数選択..."
-                showSearch
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/upload-crop-dialog.tsx

@@ -1,109 +0,0 @@
-import { useState } from "react";
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Upload, UploadCropDialog } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * UploadCropDialog — the square-crop step of an avatar flow, on its own.
- *
- * MOST SCREENS SHOULD NOT REACH FOR THIS. `<Upload variant="avatar-crop">` already embeds this
- * dialog and owns the picker, the object URL and the commit; mounting both double-mounts the
- * dialog. The standalone component exists for the case where the FILE ARRIVES FROM SOMEWHERE ELSE
- * — a drag-drop zone you already own, a paste handler, a file already on the server — and only the
- * crop step is wanted. That is the case this frame shows, beside the composed one for contrast.
- *
- * It is fully controlled: `open`, `file` and `onConfirm` are all required, and the dialog never
- * opens itself. It creates and revokes its own object URL, so a caller passes the raw `File` and
- * does NOT pre-create one. The result is always a 256×256 image/jpeg.
- */
-export default function Demo() {
-  const [cropFile, setCropFile] = useState<File | null>(null);
-  const [avatar, setAvatar] = useState<string | null>(null);
-  const [lastResult, setLastResult] = useState<string | null>(null);
-
-  return (
-    <PageContainer title="UploadCropDialog" subtitle="切り抜きだけを単体で使う場合">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>単体で使う</CardTitle>
-            <CardDescription>
-              ファイルの取得は呼び出し側の責任です。ここではブラウザのピッカーから受け取り、
-              切り抜き結果だけをこのダイアログから受け取ります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Avatar size="lg">
-                {avatar ? <AvatarImage src={avatar} alt="切り抜いたプロフィール写真" /> : null}
-                <AvatarFallback>田</AvatarFallback>
-              </Avatar>
-
-              {/* The picker is the PAGE's, not the dialog's — that is the whole point of using this
-                  component standalone. It is `Upload variant="button"` rather than a raw
-                  <input type="file">: rule §3 forbids a raw control in an example, because a
-                  consumer copies what they see. `onUpload` hands back the File, which is exactly
-                  what UploadCropDialog wants. */}
-              <Upload
-                variant="button"
-                accept="image/*"
-                maxCount={1}
-                onValueChange={(items) => {
-                  /* No onUpload here on purpose: this page wants the FILE, not an upload. The
-                     catalog states it outright — "without onUpload the File object sits in
-                     item.file until you manually process it", which is exactly the standalone
-                     crop case. */
-                  const picked = items[0]?.file ?? null;
-                  if (picked) setCropFile(picked);
-                }}
-              >
-                写真を選ぶ
-              </Upload>
-
-              <Text size="sm" tone="muted" aria-live="polite">
-                {lastResult ?? "まだ切り抜いていません。"}
-              </Text>
-
-              <UploadCropDialog
-                open={cropFile !== null}
-                // Always clear the held File on close, or the next open shows a stale image.
-                onOpenChange={(open) => !open && setCropFile(null)}
-                file={cropFile}
-                onConfirm={(cropped) => {
-                  setAvatar(URL.createObjectURL(cropped));
-                  setLastResult(
-                    `${cropped.name} · ${cropped.type} · ${Math.round(cropped.size / 1024)} KB`,
-                  );
-                }}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>通常はこちら</CardTitle>
-            <CardDescription>
-              `Upload variant="avatar-crop"` は同じダイアログを内部に持ち、ピッカーも
-              オブジェクトURLも引き受けます。両方を同時に置いてはいけません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload variant="avatar-crop" accept="image/*" />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}