Merge pull request #1076 from w3bdesign/develop

🔥 cleanup: remove formFields array from formConfig.ts

Author: w3bdesign

src/components/Kontakt/ContactForm.component.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import Button from "@/components/UI/Button.component";
+import InputField from "@/components/UI/InputField.component";
+import { formSchema, FormData } from "./config/formConfig";
+
+interface ContactFormProps {
+  onSubmit: (data: FormData) => Promise<void>;
+  csrfToken?: string;
+}
+
+/**
+ * A simplified contact form component that directly uses the form schema
+ * without complex generic abstractions.
+ */
+const ContactForm: React.FC<ContactFormProps> = ({ onSubmit, csrfToken }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+  });
+
+  return (
+    <form
+      id="contact-form"
+      className="text-center"
+      onSubmit={handleSubmit(onSubmit)}
+      method="POST"
+      action="/api/form"
+      aria-label="Contact Form"
+    >
+      {csrfToken && <input type="hidden" name="_csrf" value={csrfToken} />}
+      <fieldset>
+        <legend className="text-center mx-auto text-xl mt-4 sr-only">
+          Kontaktskjema
+        </legend>
+
+        {/* Navn field */}
+        <InputField<FormData>
+          name="navn"
+          label="Fullt navn"
+          htmlFor="navn"
+          register={register}
+          error={errors.navn?.message}
+          isRequired
+          inputPattern={/^[a-zA-ZæøåÆØÅ ]+$/}
+          title="Vennligst bruk norske bokstaver"
+        />
+        <br />
+
+        {/* Telefon field */}
+        <InputField<FormData>
+          name="telefon"
+          label="Telefonnummer"
+          htmlFor="telefon"
+          register={register}
+          error={errors.telefon?.message}
+          isRequired
+          inputPattern={/^\d{8}$/}
+          title="Vennligst oppgi et gyldig telefonnummer"
+        />
+        <br />
+
+        {/* Tekst field */}
+        <InputField<FormData>
+          name="tekst"
+          label="Hva ønsker du å si?"
+          htmlFor="tekst"
+          register={register}
+          error={errors.tekst?.message}
+          isRequired
+          type="textarea"
+        />
+        <br />
+      </fieldset>
+
+      <div className="-mt-4">
+        <Button disabled={isSubmitting} data-testid="submit-button">
+          Send skjema
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export default ContactForm;

src/components/Kontakt/KontaktContent.component.tsx

@@ -1,19 +1,12 @@
 "use client";
 
 import React, { useState } from "react";
-import { z } from "zod";
 import emailjs from "@emailjs/browser";
 
 import PageHeader from "@/components/UI/PageHeader.component";
-import GenericForm from "@/components/UI/GenericForm.component";
+import ContactForm from "./ContactForm.component";
 
-import { formSchema, formFields, FormData } from "./config/formConfig";
-
-type KontaktFormShape = {
-  navn: z.ZodString;
-  telefon: z.ZodString;
-  tekst: z.ZodString;
-};
+import { FormData } from "./config/formConfig";
 
 /**
  * Props for the KontaktContent component.
@@ -96,11 +89,8 @@ const KontaktContent: React.FC<Props> = ({
                   </h3>
                 ) : (
                   <div className="bg-gray-800 p-4 md:p-6 rounded-lg pt-8">
-                    <GenericForm<KontaktFormShape>
-                      formSchema={formSchema}
+                    <ContactForm
                       onSubmit={handleFormSubmit}
-                      fields={formFields}
-                      submitButtonText="Send skjema"
                       csrfToken={csrfToken}
                     />
                   </div>

src/components/Kontakt/config/formConfig.ts

@@ -13,23 +13,3 @@ export const formSchema = z.object({
 });
 
 export type FormData = z.infer<typeof formSchema>;
-
-export const formFields = [
-  {
-    name: "navn" as const,
-    label: "Fullt navn",
-    inputPattern: /^[a-zA-ZæøåÆØÅ ]+$/,
-    title: "Vennligst bruk norske bokstaver",
-  },
-  {
-    name: "telefon" as const,
-    label: "Telefonnummer",
-    inputPattern: /^\d{8}$/,
-    title: "Vennligst oppgi et gyldig telefonnummer",
-  },
-  {
-    name: "tekst" as const,
-    label: "Hva ønsker du å si?",
-    type: "textarea" as const,
-  },
-] as const;