🚧 (wip) create form provider

features/auth/models/registerForm.schema.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 
 export const registerFormSchema = z
   .object({
-    fullname: z.string().min(1, "Full name is required"),
+    fullname: z.string().min(4, "Full name must be at least 4 characters long"),
     email: z.email("Invalid email address"),
     password: z
       .string()

features/auth/ui/cards/Signup.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Divider, Link } from "@heroui/react";
 import { routes } from "@/shared/config/routes";
 import OAuthProviders from "../components/OAuthProviders";
-import FullNameInput from "../components/FullNameInput";
+import ProvisionRegister from "../components/provision/main";
 
 type Props = {
   changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
@@ -17,7 +17,7 @@ const Signup = ({ changeCurrentPage }: Props) => {
 
       {/* Email form */}
       <div className="mt-6 px-3">
-        <FullNameInput changeCurrentPage={changeCurrentPage} />
+        <ProvisionRegister />
       </div>
 
       {/* Sign up link */}

features/auth/ui/components/FullNameInput.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { Button, Input } from "@heroui/react";
-import Provision from "../cards/Provision";
-
-type Props = {
-  changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
-};
-
-const FullNameInput = ({ changeCurrentPage }: Props) => {
-  const [fullName, setFullName] = useState("");
-
-  return (
-    <>
-      <Input
-        className="w-full "
-        label="Full Name"
-        type="name"
-        variant="bordered"
-        onChange={(e) => setFullName(e.target.value)}
-        classNames={{
-          input: "text-md font-light pt-4",
-          inputWrapper: "flex gap-10",
-        }}
-      />
-      <Button
-        onPress={() => changeCurrentPage(<Provision fullName={fullName} />)}
-        className="mt-2 w-full"
-        color="primary"
-      >
-        Continue
-      </Button>
-    </>
-  );
-};
-
-export default FullNameInput;

features/auth/ui/components/provision/main.tsx

@@ -1,5 +1,12 @@
+"use client";
+
 import React, { JSX, useState } from "react";
 import Step1ProvisionRegister from "./step1";
+import { Form } from "@heroui/react";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { registerFormSchema } from "@/features/auth/models/registerForm.schema";
+import Step2ProvisionRegister from "./step2";
 
 export type RegisterInputs = {
   fullname: string;
@@ -9,10 +16,32 @@ export type RegisterInputs = {
 };
 
 const ProvisionRegister = () => {
+  const formMethods = useForm<RegisterInputs>({
+    resolver: zodResolver(registerFormSchema),
+  });
+
+  const { handleSubmit } = formMethods;
+
+  const sendProvisionData: SubmitHandler<RegisterInputs> = (data) => {};
+
+  const NextToStep2 = () => {
+    setCurrentComponent(<Step2ProvisionRegister />);
+  };
+
   const [currentComponent, setCurrentComponent] = useState<JSX.Element>(
-    <Step1ProvisionRegister />
+    <Step1ProvisionRegister NextStep={NextToStep2} />
+  );
+
+  return (
+    <FormProvider {...formMethods}>
+      <Form
+        className="flex flex-col gap-1.5 "
+        onSubmit={handleSubmit(sendProvisionData)}
+      >
+        {currentComponent}
+      </Form>
+    </FormProvider>
   );
-  return <div>ProvisionRegister</div>;
 };
 
 export default ProvisionRegister;

features/auth/ui/components/provision/step1.tsx

@@ -1,7 +1,39 @@
-import React from "react";
+"use client";
 
-const Step1ProvisionRegister = () => {
-  return <div>Step1ProvisionRegister</div>;
+import { Button, Input } from "@heroui/react";
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+const Step1ProvisionRegister = ({ NextStep }: { NextStep: () => void }) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+  return (
+    <div className="w-full">
+      <Input
+        {...register("fullName")}
+        className="w-full"
+        label="Full Name"
+        type="email"
+        variant="bordered"
+        isInvalid={errors.fullname ? true : false}
+        errorMessage={errors.fullname?.message as string}
+        classNames={{
+          input: "text-md font-light pt-4",
+          inputWrapper: "flex gap-10",
+        }}
+      />
+      <Button
+        type="button"
+        className="mt-1.5 w-full"
+        color="primary"
+        onPress={NextStep}
+      >
+        Continue
+      </Button>
+    </div>
+  );
 };
 
 export default Step1ProvisionRegister;