From 03a00a24d5f336589907058b8afd2aa84cc479c8 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 26 Jul 2022 18:00:59 -0400
Subject: [PATCH 01/40] GET

---
 WEBFORMS.md                                   | 16 ++++++
 .../components/node--article.tsx              | 50 ++++++++++++++++++-
 starters/basic-starter/pages/[...slug].tsx    | 37 +++++++++++++-
 3 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 WEBFORMS.md

diff --git a/WEBFORMS.md b/WEBFORMS.md
new file mode 100644
index 00000000..82d386b1
--- /dev/null
+++ b/WEBFORMS.md
@@ -0,0 +1,16 @@
+How to set up Webform REST on ACMS
+
+1. Download the Webform and Webform REST modules
+<br></br>
+2. Enable REST resources "Webform Submit", "Webform Elements", "Webform Submission" on /admin/config/services/rest
+<br></br>
+3. Set permissions `/admin/people/permissions#module-rest` for RESTful Web Services and check Anonymous User for the Webform related permissions to avoid dealing with auth/headers for now.
+<br></br>
+4. Create a new webform if you have not already `/admin/structure/webform`
+<br></br>
+5. Go to article content type and create a webform field on `/admin/structure/types/manage/article/fields`
+<br></br>
+6. Add a webform to one of the article nodes.
+<br></br>
+7. Now you should be able to make requests to the API. ex) GET`/webform_rest/{webform_id}/fields?_format=json`
+
diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 7505acc5..ca55f707 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,13 +3,61 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
+import React, { useState } from 'react';
+// import { submitForm } from '../pages/[...slug]';
 
-export function NodeArticle({ node, ...props }) {
+const initialValues = {
+  name: '',
+  email: '',
+  subject: '',
+  message: '',
+};
+
+export function NodeArticle({ node, additionalContent, ...props }) {
+  const [values, setValues] = useState(initialValues);
+
+  function handleInputChange(
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>,
+  ) {
+    const { name, value } = e.target;
+    setValues({
+      ...values,
+      [name]: value,
+    });
+    console.log(e.target);
+  }
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
         {node.title}
       </h1>
+      <h2>Contact</h2>
+      <input
+        placeholder={additionalContent.webform.name['#title']}
+        name={additionalContent.webform.name['#webform_key']}
+        onChange={handleInputChange}
+      />
+      <input
+        placeholder={additionalContent.webform.email['#title']}
+        name={additionalContent.webform.email['#webform_key']}
+        onChange={handleInputChange}
+      />
+      <input
+        placeholder={additionalContent.webform.subject['#title']}
+        name={additionalContent.webform.subject['#webform_key']}
+        onChange={handleInputChange}
+      />
+      <textarea
+        placeholder={additionalContent.webform.message['#title']}
+        name={additionalContent.webform.message['#webform_key']}
+        onChange={handleInputChange}
+      />
+      {/*<button type="submit" onClick={() => submitForm(values)}>*/}
+      {/*  {additionalContent.webform.actions['#submit__label']}*/}
+      {/*</button>*/}
+      {console.log(additionalContent)}
       <p className="mb-4 text-gray-600">
         {node.field_display_author?.title ? (
           <span>
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 5fb58b0c..29682bb0 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -49,7 +49,10 @@ export default function EntityPage({
         <NodeBasicPage node={entity as DrupalNode} />
       )}
       {entity.type === 'node--article' && (
-        <NodeArticle node={entity as DrupalNode} />
+        <NodeArticle
+          node={entity as DrupalNode}
+          additionalContent={additionalContent as { webform: any }}
+        />
       )}
       {entity.type === 'node--event' && (
         <NodeEvent node={entity as DrupalNode} />
@@ -102,6 +105,7 @@ export async function getStaticPaths(): Promise<GetStaticPathsResult> {
 export async function getStaticProps(
   context,
 ): Promise<GetStaticPropsResult<EntityPageProps>> {
+  console.log(await getForm());
   // Find a matching path from Drupal from context.
   const path = await drupal.translatePathFromContext(context);
 
@@ -142,7 +146,9 @@ export async function getStaticProps(
       'field_article_media.image',
       'field_article_image.image',
       'field_display_author',
+      'field_webform',
     ]);
+    additionalContent['webform'] = await getForm();
   }
 
   if (type === 'node--event') {
@@ -245,3 +251,32 @@ export async function getStaticProps(
     revalidate: 60,
   };
 }
+
+async function getForm() {
+  const baseUrl = drupal.baseUrl;
+  const path = '/webform_rest/contact/fields?_format=json';
+  console.log(`${baseUrl}${path}`);
+  const response = await drupal.fetch(`${baseUrl}${path}`, {
+    method: 'GET',
+  });
+  return response.json();
+}
+
+async function submitForm(values) {
+  console.log(drupal.baseUrl);
+  // const baseUrl = await drupal.baseUrl;
+  const path = '/webform_rest/submit';
+  const body = {
+    webform_id: 'contact',
+    name: values['name'],
+    email: values['email'],
+    subject: values['subject'],
+    message: values['message'],
+  };
+  // console.log(`${baseUrl}${path}`);
+  // const response = await drupal.fetch(`${baseUrl}${path}`, {
+  //   method: 'POST',
+  //   body: JSON.stringify(body),
+  // });
+  // console.log(response.json());
+}

From 65892b505c38238caf56b9ba66b57d5ec85294f0 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 26 Jul 2022 18:49:34 -0400
Subject: [PATCH 02/40] added submit method with POST but client not working

---
 WEBFORMS.md                                   | 32 +++++++++++--------
 .../components/node--article.tsx              | 30 ++++++++++++++---
 starters/basic-starter/pages/[...slug].tsx    | 24 ++------------
 3 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/WEBFORMS.md b/WEBFORMS.md
index 82d386b1..b1be380b 100644
--- a/WEBFORMS.md
+++ b/WEBFORMS.md
@@ -1,16 +1,22 @@
 How to set up Webform REST on ACMS
 
-1. Download the Webform and Webform REST modules
-<br></br>
-2. Enable REST resources "Webform Submit", "Webform Elements", "Webform Submission" on /admin/config/services/rest
-<br></br>
-3. Set permissions `/admin/people/permissions#module-rest` for RESTful Web Services and check Anonymous User for the Webform related permissions to avoid dealing with auth/headers for now.
-<br></br>
-4. Create a new webform if you have not already `/admin/structure/webform`
-<br></br>
-5. Go to article content type and create a webform field on `/admin/structure/types/manage/article/fields`
-<br></br>
-6. Add a webform to one of the article nodes.
-<br></br>
-7. Now you should be able to make requests to the API. ex) GET`/webform_rest/{webform_id}/fields?_format=json`
+1.Download the Webform and Webform REST modules
+
+2.Enable REST resources "Webform Submit", "Webform Elements", "Webform Submission" on `/admin/config/services/rest`
+
+3.Set permissions `/admin/people/permissions#module-rest` for RESTful Web Services and check Anonymous User for the Webform related permissions to avoid dealing with auth/headers for now.
+
+4.Create a new webform if you have not already `/admin/structure/webform`
+
+5.Code is currently hardcoded to render the basic email contact webform on the page which I think should already be pre-made as an example
+on `/admin/structure/types/manage/article/fields`. 
+In case it's not, create a webform where
+- webform_id should be 'contact'
+- there should be a name field, email field, subject field, and message field.
+
+6.Add a webform to one of the article nodes.
+
+7.Visit the article node on the headless site.
+
+8.Now you should be able to make requests to the API too. ex) GET`/webform_rest/{webform_id}/fields?_format=json`
 
diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index ca55f707..3bfc5f04 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -4,7 +4,7 @@ import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 import React, { useState } from 'react';
-// import { submitForm } from '../pages/[...slug]';
+import { drupal } from '../lib/drupal';
 
 const initialValues = {
   name: '',
@@ -28,6 +28,27 @@ export function NodeArticle({ node, additionalContent, ...props }) {
     });
     console.log(e.target);
   }
+
+  // Commenting this function out will make page render
+  async function submitForm() {
+    const baseUrl = await drupal.baseUrl;
+    const path = '/webform_rest/submit?_format=json';
+    const body = {
+      webform_id: 'contact',
+      name: values['name'],
+      email: values['email'],
+      subject: values['subject'],
+      message: values['message'],
+    };
+    const response = await drupal.fetch(`${baseUrl}${path}`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    console.log(response.json());
+  }
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
@@ -54,10 +75,9 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         name={additionalContent.webform.message['#webform_key']}
         onChange={handleInputChange}
       />
-      {/*<button type="submit" onClick={() => submitForm(values)}>*/}
-      {/*  {additionalContent.webform.actions['#submit__label']}*/}
-      {/*</button>*/}
-      {console.log(additionalContent)}
+      <button type="submit" onClick={() => submitForm()}>
+        {additionalContent.webform.actions['#submit__label']}
+      </button>
       <p className="mb-4 text-gray-600">
         {node.field_display_author?.title ? (
           <span>
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 29682bb0..d07bc9e1 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -2,7 +2,7 @@
 // It is the entry point for handling entity routes from Drupal.
 import * as React from 'react';
 import { GetStaticPathsResult, GetStaticPropsResult } from 'next';
-import { DrupalNode, DrupalTaxonomyTerm } from 'next-drupal';
+import { DrupalClient, DrupalNode, DrupalTaxonomyTerm } from 'next-drupal';
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 
 import { getMenus } from 'lib/get-menus';
@@ -105,7 +105,7 @@ export async function getStaticPaths(): Promise<GetStaticPathsResult> {
 export async function getStaticProps(
   context,
 ): Promise<GetStaticPropsResult<EntityPageProps>> {
-  console.log(await getForm());
+  // console.log(await getForm());
   // Find a matching path from Drupal from context.
   const path = await drupal.translatePathFromContext(context);
 
@@ -255,28 +255,8 @@ export async function getStaticProps(
 async function getForm() {
   const baseUrl = drupal.baseUrl;
   const path = '/webform_rest/contact/fields?_format=json';
-  console.log(`${baseUrl}${path}`);
   const response = await drupal.fetch(`${baseUrl}${path}`, {
     method: 'GET',
   });
   return response.json();
 }
-
-async function submitForm(values) {
-  console.log(drupal.baseUrl);
-  // const baseUrl = await drupal.baseUrl;
-  const path = '/webform_rest/submit';
-  const body = {
-    webform_id: 'contact',
-    name: values['name'],
-    email: values['email'],
-    subject: values['subject'],
-    message: values['message'],
-  };
-  // console.log(`${baseUrl}${path}`);
-  // const response = await drupal.fetch(`${baseUrl}${path}`, {
-  //   method: 'POST',
-  //   body: JSON.stringify(body),
-  // });
-  // console.log(response.json());
-}

From 2427a9ee6534cb43f056a68425113e1d7ff5042b Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 27 Jul 2022 15:45:08 -0400
Subject: [PATCH 03/40] working submit and removed markdown

---
 WEBFORMS.md                                   | 22 -----
 .../components/node--article.tsx              | 95 +++++++------------
 starters/basic-starter/pages/[...slug].tsx    |  5 +-
 .../basic-starter/pages/api/submit-form.tsx   | 37 ++++++++
 4 files changed, 73 insertions(+), 86 deletions(-)
 delete mode 100644 WEBFORMS.md
 create mode 100644 starters/basic-starter/pages/api/submit-form.tsx

diff --git a/WEBFORMS.md b/WEBFORMS.md
deleted file mode 100644
index b1be380b..00000000
--- a/WEBFORMS.md
+++ /dev/null
@@ -1,22 +0,0 @@
-How to set up Webform REST on ACMS
-
-1.Download the Webform and Webform REST modules
-
-2.Enable REST resources "Webform Submit", "Webform Elements", "Webform Submission" on `/admin/config/services/rest`
-
-3.Set permissions `/admin/people/permissions#module-rest` for RESTful Web Services and check Anonymous User for the Webform related permissions to avoid dealing with auth/headers for now.
-
-4.Create a new webform if you have not already `/admin/structure/webform`
-
-5.Code is currently hardcoded to render the basic email contact webform on the page which I think should already be pre-made as an example
-on `/admin/structure/types/manage/article/fields`. 
-In case it's not, create a webform where
-- webform_id should be 'contact'
-- there should be a name field, email field, subject field, and message field.
-
-6.Add a webform to one of the article nodes.
-
-7.Visit the article node on the headless site.
-
-8.Now you should be able to make requests to the API too. ex) GET`/webform_rest/{webform_id}/fields?_format=json`
-
diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 3bfc5f04..02bc9029 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,51 +3,26 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import React, { useState } from 'react';
-import { drupal } from '../lib/drupal';
-
-const initialValues = {
-  name: '',
-  email: '',
-  subject: '',
-  message: '',
-};
 
 export function NodeArticle({ node, additionalContent, ...props }) {
-  const [values, setValues] = useState(initialValues);
-
-  function handleInputChange(
-    e:
-      | React.ChangeEvent<HTMLInputElement>
-      | React.ChangeEvent<HTMLTextAreaElement>,
-  ) {
-    const { name, value } = e.target;
-    setValues({
-      ...values,
-      [name]: value,
-    });
-    console.log(e.target);
-  }
-
-  // Commenting this function out will make page render
-  async function submitForm() {
-    const baseUrl = await drupal.baseUrl;
-    const path = '/webform_rest/submit?_format=json';
-    const body = {
-      webform_id: 'contact',
-      name: values['name'],
-      email: values['email'],
-      subject: values['subject'],
-      message: values['message'],
-    };
-    const response = await drupal.fetch(`${baseUrl}${path}`, {
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const response = await fetch('/api/submit-form', {
       method: 'POST',
-      body: JSON.stringify(body),
+      body: JSON.stringify({
+        name: event.target.name.value,
+        email: event.target.email.value,
+        subject: event.target.subject.value,
+        message: event.target.message.value,
+      }),
       headers: {
         'Content-Type': 'application/json',
       },
     });
-    console.log(response.json());
+    if (response.ok) {
+      // Show success.
+    }
+    // Handle error.
   }
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
@@ -55,29 +30,27 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         {node.title}
       </h1>
       <h2>Contact</h2>
-      <input
-        placeholder={additionalContent.webform.name['#title']}
-        name={additionalContent.webform.name['#webform_key']}
-        onChange={handleInputChange}
-      />
-      <input
-        placeholder={additionalContent.webform.email['#title']}
-        name={additionalContent.webform.email['#webform_key']}
-        onChange={handleInputChange}
-      />
-      <input
-        placeholder={additionalContent.webform.subject['#title']}
-        name={additionalContent.webform.subject['#webform_key']}
-        onChange={handleInputChange}
-      />
-      <textarea
-        placeholder={additionalContent.webform.message['#title']}
-        name={additionalContent.webform.message['#webform_key']}
-        onChange={handleInputChange}
-      />
-      <button type="submit" onClick={() => submitForm()}>
-        {additionalContent.webform.actions['#submit__label']}
-      </button>
+      <form onSubmit={handleSubmit}>
+        <input
+          placeholder={additionalContent.webform.name['#title']}
+          name={additionalContent.webform.name['#webform_key']}
+        />
+        <input
+          placeholder={additionalContent.webform.email['#title']}
+          name={additionalContent.webform.email['#webform_key']}
+        />
+        <input
+          placeholder={additionalContent.webform.subject['#title']}
+          name={additionalContent.webform.subject['#webform_key']}
+        />
+        <textarea
+          placeholder={additionalContent.webform.message['#title']}
+          name={additionalContent.webform.message['#webform_key']}
+        />
+        <button type="submit">
+          {additionalContent.webform.actions['#submit__label']}
+        </button>
+      </form>
       <p className="mb-4 text-gray-600">
         {node.field_display_author?.title ? (
           <span>
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index d07bc9e1..f05d401e 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -2,7 +2,7 @@
 // It is the entry point for handling entity routes from Drupal.
 import * as React from 'react';
 import { GetStaticPathsResult, GetStaticPropsResult } from 'next';
-import { DrupalClient, DrupalNode, DrupalTaxonomyTerm } from 'next-drupal';
+import { DrupalNode, DrupalTaxonomyTerm } from 'next-drupal';
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 
 import { getMenus } from 'lib/get-menus';
@@ -253,9 +253,8 @@ export async function getStaticProps(
 }
 
 async function getForm() {
-  const baseUrl = drupal.baseUrl;
   const path = '/webform_rest/contact/fields?_format=json';
-  const response = await drupal.fetch(`${baseUrl}${path}`, {
+  const response = await fetch(`${drupal.baseUrl}${path}`, {
     method: 'GET',
   });
   return response.json();
diff --git a/starters/basic-starter/pages/api/submit-form.tsx b/starters/basic-starter/pages/api/submit-form.tsx
new file mode 100644
index 00000000..2919f07c
--- /dev/null
+++ b/starters/basic-starter/pages/api/submit-form.tsx
@@ -0,0 +1,37 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { drupal } from '../../lib/drupal';
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse,
+) {
+  try {
+    if (request.method === 'POST') {
+      const url = drupal.buildUrl('/webform_rest/submit?_format=json');
+      console.log('received body', request.body);
+      // Submit to Drupal.
+      const result = await fetch(url.toString(), {
+        method: 'POST',
+        body: JSON.stringify({
+          webform_id: 'contact',
+          name: request.body.name,
+          email: request.body.email,
+          subject: request.body.subject,
+          message: request.body.message,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!result.ok) {
+        console.error(result.json());
+        throw new Error();
+      }
+
+      response.status(200).end();
+    }
+  } catch (error) {
+    return response.status(400).json(error.message);
+  }
+}

From 756c24cb612ce020246bfd2172ca32b11ea35d1c Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 27 Jul 2022 17:50:39 -0400
Subject: [PATCH 04/40] added start of dynamic form element rendering

---
 .../components/node--article.tsx              | 56 ++++++++++++-------
 starters/basic-starter/pages/[...slug].tsx    | 15 +++--
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 02bc9029..d3157f50 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -4,6 +4,36 @@ import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 
+function renderWebformElement(el) {
+  switch (el['#type']) {
+    case 'textfield':
+    case 'tel':
+    case 'number':
+    case 'email':
+    case 'hidden':
+      return <input placeholder={el['#title']} name={el['#webform_key']} />;
+    case 'textarea':
+      return <textarea placeholder={el['#title']} name={el['#webform_key']} />;
+    case 'checkbox':
+      return <input type="checkbox" />;
+    case 'radio':
+      return <input type="radio" />;
+    case 'checkboxes':
+      return <input type="checkbox" />;
+    case 'radios':
+      return '';
+    case 'select':
+      return '';
+    case 'webform_markup':
+    case 'processed_text':
+      return '';
+    case 'webform_actions':
+      return <button type="submit">{el['#submit__label']}</button>;
+    default:
+      return;
+  }
+}
+
 export function NodeArticle({ node, additionalContent, ...props }) {
   async function handleSubmit(event) {
     event.preventDefault();
@@ -29,27 +59,13 @@ export function NodeArticle({ node, additionalContent, ...props }) {
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
         {node.title}
       </h1>
-      <h2>Contact</h2>
       <form onSubmit={handleSubmit}>
-        <input
-          placeholder={additionalContent.webform.name['#title']}
-          name={additionalContent.webform.name['#webform_key']}
-        />
-        <input
-          placeholder={additionalContent.webform.email['#title']}
-          name={additionalContent.webform.email['#webform_key']}
-        />
-        <input
-          placeholder={additionalContent.webform.subject['#title']}
-          name={additionalContent.webform.subject['#webform_key']}
-        />
-        <textarea
-          placeholder={additionalContent.webform.message['#title']}
-          name={additionalContent.webform.message['#webform_key']}
-        />
-        <button type="submit">
-          {additionalContent.webform.actions['#submit__label']}
-        </button>
+        {additionalContent.webform
+          ? Object.values(additionalContent.webform).map((item, index) => {
+              console.log('item', item);
+              return renderWebformElement(item);
+            })
+          : null}
       </form>
       <p className="mb-4 text-gray-600">
         {node.field_display_author?.title ? (
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index f05d401e..73f85445 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -35,6 +35,7 @@ interface EntityPageProps extends LayoutProps {
   entity: DrupalNode | DrupalTaxonomyTerm;
   additionalContent?: {
     nodes?: DrupalNode[];
+    webform?: object;
   };
 }
 
@@ -51,7 +52,7 @@ export default function EntityPage({
       {entity.type === 'node--article' && (
         <NodeArticle
           node={entity as DrupalNode}
-          additionalContent={additionalContent as { webform: any }}
+          additionalContent={additionalContent as { webform: object }}
         />
       )}
       {entity.type === 'node--event' && (
@@ -105,7 +106,6 @@ export async function getStaticPaths(): Promise<GetStaticPathsResult> {
 export async function getStaticProps(
   context,
 ): Promise<GetStaticPropsResult<EntityPageProps>> {
-  // console.log(await getForm());
   // Find a matching path from Drupal from context.
   const path = await drupal.translatePathFromContext(context);
 
@@ -148,7 +148,6 @@ export async function getStaticProps(
       'field_display_author',
       'field_webform',
     ]);
-    additionalContent['webform'] = await getForm();
   }
 
   if (type === 'node--event') {
@@ -187,6 +186,12 @@ export async function getStaticProps(
     };
   }
 
+  if (entity.field_webform) {
+    // @todo: account for multiple webforms
+    const webform_id = entity.field_webform['drupal_internal__id'];
+    additionalContent['webform'] = await getWebform(webform_id);
+  }
+
   // Fetch additional content for rendering taxonomy term pages.
   if (type === 'taxonomy_term--person_type') {
     additionalContent['nodes'] = await drupal.getResourceCollectionFromContext<
@@ -252,8 +257,8 @@ export async function getStaticProps(
   };
 }
 
-async function getForm() {
-  const path = '/webform_rest/contact/fields?_format=json';
+async function getWebform(id) {
+  const path = `/webform_rest/${id}/fields?_format=json`;
   const response = await fetch(`${drupal.baseUrl}${path}`, {
     method: 'GET',
   });

From 19b5993ba09b280770e11de9bf37dcc20f971f67 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 28 Jul 2022 13:54:18 -0400
Subject: [PATCH 05/40] support multiple forms on one node

---
 .../components/node--article.tsx              | 20 +++++++++++--------
 starters/basic-starter/pages/[...slug].tsx    | 20 +++++++++++++++----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index d3157f50..3eb6a655 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -5,6 +5,7 @@ import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 
 function renderWebformElement(el) {
+  console.log('el', el);
   switch (el['#type']) {
     case 'textfield':
     case 'tel':
@@ -35,6 +36,7 @@ function renderWebformElement(el) {
 }
 
 export function NodeArticle({ node, additionalContent, ...props }) {
+  console.log('additionalContent', additionalContent);
   async function handleSubmit(event) {
     event.preventDefault();
     const response = await fetch('/api/submit-form', {
@@ -59,14 +61,16 @@ export function NodeArticle({ node, additionalContent, ...props }) {
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
         {node.title}
       </h1>
-      <form onSubmit={handleSubmit}>
-        {additionalContent.webform
-          ? Object.values(additionalContent.webform).map((item, index) => {
-              console.log('item', item);
-              return renderWebformElement(item);
-            })
-          : null}
-      </form>
+      {/*<form onSubmit={handleSubmit}>*/}
+      {additionalContent.webform
+        ? Object.values(additionalContent.webform).map((form) => {
+            return (
+              <form key="" onSubmit={handleSubmit}>
+                {Object.values(form).map((el) => renderWebformElement(el))};
+              </form>
+            );
+          })
+        : null}
       <p className="mb-4 text-gray-600">
         {node.field_display_author?.title ? (
           <span>
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 73f85445..62554ec5 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -147,6 +147,7 @@ export async function getStaticProps(
       'field_article_image.image',
       'field_display_author',
       'field_webform',
+      'field_webform2',
     ]);
   }
 
@@ -186,10 +187,21 @@ export async function getStaticProps(
     };
   }
 
-  if (entity.field_webform) {
-    // @todo: account for multiple webforms
-    const webform_id = entity.field_webform['drupal_internal__id'];
-    additionalContent['webform'] = await getWebform(webform_id);
+  // Check if the entity has webform(s).
+  if (entity.field_webform2) {
+    const arr = [];
+    if (Array.isArray(entity.field_webform2)) {
+      for (const form of entity.field_webform2) {
+        const webform_id = form['drupal_internal__id'];
+        arr.push(await getWebform(webform_id));
+      }
+    } else {
+      console.log('webform 1', entity.field_webform);
+      console.log('webform 2', entity.field_webform2);
+      const webform_id = entity.field_webform2['drupal_internal__id'];
+      arr.push(await getWebform(webform_id));
+    }
+    additionalContent['webform'] = arr;
   }
 
   // Fetch additional content for rendering taxonomy term pages.

From 62d5a25fba839bc15f883f2e5d7f1c6c3a6c4ab1 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 28 Jul 2022 15:30:49 -0400
Subject: [PATCH 06/40] dynamically pass in webform_id

---
 .../components/node--article.tsx              | 69 ++++++++++++++++---
 starters/basic-starter/pages/[...slug].tsx    |  8 ++-
 .../basic-starter/pages/api/submit-form.tsx   | 12 +---
 3 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 3eb6a655..186f647e 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -12,17 +12,59 @@ function renderWebformElement(el) {
     case 'number':
     case 'email':
     case 'hidden':
-      return <input placeholder={el['#title']} name={el['#webform_key']} />;
+      return (
+        <input
+          placeholder={el['#title']}
+          id={el['#webform_key']}
+          name={el['#webform_key']}
+        />
+      );
     case 'textarea':
-      return <textarea placeholder={el['#title']} name={el['#webform_key']} />;
+      return (
+        <textarea
+          placeholder={el['#title']}
+          id={el['#webform_key']}
+          name={el['#webform_key']}
+        />
+      );
     case 'checkbox':
-      return <input type="checkbox" />;
+      return (
+        <input
+          type="checkbox"
+          id={el['#webform_key']}
+          name={el['#webform_key']}
+        />
+      );
     case 'radio':
-      return <input type="radio" />;
+      return (
+        <input type="radio" id={el['#webform_key']} name={el['#webform_key']} />
+      );
     case 'checkboxes':
-      return <input type="checkbox" />;
+      return (
+        <input
+          type="checkbox"
+          id={el['#webform_key']}
+          name={el['#webform_key']}
+        />
+      );
     case 'radios':
-      return '';
+      console.log(el['#options']);
+      return (
+        el['#options'] &&
+        Object.keys(el['#options']).map((option) => (
+          <div className="form-check" key={option}>
+            {/** Input for this option. */}
+            <input
+              type="radio"
+              // id={getOptionId(el.name, option.value)}
+              value={option}
+              // defaultChecked={defaultValue === option.value}
+            />
+            {/** Label for this option. */}
+            <label className="form-check-label">{option}</label>
+          </div>
+        ))
+      );
     case 'select':
       return '';
     case 'webform_markup':
@@ -37,11 +79,13 @@ function renderWebformElement(el) {
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   console.log('additionalContent', additionalContent);
-  async function handleSubmit(event) {
+  async function handleSubmit(event, webform_id) {
+    console.log('event', event);
     event.preventDefault();
     const response = await fetch('/api/submit-form', {
       method: 'POST',
       body: JSON.stringify({
+        webform_id,
         name: event.target.name.value,
         email: event.target.email.value,
         subject: event.target.subject.value,
@@ -61,12 +105,15 @@ export function NodeArticle({ node, additionalContent, ...props }) {
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
         {node.title}
       </h1>
-      {/*<form onSubmit={handleSubmit}>*/}
+      {console.log(Object.keys(additionalContent.webform))}
       {additionalContent.webform
-        ? Object.values(additionalContent.webform).map((form) => {
+        ? Object.keys(additionalContent.webform).map((key) => {
             return (
-              <form key="" onSubmit={handleSubmit}>
-                {Object.values(form).map((el) => renderWebformElement(el))};
+              <form key="" onSubmit={(e) => handleSubmit(e, key)}>
+                {Object.values(additionalContent.webform[key]).map((el) =>
+                  renderWebformElement(el),
+                )}
+                ;
               </form>
             );
           })
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 62554ec5..eb216576 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -188,18 +188,20 @@ export async function getStaticProps(
   }
 
   // Check if the entity has webform(s).
+  // @todo: Figure out how to dynamically get webform field.
   if (entity.field_webform2) {
-    const arr = [];
+    additionalContent['webform'] = [];
+    const arr = {};
     if (Array.isArray(entity.field_webform2)) {
       for (const form of entity.field_webform2) {
         const webform_id = form['drupal_internal__id'];
-        arr.push(await getWebform(webform_id));
+        arr[webform_id] = await getWebform(webform_id);
       }
     } else {
       console.log('webform 1', entity.field_webform);
       console.log('webform 2', entity.field_webform2);
       const webform_id = entity.field_webform2['drupal_internal__id'];
-      arr.push(await getWebform(webform_id));
+      arr[webform_id] = await getWebform(webform_id);
     }
     additionalContent['webform'] = arr;
   }
diff --git a/starters/basic-starter/pages/api/submit-form.tsx b/starters/basic-starter/pages/api/submit-form.tsx
index 2919f07c..027f3ebf 100644
--- a/starters/basic-starter/pages/api/submit-form.tsx
+++ b/starters/basic-starter/pages/api/submit-form.tsx
@@ -7,25 +7,19 @@ export default async function handler(
 ) {
   try {
     if (request.method === 'POST') {
-      const url = drupal.buildUrl('/webform_rest/submit?_format=json');
+      const url = drupal.buildUrl('/webform_est/submit?_format=json');
       console.log('received body', request.body);
       // Submit to Drupal.
       const result = await fetch(url.toString(), {
         method: 'POST',
-        body: JSON.stringify({
-          webform_id: 'contact',
-          name: request.body.name,
-          email: request.body.email,
-          subject: request.body.subject,
-          message: request.body.message,
-        }),
+        body: JSON.stringify(request.body),
         headers: {
           'Content-Type': 'application/json',
         },
       });
 
       if (!result.ok) {
-        console.error(result.json());
+        console.log(result.json());
         throw new Error();
       }
 

From 1c512f4873f851ca115641889426481a7e3b77af Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 28 Jul 2022 15:59:37 -0400
Subject: [PATCH 07/40] dynamically build body request

---
 .../basic-starter/components/node--article.tsx   | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 186f647e..60041151 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -80,17 +80,16 @@ function renderWebformElement(el) {
 export function NodeArticle({ node, additionalContent, ...props }) {
   console.log('additionalContent', additionalContent);
   async function handleSubmit(event, webform_id) {
-    console.log('event', event);
+    const body = {};
+    body['webform_id'] = webform_id;
+    for (const el of event.target) {
+      body[el.id] = el.value;
+    }
     event.preventDefault();
+    console.log(body);
     const response = await fetch('/api/submit-form', {
       method: 'POST',
-      body: JSON.stringify({
-        webform_id,
-        name: event.target.name.value,
-        email: event.target.email.value,
-        subject: event.target.subject.value,
-        message: event.target.message.value,
-      }),
+      body: JSON.stringify(body),
       headers: {
         'Content-Type': 'application/json',
       },
@@ -105,7 +104,6 @@ export function NodeArticle({ node, additionalContent, ...props }) {
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
         {node.title}
       </h1>
-      {console.log(Object.keys(additionalContent.webform))}
       {additionalContent.webform
         ? Object.keys(additionalContent.webform).map((key) => {
             return (

From d5080230c0137edda31c09b3d837181f139aae0f Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 28 Jul 2022 19:03:43 -0400
Subject: [PATCH 08/40] started checkboxes/radio for POST

---
 .../components/node--article.tsx              | 82 ++++++++++++++-----
 .../basic-starter/pages/api/submit-form.tsx   |  2 +-
 2 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 60041151..dfcb3798 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -4,8 +4,20 @@ import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 
+const styles = {
+  btn: {
+    backgroundColor: 'rgb(14 165 233)',
+    color: 'white',
+    border: 'none',
+    padding: '12px 16px',
+    textDecoration: 'none',
+    display: 'inlineBlock',
+    fontSize: '16px',
+    borderRadius: '8px',
+  },
+};
+
 function renderWebformElement(el) {
-  console.log('el', el);
   switch (el['#type']) {
     case 'textfield':
     case 'tel':
@@ -29,11 +41,14 @@ function renderWebformElement(el) {
       );
     case 'checkbox':
       return (
-        <input
-          type="checkbox"
-          id={el['#webform_key']}
-          name={el['#webform_key']}
-        />
+        <div>
+          <input
+            type="checkbox"
+            id={el['#webform_key']}
+            name={el['#webform_key']}
+          />
+          <label className="form-check-label">{el['#description']}</label>
+        </div>
       );
     case 'radio':
       return (
@@ -41,11 +56,20 @@ function renderWebformElement(el) {
       );
     case 'checkboxes':
       return (
-        <input
-          type="checkbox"
-          id={el['#webform_key']}
-          name={el['#webform_key']}
-        />
+        <div id={el['#webform_key']}>
+          {el['#options'] &&
+            Object.keys(el['#options']).map((option) => (
+              <>
+                <input
+                  type="checkbox"
+                  name={el['#webform_key']}
+                  id={option}
+                  value={option}
+                />
+                <label className="form-check-label">{option}</label>
+              </>
+            ))}
+        </div>
       );
     case 'radios':
       console.log(el['#options']);
@@ -53,14 +77,12 @@ function renderWebformElement(el) {
         el['#options'] &&
         Object.keys(el['#options']).map((option) => (
           <div className="form-check" key={option}>
-            {/** Input for this option. */}
             <input
               type="radio"
-              // id={getOptionId(el.name, option.value)}
+              name={el['#webform_key']}
+              id={option}
               value={option}
-              // defaultChecked={defaultValue === option.value}
             />
-            {/** Label for this option. */}
             <label className="form-check-label">{option}</label>
           </div>
         ))
@@ -71,7 +93,11 @@ function renderWebformElement(el) {
     case 'processed_text':
       return '';
     case 'webform_actions':
-      return <button type="submit">{el['#submit__label']}</button>;
+      return (
+        <button type="submit" style={styles.btn}>
+          {el['#submit__label']}
+        </button>
+      );
     default:
       return;
   }
@@ -80,10 +106,27 @@ function renderWebformElement(el) {
 export function NodeArticle({ node, additionalContent, ...props }) {
   console.log('additionalContent', additionalContent);
   async function handleSubmit(event, webform_id) {
+    console.log('e', event.target);
     const body = {};
+    // JSON format for checkboxes, checkbox, radio buttons
+    // {
+    //   "webform_id": "application",
+    //   "checkbox_test": false,
+    //   "food": "banana",
+    //   "checkboxes": ["cat", "dog"]
+    // }
+    //todo: Create formToJSON(event.target.elements) function;
     body['webform_id'] = webform_id;
     for (const el of event.target) {
-      body[el.id] = el.value;
+      body[el.name] = el.value;
+      // console.log('el', el);
+      // if (el.checked) {
+      //   body[el.name] = 1;
+      // } else if (el.checked === false) {
+      //   body[el.name] = 0;
+      // } else {
+      //   body[el.name] = el.value;
+      // }
     }
     event.preventDefault();
     console.log(body);
@@ -107,11 +150,12 @@ export function NodeArticle({ node, additionalContent, ...props }) {
       {additionalContent.webform
         ? Object.keys(additionalContent.webform).map((key) => {
             return (
-              <form key="" onSubmit={(e) => handleSubmit(e, key)}>
+              <form key={key} onSubmit={(e) => handleSubmit(e, key)}>
                 {Object.values(additionalContent.webform[key]).map((el) =>
                   renderWebformElement(el),
                 )}
-                ;
+                <br></br>
+                <br></br>
               </form>
             );
           })
diff --git a/starters/basic-starter/pages/api/submit-form.tsx b/starters/basic-starter/pages/api/submit-form.tsx
index 027f3ebf..a66e3f33 100644
--- a/starters/basic-starter/pages/api/submit-form.tsx
+++ b/starters/basic-starter/pages/api/submit-form.tsx
@@ -7,7 +7,7 @@ export default async function handler(
 ) {
   try {
     if (request.method === 'POST') {
-      const url = drupal.buildUrl('/webform_est/submit?_format=json');
+      const url = drupal.buildUrl('/webform_rest/submit?_format=json');
       console.log('received body', request.body);
       // Submit to Drupal.
       const result = await fetch(url.toString(), {

From 42ef37e59089a25dd6342749d39db51dabc1fc48 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Mon, 1 Aug 2022 16:25:48 -0400
Subject: [PATCH 09/40] added POST support for checkboxes, radio buttons,
 single checkbox

---
 .../components/node--article.tsx              | 101 +++++++++++++-----
 starters/basic-starter/pages/[...slug].tsx    |   1 -
 2 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index dfcb3798..4b4e84bf 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -72,7 +72,6 @@ function renderWebformElement(el) {
         </div>
       );
     case 'radios':
-      console.log(el['#options']);
       return (
         el['#options'] &&
         Object.keys(el['#options']).map((option) => (
@@ -103,33 +102,68 @@ function renderWebformElement(el) {
   }
 }
 
+const isValidElement = (element: any) => {
+  return !!(element.name && element.value);
+};
+
+const isValidValue = (element) => {
+  return (
+    !['checkbox', 'radio'].includes(element.type) ||
+    (element as HTMLInputElement).checked
+  );
+};
+
+const isCheckbox = (element): element is HTMLInputElement =>
+  element.type === 'checkbox';
+
+const isMultiSelect = (element: any): element is HTMLSelectElement =>
+  element.options && (element as HTMLSelectElement).multiple;
+
+const getSelectValues = (options: HTMLOptionsCollection) =>
+  [].reduce.call(
+    options,
+    (values, option) =>
+      option.selected ? values.concat(option.value) : values,
+    [],
+  );
+
+const formToJSON = (elements: HTMLFormControlsCollection) =>
+  [].reduce.call(
+    elements,
+    (data, element) => {
+      // Make sure the element has the required properties and should be added.
+      if (isValidElement(element) && isValidValue(element)) {
+        if (isCheckbox(element)) {
+          data[element.name] = (data[element.name] || []).concat(element.value);
+        } else if (isMultiSelect(element)) {
+          data[element.name] = getSelectValues(element.options);
+        } else {
+          data[element.name] = element.value;
+        }
+      }
+      return data;
+    },
+    {},
+  );
+
 export function NodeArticle({ node, additionalContent, ...props }) {
   console.log('additionalContent', additionalContent);
-  async function handleSubmit(event, webform_id) {
-    console.log('e', event.target);
-    const body = {};
-    // JSON format for checkboxes, checkbox, radio buttons
-    // {
-    //   "webform_id": "application",
-    //   "checkbox_test": false,
-    //   "food": "banana",
-    //   "checkboxes": ["cat", "dog"]
-    // }
-    //todo: Create formToJSON(event.target.elements) function;
-    body['webform_id'] = webform_id;
-    for (const el of event.target) {
-      body[el.name] = el.value;
-      // console.log('el', el);
-      // if (el.checked) {
-      //   body[el.name] = 1;
-      // } else if (el.checked === false) {
-      //   body[el.name] = 0;
-      // } else {
-      //   body[el.name] = el.value;
-      // }
-    }
+
+  async function handleSubmit(event, webform_id, webform) {
     event.preventDefault();
-    console.log(body);
+    const data = formToJSON(event.target.elements);
+    // Post process serialized data:
+    // Some webform elements require specialized data formatting.
+    for (const element in Object.keys(webform)) {
+      if (data[element] && data[element].name) {
+        switch (webform.element.type) {
+          case 'checkbox':
+            data[webform.element] = 1;
+            break;
+        }
+      }
+    }
+    const body = { ...(data as object), ...{ webform_id: webform_id } };
     const response = await fetch('/api/submit-form', {
       method: 'POST',
       body: JSON.stringify(body),
@@ -148,11 +182,20 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         {node.title}
       </h1>
       {additionalContent.webform
-        ? Object.keys(additionalContent.webform).map((key) => {
+        ? Object.keys(additionalContent.webform).map((webform_id) => {
             return (
-              <form key={key} onSubmit={(e) => handleSubmit(e, key)}>
-                {Object.values(additionalContent.webform[key]).map((el) =>
-                  renderWebformElement(el),
+              <form
+                key={webform_id}
+                onSubmit={(e) =>
+                  handleSubmit(
+                    e,
+                    webform_id,
+                    additionalContent.webform[webform_id],
+                  )
+                }
+              >
+                {Object.values(additionalContent.webform[webform_id]).map(
+                  (el) => renderWebformElement(el),
                 )}
                 <br></br>
                 <br></br>
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index eb216576..629711a2 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -188,7 +188,6 @@ export async function getStaticProps(
   }
 
   // Check if the entity has webform(s).
-  // @todo: Figure out how to dynamically get webform field.
   if (entity.field_webform2) {
     additionalContent['webform'] = [];
     const arr = {};

From 74f4cf66dac80bdd842f329a130cd883a534c1ce Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Mon, 1 Aug 2022 18:56:40 -0400
Subject: [PATCH 10/40] Moved webform related functions to lib directory

---
 .../components/node--article.tsx              | 171 +----------------
 starters/basic-starter/lib/webform/utils.tsx  | 176 ++++++++++++++++++
 starters/basic-starter/pages/[...slug].tsx    |  11 +-
 .../basic-starter/pages/api/webform/[id].ts   |  19 ++
 4 files changed, 197 insertions(+), 180 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/utils.tsx
 create mode 100644 starters/basic-starter/pages/api/webform/[id].ts

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 4b4e84bf..b257f364 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,179 +3,10 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-
-const styles = {
-  btn: {
-    backgroundColor: 'rgb(14 165 233)',
-    color: 'white',
-    border: 'none',
-    padding: '12px 16px',
-    textDecoration: 'none',
-    display: 'inlineBlock',
-    fontSize: '16px',
-    borderRadius: '8px',
-  },
-};
-
-function renderWebformElement(el) {
-  switch (el['#type']) {
-    case 'textfield':
-    case 'tel':
-    case 'number':
-    case 'email':
-    case 'hidden':
-      return (
-        <input
-          placeholder={el['#title']}
-          id={el['#webform_key']}
-          name={el['#webform_key']}
-        />
-      );
-    case 'textarea':
-      return (
-        <textarea
-          placeholder={el['#title']}
-          id={el['#webform_key']}
-          name={el['#webform_key']}
-        />
-      );
-    case 'checkbox':
-      return (
-        <div>
-          <input
-            type="checkbox"
-            id={el['#webform_key']}
-            name={el['#webform_key']}
-          />
-          <label className="form-check-label">{el['#description']}</label>
-        </div>
-      );
-    case 'radio':
-      return (
-        <input type="radio" id={el['#webform_key']} name={el['#webform_key']} />
-      );
-    case 'checkboxes':
-      return (
-        <div id={el['#webform_key']}>
-          {el['#options'] &&
-            Object.keys(el['#options']).map((option) => (
-              <>
-                <input
-                  type="checkbox"
-                  name={el['#webform_key']}
-                  id={option}
-                  value={option}
-                />
-                <label className="form-check-label">{option}</label>
-              </>
-            ))}
-        </div>
-      );
-    case 'radios':
-      return (
-        el['#options'] &&
-        Object.keys(el['#options']).map((option) => (
-          <div className="form-check" key={option}>
-            <input
-              type="radio"
-              name={el['#webform_key']}
-              id={option}
-              value={option}
-            />
-            <label className="form-check-label">{option}</label>
-          </div>
-        ))
-      );
-    case 'select':
-      return '';
-    case 'webform_markup':
-    case 'processed_text':
-      return '';
-    case 'webform_actions':
-      return (
-        <button type="submit" style={styles.btn}>
-          {el['#submit__label']}
-        </button>
-      );
-    default:
-      return;
-  }
-}
-
-const isValidElement = (element: any) => {
-  return !!(element.name && element.value);
-};
-
-const isValidValue = (element) => {
-  return (
-    !['checkbox', 'radio'].includes(element.type) ||
-    (element as HTMLInputElement).checked
-  );
-};
-
-const isCheckbox = (element): element is HTMLInputElement =>
-  element.type === 'checkbox';
-
-const isMultiSelect = (element: any): element is HTMLSelectElement =>
-  element.options && (element as HTMLSelectElement).multiple;
-
-const getSelectValues = (options: HTMLOptionsCollection) =>
-  [].reduce.call(
-    options,
-    (values, option) =>
-      option.selected ? values.concat(option.value) : values,
-    [],
-  );
-
-const formToJSON = (elements: HTMLFormControlsCollection) =>
-  [].reduce.call(
-    elements,
-    (data, element) => {
-      // Make sure the element has the required properties and should be added.
-      if (isValidElement(element) && isValidValue(element)) {
-        if (isCheckbox(element)) {
-          data[element.name] = (data[element.name] || []).concat(element.value);
-        } else if (isMultiSelect(element)) {
-          data[element.name] = getSelectValues(element.options);
-        } else {
-          data[element.name] = element.value;
-        }
-      }
-      return data;
-    },
-    {},
-  );
+import { renderWebformElement, handleSubmit } from '../lib/webform/utils';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   console.log('additionalContent', additionalContent);
-
-  async function handleSubmit(event, webform_id, webform) {
-    event.preventDefault();
-    const data = formToJSON(event.target.elements);
-    // Post process serialized data:
-    // Some webform elements require specialized data formatting.
-    for (const element in Object.keys(webform)) {
-      if (data[element] && data[element].name) {
-        switch (webform.element.type) {
-          case 'checkbox':
-            data[webform.element] = 1;
-            break;
-        }
-      }
-    }
-    const body = { ...(data as object), ...{ webform_id: webform_id } };
-    const response = await fetch('/api/submit-form', {
-      method: 'POST',
-      body: JSON.stringify(body),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    if (response.ok) {
-      // Show success.
-    }
-    // Handle error.
-  }
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
new file mode 100644
index 00000000..9d5241f0
--- /dev/null
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -0,0 +1,176 @@
+import { drupal } from '../drupal';
+
+const styles = {
+  btn: {
+    backgroundColor: 'rgb(14 165 233)',
+    color: 'white',
+    border: 'none',
+    padding: '12px 16px',
+    textDecoration: 'none',
+    display: 'inlineBlock',
+    fontSize: '16px',
+    borderRadius: '8px',
+  },
+};
+
+export function renderWebformElement(el) {
+  switch (el['#type']) {
+    case 'textfield':
+    case 'tel':
+    case 'number':
+    case 'email':
+    case 'hidden':
+      return (
+        <input
+          placeholder={el['#title']}
+          id={el['#webform_key']}
+          name={el['#webform_key']}
+        />
+      );
+    case 'textarea':
+      return (
+        <textarea
+          placeholder={el['#title']}
+          id={el['#webform_key']}
+          name={el['#webform_key']}
+        />
+      );
+    case 'checkbox':
+      return (
+        <div>
+          <input
+            type="checkbox"
+            id={el['#webform_key']}
+            name={el['#webform_key']}
+          />
+          <label className="form-check-label">{el['#description']}</label>
+        </div>
+      );
+    case 'radio':
+      return (
+        <input type="radio" id={el['#webform_key']} name={el['#webform_key']} />
+      );
+    case 'checkboxes':
+      return (
+        <div id={el['#webform_key']}>
+          {el['#options'] &&
+            Object.keys(el['#options']).map((option) => (
+              <>
+                <input
+                  type="checkbox"
+                  name={el['#webform_key']}
+                  id={option}
+                  value={option}
+                />
+                <label className="form-check-label">{option}</label>
+              </>
+            ))}
+        </div>
+      );
+    case 'radios':
+      return (
+        el['#options'] &&
+        Object.keys(el['#options']).map((option) => (
+          <div className="form-check" key={option}>
+            <input
+              type="radio"
+              name={el['#webform_key']}
+              id={option}
+              value={option}
+            />
+            <label className="form-check-label">{option}</label>
+          </div>
+        ))
+      );
+    case 'select':
+      return '';
+    case 'webform_markup':
+    case 'processed_text':
+      return '';
+    case 'webform_actions':
+      return (
+        <button type="submit" style={styles.btn}>
+          {el['#submit__label']}
+        </button>
+      );
+    default:
+      return;
+  }
+}
+
+const isValidElement = (element: any) => {
+  return !!(element.name && element.value);
+};
+
+const isValidValue = (element) => {
+  return (
+    !['checkbox', 'radio'].includes(element.type) ||
+    (element as HTMLInputElement).checked
+  );
+};
+
+const isCheckbox = (element): element is HTMLInputElement =>
+  element.type === 'checkbox';
+
+const isMultiSelect = (element: any): element is HTMLSelectElement =>
+  element.options && (element as HTMLSelectElement).multiple;
+
+const getSelectValues = (options: HTMLOptionsCollection) =>
+  [].reduce.call(
+    options,
+    (values, option) =>
+      option.selected ? values.concat(option.value) : values,
+    [],
+  );
+
+const formToJSON = (elements: HTMLFormControlsCollection) =>
+  [].reduce.call(
+    elements,
+    (data, element) => {
+      // Make sure the element has the required properties and should be added.
+      if (isValidElement(element) && isValidValue(element)) {
+        if (isCheckbox(element)) {
+          data[element.name] = (data[element.name] || []).concat(element.value);
+        } else if (isMultiSelect(element)) {
+          data[element.name] = getSelectValues(element.options);
+        } else {
+          data[element.name] = element.value;
+        }
+      }
+      return data;
+    },
+    {},
+  );
+
+export async function handleSubmit(event, webform_id, webform) {
+  event.preventDefault();
+  const data = formToJSON(event.target.elements);
+  // Post process serialized data:
+  // Some webform elements require specialized data formatting.
+  for (const element in Object.keys(webform)) {
+    if (data[element] && data[element].name) {
+      switch (webform.element.type) {
+        case 'checkbox':
+          data[webform.element] = 1;
+          break;
+      }
+    }
+  }
+  const body = { ...(data as object), ...{ webform_id: webform_id } };
+  const response = await fetch('/api/submit-form', {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (response.ok) {
+    // Show success.
+  }
+  // Handle error.
+}
+
+export async function getWebform(id) {
+  const response = await fetch(`/api/webform/${id}`);
+  return response.json();
+}
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 629711a2..e6da2e52 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -17,6 +17,7 @@ import { TaxonomyArticle } from '../components/taxonomy/taxonomy--article_type';
 import { TaxonomyPerson } from '../components/taxonomy/taxonomy--person_type';
 import { TaxonomyEvent } from '../components/taxonomy/taxonomy--event_type';
 import { TaxonomyPlace } from '../components/taxonomy/taxonomy--place_type';
+import { getWebform } from '../lib/webform/utils';
 
 // List of all the entity types handled by this route.
 const ENTITY_TYPES = [
@@ -197,8 +198,6 @@ export async function getStaticProps(
         arr[webform_id] = await getWebform(webform_id);
       }
     } else {
-      console.log('webform 1', entity.field_webform);
-      console.log('webform 2', entity.field_webform2);
       const webform_id = entity.field_webform2['drupal_internal__id'];
       arr[webform_id] = await getWebform(webform_id);
     }
@@ -269,11 +268,3 @@ export async function getStaticProps(
     revalidate: 60,
   };
 }
-
-async function getWebform(id) {
-  const path = `/webform_rest/${id}/fields?_format=json`;
-  const response = await fetch(`${drupal.baseUrl}${path}`, {
-    method: 'GET',
-  });
-  return response.json();
-}
diff --git a/starters/basic-starter/pages/api/webform/[id].ts b/starters/basic-starter/pages/api/webform/[id].ts
new file mode 100644
index 00000000..6c3bb7c2
--- /dev/null
+++ b/starters/basic-starter/pages/api/webform/[id].ts
@@ -0,0 +1,19 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { drupal } from '../../../lib/drupal';
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse,
+) {
+  try {
+    const url = drupal.buildUrl(
+      `/webform_rest/${request.query.id}/fields?_format=json`,
+    );
+    const result = await fetch(url.toString());
+    const webform = await result.json();
+    console.log('webform', webform);
+    response.status(200).json(webform);
+  } catch (e) {
+    console.log(e.message);
+  }
+}

From 42037667235e03432b009c8ec8d6eebd31690173 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 2 Aug 2022 10:41:42 -0400
Subject: [PATCH 11/40] custom API GET works, moved POST into api/webform

---
 starters/basic-starter/lib/webform/utils.tsx                | 6 ++----
 .../pages/api/{submit-form.tsx => webform/submit.tsx}       | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)
 rename starters/basic-starter/pages/api/{submit-form.tsx => webform/submit.tsx} (94%)

diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 9d5241f0..0f6e6068 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -1,5 +1,3 @@
-import { drupal } from '../drupal';
-
 const styles = {
   btn: {
     backgroundColor: 'rgb(14 165 233)',
@@ -157,7 +155,7 @@ export async function handleSubmit(event, webform_id, webform) {
     }
   }
   const body = { ...(data as object), ...{ webform_id: webform_id } };
-  const response = await fetch('/api/submit-form', {
+  const response = await fetch('/api/webform/submit', {
     method: 'POST',
     body: JSON.stringify(body),
     headers: {
@@ -171,6 +169,6 @@ export async function handleSubmit(event, webform_id, webform) {
 }
 
 export async function getWebform(id) {
-  const response = await fetch(`/api/webform/${id}`);
+  const response = await fetch(`http://localhost:3000/api/webform/${id}`);
   return response.json();
 }
diff --git a/starters/basic-starter/pages/api/submit-form.tsx b/starters/basic-starter/pages/api/webform/submit.tsx
similarity index 94%
rename from starters/basic-starter/pages/api/submit-form.tsx
rename to starters/basic-starter/pages/api/webform/submit.tsx
index a66e3f33..91a0d56a 100644
--- a/starters/basic-starter/pages/api/submit-form.tsx
+++ b/starters/basic-starter/pages/api/webform/submit.tsx
@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { drupal } from '../../lib/drupal';
+import { drupal } from '../../../lib/drupal';
 
 export default async function handler(
   request: NextApiRequest,

From b5d23e018aec2da4849dc2197f3b3553477f102f Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 2 Aug 2022 12:28:02 -0400
Subject: [PATCH 12/40] added super basic styling

---
 starters/basic-starter/lib/webform/utils.tsx | 48 +++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 0f6e6068..52931a89 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -3,12 +3,20 @@ const styles = {
     backgroundColor: 'rgb(14 165 233)',
     color: 'white',
     border: 'none',
-    padding: '12px 16px',
+    padding: '12px 14px',
     textDecoration: 'none',
     display: 'inlineBlock',
     fontSize: '16px',
     borderRadius: '8px',
   },
+  checkbox: {
+    marginRight: '8px',
+  },
+  textArea: {
+    border: '2px solid #e5e7eb',
+    margin: '4px',
+    borderRadius: '4px',
+  },
 };
 
 export function renderWebformElement(el) {
@@ -23,6 +31,7 @@ export function renderWebformElement(el) {
           placeholder={el['#title']}
           id={el['#webform_key']}
           name={el['#webform_key']}
+          style={styles.textArea}
         />
       );
     case 'textarea':
@@ -31,6 +40,7 @@ export function renderWebformElement(el) {
           placeholder={el['#title']}
           id={el['#webform_key']}
           name={el['#webform_key']}
+          style={styles.textArea}
         />
       );
     case 'checkbox':
@@ -40,30 +50,35 @@ export function renderWebformElement(el) {
             type="checkbox"
             id={el['#webform_key']}
             name={el['#webform_key']}
+            style={styles.checkbox}
           />
           <label className="form-check-label">{el['#description']}</label>
         </div>
       );
     case 'radio':
       return (
-        <input type="radio" id={el['#webform_key']} name={el['#webform_key']} />
+        <input
+          type="radio"
+          id={el['#webform_key']}
+          name={el['#webform_key']}
+          style={styles.checkbox}
+        />
       );
     case 'checkboxes':
       return (
-        <div id={el['#webform_key']}>
-          {el['#options'] &&
-            Object.keys(el['#options']).map((option) => (
-              <>
-                <input
-                  type="checkbox"
-                  name={el['#webform_key']}
-                  id={option}
-                  value={option}
-                />
-                <label className="form-check-label">{option}</label>
-              </>
-            ))}
-        </div>
+        el['#options'] &&
+        Object.keys(el['#options']).map((option) => (
+          <div id={el['#webform_key']} key={option}>
+            <input
+              type="checkbox"
+              name={el['#webform_key']}
+              id={option}
+              value={option}
+              style={styles.checkbox}
+            />
+            <label className="form-check-label">{option}</label>
+          </div>
+        ))
       );
     case 'radios':
       return (
@@ -75,6 +90,7 @@ export function renderWebformElement(el) {
               name={el['#webform_key']}
               id={option}
               value={option}
+              style={styles.checkbox}
             />
             <label className="form-check-label">{option}</label>
           </div>

From db7fda1fc4decdc5f420e32bd103c7d953224ede Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 2 Aug 2022 18:28:54 -0400
Subject: [PATCH 13/40] Move webform rendering to /webform, pass in
 additionalContent to all node types

---
 .../components/node--article.tsx              | 28 +++----------------
 .../basic-starter/components/node--event.tsx  |  6 +++-
 .../basic-starter/components/node--person.tsx |  6 +++-
 .../basic-starter/components/node--place.tsx  |  7 +++--
 starters/basic-starter/lib/webform/utils.tsx  | 17 +++++++++++
 starters/basic-starter/pages/[...slug].tsx    | 15 ++++++++--
 .../basic-starter/pages/api/webform/[id].ts   |  1 -
 .../pages/api/webform/submit.tsx              |  1 -
 8 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index b257f364..9e5d3121 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,37 +3,14 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { renderWebformElement, handleSubmit } from '../lib/webform/utils';
+import { renderWebform } from '../lib/webform/utils';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
-  console.log('additionalContent', additionalContent);
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
         {node.title}
       </h1>
-      {additionalContent.webform
-        ? Object.keys(additionalContent.webform).map((webform_id) => {
-            return (
-              <form
-                key={webform_id}
-                onSubmit={(e) =>
-                  handleSubmit(
-                    e,
-                    webform_id,
-                    additionalContent.webform[webform_id],
-                  )
-                }
-              >
-                {Object.values(additionalContent.webform[webform_id]).map(
-                  (el) => renderWebformElement(el),
-                )}
-                <br></br>
-                <br></br>
-              </form>
-            );
-          })
-        : null}
       <p className="mb-4 text-gray-600">
         {node.field_display_author?.title ? (
           <span>
@@ -45,6 +22,9 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         ) : null}
         {node.created && <span> on {formatDate(node.created)}</span>}
       </p>
+      {additionalContent.webform
+        ? renderWebform(additionalContent.webform)
+        : null}
       {node.field_article_image && (
         <div className="my-6 overflow-hidden rounded-md">
           <MediaImage
diff --git a/starters/basic-starter/components/node--event.tsx b/starters/basic-starter/components/node--event.tsx
index c5e72db8..e703263b 100644
--- a/starters/basic-starter/components/node--event.tsx
+++ b/starters/basic-starter/components/node--event.tsx
@@ -3,10 +3,14 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
+import { renderWebform } from '../lib/webform/utils';
 
-export function NodeEvent({ node, ...props }) {
+export function NodeEvent({ node, additionalContent, ...props }) {
   return (
     <article className="container px-6 py-10 mx-auto" {...props}>
+      {additionalContent.webform
+        ? renderWebform(additionalContent.webform)
+        : null}
       <div className="grid-cols-2 gap-10 p-4 mx-auto border rounded-md md:grid">
         {node.field_event_image && (
           <Link href={node.path.alias} passHref>
diff --git a/starters/basic-starter/components/node--person.tsx b/starters/basic-starter/components/node--person.tsx
index 6fcbebb5..aab4e48a 100644
--- a/starters/basic-starter/components/node--person.tsx
+++ b/starters/basic-starter/components/node--person.tsx
@@ -2,8 +2,9 @@ import Link from 'next/link';
 
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
+import { renderWebform } from '../lib/webform/utils';
 
-export function NodePerson({ node, ...props }) {
+export function NodePerson({ node, additionalContent, ...props }) {
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
       <div className="grid items-center justify-center gap-4 text-center md:text-left md:grid-cols-2">
@@ -23,6 +24,9 @@ export function NodePerson({ node, ...props }) {
           )}
         </div>
       </div>
+      {additionalContent.webform
+        ? renderWebform(additionalContent.webform)
+        : null}
       {node.body?.processed && (
         <div className="py-10 prose">
           <FormattedText processed={node.body.processed} />
diff --git a/starters/basic-starter/components/node--place.tsx b/starters/basic-starter/components/node--place.tsx
index 35681ebd..58f01bcc 100644
--- a/starters/basic-starter/components/node--place.tsx
+++ b/starters/basic-starter/components/node--place.tsx
@@ -2,8 +2,9 @@ import Link from 'next/link';
 
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
+import { renderWebform } from '../lib/webform/utils';
 
-export function NodePlace({ node, ...props }) {
+export function NodePlace({ node, additionalContent, ...props }) {
   return (
     <article {...props}>
       <div className="grid items-start w-full max-w-4xl gap-10 px-6 pt-12 mx-auto md:grid-cols-2">
@@ -32,7 +33,9 @@ export function NodePlace({ node, ...props }) {
           {node.field_place_telephone && <p>{node.field_place_telephone}</p>}
         </div>
       </div>
-
+      {additionalContent.webform
+        ? renderWebform(additionalContent.webform)
+        : null}
       <div className="max-w-2xl px-6 py-10 mx-auto">
         {node.body?.processed && (
           <div className="prose">
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 52931a89..43d9a47b 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -188,3 +188,20 @@ export async function getWebform(id) {
   const response = await fetch(`http://localhost:3000/api/webform/${id}`);
   return response.json();
 }
+
+export function renderWebform(webform: object) {
+  return Object.keys(webform).map((webform_id) => {
+    return (
+      <form
+        key={webform_id}
+        onSubmit={(e) => handleSubmit(e, webform_id, webform[webform_id])}
+      >
+        {Object.values(webform[webform_id]).map((el) =>
+          renderWebformElement(el),
+        )}
+        <br></br>
+        <br></br>
+      </form>
+    );
+  });
+}
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index e6da2e52..0ee4a9e3 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -57,13 +57,22 @@ export default function EntityPage({
         />
       )}
       {entity.type === 'node--event' && (
-        <NodeEvent node={entity as DrupalNode} />
+        <NodeEvent
+          node={entity as DrupalNode}
+          additionalContent={additionalContent as { webform: object }}
+        />
       )}
       {entity.type === 'node--person' && (
-        <NodePerson node={entity as DrupalNode} />
+        <NodePerson
+          node={entity as DrupalNode}
+          additionalContent={additionalContent as { webform: object }}
+        />
       )}
       {entity.type === 'node--place' && (
-        <NodePlace node={entity as DrupalNode} />
+        <NodePlace
+          node={entity as DrupalNode}
+          additionalContent={additionalContent as { webform: object }}
+        />
       )}
       {entity.type === 'taxonomy_term--article_type' && (
         <TaxonomyArticle
diff --git a/starters/basic-starter/pages/api/webform/[id].ts b/starters/basic-starter/pages/api/webform/[id].ts
index 6c3bb7c2..14d4ef57 100644
--- a/starters/basic-starter/pages/api/webform/[id].ts
+++ b/starters/basic-starter/pages/api/webform/[id].ts
@@ -11,7 +11,6 @@ export default async function handler(
     );
     const result = await fetch(url.toString());
     const webform = await result.json();
-    console.log('webform', webform);
     response.status(200).json(webform);
   } catch (e) {
     console.log(e.message);
diff --git a/starters/basic-starter/pages/api/webform/submit.tsx b/starters/basic-starter/pages/api/webform/submit.tsx
index 91a0d56a..77f5693a 100644
--- a/starters/basic-starter/pages/api/webform/submit.tsx
+++ b/starters/basic-starter/pages/api/webform/submit.tsx
@@ -8,7 +8,6 @@ export default async function handler(
   try {
     if (request.method === 'POST') {
       const url = drupal.buildUrl('/webform_rest/submit?_format=json');
-      console.log('received body', request.body);
       // Submit to Drupal.
       const result = await fetch(url.toString(), {
         method: 'POST',

From c9c684e4836abdaba38690c9b09878f94f15499e Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 3 Aug 2022 14:13:47 -0400
Subject: [PATCH 14/40] Created Webform component and created types.ts file

---
 .../components/node--article.tsx              | 15 ++++++++----
 .../basic-starter/components/node--event.tsx  |  4 ----
 .../basic-starter/components/node--person.tsx |  4 ----
 .../basic-starter/components/node--place.tsx  |  4 ----
 .../basic-starter/lib/webform/Webform.tsx     | 12 ++++++++++
 starters/basic-starter/lib/webform/types.ts   | 21 +++++++++++++++++
 starters/basic-starter/lib/webform/utils.tsx  | 23 +++----------------
 starters/basic-starter/pages/[...slug].tsx    | 16 +++++++------
 8 files changed, 56 insertions(+), 43 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/Webform.tsx
 create mode 100644 starters/basic-starter/lib/webform/types.ts

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 9e5d3121..101edeec 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { renderWebform } from '../lib/webform/utils';
+import { Webform } from '../lib/webform/Webform';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   return (
@@ -22,9 +22,16 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         ) : null}
         {node.created && <span> on {formatDate(node.created)}</span>}
       </p>
-      {additionalContent.webform
-        ? renderWebform(additionalContent.webform)
-        : null}
+      {Object.keys(additionalContent.webform).map((webform_id) => {
+        return (
+          <Webform
+            webform={additionalContent.webform[webform_id]}
+            id={webform_id}
+            key={webform_id}
+          />
+        );
+      })}
+      {/*{additionalContent.webform ? Webform(additionalContent.webform) : null}*/}
       {node.field_article_image && (
         <div className="my-6 overflow-hidden rounded-md">
           <MediaImage
diff --git a/starters/basic-starter/components/node--event.tsx b/starters/basic-starter/components/node--event.tsx
index e703263b..4814f31b 100644
--- a/starters/basic-starter/components/node--event.tsx
+++ b/starters/basic-starter/components/node--event.tsx
@@ -3,14 +3,10 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { renderWebform } from '../lib/webform/utils';
 
 export function NodeEvent({ node, additionalContent, ...props }) {
   return (
     <article className="container px-6 py-10 mx-auto" {...props}>
-      {additionalContent.webform
-        ? renderWebform(additionalContent.webform)
-        : null}
       <div className="grid-cols-2 gap-10 p-4 mx-auto border rounded-md md:grid">
         {node.field_event_image && (
           <Link href={node.path.alias} passHref>
diff --git a/starters/basic-starter/components/node--person.tsx b/starters/basic-starter/components/node--person.tsx
index aab4e48a..95909955 100644
--- a/starters/basic-starter/components/node--person.tsx
+++ b/starters/basic-starter/components/node--person.tsx
@@ -2,7 +2,6 @@ import Link from 'next/link';
 
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { renderWebform } from '../lib/webform/utils';
 
 export function NodePerson({ node, additionalContent, ...props }) {
   return (
@@ -24,9 +23,6 @@ export function NodePerson({ node, additionalContent, ...props }) {
           )}
         </div>
       </div>
-      {additionalContent.webform
-        ? renderWebform(additionalContent.webform)
-        : null}
       {node.body?.processed && (
         <div className="py-10 prose">
           <FormattedText processed={node.body.processed} />
diff --git a/starters/basic-starter/components/node--place.tsx b/starters/basic-starter/components/node--place.tsx
index 58f01bcc..a4fe62d5 100644
--- a/starters/basic-starter/components/node--place.tsx
+++ b/starters/basic-starter/components/node--place.tsx
@@ -2,7 +2,6 @@ import Link from 'next/link';
 
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { renderWebform } from '../lib/webform/utils';
 
 export function NodePlace({ node, additionalContent, ...props }) {
   return (
@@ -33,9 +32,6 @@ export function NodePlace({ node, additionalContent, ...props }) {
           {node.field_place_telephone && <p>{node.field_place_telephone}</p>}
         </div>
       </div>
-      {additionalContent.webform
-        ? renderWebform(additionalContent.webform)
-        : null}
       <div className="max-w-2xl px-6 py-10 mx-auto">
         {node.body?.processed && (
           <div className="prose">
diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/starters/basic-starter/lib/webform/Webform.tsx
new file mode 100644
index 00000000..bf339c64
--- /dev/null
+++ b/starters/basic-starter/lib/webform/Webform.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { WebformProps } from './types';
+import { handleSubmit, renderWebformElement } from './utils';
+
+export const Webform = ({ webform, id }: WebformProps) => {
+  console.log('webform object', webform);
+  return (
+    <form onSubmit={(e) => handleSubmit(e, id, webform)}>
+      {Object.values(webform).map((el) => renderWebformElement(el))}
+    </form>
+  );
+};
diff --git a/starters/basic-starter/lib/webform/types.ts b/starters/basic-starter/lib/webform/types.ts
new file mode 100644
index 00000000..b4454125
--- /dev/null
+++ b/starters/basic-starter/lib/webform/types.ts
@@ -0,0 +1,21 @@
+export type WebformProps = {
+  webform: object;
+  id: string;
+};
+
+export type WebformElementProps = {
+  // probably will need to break this up
+  el: object;
+};
+
+// Create WebformObject type
+
+// Create WebformElement type
+export type WebformElement = {
+  // might need more later
+  title: string;
+  type: string;
+  webform_key: string;
+  submit_label?: string;
+  options?: object;
+};
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 43d9a47b..f0c6fb5a 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -97,10 +97,10 @@ export function renderWebformElement(el) {
         ))
       );
     case 'select':
-      return '';
+      return null;
     case 'webform_markup':
     case 'processed_text':
-      return '';
+      return null;
     case 'webform_actions':
       return (
         <button type="submit" style={styles.btn}>
@@ -110,7 +110,7 @@ export function renderWebformElement(el) {
     default:
       return;
   }
-}
+};
 
 const isValidElement = (element: any) => {
   return !!(element.name && element.value);
@@ -188,20 +188,3 @@ export async function getWebform(id) {
   const response = await fetch(`http://localhost:3000/api/webform/${id}`);
   return response.json();
 }
-
-export function renderWebform(webform: object) {
-  return Object.keys(webform).map((webform_id) => {
-    return (
-      <form
-        key={webform_id}
-        onSubmit={(e) => handleSubmit(e, webform_id, webform[webform_id])}
-      >
-        {Object.values(webform[webform_id]).map((el) =>
-          renderWebformElement(el),
-        )}
-        <br></br>
-        <br></br>
-      </form>
-    );
-  });
-}
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 0ee4a9e3..36e82b97 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -157,13 +157,15 @@ export async function getStaticProps(
       'field_article_image.image',
       'field_display_author',
       'field_webform',
-      'field_webform2',
     ]);
   }
 
   if (type === 'node--event') {
     params
-      .addInclude(['field_event_image.image', 'field_event_place'])
+      .addInclude([
+        'field_event_image.image',
+        'field_event_place',
+      ])
       .addFields('node--place', ['title', 'path']);
   }
 
@@ -197,17 +199,17 @@ export async function getStaticProps(
     };
   }
 
-  // Check if the entity has webform(s).
-  if (entity.field_webform2) {
+  // Check if the entity has webform(s) and create a webform object.
+  if (entity.field_webform) {
     additionalContent['webform'] = [];
     const arr = {};
-    if (Array.isArray(entity.field_webform2)) {
-      for (const form of entity.field_webform2) {
+    if (Array.isArray(entity.field_webform)) {
+      for (const form of entity.field_webform) {
         const webform_id = form['drupal_internal__id'];
         arr[webform_id] = await getWebform(webform_id);
       }
     } else {
-      const webform_id = entity.field_webform2['drupal_internal__id'];
+      const webform_id = entity.field_webform['drupal_internal__id'];
       arr[webform_id] = await getWebform(webform_id);
     }
     additionalContent['webform'] = arr;

From f26db83d6a468b92f117c100d4b3199cde6cf189 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 3 Aug 2022 15:49:20 -0400
Subject: [PATCH 15/40] Use new types

---
 .../components/node--article.tsx              | 15 ++++-------
 .../basic-starter/lib/webform/Webform.tsx     | 10 +++++---
 starters/basic-starter/lib/webform/types.ts   | 13 +++++-----
 starters/basic-starter/lib/webform/utils.tsx  |  7 +++---
 starters/basic-starter/pages/[...slug].tsx    | 25 ++++++++++---------
 5 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 101edeec..8d52226e 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -22,16 +22,11 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         ) : null}
         {node.created && <span> on {formatDate(node.created)}</span>}
       </p>
-      {Object.keys(additionalContent.webform).map((webform_id) => {
-        return (
-          <Webform
-            webform={additionalContent.webform[webform_id]}
-            id={webform_id}
-            key={webform_id}
-          />
-        );
-      })}
-      {/*{additionalContent.webform ? Webform(additionalContent.webform) : null}*/}
+      <Webform
+        webformObject={additionalContent.webform}
+        id={additionalContent.webform.drupal_internal__id}
+        key={additionalContent.webform.drupal_internal__id}
+      />
       {node.field_article_image && (
         <div className="my-6 overflow-hidden rounded-md">
           <MediaImage
diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/starters/basic-starter/lib/webform/Webform.tsx
index bf339c64..cbd08f7c 100644
--- a/starters/basic-starter/lib/webform/Webform.tsx
+++ b/starters/basic-starter/lib/webform/Webform.tsx
@@ -2,11 +2,13 @@ import React from 'react';
 import { WebformProps } from './types';
 import { handleSubmit, renderWebformElement } from './utils';
 
-export const Webform = ({ webform, id }: WebformProps) => {
-  console.log('webform object', webform);
+export const Webform = ({ webformObject, id }: WebformProps) => {
+  console.log('webform object', webformObject);
   return (
-    <form onSubmit={(e) => handleSubmit(e, id, webform)}>
-      {Object.values(webform).map((el) => renderWebformElement(el))}
+    <form onSubmit={(e) => handleSubmit(e, id, webformObject)}>
+      {Object.values(webformObject.elements).map((el) =>
+        renderWebformElement(el),
+      )}
     </form>
   );
 };
diff --git a/starters/basic-starter/lib/webform/types.ts b/starters/basic-starter/lib/webform/types.ts
index b4454125..d079e38b 100644
--- a/starters/basic-starter/lib/webform/types.ts
+++ b/starters/basic-starter/lib/webform/types.ts
@@ -1,16 +1,15 @@
 export type WebformProps = {
-  webform: object;
+  webformObject: WebformObject;
   id: string;
 };
 
-export type WebformElementProps = {
-  // probably will need to break this up
-  el: object;
+export type WebformObject = {
+  drupal_internal__id: string;
+  description: string;
+  status: string;
+  elements: WebformElement[];
 };
 
-// Create WebformObject type
-
-// Create WebformElement type
 export type WebformElement = {
   // might need more later
   title: string;
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index f0c6fb5a..e943dc0a 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -108,9 +108,10 @@ export function renderWebformElement(el) {
         </button>
       );
     default:
-      return;
+      // @todo: add better default
+      return 'Element not supported';
   }
-};
+}
 
 const isValidElement = (element: any) => {
   return !!(element.name && element.value);
@@ -184,7 +185,7 @@ export async function handleSubmit(event, webform_id, webform) {
   // Handle error.
 }
 
-export async function getWebform(id) {
+export async function getWebformFields(id) {
   const response = await fetch(`http://localhost:3000/api/webform/${id}`);
   return response.json();
 }
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 36e82b97..80d7b288 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -17,7 +17,9 @@ import { TaxonomyArticle } from '../components/taxonomy/taxonomy--article_type';
 import { TaxonomyPerson } from '../components/taxonomy/taxonomy--person_type';
 import { TaxonomyEvent } from '../components/taxonomy/taxonomy--event_type';
 import { TaxonomyPlace } from '../components/taxonomy/taxonomy--place_type';
-import { getWebform } from '../lib/webform/utils';
+import { getWebformFields } from '../lib/webform/utils';
+import {Webform} from "../lib/webform/Webform";
+import {WebformObject} from "../lib/webform/types";
 
 // List of all the entity types handled by this route.
 const ENTITY_TYPES = [
@@ -202,17 +204,16 @@ export async function getStaticProps(
   // Check if the entity has webform(s) and create a webform object.
   if (entity.field_webform) {
     additionalContent['webform'] = [];
-    const arr = {};
-    if (Array.isArray(entity.field_webform)) {
-      for (const form of entity.field_webform) {
-        const webform_id = form['drupal_internal__id'];
-        arr[webform_id] = await getWebform(webform_id);
-      }
-    } else {
-      const webform_id = entity.field_webform['drupal_internal__id'];
-      arr[webform_id] = await getWebform(webform_id);
-    }
-    additionalContent['webform'] = arr;
+    const webformObject: WebformObject = {
+      drupal_internal__id: entity.field_webform.drupal_internal__id,
+      description: entity.field_webform.description,
+      status: entity.field_webform.status,
+      elements: await getWebformFields(
+        entity.field_webform.drupal_internal__id,
+      ),
+    };
+    console.log(entity.field_webform);
+    additionalContent['webform'] = webformObject;
   }
 
   // Fetch additional content for rendering taxonomy term pages.

From 46e252188b3e1080e79cb1b2ca723e124b6ac037 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 3 Aug 2022 17:32:06 -0400
Subject: [PATCH 16/40] Started on custom components

---
 starters/basic-starter/lib/webform/Webform.tsx |  8 ++++++--
 .../lib/webform/components/WebformDateTime.tsx |  0
 starters/basic-starter/lib/webform/types.ts    | 18 ++++++++++++++++++
 starters/basic-starter/lib/webform/utils.tsx   |  2 +-
 4 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/components/WebformDateTime.tsx

diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/starters/basic-starter/lib/webform/Webform.tsx
index cbd08f7c..e840dd3b 100644
--- a/starters/basic-starter/lib/webform/Webform.tsx
+++ b/starters/basic-starter/lib/webform/Webform.tsx
@@ -2,12 +2,16 @@ import React from 'react';
 import { WebformProps } from './types';
 import { handleSubmit, renderWebformElement } from './utils';
 
-export const Webform = ({ webformObject, id }: WebformProps) => {
+export const Webform = ({
+  webformObject,
+  id,
+  customComponents,
+}: WebformProps) => {
   console.log('webform object', webformObject);
   return (
     <form onSubmit={(e) => handleSubmit(e, id, webformObject)}>
       {Object.values(webformObject.elements).map((el) =>
-        renderWebformElement(el),
+        renderWebformElement(el, customComponents),
       )}
     </form>
   );
diff --git a/starters/basic-starter/lib/webform/components/WebformDateTime.tsx b/starters/basic-starter/lib/webform/components/WebformDateTime.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/starters/basic-starter/lib/webform/types.ts b/starters/basic-starter/lib/webform/types.ts
index d079e38b..5c47311e 100644
--- a/starters/basic-starter/lib/webform/types.ts
+++ b/starters/basic-starter/lib/webform/types.ts
@@ -1,6 +1,24 @@
+import React from 'react';
+
+export type WebformCustomComponentProps = {
+  element: WebformElement;
+  error?: string;
+};
+
+/**
+ * Custom component for webform element
+ */
+export type WebformCustomComponent = React.FC<WebformCustomComponentProps>;
+
+type CustomComponentLibrary = {
+  [name: string]: WebformCustomComponent;
+};
+
+// @todo: Remove ID
 export type WebformProps = {
   webformObject: WebformObject;
   id: string;
+  customComponents: CustomComponentLibrary;
 };
 
 export type WebformObject = {
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index e943dc0a..315d854d 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -19,7 +19,7 @@ const styles = {
   },
 };
 
-export function renderWebformElement(el) {
+export function renderWebformElement(el, customComponents) {
   switch (el['#type']) {
     case 'textfield':
     case 'tel':

From be9f34ab137d879af87e8f8ea310d2eaf184240d Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 4 Aug 2022 18:41:30 -0400
Subject: [PATCH 17/40] Added example of working example of custom component

---
 .../components/node--article.tsx              |  2 +
 .../lib/webform/components/WebformDate.tsx    |  6 +++
 .../webform/components/WebformDateTime.tsx    |  0
 starters/basic-starter/lib/webform/types.ts   | 20 +++----
 starters/basic-starter/lib/webform/utils.tsx  | 54 +++++++++++--------
 starters/basic-starter/pages/[...slug].tsx    | 19 +++----
 6 files changed, 58 insertions(+), 43 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/components/WebformDate.tsx
 delete mode 100644 starters/basic-starter/lib/webform/components/WebformDateTime.tsx

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 8d52226e..0bd50f7d 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -4,6 +4,7 @@ import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 import { Webform } from '../lib/webform/Webform';
+import { WebformDate } from '../lib/webform/components/WebformDate';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   return (
@@ -26,6 +27,7 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         webformObject={additionalContent.webform}
         id={additionalContent.webform.drupal_internal__id}
         key={additionalContent.webform.drupal_internal__id}
+        customComponents={{ date: WebformDate }}
       />
       {node.field_article_image && (
         <div className="my-6 overflow-hidden rounded-md">
diff --git a/starters/basic-starter/lib/webform/components/WebformDate.tsx b/starters/basic-starter/lib/webform/components/WebformDate.tsx
new file mode 100644
index 00000000..6d0b9547
--- /dev/null
+++ b/starters/basic-starter/lib/webform/components/WebformDate.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+
+// Example custom component
+export const WebformDate = () => {
+  return <input type="date" name="date" min="2022-01-01" max="2022-12-31" />;
+};
diff --git a/starters/basic-starter/lib/webform/components/WebformDateTime.tsx b/starters/basic-starter/lib/webform/components/WebformDateTime.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/starters/basic-starter/lib/webform/types.ts b/starters/basic-starter/lib/webform/types.ts
index 5c47311e..e0dccd34 100644
--- a/starters/basic-starter/lib/webform/types.ts
+++ b/starters/basic-starter/lib/webform/types.ts
@@ -1,5 +1,7 @@
 import React from 'react';
 
+export const DEFAULT_SUBMIT_LABEL = 'Submit';
+
 export type WebformCustomComponentProps = {
   element: WebformElement;
   error?: string;
@@ -10,15 +12,14 @@ export type WebformCustomComponentProps = {
  */
 export type WebformCustomComponent = React.FC<WebformCustomComponentProps>;
 
-type CustomComponentLibrary = {
+export type CustomComponentLibrary = {
   [name: string]: WebformCustomComponent;
 };
 
-// @todo: Remove ID
 export type WebformProps = {
+  id?: string;
   webformObject: WebformObject;
-  id: string;
-  customComponents: CustomComponentLibrary;
+  customComponents?: CustomComponentLibrary;
 };
 
 export type WebformObject = {
@@ -30,9 +31,10 @@ export type WebformObject = {
 
 export type WebformElement = {
   // might need more later
-  title: string;
-  type: string;
-  webform_key: string;
-  submit_label?: string;
-  options?: object;
+  '#title': string;
+  '#type': string;
+  '#webform_key': string;
+  '#submit__label'?: string;
+  '#options'?: object;
+  '#description': string;
 };
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 315d854d..8d8ffb4a 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -1,3 +1,5 @@
+import { CustomComponentLibrary, WebformElement } from './types';
+
 const styles = {
   btn: {
     backgroundColor: 'rgb(14 165 233)',
@@ -19,8 +21,16 @@ const styles = {
   },
 };
 
-export function renderWebformElement(el, customComponents) {
-  switch (el['#type']) {
+export function renderWebformElement(
+  element: WebformElement,
+  customComponents: CustomComponentLibrary,
+) {
+  // Render using custom component if provided:
+  if (customComponents && customComponents[element['#type']]) {
+    const CustomComponent = customComponents[element['#type']];
+    return <CustomComponent element={element} />;
+  }
+  switch (element['#type']) {
     case 'textfield':
     case 'tel':
     case 'number':
@@ -28,18 +38,18 @@ export function renderWebformElement(el, customComponents) {
     case 'hidden':
       return (
         <input
-          placeholder={el['#title']}
-          id={el['#webform_key']}
-          name={el['#webform_key']}
+          placeholder={element['#title']}
+          id={element['#webform_key']}
+          name={element['#webform_key']}
           style={styles.textArea}
         />
       );
     case 'textarea':
       return (
         <textarea
-          placeholder={el['#title']}
-          id={el['#webform_key']}
-          name={el['#webform_key']}
+          placeholder={element['#title']}
+          id={element['#webform_key']}
+          name={element['#webform_key']}
           style={styles.textArea}
         />
       );
@@ -48,30 +58,30 @@ export function renderWebformElement(el, customComponents) {
         <div>
           <input
             type="checkbox"
-            id={el['#webform_key']}
-            name={el['#webform_key']}
+            id={element['#webform_key']}
+            name={element['#webform_key']}
             style={styles.checkbox}
           />
-          <label className="form-check-label">{el['#description']}</label>
+          <label className="form-check-label">{element['#description']}</label>
         </div>
       );
     case 'radio':
       return (
         <input
           type="radio"
-          id={el['#webform_key']}
-          name={el['#webform_key']}
+          id={element['#webform_key']}
+          name={element['#webform_key']}
           style={styles.checkbox}
         />
       );
     case 'checkboxes':
       return (
-        el['#options'] &&
-        Object.keys(el['#options']).map((option) => (
-          <div id={el['#webform_key']} key={option}>
+        element['#options'] &&
+        Object.keys(element['#options']).map((option) => (
+          <div id={element['#webform_key']} key={option}>
             <input
               type="checkbox"
-              name={el['#webform_key']}
+              name={element['#webform_key']}
               id={option}
               value={option}
               style={styles.checkbox}
@@ -82,12 +92,12 @@ export function renderWebformElement(el, customComponents) {
       );
     case 'radios':
       return (
-        el['#options'] &&
-        Object.keys(el['#options']).map((option) => (
+        element['#options'] &&
+        Object.keys(element['#options']).map((option) => (
           <div className="form-check" key={option}>
             <input
               type="radio"
-              name={el['#webform_key']}
+              name={element['#webform_key']}
               id={option}
               value={option}
               style={styles.checkbox}
@@ -104,7 +114,7 @@ export function renderWebformElement(el, customComponents) {
     case 'webform_actions':
       return (
         <button type="submit" style={styles.btn}>
-          {el['#submit__label']}
+          {element['#submit__label']}
         </button>
       );
     default:
@@ -162,7 +172,7 @@ export async function handleSubmit(event, webform_id, webform) {
   const data = formToJSON(event.target.elements);
   // Post process serialized data:
   // Some webform elements require specialized data formatting.
-  for (const element in Object.keys(webform)) {
+  for (const element in Object.keys(webform.elements)) {
     if (data[element] && data[element].name) {
       switch (webform.element.type) {
         case 'checkbox':
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 80d7b288..f5f4d104 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -18,8 +18,7 @@ import { TaxonomyPerson } from '../components/taxonomy/taxonomy--person_type';
 import { TaxonomyEvent } from '../components/taxonomy/taxonomy--event_type';
 import { TaxonomyPlace } from '../components/taxonomy/taxonomy--place_type';
 import { getWebformFields } from '../lib/webform/utils';
-import {Webform} from "../lib/webform/Webform";
-import {WebformObject} from "../lib/webform/types";
+import { WebformObject } from '../lib/webform/types';
 
 // List of all the entity types handled by this route.
 const ENTITY_TYPES = [
@@ -38,7 +37,7 @@ interface EntityPageProps extends LayoutProps {
   entity: DrupalNode | DrupalTaxonomyTerm;
   additionalContent?: {
     nodes?: DrupalNode[];
-    webform?: object;
+    webform?: WebformObject;
   };
 }
 
@@ -55,25 +54,25 @@ export default function EntityPage({
       {entity.type === 'node--article' && (
         <NodeArticle
           node={entity as DrupalNode}
-          additionalContent={additionalContent as { webform: object }}
+          additionalContent={additionalContent as { webform: WebformObject }}
         />
       )}
       {entity.type === 'node--event' && (
         <NodeEvent
           node={entity as DrupalNode}
-          additionalContent={additionalContent as { webform: object }}
+          additionalContent={additionalContent as { webform: WebformObject }}
         />
       )}
       {entity.type === 'node--person' && (
         <NodePerson
           node={entity as DrupalNode}
-          additionalContent={additionalContent as { webform: object }}
+          additionalContent={additionalContent as { webform: WebformObject }}
         />
       )}
       {entity.type === 'node--place' && (
         <NodePlace
           node={entity as DrupalNode}
-          additionalContent={additionalContent as { webform: object }}
+          additionalContent={additionalContent as { webform: WebformObject }}
         />
       )}
       {entity.type === 'taxonomy_term--article_type' && (
@@ -164,10 +163,7 @@ export async function getStaticProps(
 
   if (type === 'node--event') {
     params
-      .addInclude([
-        'field_event_image.image',
-        'field_event_place',
-      ])
+      .addInclude(['field_event_image.image', 'field_event_place'])
       .addFields('node--place', ['title', 'path']);
   }
 
@@ -212,7 +208,6 @@ export async function getStaticProps(
         entity.field_webform.drupal_internal__id,
       ),
     };
-    console.log(entity.field_webform);
     additionalContent['webform'] = webformObject;
   }
 

From cabaadc5d0fa8228e7200a454604823d4b469ab5 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Mon, 8 Aug 2022 17:57:13 -0400
Subject: [PATCH 18/40] Added component wrapper for radio buttons and print
 validation msg

---
 .../components/WebformCheckboxGroup.tsx       | 29 +++++++++++++++
 .../components/WebformElementWrapper.tsx      | 30 ++++++++++++++++
 starters/basic-starter/lib/webform/types.ts   |  1 +
 starters/basic-starter/lib/webform/utils.tsx  | 27 ++++++--------
 .../pages/api/webform/submit.tsx              | 35 ++++++++-----------
 5 files changed, 85 insertions(+), 37 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
 create mode 100644 starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx

diff --git a/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx b/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
new file mode 100644
index 00000000..7475c609
--- /dev/null
+++ b/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
@@ -0,0 +1,29 @@
+import { styles } from '../utils';
+import WebformElementWrapper from './WebformElementWrapper';
+
+export const WebformCheckboxGroup = ({ element, error }) => {
+  return (
+    <WebformElementWrapper
+      labelFor={element['#title']}
+      labelClassName={element['#required'] ? 'required-field' : ''}
+      settings={null}
+      error={null}
+    >
+      {element['#options'] &&
+        Object.keys(element['#options']).map((option) => (
+          <div className="form-check" key={option}>
+            <input
+              type="radio"
+              name={element['#webform_key']}
+              id={option}
+              value={option}
+              style={styles.checkbox}
+            />
+            <label className="form-check-label">{option}</label>
+          </div>
+        ))}
+    </WebformElementWrapper>
+  );
+};
+
+export default WebformCheckboxGroup;
diff --git a/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx b/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
new file mode 100644
index 00000000..f53f151c
--- /dev/null
+++ b/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
@@ -0,0 +1,30 @@
+import { styles } from '../utils';
+
+export const WebformElementWrapper = ({
+  children,
+  labelFor,
+  labelClassName,
+  ...props
+}) => {
+  const css = `
+.required-field:after {
+    content: ' *';
+    color: red;
+}
+        `;
+  return (
+    <div {...props}>
+      <style>{css}</style>
+      <label
+        style={styles.elementLabel}
+        htmlFor={labelFor}
+        className={labelClassName}
+      >
+        {labelFor}
+      </label>
+      {children}
+    </div>
+  );
+};
+
+export default WebformElementWrapper;
diff --git a/starters/basic-starter/lib/webform/types.ts b/starters/basic-starter/lib/webform/types.ts
index e0dccd34..8b790a91 100644
--- a/starters/basic-starter/lib/webform/types.ts
+++ b/starters/basic-starter/lib/webform/types.ts
@@ -37,4 +37,5 @@ export type WebformElement = {
   '#submit__label'?: string;
   '#options'?: object;
   '#description': string;
+  '#required'?: boolean;
 };
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 8d8ffb4a..64354aa4 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -1,6 +1,7 @@
 import { CustomComponentLibrary, WebformElement } from './types';
+import WebformCheckboxGroup from './components/WebformCheckboxGroup';
 
-const styles = {
+export const styles = {
   btn: {
     backgroundColor: 'rgb(14 165 233)',
     color: 'white',
@@ -19,6 +20,10 @@ const styles = {
     margin: '4px',
     borderRadius: '4px',
   },
+  elementLabel: {
+    fontSize: '16px',
+    color: 'darkViolet',
+  },
 };
 
 export function renderWebformElement(
@@ -91,21 +96,7 @@ export function renderWebformElement(
         ))
       );
     case 'radios':
-      return (
-        element['#options'] &&
-        Object.keys(element['#options']).map((option) => (
-          <div className="form-check" key={option}>
-            <input
-              type="radio"
-              name={element['#webform_key']}
-              id={option}
-              value={option}
-              style={styles.checkbox}
-            />
-            <label className="form-check-label">{option}</label>
-          </div>
-        ))
-      );
+      return <WebformCheckboxGroup element={element} error={null} />;
     case 'select':
       return null;
     case 'webform_markup':
@@ -189,9 +180,11 @@ export async function handleSubmit(event, webform_id, webform) {
       'Content-Type': 'application/json',
     },
   });
-  if (response.ok) {
+  if (!response.ok) {
     // Show success.
   }
+  const message = await response.json();
+  console.log('API response', message);
   // Handle error.
 }
 
diff --git a/starters/basic-starter/pages/api/webform/submit.tsx b/starters/basic-starter/pages/api/webform/submit.tsx
index 77f5693a..aabccd84 100644
--- a/starters/basic-starter/pages/api/webform/submit.tsx
+++ b/starters/basic-starter/pages/api/webform/submit.tsx
@@ -5,26 +5,21 @@ export default async function handler(
   request: NextApiRequest,
   response: NextApiResponse,
 ) {
-  try {
-    if (request.method === 'POST') {
-      const url = drupal.buildUrl('/webform_rest/submit?_format=json');
-      // Submit to Drupal.
-      const result = await fetch(url.toString(), {
-        method: 'POST',
-        body: JSON.stringify(request.body),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-
-      if (!result.ok) {
-        console.log(result.json());
-        throw new Error();
-      }
-
-      response.status(200).end();
+  if (request.method === 'POST') {
+    const url = drupal.buildUrl('/webform_rest/submit?_format=json');
+    // Submit to Drupal.
+    const result = await fetch(url.toString(), {
+      method: 'POST',
+      body: JSON.stringify(request.body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (!result.ok) {
+      const message = await result.json();
+      // Send error to client.
+      return response.status(result.status).json({ message });
     }
-  } catch (error) {
-    return response.status(400).json(error.message);
+    return response.status(200);
   }
 }

From 44134a4714e4a9b42efe16be7024941f9018b78e Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Mon, 8 Aug 2022 18:54:09 -0400
Subject: [PATCH 19/40] Render validation error msg for one webform element

---
 .../basic-starter/lib/webform/Webform.tsx     | 57 ++++++++++++++--
 .../components/WebformCheckboxGroup.tsx       |  2 +-
 .../components/WebformElementWrapper.tsx      |  9 +++
 starters/basic-starter/lib/webform/utils.tsx  | 65 ++++++++++---------
 4 files changed, 97 insertions(+), 36 deletions(-)

diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/starters/basic-starter/lib/webform/Webform.tsx
index e840dd3b..83b93c97 100644
--- a/starters/basic-starter/lib/webform/Webform.tsx
+++ b/starters/basic-starter/lib/webform/Webform.tsx
@@ -1,17 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { WebformProps } from './types';
-import { handleSubmit, renderWebformElement } from './utils';
+import { formToJSON, renderWebformElement } from './utils';
+
+export class WebformError extends Error {
+  response: any;
+
+  constructor(response: any) {
+    super();
+
+    this.response = response;
+  }
+};
+
+/**
+ * Errors returned by Drupal.
+ */
+type WebformErrors = {
+  [name: string]: string;
+};
 
 export const Webform = ({
   webformObject,
   id,
   customComponents,
 }: WebformProps) => {
+  const [errors, setErrors] = useState<WebformErrors>({});
   console.log('webform object', webformObject);
+  const submitHandler = async (event) => {
+    event.preventDefault();
+    const data = formToJSON(event.target.elements);
+    // Post process serialized data:
+    // Some webform elements require specialized data formatting.
+    for (const element in webformObject.elements) {
+      if (data[element]) {
+        switch (webformObject.elements[element]['#type']) {
+          case 'checkbox':
+            data[element] = 1;
+            break;
+        }
+      }
+    }
+    const body = { ...(data as object), ...{ webform_id: id } };
+    console.log('request body', body);
+    const response = await fetch('/api/webform/submit', {
+      method: 'POST',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (!response.ok) {
+      // Show success
+    }
+    const message = await response.json();
+    setErrors(message.message.error);
+    console.log('API response', message.message.error);
+  };
+
   return (
-    <form onSubmit={(e) => handleSubmit(e, id, webformObject)}>
+    <form onSubmit={(e) => submitHandler(e)}>
       {Object.values(webformObject.elements).map((el) =>
-        renderWebformElement(el, customComponents),
+        renderWebformElement(el, customComponents, errors[el['#webform_key']]),
       )}
     </form>
   );
diff --git a/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx b/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
index 7475c609..054fd0eb 100644
--- a/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
+++ b/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
@@ -7,7 +7,7 @@ export const WebformCheckboxGroup = ({ element, error }) => {
       labelFor={element['#title']}
       labelClassName={element['#required'] ? 'required-field' : ''}
       settings={null}
-      error={null}
+      error={error}
     >
       {element['#options'] &&
         Object.keys(element['#options']).map((option) => (
diff --git a/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx b/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
index f53f151c..020c88b5 100644
--- a/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
+++ b/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
@@ -4,12 +4,16 @@ export const WebformElementWrapper = ({
   children,
   labelFor,
   labelClassName,
+  error,
   ...props
 }) => {
   const css = `
 .required-field:after {
     content: ' *';
     color: red;
+}
+.invalid-feedback {
+  color: red;
 }
         `;
   return (
@@ -23,6 +27,11 @@ export const WebformElementWrapper = ({
         {labelFor}
       </label>
       {children}
+      {error && (
+        <div className="form-text invalid-feedback" {...props}>
+          {error}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 64354aa4..f96075a3 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -29,7 +29,11 @@ export const styles = {
 export function renderWebformElement(
   element: WebformElement,
   customComponents: CustomComponentLibrary,
+  error?: string,
 ) {
+  const customComponentAPI = {
+    error,
+  };
   // Render using custom component if provided:
   if (customComponents && customComponents[element['#type']]) {
     const CustomComponent = customComponents[element['#type']];
@@ -96,7 +100,7 @@ export function renderWebformElement(
         ))
       );
     case 'radios':
-      return <WebformCheckboxGroup element={element} error={null} />;
+      return <WebformCheckboxGroup element={element} {...customComponentAPI} />;
     case 'select':
       return null;
     case 'webform_markup':
@@ -139,7 +143,7 @@ const getSelectValues = (options: HTMLOptionsCollection) =>
     [],
   );
 
-const formToJSON = (elements: HTMLFormControlsCollection) =>
+export const formToJSON = (elements: HTMLFormControlsCollection) =>
   [].reduce.call(
     elements,
     (data, element) => {
@@ -158,35 +162,34 @@ const formToJSON = (elements: HTMLFormControlsCollection) =>
     {},
   );
 
-export async function handleSubmit(event, webform_id, webform) {
-  event.preventDefault();
-  const data = formToJSON(event.target.elements);
-  // Post process serialized data:
-  // Some webform elements require specialized data formatting.
-  for (const element in Object.keys(webform.elements)) {
-    if (data[element] && data[element].name) {
-      switch (webform.element.type) {
-        case 'checkbox':
-          data[webform.element] = 1;
-          break;
-      }
-    }
-  }
-  const body = { ...(data as object), ...{ webform_id: webform_id } };
-  const response = await fetch('/api/webform/submit', {
-    method: 'POST',
-    body: JSON.stringify(body),
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-  if (!response.ok) {
-    // Show success.
-  }
-  const message = await response.json();
-  console.log('API response', message);
-  // Handle error.
-}
+// export async function handleSubmit(event, webform_id, webform) {
+//   event.preventDefault();
+//   const data = formToJSON(event.target.elements);
+//   // Post process serialized data:
+//   // Some webform elements require specialized data formatting.
+//   for (const element in Object.keys(webform.elements)) {
+//     if (data[element] && data[element].name) {
+//       switch (webform.element.type) {
+//         case 'checkbox':
+//           data[webform.element] = 1;
+//           break;
+//       }
+//     }
+//   }
+//   const body = { ...(data as object), ...{ webform_id: webform_id } };
+//   const response = await fetch('/api/webform/submit', {
+//     method: 'POST',
+//     body: JSON.stringify(body),
+//     headers: {
+//       'Content-Type': 'application/json',
+//     },
+//   });
+//   if (!response.ok) {
+//     // Show success
+//   }
+//   const message = await response.json();
+//   console.log('API response', message);
+// }
 
 export async function getWebformFields(id) {
   const response = await fetch(`http://localhost:3000/api/webform/${id}`);

From c9e0cf33054d6a1e6b4537cc86aea10977994942 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 9 Aug 2022 16:25:50 -0400
Subject: [PATCH 20/40] Added more wrapper components for webform elements

---
 .../components/WebformCheckboxGroup.tsx       |  4 +-
 .../components/WebformElementWrapper.tsx      |  2 +-
 .../lib/webform/components/WebformText.tsx    | 22 ++++++++++
 .../webform/components/WebformTextArea.tsx    | 22 ++++++++++
 starters/basic-starter/lib/webform/utils.tsx  | 44 ++++++-------------
 5 files changed, 61 insertions(+), 33 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/components/WebformText.tsx
 create mode 100644 starters/basic-starter/lib/webform/components/WebformTextArea.tsx

diff --git a/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx b/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
index 054fd0eb..5347e4cf 100644
--- a/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
+++ b/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
@@ -5,7 +5,7 @@ export const WebformCheckboxGroup = ({ element, error }) => {
   return (
     <WebformElementWrapper
       labelFor={element['#title']}
-      labelClassName={element['#required'] ? 'required-field' : ''}
+      labelClassName={element['#required']}
       settings={null}
       error={error}
     >
@@ -13,7 +13,7 @@ export const WebformCheckboxGroup = ({ element, error }) => {
         Object.keys(element['#options']).map((option) => (
           <div className="form-check" key={option}>
             <input
-              type="radio"
+              type={element.type}
               name={element['#webform_key']}
               id={option}
               value={option}
diff --git a/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx b/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
index 020c88b5..1bd33012 100644
--- a/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
+++ b/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
@@ -22,7 +22,7 @@ export const WebformElementWrapper = ({
       <label
         style={styles.elementLabel}
         htmlFor={labelFor}
-        className={labelClassName}
+        className={labelClassName ? 'required-field' : ''}
       >
         {labelFor}
       </label>
diff --git a/starters/basic-starter/lib/webform/components/WebformText.tsx b/starters/basic-starter/lib/webform/components/WebformText.tsx
new file mode 100644
index 00000000..208c4597
--- /dev/null
+++ b/starters/basic-starter/lib/webform/components/WebformText.tsx
@@ -0,0 +1,22 @@
+import WebformElementWrapper from './WebformElementWrapper';
+import { styles } from '../utils';
+
+export const WebformText = ({ element, error }) => {
+  return (
+    <WebformElementWrapper
+      labelFor={element['#title']}
+      labelClassName={element['#required']}
+      settings={null}
+      error={error}
+    >
+      <input
+        placeholder={element['#title']}
+        id={element['#webform_key']}
+        name={element['#webform_key']}
+        style={styles.textArea}
+      />
+    </WebformElementWrapper>
+  );
+};
+
+export default WebformText;
diff --git a/starters/basic-starter/lib/webform/components/WebformTextArea.tsx b/starters/basic-starter/lib/webform/components/WebformTextArea.tsx
new file mode 100644
index 00000000..e6cbd7be
--- /dev/null
+++ b/starters/basic-starter/lib/webform/components/WebformTextArea.tsx
@@ -0,0 +1,22 @@
+import WebformElementWrapper from './WebformElementWrapper';
+import { styles } from '../utils';
+
+export const WebformText = ({ element, error }) => {
+  return (
+    <WebformElementWrapper
+      labelFor={element['#title']}
+      labelClassName={element['#required']}
+      settings={null}
+      error={error}
+    >
+      <textarea
+        placeholder={element['#title']}
+        id={element['#webform_key']}
+        name={element['#webform_key']}
+        style={styles.textArea}
+      />
+    </WebformElementWrapper>
+  );
+};
+
+export default WebformText;
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index f96075a3..3d6c1332 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -1,5 +1,7 @@
 import { CustomComponentLibrary, WebformElement } from './types';
 import WebformCheckboxGroup from './components/WebformCheckboxGroup';
+import WebformText from './components/WebformText';
+import WebformTextArea from "./components/WebformTextArea";
 
 export const styles = {
   btn: {
@@ -45,23 +47,9 @@ export function renderWebformElement(
     case 'number':
     case 'email':
     case 'hidden':
-      return (
-        <input
-          placeholder={element['#title']}
-          id={element['#webform_key']}
-          name={element['#webform_key']}
-          style={styles.textArea}
-        />
-      );
+      return <WebformText element={element} error={error} />;
     case 'textarea':
-      return (
-        <textarea
-          placeholder={element['#title']}
-          id={element['#webform_key']}
-          name={element['#webform_key']}
-          style={styles.textArea}
-        />
-      );
+      return <WebformTextArea element={element} error={error} />;
     case 'checkbox':
       return (
         <div>
@@ -85,22 +73,18 @@ export function renderWebformElement(
       );
     case 'checkboxes':
       return (
-        element['#options'] &&
-        Object.keys(element['#options']).map((option) => (
-          <div id={element['#webform_key']} key={option}>
-            <input
-              type="checkbox"
-              name={element['#webform_key']}
-              id={option}
-              value={option}
-              style={styles.checkbox}
-            />
-            <label className="form-check-label">{option}</label>
-          </div>
-        ))
+        <WebformCheckboxGroup
+          element={{ ...element, type: 'checkbox' }}
+          {...customComponentAPI}
+        />
       );
     case 'radios':
-      return <WebformCheckboxGroup element={element} {...customComponentAPI} />;
+      return (
+        <WebformCheckboxGroup
+          element={{ ...element, type: 'radio' }}
+          {...customComponentAPI}
+        />
+      );
     case 'select':
       return null;
     case 'webform_markup':

From 45bcb59eb706fb6bba2831d70ee80f99532d771a Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 9 Aug 2022 18:15:53 -0400
Subject: [PATCH 21/40] added wrapper for custom component and checkbox

---
 .../webform/components/WebformCheckbox.tsx    | 25 +++++++++
 .../lib/webform/components/WebformDate.tsx    | 14 ++++-
 starters/basic-starter/lib/webform/utils.tsx  | 53 ++++---------------
 3 files changed, 46 insertions(+), 46 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/components/WebformCheckbox.tsx

diff --git a/starters/basic-starter/lib/webform/components/WebformCheckbox.tsx b/starters/basic-starter/lib/webform/components/WebformCheckbox.tsx
new file mode 100644
index 00000000..7f483cda
--- /dev/null
+++ b/starters/basic-starter/lib/webform/components/WebformCheckbox.tsx
@@ -0,0 +1,25 @@
+import WebformElementWrapper from './WebformElementWrapper';
+import { styles } from '../utils';
+
+export const WebformCheckbox = ({ element, error }) => {
+  return (
+    <WebformElementWrapper
+      labelFor={element['#title']}
+      labelClassName={element['#required']}
+      settings={null}
+      error={error}
+    >
+      <div>
+        <input
+          type={element.type}
+          id={element['#webform_key']}
+          name={element['#webform_key']}
+          style={styles.checkbox}
+        />
+        <label className="form-check-label">{element['#description']}</label>
+      </div>
+    </WebformElementWrapper>
+  );
+};
+
+export default WebformCheckbox;
diff --git a/starters/basic-starter/lib/webform/components/WebformDate.tsx b/starters/basic-starter/lib/webform/components/WebformDate.tsx
index 6d0b9547..7cbe3662 100644
--- a/starters/basic-starter/lib/webform/components/WebformDate.tsx
+++ b/starters/basic-starter/lib/webform/components/WebformDate.tsx
@@ -1,6 +1,16 @@
 import React from 'react';
+import WebformElementWrapper from './WebformElementWrapper';
 
 // Example custom component
-export const WebformDate = () => {
-  return <input type="date" name="date" min="2022-01-01" max="2022-12-31" />;
+export const WebformDate = ({ element, error }) => {
+  return (
+    <WebformElementWrapper
+      labelFor={element['#title']}
+      labelClassName={element['#required']}
+      settings={null}
+      error={error}
+    >
+      <input type="date" name="date" min="2022-01-01" max="2022-12-31" />
+    </WebformElementWrapper>
+  );
 };
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 3d6c1332..457bc093 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -1,7 +1,8 @@
 import { CustomComponentLibrary, WebformElement } from './types';
 import WebformCheckboxGroup from './components/WebformCheckboxGroup';
 import WebformText from './components/WebformText';
-import WebformTextArea from "./components/WebformTextArea";
+import WebformTextArea from './components/WebformTextArea';
+import WebformCheckbox from './components/WebformCheckbox';
 
 export const styles = {
   btn: {
@@ -52,23 +53,16 @@ export function renderWebformElement(
       return <WebformTextArea element={element} error={error} />;
     case 'checkbox':
       return (
-        <div>
-          <input
-            type="checkbox"
-            id={element['#webform_key']}
-            name={element['#webform_key']}
-            style={styles.checkbox}
-          />
-          <label className="form-check-label">{element['#description']}</label>
-        </div>
+        <WebformCheckbox
+          element={{ ...element, type: 'checkbox' }}
+          error={error}
+        />
       );
     case 'radio':
       return (
-        <input
-          type="radio"
-          id={element['#webform_key']}
-          name={element['#webform_key']}
-          style={styles.checkbox}
+        <WebformCheckbox
+          element={{ ...element, type: 'radio' }}
+          error={error}
         />
       );
     case 'checkboxes':
@@ -146,35 +140,6 @@ export const formToJSON = (elements: HTMLFormControlsCollection) =>
     {},
   );
 
-// export async function handleSubmit(event, webform_id, webform) {
-//   event.preventDefault();
-//   const data = formToJSON(event.target.elements);
-//   // Post process serialized data:
-//   // Some webform elements require specialized data formatting.
-//   for (const element in Object.keys(webform.elements)) {
-//     if (data[element] && data[element].name) {
-//       switch (webform.element.type) {
-//         case 'checkbox':
-//           data[webform.element] = 1;
-//           break;
-//       }
-//     }
-//   }
-//   const body = { ...(data as object), ...{ webform_id: webform_id } };
-//   const response = await fetch('/api/webform/submit', {
-//     method: 'POST',
-//     body: JSON.stringify(body),
-//     headers: {
-//       'Content-Type': 'application/json',
-//     },
-//   });
-//   if (!response.ok) {
-//     // Show success
-//   }
-//   const message = await response.json();
-//   console.log('API response', message);
-// }
-
 export async function getWebformFields(id) {
   const response = await fetch(`http://localhost:3000/api/webform/${id}`);
   return response.json();

From 07f85c58b230d5da2bbfbb716ee84e7189f62da8 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 9 Aug 2022 18:18:35 -0400
Subject: [PATCH 22/40] prettier

---
 starters/basic-starter/lib/webform/Webform.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/starters/basic-starter/lib/webform/Webform.tsx
index 83b93c97..11e9214c 100644
--- a/starters/basic-starter/lib/webform/Webform.tsx
+++ b/starters/basic-starter/lib/webform/Webform.tsx
@@ -10,7 +10,7 @@ export class WebformError extends Error {
 
     this.response = response;
   }
-};
+}
 
 /**
  * Errors returned by Drupal.

From 1673ff2fd66ddeb82aba8acbd7db7d435a803fd1 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 10 Aug 2022 14:54:37 -0400
Subject: [PATCH 23/40] add webform debug fallback component and some css for
 my sanity

---
 .../basic-starter/lib/webform/Webform.tsx     |  4 ++--
 .../lib/webform/components/WebformDebug.tsx   | 10 ++++++++++
 starters/basic-starter/lib/webform/utils.tsx  | 20 ++++++++++++++-----
 3 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 starters/basic-starter/lib/webform/components/WebformDebug.tsx

diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/starters/basic-starter/lib/webform/Webform.tsx
index 11e9214c..01250abc 100644
--- a/starters/basic-starter/lib/webform/Webform.tsx
+++ b/starters/basic-starter/lib/webform/Webform.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { WebformProps } from './types';
-import { formToJSON, renderWebformElement } from './utils';
+import {formToJSON, renderWebformElement, styles} from './utils';
 
 export class WebformError extends Error {
   response: any;
@@ -58,7 +58,7 @@ export const Webform = ({
   };
 
   return (
-    <form onSubmit={(e) => submitHandler(e)}>
+    <form style={styles.form} onSubmit={(e) => submitHandler(e)}>
       {Object.values(webformObject.elements).map((el) =>
         renderWebformElement(el, customComponents, errors[el['#webform_key']]),
       )}
diff --git a/starters/basic-starter/lib/webform/components/WebformDebug.tsx b/starters/basic-starter/lib/webform/components/WebformDebug.tsx
new file mode 100644
index 00000000..3c4a39c3
--- /dev/null
+++ b/starters/basic-starter/lib/webform/components/WebformDebug.tsx
@@ -0,0 +1,10 @@
+export const WebformDebug = ({ element, error }) => {
+  return (
+    <code>
+      {error}
+      <pre>{JSON.stringify(element, null, 2)}</pre>
+    </code>
+  );
+};
+
+export default WebformDebug;
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 457bc093..0aebc67d 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -1,8 +1,13 @@
-import { CustomComponentLibrary, WebformElement } from './types';
+import {
+  CustomComponentLibrary,
+  DEFAULT_SUBMIT_LABEL,
+  WebformElement,
+} from './types';
 import WebformCheckboxGroup from './components/WebformCheckboxGroup';
 import WebformText from './components/WebformText';
 import WebformTextArea from './components/WebformTextArea';
 import WebformCheckbox from './components/WebformCheckbox';
+import WebformDebug from './components/WebformDebug';
 
 export const styles = {
   btn: {
@@ -27,6 +32,11 @@ export const styles = {
     fontSize: '16px',
     color: 'darkViolet',
   },
+  form: {
+    border: '1px solid darkViolet',
+    padding: '20px',
+    backgroundColor: 'lavender',
+  },
 };
 
 export function renderWebformElement(
@@ -40,7 +50,7 @@ export function renderWebformElement(
   // Render using custom component if provided:
   if (customComponents && customComponents[element['#type']]) {
     const CustomComponent = customComponents[element['#type']];
-    return <CustomComponent element={element} />;
+    return <CustomComponent element={element} {...customComponentAPI} />;
   }
   switch (element['#type']) {
     case 'textfield':
@@ -87,12 +97,12 @@ export function renderWebformElement(
     case 'webform_actions':
       return (
         <button type="submit" style={styles.btn}>
-          {element['#submit__label']}
+          {element['#submit__label'] || DEFAULT_SUBMIT_LABEL}
         </button>
       );
+    // Render as JSON string if unknown
     default:
-      // @todo: add better default
-      return 'Element not supported';
+      return <WebformDebug element={element} error={error}></WebformDebug>;
   }
 }
 

From 87c025e01b23ba6cddc4d1dd7aeef10ea466a052 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 10 Aug 2022 16:35:09 -0400
Subject: [PATCH 24/40] Added error and success form message

---
 .../basic-starter/lib/webform/Webform.tsx     | 23 +++++++++++++++----
 starters/basic-starter/lib/webform/utils.tsx  | 20 ++++++++++++----
 .../pages/api/webform/submit.tsx              |  3 ++-
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/starters/basic-starter/lib/webform/Webform.tsx
index 01250abc..9c68f4d9 100644
--- a/starters/basic-starter/lib/webform/Webform.tsx
+++ b/starters/basic-starter/lib/webform/Webform.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { WebformProps } from './types';
-import {formToJSON, renderWebformElement, styles} from './utils';
+import { formToJSON, renderWebformElement, styles } from './utils';
 
 export class WebformError extends Error {
   response: any;
@@ -25,7 +25,9 @@ export const Webform = ({
   customComponents,
 }: WebformProps) => {
   const [errors, setErrors] = useState<WebformErrors>({});
+  const [status, setStatus] = useState<'error' | 'success'>();
   console.log('webform object', webformObject);
+
   const submitHandler = async (event) => {
     event.preventDefault();
     const data = formToJSON(event.target.elements);
@@ -50,15 +52,26 @@ export const Webform = ({
       },
     });
     if (!response.ok) {
-      // Show success
+      setStatus('error');
+      const message = await response.json();
+      setErrors(message.message.error);
+    } else {
+      setStatus('success');
+      // Clear webform element errors.
+      setErrors({});
     }
-    const message = await response.json();
-    setErrors(message.message.error);
-    console.log('API response', message.message.error);
   };
 
   return (
     <form style={styles.form} onSubmit={(e) => submitHandler(e)}>
+      {status === 'error' ? (
+        <div style={styles.formError}>An error occurred. Please try again.</div>
+      ) : null}
+      {status === 'success' ? (
+        <div style={styles.formSuccess}>
+          Your submission has been sent. Thank you.
+        </div>
+      ) : null}
       {Object.values(webformObject.elements).map((el) =>
         renderWebformElement(el, customComponents, errors[el['#webform_key']]),
       )}
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/starters/basic-starter/lib/webform/utils.tsx
index 0aebc67d..4e6750b9 100644
--- a/starters/basic-starter/lib/webform/utils.tsx
+++ b/starters/basic-starter/lib/webform/utils.tsx
@@ -26,16 +26,28 @@ export const styles = {
   textArea: {
     border: '2px solid #e5e7eb',
     margin: '4px',
-    borderRadius: '4px',
+    borderRadius: '0.375rem',
   },
   elementLabel: {
     fontSize: '16px',
     color: 'darkViolet',
   },
   form: {
-    border: '1px solid darkViolet',
     padding: '20px',
     backgroundColor: 'lavender',
+    borderRadius: '0.375rem',
+  },
+  formError: {
+    backgroundColor: '#FEE2E2',
+    color: 'red',
+    padding: '10px',
+    borderRadius: '0.375rem',
+  },
+  formSuccess: {
+    backgroundColor: '#DCFCE7',
+    color: 'green',
+    padding: '10px',
+    borderRadius: '0.375rem',
   },
 };
 
@@ -100,9 +112,9 @@ export function renderWebformElement(
           {element['#submit__label'] || DEFAULT_SUBMIT_LABEL}
         </button>
       );
-    // Render as JSON string if unknown
+    // Render as JSON string if unknown.
     default:
-      return <WebformDebug element={element} error={error}></WebformDebug>;
+      return <WebformDebug element={element} error={error} />;
   }
 }
 
diff --git a/starters/basic-starter/pages/api/webform/submit.tsx b/starters/basic-starter/pages/api/webform/submit.tsx
index aabccd84..305ca830 100644
--- a/starters/basic-starter/pages/api/webform/submit.tsx
+++ b/starters/basic-starter/pages/api/webform/submit.tsx
@@ -20,6 +20,7 @@ export default async function handler(
       // Send error to client.
       return response.status(result.status).json({ message });
     }
-    return response.status(200);
+    response.end(JSON.stringify(result));
+    response.status(200);
   }
 }

From 8b11f3397d7bd5316453331298c21f430c61e466 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 11 Aug 2022 17:49:46 -0400
Subject: [PATCH 25/40] Moved webforms to different pkg and added README

---
 packages/nextjs-drupal-webform/.eslintrc.json |  3 ++
 packages/nextjs-drupal-webform/README.md      | 47 +++++++++++++++++++
 .../examples}/WebformDate.tsx                 |  2 +-
 packages/nextjs-drupal-webform/next-env.d.ts  |  5 ++
 packages/nextjs-drupal-webform/package.json   | 33 +++++++++++++
 .../pages/api/webform/[id].ts                 |  2 +-
 .../pages/api/webform/submit.tsx              |  2 +-
 .../nextjs-drupal-webform/src}/Webform.tsx    |  4 +-
 .../src}/components/WebformCheckbox.tsx       |  3 +-
 .../src}/components/WebformCheckboxGroup.tsx  |  0
 .../src}/components/WebformDebug.tsx          |  0
 .../src}/components/WebformElementWrapper.tsx |  0
 .../src}/components/WebformText.tsx           |  0
 .../src}/components/WebformTextArea.tsx       |  0
 packages/nextjs-drupal-webform/src/drupal.ts  | 16 +++++++
 .../nextjs-drupal-webform/src}/types.ts       |  2 +
 .../nextjs-drupal-webform/src}/utils.tsx      |  0
 packages/nextjs-drupal-webform/tsconfig.json  | 22 +++++++++
 .../components/node--article.tsx              |  4 +-
 .../basic-starter/components/node--event.tsx  |  2 +-
 .../basic-starter/components/node--person.tsx |  2 +-
 .../basic-starter/components/node--place.tsx  |  2 +-
 starters/basic-starter/pages/[...slug].tsx    |  4 +-
 23 files changed, 142 insertions(+), 13 deletions(-)
 create mode 100644 packages/nextjs-drupal-webform/.eslintrc.json
 create mode 100644 packages/nextjs-drupal-webform/README.md
 rename {starters/basic-starter/lib/webform/components => packages/nextjs-drupal-webform/examples}/WebformDate.tsx (83%)
 create mode 100644 packages/nextjs-drupal-webform/next-env.d.ts
 create mode 100644 packages/nextjs-drupal-webform/package.json
 rename {starters/basic-starter => packages/nextjs-drupal-webform}/pages/api/webform/[id].ts (90%)
 rename {starters/basic-starter => packages/nextjs-drupal-webform}/pages/api/webform/submit.tsx (93%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/Webform.tsx (97%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/components/WebformCheckbox.tsx (82%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/components/WebformCheckboxGroup.tsx (100%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/components/WebformDebug.tsx (100%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/components/WebformElementWrapper.tsx (100%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/components/WebformText.tsx (100%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/components/WebformTextArea.tsx (100%)
 create mode 100644 packages/nextjs-drupal-webform/src/drupal.ts
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/types.ts (95%)
 rename {starters/basic-starter/lib/webform => packages/nextjs-drupal-webform/src}/utils.tsx (100%)
 create mode 100644 packages/nextjs-drupal-webform/tsconfig.json

diff --git a/packages/nextjs-drupal-webform/.eslintrc.json b/packages/nextjs-drupal-webform/.eslintrc.json
new file mode 100644
index 00000000..bffb357a
--- /dev/null
+++ b/packages/nextjs-drupal-webform/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/packages/nextjs-drupal-webform/README.md b/packages/nextjs-drupal-webform/README.md
new file mode 100644
index 00000000..2eb57100
--- /dev/null
+++ b/packages/nextjs-drupal-webform/README.md
@@ -0,0 +1,47 @@
+# Next.js Drupal Webform
+
+Plugin for integrating the [Webform](https://www.drupal.org/project/webform) module with Next.js applications.
+
+## Setup 
+1. Install the [Webform](https://www.drupal.org/project/webform) and [Webform REST](https://www.drupal.org/project/webform_rest) modules.
+2. Enable REST resources: "Webform Submit", "Webform Elements", "Webform Submission" on /admin/config/services/rest.
+3. Set Webform permissions on RESTful Web Services  `/admin/people/permissions#module-rest` for Anonymous Users.
+4. Create your webform. 
+5. @todo add how to get the field_webform from entity?
+
+## Example
+```
+<Webform
+webformObject={additionalContent.webform}
+id={additionalContent.webform.drupal_internal__id}
+key={additionalContent.webform.drupal_internal__id}
+/>
+```
+
+
+## Using custom components
+1. Create your custom component
+```
+// Example custom component
+export const WebformDate = ({ element, error }) => {
+  return (
+    <WebformElementWrapper
+      labelFor={element['#title']}
+      labelClassName={element['#required']}
+      settings={null}
+      error={error}
+    >
+      <input type="date" name="date" min="2022-01-01" max="2022-12-31" />
+    </WebformElementWrapper>
+  );
+};
+```
+2. Pass in your component(s) to the `customComponents` property.
+```
+   <Webform
+   webformObject={additionalContent.webform}
+   id={additionalContent.webform.drupal_internal__id}
+   key={additionalContent.webform.drupal_internal__id}
+   customComponents={{ date: WebformDate }}
+   />
+```
diff --git a/starters/basic-starter/lib/webform/components/WebformDate.tsx b/packages/nextjs-drupal-webform/examples/WebformDate.tsx
similarity index 83%
rename from starters/basic-starter/lib/webform/components/WebformDate.tsx
rename to packages/nextjs-drupal-webform/examples/WebformDate.tsx
index 7cbe3662..c7a7aef5 100644
--- a/starters/basic-starter/lib/webform/components/WebformDate.tsx
+++ b/packages/nextjs-drupal-webform/examples/WebformDate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import WebformElementWrapper from './WebformElementWrapper';
+import WebformElementWrapper from '../src/components/WebformElementWrapper';
 
 // Example custom component
 export const WebformDate = ({ element, error }) => {
diff --git a/packages/nextjs-drupal-webform/next-env.d.ts b/packages/nextjs-drupal-webform/next-env.d.ts
new file mode 100644
index 00000000..4f11a03d
--- /dev/null
+++ b/packages/nextjs-drupal-webform/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/nextjs-drupal-webform/package.json b/packages/nextjs-drupal-webform/package.json
new file mode 100644
index 00000000..fd225619
--- /dev/null
+++ b/packages/nextjs-drupal-webform/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "nextjs-drupal-webform",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.0",
+    "classnames": "^2.3.1",
+    "drupal-jsonapi-params": "^2.1.0",
+    "html-react-parser": "^1.4.8",
+    "next": "^12.2.0",
+    "next-acms": "^1.0.0-beta1",
+    "next-drupal": "^1.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sharp": "^0.30.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.9",
+    "@types/node": "^18.0.6",
+    "@types/react": "^17.0.4",
+    "autoprefixer": "^10.4.2",
+    "eslint": "^8.20.0",
+    "eslint-config-next": "^12.2.3",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.15",
+    "typescript": "^4.6.0"
+  }
+}
diff --git a/starters/basic-starter/pages/api/webform/[id].ts b/packages/nextjs-drupal-webform/pages/api/webform/[id].ts
similarity index 90%
rename from starters/basic-starter/pages/api/webform/[id].ts
rename to packages/nextjs-drupal-webform/pages/api/webform/[id].ts
index 14d4ef57..e5b7d24e 100644
--- a/starters/basic-starter/pages/api/webform/[id].ts
+++ b/packages/nextjs-drupal-webform/pages/api/webform/[id].ts
@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { drupal } from '../../../lib/drupal';
+import { drupal } from '../../../src/drupal';
 
 export default async function handler(
   request: NextApiRequest,
diff --git a/starters/basic-starter/pages/api/webform/submit.tsx b/packages/nextjs-drupal-webform/pages/api/webform/submit.tsx
similarity index 93%
rename from starters/basic-starter/pages/api/webform/submit.tsx
rename to packages/nextjs-drupal-webform/pages/api/webform/submit.tsx
index 305ca830..74d99e68 100644
--- a/starters/basic-starter/pages/api/webform/submit.tsx
+++ b/packages/nextjs-drupal-webform/pages/api/webform/submit.tsx
@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { drupal } from '../../../lib/drupal';
+import { drupal } from '../../../src/drupal';
 
 export default async function handler(
   request: NextApiRequest,
diff --git a/starters/basic-starter/lib/webform/Webform.tsx b/packages/nextjs-drupal-webform/src/Webform.tsx
similarity index 97%
rename from starters/basic-starter/lib/webform/Webform.tsx
rename to packages/nextjs-drupal-webform/src/Webform.tsx
index 9c68f4d9..2074a21d 100644
--- a/starters/basic-starter/lib/webform/Webform.tsx
+++ b/packages/nextjs-drupal-webform/src/Webform.tsx
@@ -3,9 +3,9 @@ import { WebformProps } from './types';
 import { formToJSON, renderWebformElement, styles } from './utils';
 
 export class WebformError extends Error {
-  response: any;
+  response: string;
 
-  constructor(response: any) {
+  constructor(response: string) {
     super();
 
     this.response = response;
diff --git a/starters/basic-starter/lib/webform/components/WebformCheckbox.tsx b/packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx
similarity index 82%
rename from starters/basic-starter/lib/webform/components/WebformCheckbox.tsx
rename to packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx
index 7f483cda..bb9e84d7 100644
--- a/starters/basic-starter/lib/webform/components/WebformCheckbox.tsx
+++ b/packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx
@@ -1,7 +1,8 @@
 import WebformElementWrapper from './WebformElementWrapper';
 import { styles } from '../utils';
+import { WebformCustomComponent } from '../types';
 
-export const WebformCheckbox = ({ element, error }) => {
+export const WebformCheckbox: WebformCustomComponent = ({ element, error }) => {
   return (
     <WebformElementWrapper
       labelFor={element['#title']}
diff --git a/starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx b/packages/nextjs-drupal-webform/src/components/WebformCheckboxGroup.tsx
similarity index 100%
rename from starters/basic-starter/lib/webform/components/WebformCheckboxGroup.tsx
rename to packages/nextjs-drupal-webform/src/components/WebformCheckboxGroup.tsx
diff --git a/starters/basic-starter/lib/webform/components/WebformDebug.tsx b/packages/nextjs-drupal-webform/src/components/WebformDebug.tsx
similarity index 100%
rename from starters/basic-starter/lib/webform/components/WebformDebug.tsx
rename to packages/nextjs-drupal-webform/src/components/WebformDebug.tsx
diff --git a/starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx b/packages/nextjs-drupal-webform/src/components/WebformElementWrapper.tsx
similarity index 100%
rename from starters/basic-starter/lib/webform/components/WebformElementWrapper.tsx
rename to packages/nextjs-drupal-webform/src/components/WebformElementWrapper.tsx
diff --git a/starters/basic-starter/lib/webform/components/WebformText.tsx b/packages/nextjs-drupal-webform/src/components/WebformText.tsx
similarity index 100%
rename from starters/basic-starter/lib/webform/components/WebformText.tsx
rename to packages/nextjs-drupal-webform/src/components/WebformText.tsx
diff --git a/starters/basic-starter/lib/webform/components/WebformTextArea.tsx b/packages/nextjs-drupal-webform/src/components/WebformTextArea.tsx
similarity index 100%
rename from starters/basic-starter/lib/webform/components/WebformTextArea.tsx
rename to packages/nextjs-drupal-webform/src/components/WebformTextArea.tsx
diff --git a/packages/nextjs-drupal-webform/src/drupal.ts b/packages/nextjs-drupal-webform/src/drupal.ts
new file mode 100644
index 00000000..22540455
--- /dev/null
+++ b/packages/nextjs-drupal-webform/src/drupal.ts
@@ -0,0 +1,16 @@
+import { DrupalClient } from 'next-drupal';
+
+export const drupal = new DrupalClient(
+  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
+  {
+    previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
+    auth: {
+      clientId: process.env.DRUPAL_CLIENT_ID,
+      clientSecret: process.env.DRUPAL_CLIENT_SECRET,
+    },
+    withAuth: true,
+    // @see https://github.com/vercel/next.js/discussions/32238
+    // @see https://github.com/vercel/next.js/blob/d895a50abbc8f91726daa2d7ebc22c58f58aabbb/packages/next/server/api-utils/node.ts#L504
+    forceIframeSameSiteCookie: process.env.NODE_ENV === 'development',
+  },
+);
diff --git a/starters/basic-starter/lib/webform/types.ts b/packages/nextjs-drupal-webform/src/types.ts
similarity index 95%
rename from starters/basic-starter/lib/webform/types.ts
rename to packages/nextjs-drupal-webform/src/types.ts
index 8b790a91..f0a5444a 100644
--- a/starters/basic-starter/lib/webform/types.ts
+++ b/packages/nextjs-drupal-webform/src/types.ts
@@ -38,4 +38,6 @@ export type WebformElement = {
   '#options'?: object;
   '#description': string;
   '#required'?: boolean;
+  // checkbox or radio
+  type: string;
 };
diff --git a/starters/basic-starter/lib/webform/utils.tsx b/packages/nextjs-drupal-webform/src/utils.tsx
similarity index 100%
rename from starters/basic-starter/lib/webform/utils.tsx
rename to packages/nextjs-drupal-webform/src/utils.tsx
diff --git a/packages/nextjs-drupal-webform/tsconfig.json b/packages/nextjs-drupal-webform/tsconfig.json
new file mode 100644
index 00000000..2876951a
--- /dev/null
+++ b/packages/nextjs-drupal-webform/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "incremental": true
+  },
+  "include": ["**/*.ts, **/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 0bd50f7d..fcd6cb62 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { Webform } from '../lib/webform/Webform';
-import { WebformDate } from '../lib/webform/components/WebformDate';
+import { Webform } from 'nextjs-drupal-webform/src/Webform';
+import { WebformDate } from 'nextjs-drupal-webform/examples/WebformDate';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   return (
diff --git a/starters/basic-starter/components/node--event.tsx b/starters/basic-starter/components/node--event.tsx
index 4814f31b..c5e72db8 100644
--- a/starters/basic-starter/components/node--event.tsx
+++ b/starters/basic-starter/components/node--event.tsx
@@ -4,7 +4,7 @@ import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 
-export function NodeEvent({ node, additionalContent, ...props }) {
+export function NodeEvent({ node, ...props }) {
   return (
     <article className="container px-6 py-10 mx-auto" {...props}>
       <div className="grid-cols-2 gap-10 p-4 mx-auto border rounded-md md:grid">
diff --git a/starters/basic-starter/components/node--person.tsx b/starters/basic-starter/components/node--person.tsx
index 95909955..6fcbebb5 100644
--- a/starters/basic-starter/components/node--person.tsx
+++ b/starters/basic-starter/components/node--person.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 
-export function NodePerson({ node, additionalContent, ...props }) {
+export function NodePerson({ node, ...props }) {
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
       <div className="grid items-center justify-center gap-4 text-center md:text-left md:grid-cols-2">
diff --git a/starters/basic-starter/components/node--place.tsx b/starters/basic-starter/components/node--place.tsx
index a4fe62d5..a520348a 100644
--- a/starters/basic-starter/components/node--place.tsx
+++ b/starters/basic-starter/components/node--place.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
 
-export function NodePlace({ node, additionalContent, ...props }) {
+export function NodePlace({ node, ...props }) {
   return (
     <article {...props}>
       <div className="grid items-start w-full max-w-4xl gap-10 px-6 pt-12 mx-auto md:grid-cols-2">
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 2e94ce24..1e0b4f08 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -19,8 +19,8 @@ import { TaxonomyEvent } from '../components/taxonomy/taxonomy--event_type';
 import { TaxonomyPlace } from '../components/taxonomy/taxonomy--place_type';
 import { getPrioritizedStaticPathsFromContext } from '../lib/get-prioritized-static-paths';
 import { GetStaticPathsContext } from 'next/types';
-import { getWebformFields } from '../lib/webform/utils';
-import { WebformObject } from '../lib/webform/types';
+import { getWebformFields } from 'nextjs-drupal-webform/src/utils';
+import { WebformObject } from 'nextjs-drupal-webform/src/types';
 
 // List of all the entity types handled by this route.
 const ENTITY_TYPES = [

From bda6dfbe76812ba01e08e0ac37a2a04ba17e7be9 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 11 Aug 2022 18:05:10 -0400
Subject: [PATCH 26/40] add back line

---
 starters/basic-starter/components/node--place.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/starters/basic-starter/components/node--place.tsx b/starters/basic-starter/components/node--place.tsx
index a520348a..35681ebd 100644
--- a/starters/basic-starter/components/node--place.tsx
+++ b/starters/basic-starter/components/node--place.tsx
@@ -32,6 +32,7 @@ export function NodePlace({ node, ...props }) {
           {node.field_place_telephone && <p>{node.field_place_telephone}</p>}
         </div>
       </div>
+
       <div className="max-w-2xl px-6 py-10 mx-auto">
         {node.body?.processed && (
           <div className="prose">

From 1f1ac35c0ec870d23aafbfdebef63117a1e0a09c Mon Sep 17 00:00:00 2001
From: harumijang <35243020+harumijang@users.noreply.github.com>
Date: Fri, 12 Aug 2022 16:18:15 -0400
Subject: [PATCH 27/40] Updated readme

---
 packages/nextjs-drupal-webform/README.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs-drupal-webform/README.md b/packages/nextjs-drupal-webform/README.md
index 2eb57100..da7900f8 100644
--- a/packages/nextjs-drupal-webform/README.md
+++ b/packages/nextjs-drupal-webform/README.md
@@ -31,12 +31,17 @@ export const WebformDate = ({ element, error }) => {
       settings={null}
       error={error}
     >
-      <input type="date" name="date" min="2022-01-01" max="2022-12-31" />
+      <input
+        type={element['#type']}
+        name={element['#webform_key']}
+        min="2022-01-01"
+        max="2022-12-31"
+      />
     </WebformElementWrapper>
   );
 };
 ```
-2. Pass in your component(s) to the `customComponents` property.
+2. Pass in your component(s) to the `customComponents` property. The key in `customComponents` should match the webform element's type.
 ```
    <Webform
    webformObject={additionalContent.webform}

From 8e8cf49c40c23766c5b0e165720806cfa1190c1c Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Fri, 12 Aug 2022 13:32:40 -0400
Subject: [PATCH 28/40] Removed client from next webform

---
 packages/nextjs-drupal-webform/src/drupal.ts | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 packages/nextjs-drupal-webform/src/drupal.ts

diff --git a/packages/nextjs-drupal-webform/src/drupal.ts b/packages/nextjs-drupal-webform/src/drupal.ts
deleted file mode 100644
index 22540455..00000000
--- a/packages/nextjs-drupal-webform/src/drupal.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DrupalClient } from 'next-drupal';
-
-export const drupal = new DrupalClient(
-  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
-  {
-    previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
-    auth: {
-      clientId: process.env.DRUPAL_CLIENT_ID,
-      clientSecret: process.env.DRUPAL_CLIENT_SECRET,
-    },
-    withAuth: true,
-    // @see https://github.com/vercel/next.js/discussions/32238
-    // @see https://github.com/vercel/next.js/blob/d895a50abbc8f91726daa2d7ebc22c58f58aabbb/packages/next/server/api-utils/node.ts#L504
-    forceIframeSameSiteCookie: process.env.NODE_ENV === 'development',
-  },
-);

From f031328d6eabcb80a3c304a59f3bb4fcc19ae0fc Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Fri, 12 Aug 2022 16:25:41 -0400
Subject: [PATCH 29/40] Use backend value for name and add comment about type
 in custom components

---
 packages/nextjs-drupal-webform/examples/WebformDate.tsx | 7 ++++++-
 packages/nextjs-drupal-webform/src/types.ts             | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs-drupal-webform/examples/WebformDate.tsx b/packages/nextjs-drupal-webform/examples/WebformDate.tsx
index c7a7aef5..af18fb23 100644
--- a/packages/nextjs-drupal-webform/examples/WebformDate.tsx
+++ b/packages/nextjs-drupal-webform/examples/WebformDate.tsx
@@ -10,7 +10,12 @@ export const WebformDate = ({ element, error }) => {
       settings={null}
       error={error}
     >
-      <input type="date" name="date" min="2022-01-01" max="2022-12-31" />
+      <input
+        type={element['#type']}
+        name={element['#webform_key']}
+        min="2022-01-01"
+        max="2022-12-31"
+      />
     </WebformElementWrapper>
   );
 };
diff --git a/packages/nextjs-drupal-webform/src/types.ts b/packages/nextjs-drupal-webform/src/types.ts
index f0a5444a..aef01056 100644
--- a/packages/nextjs-drupal-webform/src/types.ts
+++ b/packages/nextjs-drupal-webform/src/types.ts
@@ -13,6 +13,7 @@ export type WebformCustomComponentProps = {
 export type WebformCustomComponent = React.FC<WebformCustomComponentProps>;
 
 export type CustomComponentLibrary = {
+  // name should be the webform element type.
   [name: string]: WebformCustomComponent;
 };
 

From 4191cb7a02416911a86bc9b4284966b83249cfa4 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Fri, 12 Aug 2022 16:36:47 -0400
Subject: [PATCH 30/40] readme

---
 packages/nextjs-drupal-webform/README.md | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs-drupal-webform/README.md b/packages/nextjs-drupal-webform/README.md
index da7900f8..19c11968 100644
--- a/packages/nextjs-drupal-webform/README.md
+++ b/packages/nextjs-drupal-webform/README.md
@@ -2,14 +2,16 @@
 
 Plugin for integrating the [Webform](https://www.drupal.org/project/webform) module with Next.js applications.
 
-## Setup 
+## Setup
+
 1. Install the [Webform](https://www.drupal.org/project/webform) and [Webform REST](https://www.drupal.org/project/webform_rest) modules.
 2. Enable REST resources: "Webform Submit", "Webform Elements", "Webform Submission" on /admin/config/services/rest.
-3. Set Webform permissions on RESTful Web Services  `/admin/people/permissions#module-rest` for Anonymous Users.
-4. Create your webform. 
+3. Set Webform permissions on RESTful Web Services `/admin/people/permissions#module-rest` for Anonymous Users.
+4. Create your webform.
 5. @todo add how to get the field_webform from entity?
 
 ## Example
+
 ```
 <Webform
 webformObject={additionalContent.webform}
@@ -18,9 +20,10 @@ key={additionalContent.webform.drupal_internal__id}
 />
 ```
 
-
 ## Using custom components
+
 1. Create your custom component
+
 ```
 // Example custom component
 export const WebformDate = ({ element, error }) => {
@@ -41,7 +44,9 @@ export const WebformDate = ({ element, error }) => {
   );
 };
 ```
-2. Pass in your component(s) to the `customComponents` property. The key in `customComponents` should match the webform element's type.
+
+2. Pass in your component(s) to the `customComponents` property. The key in `customComponents` should match the type of the webform element you want to override.
+
 ```
    <Webform
    webformObject={additionalContent.webform}

From 26e6c44f72b616c38de42122dd488f5af208b2df Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 17 Aug 2022 14:56:51 -0400
Subject: [PATCH 31/40] removed webform

---
 packages/nextjs-drupal-webform/.eslintrc.json |   3 -
 packages/nextjs-drupal-webform/README.md      |  57 ------
 .../examples/WebformDate.tsx                  |  21 ---
 packages/nextjs-drupal-webform/next-env.d.ts  |   5 -
 packages/nextjs-drupal-webform/package.json   |  33 ----
 .../pages/api/webform/[id].ts                 |  18 --
 .../pages/api/webform/submit.tsx              |  26 ---
 .../nextjs-drupal-webform/src/Webform.tsx     |  80 ---------
 .../src/components/WebformCheckbox.tsx        |  26 ---
 .../src/components/WebformCheckboxGroup.tsx   |  29 ---
 .../src/components/WebformDebug.tsx           |  10 --
 .../src/components/WebformElementWrapper.tsx  |  39 ----
 .../src/components/WebformText.tsx            |  22 ---
 .../src/components/WebformTextArea.tsx        |  22 ---
 packages/nextjs-drupal-webform/src/types.ts   |  44 -----
 packages/nextjs-drupal-webform/src/utils.tsx  | 168 ------------------
 packages/nextjs-drupal-webform/tsconfig.json  |  22 ---
 .../components/node--article.tsx              |   6 +-
 18 files changed, 3 insertions(+), 628 deletions(-)
 delete mode 100644 packages/nextjs-drupal-webform/.eslintrc.json
 delete mode 100644 packages/nextjs-drupal-webform/README.md
 delete mode 100644 packages/nextjs-drupal-webform/examples/WebformDate.tsx
 delete mode 100644 packages/nextjs-drupal-webform/next-env.d.ts
 delete mode 100644 packages/nextjs-drupal-webform/package.json
 delete mode 100644 packages/nextjs-drupal-webform/pages/api/webform/[id].ts
 delete mode 100644 packages/nextjs-drupal-webform/pages/api/webform/submit.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/Webform.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/components/WebformCheckboxGroup.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/components/WebformDebug.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/components/WebformElementWrapper.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/components/WebformText.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/components/WebformTextArea.tsx
 delete mode 100644 packages/nextjs-drupal-webform/src/types.ts
 delete mode 100644 packages/nextjs-drupal-webform/src/utils.tsx
 delete mode 100644 packages/nextjs-drupal-webform/tsconfig.json

diff --git a/packages/nextjs-drupal-webform/.eslintrc.json b/packages/nextjs-drupal-webform/.eslintrc.json
deleted file mode 100644
index bffb357a..00000000
--- a/packages/nextjs-drupal-webform/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}
diff --git a/packages/nextjs-drupal-webform/README.md b/packages/nextjs-drupal-webform/README.md
deleted file mode 100644
index 19c11968..00000000
--- a/packages/nextjs-drupal-webform/README.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# Next.js Drupal Webform
-
-Plugin for integrating the [Webform](https://www.drupal.org/project/webform) module with Next.js applications.
-
-## Setup
-
-1. Install the [Webform](https://www.drupal.org/project/webform) and [Webform REST](https://www.drupal.org/project/webform_rest) modules.
-2. Enable REST resources: "Webform Submit", "Webform Elements", "Webform Submission" on /admin/config/services/rest.
-3. Set Webform permissions on RESTful Web Services `/admin/people/permissions#module-rest` for Anonymous Users.
-4. Create your webform.
-5. @todo add how to get the field_webform from entity?
-
-## Example
-
-```
-<Webform
-webformObject={additionalContent.webform}
-id={additionalContent.webform.drupal_internal__id}
-key={additionalContent.webform.drupal_internal__id}
-/>
-```
-
-## Using custom components
-
-1. Create your custom component
-
-```
-// Example custom component
-export const WebformDate = ({ element, error }) => {
-  return (
-    <WebformElementWrapper
-      labelFor={element['#title']}
-      labelClassName={element['#required']}
-      settings={null}
-      error={error}
-    >
-      <input
-        type={element['#type']}
-        name={element['#webform_key']}
-        min="2022-01-01"
-        max="2022-12-31"
-      />
-    </WebformElementWrapper>
-  );
-};
-```
-
-2. Pass in your component(s) to the `customComponents` property. The key in `customComponents` should match the type of the webform element you want to override.
-
-```
-   <Webform
-   webformObject={additionalContent.webform}
-   id={additionalContent.webform.drupal_internal__id}
-   key={additionalContent.webform.drupal_internal__id}
-   customComponents={{ date: WebformDate }}
-   />
-```
diff --git a/packages/nextjs-drupal-webform/examples/WebformDate.tsx b/packages/nextjs-drupal-webform/examples/WebformDate.tsx
deleted file mode 100644
index af18fb23..00000000
--- a/packages/nextjs-drupal-webform/examples/WebformDate.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import WebformElementWrapper from '../src/components/WebformElementWrapper';
-
-// Example custom component
-export const WebformDate = ({ element, error }) => {
-  return (
-    <WebformElementWrapper
-      labelFor={element['#title']}
-      labelClassName={element['#required']}
-      settings={null}
-      error={error}
-    >
-      <input
-        type={element['#type']}
-        name={element['#webform_key']}
-        min="2022-01-01"
-        max="2022-12-31"
-      />
-    </WebformElementWrapper>
-  );
-};
diff --git a/packages/nextjs-drupal-webform/next-env.d.ts b/packages/nextjs-drupal-webform/next-env.d.ts
deleted file mode 100644
index 4f11a03d..00000000
--- a/packages/nextjs-drupal-webform/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/nextjs-drupal-webform/package.json b/packages/nextjs-drupal-webform/package.json
deleted file mode 100644
index fd225619..00000000
--- a/packages/nextjs-drupal-webform/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "nextjs-drupal-webform",
-  "version": "1.0.0",
-  "private": true,
-  "license": "MIT",
-  "scripts": {
-    "build": "next build",
-    "dev": "next dev"
-  },
-  "dependencies": {
-    "@tailwindcss/typography": "^0.5.0",
-    "classnames": "^2.3.1",
-    "drupal-jsonapi-params": "^2.1.0",
-    "html-react-parser": "^1.4.8",
-    "next": "^12.2.0",
-    "next-acms": "^1.0.0-beta1",
-    "next-drupal": "^1.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "sharp": "^0.30.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@types/node": "^18.0.6",
-    "@types/react": "^17.0.4",
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.20.0",
-    "eslint-config-next": "^12.2.3",
-    "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.15",
-    "typescript": "^4.6.0"
-  }
-}
diff --git a/packages/nextjs-drupal-webform/pages/api/webform/[id].ts b/packages/nextjs-drupal-webform/pages/api/webform/[id].ts
deleted file mode 100644
index e5b7d24e..00000000
--- a/packages/nextjs-drupal-webform/pages/api/webform/[id].ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-import { drupal } from '../../../src/drupal';
-
-export default async function handler(
-  request: NextApiRequest,
-  response: NextApiResponse,
-) {
-  try {
-    const url = drupal.buildUrl(
-      `/webform_rest/${request.query.id}/fields?_format=json`,
-    );
-    const result = await fetch(url.toString());
-    const webform = await result.json();
-    response.status(200).json(webform);
-  } catch (e) {
-    console.log(e.message);
-  }
-}
diff --git a/packages/nextjs-drupal-webform/pages/api/webform/submit.tsx b/packages/nextjs-drupal-webform/pages/api/webform/submit.tsx
deleted file mode 100644
index 74d99e68..00000000
--- a/packages/nextjs-drupal-webform/pages/api/webform/submit.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-import { drupal } from '../../../src/drupal';
-
-export default async function handler(
-  request: NextApiRequest,
-  response: NextApiResponse,
-) {
-  if (request.method === 'POST') {
-    const url = drupal.buildUrl('/webform_rest/submit?_format=json');
-    // Submit to Drupal.
-    const result = await fetch(url.toString(), {
-      method: 'POST',
-      body: JSON.stringify(request.body),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    if (!result.ok) {
-      const message = await result.json();
-      // Send error to client.
-      return response.status(result.status).json({ message });
-    }
-    response.end(JSON.stringify(result));
-    response.status(200);
-  }
-}
diff --git a/packages/nextjs-drupal-webform/src/Webform.tsx b/packages/nextjs-drupal-webform/src/Webform.tsx
deleted file mode 100644
index 2074a21d..00000000
--- a/packages/nextjs-drupal-webform/src/Webform.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { WebformProps } from './types';
-import { formToJSON, renderWebformElement, styles } from './utils';
-
-export class WebformError extends Error {
-  response: string;
-
-  constructor(response: string) {
-    super();
-
-    this.response = response;
-  }
-}
-
-/**
- * Errors returned by Drupal.
- */
-type WebformErrors = {
-  [name: string]: string;
-};
-
-export const Webform = ({
-  webformObject,
-  id,
-  customComponents,
-}: WebformProps) => {
-  const [errors, setErrors] = useState<WebformErrors>({});
-  const [status, setStatus] = useState<'error' | 'success'>();
-  console.log('webform object', webformObject);
-
-  const submitHandler = async (event) => {
-    event.preventDefault();
-    const data = formToJSON(event.target.elements);
-    // Post process serialized data:
-    // Some webform elements require specialized data formatting.
-    for (const element in webformObject.elements) {
-      if (data[element]) {
-        switch (webformObject.elements[element]['#type']) {
-          case 'checkbox':
-            data[element] = 1;
-            break;
-        }
-      }
-    }
-    const body = { ...(data as object), ...{ webform_id: id } };
-    console.log('request body', body);
-    const response = await fetch('/api/webform/submit', {
-      method: 'POST',
-      body: JSON.stringify(body),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    if (!response.ok) {
-      setStatus('error');
-      const message = await response.json();
-      setErrors(message.message.error);
-    } else {
-      setStatus('success');
-      // Clear webform element errors.
-      setErrors({});
-    }
-  };
-
-  return (
-    <form style={styles.form} onSubmit={(e) => submitHandler(e)}>
-      {status === 'error' ? (
-        <div style={styles.formError}>An error occurred. Please try again.</div>
-      ) : null}
-      {status === 'success' ? (
-        <div style={styles.formSuccess}>
-          Your submission has been sent. Thank you.
-        </div>
-      ) : null}
-      {Object.values(webformObject.elements).map((el) =>
-        renderWebformElement(el, customComponents, errors[el['#webform_key']]),
-      )}
-    </form>
-  );
-};
diff --git a/packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx b/packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx
deleted file mode 100644
index bb9e84d7..00000000
--- a/packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import WebformElementWrapper from './WebformElementWrapper';
-import { styles } from '../utils';
-import { WebformCustomComponent } from '../types';
-
-export const WebformCheckbox: WebformCustomComponent = ({ element, error }) => {
-  return (
-    <WebformElementWrapper
-      labelFor={element['#title']}
-      labelClassName={element['#required']}
-      settings={null}
-      error={error}
-    >
-      <div>
-        <input
-          type={element.type}
-          id={element['#webform_key']}
-          name={element['#webform_key']}
-          style={styles.checkbox}
-        />
-        <label className="form-check-label">{element['#description']}</label>
-      </div>
-    </WebformElementWrapper>
-  );
-};
-
-export default WebformCheckbox;
diff --git a/packages/nextjs-drupal-webform/src/components/WebformCheckboxGroup.tsx b/packages/nextjs-drupal-webform/src/components/WebformCheckboxGroup.tsx
deleted file mode 100644
index 5347e4cf..00000000
--- a/packages/nextjs-drupal-webform/src/components/WebformCheckboxGroup.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { styles } from '../utils';
-import WebformElementWrapper from './WebformElementWrapper';
-
-export const WebformCheckboxGroup = ({ element, error }) => {
-  return (
-    <WebformElementWrapper
-      labelFor={element['#title']}
-      labelClassName={element['#required']}
-      settings={null}
-      error={error}
-    >
-      {element['#options'] &&
-        Object.keys(element['#options']).map((option) => (
-          <div className="form-check" key={option}>
-            <input
-              type={element.type}
-              name={element['#webform_key']}
-              id={option}
-              value={option}
-              style={styles.checkbox}
-            />
-            <label className="form-check-label">{option}</label>
-          </div>
-        ))}
-    </WebformElementWrapper>
-  );
-};
-
-export default WebformCheckboxGroup;
diff --git a/packages/nextjs-drupal-webform/src/components/WebformDebug.tsx b/packages/nextjs-drupal-webform/src/components/WebformDebug.tsx
deleted file mode 100644
index 3c4a39c3..00000000
--- a/packages/nextjs-drupal-webform/src/components/WebformDebug.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const WebformDebug = ({ element, error }) => {
-  return (
-    <code>
-      {error}
-      <pre>{JSON.stringify(element, null, 2)}</pre>
-    </code>
-  );
-};
-
-export default WebformDebug;
diff --git a/packages/nextjs-drupal-webform/src/components/WebformElementWrapper.tsx b/packages/nextjs-drupal-webform/src/components/WebformElementWrapper.tsx
deleted file mode 100644
index 1bd33012..00000000
--- a/packages/nextjs-drupal-webform/src/components/WebformElementWrapper.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { styles } from '../utils';
-
-export const WebformElementWrapper = ({
-  children,
-  labelFor,
-  labelClassName,
-  error,
-  ...props
-}) => {
-  const css = `
-.required-field:after {
-    content: ' *';
-    color: red;
-}
-.invalid-feedback {
-  color: red;
-}
-        `;
-  return (
-    <div {...props}>
-      <style>{css}</style>
-      <label
-        style={styles.elementLabel}
-        htmlFor={labelFor}
-        className={labelClassName ? 'required-field' : ''}
-      >
-        {labelFor}
-      </label>
-      {children}
-      {error && (
-        <div className="form-text invalid-feedback" {...props}>
-          {error}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default WebformElementWrapper;
diff --git a/packages/nextjs-drupal-webform/src/components/WebformText.tsx b/packages/nextjs-drupal-webform/src/components/WebformText.tsx
deleted file mode 100644
index 208c4597..00000000
--- a/packages/nextjs-drupal-webform/src/components/WebformText.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import WebformElementWrapper from './WebformElementWrapper';
-import { styles } from '../utils';
-
-export const WebformText = ({ element, error }) => {
-  return (
-    <WebformElementWrapper
-      labelFor={element['#title']}
-      labelClassName={element['#required']}
-      settings={null}
-      error={error}
-    >
-      <input
-        placeholder={element['#title']}
-        id={element['#webform_key']}
-        name={element['#webform_key']}
-        style={styles.textArea}
-      />
-    </WebformElementWrapper>
-  );
-};
-
-export default WebformText;
diff --git a/packages/nextjs-drupal-webform/src/components/WebformTextArea.tsx b/packages/nextjs-drupal-webform/src/components/WebformTextArea.tsx
deleted file mode 100644
index e6cbd7be..00000000
--- a/packages/nextjs-drupal-webform/src/components/WebformTextArea.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import WebformElementWrapper from './WebformElementWrapper';
-import { styles } from '../utils';
-
-export const WebformText = ({ element, error }) => {
-  return (
-    <WebformElementWrapper
-      labelFor={element['#title']}
-      labelClassName={element['#required']}
-      settings={null}
-      error={error}
-    >
-      <textarea
-        placeholder={element['#title']}
-        id={element['#webform_key']}
-        name={element['#webform_key']}
-        style={styles.textArea}
-      />
-    </WebformElementWrapper>
-  );
-};
-
-export default WebformText;
diff --git a/packages/nextjs-drupal-webform/src/types.ts b/packages/nextjs-drupal-webform/src/types.ts
deleted file mode 100644
index aef01056..00000000
--- a/packages/nextjs-drupal-webform/src/types.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-
-export const DEFAULT_SUBMIT_LABEL = 'Submit';
-
-export type WebformCustomComponentProps = {
-  element: WebformElement;
-  error?: string;
-};
-
-/**
- * Custom component for webform element
- */
-export type WebformCustomComponent = React.FC<WebformCustomComponentProps>;
-
-export type CustomComponentLibrary = {
-  // name should be the webform element type.
-  [name: string]: WebformCustomComponent;
-};
-
-export type WebformProps = {
-  id?: string;
-  webformObject: WebformObject;
-  customComponents?: CustomComponentLibrary;
-};
-
-export type WebformObject = {
-  drupal_internal__id: string;
-  description: string;
-  status: string;
-  elements: WebformElement[];
-};
-
-export type WebformElement = {
-  // might need more later
-  '#title': string;
-  '#type': string;
-  '#webform_key': string;
-  '#submit__label'?: string;
-  '#options'?: object;
-  '#description': string;
-  '#required'?: boolean;
-  // checkbox or radio
-  type: string;
-};
diff --git a/packages/nextjs-drupal-webform/src/utils.tsx b/packages/nextjs-drupal-webform/src/utils.tsx
deleted file mode 100644
index 4e6750b9..00000000
--- a/packages/nextjs-drupal-webform/src/utils.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import {
-  CustomComponentLibrary,
-  DEFAULT_SUBMIT_LABEL,
-  WebformElement,
-} from './types';
-import WebformCheckboxGroup from './components/WebformCheckboxGroup';
-import WebformText from './components/WebformText';
-import WebformTextArea from './components/WebformTextArea';
-import WebformCheckbox from './components/WebformCheckbox';
-import WebformDebug from './components/WebformDebug';
-
-export const styles = {
-  btn: {
-    backgroundColor: 'rgb(14 165 233)',
-    color: 'white',
-    border: 'none',
-    padding: '12px 14px',
-    textDecoration: 'none',
-    display: 'inlineBlock',
-    fontSize: '16px',
-    borderRadius: '8px',
-  },
-  checkbox: {
-    marginRight: '8px',
-  },
-  textArea: {
-    border: '2px solid #e5e7eb',
-    margin: '4px',
-    borderRadius: '0.375rem',
-  },
-  elementLabel: {
-    fontSize: '16px',
-    color: 'darkViolet',
-  },
-  form: {
-    padding: '20px',
-    backgroundColor: 'lavender',
-    borderRadius: '0.375rem',
-  },
-  formError: {
-    backgroundColor: '#FEE2E2',
-    color: 'red',
-    padding: '10px',
-    borderRadius: '0.375rem',
-  },
-  formSuccess: {
-    backgroundColor: '#DCFCE7',
-    color: 'green',
-    padding: '10px',
-    borderRadius: '0.375rem',
-  },
-};
-
-export function renderWebformElement(
-  element: WebformElement,
-  customComponents: CustomComponentLibrary,
-  error?: string,
-) {
-  const customComponentAPI = {
-    error,
-  };
-  // Render using custom component if provided:
-  if (customComponents && customComponents[element['#type']]) {
-    const CustomComponent = customComponents[element['#type']];
-    return <CustomComponent element={element} {...customComponentAPI} />;
-  }
-  switch (element['#type']) {
-    case 'textfield':
-    case 'tel':
-    case 'number':
-    case 'email':
-    case 'hidden':
-      return <WebformText element={element} error={error} />;
-    case 'textarea':
-      return <WebformTextArea element={element} error={error} />;
-    case 'checkbox':
-      return (
-        <WebformCheckbox
-          element={{ ...element, type: 'checkbox' }}
-          error={error}
-        />
-      );
-    case 'radio':
-      return (
-        <WebformCheckbox
-          element={{ ...element, type: 'radio' }}
-          error={error}
-        />
-      );
-    case 'checkboxes':
-      return (
-        <WebformCheckboxGroup
-          element={{ ...element, type: 'checkbox' }}
-          {...customComponentAPI}
-        />
-      );
-    case 'radios':
-      return (
-        <WebformCheckboxGroup
-          element={{ ...element, type: 'radio' }}
-          {...customComponentAPI}
-        />
-      );
-    case 'select':
-      return null;
-    case 'webform_markup':
-    case 'processed_text':
-      return null;
-    case 'webform_actions':
-      return (
-        <button type="submit" style={styles.btn}>
-          {element['#submit__label'] || DEFAULT_SUBMIT_LABEL}
-        </button>
-      );
-    // Render as JSON string if unknown.
-    default:
-      return <WebformDebug element={element} error={error} />;
-  }
-}
-
-const isValidElement = (element: any) => {
-  return !!(element.name && element.value);
-};
-
-const isValidValue = (element) => {
-  return (
-    !['checkbox', 'radio'].includes(element.type) ||
-    (element as HTMLInputElement).checked
-  );
-};
-
-const isCheckbox = (element): element is HTMLInputElement =>
-  element.type === 'checkbox';
-
-const isMultiSelect = (element: any): element is HTMLSelectElement =>
-  element.options && (element as HTMLSelectElement).multiple;
-
-const getSelectValues = (options: HTMLOptionsCollection) =>
-  [].reduce.call(
-    options,
-    (values, option) =>
-      option.selected ? values.concat(option.value) : values,
-    [],
-  );
-
-export const formToJSON = (elements: HTMLFormControlsCollection) =>
-  [].reduce.call(
-    elements,
-    (data, element) => {
-      // Make sure the element has the required properties and should be added.
-      if (isValidElement(element) && isValidValue(element)) {
-        if (isCheckbox(element)) {
-          data[element.name] = (data[element.name] || []).concat(element.value);
-        } else if (isMultiSelect(element)) {
-          data[element.name] = getSelectValues(element.options);
-        } else {
-          data[element.name] = element.value;
-        }
-      }
-      return data;
-    },
-    {},
-  );
-
-export async function getWebformFields(id) {
-  const response = await fetch(`http://localhost:3000/api/webform/${id}`);
-  return response.json();
-}
diff --git a/packages/nextjs-drupal-webform/tsconfig.json b/packages/nextjs-drupal-webform/tsconfig.json
deleted file mode 100644
index 2876951a..00000000
--- a/packages/nextjs-drupal-webform/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "baseUrl": "./",
-    "incremental": true
-  },
-  "include": ["**/*.ts, **/*.tsx"],
-  "exclude": ["node_modules"]
-}
diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index fcd6cb62..5658c95e 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { Webform } from 'nextjs-drupal-webform/src/Webform';
-import { WebformDate } from 'nextjs-drupal-webform/examples/WebformDate';
+import { Webform } from 'nextjs-drupal-webform';
+// import { WebformDate } from 'nextjs-drupal-webform/examples/WebformDate';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   return (
@@ -27,7 +27,7 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         webformObject={additionalContent.webform}
         id={additionalContent.webform.drupal_internal__id}
         key={additionalContent.webform.drupal_internal__id}
-        customComponents={{ date: WebformDate }}
+        // customComponents={{ date: WebformDate }}
       />
       {node.field_article_image && (
         <div className="my-6 overflow-hidden rounded-md">

From 69d9b0a6b647a4a842c4d1a4f2004ade7991ce7e Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Wed, 17 Aug 2022 22:29:41 +0300
Subject: [PATCH 32/40] Use webform from exports

---
 starters/basic-starter/pages/[...slug].tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 1e0b4f08..ee621b1c 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -19,8 +19,7 @@ import { TaxonomyEvent } from '../components/taxonomy/taxonomy--event_type';
 import { TaxonomyPlace } from '../components/taxonomy/taxonomy--place_type';
 import { getPrioritizedStaticPathsFromContext } from '../lib/get-prioritized-static-paths';
 import { GetStaticPathsContext } from 'next/types';
-import { getWebformFields } from 'nextjs-drupal-webform/src/utils';
-import { WebformObject } from 'nextjs-drupal-webform/src/types';
+import { getWebformFields, WebformObject } from 'nextjs-drupal-webform';
 
 // List of all the entity types handled by this route.
 const ENTITY_TYPES = [

From db034018bbff70c84e0211f78fde8a30b31a40ef Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Wed, 17 Aug 2022 18:01:06 -0400
Subject: [PATCH 33/40] Add second arg to webform method and add condition to
 node-article

---
 .../basic-starter/components/node--article.tsx     | 14 ++++++++------
 starters/basic-starter/pages/[...slug].tsx         |  1 +
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 5658c95e..20591b9f 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -23,12 +23,14 @@ export function NodeArticle({ node, additionalContent, ...props }) {
         ) : null}
         {node.created && <span> on {formatDate(node.created)}</span>}
       </p>
-      <Webform
-        webformObject={additionalContent.webform}
-        id={additionalContent.webform.drupal_internal__id}
-        key={additionalContent.webform.drupal_internal__id}
-        // customComponents={{ date: WebformDate }}
-      />
+      {additionalContent.webform ? (
+        <Webform
+          webformObject={additionalContent.webform}
+          id={additionalContent.webform.drupal_internal__id}
+          key={additionalContent.webform.drupal_internal__id}
+          // customComponents={{ date: WebformDate }}
+        />
+      ) : null}
       {node.field_article_image && (
         <div className="my-6 overflow-hidden rounded-md">
           <MediaImage
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index ee621b1c..58564b1e 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -218,6 +218,7 @@ export async function getStaticProps(
       status: entity.field_webform.status,
       elements: await getWebformFields(
         entity.field_webform.drupal_internal__id,
+        drupal,
       ),
     };
     additionalContent['webform'] = webformObject;

From cfe7e4bc6881e7e86f4fc289eaa61389aabe5a8c Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 18 Aug 2022 11:47:32 -0400
Subject: [PATCH 34/40] uncomment custom component

---
 starters/basic-starter/components/node--article.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 20591b9f..559ce5a2 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,8 +3,7 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { Webform } from 'nextjs-drupal-webform';
-// import { WebformDate } from 'nextjs-drupal-webform/examples/WebformDate';
+import { Webform, WebformDate } from 'nextjs-drupal-webform';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   return (
@@ -28,7 +27,7 @@ export function NodeArticle({ node, additionalContent, ...props }) {
           webformObject={additionalContent.webform}
           id={additionalContent.webform.drupal_internal__id}
           key={additionalContent.webform.drupal_internal__id}
-          // customComponents={{ date: WebformDate }}
+          customComponents={{ date: WebformDate }}
         />
       ) : null}
       {node.field_article_image && (

From e045044b96063691a200603a08b0d0da95207ff3 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Fri, 19 Aug 2022 15:07:38 -0400
Subject: [PATCH 35/40] Pass in client info

---
 starters/basic-starter/components/node--article.tsx |  1 +
 starters/basic-starter/pages/[...slug].tsx          | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 559ce5a2..69444efa 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -28,6 +28,7 @@ export function NodeArticle({ node, additionalContent, ...props }) {
           id={additionalContent.webform.drupal_internal__id}
           key={additionalContent.webform.drupal_internal__id}
           customComponents={{ date: WebformDate }}
+          client={additionalContent.client}
         />
       ) : null}
       {node.field_article_image && (
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 58564b1e..00f05d96 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -222,6 +222,18 @@ export async function getStaticProps(
       ),
     };
     additionalContent['webform'] = webformObject;
+    additionalContent['client'] = {
+      baseURL: process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
+      options: {
+        previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
+        auth: {
+          clientId: process.env.DRUPAL_CLIENT_ID,
+          clientSecret: process.env.DRUPAL_CLIENT_SECRET,
+        },
+        withAuth: true,
+        forceIframeSameSiteCookie: process.env.NODE_ENV === 'development',
+      },
+    };
   }
 
   // Fetch additional content for rendering taxonomy term pages.

From 77ddec687b7569700ac2d9dbc909fc45f31d11e3 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Mon, 22 Aug 2022 14:15:50 -0400
Subject: [PATCH 36/40] added submit api to starter and package

---
 packages/next-acms/src/index.ts               |  1 +
 packages/next-acms/src/submit.ts              | 27 +++++++++++++++++++
 .../components/node--article.tsx              |  1 -
 starters/basic-starter/pages/[...slug].tsx    | 12 ---------
 starters/basic-starter/pages/api/submit.ts    | 10 +++++++
 5 files changed, 38 insertions(+), 13 deletions(-)
 create mode 100644 packages/next-acms/src/submit.ts
 create mode 100644 starters/basic-starter/pages/api/submit.ts

diff --git a/packages/next-acms/src/index.ts b/packages/next-acms/src/index.ts
index 3e2ed129..6a39fe92 100644
--- a/packages/next-acms/src/index.ts
+++ b/packages/next-acms/src/index.ts
@@ -1,2 +1,3 @@
 export * from './revalidate';
 export * from './test-api-compatibility';
+export * from './submit';
diff --git a/packages/next-acms/src/submit.ts b/packages/next-acms/src/submit.ts
new file mode 100644
index 00000000..0c3af3b2
--- /dev/null
+++ b/packages/next-acms/src/submit.ts
@@ -0,0 +1,27 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { DrupalClient } from 'next-drupal';
+
+export async function submit(
+  request: NextApiRequest,
+  response: NextApiResponse,
+  drupal: DrupalClient,
+) {
+  if (request.method === 'POST') {
+    const url = drupal.buildUrl(request.query.endpoint.toString());
+    // Submit to Drupal.
+    const result = await fetch(url.toString(), {
+      method: 'POST',
+      body: JSON.stringify(request.body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (!result.ok) {
+      const message = await result.json();
+      // Send error to client.
+      return response.status(result.status).json({ message });
+    }
+    response.end(JSON.stringify(result));
+    response.status(200);
+  }
+}
diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 69444efa..559ce5a2 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -28,7 +28,6 @@ export function NodeArticle({ node, additionalContent, ...props }) {
           id={additionalContent.webform.drupal_internal__id}
           key={additionalContent.webform.drupal_internal__id}
           customComponents={{ date: WebformDate }}
-          client={additionalContent.client}
         />
       ) : null}
       {node.field_article_image && (
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 00f05d96..58564b1e 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -222,18 +222,6 @@ export async function getStaticProps(
       ),
     };
     additionalContent['webform'] = webformObject;
-    additionalContent['client'] = {
-      baseURL: process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
-      options: {
-        previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
-        auth: {
-          clientId: process.env.DRUPAL_CLIENT_ID,
-          clientSecret: process.env.DRUPAL_CLIENT_SECRET,
-        },
-        withAuth: true,
-        forceIframeSameSiteCookie: process.env.NODE_ENV === 'development',
-      },
-    };
   }
 
   // Fetch additional content for rendering taxonomy term pages.
diff --git a/starters/basic-starter/pages/api/submit.ts b/starters/basic-starter/pages/api/submit.ts
new file mode 100644
index 00000000..6a4336e9
--- /dev/null
+++ b/starters/basic-starter/pages/api/submit.ts
@@ -0,0 +1,10 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { drupal } from '../../lib/drupal';
+import { submit } from 'next-acms';
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse,
+) {
+  return submit(request, response, drupal);
+}

From 6ed31cdb4049907ceb4135b5682facf55784f92f Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Tue, 23 Aug 2022 16:22:36 -0400
Subject: [PATCH 37/40] Pass url into submit instead of client

---
 packages/next-acms/src/submit.ts           | 4 +---
 starters/basic-starter/pages/api/submit.ts | 5 +++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/next-acms/src/submit.ts b/packages/next-acms/src/submit.ts
index 0c3af3b2..33389109 100644
--- a/packages/next-acms/src/submit.ts
+++ b/packages/next-acms/src/submit.ts
@@ -1,13 +1,11 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { DrupalClient } from 'next-drupal';
 
 export async function submit(
   request: NextApiRequest,
   response: NextApiResponse,
-  drupal: DrupalClient,
+  url: URL,
 ) {
   if (request.method === 'POST') {
-    const url = drupal.buildUrl(request.query.endpoint.toString());
     // Submit to Drupal.
     const result = await fetch(url.toString(), {
       method: 'POST',
diff --git a/starters/basic-starter/pages/api/submit.ts b/starters/basic-starter/pages/api/submit.ts
index 6a4336e9..15ed07d3 100644
--- a/starters/basic-starter/pages/api/submit.ts
+++ b/starters/basic-starter/pages/api/submit.ts
@@ -1,10 +1,11 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { drupal } from '../../lib/drupal';
 import { submit } from 'next-acms';
+import { drupal } from '../../lib/drupal';
 
 export default async function handler(
   request: NextApiRequest,
   response: NextApiResponse,
 ) {
-  return submit(request, response, drupal);
+  const url = drupal.buildUrl(request.query.endpoint.toString());
+  return submit(request, response, url);
 }

From 6dde63c1d923e715a5d5d50bf38d422bbcb5812a Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Thu, 25 Aug 2022 18:39:21 -0400
Subject: [PATCH 38/40] added get api

---
 packages/next-acms/src/get.ts           | 27 +++++++++++++++++++++++++
 packages/next-acms/src/index.ts         |  1 +
 starters/basic-starter/pages/api/get.ts | 13 ++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 packages/next-acms/src/get.ts
 create mode 100644 starters/basic-starter/pages/api/get.ts

diff --git a/packages/next-acms/src/get.ts b/packages/next-acms/src/get.ts
new file mode 100644
index 00000000..08a6d383
--- /dev/null
+++ b/packages/next-acms/src/get.ts
@@ -0,0 +1,27 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export async function get(
+  request: NextApiRequest,
+  response: NextApiResponse,
+  url: URL,
+) {
+  try {
+    // Fetch from Drupal.
+    const result = await fetch(url.toString(), {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    response.status(200);
+    return response.end(JSON.stringify(result));
+    // return result;
+    // response.end();
+    // console.log('RESULT', await result.json());
+    // const json = await result.json();
+    // console.log('RESPONSE', response.end.toString());
+    // return result;
+  } catch (error) {
+    response.json(error);
+    response.status(405).end();
+  }
+}
diff --git a/packages/next-acms/src/index.ts b/packages/next-acms/src/index.ts
index 6a39fe92..d7a4a540 100644
--- a/packages/next-acms/src/index.ts
+++ b/packages/next-acms/src/index.ts
@@ -1,3 +1,4 @@
 export * from './revalidate';
 export * from './test-api-compatibility';
 export * from './submit';
+export * from './get';
diff --git a/starters/basic-starter/pages/api/get.ts b/starters/basic-starter/pages/api/get.ts
new file mode 100644
index 00000000..c741278d
--- /dev/null
+++ b/starters/basic-starter/pages/api/get.ts
@@ -0,0 +1,13 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { drupal } from '../../lib/drupal';
+import { get } from 'next-acms';
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse,
+) {
+  console.log('REACH?');
+  console.log(request.query);
+  const url = drupal.buildUrl(request.query.endpoint.toString());
+  return await get(request, response, url);
+}

From 752c3e874cf2e164b1c97e3505aaa1946daa321b Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Mon, 29 Aug 2022 11:53:08 -0400
Subject: [PATCH 39/40] Remove client as arg from getWebformFields

---
 starters/basic-starter/pages/[...slug].tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
index 0df2b3ca..3b9d334c 100644
--- a/starters/basic-starter/pages/[...slug].tsx
+++ b/starters/basic-starter/pages/[...slug].tsx
@@ -169,7 +169,6 @@ export async function getStaticProps(
       'field_article_media.image',
       'field_article_image.image',
       'field_display_author',
-      'field_webform',
     ]);
   }
 
@@ -213,12 +212,13 @@ export async function getStaticProps(
   if (entity.field_webform) {
     additionalContent['webform'] = [];
     const webformObject: WebformObject = {
-      drupal_internal__id: entity.field_webform.drupal_internal__id,
-      description: entity.field_webform.description,
-      status: entity.field_webform.status,
+      drupal_internal__id:
+        entity.field_webform.resourceIdObjMeta.drupal_internal__target_id,
+      description: 'entity.field_webform.description',
+      status: 'entity.field_webform.status',
       elements: await getWebformFields(
-        entity.field_webform.drupal_internal__id,
-        drupal,
+        entity.field_webform.resourceIdObjMeta.drupal_internal__target_id,
+        drupal.baseUrl,
       ),
     };
     additionalContent['webform'] = webformObject;

From 7bddac9206d63720b695a49308079dab8f40ae73 Mon Sep 17 00:00:00 2001
From: HARUMI JANG <harumi.jang@acquia.com>
Date: Fri, 23 Sep 2022 15:51:57 -0400
Subject: [PATCH 40/40] Change custom webform component

---
 starters/basic-starter/components/node--article.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
index 559ce5a2..07e7e18c 100644
--- a/starters/basic-starter/components/node--article.tsx
+++ b/starters/basic-starter/components/node--article.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
-import { Webform, WebformDate } from 'nextjs-drupal-webform';
+import { Webform, WebformHeight } from 'nextjs-drupal-webform';
 
 export function NodeArticle({ node, additionalContent, ...props }) {
   return (
@@ -27,7 +27,7 @@ export function NodeArticle({ node, additionalContent, ...props }) {
           webformObject={additionalContent.webform}
           id={additionalContent.webform.drupal_internal__id}
           key={additionalContent.webform.drupal_internal__id}
-          customComponents={{ date: WebformDate }}
+          customComponents={{ webform_height: WebformHeight }}
         />
       ) : null}
       {node.field_article_image && (