ComponentHealthMatrix

What Does It Do? (Plain English)

ComponentHealthMatrix turns the live component catalogue into a QA dashboard. It shows whether each template has a source file, docs, demo route, screenshot, and test coverage, then lets maintainers filter by status, theme support, or search text.

How It Works (Pseudo-Code)

receive catalogue entries
receive available source/docs/demo/screenshot/test file paths
for each component:
  compare declared paths with available paths
  derive source/docs/demo/screenshot/test statuses
  combine statuses into ready, partial, or missing
render summary counts
render searchable, filterable table

State Flow Diagram

componentCatalogEntries
  -> route maps entries into ComponentHealthEntry[]
  -> route builds available file sets with import.meta.glob
  -> createHealthRows()
  -> ComponentHealthMatrix rows prop
  -> query/status/theme filters
  -> filtered table

Props Reference

Prop	Type	Default	Description
rows	ComponentHealthRow[]	Required	Health rows generated by createHealthRows().
title	string	"Component health matrix"	Heading shown above the dashboard.

Edge Cases

• Missing screenshots are reported separately from missing docs or tests so visual QA debt is visible.
• Components with no dependencies render None instead of an empty table cell.
• Search covers component name, shelf, route, source path, and dependency label.
• A component with mixed ready/missing fields becomes partial, which is more useful than hiding it in a binary pass/fail state.

Dependencies

No external dependencies. The route usually pairs this component with componentCatalogEntries and Vite import.meta.glob file sets.

File Structure

src/lib/components/ComponentHealthMatrix.svelte
src/lib/components/ComponentHealthMatrix.test.ts
src/lib/components/ComponentHealthMatrix.md
src/routes/componenthealthmatrix/+page.svelte