✨ feat: implement json-render as resolver

.vscode/drupal-decoupled.code-workspace

@@ -20,5 +20,8 @@
       "name": "react-router - starter",
       "path": "../starters/react-router"
     }
-  ]
+  ],
+  "settings": {
+    "js/ts.tsdk.path": "react-router - starter/node_modules/typescript/lib"
+  }
 }

apps/storybook/app/components/blocks/ViewReference/ViewReference.tsx

@@ -0,0 +1,87 @@
+import { CardGroup, Hero } from "~/components/blocks";
+import type { CardGroupProps } from "~/components/blocks/CardGroup/CardGroup";
+import type { ImageProps } from "~/components/primitives";
+
+type ViewReferenceAction = {
+  href: string;
+  text: string;
+  internal?: boolean;
+};
+
+type ViewReferenceCard = {
+  heading: string;
+  summary?: string | null;
+  type: string;
+  details: { href: string; text: string; internal: boolean };
+  image?: ImageProps;
+};
+
+export interface ViewReferenceProps {
+  id: string;
+  view?: string;
+  display?: string;
+  cards: ViewReferenceCard[];
+  headingOptional?: string | null;
+  subheadingOptional?: string | null;
+  descriptionOptional?: string | null;
+  action?: ViewReferenceAction;
+}
+
+export const ViewReference = ({
+  id,
+  view,
+  display,
+  cards,
+  headingOptional,
+  subheadingOptional,
+  descriptionOptional,
+  action,
+}: ViewReferenceProps) => {
+  if (view === "blog" && display === "teaser_featured") {
+    const featured = cards[0];
+    const remainingCards = cards.slice(1);
+
+    return (
+      <div id={id}>
+        <Hero
+          heading={featured.heading}
+          image={featured.image}
+          description={featured.summary ?? ""}
+          actions={[
+            {
+              href: featured.details.href,
+              text: featured.details.text,
+              internal: true,
+            },
+          ]}
+        />
+        {remainingCards.length > 0 && (
+          <CardGroup
+            key={id}
+            heading={headingOptional || ""}
+            subheading={subheadingOptional || ""}
+            description={descriptionOptional || ""}
+            cards={remainingCards as CardGroupProps["cards"]}
+            action={action as CardGroupProps["action"]}
+          />
+        )}
+      </div>
+    );
+  }
+
+  if (view === "blog" && display === "teaser") {
+    return (
+      <CardGroup
+        id={id}
+        key={id}
+        heading={headingOptional || ""}
+        subheading={subheadingOptional || ""}
+        description={descriptionOptional || ""}
+        cards={cards as CardGroupProps["cards"]}
+        action={action as CardGroupProps["action"]}
+      />
+    );
+  }
+
+  return null;
+};

apps/storybook/app/components/blocks/Webform/Webform.tsx

@@ -0,0 +1,45 @@
+import type { FC } from "react";
+
+type FormComponent = FC<{ id: string }>;
+
+export interface WebformProps {
+  formId: string;
+  heading: string;
+  subheading?: string | null;
+  description?: string | null;
+}
+
+export const webformComponents: Record<string, FormComponent> = {};
+
+export const Webform = ({
+  formId,
+  heading,
+  subheading,
+  description,
+}: WebformProps) => {
+  const Form = webformComponents[formId];
+
+  if (!Form) {
+    return null;
+  }
+
+  return (
+    <div className="container mx-auto py-8 md:py-16 lg:py-24">
+      <div>
+        <h2 className="mb-5 text-3xl font-bold sm:text-4xl md:text-5xl">
+          {heading}
+        </h2>
+        {subheading && <h3 className="mb-3 text-xl">{subheading}</h3>}
+        {description && (
+          <p
+            className="text-muted-foreground mb-5 text-lg"
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        )}
+        <div className="py-8 md:py-16 lg:py-24">
+          <Form id={formId} />
+        </div>
+      </div>
+    </div>
+  );
+};

apps/storybook/app/components/blocks/index.ts

@@ -7,4 +7,6 @@ export * from "~/components/blocks/Header/Header";
 export * from "~/components/blocks/Hero/Hero";
 export * from "~/components/blocks/LogoGroup/LogoGroup";
 export * from "~/components/blocks/Testimonial/Testimonial";
+export * from "~/components/blocks/ViewReference/ViewReference";
+export * from "~/components/blocks/Webform/Webform";
 export * from "~/components/primitives/MainLayout/MainLayout";

packages/create-drupal-decoupled/src/frameworks/react-router.ts

@@ -65,6 +65,6 @@ export const reactRouterAdapter: FrameworkAdapter = {
     '  import { drupal } from "drupal-vite";',
     "",
     "  // Add to your plugins array:",
-    '  drupal({ drupalUrl: "DRUPAL_AUTH_URI" })',
+    '  drupal({ drupalUrl: "DRUPAL_URL" })',
   ],
 };

packages/create-drupal-decoupled/src/templates/next/.env.example

@@ -1,10 +1,10 @@
 # Your Drupal site URL. Usually your local DDEV or Lando URL.
 # Example: https://my-project.ddev.site
 # Lando: https://my-project.lndo.site
-DRUPAL_AUTH_URI=https://your-drupal-site.ddev.site
+DRUPAL_URL=https://your-drupal-site.ddev.site
 
 # The GraphQL endpoint. Usually your site URL + /graphql
-DRUPAL_GRAPHQL_URI=https://your-drupal-site.ddev.site/graphql
+DRUPAL_GRAPHQL_URL=https://your-drupal-site.ddev.site/graphql
 
 # OAuth credentials from your Drupal Decoupled app
 DRUPAL_CLIENT_ID=

packages/create-drupal-decoupled/src/templates/next/page.tsx

@@ -17,9 +17,9 @@ const getDrupalData = cache(
     const pathFromParams = params.slug ? `/${params.slug.join("/")}` : "/";
 
     const client = await getClient({
-      url: process.env.DRUPAL_GRAPHQL_URI ?? "",
+      url: process.env.DRUPAL_GRAPHQL_URL ?? "",
       auth: {
-        uri: process.env.DRUPAL_AUTH_URI ?? "",
+        uri: process.env.DRUPAL_URL ?? "",
         clientId: process.env.DRUPAL_CLIENT_ID ?? "",
         clientSecret: process.env.DRUPAL_CLIENT_SECRET ?? "",
       },

packages/create-drupal-decoupled/src/templates/react-router/.env.example

@@ -1,7 +1,7 @@
 # Your Drupal site URL. Usually your local DDEV or Lando URL.
 # Example: https://my-project.ddev.site
 # Lando: https://my-project.lndo.site
-DRUPAL_AUTH_URI=https://your-drupal-site.ddev.site
+DRUPAL_URL=https://your-drupal-site.ddev.site
 
 # OAuth credentials from your Drupal Decoupled app
 DRUPAL_CLIENT_ID=