Skip to content

fix(registry): apply components.build standard across all components#18

Merged
jal-co merged 2 commits intomainfrom
fix/components-build-audit
Mar 29, 2026
Merged

fix(registry): apply components.build standard across all components#18
jal-co merged 2 commits intomainfrom
fix/components-build-audit

Conversation

@jal-co
Copy link
Copy Markdown
Owner

@jal-co jal-co commented Mar 29, 2026

Summary

Audit and fix all 20 registry components (20 files) against the components.build specification.

Changes by pillar

data-slot (data-attributes)

Added data-slot="<component-name>" on every exported sub-component root element. Enables stable parent-targeting:

<form className="[&_[data-slot=code-block]]:rounded-none">
  <CodeBlock code={...} />
</form>

Types (types)

  • All prop interfaces now extend React.ComponentProps<"element">
  • All root elements spread {...props} last
  • Consumers can now pass id, aria-*, data-*, event handlers, and any native HTML attribute
  • Removed standalone className props (inherited from ComponentProps)

Styling (styling)

  • Removed decorative /* ---- */ separator comments from 4 files (ai-copy-button, code-block-client, log-viewer, stepper)

Accessibility (accessibility)

  • FileTree: Full WAI-ARIA tree keyboard map — Arrow Up/Down (sibling nav), Arrow Left/Right (collapse/expand), Home/End (jump), all items focusable
  • RequestViewer: Full WAI-ARIA tabs keyboard map — Arrow Left/Right (cycle tabs), Home/End (jump), roving tabIndex (only active tab in tab order)

State (state)

  • CodeBlockCommand: Fixed hydration mismatch — moved localStorage.getItem() from useState initializer to useEffect, wrapped commands in useMemo for stable dependency

Verification

  • pnpm lint — 0 errors, 0 warnings
  • pnpm registry:build — all 20 items built
  • pnpm build — 35/35 pages generated

Files changed

registry/activity-graph/activity-graph.tsx
registry/ai-copy-button/ai-copy-button.tsx
registry/api-ref-table/api-ref-table.tsx
registry/code-block-command/code-block-command.tsx
registry/code-block/code-block-client.tsx
registry/code-block/code-block.tsx
registry/code-line/code-line-copy-button.tsx
registry/code-line/code-line.tsx
registry/cron-schedule/cron-schedule.tsx
registry/diff-viewer/diff-viewer-client.tsx
registry/diff-viewer/diff-viewer.tsx
registry/env-table/env-table.tsx
registry/file-tree/file-tree.tsx
registry/json-viewer/json-viewer.tsx
registry/kbd/kbd.tsx
registry/log-viewer/log-viewer.tsx
registry/npm-badge/npm-badge.tsx
registry/request-viewer/request-viewer.tsx
registry/stepper/stepper.tsx
registry/tip-jar/tip-jar.tsx

Audit and fix all 20 registry components against the components.build
specification. Changes across 20 files:

data-slot
- Add data-slot on every exported sub-component for stable
  parent-targeting via CSS attribute selectors

Types
- Extend React.ComponentProps<element> on all prop interfaces so
  consumers can pass id, aria-*, data-*, and event handlers
- Spread ...props last on root elements so consumer overrides win
- Remove standalone className props (now inherited)

Styling
- Remove decorative /* --- */ separator comments (4 files)

Accessibility
- FileTree: add full WAI-ARIA tree keyboard map (Arrow keys,
  Home/End, expand/collapse, all items focusable)
- RequestViewer: add WAI-ARIA tabs keyboard map (Arrow Left/Right,
  Home/End, roving tabindex)

State
- CodeBlockCommand: fix hydration mismatch by moving localStorage
  read from useState initializer to useEffect, wrap commands in
  useMemo for stable dependency
@jal-co jal-co merged commit e19a904 into main Mar 29, 2026
2 checks passed
@jal-co jal-co deleted the fix/components-build-audit branch March 29, 2026 07:19
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