@godxjp/ui 31.31.8 → 32.0.0

package/docs/feedback/dialog.tsx

@@ -1,373 +0,0 @@
-import { useState } from "react";
-import {
-  Dialog,
-  DialogAction,
-  DialogCancel,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@godxjp/ui/feedback";
-import { FormField, Textarea } from "@godxjp/ui/data-entry";
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-import { useTranslation } from "@godxjp/ui/i18n";
-
-/** Every branch of DialogHeader's `tone`, in the order the vocabulary declares them. */
-const headerTones = [
-  "default",
-  "success",
-  "warning",
-  "destructive",
-  "info",
-  "muted",
-  "neutral",
-] as const;
-
-/** Order lines behind the non-modal payment dialog — they stay editable while it is open. */
-const initialLines = [
-  { id: "coffee", name: "ブレンドコーヒー", unitPrice: 480, quantity: 2 },
-  { id: "sandwich", name: "ミックスサンド", unitPrice: 650, quantity: 1 },
-  { id: "cake", name: "チーズケーキ", unitPrice: 520, quantity: 1 },
-];
-
-const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });
-
-/**
- * Dialog · compound controlled modal for form-style flows. Always control via
- * open + onOpenChange. Include DialogHeader > DialogTitle (required for a11y).
- * Use DialogFooter for primary/cancel actions.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  const [wideOpen, setWideOpen] = useState(false);
-  const [createOpen, setCreateOpen] = useState(true);
-  const [detailOpen, setDetailOpen] = useState(false);
-  const [toneOpen, setToneOpen] = useState(false);
-  const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
-  const [terminateOpen, setTerminateOpen] = useState(false);
-  const [reason, setReason] = useState("");
-  const [paymentOpen, setPaymentOpen] = useState(false);
-  const [lines, setLines] = useState(initialLines);
-  const total = lines.reduce((sum, line) => sum + line.unitPrice * line.quantity, 0);
-  const changeQuantity = (id: string, delta: number) => {
-    setLines((current) =>
-      current.map((line) =>
-        line.id === id ? { ...line, quantity: Math.max(0, line.quantity + delta) } : line,
-      ),
-    );
-  };
-
-  return (
-    <PageContainer
-      title="Dialog"
-      subtitle="compound modal · form flows, detail pop-ups, multi-step wizards"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Form-style modal (pre-opened)</CardTitle>
-            <CardDescription>
-              Controlled via open + onOpenChange. DialogTitle is required for screen-reader
-              accessibility. Hold open while pending to prevent double-submit.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-              <DialogTrigger asChild>
-                {/* data-axe-open: check:frame-axe presses this before its overlay scan. */}
-                <Button data-axe-open size="sm">
-                  仕訳新規作成
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="max-w-lg">
-                <DialogHeader>
-                  <DialogTitle>新規仕訳を作成</DialogTitle>
-                  <DialogDescription>
-                    借方・貸方科目と金額を入力して保存してください。
-                  </DialogDescription>
-                </DialogHeader>
-                <DialogBody>
-                <Flex direction="col" gap="md">
-                  <Flex direction="row" gap="sm" align="center">
-                    <Text tone="muted" className="w-20 shrink-0">
-                      借方科目
-                    </Text>
-                    <Text>売掛金</Text>
-                  </Flex>
-                  <Flex direction="row" gap="sm" align="center">
-                    <Text tone="muted" className="w-20 shrink-0">
-                      貸方科目
-                    </Text>
-                    <Text>売上高</Text>
-                  </Flex>
-                  <Flex direction="row" gap="sm" align="center">
-                    <Text tone="muted" className="w-20 shrink-0">
-                      金額
-                    </Text>
-                    <Text>¥ 120,000</Text>
-                  </Flex>
-                </Flex>
-                </DialogBody>
-                <DialogFooter>
-                  <Button variant="outline" onClick={() => setCreateOpen(false)}>
-                    キャンセル
-                  </Button>
-                  <Button onClick={() => setCreateOpen(false)}>保存</Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("dialogWidthDocs.title")}</CardTitle>
-            <CardDescription>{t("dialogWidthDocs.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Dialog open={wideOpen} onOpenChange={setWideOpen}>
-              <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
-                  {t("dialogWidthDocs.open")}
-                </Button>
-              </DialogTrigger>
-              <DialogContent width="60rem">
-                <DialogHeader>
-                  <DialogTitle>{t("dialogWidthDocs.dialogTitle")}</DialogTitle>
-                  <DialogDescription>{t("dialogWidthDocs.dialogDescription")}</DialogDescription>
-                </DialogHeader>
-                <DialogBody>
-                  <ResponsiveGrid columns={{ base: 1, sm: 3 }}>
-                    {[1, 2, 3, 4, 5, 6].map((n) => (
-                      <Card key={n}>
-                        <CardContent>
-                          <Text>{t("dialogWidthDocs.desktop", { n: String(n) })}</Text>
-                        </CardContent>
-                      </Card>
-                    ))}
-                  </ResponsiveGrid>
-                </DialogBody>
-              </DialogContent>
-            </Dialog>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Read-only detail pop-up</CardTitle>
-            <CardDescription>
-              No footer action buttons needed, just a close trigger. Suitable for audit trail,
-              attachment preview, or approval history.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-              <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
-                  取引詳細を見る
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="max-w-md">
-                <DialogHeader>
-                  <DialogTitle>取引 #JE-2024-0042</DialogTitle>
-                  <DialogDescription>2024年3月31日 · 月次決算仕訳</DialogDescription>
-                </DialogHeader>
-                <DialogBody>
-                <Flex direction="col" gap="sm">
-                  <Flex direction="row" justify="between">
-                    <Text tone="muted">借方</Text>
-                    <Text>売掛金 ¥ 240,000</Text>
-                  </Flex>
-                  <Flex direction="row" justify="between">
-                    <Text tone="muted">貸方</Text>
-                    <Text>売上高 ¥ 240,000</Text>
-                  </Flex>
-                  <Flex direction="row" justify="between">
-                    <Text tone="muted">摘要</Text>
-                    <Text>3月売上計上</Text>
-                  </Flex>
-                </Flex>
-                </DialogBody>
-              </DialogContent>
-            </Dialog>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>DialogHeader tone band (every branch)</CardTitle>
-            <CardDescription>
-              DialogHeader also takes a prop-driven form: title, subtitle and an extra slot, plus
-              tone. tone tints only the header band and leaves the text at the foreground colour, so
-              the dialog never turns into a loud solid fill. default paints no band at all; muted
-              and neutral deliberately share the same quiet band. Close the pre-opened dialog above
-              with Escape, then pick a branch: the same dialog re-opens 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>
-              <Dialog open={toneOpen} onOpenChange={setToneOpen}>
-                <DialogContent className="max-w-md">
-                  <DialogHeader
-                    tone={headerTone}
-                    title="仕訳の取り込み結果"
-                    subtitle={`見出し帯は tone="${headerTone}" で描画しています。`}
-                    extra={<Badge tone={headerTone}>{headerTone}</Badge>}
-                  />
-                  <DialogBody>
-                    <Text size="sm">
-                      帯の色だけが tone に追従し、見出しと本文の文字色は変わりません。extra
-                      スロットは帯の右端に固定され、閉じるボタンとは重なりません。
-                    </Text>
-                  </DialogBody>
-                  <DialogFooter>
-                    <Button variant="outline" onClick={() => setToneOpen(false)}>
-                      閉じる
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Destructive confirmation with a required field</CardTitle>
-            <CardDescription>
-              variant is the one prop that decides three things that always travel together: the
-              ARIA role, whether an outside click dismisses, and the primary action emphasis.
-              variant=&quot;destructive&quot; renders role=&quot;alertdialog&quot;, ignores an
-              outside click and tints DialogAction, while the surface stays a plain Dialog, so a
-              required input can sit inside it. That combination used to need a rewrite: Dialog had
-              the form but lost the role, AlertDialog had the role but its parts assume a two-button
-              body. Escape still closes, exactly as the AlertDialog family already does.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Dialog open={terminateOpen} onOpenChange={setTerminateOpen} variant="destructive">
-              <DialogTrigger asChild>
-                <Button variant="destructive" size="sm">
-                  提携を終了
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="max-w-md">
-                <DialogHeader
-                  tone="destructive"
-                  title="提携を終了しますか？"
-                  subtitle="この操作は元に戻せません。終了理由は監査ログに残ります。"
-                />
-                <DialogBody>
-                  <FormField id="termination-reason" label="終了理由" required>
-                    <Textarea
-                      id="termination-reason"
-                      value={reason}
-                      onChange={(event) => setReason(event.target.value)}
-                      placeholder="契約違反の内容を記載してください"
-                    />
-                  </FormField>
-                </DialogBody>
-                <DialogFooter>
-                  <DialogCancel asChild>
-                    <Button variant="ghost">キャンセル</Button>
-                  </DialogCancel>
-                  <DialogAction disabled={reason.trim().length === 0}>終了する</DialogAction>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Non-modal dialog: the list behind stays editable</CardTitle>
-            <CardDescription>
-              modal=&#123;false&#125; renders a non-modal dialog, a pattern WAI-ARIA APG allows. The
-              page behind keeps working: no scrim, no scroll lock, nothing hidden from assistive
-              tech, and a press outside does not close the dialog. Open the payment dialog, then
-              change a quantity below. The total inside the dialog follows. Focus moves into the
-              dialog on open, Tab can leave it, Escape closes it while focus is inside, and focus
-              returns to the trigger.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {lines.map((line) => (
-                <Flex key={line.id} direction="row" align="center" justify="between" gap="sm">
-                  <Text>{line.name}</Text>
-                  <Flex direction="row" align="center" gap="sm">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      aria-label={`${line.name}を減らす`}
-                      disabled={line.quantity === 0}
-                      onClick={() => changeQuantity(line.id, -1)}
-                    >
-                      −
-                    </Button>
-                    <Text aria-live="polite">{line.quantity}</Text>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      aria-label={`${line.name}を増やす`}
-                      onClick={() => changeQuantity(line.id, 1)}
-                    >
-                      ＋
-                    </Button>
-                  </Flex>
-                </Flex>
-              ))}
-              <Dialog modal={false} open={paymentOpen} onOpenChange={setPaymentOpen}>
-                <DialogTrigger asChild>
-                  <Button size="sm">お会計へ</Button>
-                </DialogTrigger>
-                <DialogContent className="max-w-sm">
-                  <DialogHeader title="お会計" subtitle="注文明細は背面で編集を続けられます。" />
-                  <DialogBody>
-                    <Flex direction="row" justify="between">
-                      <Text tone="muted">合計</Text>
-                      <Text>{yen.format(total)}</Text>
-                    </Flex>
-                  </DialogBody>
-                  <DialogFooter>
-                    <Button variant="outline" onClick={() => setPaymentOpen(false)}>
-                      キャンセル
-                    </Button>
-                    <Button onClick={() => setPaymentOpen(false)}>支払いを確定</Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}