feat(inspector): adopt @antfu/design and set up Storybook#178
Open
antfubot wants to merge 4 commits into
Open
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.
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 the
@antfu/designUnoCSS preset (v0.2.1) and replaces as many in-house components as possible with the design system's, so theming and components have a single source of truth. The goal is a more consistent design with less in-house code; some visual change is expected and accepted.Changes
Design layer
src/uno.config.ts): usepresetAnthonyDesign(). Drop the duplicatedprimaryramp (the preset's default antfu green is the same#49833E) and every semantic shortcut the preset provides (color-base,bg-*,border-*,btn-action*,badge-color-*,bg-glass,color-scale-*,op-*). Only app-specific tokens remain (namedz-*layers,icon-catppuccin,color-deprecated,page-padding*).@antfu/design/styles.css; remove the in-house Floating Vue overrides and base surface rules it supersedes.Component replacement (net −469 lines of app code)
@antfu/design/componentsis registered as a Nuxt auto-import dir (pathPrefix: false), so design components resolve like local ones;LayoutSplitPane/LayoutVirtualListare excluded (unused optional peers).option/Checkbox→FormCheckbox(reka-ui) across all 19 call sitesui/Drawer→OverlayDrawer(title header + Esc/backdrop via reka-ui; app CSS width override for the wide maintainer drawer)display/SafeImage→DisplayAvatar(hash-tinted initials fallback) in author/funding entriesdisplay/Version→DisplayVersion(same auto-import tag name takes over)display/NumberBadge→DisplayNumberBadge(~17 call sites;#afterslots becamesuffix)ui/Donut→DisplayDonut, dark toggle →ActionDarkToggle(animated view transition)MaintainerActionTypePillpills →DisplayBadgeFileSizeBadge(formatBytes/getBytesColor, also fixes a latent non-class color fallback),DateBadge(DisplayDate),DurationBadge(getAgeColor),EmptyState(FeedbackTip).PackageName(deprecated/vulnerable coloring must inherit; the design one is self-colored by contract),SelectGroup(radio semantics + non-string values),Percentage(labeled segments).Storybook
@antfu/designrecipe: theme-syncedmanager/preview,autodocs, co-located stories for app-specific components (ClusterBadge,Logo), and anOverviewpage generated from the stories on disk (scripts/gen-overview.mjs,pnpm docs:overview) so it never drifts. Generic primitives are documented by the design package's own Storybook. Scripts:storybook,storybook:build,docs:overview.Deps
@antfu/design,reka-ui,colorjs.io,storybook+@storybook/{vue3-vite,addon-docs},@vitejs/plugin-vuevia new catalog entries.h3pinned as a tools devDep.Kept
presetWind3intentionally (the preset is base-agnostic); a Wind4 move can be a follow-up.Verification
vue-tsc --noEmit,eslint,pnpm build(SPA prerender + libs),vitest run(78/78) andstorybook buildall pass. Verified in-browser: light/dark, grid badges, filters/settings checkboxes (toggle behavior), the maintainer-actions drawer (open/Esc), report pages, avatars with initials fallback, and the Storybook Overview/theme-sync.This PR was created with the help of an agent.