Skip to content

[Issue#2] Add subcomponents detection and dashboard integration - #14

Open
storchk wants to merge 5 commits into
zeplin:mainfrom
storchk:feat/2-handle-compound-component-detection-integration
Open

[Issue#2] Add subcomponents detection and dashboard integration#14
storchk wants to merge 5 commits into
zeplin:mainfrom
storchk:feat/2-handle-compound-component-detection-integration

Conversation

@storchk

@storchk storchk commented Sep 11, 2026

Copy link
Copy Markdown

Github issue: #2

This PR introduces a Subcomponents tab on the Component Detail page, allowing users to discover and navigate component families (e.g., Button.Primary, Button.Secondary). It also surfaces the total family usage in the component info panel.

Changes

  • Backend
    • New API endpoint: GET /workspaces/:workspaceSlug/components/:definitionId/subcomponents
    • New service getComponentSubcomponents that finds components matching ^Name\. in the same package and aggregates their usage
    • Computes familyUsage as the sum of the root component's usages plus all subcomponent usages
  • Frontend
    • Added SubcomponentsTable with loading skeletons, empty state, and links to subcomponent detail pages
    • Integrated tab into ComponentDetail with subcomponent counter
    • Updated ComponentDetailInfo to display # Root used
  • Docs
    • Added docs/dashboard/components/subcomponents.md
    • Updated Components overview and navigation links

Component details
img-2

Component overview
img-1

How to test

  1. Open any component detail page that has subcomponents (e.g., Button)
  2. Verify the Subcomponents tab appears between Props and Dependency tree
  3. Confirm the table lists subcomponent names and usage counts
  4. Confirm the left panel shows # Root used

@storchk
storchk marked this pull request as ready for review September 11, 2026 07:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant