Example Webform usage

packages/nextjs-drupal-webform/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

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 }}
+   />
+```

packages/nextjs-drupal-webform/examples/WebformDate.tsx

@@ -0,0 +1,16 @@
+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="date" name="date" min="2022-01-01" max="2022-12-31" />
+    </WebformElementWrapper>
+  );
+};

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.

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"
+  }
+}

packages/nextjs-drupal-webform/pages/api/webform/[id].ts

@@ -0,0 +1,18 @@
+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);
+  }
+}

packages/nextjs-drupal-webform/pages/api/webform/submit.tsx

@@ -0,0 +1,26 @@
+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);
+  }
+}

packages/nextjs-drupal-webform/src/Webform.tsx

@@ -0,0 +1,80 @@
+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>
+  );
+};

packages/nextjs-drupal-webform/src/components/WebformCheckbox.tsx

@@ -0,0 +1,26 @@
+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;

packages/nextjs-drupal-webform/src/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']}
+      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;

packages/nextjs-drupal-webform/src/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;

packages/nextjs-drupal-webform/src/components/WebformElementWrapper.tsx

@@ -0,0 +1,39 @@
+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;

packages/nextjs-drupal-webform/src/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;

packages/nextjs-drupal-webform/src/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;