Skip to content

feat(react): Add React implementations for v0.9 Basic Catalog components and tests#917

Open
jacobsimionato wants to merge 62 commits intogoogle:mainfrom
jacobsimionato:react-basic-catalog
Open

feat(react): Add React implementations for v0.9 Basic Catalog components and tests#917
jacobsimionato wants to merge 62 commits intogoogle:mainfrom
jacobsimionato:react-basic-catalog

Conversation

@jacobsimionato
Copy link
Collaborator

Description of Changes

This PR introduces the React component implementations for the v0.9 Basic Catalog. It leverages the underlying GenericBinder and A2uiSurface (introduced in the previous core logic PR) to provide fully reactive and deeply bound A2UI components for React applications.

Key additions:

  • Basic Catalog Components: Added full support for the standard components specified in the A2UI v0.9 protocol, including:
    • Input/Interactive: ReactTextField, ReactCheckBox, ReactSlider, ReactDateTimeInput, ReactChoicePicker
    • Actions: ReactButton
    • Media/Text: ReactText, ReactImage, ReactIcon, ReactVideo, ReactAudioPlayer
    • Layout/Structure: ReactRow, ReactColumn, ReactList, ReactCard, ReactTabs, ReactDivider, ReactModal
  • Testing Infrastructure:
    • Created a robust testing utility (renderA2uiComponent in tests/utils.tsx) that bootstraps isolated components within a real SurfaceModel and DataModel to simulate actual production environments.
    • Implemented comprehensive integration tests (tests/v0_9/basic_catalog.test.tsx) that verify two-way data binding, action dispatching, validation checking, and correct child delegation via a smart buildChild mock.
  • Reference Gallery: The React demo application (a2ui_explorer) has been updated to include the basic catalog JSON samples for manual testing and visual verification.

Rationale

With the core renderer logic already merged, these component implementations represent the "last mile" of the A2UI React renderer. By strictly implementing the components according to the basic_catalog.json schema and binding them via the GenericBinder, we ensure that any React application can dynamically render A2UI JSON payloads with full interactivity, validation, and layout fidelity out-of-the-box. The testing utility guarantees that these components correctly interface with the framework-agnostic data models.

Testing/Running Instructions

  1. Ensure all dependencies are installed:
    cd renderers/react
    npm install
  2. Run the automated test suite to verify the component bindings and logic:
    npm test
  3. To visually explore the components, start the reference Gallery App:
    npm run demo
    You can navigate through the basic catalog samples in the sidebar and observe the live Data Model and Action Logs as you interact with the components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

1 participant