Update example and update text

chapter-three · Dec 21, 2022 · 13612b7 · 13612b7
1 parent 02445aa
commit 13612b7
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 200 deletions.
diff --git a/examples/example-webform/components/WebformButton.tsx b/examples/example-webform/components/WebformButton.tsx
@@ -0,0 +1,17 @@
+import { components } from "nextjs-drupal-webform"
+import classNames from "classnames"
+
+const buttonDecorator = (DecoratedComponent) => {
+ return function WebformCustomTable(props) {
+ const fieldProps = props.fieldProps ?? {}
+ const additionalClasses = []
+ if (props.element["#button_type"] === "primary") {
+ additionalClasses.push("bg-black hover:bg-black text-white")
+ }
+ fieldProps.className = classNames(fieldProps.className, additionalClasses)
+
+ return <DecoratedComponent {...props} fieldProps={fieldProps} />
+ }
+}
+
+export default buttonDecorator(components.button)
diff --git a/examples/example-webform/lib/drupal.ts b/examples/example-webform/lib/drupal.ts
@@ -0,0 +1,17 @@
+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,
+ scope:
+ "administrator developer site_builder content_administrator content_author content_editor user_administrator headless",
+ },
+ // @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/examples/example-webform/package.json b/examples/example-webform/package.json
@@ -23,7 +23,7 @@
  "react-dom": "^17.0.2",
  "react-hook-form": "^7.25.3",
  "yup": "^0.32.11",
- "nextjs-drupal-webform": "^1.0.0-alpha2"
+ "nextjs-drupal-webform": "^1.0.0-beta1"
  },
  "devDependencies": {
  "@babel/core": "^7.12.9",

diff --git a/examples/example-webform/pages/api/webform.ts b/examples/example-webform/pages/api/webform.ts
@@ -0,0 +1,10 @@
+import { NextApiRequest, NextApiResponse } from "next"
+import { drupal } from "../../lib/drupal"
+import { WebformDefaultApiRoute } from "nextjs-drupal-webform"
+
+export default async function handler(
+ request: NextApiRequest,
+ response: NextApiResponse
+) {
+ return WebformDefaultApiRoute(request, response, drupal)
+}
diff --git a/examples/example-webform/pages/index.tsx b/examples/example-webform/pages/index.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head"
 import Link from "next/link"
+import * as React from "react"
 
 export default function IndexPage() {
  return (
@@ -33,19 +34,15 @@ export default function IndexPage() {
  <a>See Example</a>
  </Link>
  </p>
- <h2>Server Side (API Route)</h2>
+ <h2>Server Side</h2>
  <p>
- We submit the form values to a custom API route first. The API route
- then submits the form to Drupal using the{" "}
- <a href="https://www.drupal.org/project/webform_rest">
- Webform REST
+ This example uses the{" "}
+ <a href="https://www.drupal.org/project/next_webform">
+ Next.js Webform
  </a>{" "}
+ library to render and submit forms built using the Drupal Webform
  module.
  </p>
- <p>
- This is useful if we need to hide client IDs and secrets or our
- Drupal implementation.
- </p>
  <p>
  <Link href="/server-side" passHref>
  <a>See Example</a>

diff --git a/examples/example-webform/pages/server-side.tsx b/examples/example-webform/pages/server-side.tsx
@@ -2,12 +2,6 @@ import * as React from "react"
 import { GetStaticPropsResult } from "next"
 import Head from "next/head"
 import Link from "next/link"
-import { getResourceCollection, DrupalTaxonomyTerm } from "next-drupal"
-import { useForm } from "react-hook-form"
-import * as yup from "yup"
-import { yupResolver } from "@hookform/resolvers/yup"
-
-import { contactFormSchema } from "../validations/contact"
 import withCustomStyles from "../components/withCustomStyles"
 import {
  resolveWebformContent,
@@ -17,19 +11,13 @@ import {
 } from "nextjs-drupal-webform"
 import { drupal } from "basic-starter/lib/drupal"
 import classNames from "classnames"
-
-type FormData = yup.TypeOf<typeof contactFormSchema>
+import WebformButton from "../components/WebformButton"
 
 interface WebformPageProps {
- teams: DrupalTaxonomyTerm[]
  webform: WebformProps
 }
 
-export default function WebformPage({ teams, webform }: WebformPageProps) {
- const [status, setStatus] = React.useState<"error" | "success">()
- const { register, handleSubmit, formState, reset } = useForm<FormData>({
- resolver: yupResolver(contactFormSchema),
- })
+export default function WebformPage({ webform }: WebformPageProps) {
  const labelProps = {
  className: classNames(["block", "text-sm", "font-medium", "text-gray-700"]),
  }
@@ -54,8 +42,6 @@ export default function WebformPage({ teams, webform }: WebformPageProps) {
  }
  const buttonProps = {
  className: classNames([
- "flex",
- "justify-center",
  "px-4",
  "py-2",
  "text-sm font-medium",
@@ -69,22 +55,6 @@ export default function WebformPage({ teams, webform }: WebformPageProps) {
  "data-cy": "btn-submit",
  }
 
- // This makes a POST to a custom API route.
- // The Drupal base URL and the webform_id are NOT exposed.
- // async function onSubmit(data: FormData) {
- // const response = await fetch(`/api/contact`, {
- // method: "POST",
- // body: JSON.stringify(data),
- // })
- //
- // if (response.ok) {
- // reset()
- // return setStatus("success")
- // }
- //
- // return setStatus("error")
- // }
-
  return (
  <>
  <Head>
@@ -95,161 +65,53 @@ export default function WebformPage({ teams, webform }: WebformPageProps) {
  <h1>Next.js for Drupal</h1>
  <h2>Webform Example - Server Side</h2>
  <p>
- We submit the form values to a custom API route first. The API route
- then submits the form to Drupal using the{" "}
- <a href="https://www.drupal.org/project/webform_rest">
- Webform REST
+ This example uses the{" "}
+ <a href="https://www.drupal.org/project/next_webform">
+ Next.js Webform
  </a>{" "}
+ library to render and submit forms built using the Drupal Webform
  module.
  </p>
- <p>
- This is useful if we need to hide client IDs and secrets or our
- Drupal implementation.
- </p>
- <Webform
- id="contact"
- data={webform}
- customComponents={{
- textfield: withCustomStyles(
- components.textfield,
- fieldProps,
- labelProps,
- wrapperProps
- ),
- email: withCustomStyles(
- components.email,
- fieldProps,
- labelProps,
- wrapperProps
- ),
- textarea: withCustomStyles(
- components.textarea,
- fieldProps,
- labelProps,
- wrapperProps
- ),
- select: withCustomStyles(
- components.select,
- fieldProps,
- labelProps,
- wrapperProps
- ),
- webform_actions: withCustomStyles(
- components.webform_actions,
- buttonProps,
- labelProps,
- wrapperProps
- ),
- }}
- // className="space-y-6"
- />
- {/*<div className="w-full max-w-md p-6 space-y-4 border rounded-md shadow">*/}
- {/* {status === "error" ? (*/}
- {/* <div className="px-4 py-2 text-sm text-red-600 bg-red-100 border-red-200 rounded-md">*/}
- {/* An error occured. Please try again.*/}
- {/* </div>*/}
- {/* ) : null}*/}
- {/* {status === "success" ? (*/}
- {/* <div className="px-4 py-2 text-sm text-green-600 bg-green-100 border-green-200 rounded-md">*/}
- {/* Your message has been sent. Thank you.*/}
- {/* </div>*/}
- {/* ) : null}*/}
- {/* {Object.values(formState.errors)?.length ? (*/}
- {/* <div className="px-4 py-2 text-sm text-red-600 bg-red-100 border-red-200 rounded-md">*/}
- {/* {Object.values(formState.errors).map((error, index) => (*/}
- {/* <p key={index}>{error.message}</p>*/}
- {/* ))}*/}
- {/* </div>*/}
- {/* ) : null}*/}
- {/* <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>*/}
- {/* <div>*/}
- {/* <label*/}
- {/* htmlFor="name"*/}
- {/* className="block text-sm font-medium text-gray-700"*/}
- {/* >*/}
- {/* Name*/}
- {/* </label>*/}
- {/* <input*/}
- {/* id="name"*/}
- {/* name="name"*/}
- {/* type="text"*/}
- {/* className="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm"*/}
- {/* {...register("name")}*/}
- {/* />*/}
- {/* </div>*/}
- {/* <div>*/}
- {/* <label*/}
- {/* htmlFor="email"*/}
- {/* className="block text-sm font-medium text-gray-700"*/}
- {/* >*/}
- {/* Email*/}
- {/* </label>*/}
- {/* <input*/}
- {/* id="email"*/}
- {/* name="email"*/}
- {/* type="email"*/}
- {/* className="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm"*/}
- {/* {...register("email")}*/}
- {/* />*/}
- {/* </div>*/}
- {/* <div>*/}
- {/* <label*/}
- {/* htmlFor="team"*/}
- {/* className="block text-sm font-medium text-gray-700"*/}
- {/* >*/}
- {/* Team*/}
- {/* </label>*/}
- {/* <select*/}
- {/* id="team"*/}
- {/* name="team"*/}
- {/* className="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm"*/}
- {/* {...register("team")}*/}
- {/* >*/}
- {/* <option value="">-- Select --</option>*/}
- {/* {teams.map((team) => (*/}
- {/* <option value={team.drupal_internal__tid} key={team.id}>*/}
- {/* {team.name}*/}
- {/* </option>*/}
- {/* ))}*/}
- {/* </select>*/}
- {/* </div>*/}
- {/* <div>*/}
- {/* <label*/}
- {/* htmlFor="subject"*/}
- {/* className="block text-sm font-medium text-gray-700"*/}
- {/* >*/}
- {/* Subject*/}
- {/* </label>*/}
- {/* <input*/}
- {/* id="subject"*/}
- {/* name="subject"*/}
- {/* className="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm"*/}
- {/* {...register("subject")}*/}
- {/* />*/}
- {/* </div>*/}
- {/* <div>*/}
- {/* <label*/}
- {/* htmlFor="message"*/}
- {/* className="block text-sm font-medium text-gray-700"*/}
- {/* >*/}
- {/* Message*/}
- {/* </label>*/}
- {/* <textarea*/}
- {/* id="message"*/}
- {/* name="message"*/}
- {/* className="relative block w-full h-32 px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm"*/}
- {/* {...register("message")}*/}
- {/* ></textarea>*/}
- {/* </div>*/}
- {/* <button*/}
- {/* type="submit"*/}
- {/* data-cy="btn-submit"*/}
- {/* className="flex justify-center px-4 py-2 text-sm font-medium text-white bg-black border border-transparent rounded-md shadow-sm hover:bg-black"*/}
- {/* >*/}
- {/* Submit*/}
- {/* </button>*/}
- {/* </form>*/}
- {/*</div>*/}
+ <div className="w-full max-w-md p-6 space-y-4 border rounded-md shadow">
+ <Webform
+ id="contact"
+ data={webform}
+ className="space-y-6"
+ customComponents={{
+ textfield: withCustomStyles(
+ components.textfield,
+ fieldProps,
+ labelProps,
+ wrapperProps
+ ),
+ email: withCustomStyles(
+ components.email,
+ fieldProps,
+ labelProps,
+ wrapperProps
+ ),
+ textarea: withCustomStyles(
+ components.textarea,
+ fieldProps,
+ labelProps,
+ wrapperProps
+ ),
+ select: withCustomStyles(
+ components.select,
+ fieldProps,
+ labelProps,
+ wrapperProps
+ ),
+ webform_actions: withCustomStyles(
+ components.webform_actions,
+ {},
+ {},
+ { className: classNames("my-4", "space-x-4") }
+ ),
+ button: withCustomStyles(WebformButton, buttonProps, {}, {}),
+ }}
+ />
+ </div>
  <p>
  <Link href="/" passHref>
  <a>Go back</a>
@@ -264,10 +126,8 @@ export default function WebformPage({ teams, webform }: WebformPageProps) {
 export async function getStaticProps(): Promise<
  GetStaticPropsResult<WebformPageProps>
 > {
- // Load terms terms for the contact form.
  return {
  props: {
- teams: await getResourceCollection("taxonomy_term--team"),
  webform: await resolveWebformContent("contact", drupal),
  },
  }

diff --git a/yarn.lock b/yarn.lock
@@ -10089,10 +10089,10 @@ next@^12.2.3:
  "@next/swc-win32-ia32-msvc" "12.2.3"
  "@next/swc-win32-x64-msvc" "12.2.3"
 
-nextjs-drupal-webform@^1.0.0-alpha2:
- version "1.0.0-alpha2"
- resolved "https://registry.yarnpkg.com/nextjs-drupal-webform/-/nextjs-drupal-webform-1.0.0-alpha2.tgz#03f494b2f8a585ecff3c4bc0f55daeba08aedab9"
- integrity sha512-O+AszzKB1qRT0wFmrqthb1EvCz6rOxE+lbZq1ycj5eW2ftPjWOaui6icKWYVYUH+hkxTD3FYVQbMv7qukpuzEw==
+nextjs-drupal-webform@^1.0.0-beta1:
+ version "1.0.0-beta1"
+ resolved "https://registry.yarnpkg.com/nextjs-drupal-webform/-/nextjs-drupal-webform-1.0.0-beta1.tgz#fbb7989856fa0f559b599c3859c0922f4c5f7bba"
+ integrity sha512-qdV0LVZvBS9+VEI3IwGp43HkY2z6WuMxRWEuoVC9thqRxTWvspoCGCNYqpdm37IqN9uUgafQyzpQa6eI08ejSA==
  dependencies:
  classnames "^2.3.2"