docs(showcase): dogfood the react-tier authoring loop + golden Renewals page (ADR-0081)#2489
Merged
Conversation
…ls page (ADR-0081) End-to-end proof that the react-tier loop closes: a kind:'react' page authored straight from the generated component contract (react-blocks.md) passes `os validate`, and the same page with a wrong prop is caught. - examples/app-showcase: add renewals-pipeline.page.ts — a Renewals Pipeline scenario exercising five server-connected blocks (ListView, RecordHighlights, ObjectChart, RecordRelatedList, ObjectForm-as-drawer), every prop taken from the contract. Wired into the stack; validates clean; typechecks. - docs/audits/2026-06-react-tier-authoring-dogfood.md: captures the run — clean page → "Validation passed" (exit 0); injecting a missing required objectName on <ObjectChart> + an onSucces typo on <ObjectForm> → prop gate flags the error (exit 1) and the typo warning. Demonstrates generated contract → author reads it → validate enforces it compose into a working loop. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
os-zhuang
added a commit
that referenced
this pull request
Jun 30, 2026
Records the model that the spec↔contract↔conformance↔prop-gate work converged on (now implemented + merged across framework #2478/#2480/#2482/#2484/#2485/#2488/ #2489 and objectui #2113/#2115), so future contributors don't re-litigate it: - the spec zod schema is the protocol source of truth; the AI-facing contract is GENERATED from it (zero-drift), never hand-authored; - registry inputs are the designer palette (a curated subset) — spec-only is a soft signal, frontend-only is the actionable one; - React-interaction props (callbacks/controlled/binding escape-hatches) live in a thin overlay, not the spec; declaring a genuine binding there is how a frontend-only prop is closed (baseline now 0 frontend-only); - conformance is a build-time baseline ratchet (build-console.sh, warn-only), not a per-PR gate — the manifest only exists at console-build time; - authoring correctness is a hard gate at os validate (missing-required = error, typo = warning); and the dogfood golden page proves the chain closes. Captures the alternatives rejected (copy props into spec / per-PR hard gate / hand-authored contract / registry-as-source). Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
End-to-end proof that the react-tier authoring loop closes — the thing the tier was built for: an author (human or AI) writes a
kind:'react'page knowing every component's props from the contract, andos validatecatches them when they don't.Not "the gate has unit tests" — a real run through the real CLI on the real showcase app.
The loop
skills/objectstack-ui/references/react-blocks.md(generated from the spec schemas) lists every injected block and the exact props it accepts.examples/app-showcase/src/pages/renewals-pipeline.page.ts: a Renewals Pipeline scenario exercising five server-connected blocks (ListView,RecordHighlights,ObjectChart,RecordRelatedList,ObjectFormas a drawer), every prop taken straight from the contract.os validatestep 3d (validateReactPageProps, ADR-0081 Phase 2) parses the real JSX and checks usage against the contract.Evidence (in the audit doc)
Authored correctly → passes:
Authored wrong → caught (dropped required
objectNameon<ObjectChart>,onSuccestypo on<ObjectForm>):Changes
renewals-pipeline.page.ts— the golden, validated example page (stays in the showcase).pages/index.ts+objectstack.config.ts— wire it into the stack.docs/audits/2026-06-react-tier-authoring-dogfood.md— the dogfood writeup + captured runs.Validates clean;
tsc --noEmitgreen.🤖 Generated with Claude Code