feat: big refactor for CustomInput component

components/auth/AuthForm.tsx

@@ -126,7 +126,7 @@ export const AuthForm = ({ type }: { type: string }) => {
               placeholder="Enter your email"
             />
 
-            <CustomInput control={form.control} password />
+            <CustomInput control={form.control} name="password" password />
 
             {type === "sign-in" && (
               <div className="flex items-center justify-between px-1 py-2">

components/providers/forms/EditForm.tsx

@@ -8,7 +8,7 @@ import * as z from "zod";
 
 import { updateProvider } from "@/actions";
 import { useToast } from "@/components/ui";
-import { CustomInputNew } from "@/components/ui/custom";
+import { CustomInput } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
 import { editProviderFormSchema } from "@/types";
 
@@ -70,15 +70,7 @@ export const EditForm = ({
         <input type="hidden" name="providerId" value={providerId} />
         <div>Current alias: {providerAlias}</div>
 
-        {/* <CustomInput
-          control={form.control}
-          name="alias"
-          type="text"
-          label="Alias"
-          placeholder={providerAlias}
-        /> */}
-
-        <CustomInputNew
+        <CustomInput
           control={form.control}
           name="alias"
           type="text"

components/ui/custom/CustomInput.tsx

@@ -3,48 +3,33 @@
 import { Icon } from "@iconify/react";
 import { Input } from "@nextui-org/react";
 import React, { useState } from "react";
-import { Control, FieldPath } from "react-hook-form";
-import { z } from "zod";
+import { Control, FieldPath, FieldValues } from "react-hook-form";
 
 import { FormControl, FormField, FormMessage } from "@/components/ui/form";
-import { authFormSchema } from "@/types";
 
-const formSchema = authFormSchema("sign-up");
-
-type CustomInputProps = {
-  control: Control<z.infer<typeof formSchema>>;
+interface CustomInputProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label?: string;
+  type?: string;
+  placeholder?: string;
   isRequired?: boolean;
-} & (
-  | {
-      password?: false;
-      name: FieldPath<z.infer<typeof formSchema>>;
-      label: string;
-      type: "text" | "email";
-      placeholder: string;
-    }
-  | {
-      password: true;
-      name?: never;
-      label?: never;
-      type?: never;
-      placeholder?: never;
-    }
-);
+  password?: boolean;
+}
 
-export const CustomInput = ({
+export const CustomInput = <T extends FieldValues>({
   control,
   name,
-  type,
-  label,
+  type = "text",
+  label = name,
   placeholder,
   password = false,
   isRequired = true,
-}: CustomInputProps) => {
+}: CustomInputProps<T>) => {
   const [isVisible, setIsVisible] = useState(false);
 
   const toggleVisibility = () => setIsVisible(!isVisible);
 
-  const inputName = password ? "password" : name!;
   const inputLabel = password ? "Password" : label;
   const inputType = password ? (isVisible ? "text" : "password") : type;
   const inputPlaceholder = password ? "Enter your password" : placeholder;
@@ -62,7 +47,7 @@ export const CustomInput = ({
   return (
     <FormField
       control={control}
-      name={inputName as FieldPath<z.infer<typeof formSchema>>}
+      name={name}
       render={({ field }) => (
         <>
           <FormControl>

components/ui/custom/CustomInputNew.tsx

@@ -1,44 +0,0 @@
-import { Input } from "@nextui-org/react";
-import { Control, FieldPath, FieldValues } from "react-hook-form";
-
-import { FormControl, FormField, FormMessage } from "@/components/ui/form";
-
-interface CustomInputNewProps<T extends FieldValues> {
-  control: Control<T>;
-  name: FieldPath<T>;
-  label: string;
-  type: string;
-  placeholder?: string;
-  isRequired?: boolean;
-}
-
-export const CustomInputNew = <T extends FieldValues>({
-  control,
-  name,
-  label,
-  type,
-  placeholder,
-  isRequired = false,
-}: CustomInputNewProps<T>) => {
-  return (
-    <FormField
-      control={control}
-      name={name}
-      render={({ field }) => (
-        <>
-          <FormControl>
-            <Input
-              isRequired={isRequired}
-              label={label}
-              placeholder={placeholder}
-              type={type}
-              variant="bordered"
-              {...field}
-            />
-          </FormControl>
-          <FormMessage className="text-system-error dark:text-system-error" />
-        </>
-      )}
-    />
-  );
-};

components/ui/custom/index.ts

@@ -2,5 +2,4 @@ export * from "./CustomAlertModal";
 export * from "./CustomBox";
 export * from "./CustomButtonClientAction";
 export * from "./CustomInput";
-export * from "./CustomInputNew";
 export * from "./CustomLoader";