✨ feat: Add webform resolver for nextjs (#158)

Author: enZane

starters/next/integration/forms/ContactForm/ContactForm.tsx

@@ -10,10 +10,10 @@ import { contactFormSchema } from '@/integration/forms/ContactForm/schema'
 import { useActionState } from 'react'
 import { submitContactFormAction } from '@/integration/forms/ContactForm/action'
 
-export const ContactForm = () => {
+export const ContactForm = ({ id }: { id: string }) => {
   const [state, action] = useActionState(submitContactFormAction, undefined)
   const [form, fields] = useForm({
-    id: 'contact-form',
+    id,
     lastResult: state?.reply,
     constraint: getZodConstraint(contactFormSchema),
     onValidate({ formData }) {

starters/next/integration/resolvers/ParagraphWebformResolver.tsx

@@ -26,12 +26,23 @@ export const ParagraphWebformFragment = graphql(
   [WebformFragment]
 )
 
+type FormComponents = React.FC<{ id: string }>
+
+const WebformComponentResolver: Record<string, FormComponents> = {
+  contact_form: ContactForm,
+}
+
 export const ParagraphWebformResolver = ({
   paragraph,
 }: ParagraphWebformProps) => {
   const { heading, subheadingOptional, descriptionOptional, form } =
     readFragment(ParagraphWebformFragment, paragraph)
 
+  if (!form || !form.id) {
+    return null
+  }
+
+  const Webform = WebformComponentResolver[form.id]
   return (
     <div className="container mx-auto py-8 md:py-16 lg:py-24">
       <div>
@@ -47,11 +58,9 @@ export const ParagraphWebformResolver = ({
             dangerouslySetInnerHTML={{ __html: descriptionOptional }}
           />
         )}
-        {form && (
-          <div className="py-8 md:py-16 lg:py-24">
-            <ContactForm />
-          </div>
-        )}
+        <div className="py-8 md:py-16 lg:py-24">
+          <Webform id={form.id} />
+        </div>
       </div>
     </div>
   )