feat(ui,registry): component sidebar drill-down navigation#462
Merged
Conversation
Restructure ROADMAP.md to the roadmap-skill convention: 0.3.0 + the react-doctor sweep become DONE phases (all 197 issues closed), and the 0.4.0 cycle is formalized as phases with stable IDs — component-sidebar (active), ai-elements-parity, agent-ui-cli — plus a Later backlog. Adds the AI Elements parity gap analysis. Agent UI CLI detail preserved in an appendix. Claude-Session: https://claude.ai/code/session_01KB2yTDBo7Knydqvz1VvFdF
Replace the all-open family list (309 components rendered at once) with a single-pane drill-down: ROOT shows the 12 families (count + chevron), selecting one — or landing on a component page — drills into that family's components only, with a "All families" back. The breadcrumb gains a family crumb (Components / Family / Component). - Sidebar: opt-in `family` flag on SidebarSection drives FamilyNav (FamilyList ROOT + FamilyItems detail). Non-family sidebars render unchanged, so existing stories/tests/visual snapshot are untouched. Auto-drills into the active route's family (adjust-state-during-render, no effect); aria-current on the active item. - registry: tag the 12 family groups `family: true`; add the family breadcrumb crumb on component pages (data-driven from `category`). - e2e: Playwright drill-down coverage (auto-drill, back, family switch). Closes #461 Claude-Session: https://claude.ai/code/session_01KB2yTDBo7Knydqvz1VvFdF
|
ntk preview
Built from |
`registry:build` output for the sidebar drill-down change — keeps the inlined shim + registry.json in sync with the canonical source (fixes the registry-drift Quality Gate). Claude-Session: https://claude.ai/code/session_01KB2yTDBo7Knydqvz1VvFdF
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.
Reworks the component sidebar so 309 components are navigable at a glance. Validate the new UX on the preview link below.
What changed
Single-pane drill-down (replaces the all-open family list):
/components/[slug], drills into that family's components only, with a "← All families" back.Components / Family / Component.How
@vllnt/uiSidebar: opt-infamilyflag onSidebarSectiondrives a newFamilyNav(FamilyListROOT +FamilyItemsdetail). Non-family sidebars render unchanged — existing stories, unit tests, and the visual snapshot are untouched. Auto-drills into the active route's family (adjust-state-during-render, no effect);aria-currenton the active item.family: true(data-driven from the existingcategoryenum — zero nav maintenance); add the breadcrumb family crumb.Validation
@vllnt/uilint + types clean; 6/6 Sidebar unit tests pass (backward compat).apps/registry/e2e/sidebar-drilldown.spec.ts.How to validate the UX
/components/button→ sidebar shows Core drilled-in (Button active), breadcrumbComponents / Core / Button.Also repairs ROADMAP.md to the phase convention and adds the 0.4.0
component-sidebarphase + AI Elements parity analysis.Closes #461
https://claude.ai/code/session_01KB2yTDBo7Knydqvz1VvFdF