First public commit

components/forms/user-details-form.tsx

@@ -0,0 +1,71 @@
+import clsx from "clsx";
+import { useTranslation } from "next-i18next";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+
+import { requiredString } from "../../utils/form-validation";
+import { PollFormProps } from "./types";
+
+export interface UserDetailsData {
+  name: string;
+  contact: string;
+}
+
+export const UserDetailsForm: React.VoidFunctionComponent<
+  PollFormProps<UserDetailsData>
+> = ({ name, defaultValues, onSubmit, onChange, className }) => {
+  const { t } = useTranslation("app");
+  const {
+    handleSubmit,
+    register,
+    watch,
+    formState: { errors },
+  } = useForm<UserDetailsData>({ defaultValues });
+
+  React.useEffect(() => {
+    if (onChange) {
+      const subscription = watch(onChange);
+      return () => {
+        subscription.unsubscribe();
+      };
+    }
+  }, [watch, onChange]);
+
+  return (
+    <form
+      id={name}
+      className={className}
+      style={{ width: 400 }}
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="formField">
+        <label htmlFor="name">{t("name")}</label>
+        <input
+          type="text"
+          id="name"
+          className={clsx("input w-full", {
+            "input-error": errors.name,
+          })}
+          placeholder={t("namePlaceholder")}
+          {...register("name", { validate: requiredString })}
+        />
+      </div>
+
+      <div className="formField">
+        <label htmlFor="contact">{t("email")}</label>
+        <input
+          id="contact"
+          className={clsx("input w-full", {
+            "input-error": errors.contact,
+          })}
+          placeholder={t("emailPlaceholder")}
+          {...register("contact", {
+            validate: (value) => {
+              return /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value);
+            },
+          })}
+        />
+      </div>
+    </form>
+  );
+};