feat(inspector): adopt @antfu/design and set up Storybook - #178
Open
antfubot wants to merge 13 commits into
Open
feat(inspector): adopt @antfu/design and set up Storybook#178antfubot wants to merge 13 commits into
antfubot wants to merge 13 commits into
Conversation
Replace the hand-maintained design layer with the @antfu/design UnoCSS preset and shipped styles so theming is consistent and there is a single source of truth for tokens, overlays and severity scales. - uno.config: use presetAnthonyDesign(); drop the duplicated primary ramp and every semantic shortcut the preset now provides, keeping only the app-specific z-index layers and paddings. - styles: import @antfu/design/styles.css and remove the in-house Floating Vue overrides and base surface rules it supersedes. - swap the bespoke Donut for DisplayDonut and the dark-mode button for ActionDarkToggle (gaining the animated view-transition reveal). - add a Storybook setup following the @antfu/design recipe: theme-synced manager/preview, autodocs, an Overview page and co-located stories for the presentational components. Created with the help of an agent.
…alents Register the @antfu/design components directory for Nuxt auto-import and replace the in-house implementations wholesale, so generic primitives come from the design system and only app-specific components remain: - delete option/Checkbox → FormCheckbox (reka-ui) across all 19 call sites - delete ui/Drawer → OverlayDrawer (title header, Esc/backdrop handled by reka-ui; app-level width override for the maintainer action drawer) - delete display/SafeImage → DisplayAvatar (hash-tinted initials fallback) in author and funding entries - delete display/Version and display/NumberBadge → the design DisplayVersion and DisplayNumberBadge take over the same auto-import tag names - MaintainerActionTypePill pills → DisplayBadge - rebase FileSizeBadge, DateBadge, DurationBadge and EmptyState on the design utils/components (formatBytes, getBytesColor, getAgeColor, DisplayDate, FeedbackTip), fixing a latent non-class fallback in FileSizeBadge - drop stories for deleted components; Overview.mdx now points to the design package's own Storybook for the generic primitives Also make the module-type test resolve packages from the test file itself instead of the hoist-order-dependent root, pinning h3 as a tools devDep. Created with the help of an agent.
Follow the @antfu/design Storybook recipe fully: the Overview page is now produced by scripts/gen-overview.mjs (pnpm docs:overview) so it never drifts from the stories, and the intentionally-shadowed DisplayPackageName is excluded from the design components dir to silence the duplicate-name warning. Created with the help of an agent.
presetAnthonyDesign merges its `fonts` values into the theme verbatim, so the default bare "DM Sans"/"DM Mono" names replaced the full family stacks and the page fell back to the browser default (serif) whenever the webfont wasn't loaded. Pass complete stacks with generic fallbacks instead. Created with the help of an agent.
Instead of hand-writing the font stacks in the design preset options, feed presetAnthonyDesign the wind3 default fontFamily (imported, not hardcoded) so its font merge is a no-op, and presetWebFonts — which downloads and serves the fonts — prepends the brand families exactly like before the migration. Created with the help of an agent.
Created with the help of an agent.
…round 0.2.2 fixes the exact issue reported upstream (antfu/design#17): presetAnthonyDesign no longer touches theme.fontFamily/theme.font at all, so it can't clobber the base preset's fallback chain. That removes the fonts option entirely, which also removes the need for the wind3-passthrough no-op workaround added to make the previous version's font merge harmless — presetWebFonts is now unambiguously the only thing setting font-sans/ font-mono, composed onto presetWind3's own generic fallback, matching the pre-migration stack exactly with no duplication. Created with the help of an agent.
Merge origin/main (devframe v0.6/0.7, verkit replacing semver, dep bumps, node-modules-inspector v2.2.0 release) into this branch. - pnpm-workspace.yaml / package.json: keep this branch's additions (@antfu/design, storybook, reka-ui, colorjs.io, @vitejs/plugin-vue) alongside main's version bumps and its semver -> verkit swap. - packages/node-modules-tools: the module-type "dual" test asserted on `h3`, which main's own dependency bump made ESM-only (no more `require` export condition) — swap the fixture to `tinyglobby` (still genuinely dual) and keep resolving it from the test file itself (not the hoist-order-dependent root) via a pinned devDependency. - Fix two `defineModel` call sites (ExpendableContainer, PackageMultiSelectInput) that main's vue-tsc bump now infers as literal types instead of the widened primitive — add explicit type arguments. Verified: vue-tsc --noEmit, eslint, vitest (87/87) and pnpm build all pass against this state in isolation. Created with the help of an agent.
0.2.2 -> 0.3.2 carries several breaking changes; adapt each call site rather than pin back: - ActionDarkToggle was removed entirely (the package now owns no dark-mode state or toggle component — see its recipes.md). NavRight's three nav buttons move to ActionIconButton (which gained href/to link-mode and font-size-driven sizing in this range), composed with our own isDark/toggleDark; losing the view-transition animation is accepted, this reverts to the pre-@antfu/design behavior. - FormCheckbox dropped its "bare" mode — it now always renders its own <label>, where before a bare instance let the caller own the label. All 19 call sites nested it inside our own <label> (directly, or via OptionItem's label-by-default root), which would now produce invalid nested <label>s and risk double-toggling. Fix per site: where FormCheckbox sat beside adjacent content in a hand-written <label>, move that content into its default slot and drop the outer <label>; where it sat bare inside OptionItem with no adjacent content, pass OptionItem `:div="true"` so it stops rendering its own <label>. - DisplayBadge dropped its `size` prop (sized off font-size now, with no default) — MaintainerActionTypePill's two direct usages need an explicit text-xs to keep their prior size; DisplayNumberBadge (our ~17 indirect call sites) is unaffected, the package updated it internally to match. - `bg-active` was repurposed from generic hover feedback to a *persisted* selected/checked/open state (now primary-tinted), with a new `bg-hover` taking over the old neutral-gray transient-hover meaning. Reclassify every in-house `bg-active`/`hover:bg-active` usage: ~115 genuine hover-only sites across 33 files rename to `bg-hover`; the few that mark real persisted state (selected list row, current breadcrumb/tab, keyboard-highlighted option, valid-badge highlight) keep `bg-active` — arguably more correct now; two decorative avatar/chip backgrounds move to the new `bg-ambient`. - `icon-catppuccin` now ships from the preset itself (identical semantics, confirmed by diffing the generated CSS) — delete the in-house duplicate. - Register the new DisplayIconifyRemoteIcon in the components-dir ignore list (needs the optional `dompurify` peer we don't use), alongside the existing LayoutSplitPane/LayoutVirtualList/DisplayPackageName exclusions. Verified against the genuinely-pinned 0.3.2 (not just the design repo's source): vue-tsc --noEmit, eslint, vitest (87/87), pnpm build and the Storybook build all pass; live-clicked through every restructured FormCheckbox site (no nested <label>s beyond the pre-existing, unrelated SelectGroup-in-OptionItem pattern; single-click toggles correctly), the GitHub link (now a real `<a href>`, unlike under the old ActionIconButton shape), the dark toggle, and the maintainer-actions drawer (i-ph:x close icon, correctly-sized PROD badge). Created with the help of an agent.
Merge origin/main (antfu#181 exclude dev dependencies filter, antfu#182 e2e OTP fix, another own-repo module-type test fix) into this branch. - FiltersOptionExcludes.vue: the new "Exclude Dev Dependencies" OptionItem applies the same FormCheckbox treatment (`:div="true"` on OptionItem) as its siblings. - module-type.test.ts: main independently hit and fixed the same h3-became- ESM-only issue (swapping the "dual" fixture to `vue`) — take their fixture choice for consistency with upstream, keep this branch's more robust deterministic (file-relative, not hoist-order-dependent) resolution. `vue` resolves consistently regardless of which installed patch gets hoisted (same dual exports shape across 3.5.x), so no pinned devDependency needed; drop the now-unused tinyglobby one. Verified: vue-tsc --noEmit, eslint, vitest (87/87) and pnpm build all pass; live-checked the new Exclude Dev Dependencies checkbox renders and is positioned correctly. Created with the help of an agent.
commit: |
Merge origin/main (v2.3.0/v2.3.1 releases, the "export filters/settings as a config file" feature, and dependency bumps incl. verkit 0.1.2 -> 0.3.0) into this branch. - pnpm-workspace.yaml: keep this branch's additions (@antfu/design, storybook, reka-ui, colorjs.io) alongside main's new devtools-version YAML anchors and version bumps; drop the now-genuinely-unused `chokidar` dev-catalog entry (main's own cleanup — nothing references it via `catalog:dev` anymore, only the top-level `overrides` block still pins it). - Fix a real bug the verkit bump introduced: `getPrerelease()`'s runtime now returns `[]` for stable versions (its own .d.ts still promises `null`), which silently broke `isStable()`'s `=== null` check and made `computeMaintainerActions` return zero items — the "Maintainer Actions" report would show up empty project-wide. Check both possible shapes so it doesn't re-break if verkit's runtime is ever aligned back to its types. Verified: vue-tsc --noEmit, eslint, vitest (87/87), pnpm build and the Storybook build all pass in isolation; live-checked the maintainer-actions report now shows real dep-upgrade items again (102, not 0). Created with the help of an agent.
The new "export as config file" dialog (merged from main) hand-rolled a backdrop, teleport, centered panel, transitions, and a close button — duplicating exactly what @antfu/design's OverlayModal already provides. Delegate to it: `title` for the header, the default slot for the description + code preview, `#footer` for the Copy/Download actions. Drops the entire <style> block (~40 lines) and the hand-rolled `close()`/backdrop-click handling in favor of reka-ui's built-in Escape/backdrop-dismiss. `class="max-w-3xl!"` keeps the wider width the config preview needs (the important-modifier reliably wins over the preset's internal `max-w-lg` regardless of class order). Verified: vue-tsc --noEmit, eslint, vitest (87/87), pnpm build and the Storybook build all pass; live-checked the dialog opens, renders the title/ description/code block/footer buttons, and Escape closes it via reka-ui. Created with the help of an agent.
…led) A prior No local changes to save mid-merge cleared the MERGE_HEAD state, so the previous commit (59d5c05) recorded the conflict resolution as a plain, single-parent commit instead of an actual merge — this re-merges properly so the branch's history reflects that origin/main's commits are incorporated. No content changes; the tree already matched (verified: vue-tsc --noEmit, vitest 87/87 pass identically before and after). Created with the help of an agent.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Replaces the hand-maintained design layer with
@antfu/design(now on v0.3.2) and replaces as many in-house components as possible with the design system's, so theming and components have a single source of truth. Some visual change is expected and accepted — that's the point.Design layer
src/uno.config.ts):presetAnthonyDesign()— drops the duplicatedprimaryramp, every semantic shortcut the preset provides (color-base,bg-*,border-*,btn-action*,badge-color-*,bg-glass,color-scale-*,op-*), and (as of 0.3.x) the in-houseicon-catppuccinshortcut too. Fonts are left topresetWebFonts(the design preset has no opinion on typography as of 0.3.x).@antfu/design/styles.css, replacing the in-house Floating Vue overrides and base surface rules.Component replacement
@antfu/design/componentsis registered as a Nuxt auto-import dir. Deleted in-house, replaced by the design system:option/Checkbox→FormCheckbox,ui/Drawer→OverlayDrawer,display/SafeImage→DisplayAvatar,display/Version→DisplayVersion,display/NumberBadge→DisplayNumberBadge,ui/Donut→DisplayDonut, the dark toggle →ActionIconButton,MaintainerActionTypePill→DisplayBadge, and — merged in from main's new "export config file" feature —SettingsConfigDialog's hand-rolled backdrop/panel/transitions →OverlayModal. Rebased on design utils:FileSizeBadge,DateBadge,DurationBadge,EmptyState→FeedbackTip. Kept in-house deliberately:PackageName(deprecated/vulnerable coloring must inherit from context),SelectGroup(radio semantics + non-string values),Percentage(labeled segments).Following the 0.2.2 → 0.3.2 breaking changes
ActionDarkToggleremoved entirely →NavRight's nav buttons move toActionIconButton, composed with our ownisDark/toggleDark.FormCheckboxdropped its "bare" mode (always renders its own<label>now) → restructured all 19 call sites to avoid invalid nested<label>s.DisplayBadgedropped itssizeprop → explicittext-xsadded where needed.bg-activewas repurposed from generic hover feedback to a persisted selected/checked/open state, with a newbg-hovertaking over the old meaning → reclassified ~115 in-house usages across 33 files by reading each one's actual intent.@antfu/designitself: the preset used to overwritetheme.fontFamilywith a bare font name, dropping the base preset's generic fallback chain (serif flash on slow font load) —presetAnthonyDesignnow has no opinion on fonts at all as a result.Storybook
Setup per the
@antfu/designrecipe: theme-syncedmanager/preview,autodocs, co-located stories for app-specific components, and anOverviewpage generated from the stories on disk (pnpm docs:overview) so it never drifts.Merges
This branch tracked a very active
mainacross several rounds (devframe bumps, the verkit-for-semver refactor, the exclude-dev-deps filter, the config-file-export feature, dependency bumps). Two real upstream regressions were found and fixed along the way, independent of this PR's own changes but necessary to keep the branch green:module-typetest's "dual" fixture (h3) became ESM-only after main's own dependency bump; converged with main's own independent fix (swapping tovue).verkit0.1.2 → 0.3.0'sgetPrerelease()started returning[]instead ofnullfor stable versions (contradicting its own.d.ts), which silently brokeisStable()and made the Maintainer Actions report return zero items project-wide — fixed to check both possible shapes.Deps
@antfu/design,reka-ui,colorjs.io,storybook+@storybook/{vue3-vite,addon-docs},@vitejs/plugin-vuevia new catalog entries.Verification
vue-tsc --noEmit,eslint,pnpm build,vitest run(87/87) andstorybook buildall pass against the genuinely-installed pinned versions at every checkpoint. Live-browser-verified: light/dark, every restructuredFormCheckboxsite, theActionIconButtonnav (GitHub link as a real<a href>), the maintainer-actions drawer, the migrated config-export modal (open/render/Escape-close), and the maintainer-actions report showing real data again post-fix.This PR was created with the help of an agent.