@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/case4-login.tsx

@@ -1,312 +0,0 @@
-/**
- * Showcase · case4 — Login (ログイン)
- *
- * The reference-design auth surface, served at `/showcase/case4-login`.
- * Built ENTIRELY from real @godxjp/ui primitives — the design handoff
- * (UI Kit.html §04 + Handy login) recreated as a "skeleton" (intent + look),
- * not a transcription of the prototype DOM.
- *
- * Composition map (prototype block → @godxjp/ui primitive):
- *   page shell ............. AuthShell (the unauthenticated root shell)
- *   comfortable density .... AuthShell's own control tier → 44px touch floor
- *   locale + theme toggle .. AuthShell `actions` (banner, inline end)
- *   two-column measure ..... AuthShell `measure="wide"` → 64rem content slot
- *   split brand panel ...... Card composition, hidden < lg (mobile-first)
- *   auth card .............. Card (shadow-lg — the one resting shadow login allows)
- *   SSO buttons ............ Button(outline) full-width + brand SVG slot
- *   email / password ....... FormField + Input / PasswordInput
- *   "forgot" link .......... FormField labelAddon (right-aligned ghost link)
- *   divider "または" ....... Separator pair + center text
- *   footer ................. muted 利用規約 · プライバシーポリシー links
- *
- * DNA applied: comfortable density (44px), small headings (20/18/14/13),
- * 14px/1.7 body, fixed color signaling (the single --primary action = ログイン),
- * 1px-border surfaces, no resting shadow EXCEPT the auth card (documented
- * exception), quiet factual copy, no emoji, ASCII quotes in code-like labels.
- */
-import * as React from "react";
-import { Languages, Monitor, Moon, Sun } from "lucide-react";
-
-import { Button, Heading, Text } from "@godxjp/ui/general";
-import {
-  Form,
-  FormField,
-  Input,
-  PasswordInput,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@godxjp/ui/data-entry";
-import {
-  Avatar,
-  AvatarFallback,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  Descriptions,
-} from "@godxjp/ui/data-display";
-import { AuthShell, Flex, ResponsiveGrid, Separator } from "@godxjp/ui/layout";
-
-// ── The single allowed multi-color brand mark (Google "G") ─────────────────────
-// Icons normally inherit currentColor; a third-party brand mark is the documented
-// exception (ui-kit-surfaces §5). lucide has no Google glyph, so the official
-// 4-color path is inlined — the only place a non-token fill appears.
-function GoogleMark() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 24 24" className="size-5">
-      <path
-        fill="#4285F4"
-        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.57c2.08-1.92 3.27-4.74 3.27-8.09Z"
-      />
-      <path
-        fill="#34A853"
-        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.76c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"
-      />
-      <path
-        fill="#FBBC05"
-        d="M5.84 14.11a6.6 6.6 0 0 1 0-4.22V7.05H2.18a11 11 0 0 0 0 9.9l3.66-2.84Z"
-      />
-      <path
-        fill="#EA4335"
-        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.05l3.66 2.84C6.71 7.3 9.14 5.38 12 5.38Z"
-      />
-    </svg>
-  );
-}
-
-// ── Brand lockup ("勤" mark + Acme · 勤怠 wordmark) ───────────────────────────
-function BrandLockup({ size = "md" }: { size?: "md" | "lg" }) {
-  return (
-    <Flex align="center" gap="sm">
-      <Avatar aria-hidden="true" className={`rounded-md ${size === "lg" ? "size-11 text-lg" : ""}`}>
-        <AvatarFallback className="bg-primary text-primary-foreground font-bold">勤</AvatarFallback>
-      </Avatar>
-      <div className="leading-tight">
-        <Text as="div" size="lg" weight="bold" className="tracking-tight">
-          Acme{" "}
-          <Text as="span" tone="primary">
-            ·
-          </Text>{" "}
-          勤怠
-        </Text>
-        <Text as="div" size="2xs" tone="muted">
-          勤怠管理プラットフォーム
-        </Text>
-      </div>
-    </Flex>
-  );
-}
-
-const LOCALES: Array<{ code: string; label: string }> = [
-  { code: "ja", label: "日本語" },
-  { code: "en", label: "English" },
-  { code: "vi", label: "Tiếng Việt" },
-];
-
-export default function LoginShowcase() {
-  // Independent local state (Rule #6) — controlled + uncontrolled both shown:
-  // theme/locale are controlled (value + onValueChange), the fields are uncontrolled
-  // with seeded defaultValue so the filled state is visible at rest (Rule #2).
-  const [locale, setLocale] = React.useState("ja");
-  const [theme, setTheme] = React.useState("light");
-
-  return (
-    <AuthShell
-      /* The 64rem content slot the split (brand panel + card) login needs. */
-      measure="wide"
-      className="text-foreground"
-      /* Brand mark in the banner below lg; from lg the split panel carries it. */
-      brand={
-        <div className="lg:hidden">
-          <BrandLockup />
-        </div>
-      }
-      /* Page-level controls, pinned to the banner's inline end. */
-      actions={
-        <>
-          <Select aria-label="言語を選択" value={locale} onValueChange={setLocale}>
-            <SelectTrigger size="sm" className="w-32">
-              <Languages aria-hidden="true" className="text-muted-foreground" />
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent align="end">
-              {LOCALES.map((l) => (
-                <SelectItem key={l.code} value={l.code}>
-                  {l.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <ToggleGroup
-            type="single"
-            value={theme}
-            onValueChange={(v) => v && setTheme(v)}
-            variant="outline"
-            size="sm"
-            aria-label="テーマを切り替え"
-          >
-            <ToggleGroupItem value="light" aria-label="ライト">
-              <Sun aria-hidden="true" />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="dark" aria-label="ダーク">
-              <Moon aria-hidden="true" />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="system" aria-label="システム">
-              <Monitor aria-hidden="true" />
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </>
-      }
-    >
-      {/* Centered auth area. Split brand panel + card sit side-by-side from lg. */}
-      <ResponsiveGrid columns={{ sm: 1, lg: 2, md: 1 }} gap="xl" className="w-full items-stretch">
-        {/* Split brand panel — hidden on mobile (mobile-first), shown from lg. */}
-        <aside className="hidden lg:block">
-          <Card className="bg-primary/5 h-full w-full">
-            <CardContent solo className="h-full">
-              <Flex direction="col" justify="between" gap="xl">
-                <BrandLockup size="lg" />
-                <Flex direction="col" gap="md">
-                  <Heading level={2} className="leading-snug">
-                    打刻から承認まで、ひとつの勤怠基盤で。
-                  </Heading>
-                  <Text as="p" tone="muted" className="leading-relaxed">
-                    出勤・休憩・残業の打刻、シフト調整、欠勤・遅刻の承認を一元化します。
-                    多拠点・多テナントに対応し、現場と管理をつなぎます。
-                  </Text>
-                </Flex>
-                <Separator />
-                <Descriptions columns={3}>
-                  <Descriptions.Item label="導入企業">
-                    <Text size="lg" weight="bold" tabular>
-                      1,240
-                    </Text>
-                  </Descriptions.Item>
-                  <Descriptions.Item label="稼働拠点">
-                    <Text size="lg" weight="bold" tabular>
-                      8,600
-                    </Text>
-                  </Descriptions.Item>
-                  <Descriptions.Item label="月間打刻">
-                    <Text size="lg" weight="bold" tabular>
-                      21M
-                    </Text>
-                  </Descriptions.Item>
-                </Descriptions>
-              </Flex>
-            </CardContent>
-          </Card>
-        </aside>
-
-        {/* Auth card — the one surface allowed a resting shadow (shadow-lg). */}
-        <Card className="mx-auto w-full max-w-sm self-center shadow-lg">
-          <CardHeader className="text-center lg:text-start">
-            <Flex justify="center" className="lg:hidden">
-              <BrandLockup />
-            </Flex>
-            <CardTitle className="text-lg font-semibold">ログイン</CardTitle>
-            <CardDescription className="text-muted-foreground text-xs">
-              勤怠管理プラットフォームへようこそ
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent solo>
-            <Flex direction="col" gap="lg">
-              {/* SSO buttons — outline, full-width, 44px (comfortable). */}
-              <Flex direction="col" gap="sm">
-                <Button variant="outline" className="w-full justify-center">
-                  <GoogleMark />
-                  Google で続ける
-                </Button>
-                <Button variant="outline" className="w-full justify-center">
-                  シングルサインオン (SSO)
-                </Button>
-              </Flex>
-
-              {/* Divider "または" — Separator pair + centered label. */}
-              <Flex align="center" gap="md">
-                <Separator className="flex-1" />
-                <Text size="xs" tone="muted">
-                  または
-                </Text>
-                <Separator className="flex-1" />
-              </Flex>
-
-              {/* Email — uncontrolled, seeded so the filled state shows at rest. */}
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                }}
-              >
-                <Form>
-                  <Flex direction="col" gap="md">
-                    <FormField id="login-email" label="メールアドレス" required>
-                      <Input
-                        type="email"
-                        name="email"
-                        autoComplete="email"
-                        inputMode="email"
-                        placeholder="name@example.com"
-                        defaultValue="m.tanaka@famgia.com"
-                      />
-                    </FormField>
-
-                    {/* Password — labelAddon hosts the right-aligned "忘れた場合" link. */}
-                    <FormField
-                      id="login-password"
-                      label="パスワード"
-                      required
-                      labelAddon={
-                        <Button type="button" variant="link" size="sm" className="ms-auto text-xs">
-                          お忘れの場合
-                        </Button>
-                      }
-                    >
-                      <PasswordInput
-                        name="password"
-                        autoComplete="current-password"
-                        placeholder="パスワードを入力"
-                        defaultValue="example-pass"
-                      />
-                    </FormField>
-
-                    {/* The single --primary action of the view. */}
-                    <Button type="submit" className="w-full justify-center">
-                      ログイン
-                    </Button>
-                  </Flex>
-                </Form>
-              </form>
-
-              <Text as="p" size="2xs" tone="muted" align="center" className="leading-relaxed">
-                ログインすると{" "}
-                <Button
-                  variant="link"
-                  size="sm"
-                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
-                >
-                  利用規約
-                </Button>{" "}
-                ·{" "}
-                <Button
-                  variant="link"
-                  size="sm"
-                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
-                >
-                  プライバシーポリシー
-                </Button>{" "}
-                に同意したものとみなされます。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-      </ResponsiveGrid>
-    </AuthShell>
-  );
-}