feat(RegisterForm): add custom input and button components support with component as prop pattern

src/features/auth/ui/RegisterForm/RegisterForm.tsx

@@ -1,22 +1,45 @@
-import { useState, type ChangeEvent, type SubmitEvent } from "react";
 import {
+  cloneElement,
+  useState,
+  type ChangeEvent,
+  type ReactElement,
+  type SubmitEvent,
+} from "react";
+import {
+  selectEmail,
   selectFormValid,
+  selectPassword,
   selectStatusIsLoading,
   useAuthStore,
 } from "../../model";
+import {
+  DefaultInputComponent,
+  type InputAttributes,
+} from "../DefaultInput/DefaultInput";
+import {
+  DefaultButtonComponent,
+  type ButtonAttributes,
+} from "../DefaultButton/DefaultButton";
+
+export interface Props {
+  InputComponent?: ReactElement<InputAttributes>;
+  ButtonComponent?: ReactElement<ButtonAttributes>;
+}
 
 /**
  * Register form component
  */
-export function RegisterForm() {
+export function RegisterForm({ InputComponent, ButtonComponent }: Props) {
-  const { formData, setEmail, setPassword, register } = useAuthStore();
+  const { setEmail, setPassword, register } = useAuthStore();
+  const email = useAuthStore(selectEmail);
+  const password = useAuthStore(selectPassword);
 
   const [confirmedPassword, setConfirmedPassword] = useState("");
 
   const formValid = useAuthStore(selectFormValid);
   const isLoading = useAuthStore(selectStatusIsLoading);
 
-  const passwordMatch = formData?.password?.value === confirmedPassword;
+  const passwordMatch = password === confirmedPassword;
   const disabled = isLoading || !formValid || !passwordMatch;
 
   const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -38,27 +61,63 @@ export function RegisterForm() {
 
   return (
     <form aria-label="Register Form" onSubmit={handleSubmit}>
-      <input
+      {/* EMAIL */}
-        type="email"
+      {InputComponent ? (
-        aria-label="Email"
+        cloneElement(InputComponent, {
-        value={formData?.email?.value ?? ""}
+          value: email,
-        onChange={handleEmailChange}
+          onChange: handleEmailChange,
-      />
+          "aria-label": "Email",
-      <input
+        })
-        type="password"
+      ) : (
-        aria-label="Password"
+        <DefaultInputComponent
-        value={formData?.password?.value ?? ""}
+          type="email"
-        onChange={handlePasswordChange}
+          value={email}
-      />
+          onChange={handleEmailChange}
-      <input
+          aria-label="Email"
-        type="password"
+        />
-        aria-label="Confirm"
+      )}
-        value={confirmedPassword}
+
-        onChange={handleConfirmChange}
+      {/* PASSWORD  */}
-      />
+      {InputComponent ? (
-      <button type="submit" aria-label="Register" disabled={disabled}>
+        cloneElement(InputComponent, {
-        Register
+          value: password,
-      </button>
+          onChange: handlePasswordChange,
+          "aria-label": "Password",
+        })
+      ) : (
+        <DefaultInputComponent
+          type="password"
+          value={password}
+          onChange={handlePasswordChange}
+          aria-label="Password"
+        />
+      )}
+      {/* PASSWORD  */}
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          value: confirmedPassword,
+          onChange: handleConfirmChange,
+          "aria-label": "Confirm",
+        })
+      ) : (
+        <DefaultInputComponent
+          type="password"
+          value={confirmedPassword}
+          onChange={handleConfirmChange}
+          aria-label="Confirm"
+        />
+      )}
+      {/* BUTTON */}
+      {ButtonComponent ? (
+        cloneElement(ButtonComponent, {
+          type: "submit",
+          disabled: disabled,
+        })
+      ) : (
+        <DefaultButtonComponent disabled={disabled}>
+          Register
+        </DefaultButtonComponent>
+      )}
     </form>
   );
 }