@godxjp/ui 30.9.0 → 31.0.3
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/README.md +2 -1
- package/agent/START-HERE.md +1 -1
- package/agent/components/PrefetchLink.json +3 -3
- package/agent/components-index.json +1 -1
- package/agent/components.json +3 -3
- package/agent/index.json +2 -2
- package/agent/llms.txt +3 -3
- package/agent/patterns/settings-page-responsive.json +1 -1
- package/agent/patterns.json +1 -1
- package/dist/components/query/index.d.ts +0 -2
- package/dist/components/query/index.js +0 -2
- package/dist/components/react-router/index.d.ts +2 -0
- package/dist/components/react-router/index.js +4 -0
- package/dist/contracts/measurement.json +1 -1
- package/dist/i18n/translate.d.ts +2 -0
- package/dist/i18n/translate.js +7 -0
- package/dist/i18n/use-translation.d.ts +5 -4
- package/dist/i18n/use-translation.js +28 -7
- package/dist/styles/alert-layout.css +4 -2
- package/dist/styles/layers.json +1 -1
- package/docs/CONSUMER-RULES.md +2 -2
- package/docs/data-display/permission-matrix.tsx +30 -28
- package/docs/data-entry/cascader.tsx +22 -20
- package/docs/data-entry/date-picker.tsx +47 -43
- package/docs/data-entry/form-field/examples/a11y-contract.tsx +80 -76
- package/docs/data-entry/form-field/examples/create-form.tsx +33 -31
- package/docs/data-entry/form-field/index.tsx +61 -57
- package/docs/data-entry/form.tsx +112 -106
- package/docs/data-entry/input.tsx +297 -270
- package/docs/data-entry/label.tsx +11 -9
- package/docs/data-entry/number-input.tsx +86 -78
- package/docs/data-entry/radio-group.tsx +33 -26
- package/docs/data-entry/rating.tsx +29 -25
- package/docs/data-entry/select-matrix.tsx +49 -47
- package/docs/data-entry/select.tsx +38 -35
- package/docs/data-entry/slider.tsx +45 -41
- package/docs/data-entry/textarea.tsx +44 -42
- package/docs/data-entry/time-picker.tsx +51 -47
- package/docs/feedback/sheet.tsx +84 -79
- package/docs/foundation/theme-editor.tsx +133 -124
- package/docs/general/button/examples/form-actions.tsx +17 -15
- package/docs/layout/auth-recovery/examples/password-recovery.tsx +31 -29
- package/docs/layout/auth-shell-registration.tsx +75 -72
- package/docs/layout/auth-shell-variants.tsx +55 -51
- package/docs/layout/space-compact.tsx +11 -8
- package/docs/{query → react-router}/prefetch-link.tsx +1 -1
- package/docs/showcase/caimono-price-comparison.tsx +59 -51
- package/docs/showcase/case3-approval-workflow.tsx +27 -25
- package/docs/showcase/case4-login.tsx +37 -34
- package/docs/showcase/permission-matrix.tsx +44 -42
- package/docs/showcase/theme-customization.tsx +108 -99
- package/package.json +6 -2
- package/scripts/consumer-rule.md +22 -0
- package/scripts/ui-audit.mjs +99 -2
- /package/dist/components/{query → react-router}/prefetch-link.d.ts +0 -0
- /package/dist/components/{query → react-router}/prefetch-link.js +0 -0
|
@@ -2,7 +2,7 @@ import { useState } from "react";
|
|
|
2
2
|
import { ja } from "date-fns/locale";
|
|
3
3
|
|
|
4
4
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
|
|
5
|
-
import { DatePicker, FormField } from "@godxjp/ui/data-entry";
|
|
5
|
+
import { Form, DatePicker, FormField } from "@godxjp/ui/data-entry";
|
|
6
6
|
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
7
7
|
import type { DateRange } from "react-day-picker";
|
|
8
8
|
|
|
@@ -65,23 +65,25 @@ export default function Demo() {
|
|
|
65
65
|
</CardDescription>
|
|
66
66
|
</CardHeader>
|
|
67
67
|
<CardContent>
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
68
|
+
<Form>
|
|
69
|
+
<Flex gap="lg" wrap>
|
|
70
|
+
<FormField id="ruled-date" label="罫線あり (既定)">
|
|
71
|
+
<DatePicker
|
|
72
|
+
id="ruled-date"
|
|
73
|
+
name="ruled_date"
|
|
74
|
+
defaultValue={new Date(2026, 0, 15)}
|
|
75
|
+
/>
|
|
76
|
+
</FormField>
|
|
77
|
+
<FormField id="unruled-date" label="罫線なし (bordered={false})">
|
|
78
|
+
<DatePicker
|
|
79
|
+
id="unruled-date"
|
|
80
|
+
name="unruled_date"
|
|
81
|
+
defaultValue={new Date(2026, 0, 15)}
|
|
82
|
+
bordered={false}
|
|
83
|
+
/>
|
|
84
|
+
</FormField>
|
|
85
|
+
</Flex>
|
|
86
|
+
</Form>
|
|
85
87
|
</CardContent>
|
|
86
88
|
</Card>
|
|
87
89
|
|
|
@@ -231,31 +233,33 @@ export default function Demo() {
|
|
|
231
233
|
<CardTitle level={2}>表示形式と元号</CardTitle>
|
|
232
234
|
</CardHeader>
|
|
233
235
|
<CardContent>
|
|
234
|
-
<
|
|
235
|
-
<
|
|
236
|
-
<
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
<
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
236
|
+
<Form>
|
|
237
|
+
<Flex direction="col" gap="md">
|
|
238
|
+
<FormField id="formatted-date" label="契約日">
|
|
239
|
+
<DatePicker
|
|
240
|
+
id="formatted-date"
|
|
241
|
+
name="contract"
|
|
242
|
+
defaultValue={new Date(2026, 8, 9)}
|
|
243
|
+
format="yyyy年MM月dd日"
|
|
244
|
+
/>
|
|
245
|
+
</FormField>
|
|
246
|
+
<FormField id="era-date" label="和暦">
|
|
247
|
+
<DatePicker
|
|
248
|
+
id="era-date"
|
|
249
|
+
name="era"
|
|
250
|
+
defaultValue={new Date(2026, 8, 9)}
|
|
251
|
+
format={{
|
|
252
|
+
calendar: "japanese",
|
|
253
|
+
era: "long",
|
|
254
|
+
year: "numeric",
|
|
255
|
+
month: "long",
|
|
256
|
+
day: "numeric",
|
|
257
|
+
}}
|
|
258
|
+
inputReadOnly
|
|
259
|
+
/>
|
|
260
|
+
</FormField>
|
|
261
|
+
</Flex>
|
|
262
|
+
</Form>
|
|
259
263
|
</CardContent>
|
|
260
264
|
</Card>
|
|
261
265
|
<Card>
|
|
@@ -96,53 +96,55 @@ export default function Demo() {
|
|
|
96
96
|
</CardDescription>
|
|
97
97
|
</CardHeader>
|
|
98
98
|
<CardContent>
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
{
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<
|
|
144
|
-
|
|
145
|
-
|
|
99
|
+
<Form>
|
|
100
|
+
<Flex direction="col" gap="md">
|
|
101
|
+
<FormField id="ac-account" label="勘定科目" required helper="仕訳で使用する科目">
|
|
102
|
+
<Select
|
|
103
|
+
id="ac-account"
|
|
104
|
+
name="account"
|
|
105
|
+
showSearch
|
|
106
|
+
options={[
|
|
107
|
+
{ value: "sales", label: "売上高" },
|
|
108
|
+
{ value: "rent", label: "地代家賃" },
|
|
109
|
+
{ value: "misc", label: "雑費" },
|
|
110
|
+
]}
|
|
111
|
+
onValueChange={() => {}}
|
|
112
|
+
/>
|
|
113
|
+
</FormField>
|
|
114
|
+
<FormField id="ac-currency" label="通貨" helper="ISO 4217">
|
|
115
|
+
<Select
|
|
116
|
+
id="ac-currency"
|
|
117
|
+
name="currency"
|
|
118
|
+
options={CURRENCIES}
|
|
119
|
+
onValueChange={() => {}}
|
|
120
|
+
/>
|
|
121
|
+
</FormField>
|
|
122
|
+
<FormField id="ac-region" label="地域" helper="都道府県まで選択">
|
|
123
|
+
<Cascader id="ac-region" options={REGIONS} onValueChange={() => {}} />
|
|
124
|
+
</FormField>
|
|
125
|
+
<FormField id="ac-category" label="カテゴリ" helper="ツリーから選択">
|
|
126
|
+
<TreeSelect id="ac-category" treeData={CATEGORIES} onValueChange={() => {}} />
|
|
127
|
+
</FormField>
|
|
128
|
+
<FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
|
|
129
|
+
<DatePicker id="ac-date" name="date" />
|
|
130
|
+
</FormField>
|
|
131
|
+
<FormField id="ac-month" label="対象月" helper="yyyy-MM">
|
|
132
|
+
<DatePicker picker="month" id="ac-month" name="month" />
|
|
133
|
+
</FormField>
|
|
134
|
+
<FormField id="ac-time" label="締め時刻" helper="24時間表記">
|
|
135
|
+
<TimePicker id="ac-time" name="time" />
|
|
136
|
+
</FormField>
|
|
137
|
+
<FormField id="ac-period" label="対象期間" helper="開始日と終了日">
|
|
138
|
+
<DatePicker range id="ac-period" name="period" />
|
|
139
|
+
</FormField>
|
|
140
|
+
<FormField id="ac-color" label="タグ色" helper="16進カラー">
|
|
141
|
+
<ColorPicker id="ac-color" onValueChange={() => {}} />
|
|
142
|
+
</FormField>
|
|
143
|
+
<FormField id="ac-search" label="取引先検索" helper="名称の一部で検索">
|
|
144
|
+
<SearchInput id="ac-search" />
|
|
145
|
+
</FormField>
|
|
146
|
+
</Flex>
|
|
147
|
+
</Form>
|
|
146
148
|
</CardContent>
|
|
147
149
|
</Card>
|
|
148
150
|
|
|
@@ -155,36 +157,38 @@ export default function Demo() {
|
|
|
155
157
|
</CardDescription>
|
|
156
158
|
</CardHeader>
|
|
157
159
|
<CardContent>
|
|
158
|
-
<
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
label="支払方法"
|
|
162
|
-
required
|
|
163
|
-
error="支払方法を選択してください"
|
|
164
|
-
>
|
|
165
|
-
<RadioGroup
|
|
160
|
+
<Form>
|
|
161
|
+
<Flex direction="col" gap="md">
|
|
162
|
+
<FormField
|
|
166
163
|
id="ac-method"
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
164
|
+
label="支払方法"
|
|
165
|
+
required
|
|
166
|
+
error="支払方法を選択してください"
|
|
167
|
+
>
|
|
168
|
+
<RadioGroup
|
|
169
|
+
id="ac-method"
|
|
170
|
+
options={[
|
|
171
|
+
{ value: "bank", label: "銀行振込" },
|
|
172
|
+
{ value: "card", label: "クレジットカード" },
|
|
173
|
+
{ value: "cash", label: "現金" },
|
|
174
|
+
]}
|
|
175
|
+
onValueChange={() => {}}
|
|
176
|
+
/>
|
|
177
|
+
</FormField>
|
|
178
|
+
<FormField id="ac-tags" label="タグ" helper="複数選択できます">
|
|
179
|
+
<CheckboxGroup
|
|
180
|
+
id="ac-tags"
|
|
181
|
+
orientation="horizontal"
|
|
182
|
+
options={[
|
|
183
|
+
{ value: "urgent", label: "至急" },
|
|
184
|
+
{ value: "review", label: "要確認" },
|
|
185
|
+
{ value: "archived", label: "アーカイブ" },
|
|
186
|
+
]}
|
|
187
|
+
onValueChange={() => {}}
|
|
188
|
+
/>
|
|
189
|
+
</FormField>
|
|
190
|
+
</Flex>
|
|
191
|
+
</Form>
|
|
188
192
|
</CardContent>
|
|
189
193
|
</Card>
|
|
190
194
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
|
|
3
|
-
import { Field, FormField, Input, Select, Switch, Textarea } from "@godxjp/ui/data-entry";
|
|
3
|
+
import { Form, Field, FormField, Input, Select, Switch, Textarea } from "@godxjp/ui/data-entry";
|
|
4
4
|
import { Button } from "@godxjp/ui/general";
|
|
5
5
|
import { Avatar, AvatarFallback } from "@godxjp/ui/data-display";
|
|
6
6
|
import {
|
|
@@ -69,36 +69,38 @@ export default function Demo() {
|
|
|
69
69
|
</Flex>
|
|
70
70
|
}
|
|
71
71
|
>
|
|
72
|
-
<
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
72
|
+
<Form>
|
|
73
|
+
<Flex direction="col" gap="md" className="max-w-2xl">
|
|
74
|
+
<FormField id="cf-name" label="取引先名" required helper="最大50文字">
|
|
75
|
+
<Input id="cf-name" placeholder="株式会社ベトヤ" />
|
|
76
|
+
</FormField>
|
|
77
|
+
<FormField id="cf-code" label="取引先コード" required helper="一意のコードを入力">
|
|
78
|
+
<Input id="cf-code" placeholder="BTY-0012" />
|
|
79
|
+
</FormField>
|
|
80
|
+
<FormField id="cf-type" label="区分">
|
|
81
|
+
<Select
|
|
82
|
+
id="cf-type"
|
|
83
|
+
name="type"
|
|
84
|
+
value={type}
|
|
85
|
+
onValueChange={setType}
|
|
86
|
+
options={[
|
|
87
|
+
{ value: "corp", label: "法人" },
|
|
88
|
+
{ value: "indiv", label: "個人事業主" },
|
|
89
|
+
]}
|
|
90
|
+
/>
|
|
91
|
+
</FormField>
|
|
92
|
+
<FormField id="cf-memo" label="メモ" helper="任意">
|
|
93
|
+
<Textarea id="cf-memo" placeholder="例: 4月分から取引開始" />
|
|
94
|
+
</FormField>
|
|
95
|
+
<Field
|
|
96
|
+
id="cf-active"
|
|
97
|
+
label="取引を有効にする"
|
|
98
|
+
description="無効にすると新規取引を登録できません"
|
|
99
|
+
>
|
|
100
|
+
<Switch id="cf-active" defaultChecked />
|
|
101
|
+
</Field>
|
|
102
|
+
</Flex>
|
|
103
|
+
</Form>
|
|
102
104
|
</PageContainer>
|
|
103
105
|
</AppShell>
|
|
104
106
|
);
|
|
@@ -39,49 +39,51 @@ export default function Demo() {
|
|
|
39
39
|
</CardDescription>
|
|
40
40
|
</CardHeader>
|
|
41
41
|
<CardContent>
|
|
42
|
-
<
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
label="承認状態"
|
|
68
|
-
required
|
|
69
|
-
helper="承認ワークフローで使用します"
|
|
70
|
-
error="承認状態を選択してください"
|
|
71
|
-
>
|
|
72
|
-
<Select
|
|
42
|
+
<Form>
|
|
43
|
+
<Flex direction="col" gap="md">
|
|
44
|
+
<FormField id="ff-name" label="取引先名" required helper="最大50文字">
|
|
45
|
+
<Input id="ff-name" placeholder="株式会社..." />
|
|
46
|
+
</FormField>
|
|
47
|
+
<FormField
|
|
48
|
+
id="ff-email"
|
|
49
|
+
label="メール"
|
|
50
|
+
error="メールアドレスの形式が正しくありません"
|
|
51
|
+
>
|
|
52
|
+
<Input id="ff-email" type="email" defaultValue="invalid@" />
|
|
53
|
+
</FormField>
|
|
54
|
+
<FormField id="ff-status" label="状態" helper="未選択の場合は下書きになります">
|
|
55
|
+
<Select
|
|
56
|
+
id="ff-status"
|
|
57
|
+
name="status"
|
|
58
|
+
value="paid"
|
|
59
|
+
onValueChange={() => {}}
|
|
60
|
+
options={[
|
|
61
|
+
{ value: "draft", label: "下書き" },
|
|
62
|
+
{ value: "paid", label: "入金済" },
|
|
63
|
+
]}
|
|
64
|
+
/>
|
|
65
|
+
</FormField>
|
|
66
|
+
<FormField
|
|
73
67
|
id="ff-required-status"
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
68
|
+
label="承認状態"
|
|
69
|
+
required
|
|
70
|
+
helper="承認ワークフローで使用します"
|
|
71
|
+
error="承認状態を選択してください"
|
|
72
|
+
>
|
|
73
|
+
<Select
|
|
74
|
+
id="ff-required-status"
|
|
75
|
+
name="approval_status"
|
|
76
|
+
value=""
|
|
77
|
+
onValueChange={() => {}}
|
|
78
|
+
placeholder="状態を選択"
|
|
79
|
+
options={[
|
|
80
|
+
{ value: "pending", label: "承認待ち" },
|
|
81
|
+
{ value: "approved", label: "承認済み" },
|
|
82
|
+
]}
|
|
83
|
+
/>
|
|
84
|
+
</FormField>
|
|
85
|
+
</Flex>
|
|
86
|
+
</Form>
|
|
85
87
|
</CardContent>
|
|
86
88
|
</Card>
|
|
87
89
|
|
|
@@ -261,21 +263,23 @@ export default function Demo() {
|
|
|
261
263
|
</CardDescription>
|
|
262
264
|
</CardHeader>
|
|
263
265
|
<CardContent>
|
|
264
|
-
<
|
|
265
|
-
<
|
|
266
|
-
<
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
<
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
266
|
+
<Form>
|
|
267
|
+
<Flex direction="col" gap="md">
|
|
268
|
+
<FormField id="state-readonly" label="作成者" helper="システム管理項目">
|
|
269
|
+
<Input id="state-readonly" readOnly defaultValue="山田 太郎" />
|
|
270
|
+
</FormField>
|
|
271
|
+
<FormField id="state-disabled" label="契約番号">
|
|
272
|
+
<Input id="state-disabled" disabled defaultValue="CTR-2026-0042" />
|
|
273
|
+
</FormField>
|
|
274
|
+
<FormField
|
|
275
|
+
id="state-server"
|
|
276
|
+
label="組織名"
|
|
277
|
+
error="保存できませんでした。しばらくしてから再試行してください。"
|
|
278
|
+
>
|
|
279
|
+
<Input id="state-server" defaultValue="株式会社アクメ" />
|
|
280
|
+
</FormField>
|
|
281
|
+
</Flex>
|
|
282
|
+
</Form>
|
|
279
283
|
</CardContent>
|
|
280
284
|
</Card>
|
|
281
285
|
|