FEAT: Enhance Form Components with Formik Integration and Configurabi…

…lity

src/app/(auth)/setup/page.tsx

@@ -4,4 +4,4 @@ import React from "react";
 
 export default function page() {
   return <SetupPage />;
-}
+}

src/components/ui/form/formwrapper.tsx

@@ -3,11 +3,10 @@ import * as Yup from "yup";
 
 interface FormWrapperProps {
   onSubmit: (values: Record<string, any>) => void;
-  inputs: React.ReactNode; // Form fields (inputs) as children
-  button: React.ReactNode; // Custom button component
-  initialValues: Record<string, any>; // Form's initial values
-  validationSchema: Yup.ObjectSchema<any>; // Form validation schema
-  formClassName?: string; // Optional class name for styling the form
+  inputs: React.ReactNode; // Accept Input components or other inputs as props
+  button: React.ReactNode; // Accept a custom button as a prop
+  initialValues: Record<string, any>; // Configurable initial values
+  validationSchema: Yup.ObjectSchema<any>; // Configurable validation schema
 }
 
 export const FormWrapper: React.FC<FormWrapperProps> = ({
@@ -16,12 +15,15 @@ export const FormWrapper: React.FC<FormWrapperProps> = ({
   button,
   initialValues,
   validationSchema,
-  formClassName = "flex flex-col gap-6", // Default styling
 }) => {
   return (
-    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={onSubmit}
+    >
       {() => (
-        <Form className={formClassName}>
+        <Form>
           {inputs}
           {button}
         </Form>