@godxjp/ui 23.1.0 → 23.2.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/dist/components/data-display/card.d.ts +45 -2
- package/dist/components/data-display/card.js +4 -2
- package/dist/components/data-display/feature-list.d.ts +26 -0
- package/dist/components/data-display/feature-list.js +29 -0
- package/dist/components/data-display/index.d.ts +6 -0
- package/dist/components/data-display/index.js +6 -0
- package/dist/components/data-display/swatch.d.ts +24 -0
- package/dist/components/data-display/swatch.js +19 -0
- package/dist/components/data-display/thumbnail.d.ts +37 -0
- package/dist/components/data-display/thumbnail.js +20 -0
- package/dist/components/feedback/index.d.ts +2 -2
- package/dist/components/feedback/index.js +19 -1
- package/dist/components/feedback/skeleton.d.ts +33 -3
- package/dist/components/feedback/skeleton.js +154 -3
- package/dist/components/layout/flex.d.ts +1 -1
- package/dist/components/layout/flex.js +17 -5
- package/dist/components/layout/sidebar.js +9 -2
- package/dist/components/navigation/tabs-scroll.d.ts +27 -0
- package/dist/components/navigation/tabs-scroll.js +36 -1
- package/dist/components/navigation/tabs.d.ts +2 -2
- package/dist/components/navigation/tabs.js +44 -12
- package/dist/i18n/messages/en.json +5 -0
- package/dist/i18n/messages/ja.json +5 -0
- package/dist/i18n/messages/vi.json +5 -0
- package/dist/props/components/data-display.prop.d.ts +93 -0
- package/dist/props/components/feedback.prop.d.ts +85 -1
- package/dist/props/components/layout.prop.d.ts +72 -1
- package/dist/props/components/navigation.prop.d.ts +72 -1
- package/dist/props/registry.d.ts +118 -0
- package/dist/props/registry.js +134 -0
- package/dist/styles/alert-layout.css +139 -0
- package/dist/styles/card-layout.css +48 -0
- package/dist/styles/data-display-layout.css +88 -0
- package/dist/styles/navigation-layout.css +76 -3
- package/dist/styles/shell-layout.css +18 -0
- package/dist/tokens/components/card.css +2 -0
- package/dist/tokens/components/data-display.css +23 -0
- package/dist/tokens/components/feedback.css +18 -0
- package/dist/tokens/components/navigation.css +2 -0
- package/dist/tokens/foundation.css +18 -16
- package/docs/CONSUMER-RULES.md +1 -1
- package/docs/DESIGN-AUTHORITY.md +2 -1
- package/docs/FRAME-COVERAGE-REPORT.md +29 -3
- package/docs/assets/shot-landscape.svg +12 -0
- package/docs/assets/shot-portrait.svg +10 -0
- package/docs/data-display/card/index.tsx +40 -0
- package/docs/data-display/feature-list.tsx +159 -0
- package/docs/data-display/swatch.tsx +107 -0
- package/docs/data-display/thumbnail.tsx +128 -0
- package/docs/feedback/skeleton.tsx +57 -0
- package/docs/layout/flex.tsx +29 -0
- package/docs/layout/sidebar.tsx +66 -10
- package/docs/navigation/tabs.tsx +59 -0
- package/package.json +4 -7
- package/scripts/consumer-rule.md +16 -0
- package/scripts/ui-audit.mjs +3 -4
package/docs/navigation/tabs.tsx
CHANGED
|
@@ -625,6 +625,65 @@ export default function Demo() {
|
|
|
625
625
|
/>
|
|
626
626
|
</CardContent>
|
|
627
627
|
</Card>
|
|
628
|
+
|
|
629
|
+
<Card>
|
|
630
|
+
<CardHeader>
|
|
631
|
+
<CardTitle level={2}>indicator · animated</CardTitle>
|
|
632
|
+
<CardDescription>
|
|
633
|
+
Ant Design の indicator
|
|
634
|
+
は下線バーの長さと寄せ方を決める。size="full"(既定)はタブ全幅、size="label"
|
|
635
|
+
はタブ自身の左右パディングを引いた分、つまりラベルの幅。align
|
|
636
|
+
はバーが短いときだけ効く。animated は inkBar(下線のクロスフェード・既定 ON)と
|
|
637
|
+
tabPane(パネルのフェードイン・既定 OFF)の二つのスイッチで、prefers-reduced-motion
|
|
638
|
+
では両方とも止まる。
|
|
639
|
+
</CardDescription>
|
|
640
|
+
</CardHeader>
|
|
641
|
+
<CardContent>
|
|
642
|
+
<Flex direction="col" gap="lg">
|
|
643
|
+
<Tabs
|
|
644
|
+
id="antd-indicator-full"
|
|
645
|
+
defaultValue="pending"
|
|
646
|
+
variant="line"
|
|
647
|
+
items={journalItems}
|
|
648
|
+
/>
|
|
649
|
+
<Tabs
|
|
650
|
+
id="antd-indicator-label"
|
|
651
|
+
defaultValue="pending"
|
|
652
|
+
variant="line"
|
|
653
|
+
indicator={{ size: "label" }}
|
|
654
|
+
items={journalItems}
|
|
655
|
+
/>
|
|
656
|
+
<Tabs
|
|
657
|
+
id="antd-indicator-label-start"
|
|
658
|
+
defaultValue="pending"
|
|
659
|
+
variant="line"
|
|
660
|
+
indicator={{ size: "label", align: "start" }}
|
|
661
|
+
items={journalItems}
|
|
662
|
+
/>
|
|
663
|
+
<Tabs
|
|
664
|
+
id="antd-indicator-label-end"
|
|
665
|
+
defaultValue="pending"
|
|
666
|
+
variant="line"
|
|
667
|
+
indicator={{ size: "label", align: "end" }}
|
|
668
|
+
items={journalItems}
|
|
669
|
+
/>
|
|
670
|
+
<Tabs
|
|
671
|
+
id="antd-animated-off"
|
|
672
|
+
defaultValue="pending"
|
|
673
|
+
variant="line"
|
|
674
|
+
animated={false}
|
|
675
|
+
items={journalItems}
|
|
676
|
+
/>
|
|
677
|
+
<Tabs
|
|
678
|
+
id="antd-animated-pane"
|
|
679
|
+
defaultValue="pending"
|
|
680
|
+
variant="line"
|
|
681
|
+
animated={{ tabPane: true }}
|
|
682
|
+
items={journalItems}
|
|
683
|
+
/>
|
|
684
|
+
</Flex>
|
|
685
|
+
</CardContent>
|
|
686
|
+
</Card>
|
|
628
687
|
</Flex>
|
|
629
688
|
</PageContainer>
|
|
630
689
|
);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godxjp/ui",
|
|
3
|
-
"version": "23.
|
|
4
|
-
"godxUiMcp": "23.
|
|
3
|
+
"version": "23.2.0",
|
|
4
|
+
"godxUiMcp": "23.2.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -261,10 +261,6 @@
|
|
|
261
261
|
"types": "./dist/components/data-entry/textarea.d.ts",
|
|
262
262
|
"import": "./dist/components/data-entry/textarea.js"
|
|
263
263
|
},
|
|
264
|
-
"./ui/time-input": {
|
|
265
|
-
"types": "./dist/components/data-entry/time-input.d.ts",
|
|
266
|
-
"import": "./dist/components/data-entry/time-input.js"
|
|
267
|
-
},
|
|
268
264
|
"./ui/dialog": {
|
|
269
265
|
"types": "./dist/components/feedback/dialog.d.ts",
|
|
270
266
|
"import": "./dist/components/feedback/dialog.js"
|
|
@@ -336,7 +332,7 @@
|
|
|
336
332
|
"verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
|
|
337
333
|
"verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
|
|
338
334
|
"verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",
|
|
339
|
-
"verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets",
|
|
335
|
+
"verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets",
|
|
340
336
|
"verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:font-fallback-metrics && pnpm check:visual-audit",
|
|
341
337
|
"verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage",
|
|
342
338
|
"verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
|
|
@@ -347,6 +343,7 @@
|
|
|
347
343
|
"check:mcp-sync": "node scripts/check-mcp-sync.mjs",
|
|
348
344
|
"check:mcp-catalog-coverage": "node scripts/check-mcp-catalog-coverage.mjs",
|
|
349
345
|
"check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
|
|
346
|
+
"check:mcp-catalog-completeness": "node scripts/check-mcp-catalog-completeness.mjs",
|
|
350
347
|
"check:catalog-contradictions": "node scripts/check-catalog-contradictions.mjs",
|
|
351
348
|
"check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
|
|
352
349
|
"check:doc-prop-existence": "node scripts/check-doc-prop-existence.mjs",
|
package/scripts/consumer-rule.md
CHANGED
|
@@ -9,6 +9,22 @@
|
|
|
9
9
|
`docs/CONSUMER-RULES.md` (10 luật) và, với kho chuột bạch, ở
|
|
10
10
|
`.claude/skills/godx-ui-guinea-pig/SKILL.md`.
|
|
11
11
|
|
|
12
|
+
## Nạp style: HAI lối vào, và lối thứ hai không chở font
|
|
13
|
+
|
|
14
|
+
```css
|
|
15
|
+
@import "@godxjp/ui/styles"; /* mọi layer + Noto Sans JP / M PLUS 2 đóng gói sẵn */
|
|
16
|
+
@import "@godxjp/ui/styles/core"; /* CÙNG các layer ấy, KHÔNG một @font-face nào */
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Chọn `core` khi kho tự lo mặt chữ, hoặc khi không muốn chở font: `@fontsource` cắt
|
|
20
|
+
Noto Sans JP thành hàng trăm lát `unicode-range`, và trình duyệt chỉ biết cần lát nào
|
|
21
|
+
SAU khi đã dựng bố cục — một consumer đo được **737 lát / 13 MB**, gấp bảy lần toàn bộ
|
|
22
|
+
JavaScript của họ, cộng ~8 vòng tải mỗi lần chuyển màn.
|
|
23
|
+
|
|
24
|
+
`core` không phải cherry-pick: nó là một trong hai lối vào được hỗ trợ, và thứ tự layer
|
|
25
|
+
vẫn nguyên vẹn. Cherry-pick từng layer riêng lẻ thì vẫn cấm — đó là thứ làm vỡ hợp đồng
|
|
26
|
+
thứ tự, không phải việc chọn lối vào.
|
|
27
|
+
|
|
12
28
|
## Bố cục chuẩn của platform: BA CỘT, và ba cột là BA PHẠM VI
|
|
13
29
|
|
|
14
30
|
Vỏ mặc định của mọi app trên platform là ba cột, dựng bằng một `AppShell`:
|
package/scripts/ui-audit.mjs
CHANGED
|
@@ -173,7 +173,7 @@ const RULES = [
|
|
|
173
173
|
return /\brounded(?:-(?:full|sm|md|lg|xl|2xl))?\b/.test(cls) && /\b(?:border|bg-)/.test(cls);
|
|
174
174
|
},
|
|
175
175
|
message:
|
|
176
|
-
"Hand-rolled surface (rounded + border/bg) — use Card, Badge, Avatar, ListRow, Descriptions or EmptyState so height, padding and radius come from the tokens (docs/CONSUMER-RULES.md §4).",
|
|
176
|
+
"Hand-rolled surface (rounded + border/bg) — use Card, Badge, Avatar, ListRow, Descriptions or EmptyState so height, padding and radius come from the tokens (docs/CONSUMER-RULES.md §4). A read-only sample of a colour a USER chose is Swatch, which takes that value as a prop.",
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
179
|
id: "no-space-xy",
|
|
@@ -871,8 +871,7 @@ function staleOwnedRules() {
|
|
|
871
871
|
`This file is written by @godxjp/ui and says version ${stamped}, but the installed package ` +
|
|
872
872
|
`is ${installed}. Its rules describe a different library than the one you are building ` +
|
|
873
873
|
"against — most likely because `ignore-scripts=true` kept our postinstall from running.",
|
|
874
|
-
replacement:
|
|
875
|
-
"INIT_CWD=\"$PWD\" node node_modules/@godxjp/ui/scripts/postinstall.mjs",
|
|
874
|
+
replacement: 'INIT_CWD="$PWD" node node_modules/@godxjp/ui/scripts/postinstall.mjs',
|
|
876
875
|
snippet: `<!-- godxjp-ui:version ${stamped} --> vs installed ${installed}`,
|
|
877
876
|
};
|
|
878
877
|
}
|
|
@@ -980,7 +979,7 @@ for (const dir of SCAN_DIRS) {
|
|
|
980
979
|
let depth = 0;
|
|
981
980
|
const tag = /<(\/?)Card(Content|Header|Cover|Footer|Bar)?\b/g;
|
|
982
981
|
tag.lastIndex = from;
|
|
983
|
-
for (let m; (m = tag.exec(scanContent));
|
|
982
|
+
for (let m; (m = tag.exec(scanContent));) {
|
|
984
983
|
const [, closing, slot] = m;
|
|
985
984
|
if (!slot) {
|
|
986
985
|
if (closing) {
|