@godxjp/ui 19.1.0 → 19.2.0

package/docs/data-entry/upload.tsx

@@ -0,0 +1,184 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Upload, type UploadFileItem } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Upload — drag-and-drop / button / avatar / picture file uploader (6 variants).
+ * Wire onUpload to your media-service; call collectUploadCommitActions on submit.
+ * UploadCropDialog is embedded internally by variant="avatar-crop" — not a public import.
+ * Composed only from real @godxjp/ui components.
+ */
+
+/** No-op uploader: resolves immediately with a fake mediaId for preview purposes. */
+async function noopUpload(_file: File, _item: UploadFileItem) {
+  return { mediaId: "preview-media-id" };
+}
+
+export default function Demo() {
+  const [dropzoneItems, setDropzoneItems] = useState<UploadFileItem[]>([]);
+  const [buttonItems, setButtonItems] = useState<UploadFileItem[]>([]);
+  const [pictureCardItems, setPictureCardItems] = useState<UploadFileItem[]>([]);
+  const [pictureItem, setPictureItem] = useState<UploadFileItem[]>([]);
+  const [avatarItem, setAvatarItem] = useState<UploadFileItem[]>([]);
+  const [avatarCropItem, setAvatarCropItem] = useState<UploadFileItem[]>([]);
+  const failedItems: UploadFileItem[] = [
+    {
+      uid: "failed-invoice",
+      name: "invoice-too-large.pdf",
+      size: 25 * 1024 * 1024,
+      mimeType: "application/pdf",
+      status: "error",
+      error: "20 MB 以下のファイルを選択してください",
+    },
+  ];
+
+  return (
+    <PageContainer
+      title="Upload"
+      subtitle="ファイルアップロード · 6バリアント（dropzone / button / picture-card / picture / avatar / avatar-crop）"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Dropzone</CardTitle>
+            <CardDescription>
+              ドラッグ＆ドロップエリア · PDF・Excel などの書類添付に使用。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="dropzone"
+              value={dropzoneItems}
+              onValueChange={setDropzoneItems}
+              accept=".pdf,.xlsx,.csv"
+              maxCount={5}
+              maxSizeBytes={20 * 1024 * 1024}
+              onUpload={noopUpload}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Error and recovery</CardTitle>
+            <CardDescription>
+              失敗理由は対象ファイルの行に表示する。Upload は自動 retry prop を持たないため、
+              不正なファイルを削除して修正済みファイルを再選択する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload variant="button" value={failedItems} onValueChange={() => {}} removable />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Disabled · populated</CardTitle>
+            <CardDescription>
+              権限不足時も既存ファイル名を保ったまま操作を無効化する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload variant="button" value={failedItems} onValueChange={() => {}} disabled />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Button</CardTitle>
+            <CardDescription>
+              コンパクトなボタン形式 · CSVインポートなどの管理画面向け。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="button"
+              value={buttonItems}
+              onValueChange={setButtonItems}
+              accept=".csv"
+              onUpload={noopUpload}
+            >
+              CSVをインポート
+            </Upload>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Picture Card</CardTitle>
+            <CardDescription>
+              96×96 サムネイルグリッド · 商品ギャラリーや画像一覧に使用。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="picture-card"
+              value={pictureCardItems}
+              onValueChange={setPictureCardItems}
+              accept="image/*"
+              maxCount={6}
+              onUpload={noopUpload}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Picture</CardTitle>
+            <CardDescription>
+              単一画像プレビュー · コンテンツのカバー画像選択に使用。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="picture"
+              value={pictureItem}
+              onValueChange={setPictureItem}
+              accept="image/*"
+              maxCount={1}
+              onUpload={noopUpload}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Avatar</CardTitle>
+            <CardDescription>円形の単一画像ピッカー · ユーザーアイコン変更に使用。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="avatar"
+              value={avatarItem}
+              onValueChange={setAvatarItem}
+              accept="image/*"
+              onUpload={noopUpload}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Avatar Crop</CardTitle>
+            <CardDescription>
+              アバター選択後にトリミングダイアログを開く。UploadCropDialog は
+              内部モーダルとして自動で埋め込まれるため、個別インポート不要。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="avatar-crop"
+              value={avatarCropItem}
+              onValueChange={setAvatarCropItem}
+              accept="image/*"
+              maxSizeBytes={5 * 1024 * 1024}
+              onUpload={noopUpload}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/alert-dialog.tsx

@@ -0,0 +1,270 @@
+import { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@godxjp/ui/feedback";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/** Every branch of AlertDialogHeader's `tone`, in the order the vocabulary declares them. */
+const headerTones = [
+  "default",
+  "success",
+  "warning",
+  "destructive",
+  "info",
+  "muted",
+  "neutral",
+] as const;
+
+/**
+ * AlertDialog · canonical destructive-confirm modal. NOT a free-form Dialog.
+ * Flat prop API: title (required), description, confirmLabel, cancelLabel,
+ * variant="destructive", confirmPhrase for high-friction ops, onConfirm async,
+ * pending while work is running.
+ *
+ * AlertDialogRoot is the compound counterpart: same role="alertdialog" semantics,
+ * bespoke content. Mirrors DialogRoot, which the flat `Dialog` export wraps.
+ */
+export default function Demo() {
+  const [deleteOpen, setDeleteOpen] = useState(true);
+  const [closeOpen, setCloseOpen] = useState(false);
+  const [voidOpen, setVoidOpen] = useState(false);
+  const [phraseOpen, setPhraseOpen] = useState(false);
+  const [toneOpen, setToneOpen] = useState(false);
+  const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
+
+  return (
+    <PageContainer
+      title="AlertDialog"
+      subtitle="destructive confirm modal · delete, void, archive, irreversible actions"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Destructive delete (pre-opened)</CardTitle>
+            <CardDescription>
+              Flat prop API: title (required) + description + confirmLabel + variant. onConfirm may
+              be async; the dialog stays open until it resolves. Never use Dialog for destructive
+              confirms.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" align="center">
+              <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
+                請求書を削除
+              </Button>
+            </Flex>
+            <AlertDialog
+              open={deleteOpen}
+              onOpenChange={setDeleteOpen}
+              title="請求書 #INV-2024-0188 を削除しますか？"
+              description="この操作は元に戻せません。関連する仕訳データもすべて削除されます。"
+              confirmLabel="削除する"
+              cancelLabel="キャンセル"
+              variant="destructive"
+              onConfirm={async () => {
+                await new Promise<void>((r) => setTimeout(r, 800));
+                setDeleteOpen(false);
+              }}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Neutral confirm (the other variant branch)</CardTitle>
+            <CardDescription>
+              variant has two branches. default is the branch for a consequential but reversible
+              step: the header band stays neutral and the confirm button keeps the primary style, so
+              the dialog reads as a checkpoint rather than a warning. Reach for destructive only
+              when the action cannot be undone.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button size="sm" onClick={() => setCloseOpen(true)}>
+              月次締めを確定
+            </Button>
+            <AlertDialog
+              open={closeOpen}
+              onOpenChange={setCloseOpen}
+              title="2026年7月度の月次締めを確定しますか？"
+              description="確定後は仕訳の編集が制限されます。管理者はいつでも締めを解除できます。"
+              confirmLabel="確定する"
+              cancelLabel="あとで"
+              variant="default"
+              onConfirm={() => setCloseOpen(false)}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Void / cancel action</CardTitle>
+            <CardDescription>
+              Same pattern for voiding an invoice or cancelling a batch job: destructive variant
+              with a clear confirmLabel.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="outline" size="sm" onClick={() => setVoidOpen(true)}>
+              請求書を取消
+            </Button>
+            <AlertDialog
+              open={voidOpen}
+              onOpenChange={setVoidOpen}
+              title="請求書 #INV-2024-0099 を取り消しますか？"
+              description="取消後は再発行が必要になります。"
+              confirmLabel="取消する"
+              cancelLabel="戻る"
+              variant="destructive"
+              onConfirm={() => setVoidOpen(false)}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>High-friction: confirmPhrase</CardTitle>
+            <CardDescription>
+              Pass confirmPhrase to require the user to type a specific string before the confirm
+              button activates. Use for truly irreversible bulk operations.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="destructive" size="sm" onClick={() => setPhraseOpen(true)}>
+              全データを削除
+            </Button>
+            <AlertDialog
+              open={phraseOpen}
+              onOpenChange={setPhraseOpen}
+              title="すべてのデータを完全に削除しますか？"
+              description={'確認のため下のボックスに "DELETE" と入力してください。'}
+              confirmLabel="完全に削除する"
+              cancelLabel="キャンセル"
+              variant="destructive"
+              confirmPhrase="DELETE"
+              onConfirm={() => setPhraseOpen(false)}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Compound composition (AlertDialogRoot)</CardTitle>
+            <CardDescription>
+              AlertDialogRoot is the compound counterpart of the flat preset above, and the mirror
+              of DialogRoot. It supplies the alertdialog context that AlertDialogTitle,
+              AlertDialogDescription, AlertDialogAction and AlertDialogCancel read, so a bespoke
+              confirmation composes from the public API alone. Structure: AlertDialogRoot &gt;
+              AlertDialogTrigger + AlertDialogPortal &gt; AlertDialogOverlay + AlertDialogContent
+              &gt; AlertDialogHeader &gt; AlertDialogTitle. Focus trap, focus restoration and the
+              modal role=alertdialog semantics stay Radix-owned. Reach for the flat AlertDialog
+              first; use the Root only when the confirm body needs content the preset does not
+              cover.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AlertDialogRoot>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                  支払を確定
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogPortal>
+                <AlertDialogOverlay />
+                <AlertDialogContent className="max-w-md">
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>2026年7月分の支払を確定しますか？</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      確定すると振込データが生成され、取消には管理者の承認が必要になります。
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <Text size="sm" tone="muted">
+                    対象 48 件・合計 12,480,000 円。確定後も明細の閲覧はできます。
+                  </Text>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>戻る</AlertDialogCancel>
+                    <AlertDialogAction>確定する</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialogPortal>
+            </AlertDialogRoot>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>AlertDialogHeader tone band (every branch)</CardTitle>
+            <CardDescription>
+              AlertDialogHeader takes the same prop-driven form as DialogHeader: title, subtitle and
+              an extra slot, plus tone. tone tints only the header band and leaves the text at the
+              foreground colour, so a confirmation never turns into a loud solid fill. default
+              paints no band at all; muted and neutral deliberately share the same quiet band. This
+              branch matrix only became reachable from the public API once AlertDialogRoot shipped.
+              Pick a branch to open the same alertdialog with that header.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="sm" wrap>
+                {headerTones.map((tone) => (
+                  <Button
+                    key={tone}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setHeaderTone(tone);
+                      setToneOpen(true);
+                    }}
+                  >
+                    {tone}
+                  </Button>
+                ))}
+              </Flex>
+              <AlertDialogRoot open={toneOpen} onOpenChange={setToneOpen}>
+                <AlertDialogPortal>
+                  <AlertDialogOverlay />
+                  <AlertDialogContent className="max-w-md">
+                    <AlertDialogHeader
+                      tone={headerTone}
+                      title="取込結果を確認してください"
+                      subtitle={`見出し帯は tone="${headerTone}" で描画しています。`}
+                      extra={<Badge tone={headerTone}>{headerTone}</Badge>}
+                    />
+                    <Text size="sm">
+                      帯の色だけが tone
+                      に追従し、見出しと本文の文字色は変わりません。取込済みの仕訳は 132 件、保留は
+                      4 件です。
+                    </Text>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>閉じる</AlertDialogCancel>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialogPortal>
+              </AlertDialogRoot>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}