@godxjp/ui 31.31.7 → 32.0.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/README.md +102 -121
- package/agent/START-HERE.md +10 -10
- package/agent/components/Accordion.json +2 -2
- package/agent/components/AccountChip.json +1 -1
- package/agent/components/Actions.json +1 -1
- package/agent/components/Activity.json +2 -2
- package/agent/components/Affix.json +1 -1
- package/agent/components/Alert.json +22 -6
- package/agent/components/AlertDialog.json +8 -1
- package/agent/components/Anchor.json +4 -3
- package/agent/components/AppLauncher.json +2 -2
- package/agent/components/AppProvider.json +19 -11
- package/agent/components/AppSettingPicker.json +18 -2
- package/agent/components/AppShell.json +4 -5
- package/agent/components/AreaChart.json +0 -1
- package/agent/components/AspectRatio.json +2 -2
- package/agent/components/Attachments.json +3 -3
- package/agent/components/AuthAccountSummary.json +1 -1
- package/agent/components/AuthDivider.json +1 -1
- package/agent/components/AuthExpiryProvider.json +0 -1
- package/agent/components/AuthFooter.json +2 -2
- package/agent/components/AuthIdentity.json +3 -3
- package/agent/components/AuthStack.json +1 -1
- package/agent/components/Avatar.json +2 -12
- package/agent/components/Badge.json +1 -1
- package/agent/components/BarChart.json +0 -1
- package/agent/components/BranchScopePicker.json +1 -1
- package/agent/components/Breadcrumb.json +1 -1
- package/agent/components/Button.json +3 -3
- package/agent/components/Calendar.json +1 -1
- package/agent/components/Card.json +2 -2
- package/agent/components/CardBar.json +0 -1
- package/agent/components/CardContent.json +0 -1
- package/agent/components/Carousel.json +4 -3
- package/agent/components/Cascader.json +1 -1
- package/agent/components/CenteredShell.json +78 -17
- package/agent/components/ChatBubble.json +3 -3
- package/agent/components/ChatBubbleList.json +3 -3
- package/agent/components/ChatComposer.json +3 -3
- package/agent/components/ChatSuggestion.json +3 -3
- package/agent/components/Checkbox.json +1 -1
- package/agent/components/CheckboxGroup.json +0 -1
- package/agent/components/CodeBlock.json +1 -1
- package/agent/components/Collapsible.json +4 -4
- package/agent/components/ColorPicker.json +1 -1
- package/agent/components/Command.json +5 -5
- package/agent/components/CommandPalette.json +1 -1
- package/agent/components/CompactBarTrend.json +1 -1
- package/agent/components/Conversations.json +3 -3
- package/agent/components/CredentialReveal.json +1 -1
- package/agent/components/DataState.json +2 -2
- package/agent/components/DataTable.json +1 -1
- package/agent/components/DatePicker.json +1 -1
- package/agent/components/Descriptions.json +1 -1
- package/agent/components/Dialog.json +2 -2
- package/agent/components/DraggablePanel.json +5 -4
- package/agent/components/DropdownMenu.json +1 -1
- package/agent/components/EmojiPicker.json +3 -2
- package/agent/components/EmptyState.json +1 -1
- package/agent/components/ErrorSurface.json +3 -3
- package/agent/components/FeatureList.json +1 -1
- package/agent/components/Field.json +0 -1
- package/agent/components/Flex.json +34 -4
- package/agent/components/FloatButton.json +6 -5
- package/agent/components/Form.json +1 -1
- package/agent/components/FormErrors.json +0 -1
- package/agent/components/FormField.json +6 -6
- package/agent/components/FormFieldArray.json +0 -1
- package/agent/components/FormFieldControl.json +0 -1
- package/agent/components/FormRoot.json +1 -1
- package/agent/components/Heading.json +3 -0
- package/agent/components/Icon.json +1 -1
- package/agent/components/Image.json +7 -4
- package/agent/components/InfiniteQueryState.json +1 -1
- package/agent/components/Input.json +1 -1
- package/agent/components/InputOTP.json +2 -2
- package/agent/components/Label.json +3 -3
- package/agent/components/LegalDocumentShell.json +5 -4
- package/agent/components/Legend.json +1 -1
- package/agent/components/LineChart.json +0 -1
- package/agent/components/Link.json +0 -1
- package/agent/components/ListRow.json +1 -1
- package/agent/components/Logo.json +5 -4
- package/agent/components/Marquee.json +4 -3
- package/agent/components/Masonry.json +4 -3
- package/agent/components/MasterDetail.json +1 -1
- package/agent/components/MegaMenu.json +4 -3
- package/agent/components/MobileShell.json +4 -4
- package/agent/components/NavList.json +1 -1
- package/agent/components/NumberInput.json +1 -1
- package/agent/components/OrgChart.json +4 -3
- package/agent/components/OrgSwitcher.json +1 -1
- package/agent/components/OverlayPortalProvider.json +0 -1
- package/agent/components/PageContainer.json +3 -3
- package/agent/components/PageCover.json +3 -2
- package/agent/components/Pagination.json +1 -1
- package/agent/components/PasswordInput.json +1 -1
- package/agent/components/PasswordStrength.json +1 -1
- package/agent/components/PermissionMatrix.json +1 -1
- package/agent/components/PieChart.json +0 -1
- package/agent/components/Popover.json +31 -6
- package/agent/components/PrefetchLink.json +1 -1
- package/agent/components/Progress.json +1 -1
- package/agent/components/Prose.json +1 -1
- package/agent/components/QrCode.json +1 -1
- package/agent/components/Radio.json +0 -1
- package/agent/components/RadioGroup.json +2 -2
- package/agent/components/RangeTimeline.json +2 -1
- package/agent/components/Rating.json +1 -1
- package/agent/components/RecordPicker.json +1 -1
- package/agent/components/ResizablePanel.json +1 -1
- package/agent/components/ResponsiveGrid.json +2 -2
- package/agent/components/Reveal.json +3 -3
- package/agent/components/ScrollArea.json +2 -2
- package/agent/components/SearchInput.json +1 -1
- package/agent/components/Segmented.json +1 -1
- package/agent/components/Select.json +7 -5
- package/agent/components/Separator.json +1 -1
- package/agent/components/ServiceCatalogCta.json +0 -1
- package/agent/components/ServiceLauncherCard.json +1 -1
- package/agent/components/ServiceRolePanel.json +1 -1
- package/agent/components/Sheet.json +5 -5
- package/agent/components/Sidebar.json +1 -1
- package/agent/components/Skeleton.json +26 -12
- package/agent/components/Slider.json +2 -2
- package/agent/components/SortableList.json +3 -2
- package/agent/components/SplitPane.json +1 -1
- package/agent/components/StatCard.json +1 -1
- package/agent/components/Steps.json +1 -1
- package/agent/components/Swatch.json +1 -1
- package/agent/components/Switch.json +1 -1
- package/agent/components/Table.json +1 -1
- package/agent/components/Tabs.json +3 -3
- package/agent/components/Text.json +5 -1
- package/agent/components/TextDiff.json +5 -4
- package/agent/components/Textarea.json +1 -1
- package/agent/components/ThemeScope.json +1 -1
- package/agent/components/ThoughtChain.json +3 -3
- package/agent/components/TimePicker.json +1 -1
- package/agent/components/Timeline.json +1 -1
- package/agent/components/TimelineGrid.json +5 -4
- package/agent/components/Toaster.json +0 -1
- package/agent/components/Toggle.json +3 -3
- package/agent/components/ToggleGroup.json +1 -1
- package/agent/components/Toolbar.json +10 -3
- package/agent/components/Tooltip.json +9 -9
- package/agent/components/Topbar.json +1 -1
- package/agent/components/TopbarItem.json +1 -1
- package/agent/components/Transfer.json +2 -2
- package/agent/components/Tree.json +1 -1
- package/agent/components/TreeSelect.json +1 -1
- package/agent/components/TwoFactorSetup.json +1 -1
- package/agent/components/Upload.json +1 -1
- package/agent/components/UploadCropDialog.json +1 -1
- package/agent/components/Welcome.json +3 -3
- package/agent/components/formatDate.json +2 -2
- package/agent/components/inertiaUpload.json +0 -1
- package/agent/components/useZodForm.json +0 -1
- package/agent/components-index.json +80 -154
- package/agent/components.json +541 -1737
- package/agent/index.json +10 -10
- package/agent/llms.txt +9 -9
- package/agent/patterns/account-recovery-settings.json +1 -1
- package/agent/patterns/auth-recovery-panels.json +2 -2
- package/agent/patterns/error-pages.json +1 -1
- package/agent/patterns/pricing-plans.json +17 -0
- package/agent/patterns-index.json +17 -1
- package/agent/patterns.json +21 -4
- package/agent/rules.json +30 -65
- package/agent/tokens.json +27 -57
- package/agent/vocabulary.json +3 -3
- package/dist/app/app-provider.d.ts +5 -3
- package/dist/app/app-provider.js +47 -12
- package/dist/app/date-format-labels.d.ts +3 -1
- package/dist/app/date-format-labels.js +2 -4
- package/dist/app/date-formats.d.ts +21 -2
- package/dist/app/date-formats.js +51 -2
- package/dist/app/index.d.ts +3 -1
- package/dist/app/index.js +5 -0
- package/dist/app/locales.d.ts +58 -3
- package/dist/app/locales.js +134 -8
- package/dist/app/preset.d.ts +25 -0
- package/dist/app/preset.js +10 -0
- package/dist/app/request-headers.d.ts +3 -3
- package/dist/app/request-headers.js +19 -10
- package/dist/app/settings-scope.d.ts +54 -0
- package/dist/app/settings-scope.js +46 -0
- package/dist/app/tenant-theme.js +8 -3
- package/dist/app/time-format-labels.d.ts +4 -1
- package/dist/app/time-format-labels.js +7 -1
- package/dist/app/types.d.ts +10 -2
- package/dist/app/use-formatting.d.ts +1 -1
- package/dist/components/admin/index.d.ts +1 -1
- package/dist/components/admin/index.js +1 -1
- package/dist/components/data-display/accordion.d.ts +51 -1
- package/dist/components/data-display/accordion.js +247 -1
- package/dist/components/data-display/avatar.d.ts +16 -1
- package/dist/components/data-display/avatar.js +109 -1
- package/dist/components/data-display/credential-reveal.d.ts +9 -2
- package/dist/components/data-display/credential-reveal.js +156 -1
- package/dist/components/data-display/image.js +5 -3
- package/dist/components/data-display/index.d.ts +0 -21
- package/dist/components/data-display/index.js +1 -43
- package/dist/components/data-display/popover.d.ts +15 -3
- package/dist/components/data-display/popover.js +168 -2
- package/dist/components/data-entry/branch-scope-picker.d.ts +1 -1
- package/dist/components/data-entry/index.d.ts +5 -12
- package/dist/components/data-entry/index.js +11 -12
- package/dist/components/data-entry/input-otp.d.ts +48 -2
- package/dist/components/data-entry/input-otp.js +94 -1
- package/dist/components/data-entry/number-input.d.ts +1 -1
- package/dist/components/data-entry/password-input.d.ts +38 -2
- package/dist/components/data-entry/password-input.js +56 -1
- package/dist/components/data-entry/rating.d.ts +38 -2
- package/dist/components/data-entry/rating.js +127 -1
- package/dist/components/data-entry/segmented.d.ts +94 -2
- package/dist/components/data-entry/segmented.js +104 -1
- package/dist/components/{ui/tag-input.d.ts → data-entry/select-tags-inline.d.ts} +7 -4
- package/dist/components/{ui/tag-input.js → data-entry/select-tags-inline.js} +4 -4
- package/dist/components/data-entry/select.js +4 -0
- package/dist/components/data-entry/toggle-group.d.ts +108 -2
- package/dist/components/data-entry/toggle-group.js +189 -1
- package/dist/components/data-entry/toggle.d.ts +86 -2
- package/dist/components/data-entry/toggle.js +153 -2
- package/dist/components/feedback/alert.d.ts +5 -3
- package/dist/components/feedback/alert.js +14 -2
- package/dist/components/feedback/index.d.ts +2 -6
- package/dist/components/feedback/index.js +1 -13
- package/dist/components/feedback/skeleton.d.ts +4 -17
- package/dist/components/feedback/skeleton.js +3 -40
- package/dist/components/general/index.d.ts +2 -4
- package/dist/components/general/index.js +1 -6
- package/dist/components/general/typography.d.ts +4 -58
- package/dist/components/general/typography.js +7 -141
- package/dist/components/layout/aspect-ratio.d.ts +24 -1
- package/dist/components/layout/aspect-ratio.js +18 -1
- package/dist/components/layout/auth-divider.js +1 -1
- package/dist/components/layout/auth-identity.js +6 -2
- package/dist/components/layout/centered-shell.d.ts +13 -8
- package/dist/components/layout/centered-shell.js +43 -1
- package/dist/components/layout/flex.d.ts +1 -1
- package/dist/components/layout/flex.js +73 -1
- package/dist/components/layout/index.d.ts +1 -13
- package/dist/components/layout/index.js +0 -12
- package/dist/components/layout/separator.d.ts +25 -2
- package/dist/components/layout/separator.js +71 -1
- package/dist/components/navigation/{app-setting-toggle.d.ts → app-setting-cycle.d.ts} +3 -4
- package/dist/components/navigation/{app-setting-toggle.js → app-setting-cycle.js} +3 -3
- package/dist/components/navigation/app-setting-picker.d.ts +6 -2
- package/dist/components/navigation/app-setting-picker.js +20 -2
- package/dist/components/navigation/index.d.ts +3 -11
- package/dist/components/navigation/index.js +1 -9
- package/dist/components/navigation/tabs.js +1 -1
- package/dist/components/ui/carousel.d.ts +1 -1
- package/dist/components/ui/carousel.js +1 -1
- package/dist/components/ui/index.d.ts +11 -5
- package/dist/components/ui/index.js +5 -5
- package/dist/contracts/measurement.json +2 -2
- package/dist/email/brand-mark.d.ts +3 -2
- package/dist/email/brand-mark.js +1 -1
- package/dist/email/tokens.generated.d.ts +6 -6
- package/dist/email/tokens.generated.js +6 -6
- package/dist/i18n/locale-tags.d.ts +25 -0
- package/dist/i18n/locale-tags.js +59 -0
- package/dist/i18n/translate.d.ts +20 -3
- package/dist/i18n/translate.js +25 -14
- package/dist/i18n/use-translation.d.ts +3 -3
- package/dist/i18n/use-translation.js +4 -2
- package/dist/{components/navigation → lab}/anchor.d.ts +2 -2
- package/dist/{components/navigation → lab}/anchor.js +5 -5
- package/dist/{components/data-display → lab}/carousel.js +2 -2
- package/dist/{components/layout → lab}/draggable-panel.d.ts +8 -8
- package/dist/{components/layout → lab}/draggable-panel.js +2 -2
- package/dist/{components/data-entry → lab}/emoji-picker.d.ts +2 -2
- package/dist/{components/data-entry → lab}/emoji-picker.js +6 -6
- package/dist/{components/general → lab}/float-button.d.ts +8 -8
- package/dist/{components/general → lab}/float-button.js +7 -7
- package/dist/lab/index.d.ts +39 -0
- package/dist/lab/index.js +48 -0
- package/dist/{components/layout → lab}/legal-document-shell.d.ts +2 -2
- package/dist/{components/layout → lab}/legal-document-shell.js +4 -4
- package/dist/{components/data-display → lab}/marquee.d.ts +5 -5
- package/dist/{components/data-display → lab}/marquee.js +5 -5
- package/dist/{components/layout → lab}/masonry.d.ts +2 -2
- package/dist/{components/layout → lab}/masonry.js +3 -3
- package/dist/{components/navigation → lab}/mega-menu.d.ts +4 -4
- package/dist/{components/navigation → lab}/mega-menu.js +2 -2
- package/dist/{components/data-display → lab}/org-chart.d.ts +2 -2
- package/dist/{components/data-display → lab}/org-chart.js +4 -4
- package/dist/{components/layout → lab}/page-cover.d.ts +2 -2
- package/dist/{components/layout → lab}/page-cover.js +2 -2
- package/dist/{components/data-display → lab}/range-timeline.d.ts +1 -1
- package/dist/{components/data-display → lab}/range-timeline.js +6 -6
- package/dist/{components/data-entry → lab}/sortable-list.d.ts +2 -2
- package/dist/{components/data-entry → lab}/sortable-list.js +3 -3
- package/dist/{components/data-display → lab}/text-diff.d.ts +3 -3
- package/dist/{components/data-display → lab}/text-diff.js +4 -4
- package/dist/{components/data-display → lab}/timeline-grid.d.ts +2 -2
- package/dist/{components/data-display → lab}/timeline-grid.js +1 -1
- package/dist/lib/control-styles.js +1 -1
- package/dist/lib/datetime/format.js +20 -6
- package/dist/lib/datetime/sync.d.ts +6 -2
- package/dist/lib/datetime/sync.js +14 -18
- package/dist/lib/platform.d.ts +1 -1
- package/dist/props/components/app.prop.d.ts +28 -13
- package/dist/props/components/data-display.prop.d.ts +19 -29
- package/dist/props/components/feedback.prop.d.ts +15 -44
- package/dist/props/components/general.prop.d.ts +2 -64
- package/dist/props/components/index.d.ts +9 -1
- package/dist/props/components/layout.prop.d.ts +41 -57
- package/dist/props/registry.d.ts +48 -101
- package/dist/props/registry.js +45 -129
- package/dist/props/vocabulary/index.d.ts +1 -1
- package/dist/props/vocabulary/interaction.prop.d.ts +3 -12
- package/dist/styles/alert-layout.css +0 -29
- package/dist/styles/data-display-layout.css +14 -22
- package/dist/styles/dialog-layout.css +4 -0
- package/dist/styles/fonts/OFL.txt +93 -0
- package/dist/styles/form-layout.css +4 -0
- package/dist/styles/index.css +0 -2
- package/dist/styles/layers.json +44 -179
- package/dist/styles/text-layout.css +0 -15
- package/dist/styles.css +2 -0
- package/dist/themes/godx.css +43 -0
- package/dist/themes/godx.d.ts +13 -0
- package/dist/themes/godx.js +12 -0
- package/dist/tokens/components/feedback.css +0 -6
- package/dist/tokens/derived.css +23 -22
- package/dist/tokens/foundation.css +4 -6
- package/docs/COMPOSITION-VS-COMPONENT.md +58 -33
- package/docs/CONSUMER-RULES.md +1 -1
- package/docs/CUSTOMER-THEMING.md +17 -53
- package/docs/migrations/v32.md +98 -0
- package/package.json +58 -19
- package/scripts/_agent-setup.mjs +54 -3
- package/scripts/brand-accent.generated.mjs +15 -2
- package/scripts/cli.mjs +36 -11
- package/scripts/codemod.mjs +522 -0
- package/scripts/consumer-rule.md +21 -43
- package/scripts/postinstall.mjs +10 -47
- package/scripts/prune-css.mjs +1 -1
- package/scripts/ui-audit.mjs +5 -2
- package/dist/components/data-display/chat-bubble.d.ts +0 -30
- package/dist/components/data-display/chat-bubble.js +0 -229
- package/dist/components/data-display/hover-card.d.ts +0 -1
- package/dist/components/data-display/hover-card.js +0 -7
- package/dist/components/data-display/thought-chain.d.ts +0 -42
- package/dist/components/data-display/thought-chain.js +0 -177
- package/dist/components/data-display/thumbnail.d.ts +0 -37
- package/dist/components/data-display/thumbnail.js +0 -20
- package/dist/components/data-display/welcome.d.ts +0 -26
- package/dist/components/data-display/welcome.js +0 -37
- package/dist/components/data-entry/attachments.d.ts +0 -19
- package/dist/components/data-entry/attachments.js +0 -366
- package/dist/components/data-entry/chat-composer.d.ts +0 -51
- package/dist/components/data-entry/chat-composer.js +0 -200
- package/dist/components/data-entry/chat-suggestion.d.ts +0 -28
- package/dist/components/data-entry/chat-suggestion.js +0 -309
- package/dist/components/data-entry/tag-input.d.ts +0 -2
- package/dist/components/data-entry/tag-input.js +0 -5
- package/dist/components/feedback/banner.d.ts +0 -21
- package/dist/components/feedback/banner.js +0 -19
- package/dist/components/feedback/callout.d.ts +0 -23
- package/dist/components/feedback/callout.js +0 -42
- package/dist/components/layout/auth-shell.d.ts +0 -10
- package/dist/components/layout/auth-shell.js +0 -42
- package/dist/components/layout/space-compact.d.ts +0 -65
- package/dist/components/layout/space-compact.js +0 -52
- package/dist/components/navigation/conversations.d.ts +0 -39
- package/dist/components/navigation/conversations.js +0 -371
- package/dist/components/ui/accordion.d.ts +0 -51
- package/dist/components/ui/accordion.js +0 -254
- package/dist/components/ui/aspect-ratio.d.ts +0 -24
- package/dist/components/ui/aspect-ratio.js +0 -21
- package/dist/components/ui/avatar.d.ts +0 -16
- package/dist/components/ui/avatar.js +0 -115
- package/dist/components/ui/credential-reveal.d.ts +0 -9
- package/dist/components/ui/credential-reveal.js +0 -160
- package/dist/components/ui/hover-card.d.ts +0 -47
- package/dist/components/ui/hover-card.js +0 -205
- package/dist/components/ui/input-otp.d.ts +0 -48
- package/dist/components/ui/input-otp.js +0 -101
- package/dist/components/ui/password-input.d.ts +0 -38
- package/dist/components/ui/password-input.js +0 -60
- package/dist/components/ui/rating.d.ts +0 -38
- package/dist/components/ui/rating.js +0 -131
- package/dist/components/ui/segmented.d.ts +0 -94
- package/dist/components/ui/segmented.js +0 -108
- package/dist/components/ui/separator.d.ts +0 -25
- package/dist/components/ui/separator.js +0 -74
- package/dist/components/ui/toggle-group.d.ts +0 -108
- package/dist/components/ui/toggle-group.js +0 -194
- package/dist/components/ui/toggle.d.ts +0 -86
- package/dist/components/ui/toggle.js +0 -156
- package/docs/CANONICAL-CONTRACTS.md +0 -206
- package/docs/COMPONENTS.md +0 -163
- package/docs/DATETIME.md +0 -78
- package/docs/DEVELOPMENT.md +0 -269
- package/docs/FRAME-A11Y-CI.md +0 -287
- package/docs/FRAME-COVERAGE-LEDGER.md +0 -123
- package/docs/FRAME-COVERAGE-REPORT.md +0 -228
- package/docs/FRAME-COVERAGE-STANDARD.md +0 -65
- package/docs/FRAME-COVERAGE.md +0 -29
- package/docs/MEASUREMENT-CONTRACT.md +0 -109
- package/docs/PROPS-REGISTRY.md +0 -61
- package/docs/PROPS-VOCABULARY.md +0 -100
- package/docs/REGISTRY.md +0 -70
- package/docs/TESTING.md +0 -107
- package/docs/THEME-API-COVERAGE.md +0 -538
- package/docs/WHAT-BELONGS-HERE.md +0 -179
- package/docs/asset-modules.d.ts +0 -53
- package/docs/assets/cover-terrain.svg +0 -6
- package/docs/assets/portrait-amber.svg +0 -5
- package/docs/assets/portrait-clay.svg +0 -5
- package/docs/assets/portrait-indigo.svg +0 -5
- package/docs/assets/portrait-iris.svg +0 -5
- package/docs/assets/portrait-moss.svg +0 -5
- package/docs/assets/portrait-plum.svg +0 -5
- package/docs/assets/portrait-slate.svg +0 -5
- package/docs/assets/service-mark-rose.svg +0 -6
- package/docs/assets/service-mark-teal.svg +0 -5
- package/docs/assets/shot-landscape.svg +0 -12
- package/docs/assets/shot-portrait.svg +0 -10
- package/docs/assets/tcgm/card-1.svg +0 -1
- package/docs/assets/tcgm/card-2.svg +0 -1
- package/docs/assets/tcgm/card-3.svg +0 -1
- package/docs/assets/tcgm/card-4.svg +0 -1
- package/docs/assets/tcgm/card-5.svg +0 -1
- package/docs/assets/tcgm/card-6.svg +0 -1
- package/docs/assets/tcgm/hero-prism.svg +0 -1
- package/docs/assets/tcgm/scene-1.svg +0 -1
- package/docs/assets/tcgm/scene-2.svg +0 -1
- package/docs/assets/tcgm/scene-3.svg +0 -1
- package/docs/assets/tcgm/scene-4.svg +0 -1
- package/docs/assets/tcgm/scene-5.svg +0 -1
- package/docs/assets/tcgm/tcgm-lockup-color.svg +0 -1
- package/docs/assets/tcgm/tcgm-symbol-color.svg +0 -1
- package/docs/charts/cjk-category-axis.tsx +0 -81
- package/docs/charts/compact-bar-trend.tsx +0 -327
- package/docs/charts/size-tiers.tsx +0 -192
- package/docs/data-display/accordion.tsx +0 -99
- package/docs/data-display/avatar.tsx +0 -502
- package/docs/data-display/badge.tsx +0 -335
- package/docs/data-display/card/examples/detail-panel.tsx +0 -106
- package/docs/data-display/card/examples/tab-list.tsx +0 -97
- package/docs/data-display/card/index.md +0 -3
- package/docs/data-display/card/index.tsx +0 -390
- package/docs/data-display/carousel.tsx +0 -160
- package/docs/data-display/charts.tsx +0 -278
- package/docs/data-display/chat-bubble.tsx +0 -397
- package/docs/data-display/code-block.tsx +0 -188
- package/docs/data-display/collapsible.tsx +0 -162
- package/docs/data-display/credential-reveal.tsx +0 -148
- package/docs/data-display/data-table/examples/antd-parity.tsx +0 -257
- package/docs/data-display/data-table/examples/approval-queue.tsx +0 -212
- package/docs/data-display/data-table/examples/grid-features.tsx +0 -158
- package/docs/data-display/data-table/examples/list-page.tsx +0 -175
- package/docs/data-display/data-table/examples/selectable-inbox.tsx +0 -113
- package/docs/data-display/data-table/examples/server-paged.tsx +0 -179
- package/docs/data-display/data-table/examples/striped-list.tsx +0 -173
- package/docs/data-display/data-table/index.md +0 -9
- package/docs/data-display/data-table/index.tsx +0 -407
- package/docs/data-display/descriptions.tsx +0 -263
- package/docs/data-display/empty-state.tsx +0 -164
- package/docs/data-display/feature-list.tsx +0 -159
- package/docs/data-display/hover-card.tsx +0 -181
- package/docs/data-display/image.tsx +0 -170
- package/docs/data-display/legend.tsx +0 -158
- package/docs/data-display/list-row.tsx +0 -441
- package/docs/data-display/markdown.tsx +0 -86
- package/docs/data-display/marquee.tsx +0 -254
- package/docs/data-display/org-chart.tsx +0 -165
- package/docs/data-display/permission-matrix.tsx +0 -188
- package/docs/data-display/popover-touch.tsx +0 -27
- package/docs/data-display/popover.tsx +0 -331
- package/docs/data-display/progress.tsx +0 -162
- package/docs/data-display/prose.tsx +0 -169
- package/docs/data-display/qr-code.tsx +0 -68
- package/docs/data-display/scroll-area.tsx +0 -420
- package/docs/data-display/service-launcher-card.tsx +0 -445
- package/docs/data-display/stat-card.tsx +0 -354
- package/docs/data-display/swatch.tsx +0 -107
- package/docs/data-display/table.tsx +0 -362
- package/docs/data-display/text-diff.tsx +0 -89
- package/docs/data-display/thought-chain.tsx +0 -176
- package/docs/data-display/thumbnail.tsx +0 -128
- package/docs/data-display/timeline-grid.tsx +0 -119
- package/docs/data-display/timeline.tsx +0 -671
- package/docs/data-display/touch-actions.tsx +0 -36
- package/docs/data-display/tree.tsx +0 -724
- package/docs/data-display/welcome.tsx +0 -115
- package/docs/data-entry/attachments.tsx +0 -160
- package/docs/data-entry/block-editor.tsx +0 -105
- package/docs/data-entry/branch-scope-picker.tsx +0 -128
- package/docs/data-entry/calendar.tsx +0 -226
- package/docs/data-entry/cascader.tsx +0 -380
- package/docs/data-entry/chat-composer.tsx +0 -619
- package/docs/data-entry/chat-suggestion.tsx +0 -301
- package/docs/data-entry/checkbox.tsx +0 -256
- package/docs/data-entry/color-picker.tsx +0 -189
- package/docs/data-entry/command-palette.tsx +0 -179
- package/docs/data-entry/command.tsx +0 -341
- package/docs/data-entry/country-picker-recipe.tsx +0 -175
- package/docs/data-entry/date-picker.tsx +0 -452
- package/docs/data-entry/emoji-picker.tsx +0 -35
- package/docs/data-entry/form/examples/employee-settings.tsx +0 -267
- package/docs/data-entry/form/examples/invoice-form.tsx +0 -387
- package/docs/data-entry/form-dynamic-fields.tsx +0 -199
- package/docs/data-entry/form-field/examples/a11y-contract.tsx +0 -242
- package/docs/data-entry/form-field/examples/create-form.tsx +0 -107
- package/docs/data-entry/form-field/index.md +0 -8
- package/docs/data-entry/form-field/index.tsx +0 -337
- package/docs/data-entry/form-inertia.tsx +0 -80
- package/docs/data-entry/form-root.tsx +0 -112
- package/docs/data-entry/form.tsx +0 -1498
- package/docs/data-entry/input-otp.tsx +0 -258
- package/docs/data-entry/input.tsx +0 -796
- package/docs/data-entry/label.tsx +0 -102
- package/docs/data-entry/markdown-editor.tsx +0 -69
- package/docs/data-entry/number-input.tsx +0 -279
- package/docs/data-entry/password-input.tsx +0 -102
- package/docs/data-entry/password-strength.tsx +0 -99
- package/docs/data-entry/radio-group.tsx +0 -316
- package/docs/data-entry/rating.tsx +0 -91
- package/docs/data-entry/record-picker.tsx +0 -209
- package/docs/data-entry/search-input.tsx +0 -121
- package/docs/data-entry/segmented-in-filter-row.tsx +0 -60
- package/docs/data-entry/segmented.tsx +0 -300
- package/docs/data-entry/select-async-contracts.tsx +0 -108
- package/docs/data-entry/select-matrix.tsx +0 -209
- package/docs/data-entry/select.tsx +0 -547
- package/docs/data-entry/slider.tsx +0 -212
- package/docs/data-entry/sortable-list.tsx +0 -76
- package/docs/data-entry/switch.tsx +0 -314
- package/docs/data-entry/tag-input.tsx +0 -145
- package/docs/data-entry/textarea.tsx +0 -249
- package/docs/data-entry/time-picker.tsx +0 -187
- package/docs/data-entry/time-range-picker.tsx +0 -55
- package/docs/data-entry/toggle-count.tsx +0 -348
- package/docs/data-entry/toggle-group.tsx +0 -438
- package/docs/data-entry/toggle.tsx +0 -217
- package/docs/data-entry/transfer.tsx +0 -115
- package/docs/data-entry/tree-select.tsx +0 -204
- package/docs/data-entry/upload-crop-dialog.tsx +0 -109
- package/docs/data-entry/upload.tsx +0 -310
- package/docs/feedback/alert-dialog.tsx +0 -270
- package/docs/feedback/alert.tsx +0 -248
- package/docs/feedback/auth-expiry.tsx +0 -104
- package/docs/feedback/banner.tsx +0 -183
- package/docs/feedback/callout.tsx +0 -220
- package/docs/feedback/danger-confirm.tsx +0 -91
- package/docs/feedback/dialog-touch.tsx +0 -24
- package/docs/feedback/dialog.tsx +0 -373
- package/docs/feedback/sheet.tsx +0 -510
- package/docs/feedback/skeleton.tsx +0 -168
- package/docs/feedback/toast.tsx +0 -135
- package/docs/feedback/tooltip.tsx +0 -171
- package/docs/feedback/two-factor-setup.tsx +0 -68
- package/docs/foundation/_email-specimen.ts +0 -274
- package/docs/foundation/_theme-editor-scope.ts +0 -222
- package/docs/foundation/colors.tsx +0 -207
- package/docs/foundation/density.tsx +0 -242
- package/docs/foundation/email-tokens.tsx +0 -323
- package/docs/foundation/radius-shadow.tsx +0 -154
- package/docs/foundation/spacing.tsx +0 -216
- package/docs/foundation/theme-editor.tsx +0 -654
- package/docs/foundation/typography.tsx +0 -147
- package/docs/general/actions.tsx +0 -175
- package/docs/general/activity.tsx +0 -289
- package/docs/general/button/examples/destructive-confirm.tsx +0 -90
- package/docs/general/button/examples/form-actions.tsx +0 -87
- package/docs/general/button/examples/toolbar.tsx +0 -160
- package/docs/general/button/index.md +0 -16
- package/docs/general/button/index.tsx +0 -236
- package/docs/general/float-button.tsx +0 -133
- package/docs/general/icon.tsx +0 -217
- package/docs/general/logo.tsx +0 -194
- package/docs/general/reveal.tsx +0 -309
- package/docs/general/typography.tsx +0 -542
- package/docs/i18n/messages/en.json +0 -1715
- package/docs/i18n/messages/ja.json +0 -1708
- package/docs/i18n/messages/vi.json +0 -1708
- package/docs/layout/account-chip.tsx +0 -72
- package/docs/layout/admin-collection.tsx +0 -122
- package/docs/layout/affix.tsx +0 -209
- package/docs/layout/app-launcher.tsx +0 -211
- package/docs/layout/app-shell-arrangements.tsx +0 -225
- package/docs/layout/app-shell-narrow-bar.tsx +0 -205
- package/docs/layout/app-shell-states.tsx +0 -171
- package/docs/layout/app-shell.tsx +0 -395
- package/docs/layout/aspect-ratio.tsx +0 -135
- package/docs/layout/auth-account-summary.tsx +0 -103
- package/docs/layout/auth-divider.tsx +0 -28
- package/docs/layout/auth-footer.tsx +0 -37
- package/docs/layout/auth-identity.tsx +0 -70
- package/docs/layout/auth-recovery/examples/mfa-challenge.md +0 -41
- package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +0 -254
- package/docs/layout/auth-recovery/examples/mobile-390.md +0 -25
- package/docs/layout/auth-recovery/examples/mobile-390.tsx +0 -82
- package/docs/layout/auth-recovery/examples/password-recovery.md +0 -24
- package/docs/layout/auth-recovery/examples/password-recovery.tsx +0 -197
- package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +0 -27
- package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +0 -156
- package/docs/layout/auth-recovery/index.md +0 -140
- package/docs/layout/auth-recovery/index.tsx +0 -96
- package/docs/layout/auth-shell-context.tsx +0 -103
- package/docs/layout/auth-shell-device.tsx +0 -112
- package/docs/layout/auth-shell-registration.tsx +0 -338
- package/docs/layout/auth-shell-variants.tsx +0 -143
- package/docs/layout/auth-shell.tsx +0 -59
- package/docs/layout/auth-stack.tsx +0 -40
- package/docs/layout/centered-shell.tsx +0 -102
- package/docs/layout/draggable-panel.tsx +0 -127
- package/docs/layout/error-surface/examples/application-403.tsx +0 -84
- package/docs/layout/error-surface/examples/application-404.tsx +0 -77
- package/docs/layout/error-surface/examples/system-500.tsx +0 -47
- package/docs/layout/error-surface/examples/system-503.tsx +0 -48
- package/docs/layout/error-surface/index.md +0 -153
- package/docs/layout/error-surface/index.tsx +0 -239
- package/docs/layout/flex.tsx +0 -444
- package/docs/layout/legal-document-shell/_data.ts +0 -110
- package/docs/layout/legal-document-shell/examples/desktop-1440.md +0 -12
- package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +0 -83
- package/docs/layout/legal-document-shell/examples/mobile-390.md +0 -22
- package/docs/layout/legal-document-shell/examples/mobile-390.tsx +0 -70
- package/docs/layout/legal-document-shell/examples/tablet-1024.md +0 -3
- package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +0 -84
- package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +0 -18
- package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +0 -61
- package/docs/layout/legal-document-shell/index.md +0 -51
- package/docs/layout/legal-document-shell/index.tsx +0 -101
- package/docs/layout/masonry.tsx +0 -291
- package/docs/layout/master-detail.tsx +0 -390
- package/docs/layout/mobile-shell.tsx +0 -106
- package/docs/layout/nav-list.tsx +0 -584
- package/docs/layout/org-switcher.tsx +0 -131
- package/docs/layout/page-container.tsx +0 -1020
- package/docs/layout/page-cover.tsx +0 -56
- package/docs/layout/resizable-panel.tsx +0 -419
- package/docs/layout/responsive-grid.tsx +0 -403
- package/docs/layout/separator.tsx +0 -327
- package/docs/layout/service-role-panel.tsx +0 -144
- package/docs/layout/sidebar.tsx +0 -689
- package/docs/layout/space-compact.tsx +0 -202
- package/docs/layout/split-pane.tsx +0 -532
- package/docs/layout/topbar-item.tsx +0 -233
- package/docs/layout/topbar.tsx +0 -360
- package/docs/navigation/anchor.tsx +0 -295
- package/docs/navigation/app-setting-picker.tsx +0 -178
- package/docs/navigation/app-setting-toggle.tsx +0 -111
- package/docs/navigation/breadcrumb.tsx +0 -207
- package/docs/navigation/card-tabs.tsx +0 -344
- package/docs/navigation/conversations.tsx +0 -176
- package/docs/navigation/dropdown-menu.tsx +0 -345
- package/docs/navigation/filter-bar.tsx +0 -247
- package/docs/navigation/mega-menu-panel.tsx +0 -86
- package/docs/navigation/mega-menu.tsx +0 -254
- package/docs/navigation/pagination.tsx +0 -293
- package/docs/navigation/steps.tsx +0 -315
- package/docs/navigation/tabs-rtl.tsx +0 -28
- package/docs/navigation/tabs.tsx +0 -755
- package/docs/navigation/toolbar.tsx +0 -347
- package/docs/providers/app-provider.tsx +0 -191
- package/docs/providers/format-date.tsx +0 -230
- package/docs/providers/theme-scope.tsx +0 -186
- package/docs/query/button-refetch.tsx +0 -161
- package/docs/query/data-state.tsx +0 -262
- package/docs/query/infinite-query-state.tsx +0 -97
- package/docs/query/mutation-feedback.tsx +0 -128
- package/docs/query/touch-actions.tsx +0 -68
- package/docs/react-router/prefetch-link.tsx +0 -262
- package/docs/roadmap/ai-chat-components.md +0 -206
- package/docs/roadmap/antd-parity.md +0 -155
- package/docs/roadmap/badge-tag-chip-count.md +0 -172
- package/docs/roadmap/list-masonry.md +0 -159
- package/docs/roadmap/parity-audit-data-display-feedback.md +0 -567
- package/docs/roadmap/parity-audit-data-entry.md +0 -368
- package/docs/roadmap/parity-audit-layout-navigation-general.md +0 -459
- package/docs/roadmap/parity-backlog.md +0 -77
- package/docs/roadmap/tree-components.md +0 -151
- package/docs/roadmap/website-components.md +0 -813
- package/docs/showcase/acme-portal.tsx +0 -461
- package/docs/showcase/acme-website.tsx +0 -499
- package/docs/showcase/caimono-price-comparison.tsx +0 -919
- package/docs/showcase/case1-warehouse-dashboard.tsx +0 -358
- package/docs/showcase/case2-employee-me.tsx +0 -438
- package/docs/showcase/case3-approval-workflow.tsx +0 -531
- package/docs/showcase/case4-login.tsx +0 -312
- package/docs/showcase/case5-shift-calendar.tsx +0 -702
- package/docs/showcase/case6-agency-handy.tsx +0 -1120
- package/docs/showcase/futurelastic-web.tsx +0 -441
- package/docs/showcase/marketing-page.tsx +0 -895
- package/docs/showcase/org-switcher.tsx +0 -320
- package/docs/showcase/permission-matrix.tsx +0 -354
- package/docs/showcase/public-landing.tsx +0 -210
- package/docs/showcase/settings-account-sections.tsx +0 -559
- package/docs/showcase/settings-security-mfa.tsx +0 -145
- package/docs/showcase/table-approval-queue.tsx +0 -199
- package/docs/showcase/table-bulk-actions.tsx +0 -468
- package/docs/showcase/table-compact-kintone.tsx +0 -438
- package/docs/showcase/table-conditional-format.tsx +0 -367
- package/docs/showcase/table-crud-list.tsx +0 -544
- package/docs/showcase/table-density.tsx +0 -349
- package/docs/showcase/table-expandable-rows.tsx +0 -496
- package/docs/showcase/table-filter-chips.tsx +0 -468
- package/docs/showcase/table-footer-totals.tsx +0 -328
- package/docs/showcase/table-grouped-subtotals.tsx +0 -398
- package/docs/showcase/table-master-detail.tsx +0 -482
- package/docs/showcase/table-pagination.tsx +0 -409
- package/docs/showcase/table-states.tsx +0 -371
- package/docs/showcase/table-sticky-columns.tsx +0 -377
- package/docs/showcase/table-tree-rows.tsx +0 -451
- package/docs/showcase/table-view-tabs.tsx +0 -488
- package/docs/showcase/tcgm-website.tsx +0 -1047
- package/docs/showcase/tenant-brand-color.tsx +0 -338
- package/docs/showcase/theme-customization.tsx +0 -1292
- package/docs/showcase/theme-lab.tsx +0 -2125
- package/docs/themes/flat.css +0 -466
- package/docs/themes/glassmorphism.css +0 -960
- package/docs/themes/index.ts +0 -219
- package/docs/themes/neubrutalism.css +0 -481
- /package/dist/components/navigation/{filter-bar.d.ts → toolbar.d.ts} +0 -0
- /package/dist/components/navigation/{filter-bar.js → toolbar.js} +0 -0
- /package/dist/{components/data-display → lab}/carousel.d.ts +0 -0
- /package/dist/{components/data-entry → lab}/emoji-data.d.ts +0 -0
- /package/dist/{components/data-entry → lab}/emoji-data.js +0 -0
- /package/dist/{components/data-display → lab}/marquee-reveal.d.ts +0 -0
- /package/dist/{components/data-display → lab}/marquee-reveal.js +0 -0
|
@@ -1,262 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
Badge,
|
|
6
|
-
Card,
|
|
7
|
-
CardContent,
|
|
8
|
-
CardDescription,
|
|
9
|
-
CardHeader,
|
|
10
|
-
CardTitle,
|
|
11
|
-
Descriptions,
|
|
12
|
-
EmptyState,
|
|
13
|
-
Table,
|
|
14
|
-
TableBody,
|
|
15
|
-
TableCell,
|
|
16
|
-
TableHead,
|
|
17
|
-
TableHeader,
|
|
18
|
-
TableRow,
|
|
19
|
-
} from "@godxjp/ui/data-display";
|
|
20
|
-
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
21
|
-
import { PrefetchLink } from "@godxjp/ui/react-router";
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* PrefetchLink · a React Router Link that fires queryClient.prefetchQuery on
|
|
25
|
-
* hover/focus so the detail page renders instantly on click. Requires a
|
|
26
|
-
* QueryClientProvider (and a Router) in context. The queryKey/queryFn must match
|
|
27
|
-
* the destination page's useQuery. The `prefetchOn` prop selects the trigger:
|
|
28
|
-
* "both" (default) | "hover" | "focus" | "none". Composed from real @godxjp/ui +
|
|
29
|
-
* @tanstack/react-query + react-router-dom.
|
|
30
|
-
*/
|
|
31
|
-
const queryClient = new QueryClient();
|
|
32
|
-
|
|
33
|
-
type Invoice = { id: string; partner: string; status: "active" | "pending" | "draft" };
|
|
34
|
-
const invoices: Invoice[] = [
|
|
35
|
-
{ id: "INV-0312", partner: "株式会社ベトヤ", status: "active" },
|
|
36
|
-
{ id: "INV-0311", partner: "ハノイ物流", status: "pending" },
|
|
37
|
-
{ id: "INV-0310", partner: "GMO決済", status: "draft" },
|
|
38
|
-
];
|
|
39
|
-
|
|
40
|
-
const invoiceById = (id: string) => invoices.find((inv) => inv.id === id)!;
|
|
41
|
-
|
|
42
|
-
/** Destination-page query: a deliberate delay so prefetch (vs cold fetch) is observable. */
|
|
43
|
-
async function fetchInvoice(id: string): Promise<Invoice> {
|
|
44
|
-
await new Promise((resolve) => setTimeout(resolve, 1200));
|
|
45
|
-
return invoiceById(id);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
const invoiceQueryKey = (id: string) => ["invoice", id] as const;
|
|
49
|
-
|
|
50
|
-
/** List rows · hover/focus a 請求書番号 to prime ["invoice", id]. */
|
|
51
|
-
function InvoiceList() {
|
|
52
|
-
return (
|
|
53
|
-
<Table>
|
|
54
|
-
<TableHeader>
|
|
55
|
-
<TableRow>
|
|
56
|
-
<TableHead>請求書番号</TableHead>
|
|
57
|
-
<TableHead>取引先</TableHead>
|
|
58
|
-
<TableHead>状態</TableHead>
|
|
59
|
-
</TableRow>
|
|
60
|
-
</TableHeader>
|
|
61
|
-
<TableBody>
|
|
62
|
-
{invoices.map((inv) => (
|
|
63
|
-
<TableRow key={inv.id}>
|
|
64
|
-
<TableCell>
|
|
65
|
-
<PrefetchLink
|
|
66
|
-
to={`/invoices/${inv.id}`}
|
|
67
|
-
queryKey={invoiceQueryKey(inv.id)}
|
|
68
|
-
queryFn={() => fetchInvoice(inv.id)}
|
|
69
|
-
staleTime={60_000}
|
|
70
|
-
className="text-primary font-medium hover:underline"
|
|
71
|
-
>
|
|
72
|
-
{inv.id}
|
|
73
|
-
</PrefetchLink>
|
|
74
|
-
</TableCell>
|
|
75
|
-
<TableCell>{inv.partner}</TableCell>
|
|
76
|
-
<TableCell>
|
|
77
|
-
<Badge status={inv.status} />
|
|
78
|
-
</TableCell>
|
|
79
|
-
</TableRow>
|
|
80
|
-
))}
|
|
81
|
-
</TableBody>
|
|
82
|
-
</Table>
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* Every prefetchOn union value, labelled. "none" never prefetches; "hover" and
|
|
88
|
-
* "focus" prime only on that trigger; "both" (the default) primes on either.
|
|
89
|
-
*/
|
|
90
|
-
const triggerCases: { value: "hover" | "focus" | "both" | "none"; id: string; copy: string }[] = [
|
|
91
|
-
{ value: "both", id: "INV-0312", copy: "既定。ホバーまたはフォーカスで先読み" },
|
|
92
|
-
{ value: "hover", id: "INV-0311", copy: "ホバー時のみ先読み" },
|
|
93
|
-
{ value: "focus", id: "INV-0310", copy: "キーボードのフォーカス時のみ先読み" },
|
|
94
|
-
{ value: "none", id: "INV-0312", copy: "先読みを無効化(通常の Link)" },
|
|
95
|
-
];
|
|
96
|
-
|
|
97
|
-
function TriggerMatrix() {
|
|
98
|
-
return (
|
|
99
|
-
<Table>
|
|
100
|
-
<TableHeader>
|
|
101
|
-
<TableRow>
|
|
102
|
-
<TableHead>prefetchOn</TableHead>
|
|
103
|
-
<TableHead>リンク</TableHead>
|
|
104
|
-
<TableHead>挙動</TableHead>
|
|
105
|
-
</TableRow>
|
|
106
|
-
</TableHeader>
|
|
107
|
-
<TableBody>
|
|
108
|
-
{triggerCases.map((c) => (
|
|
109
|
-
<TableRow key={c.value}>
|
|
110
|
-
<TableCell>
|
|
111
|
-
<Badge variant="outline">{c.value}</Badge>
|
|
112
|
-
</TableCell>
|
|
113
|
-
<TableCell>
|
|
114
|
-
<PrefetchLink
|
|
115
|
-
to={`/invoices/${c.id}`}
|
|
116
|
-
prefetchOn={c.value}
|
|
117
|
-
queryKey={invoiceQueryKey(c.id)}
|
|
118
|
-
queryFn={() => fetchInvoice(c.id)}
|
|
119
|
-
className="text-primary font-medium hover:underline"
|
|
120
|
-
>
|
|
121
|
-
{c.id}
|
|
122
|
-
</PrefetchLink>
|
|
123
|
-
</TableCell>
|
|
124
|
-
<TableCell>{c.copy}</TableCell>
|
|
125
|
-
</TableRow>
|
|
126
|
-
))}
|
|
127
|
-
</TableBody>
|
|
128
|
-
</Table>
|
|
129
|
-
);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* Observable proof · reads the QueryClient cache directly and lists every
|
|
134
|
-
* ["invoice", id] entry the links above have primed. Updates as you hover/focus.
|
|
135
|
-
*/
|
|
136
|
-
function CacheObserver() {
|
|
137
|
-
const client = useQueryClient();
|
|
138
|
-
const [, forceRender] = React.useReducer((n: number) => n + 1, 0);
|
|
139
|
-
|
|
140
|
-
React.useEffect(() => client.getQueryCache().subscribe(forceRender), [client]);
|
|
141
|
-
|
|
142
|
-
const cached = client
|
|
143
|
-
.getQueryCache()
|
|
144
|
-
.getAll()
|
|
145
|
-
.filter((q) => Array.isArray(q.queryKey) && q.queryKey[0] === "invoice");
|
|
146
|
-
|
|
147
|
-
if (cached.length === 0) {
|
|
148
|
-
return (
|
|
149
|
-
<EmptyState
|
|
150
|
-
title="まだ先読みされていません"
|
|
151
|
-
description="上のリンクにホバーまたはフォーカスしてください。"
|
|
152
|
-
/>
|
|
153
|
-
);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
return (
|
|
157
|
-
<Descriptions columns={1}>
|
|
158
|
-
{cached.map((q) => (
|
|
159
|
-
<Descriptions.Item
|
|
160
|
-
key={JSON.stringify(q.queryKey)}
|
|
161
|
-
label={<Badge variant="outline">{JSON.stringify(q.queryKey)}</Badge>}
|
|
162
|
-
mono
|
|
163
|
-
>
|
|
164
|
-
{q.state.status === "success" ? "キャッシュ済み (cached)" : "先読み中… (fetching)"}
|
|
165
|
-
</Descriptions.Item>
|
|
166
|
-
))}
|
|
167
|
-
</Descriptions>
|
|
168
|
-
);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
/**
|
|
172
|
-
* Destination block · the SAME queryKey/queryFn contract as the list link.
|
|
173
|
-
* Because the link already primed ["invoice", "INV-0312"], this useQuery resolves
|
|
174
|
-
* from cache (no skeleton) instead of paying the 1.2s fetch.
|
|
175
|
-
*/
|
|
176
|
-
function DestinationDetail() {
|
|
177
|
-
const query = useQuery({
|
|
178
|
-
queryKey: invoiceQueryKey("INV-0312"),
|
|
179
|
-
queryFn: () => fetchInvoice("INV-0312"),
|
|
180
|
-
staleTime: 60_000,
|
|
181
|
-
});
|
|
182
|
-
|
|
183
|
-
if (query.isPending) {
|
|
184
|
-
return <EmptyState title="読み込み中…" description="先読みが間に合えば即時表示されます。" />;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
const inv = query.data!;
|
|
188
|
-
return (
|
|
189
|
-
<Descriptions columns={1}>
|
|
190
|
-
<Descriptions.Item label="請求書番号" mono>
|
|
191
|
-
{inv.id}
|
|
192
|
-
</Descriptions.Item>
|
|
193
|
-
<Descriptions.Item label="取引先">{inv.partner}</Descriptions.Item>
|
|
194
|
-
<Descriptions.Item label="状態">
|
|
195
|
-
<Badge status={inv.status} />
|
|
196
|
-
</Descriptions.Item>
|
|
197
|
-
</Descriptions>
|
|
198
|
-
);
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
export default function Demo() {
|
|
202
|
-
return (
|
|
203
|
-
<QueryClientProvider client={queryClient}>
|
|
204
|
-
{/* The preview/isolate harness already provides a Router; PrefetchLink reads it from context. */}
|
|
205
|
-
<PageContainer
|
|
206
|
-
title="PrefetchLink"
|
|
207
|
-
subtitle="Router Link that prefetches the destination query on hover/focus"
|
|
208
|
-
>
|
|
209
|
-
<Flex direction="col" gap="lg">
|
|
210
|
-
<Card>
|
|
211
|
-
<CardHeader>
|
|
212
|
-
<CardTitle level={2}>請求書 一覧</CardTitle>
|
|
213
|
-
<CardDescription>
|
|
214
|
-
請求書番号にホバーまたはフォーカスすると、その明細クエリが先読みされ次の画面が即時表示されます。
|
|
215
|
-
</CardDescription>
|
|
216
|
-
</CardHeader>
|
|
217
|
-
<CardContent flush>
|
|
218
|
-
<InvoiceList />
|
|
219
|
-
</CardContent>
|
|
220
|
-
</Card>
|
|
221
|
-
|
|
222
|
-
<Card>
|
|
223
|
-
<CardHeader>
|
|
224
|
-
<CardTitle level={2}>prefetchOn · トリガーの種類</CardTitle>
|
|
225
|
-
<CardDescription>
|
|
226
|
-
既定は both。hover / focus / none で先読みのきっかけを切り替えます。
|
|
227
|
-
</CardDescription>
|
|
228
|
-
</CardHeader>
|
|
229
|
-
<CardContent flush>
|
|
230
|
-
<TriggerMatrix />
|
|
231
|
-
</CardContent>
|
|
232
|
-
</Card>
|
|
233
|
-
|
|
234
|
-
<Card>
|
|
235
|
-
<CardHeader>
|
|
236
|
-
<CardTitle level={2}>先読みキャッシュ(観測)</CardTitle>
|
|
237
|
-
<CardDescription>
|
|
238
|
-
QueryClient のキャッシュから ["invoice", id] を直接読み出して表示します。
|
|
239
|
-
</CardDescription>
|
|
240
|
-
</CardHeader>
|
|
241
|
-
<CardContent>
|
|
242
|
-
<CacheObserver />
|
|
243
|
-
</CardContent>
|
|
244
|
-
</Card>
|
|
245
|
-
|
|
246
|
-
<Card>
|
|
247
|
-
<CardHeader>
|
|
248
|
-
<CardTitle level={2}>遷移先の明細(契約)</CardTitle>
|
|
249
|
-
<CardDescription>
|
|
250
|
-
リンクと同じ queryKey/queryFn を使う
|
|
251
|
-
useQuery。先読み済みならキャッシュから即時解決します。
|
|
252
|
-
</CardDescription>
|
|
253
|
-
</CardHeader>
|
|
254
|
-
<CardContent>
|
|
255
|
-
<DestinationDetail />
|
|
256
|
-
</CardContent>
|
|
257
|
-
</Card>
|
|
258
|
-
</Flex>
|
|
259
|
-
</PageContainer>
|
|
260
|
-
</QueryClientProvider>
|
|
261
|
-
);
|
|
262
|
-
}
|
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
# AI / chatbot components — normalized spec
|
|
2
|
-
|
|
3
|
-
> **Reference:** Ant Design X (<https://x.ant.design/components/overview>) for *capabilities*.
|
|
4
|
-
> **Naming:** when a component's identity is unclear, look it up at
|
|
5
|
-
> <https://namethatui.com/?platform=web> before inventing a name.
|
|
6
|
-
> **Contract:** `.claude/skills/godxjp-ui-component/SKILL.md` is the hard gate — MCP-first, real
|
|
7
|
-
> primitives only, `t()` + `Intl`, WAI-ARIA APG + WCAG 2.2 AA, logical CSS, controlled
|
|
8
|
-
> vocabulary, semantic tokens, MCP catalog entry, real-screen docs page.
|
|
9
|
-
|
|
10
|
-
The library has **zero** chat/AI components today (verified against `mcp/src/data/components.ts` —
|
|
11
|
-
127 entries, none of them conversational). This document decides which of Ant Design X's surface
|
|
12
|
-
becomes a framework component and which is a composition, so no agent has to re-litigate it.
|
|
13
|
-
|
|
14
|
-
## 1. Scope decision — GATE 0 applied to every Ant Design X component
|
|
15
|
-
|
|
16
|
-
`docs/COMPOSITION-VS-COMPONENT.md` C1–C7. **Any FAIL ⇒ composition, never `src/components/`.**
|
|
17
|
-
|
|
18
|
-
| Ant Design X | godx name | Group | C1 | C2 | C3 | C4 | C5 | C6 | C7 | Verdict |
|
|
19
|
-
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
|
|
20
|
-
| `Bubble` | **`ChatBubble`** | `data-display` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **Framework component** |
|
|
21
|
-
| `Bubble.List` | **`ChatBubbleList`** | `data-display` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **Framework component** |
|
|
22
|
-
| `Sender` | **`ChatComposer`** | `data-entry` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **Framework component** |
|
|
23
|
-
| `Suggestion` | **`ChatSuggestion`** | `data-entry` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **Framework component** |
|
|
24
|
-
| `Conversations` | **`ConversationList`** | `navigation` | ✅ | ✅ | ⚠️ | ✅ | ✅ | ✅ | ✅ | **Verify C3 first** — see §6 |
|
|
25
|
-
| `ThoughtChain` / `Think` | **`ThoughtChain`** | `data-display` | ✅ | ⚠️ | ⚠️ | ✅ | ✅ | ✅ | ⚠️ | **Verify C2/C3 first** — see §6 |
|
|
26
|
-
| `Prompts` | — | — | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | **Composition** — `ResponsiveGrid` + `Card` + `Button` |
|
|
27
|
-
| `Welcome` | — | — | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | **Composition** — static block, `EmptyState`-shaped |
|
|
28
|
-
| `Actions` | — | — | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | **Composition** — `Button` + `DropdownMenu` |
|
|
29
|
-
| `Attachments` / `FileCard` | — | — | ✅ | ✅ | ❌ | — | — | — | — | **Extend `Upload`** — duplicating it is an instant reject |
|
|
30
|
-
| `CodeHighlighter` | — | — | — | — | ❌ | — | — | — | — | **Use `CodeBlock`** |
|
|
31
|
-
| `Sources` | — | — | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | **Composition** — `ListRow` + `Badge` |
|
|
32
|
-
| `XProvider` | — | — | — | — | ❌ | — | — | — | — | **Use `AppProvider`** |
|
|
33
|
-
| `Mermaid` | — | — | ❌ | — | — | — | — | — | ❌ | **Out of scope** |
|
|
34
|
-
| `Folder/File Tree` | — | — | — | — | ❌ | — | — | — | — | **Covered by `Tree`** — see `docs/roadmap/tree-components.md` |
|
|
35
|
-
|
|
36
|
-
**v1 build set: `ChatBubble`, `ChatBubbleList`, `ChatComposer`, `ChatSuggestion`** (4 components,
|
|
37
|
-
all 7/7 PASS). `ConversationList` and `ThoughtChain` are conditional — §6.
|
|
38
|
-
Everything else ships as a `docs/` showcase composition, not library code.
|
|
39
|
-
|
|
40
|
-
---
|
|
41
|
-
|
|
42
|
-
## 2. `ChatBubble` — one message in a conversation
|
|
43
|
-
|
|
44
|
-
**Group:** `data-display` · **File:** `src/components/data-display/chat-bubble.tsx`
|
|
45
|
-
|
|
46
|
-
| Ant Design X | **godx `ChatBubble`** |
|
|
47
|
-
| --- | --- |
|
|
48
|
-
| `content` | `children` (a `ReactNode`; do not take an HTML string) |
|
|
49
|
-
| `placement: 'start' \| 'end'` | `placement: 'start' \| 'end'` (logical — flips under RTL) |
|
|
50
|
-
| `variant: 'filled' \| 'borderless' \| 'outlined' \| 'shadow'` | `variant: 'filled' \| 'borderless' \| 'outlined'` (drop `shadow`; the design system is 1px-border, no drop shadows) |
|
|
51
|
-
| `avatar` | `avatar` (a real `Avatar` node, never a styled div) |
|
|
52
|
-
| `header` / `footer` | `header` / `footer` |
|
|
53
|
-
| `loading` | `loading` (renders `Skeleton`, `aria-busy="true"`) |
|
|
54
|
-
| `typing` | `typing: boolean \| { step?: number; interval?: number }` |
|
|
55
|
-
| `messageRender` | *dropped* — the caller passes rendered `children` |
|
|
56
|
-
| `shape` | *dropped* — corner radius is a token |
|
|
57
|
-
| — | `size: 'xs' \| 'sm' \| 'lg'` (`md` default) |
|
|
58
|
-
| — | `tone` for status-tinted bubbles (error/warning), never colour-only |
|
|
59
|
-
|
|
60
|
-
**Semantics.** The bubble is an `<article>` inside the list's feed. Give it an accessible name from
|
|
61
|
-
its `header` (the author). The typing animation MUST respect `prefers-reduced-motion: reduce` —
|
|
62
|
-
render the full text immediately, no animation. Streaming text goes in an `aria-live="polite"`
|
|
63
|
-
region owned by `ChatBubbleList`, **not** per-bubble (a live region per bubble floods a screen
|
|
64
|
-
reader). Decorative avatars `aria-hidden`.
|
|
65
|
-
|
|
66
|
-
**Tokens** (`src/tokens/components/chat-bubble.css`): `--chat-bubble-background`,
|
|
67
|
-
`--chat-bubble-foreground`, `--chat-bubble-border-color`, `--chat-bubble-radius`,
|
|
68
|
-
`--chat-bubble-gap`, `--chat-bubble-max-inline-size`, `--chat-bubble-avatar-size`.
|
|
69
|
-
Role-mirror knobs default to `initial` (`docs/TOKENS.md`).
|
|
70
|
-
|
|
71
|
-
**i18n:** `chat.bubble.typing`, `chat.bubble.loading`, `chat.bubble.you`, `chat.bubble.assistant`.
|
|
72
|
-
Timestamps via `Intl.DateTimeFormat`; "2 minutes ago" via `Intl.RelativeTimeFormat`; counted nouns
|
|
73
|
-
via `Intl.PluralRules` — never a template string.
|
|
74
|
-
|
|
75
|
-
---
|
|
76
|
-
|
|
77
|
-
## 3. `ChatBubbleList` — the message feed
|
|
78
|
-
|
|
79
|
-
**Group:** `data-display` · **File:** same module as `ChatBubble`
|
|
80
|
-
|
|
81
|
-
| Ant Design X `Bubble.List` | **godx `ChatBubbleList`** |
|
|
82
|
-
| --- | --- |
|
|
83
|
-
| `items` | `items: ChatMessageProp[]` |
|
|
84
|
-
| `roles` | `roles: Record<string, Partial<ChatBubbleProp>>` — per-role defaults (`user`, `assistant`, `system`) |
|
|
85
|
-
| `autoScroll` | `autoScroll` (default `true`) |
|
|
86
|
-
|
|
87
|
-
**The behavior that earns C2/C3** — none of it is composable from `ScrollArea` + `map`:
|
|
88
|
-
|
|
89
|
-
1. **Stick-to-bottom.** Auto-scroll while the user is at the bottom; the moment they scroll up,
|
|
90
|
-
**stop** and surface a "jump to latest" affordance. Silently yanking a reader back to the bottom
|
|
91
|
-
mid-read is the classic chat-UI defect.
|
|
92
|
-
2. **Streaming without layout thrash** — appended text must not re-scroll the whole feed.
|
|
93
|
-
3. **One `aria-live="polite"` region** for the whole feed, announcing only the newest message.
|
|
94
|
-
4. `role="log"` on the scroll container, `aria-label` via `t()`.
|
|
95
|
-
5. Keyboard: the feed is focusable and scrollable with `PageUp`/`PageDown`/`Home`/`End`; bubbles
|
|
96
|
-
are not a roving-tabindex widget (interactive controls inside them keep normal tab order).
|
|
97
|
-
|
|
98
|
-
---
|
|
99
|
-
|
|
100
|
-
## 4. `ChatComposer` — the message input (Ant's `Sender`)
|
|
101
|
-
|
|
102
|
-
**Group:** `data-entry` · **File:** `src/components/data-entry/chat-composer.tsx`
|
|
103
|
-
|
|
104
|
-
Named for what the industry calls it (Slack/Discord "composer"); `Sender` describes the person,
|
|
105
|
-
not the control.
|
|
106
|
-
|
|
107
|
-
| Ant Design X `Sender` | **godx `ChatComposer`** |
|
|
108
|
-
| --- | --- |
|
|
109
|
-
| `value` / `onChange` | `value` / `defaultValue` / `onValueChange` (**controlled triad — mandatory**) |
|
|
110
|
-
| `onSubmit` | `onSubmit(value: string)` |
|
|
111
|
-
| `loading` + `onCancel` | `loading` + `onCancel` |
|
|
112
|
-
| `submitType: 'enter' \| 'shiftEnter'` | `submitType: 'enter' \| 'shiftEnter'` |
|
|
113
|
-
| `placeholder` | `placeholder` (through `t()` at the call site) |
|
|
114
|
-
| `disabled` / `readOnly` | `disabled` / `readOnly` |
|
|
115
|
-
| `header` (`Sender.Header`) | `header` slot |
|
|
116
|
-
| `prefix` / `footer` / `actions` | `prefix` / `footer` / `actions` slots |
|
|
117
|
-
| `allowSpeech` | **out of scope v1** — Web Speech API is not cross-browser; file a follow-up |
|
|
118
|
-
| `autoSize` | always auto-sizing; not a prop |
|
|
119
|
-
| — | `size: 'xs' \| 'sm' \| 'lg'` · `maxLength` · `status` |
|
|
120
|
-
|
|
121
|
-
**Rules.**
|
|
122
|
-
- Built on the real `Textarea` primitive and real `Button`s — **no raw `<textarea>`/`<button>`**.
|
|
123
|
-
- Auto-grow between a min and max height expressed in `--control-height` tiers, then scroll
|
|
124
|
-
inside. **No literal `height` and no `calc(var(--control-height) ± …)`** (`check:control-sizing`).
|
|
125
|
-
- `submitType="enter"`: `Enter` submits, `Shift+Enter` newline. `submitType="shiftEnter"`: the
|
|
126
|
-
inverse. IME composition must never submit — guard on `compositionstart`/`compositionend`
|
|
127
|
-
(this is the bug that breaks Japanese and Vietnamese input; it is not optional).
|
|
128
|
-
- Empty or whitespace-only input does not submit; the submit button is `disabled` with an
|
|
129
|
-
accessible name, not merely greyed out.
|
|
130
|
-
- While `loading`, the submit button becomes a cancel button — **one trailing action at a time**,
|
|
131
|
-
the same discipline as the picker trailing-action rule.
|
|
132
|
-
- The textarea is the semantic focus target; forward the `FormField` label/helper/error contract
|
|
133
|
-
onto it via `pickFieldA11y` / `useFieldIdentity` — do not reinvent it (`src/lib/field-a11y.ts`).
|
|
134
|
-
|
|
135
|
-
---
|
|
136
|
-
|
|
137
|
-
## 5. `ChatSuggestion` — trigger-character autocomplete over the composer
|
|
138
|
-
|
|
139
|
-
**Group:** `data-entry` · **File:** `src/components/data-entry/chat-suggestion.tsx`
|
|
140
|
-
|
|
141
|
-
| Ant Design X `Suggestion` | **godx `ChatSuggestion`** |
|
|
142
|
-
| --- | --- |
|
|
143
|
-
| `items` | `items: SuggestionItemProp[]` (supports one level of `children`) |
|
|
144
|
-
| `onSelect` | `onValueChange(value: string)` |
|
|
145
|
-
| `block` | *dropped* — width follows the anchor |
|
|
146
|
-
| render-prop `children({ onTrigger, onKeyDown })` | same shape — it wraps `ChatComposer` |
|
|
147
|
-
| — | `triggerCharacter` (default `'/'`) · `open` / `defaultOpen` / `onOpenChange` |
|
|
148
|
-
|
|
149
|
-
**Rules.** Compose the existing `Command` (cmdk) inside a `Popover` anchored to the composer — do
|
|
150
|
-
**not** hand-roll a listbox; `Command` already ships correct ARIA. What this component owns is the
|
|
151
|
-
part `Command` does not: detecting the trigger character in a textarea, tracking the query as the
|
|
152
|
-
caret moves, and closing on `Escape`/blur/word-break. `Escape` returns focus to the textarea and
|
|
153
|
-
leaves the typed text intact.
|
|
154
|
-
|
|
155
|
-
---
|
|
156
|
-
|
|
157
|
-
## 6. Conditional components — prove C3 before writing code
|
|
158
|
-
|
|
159
|
-
Do **not** start these until the ledger is recorded in the PR description.
|
|
160
|
-
|
|
161
|
-
**`ConversationList`** (Ant's `Conversations`). `NavList` already renders selectable rows with
|
|
162
|
-
`aria-current="page"`, an icon column and a badge; `ListRow` covers short entity lists. Before
|
|
163
|
-
building, answer in writing: what does a conversation list own that `NavList` does not?
|
|
164
|
-
The honest candidates are date **grouping** (Today / Yesterday / Last 7 days — via
|
|
165
|
-
`Intl.RelativeTimeFormat` + `Intl.DateTimeFormat`, never hand-rolled buckets), a **per-item
|
|
166
|
-
overflow menu**, and **inline rename**. If those land as `NavList` props instead, that is the
|
|
167
|
-
better outcome — extend `NavList` and close this out.
|
|
168
|
-
|
|
169
|
-
**`ThoughtChain`** (Ant's `ThoughtChain` / `Think`). `Timeline` already has a 3-state per-item
|
|
170
|
-
`status` (`done`/`current`/`pending`), an icon rail and ordinal/status variants; `Collapsible`
|
|
171
|
-
owns disclosure. `ThoughtChain` = `Timeline` + per-item collapsible body + a streaming/pending
|
|
172
|
-
state. Strongly prefer adding a `collapsible` affordance to `Timeline` over a new component.
|
|
173
|
-
Whichever way it goes, the reasoning body must be collapsible, and the running step must be
|
|
174
|
-
announced once via `aria-live="polite"` — not on every token.
|
|
175
|
-
|
|
176
|
-
---
|
|
177
|
-
|
|
178
|
-
## 7. Per-component definition of done
|
|
179
|
-
|
|
180
|
-
Every component in the build set ships **all** of:
|
|
181
|
-
|
|
182
|
-
1. `src/components/<group>/<name>.tsx` — real primitives only, logical CSS, `t()` for every string
|
|
183
|
-
and `aria-label`, `ref` forwarded, `...props` spread, `className` + `id` accepted.
|
|
184
|
-
2. `XProp` + `XProp as XProps` in `src/props/components/<group>.prop.ts`, **registered in
|
|
185
|
-
`src/props/registry.ts`**.
|
|
186
|
-
3. `src/tokens/components/<name>.css` + an `@import` in `src/tokens/base.css`; names pass
|
|
187
|
-
`check:token-tiers`; control boxes come from the `--control-height` tier.
|
|
188
|
-
4. Keys in `src/i18n/messages/en.json`, `vi.json`, `ja.json` — all three, no exceptions.
|
|
189
|
-
5. Tests in `src/components/<group>/__tests__/`: a behavior test using `@testing-library/user-event`
|
|
190
|
-
6. An `mcp/src/data/components.ts` entry (props / usage / useCases / related / example / rules) —
|
|
191
|
-
`check:mcp-sync` and `check:mcp-orphans` must pass.
|
|
192
|
-
7. A real-screen docs page under `docs/<group>/` (AppShell + PageContainer + real primitives), not
|
|
193
|
-
a bare `Card` snippet.
|
|
194
|
-
8. Export from the group's `index.ts`.
|
|
195
|
-
|
|
196
|
-
Gates, then **only** the touched group's tests:
|
|
197
|
-
|
|
198
|
-
```
|
|
199
|
-
pnpm typecheck && pnpm lint && pnpm run audit \
|
|
200
|
-
&& pnpm check:prop-vocabulary && pnpm check:mcp-sync && pnpm check:mcp-orphans \
|
|
201
|
-
&& pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:example-imports
|
|
202
|
-
pnpm vitest run src/components/<group>/__tests__ --maxWorkers=2
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
`pnpm test` and a bare `pnpm vitest run` are **forbidden** — 506 files / 3700+ tests, and several
|
|
206
|
-
agents on one machine takes the load past 90. The full suite is CI's job on the PR.
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
# Ant Design parity — the audit programme
|
|
2
|
-
|
|
3
|
-
> The complaint is systemic: _"hầu hết các component thiếu tính năng so với Ant Design."_
|
|
4
|
-
> This document is the **method**, so that 127 catalog entries can be audited by different agents
|
|
5
|
-
> and still produce comparable, reviewable results. Per-component specs live in sibling files.
|
|
6
|
-
|
|
7
|
-
## 0. Ground rules (a parity gap is not a licence to copy Ant Design)
|
|
8
|
-
|
|
9
|
-
1. **Capabilities are the target; prop names are not.** Map every antd prop onto
|
|
10
|
-
`docs/PROPS-VOCABULARY.md` — controlled triad `value`/`defaultValue`/`onValueChange`,
|
|
11
|
-
overlays `open`/`defaultOpen`/`onOpenChange`, `size ∈ xs|sm|md|lg` (never `"default"`),
|
|
12
|
-
`tone` for status, positive booleans. Where the library already has a spelling
|
|
13
|
-
(`getRowId`, `gap`, `columns: {base,sm,md,lg}`, `count`/`overflowCount`/`showZero`), **reuse it**.
|
|
14
|
-
A third dialect of the same idea is the defect this repo keeps paying to fix.
|
|
15
|
-
2. **GATE 0 still applies.** A missing antd component is not automatically a framework component.
|
|
16
|
-
Run the C1–C7 test in `docs/COMPOSITION-VS-COMPONENT.md` and publish the ledger. Ant ships
|
|
17
|
-
things that are compositions here (`Badge.Ribbon`, `Welcome`, `Prompts`).
|
|
18
|
-
3. **Do not duplicate what exists.** Ant's `CheckableTag` is this library's `Toggle`. Ant's
|
|
19
|
-
searchable select is `Select showSearch`. Check the MCP catalog before proposing anything.
|
|
20
|
-
4. **Do not port antd's mistakes.** Skip `styles={{…}}` inline-style twins (this system themes with
|
|
21
|
-
tokens), pixel `offset` pairs, and physical `left/right` spellings.
|
|
22
|
-
5. **A gap is only real once measured.** Cite the file and line, or the absence of a grep hit.
|
|
23
|
-
"Looks less capable than antd" is not a finding.
|
|
24
|
-
|
|
25
|
-
## 1. Spacing, geometry and token names — the rules already exist, so use them
|
|
26
|
-
|
|
27
|
-
This library is instrumented with ~60 checkers. Anything you write — **a spec document included** —
|
|
28
|
-
is machine-checkable, so check it before you hand it to anyone.
|
|
29
|
-
|
|
30
|
-
**Spacing is not free-form.** `docs/SPACING.md` is binding:
|
|
31
|
-
|
|
32
|
-
- Macro layout uses a **φ modular scale (≈1.618)**, _not_ the 8pt grid. `xs`/`sm` = 4px grid,
|
|
33
|
-
`md` = φ⁰, `lg` = φ¹, `xl` = φ². Applying Material's 8pt grid here is wrong, not "standard".
|
|
34
|
-
- Tailwind `p-*` / `m-*` / `gap-*` are rejected by `no-utility-spacing`; hand-rolled `flex`/`grid`
|
|
35
|
-
by `no-utility-layout`. Rows are `<Flex>`, stacks `<Flex direction="col" gap>`, grids
|
|
36
|
-
`<ResponsiveGrid>`, page sections spaced by `<PageContainer>` itself.
|
|
37
|
-
- **Card padding has a single owner**: `src/styles/card-layout.css`. Anything else that must sit on
|
|
38
|
-
the same rhythm uses `ui-card-inset-x` / `ui-card-inset-y` / `ui-card-inset` — and those three do
|
|
39
|
-
**not** share one value. Never invent a per-component inline-padding token where the Card already
|
|
40
|
-
owns the inset.
|
|
41
|
-
|
|
42
|
-
**Component token names must match this exact shape** — `check:token-tiers` enforces it:
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
--{component}-{part}-{property}
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
where `{property}` is one of: `space color background foreground border radius height width padding
|
|
49
|
-
gap size font line letter shadow glow tint gradient alpha align inset offset translate max overflow
|
|
50
|
-
display`.
|
|
51
|
-
|
|
52
|
-
`surface`, `bg`, `fg`, `spacing` are **not** accepted words. Control boxes come from the
|
|
53
|
-
`--control-height` tier — never a literal height, never `calc(var(--control-height) ± …)`
|
|
54
|
-
(`check:control-sizing`), never a Tailwind scale literal (`check:no-hardcoded-geometry` —
|
|
55
|
-
even `min-w-0` fails).
|
|
56
|
-
|
|
57
|
-
**Before handing over any doc or spec, run at minimum:**
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
pnpm check:doc-prop-existence # a prop named in an example must exist on that component —
|
|
61
|
-
# including a prop you only meant as an Ant Design illustration
|
|
62
|
-
pnpm check:token-tiers && pnpm check:no-hardcoded-geometry && pnpm run audit
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
This section exists because it was violated: a comparison table in
|
|
66
|
-
`badge-tag-chip-count.md` wrote an antd `Badge` + `count` example to illustrate _Ant's_ API and
|
|
67
|
-
`check:doc-prop-existence` correctly read it as a claim about _ours_; and three specs named tokens
|
|
68
|
-
`--…-surface` / `--…-bg`, which the shape above forbids. Both were caught by gates that already
|
|
69
|
-
existed and simply had not been run.
|
|
70
|
-
|
|
71
|
-
## 2. The ledger format — every audit produces exactly this table
|
|
72
|
-
|
|
73
|
-
One row per antd capability. No prose findings.
|
|
74
|
-
|
|
75
|
-
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
76
|
-
| --------------------------- | --------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------- |
|
|
77
|
-
| `<prop>` — one-line meaning | `PRESENT` / `RENAMED` / `COVERED-ELSEWHERE` / `MISSING` / `WONT-PORT` | `src/…:line`, or the grep that found nothing | for `MISSING`: the godx prop name to add, or "composition" |
|
|
78
|
-
|
|
79
|
-
- `RENAMED` — present under the house spelling. Record both names; no work.
|
|
80
|
-
- `COVERED-ELSEWHERE` — another primitive owns it. Name it. No work, but add a `related` cross-link
|
|
81
|
-
in the catalog **on both sides** (a one-sided claim is the mistake commit `8365bf05` fixed).
|
|
82
|
-
- `WONT-PORT` — a deliberate refusal. State the reason in the catalog entry so nobody re-adds it.
|
|
83
|
-
|
|
84
|
-
Close every audit with a **priority call**: `P0` (breaks a real screen), `P1` (a workaround exists
|
|
85
|
-
but it is hand-rolled and a11y-risky), `P2` (nice to have).
|
|
86
|
-
|
|
87
|
-
## 3. Findings so far
|
|
88
|
-
|
|
89
|
-
### 3.1 Already specced — see the sibling documents
|
|
90
|
-
|
|
91
|
-
| Area | Verdict | Spec |
|
|
92
|
-
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------- |
|
|
93
|
-
| `Tree` / `TreeList` / `TreeSelect` | `TreeSelect` fine; `TreeList` is not a tree; **`Tree` missing entirely** | `tree-components.md` |
|
|
94
|
-
| Badge / Tag / Chip / Pill / Count | Count marker missing entirely; removable chip trapped inside `TagInput`; selectable chip already is `Toggle` | `badge-tag-chip-count.md` |
|
|
95
|
-
| `List` (Ant `Listy`) / `Masonry` | Both missing entirely — no virtualization and no column packing anywhere in `src/` | `list-masonry.md` |
|
|
96
|
-
| AI / chat surface | Nothing exists; 4 components + 6 compositions decided | `ai-chat-components.md` |
|
|
97
|
-
|
|
98
|
-
### 3.2 `Tabs`, `Steps`, `Segmented` — audited 2026-09-10
|
|
99
|
-
|
|
100
|
-
These three are **already deliberately Ant-aligned** — the prop types cite antd by name. The
|
|
101
|
-
remaining gaps are narrow, and none of them is P0.
|
|
102
|
-
|
|
103
|
-
**`Tabs`** (`src/props/components/navigation.prop.ts:301`, `src/components/navigation/tabs.tsx`).
|
|
104
|
-
Present: `items` (incl. `closable`/`closeIcon`/`icon`), `value`/`defaultValue`/`onValueChange`,
|
|
105
|
-
`variant` (`line`/`card`/`editable-card`), `tabPlacement`, `centered`, `extra`
|
|
106
|
-
(= antd `tabBarExtraContent`), `destroyOnHidden`, `onEdit`, `addIcon`, `hideAdd`. Overflow already
|
|
107
|
-
scrolls and keeps the active tab visible (`src/components/navigation/tabs-scroll.ts`).
|
|
108
|
-
|
|
109
|
-
| Gap | Priority | Verdict |
|
|
110
|
-
| -------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
|
|
111
|
-
| `moreIcon` + an overflow **"more" dropdown** when the strip cannot scroll (narrow viewports) | **P1** | Add. Scrolling alone hides tabs from a touch user with no affordance. |
|
|
112
|
-
| `indicator: { size, align }` | P2 | Add as tokens (`--tabs-indicator-*`), not props — it is a design knob (cardinal rule #44). |
|
|
113
|
-
| `tabBarGutter` | P2 | Token, not a prop. |
|
|
114
|
-
| `animated` | P2 | `WONT-PORT` as a prop — motion is a system decision and must follow `prefers-reduced-motion`. |
|
|
115
|
-
| `renderTabBar` | P2 | `WONT-PORT` — an escape hatch that lets a consumer bypass the a11y contract. |
|
|
116
|
-
| `size` lacks `xs` | P2 | Add `xs` for the full `xs\|sm\|md\|lg` tier. |
|
|
117
|
-
|
|
118
|
-
**`Steps`** (`src/props/components/navigation.prop.ts:201-240`).
|
|
119
|
-
Present: `items` (`title`/`subtitle`/`description`/`icon`/`status`/`disabled`),
|
|
120
|
-
`value`/`defaultValue`/`onValueChange`, `orientation`, `status`, `type`
|
|
121
|
-
(`default`/`dot`/`inline`/`navigation` — `dot` **is** antd's deprecated `progressDot`), `percent`,
|
|
122
|
-
`titlePlacement`, `separator`.
|
|
123
|
-
|
|
124
|
-
| Gap | Priority | Verdict |
|
|
125
|
-
| ------------------------------------------------------------ | -------- | ---------------------------------------------------------------------- |
|
|
126
|
-
| `initial` — start the visible numbering at N | P2 | Add. Trivial, and real for resumed wizards. |
|
|
127
|
-
| `responsive` — auto-switch to vertical on a narrow container | **P1** | Add. Today a horizontal 5-step bar on a phone is the caller's problem. |
|
|
128
|
-
| `size` is `md\|sm` only | P2 | Extend to `xs\|sm\|md\|lg`. |
|
|
129
|
-
|
|
130
|
-
**`Segmented`** (`src/components/ui/segmented.tsx`). Built on react-aria-components' `RadioGroup`
|
|
131
|
-
(Radix's, when this was audited) — the correct APG choice either way, and the comment explaining why
|
|
132
|
-
it is not a `ToggleGroup` should be preserved verbatim.
|
|
133
|
-
Present: `options` (`value`/`label`/`icon`/`disabled`), `value`/`defaultValue`/`onValueChange`,
|
|
134
|
-
`block`, `vertical`, `size`, `disabled`, `name`.
|
|
135
|
-
|
|
136
|
-
| Gap | Priority | Verdict |
|
|
137
|
-
| ------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- |
|
|
138
|
-
| `shape: 'default' \| 'round'` | P2 | Add as `shape` — the existing `ShapeProp` vocabulary already has `pill`; reuse it rather than antd's `round`. |
|
|
139
|
-
| Option as a bare `string \| number` | P2 | Add. Ant accepts it; it removes ceremony for the common case. |
|
|
140
|
-
| Per-option `title` (a tooltip / hover hint) | P2 | `COVERED-ELSEWHERE` — wrap the option in `Tooltip`. Do not add a second tooltip API. |
|
|
141
|
-
| `size` lacks `xs` | P2 | Add. |
|
|
142
|
-
|
|
143
|
-
**None of these three is the source of the "doesn't look like Ant Design" impression** — that is
|
|
144
|
-
`TreeList`, the missing count badge, and the missing `List`/`Masonry`/`Tree`.
|
|
145
|
-
|
|
146
|
-
## 4. How to run an audit (per component group)
|
|
147
|
-
|
|
148
|
-
1. Read the group's catalog entries in `mcp/src/data/components.ts` and the prop types in
|
|
149
|
-
`src/props/components/<group>.prop.ts`.
|
|
150
|
-
2. Fetch the matching Ant Design docs page for each. Where a component's _identity_ is unclear,
|
|
151
|
-
settle it at <https://namethatui.com/?platform=web> before writing anything.
|
|
152
|
-
3. Produce the §2 ledger per component. Cite file:line.
|
|
153
|
-
4. Publish a GATE-0 C1–C7 ledger for anything proposed as a **new** component.
|
|
154
|
-
5. Do **not** write source in an audit pass. An audit is read-only; fixes are a separate wave with
|
|
155
|
-
their own spec, so the diff stays reviewable and two agents never edit one file at once.
|