Skip to content

✨ feat: implement json-render as resolver#184

Open
jmolivas wants to merge 7 commits into
octahedroid:mainfrom
jmolivas:implement-json-render-as-resolver
Open

✨ feat: implement json-render as resolver#184
jmolivas wants to merge 7 commits into
octahedroid:mainfrom
jmolivas:implement-json-render-as-resolver

Conversation

@jmolivas

@jmolivas jmolivas commented May 28, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR integrates @json-render/core and @json-render/react as the rendering layer across both the Next.js and React Router starters, replacing direct JSX rendering with a data-driven JSON UI spec approach.

What changed

Architecture

A new three-layer pattern is introduced in both starters:

Layer File Role
Spec builder resolvers/resolver.ts Converts Drupal GraphQL data into a typed Spec tree
Catalog resolvers/catalog.ts Defines all components with Zod-validated prop schemas
Registry resolvers/registry.tsx Maps catalog names to React components via defineRegistry
Renderer layout/SpecRenderer.tsx Wraps JSONUIProvider + Renderer"use client" in Next.js

Resolvers refactored

All paragraph resolvers converted from .tsx (returning JSX) to .ts (returning plain data objects), decoupling data resolution from rendering:

  • ParagraphHeroResolver, ParagraphCtaResolver, ParagraphCardGroupResolver
  • ParagraphFaqResolver, ParagraphLogoGroupResolver, ParagraphTestimonialResolver
  • ParagraphViewReferenceResolver, ParagraphWebformResolver
  • NodeArticleResolver (new)

New files

  • integration/layout/SpecRenderer.tsx — shared renderer wrapper (both starters)
  • integration/layout/NodeArticle.tsx / NodePage.tsx — thin layout components replacing the old integration/node/ files
  • components/blocks/ViewReference and Webform — new block components (both starters + Storybook)
  • components/blocks/Heading — new heading block

Removed

  • integration/node/NodeArticle.tsx, NodePage.tsx, TermTags.tsx
  • integration/resolvers/components.tsx (monolith)
  • All .tsx resolver files replaced by .ts equivalents

GraphQL

  • Extracted shared fragments into graphql/fragments/shared.ts
  • Updated TermTagsFragment and view fragments
  • Bumped gql.tada to ^1.9.2

Dependencies

+ "@json-render/core": "^0.19.0"
+ "@json-render/react": "^0.19.0"

Test plan

  • NodePage renders all paragraph types: Hero, CTA, CardGroup, FAQ, LogoGroup, Testimonial, ViewReference, Webform
  • NodeArticle renders article content correctly (title, image, author, tags, body)
  • Header and Footer render on all pages showTitle flag on NodePage correctly shows/hides the heading
  • View reference results render cards with correct links
  • Webform renders and submits successfully
  • Both Next.js and React Router starters work end-to-end
  • Storybook renders the new ViewReference and Webform blocks

@jmolivas jmolivas added the enhancement New feature or request label May 28, 2026
@changeset-bot

changeset-bot Bot commented May 28, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 736310f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

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

Labels

enhancement New feature or request

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

2 participants