Quality
Quality is a first-class product surface in Ledger UI. We treat Metronic parity as a measurable target and validate every component against automated and manual checks.
Quality Stack
| Layer | Tool | What It Checks |
|---|---|---|
| Unit tests | Vitest | Component exports, utility functions, hook behavior |
| Type checking | TypeScript strict | API contracts, prop types |
| Linting | ESLint | Code quality, import patterns |
| Formatting | Prettier | Consistent code style |
| Bundle size | Custom script | Per-package size budgets |
| Accessibility | axe-core + Storybook | WCAG AA compliance per story |
| Visual regression | Chromatic | Pixel-level snapshot diffs |
| CI/CD | GitHub Actions | All checks on every PR |
Current Metrics
| Metric | Value |
|---|---|
| Total tests | 301 |
| Test packages | 8 |
| Storybook stories | 70 |
| Bundle size (UI ESM) | 186KB / 250KB budget |
| Layout parity | 100% (10/10 Metronic demos) |
| Template coverage | 15 templates |
| Component count | 53+ |
What We Validate
- Layout + navigation parity — All 10 Metronic demo layouts reproduced via 8
MetronicLayoutvariants - Visual parity — Spacing, typography, surfaces match Metronic reference
- Component API — All components have typed props,
forwardRef, anddisplayName - Accessibility — axe-core checks on all Storybook stories
- A11y gate — dedicated CI Storybook audit is blocking
- Mobile and RTL — Responsive breakpoints, CSS logical properties for RTL
- Build integrity — Lint, typecheck, build, test pass in CI
Running Quality Checks
# Full CI suite locally
pnpm lint && pnpm format:check && pnpm typecheck && pnpm build && pnpm test
# Bundle size check
node scripts/check-bundle-size.mjs
# Docs link check
pnpm docs:links
# Story coverage check
pnpm storybook:coverage
# Storybook a11y
pnpm --filter @gtcx/storybook test:a11y
# Visual regression
pnpm --filter @gtcx/storybook chromaticUAT Process
See the UAT Index for sprint checklists and evidence requirements.