Migrate catalog examples to React

[tannerlinsley]

Summary

• rebuild the conformance catalog and source viewer as React components
• move application-owned UI for 14 interaction and motion examples into React views
• keep imperative DOM work limited to renderer adapters, metadata, measurement, and conformance inspection
• preserve scroll, synchronized focus, cursor values, and calendar lifecycle behavior during the migration

Why

The catalog and example shells mixed chart definitions with manual element creation, mutation, selector rebinding, and listener cleanup. That obscured the intended React ownership boundary and made the examples poor copy-paste material.

Validation

• pnpm exec tsc --noEmit --pretty false
• 91 focused Vitest tests across 20 files
• pnpm --filter @charts-poc/conformance-example build
• node scripts/catalog-index.mjs --check
• Chromium quick conformance for all 14 migrated cases at 320px and 640px across both revisions: all visual checks and 9/9 interaction suites passed

Summary by CodeRabbit

• New Features

  • Added React-powered conformance catalog views with filtering, themes, navigation, embeds, source inspection, and comparison rendering.
  • Migrated 14 chart examples covering motion, cursors, zooming, brushing, playback, editing, timelines, and geometry changes.
  • Added accessible controls, live status messaging, replay, interruption, and responsive interaction support.
  • Added reusable controls and improved source rendering for TypeScript React modules.

• Bug Fixes

  • Preserved application-owned sizing during calendar resizing.
  • Improved interaction state and focus preservation across updates.

• Tests

  • Expanded verification to 111 conformance cases.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6fbb9183-2b47-44f4-8193-62e3182b04d2

📥 Commits

Reviewing files that changed from the base of the PR and between 4b5ae62 and 107bd20.

📒 Files selected for processing (56)

• API-FRICTION.md
• benchmarks/conformance/cases/112-motion-entrance/tanstack.test.ts
• benchmarks/conformance/cases/112-motion-entrance/tanstack.ts
• benchmarks/conformance/cases/112-motion-entrance/view.tsx
• benchmarks/conformance/cases/113-motion-updates/tanstack.test.ts
• benchmarks/conformance/cases/113-motion-updates/tanstack.ts
• benchmarks/conformance/cases/113-motion-updates/view.tsx
• benchmarks/conformance/cases/114-spring-line-motion/tanstack.test.ts
• benchmarks/conformance/cases/114-spring-line-motion/tanstack.ts
• benchmarks/conformance/cases/114-spring-line-motion/view.tsx
• benchmarks/conformance/cases/115-definition-motion/tanstack.test.ts
• benchmarks/conformance/cases/115-definition-motion/tanstack.ts
• benchmarks/conformance/cases/115-definition-motion/view.tsx
• benchmarks/conformance/cases/116-geometry-morph/tanstack.test.ts
• benchmarks/conformance/cases/116-geometry-morph/tanstack.ts
• benchmarks/conformance/cases/116-geometry-morph/view.tsx
• benchmarks/conformance/cases/117-focus-cursor-motion/tanstack.test.ts
• benchmarks/conformance/cases/117-focus-cursor-motion/tanstack.ts
• benchmarks/conformance/cases/117-focus-cursor-motion/view.tsx
• benchmarks/conformance/cases/118-token-usage-calendar/shell.test.ts
• benchmarks/conformance/cases/118-token-usage-calendar/shell.ts
• benchmarks/conformance/cases/118-token-usage-calendar/shell.tsx
• benchmarks/conformance/cases/118-token-usage-calendar/tanstack.test.ts
• benchmarks/conformance/cases/85-scrollable-resource-lanes/layout.ts
• benchmarks/conformance/cases/85-scrollable-resource-lanes/shell.ts
• benchmarks/conformance/cases/85-scrollable-resource-lanes/tanstack.test.ts
• benchmarks/conformance/cases/85-scrollable-resource-lanes/tanstack.ts
• benchmarks/conformance/cases/85-scrollable-resource-lanes/view.tsx
• benchmarks/conformance/cases/87-echarts-synchronized-cursors/tanstack.test.ts
• benchmarks/conformance/cases/87-echarts-synchronized-cursors/tanstack.ts
• benchmarks/conformance/cases/87-echarts-synchronized-cursors/view.tsx
• benchmarks/conformance/cases/88-echarts-free-cursor/controls.ts
• benchmarks/conformance/cases/88-echarts-free-cursor/format.ts
• benchmarks/conformance/cases/88-echarts-free-cursor/tanstack.test.ts
• benchmarks/conformance/cases/88-echarts-free-cursor/tanstack.ts
• benchmarks/conformance/cases/88-echarts-free-cursor/view.tsx
• benchmarks/conformance/cases/89-brush-range-selection/tanstack.test.ts
• benchmarks/conformance/cases/89-brush-range-selection/tanstack.ts
• benchmarks/conformance/cases/89-brush-range-selection/view.tsx
• benchmarks/conformance/cases/90-zoomable-time-window/tanstack.test.ts
• benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts
• benchmarks/conformance/cases/90-zoomable-time-window/view.tsx
• benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.test.ts
• benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts
• benchmarks/conformance/cases/91-timeline-playback-scrubber/view.tsx
• benchmarks/conformance/cases/92-editable-event-range/controls.ts
• benchmarks/conformance/cases/92-editable-event-range/tanstack.test.ts
• benchmarks/conformance/cases/92-editable-event-range/tanstack.ts
• benchmarks/conformance/cases/92-editable-event-range/view.tsx
• benchmarks/conformance/shared/react-controls.tsx
• examples/conformance/index.html
• examples/conformance/src/main.ts
• examples/conformance/src/main.tsx
• examples/conformance/src/source-view.test.ts
• examples/conformance/src/source-view.ts
• examples/conformance/src/source-view.tsx

---

📝 Walkthrough

Walkthrough

The conformance catalog and 14 chart cases now use React TSX views. Mounting, controls, lifecycle handling, accessibility output, source rendering, and conformance tests were updated for React integration.

Changes

React conformance migration

Layer / File(s)	Summary
Catalog and shared React foundation API-FRICTION.md, benchmarks/conformance/shared/react-controls.tsx, examples/conformance/index.html, examples/conformance/src/*	The catalog application, source view, shared controls, and entrypoint now use React.
Interactive chart case views benchmarks/conformance/cases/85-scrollable-resource-lanes/*, 87-echarts-synchronized-cursors/*, 88-echarts-free-cursor/*, 89-brush-range-selection/*, 90-zoomable-time-window/*, 91-timeline-playback-scrubber/*, 92-editable-event-range/*	Mounting, controls, state handling, drivers, accessibility output, and lifecycle tests moved to React views.
Motion case views benchmarks/conformance/cases/112-motion-entrance/*, 113-motion-updates/*, 114-spring-line-motion/*, 115-definition-motion/*, 116-geometry-morph/*, 117-focus-cursor-motion/*	Motion controls, replay and interruption flows, renderers, drivers, and settling logic moved to React views.
Calendar shell migration benchmarks/conformance/cases/118-token-usage-calendar/*	The calendar shell now uses React mounting, responsive sizing, interaction-state extraction, and conformance-driver operations.

Estimated code review effort: 5 (Critical) | ~120 minutes

Possibly related PRs

• TanStack/charts#44: Both changes modify the token-usage calendar conformance case.
• TanStack/charts#53: Both changes modify the zoomable time-window React view.

Suggested labels: full-conformance

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch taren/react-catalog-examples

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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