Skip to content

feat(ui): add metric composition - #647

Merged
zacjones93 merged 4 commits into
codex/empty-state-component-migrationfrom
codex/ui-metric
Jul 15, 2026
Merged

feat(ui): add metric composition#647
zacjones93 merged 4 commits into
codex/empty-state-component-migrationfrom
codex/ui-metric

Conversation

@zacjones93

@zacjones93 zacjones93 commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

Summary

  • add the children-driven Metric.Root, Metric.Card, and Metric.Inset description-list surfaces to @repo/ui
  • add semantic Label, decorative Icon, Value, and Supporting parts with finite size and tone variants
  • add identity-only Start and Crew adapters, package compatibility coverage, inventory updates, and LAT documentation
  • add six Storybook compositions covering neutral grids, icons, visible tone meaning, compact insets, long mobile values, loading skeletons, and adjacent errors

Why

The completed route audit found repeated metric and statistic panels across organizer, admin, and token surfaces. This establishes a presentation-only boundary before any consumer migration, while calculations, grids, fetching, actions, animation, and status vocabulary stay app-owned.

This is stacked on #646 and intentionally contains no route consumers.

Validation

  • pnpm --filter @repo/ui check
  • pnpm --filter @repo/ui test — 72 tests passed
  • pnpm --filter @repo/ui type-check
  • pnpm --filter @repo/ui build
  • pnpm --filter wodsmith-start type-check
  • pnpm --filter crew type-check
  • pnpm --filter wodsmith-start check:ui-inventory
  • pnpm --filter wodsmith-start test:storybook-contrast — static build and both Playwright checks passed across light and dark Canvas stories
  • lat check
  • git diff --check 67388dd2a11253fa5c21d5fc4b48a71bad130800..0ef7159c4dd023e4dd5d9fb437956630d6cf49b8

Summary by cubic

Adds a new Metric composition to @repo/ui and migrates Crew preview summaries to use it. This standardizes metric semantics while keeping existing layouts and behavior.

  • New Features

    • Semantic description lists with Metric.Root, Metric.Card, Metric.Inset.
    • Parts: Metric.Label, decorative Metric.Icon, Metric.Value, Metric.Supporting.
    • Metric.Value variants: sizes sm|md|lg; tones neutral|positive|warning|critical.
    • Exported as @repo/ui/metric; Start and Crew re-exports with compatibility coverage.
    • Storybook stories for grids, tones, icon/supporting, compact inset, long mobile values, and loading/error.
    • Added unit tests, LAT docs, and inventory updates.
  • Refactors

    • Crew: replaced local summary metrics with Metric.Inset in combined import tabs, volunteer import flow, heat import, template preview, and copy-prior-event preview.
    • Preserved visible value-before-label order with proper dl/dt/dd semantics; compact typography and wrapping retained.
    • Added Crew consumer tests for label/value pairs and edge cases; removed SummaryMetric helpers.

Written for commit d6316c1. Summary will update on new commits.

Review in cubic

@coderabbitai

coderabbitai Bot commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4f0e20b2-6edd-4eea-a765-ee948ece03f6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/ui-metric

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

This was referenced Jul 11, 2026

Copy link
Copy Markdown
Contributor Author

Independent review fallback (the external CodeRabbit trigger was blocked by policy): LGTM / no blocking findings at exact head 0ef7159c4dd023e4dd5d9fb437956630d6cf49b8, stacked on exact base 67388dd2a11253fa5c21d5fc4b48a71bad130800.

Reviewed the exact diff for the bounded, no-consumer Metric extraction:

  • Compound API and semantics are sound: explicit Root/Card/Inset dl surfaces, Label as dt, Value/Supporting as dd, and the optional nested icon is decorative by default.
  • Native refs, attributes, and class merging are forwarded across surfaces and parts; context misuse fails explicitly.
  • Value variants remain finite (sm|md|lg, neutral|positive|warning|critical), with tabular numerals and semantic supporting copy.
  • min-w-0 plus anywhere wrapping covers long labels, identifiers, and supporting text; all Canvas stories passed light/dark semantic contrast.
  • Package export, Start/Crew identity adapters, compatibility coverage, generated inventory, and LAT contract are consistent.
  • Exact-head import search found no production consumers: only both adapters and the Storybook import.

Read-only gates passed: git diff --check; UI tests 72/72; UI Biome, type-check, and build; Start/Crew type-checks; inventory check; lat check; Storybook build; 2/2 all-canvas light/dark Playwright contrast checks. I also inspected all six Metric play functions, including the Skeleton loading and destructive Alert composition.

PR is mergeable; several CI jobs were still in progress at review time.

@zacjones93
zacjones93 merged commit d6316c1 into codex/empty-state-component-migration Jul 15, 2026
24 checks passed
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