feat: Catalog Reference route (native @a2ui/angular) - #129
Conversation
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a custom 11-component dashboard catalog, a code-generation script to bundle source files, and integrates 'Custom Catalog' and 'Catalog Reference' views into the shell routes and sidebar navigation, complete with unit tests. Feedback focuses on improving robustness: clamping negative values to zero in BarChart and PieChart to prevent invalid SVG rendering, and adding a safety guard in DataTable to prevent runtime errors if a row is null or undefined.
bb86b15 to
6d4e210
Compare
|
Addressed the Gemini review:
Rebased onto latest |
|
Went back through the Gemini review comments on this PR and resolved them — all three were already addressed in the current code:
Holding off on rebasing this one until the refactor stack lands, per our chat. |
Enables in-app (no-iframe) rendering of custom catalogs. Pin shell zod to
3.25.76 so app-authored catalog schemas share the exact zod instance the
@a2ui/web_core binder introspects (Angular's own zod 4 stays nested/isolated).
Validated end-to-end: a shell-authored custom Title resolves a {path} binding
via <a2ui-v09-surface>.
Port of the react-flight-catalog dashboard catalog to native @a2ui/angular renderers (Row/Column/Title/Badge/Metric/DashboardCard/FlightCard/DataTable/ Button + hand-rolled SVG PieChart/BarChart), themed via --cpk-* tokens. buildDashboardCatalog() registers all 11 into an AngularCatalog. Surface-render tests green (children, chart shapes, path bindings, action dispatch).
Native /custom-catalog page: renders the Flight Card + Sales Dashboard trees via <a2ui-v09-surface> (no iframe) from the 11-component dashboard catalog, with an editable Monaco data-model panel. Example toggle + data-state tabs (Morning/Afternoon, Q1-Q4); editing the JSON live-updates the surface via updateDataModel. Surfaces are built once per example (createSurface+ updateComponents), so data changes push updateDataModel only. Nav item added to Google's list; shell spec nav counts updated for the new route.
Generated data module (committed) + Node codegen that reads apis.ts, dashboard-catalog.ts, and the 11 renderer files. Wired via yarn generate:catalog-source; generated file + scripts/ excluded from lint and prettier.
…s + source) Per-component reference for the 11-component dashboard catalog: native @a2ui/angular previews, A2UI usage snippets, props tables, plus raw Definitions/Renderers source viewers. Includes a docs-vs-catalog sync test.
…p signal-writing effect in Catalog Reference
The composer-shell spec asserts a hardcoded number of aria-hidden MatIcon elements. This branch adds two nav items and raised the count from 5 to 7; main independently raised it from 5 to 6. The rebase kept one increment, so bump it to 8 to match what renders. Also runs prettier over sources that had never been formatted.
These pages are authored against the shell's --cpk-* design tokens, which are introduced by a separate PR. On their own none of the tokens resolve, so every padding, radius, font and colour collapsed and the page rendered unstyled. Add a small styles/_cpk-fallbacks.scss partial supplying light and dark defaults under --cpk-fb-* names, and reference each token as var(--cpk-x, var(--cpk-fb-x)). The real token always wins where it exists, so nothing here shadows or overrides the theme; the fallbacks apply only in its absence. Dark values are keyed off the existing .dark-theme class via :host-context, so the standalone page themes correctly too. Separately, fix the Catalog Reference preview pane. .ref-detail is a flex column, so its cards were flex items that shrank to fit instead of letting the pane scroll; with overflow: hidden this clipped the live preview to a few pixels. Pin the cards to their content height.
Pinning the cards to their content height stopped the preview being clipped, but exposed the opposite problem: components authored to fill their container -- BarChart and DataTable -- then rendered at full page width, several hundred pixels tall. PieChart was unaffected because its svg is a fixed 160px box. Give the preview a sane box (640x560 max) and let anything larger scroll inside the card. This is a page-layout concern, so the components keep their fill-the-container behaviour for real dashboards.
6d4e210 to
4d7d4dd
Compare
|
Rebased onto current Four things changed beyond the rebase:
Screenshots in the description have been retaken against this branch. Note on ordering: this still looks best merged after the theme layer. The fallbacks are there so it reviews correctly on its own, not to replace the theme. |
1 participant
A per-component reference for the custom A2UI catalog: live native preview, A2UI usage snippet, and props for every component — plus Definitions and Renderers views that show the catalog's own source.
What
/catalog-referenceroute with a component index grouped by category (Layout / Content / Data Display / Interactive).createSurface/updateComponents), and a props table.shell/scripts/generate-catalog-source.mjs.Why
Gives contributors a browsable, always-in-sync reference for what the native catalog offers and exactly how to author each component in A2UI.
Testing
ng build(lint + AOT) green on a clean build;catalog-reference+composer-shellunit tests pass (24 specs).Contributed by CopilotKit.
Screenshots
/catalog-reference— live native preview + A2UI usage + props (PieChart shown):