Skip to content

feat(react): extract reusable React components from inspector#76

Merged
sepehr-safari merged 4 commits into
mainfrom
feat/react-components
Jul 8, 2026
Merged

feat(react): extract reusable React components from inspector#76
sepehr-safari merged 4 commits into
mainfrom
feat/react-components

Conversation

@sepehr-safari

Copy link
Copy Markdown
Member

Summary

Replaces stub objects with real React function components in packages/toolkit/src/react/.

Components

Component Description
SessionTimeline Event list with click-to-select, timestamp/action/direction display
MessageInspector Raw + normalized event fields, payload and raw JSON pretty-printed
FailureSummary Severity badges (critical/warning/info), descriptions, suggested steps
ReportViewer Iframe with srcDoc for HTML report rendering (no XSS risk)
ReplayControls Play/pause/step/scrubbar with speed selector (0.5x–5x)

Design

  • All components use inline styles (no CSS framework dependency)
  • SSR-safe (no window/document at module level)
  • TypeScript prop types exported from types.ts
  • Presentational only — no app-specific dependencies
  • Added DOM and DOM.Iterable to toolkit tsconfig.json lib for React event types

Verification

  • pnpm test — 295/295 tests pass
  • pnpm build — clean (toolkit + web)
  • pnpm lint — clean
  • pnpm typecheck — clean
  • pnpm format:check — clean

Closes #63

Replace stub objects with real React function components:
- SessionTimeline: event list with click-to-select, timestamp/action/direction
- MessageInspector: raw + normalized event fields, payload and raw JSON
- FailureSummary: severity badges, descriptions, suggested steps
- ReportViewer: iframe with srcdoc for HTML report rendering (no XSS)
- ReplayControls: play/pause/step/scrubbar with speed selector

All components use inline styles (no CSS framework dependency).
SSR-safe (no window/document at module level). TypeScript prop types
exported from types.ts. Added DOM lib to tsconfig for React event types.

Closes #63
@vercel

vercel Bot commented Jul 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ocpp-debugkit-web Ready Ready Preview, Comment Jul 8, 2026 6:57pm

Playwright strict mode violation: getByText('FAILED_AUTHORIZATION')
resolved to 4 elements (textarea trace JSON + 3 failure badges).
Add data-testid='failure-summary' to the failures section div and scope
the locator to it.
@sepehr-safari sepehr-safari merged commit 44553e5 into main Jul 8, 2026
4 checks passed
@sepehr-safari sepehr-safari deleted the feat/react-components branch July 8, 2026 18:59
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.

feat(react): extract reusable React components from inspector

1 participant