@godxjp/ui 32.4.3 → 32.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN.md +201 -0
- package/README.md +1 -0
- package/agent/DESIGN.md +201 -0
- package/agent/START-HERE.md +22 -26
- package/agent/anti-ai-tells.json +56 -2
- package/agent/components/Text.json +4 -2
- package/agent/components.json +4 -2
- package/agent/index.json +9 -3
- package/agent/llms.txt +5 -4
- package/agent/patterns/badge-coloring.json +2 -2
- package/agent/patterns/common-fixes.json +1 -1
- package/agent/patterns/confirm-destructive.json +2 -2
- package/agent/patterns/inertia-detail-page.json +2 -2
- package/agent/patterns/inertia-list-page.json +2 -2
- package/agent/patterns/page-sections.json +5 -3
- package/agent/patterns/settings-section-rows.json +2 -2
- package/agent/patterns-index.json +9 -7
- package/agent/patterns.json +16 -14
- package/dist/components/data-entry/select.js +5 -4
- package/dist/components/general/typography.js +4 -4
- package/dist/contracts/measurement.json +1 -1
- package/dist/props/components/general.prop.d.ts +6 -0
- package/dist/props/registry.d.ts +1 -1
- package/dist/props/registry.js +1 -1
- package/dist/props/vocabulary/interaction.prop.d.ts +9 -1
- package/dist/styles/layers.json +1 -1
- package/dist/styles/text-layout.css +14 -1
- package/dist/styles.css +1 -1
- package/docs/CONSUMER-RULES.md +4 -3
- package/docs/README.md +1 -1
- package/package.json +3 -2
- package/scripts/_agent-setup.mjs +49 -76
- package/scripts/consumer-rule.md +32 -68
- package/scripts/ui-audit.mjs +152 -22
package/agent/components.json
CHANGED
|
@@ -2753,9 +2753,9 @@
|
|
|
2753
2753
|
},
|
|
2754
2754
|
{
|
|
2755
2755
|
"defaultValue": "\"normal\"",
|
|
2756
|
-
"description": "Where an over-long unbroken token may break. THE prop for a machine identifier — an email address, a coupon code, a login id, a template key — in a DataTable/TableCell or a Descriptions value: `break=\"anywhere\"` emits `overflow-wrap: anywhere` (and releases a table cell's inherited `nowrap`), so the column shrinks to the viewport instead of scrolling the page. Use it INSTEAD of `className=\"[overflow-wrap:anywhere] break-words whitespace-normal\"`. NOT `whitespace=\"pre-wrap\"`: that is for typed line breaks, and its `break-word` does not lower min-content, so in a table cell it breaks nothing (measured: a 71-char token holds a 320px table at 630px with pre-wrap, 320px with break=\"anywhere\"). Independent of `whitespace` (both may be set); `truncate` wins (dev builds warn); `clamp` composes.",
|
|
2756
|
+
"description": "Where an over-long unbroken token may break. THE prop for a machine identifier — an email address, a coupon code, a login id, a template key — in a DataTable/TableCell or a Descriptions value: `break=\"anywhere\"` emits `overflow-wrap: anywhere` (and releases a table cell's inherited `nowrap`), so the column shrinks to the viewport instead of scrolling the page. Use it INSTEAD of `className=\"[overflow-wrap:anywhere] break-words whitespace-normal\"`. NOT `whitespace=\"pre-wrap\"`: that is for typed line breaks, and its `break-word` does not lower min-content, so in a table cell it breaks nothing (measured: a 71-char token holds a 320px table at 630px with pre-wrap, 320px with break=\"anywhere\"). `break=\"phrase\"` is THE prop for Japanese PROSE in a narrow measure — a trainee's katakana name, an organisation, a status in a DataTable cell: it breaks between phrases (`word-break: auto-phrase`, Chrome 119+) instead of between any two characters, never starts a line with a small kana or 「ー」 (`line-break: strict`), adds `text-wrap: pretty`, and releases the cell's `nowrap` (measured in a 974px 8-column table: 「チャン・ヴァ｜ン・ミン」 → 「チャン・｜ヴァン・｜ミン」, 4 mid-katakana breaks → 0). It keeps every phrase whole, so the column is as wide as its longest phrase: a 20+ character katakana compound scrolls the table rather than being cut. Browsers without `auto-phrase` keep their own CJK breaking. Independent of `whitespace` (both may be set); `truncate` wins (dev builds warn); `clamp` composes.",
|
|
2757
2757
|
"name": "break",
|
|
2758
|
-
"type": "\"normal\" | \"anywhere\""
|
|
2758
|
+
"type": "\"normal\" | \"anywhere\" | \"phrase\""
|
|
2759
2759
|
},
|
|
2760
2760
|
{
|
|
2761
2761
|
"description": "Tabular figures for aligned numbers.",
|
|
@@ -2889,6 +2889,7 @@
|
|
|
2889
2889
|
"usage": [
|
|
2890
2890
|
"DO use `<Text>` for ALL body / inline / caption text instead of a styled `<span>`/`<p>`. Pick `size` from the scale; never write `text-[13px]`/`text-[11px]` or `font-semibold` by hand.",
|
|
2891
2891
|
"DO use `tone` for colour (`muted`/`primary`/semantic), `tabular` for numbers, `mono` for codes — not `className=\"text-muted-foreground font-mono tabular-nums\"`.",
|
|
2892
|
+
"DO use `break=\"phrase\"` for Japanese prose (a name, an organisation, a status) in a table cell — never `className=\"[word-break:auto-phrase]\"`; it is not for a machine id, which is `break=\"anywhere\"`.",
|
|
2892
2893
|
"DO use `break=\"anywhere\"` for an email, code or id in a table cell or Descriptions value — never `className=\"[overflow-wrap:anywhere] break-words whitespace-normal\"`, and never `whitespace=\"pre-wrap\"`, which does not shrink a table column.",
|
|
2893
2894
|
"DO use `clamp={n}` for a description limited to n lines (card grids) and `truncate` for a one-line ellipsis — never `className=\"line-clamp-2\"` (banned utility). They are mutually exclusive; `clamp` wins.",
|
|
2894
2895
|
"For a heading, use `<Heading level>` instead of a large-size `<Text>`.",
|
|
@@ -2899,6 +2900,7 @@
|
|
|
2899
2900
|
"A muted caption under a value: `<Text size=\"xs\" tone=\"muted\">2026年5月度</Text>`.",
|
|
2900
2901
|
"A monospace id in a list row: `<Text size=\"xs\" mono tone=\"muted\">RC-204881</Text>`.",
|
|
2901
2902
|
"A staff email in a narrow DataTable cell at 320px, wrapping instead of scrolling the page: `<Text size=\"sm\" break=\"anywhere\">{staff.email}</Text>`.",
|
|
2903
|
+
"A trainee's katakana name in a DataTable cell, breaking between phrases instead of mid-katakana: `render: (row) => <Text break=\"phrase\">{row.name}</Text>` (pair long-heading columns with `headerWrap: true`).",
|
|
2902
2904
|
"An emphasized inline figure: `<Text weight=\"medium\" tabular>¥1,240,000</Text>`.",
|
|
2903
2905
|
"A service-card description clamped to 2 lines on a narrow (390px) index: `<Text as=\"p\" size=\"sm\" tone=\"muted\" clamp={2}>{description}</Text>`.",
|
|
2904
2906
|
"An issue subject linking out of a table cell, wrapping to two lines: `<Text asChild link truncate={false}><Link href={`/view/${key}`}>{subject}</Link></Text>`.",
|
package/agent/index.json
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"counts": {
|
|
3
|
-
"anti-ai-tells":
|
|
3
|
+
"anti-ai-tells": 35,
|
|
4
4
|
"components": 161,
|
|
5
5
|
"patterns": 24,
|
|
6
6
|
"rules": 43,
|
|
7
7
|
"tokens": 2195,
|
|
8
8
|
"vocabulary": 14
|
|
9
9
|
},
|
|
10
|
+
"design": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/DESIGN.md",
|
|
10
11
|
"files": [
|
|
12
|
+
{
|
|
13
|
+
"file": "DESIGN.md",
|
|
14
|
+
"note": "12 KB — the visual spec: tokens, colour scarcity, admin screen anatomy (list, detail, form, settings, dashboard), do/don't. Read before composing a screen.",
|
|
15
|
+
"url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/DESIGN.md"
|
|
16
|
+
},
|
|
11
17
|
{
|
|
12
18
|
"file": "components-index.json",
|
|
13
19
|
"note": "47 KB — name + group + tagline for all 161. FETCH THIS FIRST, then fetch only the components you chose.",
|
|
@@ -48,7 +54,7 @@
|
|
|
48
54
|
"note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
|
|
49
55
|
"read": {
|
|
50
56
|
"live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
|
|
51
|
-
"pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.
|
|
57
|
+
"pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.6.0/agent/index.json"
|
|
52
58
|
},
|
|
53
59
|
"source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
|
|
54
60
|
"start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
|
|
@@ -62,5 +68,5 @@
|
|
|
62
68
|
"foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
|
|
63
69
|
"semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
|
|
64
70
|
},
|
|
65
|
-
"version": "32.
|
|
71
|
+
"version": "32.6.0"
|
|
66
72
|
}
|
package/agent/llms.txt
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
# @godxjp/ui
|
|
2
2
|
|
|
3
3
|
> A Japanese-enterprise React design system: 161 components, 2195 design tokens,
|
|
4
|
-
> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.
|
|
4
|
+
> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.6.0.
|
|
5
5
|
|
|
6
6
|
If your client can run a process, do not read these files — run the MCP server instead
|
|
7
|
-
(`npx @godxjp/ui-mcp@32.
|
|
7
|
+
(`npx @godxjp/ui-mcp@32.6.0`). It is searchable and version-locked. These files exist for agents
|
|
8
8
|
that can only fetch URLs.
|
|
9
9
|
|
|
10
10
|
## Start
|
|
11
11
|
|
|
12
12
|
- [START-HERE.md](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md): the whole contract — the four rules, the token override model, a page that passes review. Read this first; it is self-contained.
|
|
13
13
|
- [index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json): version, counts, and the URL of every file.
|
|
14
|
+
- [DESIGN.md](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/DESIGN.md): 12 KB — the visual spec: tokens, colour scarcity, admin screen anatomy (list, detail, form, settings, dashboard), do/don't. Read it before composing a screen.
|
|
14
15
|
|
|
15
16
|
## Catalog
|
|
16
17
|
|
|
@@ -21,12 +22,12 @@ that can only fetch URLs.
|
|
|
21
22
|
- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1872 `component` knobs.
|
|
22
23
|
- [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
|
|
23
24
|
- [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 43 cardinal rules.
|
|
24
|
-
- [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json):
|
|
25
|
+
- [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 35 shapes that make generated UI look generated, each with its fix.
|
|
25
26
|
|
|
26
27
|
## Pinning
|
|
27
28
|
|
|
28
29
|
Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
|
|
29
|
-
the tag: `.../godx-jp/godxjp-ui/v32.
|
|
30
|
+
the tag: `.../godx-jp/godxjp-ui/v32.6.0/agent/...`. A catalog that does not match the installed
|
|
30
31
|
package describes props that are absent, or hides props that are present, and says nothing either way.
|
|
31
32
|
|
|
32
33
|
Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"code": "import { Badge } from \"@godxjp/ui/data-display\"\n\n// Badge auto-colours a fixed set of English LIFECYCLE keys:\n// active/completed (success ✓) · draft (neutral ○) · pending/temporary (warning ⏱)\n// scheduled/sending (info) · cancelled (neutral) · failed/deleted/bounced (destructive ✕)\n// Anything else (localized labels, tiers) falls back to neutral grey ○ unless you override.\n\n// 1) Lifecycle with localized text — map to the key, keep JP via children (icon stays):\n<Badge status=\"active\">公開中</Badge> // green ✓ 公開中\n\n// 2) Unknown label — set tone explicitly (no icon, since the key is unknown):\n<Badge status=\"公開中\" tone=\"success\" />\n\n// 3) Tier / category —
|
|
2
|
+
"code": "import { Badge } from \"@godxjp/ui/data-display\"\n\n// Badge auto-colours a fixed set of English LIFECYCLE keys:\n// active/completed (success ✓) · draft (neutral ○) · pending/temporary (warning ⏱)\n// scheduled/sending (info) · cancelled (neutral) · failed/deleted/bounced (destructive ✕)\n// Anything else (localized labels, tiers) falls back to neutral grey ○ unless you override.\n\n// 1) Lifecycle with localized text — map to the key, keep JP via children (icon stays):\n<Badge status=\"active\">公開中</Badge> // green ✓ 公開中\n\n// 2) Unknown label — set tone explicitly (no icon, since the key is unknown):\n<Badge status=\"公開中\" tone=\"success\" />\n\n// 3) Tier / category — ONE neutral tone for all of them, no glyph. Colour means status;\n// a rainbow of tiers reads as several statuses. Prefer plain text in a table column.\n<Badge status=\"プレミアム\" tone=\"neutral\" icon={null} />\n<Badge status=\"ゴールド\" tone=\"neutral\" icon={null} />\n\n// tone: \"success\" | \"warning\" | \"destructive\" | \"info\" | \"neutral\" (import type ToneProp)\n// RULE: a chip never wraps — it is pinned white-space: nowrap, so it stays one line in\n// narrow table cells. Centralize the domain→tone map in ONE small consumer wrapper and\n// import that instead of the raw Badge across pages.",
|
|
3
3
|
"name": "badge-coloring",
|
|
4
|
-
"tagline": "Colour a Badge for localized
|
|
4
|
+
"tagline": "Colour a Badge for a localized STATUS via tone + icon; tiers and categories take one neutral tone (colour means status).",
|
|
5
5
|
"tags": [
|
|
6
6
|
"statusbadge",
|
|
7
7
|
"badge",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"code": "// ───────────────────────────────────────────────────────────────────────\n// 0) ★ MOST COMMON: <Card> body has NO padding (content is flush against the edges)\n// Cause: the bare <Card> has ZERO inner padding — it MUST contain <CardContent>.\n// Don't hand-roll padding with className=\"p-4\" on the Card either.\n// ❌ <Card><Flex direction=\"col\" gap=\"md\">…fields…</Flex></Card> // flush, no padding\n// ❌ <Card className=\"p-4\">…fields…</Card> // hand-rolled padding\n// ✅ <Card><CardContent><Flex direction=\"col\" gap=\"md\">…fields…</Flex></CardContent></Card>\n// Titles → <CardHeader><CardTitle>. Only go flush deliberately for a full-bleed table:\n// ✅ <Card><CardContent flush><DataTable/></CardContent></Card>\n// GENERAL RULE — compose godx-ui primitives FULLY; never hand-roll what one ships:\n// padding → CardContent (not p-4) · controls → Input/Select/Button (not raw <input>/<select>/<button>)\n// vertical spacing → Flex direction=\"col\" gap (not space-y-*) · empty rows → DataTable's built-in\n// empty / <EmptyState> (not a custom data.length===0 guard). If a primitive exists, USE it.\n\n// 1) StatCard shows a DOUBLE border (too thick)\n// Cause: StatCard IS already a bordered Card. Don't wrap it.\n// ❌ <Card><CardContent><StatCard label=\"x\" value=\"1\" /></CardContent></Card>\n// ✅ <ResponsiveGrid columns={4}><StatCard label=\"
|
|
2
|
+
"code": "// ───────────────────────────────────────────────────────────────────────\n// 0) ★ MOST COMMON: <Card> body has NO padding (content is flush against the edges)\n// Cause: the bare <Card> has ZERO inner padding — it MUST contain <CardContent>.\n// Don't hand-roll padding with className=\"p-4\" on the Card either.\n// ❌ <Card><Flex direction=\"col\" gap=\"md\">…fields…</Flex></Card> // flush, no padding\n// ❌ <Card className=\"p-4\">…fields…</Card> // hand-rolled padding\n// ✅ <Card><CardContent><Flex direction=\"col\" gap=\"md\">…fields…</Flex></CardContent></Card>\n// Titles → <CardHeader><CardTitle>. Only go flush deliberately for a full-bleed table:\n// ✅ <Card><CardContent flush><DataTable/></CardContent></Card>\n// GENERAL RULE — compose godx-ui primitives FULLY; never hand-roll what one ships:\n// padding → CardContent (not p-4) · controls → Input/Select/Button (not raw <input>/<select>/<button>)\n// vertical spacing → Flex direction=\"col\" gap (not space-y-*) · empty rows → DataTable's built-in\n// empty / <EmptyState> (not a custom data.length===0 guard). If a primitive exists, USE it.\n\n// 1) StatCard shows a DOUBLE border (too thick)\n// Cause: StatCard IS already a bordered Card. Don't wrap it.\n// ❌ <Card><CardContent><StatCard label=\"x\" value=\"1\" /></CardContent></Card>\n// ✅ dashboard only, with comparison/trend:\n// <ResponsiveGrid columns={4}><StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" /></ResponsiveGrid>\n// A list or detail page has NO StatCard row — a row count is not a KPI (Pagination showTotal).\n\n// 2) Badge renders grey with a ○ (no colour) for localized/tier labels\n// Cause: it auto-maps only English lifecycle keys.\n// ✅ <Badge status=\"active\">公開中</Badge> // lifecycle → keep icon\n// ✅ <Badge status=\"プレミアム\" tone=\"neutral\" icon={null} /> // tier → ONE neutral tone\n// Colour is for status only; a tier/category/scope is plain text or a neutral pill.\n\n// 3) Table text collapses to one char per line, or a chip wraps\n// ✅ give long columns a width: { key: \"name\", header: \"氏名\", width: \"w-64\" }\n// (cells + chips are pinned white-space: nowrap by the library.)\n\n// 4) Empty (icon/action) column header shows a blank grey block\n// ✅ header: \"\" renders a transparent cell — leave it empty, don't inject a space.\n\n// 5) DataTable columns are crushed / squeezed\n// Cause: the table is nested in a narrow grid column.\n// ❌ <ResponsiveGrid columns={3}><div className=\"lg:col-span-2\"><Card><DataTable/></Card></div></ResponsiveGrid>\n// ✅ Table gets its OWN full-width row: <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 6) Toolbar (filter bar) has no padding (sticks to the edge)\n// Cause: it's inside CardContent flush (flush strips padding — that's for tables).\n// ❌ <Card><CardContent flush><Toolbar/><DataTable/></CardContent></Card>\n// ✅ <Toolbar/> then <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 7) Sidebar footer looks washed-out / off-design\n// Cause: raw opacity-*/text-[11px]. Use semantic tokens.\n// ✅ <div className=\"text-muted-foreground text-xs\">\n// <div className=\"text-foreground font-medium\">{name}</div><div>{role}</div></div>\n\n// 8) Inertia: \"Objects are not valid as a React child {errors, auth, …}\"\n// Cause: persistent layout passed as a render fn. Use the ARRAY form.\n// ❌ Page.layout = (page) => <Layout>{page}</Layout>\n// ✅ Page.layout = [Layout] // Layout is ({children}) => ...\n\n// 9) Inertia v3 hydration mismatch (\"server rendered text didn't match the client\")\n// Cause: Math.random()/argless new Date() during render (SSR ≠ client).\n// ✅ seed deterministically by index, or compute in an event handler.\n\n// 10) Hide a column on mobile / sign-aware KPI delta\n// ✅ columns: [{ key: \"email\", header: \"メール\", hiddenOnMobile: true }]\n// ✅ <StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" /> // + green / - red; inverse flips",
|
|
3
3
|
"name": "common-fixes",
|
|
4
4
|
"tagline": "Fix the most common @godxjp/ui consumer mistakes & visual bugs (StatCard double-border, grey Badge, crushed/empty table headers, washed-out sidebar footer, Inertia layout crash, SSR hydration). Before → after.",
|
|
5
5
|
"tags": [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"code": "import {
|
|
2
|
+
"code": "import { AlertDialog, toast } from \"@godxjp/ui/feedback\";\n\n// The preset covers a typed challenge: confirm stays disabled until the input equals `slug`.\nexport function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolean; onOpenChange: (v: boolean) => void; slug: string }) {\n return (\n <AlertDialog\n open={open}\n onOpenChange={onOpenChange}\n title=\"プロジェクトを削除\"\n description={`この操作は取り消せません。確認のためプロジェクト名 \"${slug}\" と入力してください。`}\n challenge={slug}\n confirmLabel=\"完全に削除\"\n onConfirm={() => {\n toast.success(\"削除しました\");\n onOpenChange(false);\n }}\n />\n );\n}",
|
|
3
3
|
"name": "confirm-destructive",
|
|
4
|
-
"tagline": "Type-to-confirm destructive dialog —
|
|
4
|
+
"tagline": "Type-to-confirm destructive dialog — the AlertDialog PRESET with `challenge` (the compound AlertDialog* parts are the older way in; a body the preset does not cover is Dialog variant=\"destructive\").",
|
|
5
5
|
"tags": [
|
|
6
6
|
"dialog",
|
|
7
7
|
"confirm",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"code": "import { Head, router } from \"@inertiajs/react\"\nimport { PageContainer
|
|
2
|
+
"code": "import { Head, router } from \"@inertiajs/react\"\nimport { PageContainer } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, EmptyState, Descriptions, Badge } from \"@godxjp/ui/data-display\"\nimport { Button } from \"@godxjp/ui/general\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { ArrowLeft } from \"lucide-react\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\"\n\n// Detail routes pass the param as an Inertia prop:\n// Route::get('/members/{id}', fn ($id) => Inertia::render('crm/members/show', ['id' => $id]))\nfunction MemberShow({ id }: { id: string }) {\n const member = MEMBERS.find((m) => m.id === id)\n\n if (!member) {\n return (\n <>\n <Head title=\"会員詳細\" />\n <PageContainer title=\"会員詳細\">\n <EmptyState title=\"会員が見つかりません\" description={`ID「${id}」は存在しません。`} />\n <Button variant=\"outline\" onClick={() => router.visit(\"/members\")}><ArrowLeft className=\"size-4\" />一覧へ戻る</Button>\n </PageContainer>\n </>\n )\n }\n\n return (\n <>\n <Head title={member.name} />\n <PageContainer title={member.name}>\n {/* Figures about one member are facts, not KPIs: Descriptions rows, not a StatCard row. */}\n <Card>\n <CardContent>\n {/* Descriptions is COMPOUND — value goes in children, not a prop */}\n <Descriptions columns={2}>\n <Descriptions.Item label=\"会員ID\">{member.id}</Descriptions.Item>\n <Descriptions.Item label=\"ランク\">{member.rank}</Descriptions.Item>\n <Descriptions.Item label=\"ステータス\"><Badge status={member.status} /></Descriptions.Item>\n <Descriptions.Item label=\"登録日\">{formatDate(member.registeredAt)}</Descriptions.Item>\n <Descriptions.Item label=\"累計購入額\">{`¥${member.total.toLocaleString()}`}</Descriptions.Item>\n <Descriptions.Item label=\"来店回数\">{member.visits}</Descriptions.Item>\n </Descriptions>\n </CardContent>\n </Card>\n </PageContainer>\n </>\n )\n}\n\nMemberShow.layout = withCrmLayout\nexport default MemberShow",
|
|
3
3
|
"name": "inertia-detail-page",
|
|
4
|
-
"tagline": "Inertia detail page — receives {id} prop, Descriptions (compound)
|
|
4
|
+
"tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) in one Card + EmptyState fallback. No KPI tile row.",
|
|
5
5
|
"tags": [
|
|
6
6
|
"inertia",
|
|
7
7
|
"detail",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"code": "import { Head, router } from \"@inertiajs/react\"\nimport { useMemo, useState } from \"react\"\nimport { PageContainer,
|
|
2
|
+
"code": "import { Head, router } from \"@inertiajs/react\"\nimport { useMemo, useState } from \"react\"\nimport { PageContainer, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, DataTable, EmptyState, Badge, type ColumnDef } from \"@godxjp/ui/data-display\"\nimport { SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\"\nimport { Toolbar, ToolbarGroup, Pagination } from \"@godxjp/ui/navigation\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\" // see \"inertia-persistent-layout\"\n\ntype Coupon = { id: string; name: string; status: string; scope: string; validFrom: string; validTo: string; usage: number }\nconst PAGE_SIZE = 10\n\nfunction Coupons({ coupons }: { coupons: Coupon[] }) {\n const [q, setQ] = useState(\"\")\n const [status, setStatus] = useState(\"all\")\n const [page, setPage] = useState(1)\n\n const filtered = useMemo(() => coupons.filter((c) => {\n if (q && !c.name.toLowerCase().includes(q.toLowerCase())) return false\n if (status !== \"all\" && c.status !== status) return false\n return true\n }), [coupons, q, status])\n const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)\n\n // ColumnDef = { key, header, render?, align?: \"left\"|\"center\"|\"right\", sortable?, width? }\n const columns: ColumnDef<Coupon>[] = [\n { key: \"name\", header: \"クーポン名\", render: (c) => <span className=\"font-medium\">{c.name}</span> },\n { key: \"scope\", header: \"スコープ\" }, // a category is plain text; Badge is for the status column only\n { key: \"status\", header: \"ステータス\", render: (c) => <Badge status={c.status} /> },\n { key: \"valid\", header: \"有効期間\", render: (c) => `${formatDate(c.validFrom)} 〜 ${formatDate(c.validTo)}` },\n { key: \"usage\", header: \"利用数\", align: \"right\", render: (c) => c.usage.toLocaleString() },\n ]\n\n return (\n <>\n <Head title=\"クーポン管理\" />\n {/* RULE: every page wraps in PageContainer; vertical rhythm via Flex direction=\"col\"/ResponsiveGrid, never p-* or gap-* */}\n {/* No subtitle that restates the title, no StatCard row: the total is Pagination's showTotal. */}\n <PageContainer title=\"クーポン管理\">\n <Flex direction=\"col\" gap=\"lg\">\n {/* Toolbar is the filter-bar primitive (standalone, above the table surface). */}\n <Toolbar hasActiveFilters={q !== \"\" || status !== \"all\"} onClear={() => { setQ(\"\"); setStatus(\"all\"); setPage(1) }}>\n {/* SearchInput is value + onSearch(v) — NOT onChange */}\n <SearchInput placeholder=\"クーポン名で検索\" value={q} onSearch={(v) => { setQ(v); setPage(1) }} />\n <ToolbarGroup label=\"ステータス\">\n <Select value={status} onValueChange={(v) => { setStatus(v); setPage(1) }}>\n <SelectTrigger><SelectValue /></SelectTrigger>\n <SelectContent>\n <SelectItem value=\"all\">全ステータス</SelectItem>\n <SelectItem value=\"公開中\">公開中</SelectItem>\n <SelectItem value=\"下書き\">下書き</SelectItem>\n </SelectContent>\n </Select>\n </ToolbarGroup>\n </Toolbar>\n\n <Card>\n <CardContent flush>\n {filtered.length === 0\n ? <EmptyState title=\"該当するクーポンがありません\" description=\"検索条件を変更してください。\" /> /* one sentence, no icon */\n : <DataTable data={paged} columns={columns} getRowId={(c) => c.id} onRowClick={(c) => router.visit(`/coupons/${c.id}`)} />}\n </CardContent>\n </Card>\n\n {/* Pagination ONLY for real multi-page data — hide it while empty or single-page. */}\n {filtered.length > PAGE_SIZE && (\n <Pagination value={page} total={filtered.length} pageSize={PAGE_SIZE} showTotal onValueChange={(p) => setPage(p)} />\n )}\n </Flex>\n </PageContainer>\n </>\n )\n}\n\nCoupons.layout = withCrmLayout\nexport default Coupons",
|
|
3
3
|
"name": "inertia-list-page",
|
|
4
|
-
"tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar + DataTable + Badge + Pagination
|
|
4
|
+
"tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar (above the table) + DataTable + Badge + Pagination. No KPI row, no restating subtitle.",
|
|
5
5
|
"tags": [
|
|
6
6
|
"inertia",
|
|
7
7
|
"list",
|
|
@@ -4,15 +4,17 @@
|
|
|
4
4
|
"page-layout",
|
|
5
5
|
"stack-cards"
|
|
6
6
|
],
|
|
7
|
-
"code": "import { PageContainer, Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Card,
|
|
7
|
+
"code": "import { PageContainer, Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Card, CardContent, DataTable, Descriptions, type ColumnDef } from \"@godxjp/ui/data-display\";\nimport { Button, Heading } from \"@godxjp/ui/general\";\n\ntype Shot = { id: string; name: string };\nconst columns: ColumnDef<Shot>[] = [{ key: \"name\", header: \"File\" }];\n\n// Two steps, never one uniform gap:\n// section step — between direct children of PageContainer (--page-body-gap). Do NOT add gap-*/mt-*.\n// item step — inside a section, Flex gap=\"sm\" between its heading and its content.\n// A section is a Heading, not a Card. Card is for a real boundary: here, the table surface.\nexport function ReportPage({ shots }: { shots: Shot[] }) {\n return (\n <PageContainer title=\"Bug report\" extra={<Button>Send</Button>}>\n <Flex direction=\"col\" gap=\"sm\">\n <Heading level={2}>Details</Heading>\n <Descriptions columns={2}>\n <Descriptions.Item label=\"URL\">https://app.example.com/orders</Descriptions.Item>\n <Descriptions.Item label=\"Browser\">Safari 18</Descriptions.Item>\n </Descriptions>\n </Flex>\n <Flex direction=\"col\" gap=\"sm\">\n <Heading level={2}>Screenshots</Heading>\n <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>…</ResponsiveGrid>\n </Flex>\n <Flex direction=\"col\" gap=\"sm\">\n <Heading level={2}>Attachments</Heading>\n <Card>\n <CardContent flush>\n <DataTable data={shots} columns={columns} getRowId={(r) => r.id} />\n </CardContent>\n </Card>\n </Flex>\n </PageContainer>\n );\n}\n",
|
|
8
8
|
"name": "page-sections",
|
|
9
|
-
"tagline": "A page
|
|
9
|
+
"tagline": "A page of several sections: a Heading + section spacing marks a section, not a Card. PageContainer spaces its direct children (section step); Flex gap spaces items inside one (item step). Card only for a real boundary.",
|
|
10
10
|
"tags": [
|
|
11
11
|
"layout",
|
|
12
12
|
"page",
|
|
13
13
|
"card",
|
|
14
14
|
"spacing",
|
|
15
15
|
"flex",
|
|
16
|
-
"grid"
|
|
16
|
+
"grid",
|
|
17
|
+
"section",
|
|
18
|
+
"heading"
|
|
17
19
|
]
|
|
18
20
|
}
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
"preferences-rows",
|
|
8
8
|
"account-identity"
|
|
9
9
|
],
|
|
10
|
-
"code": "// Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a \"SettingsSection\"/\"SettingsRow\"/\
|
|
10
|
+
"code": "// Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a \"SettingsSection\"/\"SettingsRow\"/\"DangerZone\"\n// FAILS the Framework-Component Test, so compose it. Reference screen: get_exemplar(\"settings\")\n// (docs/showcase/settings-account-sections.tsx). Composition rules: DESIGN.md → Admin Screen Anatomy.\nimport { ExternalLink } from \"lucide-react\";\nimport { Button, Heading } from \"@godxjp/ui/general\";\nimport { Card, CardContent, Descriptions, ListRow, StatusBadge } from \"@godxjp/ui/data-display\";\nimport { Switch } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog } from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// Sections are a heading + spacing: the SECTION step (gap=\"xl\") is larger than the ITEM step\n// (gap=\"sm\"), which is what carries the hierarchy — not a box around every block.\n<Flex direction=\"col\" gap=\"xl\">\n\n {/* 1) IDENTITY — a section, not a Card. Metadata is Descriptions (a real <dl>). */}\n <Flex direction=\"col\" gap=\"sm\">\n <Flex justify=\"between\" align=\"center\">\n <Heading level={2}>アカウント情報</Heading>\n <Button variant=\"outline\" size=\"sm\">編集</Button>\n </Flex>\n <Descriptions columns={2}>\n <Descriptions.Item label=\"表示名\">藤原 慧</Descriptions.Item>\n <Descriptions.Item label=\"メールアドレス\">satoshi@example.co.jp</Descriptions.Item>\n <Descriptions.Item label=\"従業員番号\" mono>EMP-1042-JP</Descriptions.Item>\n <Descriptions.Item label=\"利用開始日\">\n <time dateTime=\"2023-04-01\">\n {new Intl.DateTimeFormat(locale, { dateStyle: \"long\", timeZone: \"UTC\" }).format(since)}\n </time>\n </Descriptions.Item>\n </Descriptions>\n </Flex>\n\n {/* 2) PREFERENCE ROWS — a list of setting rows IS a real boundary, so it gets one Card:\n CardContent flush + ListRow, whose trailing slot is the control. The visible title is the\n control's <label htmlFor>. NEVER a flex div with border-b rows. */}\n <Flex direction=\"col\" gap=\"sm\">\n <Heading level={2}>通知の環境設定</Heading>\n <Card>\n <CardContent flush>\n <ListRow\n align=\"start\"\n overflow=\"wrap\"\n title={<label htmlFor=\"pref-digest\">週次サマリーをメールで受け取る</label>}\n description=\"毎週月曜日の朝に未処理の承認をまとめて送信します。\"\n trailing={<Switch id=\"pref-digest\" checked={digest} onCheckedChange={setDigest} />}\n />\n </CardContent>\n </Card>\n </Flex>\n\n {/* 3) BILLING HANDOFF — a section. The state is a canonical StatusBadge (never a page-local\n status→colour map); money through Intl. */}\n <Flex direction=\"col\" gap=\"sm\">\n <Flex justify=\"between\" align=\"center\">\n <Heading level={2}>請求とサブスクリプション</Heading>\n <StatusBadge status=\"past_due\" variant=\"outline\" />\n </Flex>\n <Descriptions columns={2}>\n <Descriptions.Item label=\"契約プラン\">ビジネス（年額）</Descriptions.Item>\n <Descriptions.Item label=\"次回請求予定額\">\n {new Intl.NumberFormat(locale, { style: \"currency\", currency: \"JPY\" }).format(1536000)}\n </Descriptions.Item>\n </Descriptions>\n <div>\n <Button variant=\"outline\" asChild>\n <a href={portalUrl} target=\"_blank\" rel=\"noreferrer\">\n <ExternalLink aria-hidden=\"true\" />\n 請求ポータルを開く\n <span className=\"sr-only\">（新しいタブで開きます）</span>\n </a>\n </Button>\n </div>\n </Flex>\n\n {/* 4) DANGER ZONE — a real boundary: Card accent=\"destructive\" (the rail comes from\n --destructive). The heading and each row say what is lost; no decorative icon. */}\n <Flex direction=\"col\" gap=\"sm\">\n <Heading level={2}>取り消せない操作</Heading>\n <Card accent=\"destructive\">\n <CardContent flush>\n <ListRow\n align=\"start\"\n overflow=\"wrap\"\n title=\"ワークスペースと全データを完全に削除する\"\n description=\"勤怠記録・申請履歴・監査ログがすべて削除されます。\"\n trailing={<Button variant=\"destructive\" size=\"sm\" onClick={() => setConfirmOpen(true)}>削除</Button>}\n />\n </CardContent>\n </Card>\n </Flex>\n</Flex>\n\n<AlertDialog\n open={confirmOpen}\n onOpenChange={setConfirmOpen}\n title=\"ワークスペースを完全に削除しますか？\"\n description=\"この操作は取り消せません。確認のため識別子を入力してください。\"\n challenge={workspaceSlug}\n variant=\"destructive\"\n onConfirm={destroy}\n/>\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Section step > item step (gap=\"xl\" between sections, gap=\"sm\" inside one).\n// ✅ A Card only where there is a real boundary: a list of setting rows, the danger zone.\n// ✅ Every setting row is a ListRow; its control lives in `trailing`, titled by <label htmlFor>.\n// ⛔ Do NOT add SettingsSection / SettingsRow / DangerZone to src/components — they fail Gate 0.\n// ⛔ Do NOT give every block Card + CardHeader + CardTitle + CardDescription (ui-audit card-per-section).\n// ⛔ Do NOT hand-roll padding (p-4), a status colour map, or a <dl> replacement.",
|
|
11
11
|
"name": "settings-section-rows",
|
|
12
|
-
"tagline": "The four canonical settings
|
|
12
|
+
"tagline": "The four canonical settings blocks — identity · preference rows · billing handoff · danger zone. Identity and billing are SECTIONS (Heading + Descriptions, no surface); preference rows and the danger zone are Cards because they are real boundaries. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
|
|
13
13
|
"tags": [
|
|
14
14
|
"settings",
|
|
15
15
|
"account",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"account-identity"
|
|
54
54
|
],
|
|
55
55
|
"name": "settings-section-rows",
|
|
56
|
-
"tagline": "The four canonical settings
|
|
56
|
+
"tagline": "The four canonical settings blocks — identity · preference rows · billing handoff · danger zone. Identity and billing are SECTIONS (Heading + Descriptions, no surface); preference rows and the danger zone are Cards because they are real boundaries. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
|
|
57
57
|
"tags": [
|
|
58
58
|
"settings",
|
|
59
59
|
"account",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
"name": "confirm-destructive",
|
|
86
|
-
"tagline": "Type-to-confirm destructive dialog —
|
|
86
|
+
"tagline": "Type-to-confirm destructive dialog — the AlertDialog PRESET with `challenge` (the compound AlertDialog* parts are the older way in; a body the preset does not cover is Dialog variant=\"destructive\").",
|
|
87
87
|
"tags": [
|
|
88
88
|
"dialog",
|
|
89
89
|
"confirm",
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
},
|
|
144
144
|
{
|
|
145
145
|
"name": "inertia-list-page",
|
|
146
|
-
"tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar + DataTable + Badge + Pagination
|
|
146
|
+
"tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar (above the table) + DataTable + Badge + Pagination. No KPI row, no restating subtitle.",
|
|
147
147
|
"tags": [
|
|
148
148
|
"inertia",
|
|
149
149
|
"list",
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
},
|
|
158
158
|
{
|
|
159
159
|
"name": "inertia-detail-page",
|
|
160
|
-
"tagline": "Inertia detail page — receives {id} prop, Descriptions (compound)
|
|
160
|
+
"tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) in one Card + EmptyState fallback. No KPI tile row.",
|
|
161
161
|
"tags": [
|
|
162
162
|
"inertia",
|
|
163
163
|
"detail",
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
},
|
|
210
210
|
{
|
|
211
211
|
"name": "badge-coloring",
|
|
212
|
-
"tagline": "Colour a Badge for localized
|
|
212
|
+
"tagline": "Colour a Badge for a localized STATUS via tone + icon; tiers and categories take one neutral tone (colour means status).",
|
|
213
213
|
"tags": [
|
|
214
214
|
"statusbadge",
|
|
215
215
|
"badge",
|
|
@@ -348,14 +348,16 @@
|
|
|
348
348
|
"stack-cards"
|
|
349
349
|
],
|
|
350
350
|
"name": "page-sections",
|
|
351
|
-
"tagline": "A page
|
|
351
|
+
"tagline": "A page of several sections: a Heading + section spacing marks a section, not a Card. PageContainer spaces its direct children (section step); Flex gap spaces items inside one (item step). Card only for a real boundary.",
|
|
352
352
|
"tags": [
|
|
353
353
|
"layout",
|
|
354
354
|
"page",
|
|
355
355
|
"card",
|
|
356
356
|
"spacing",
|
|
357
357
|
"flex",
|
|
358
|
-
"grid"
|
|
358
|
+
"grid",
|
|
359
|
+
"section",
|
|
360
|
+
"heading"
|
|
359
361
|
]
|
|
360
362
|
},
|
|
361
363
|
{
|