Assignment. of round 2

package.json

@@ -12,14 +12,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "formik": "^2.4.6",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
     "sort-by": "^1.2.0",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.3.1",

src/common/FormItem.jsx

@@ -0,0 +1,17 @@
+
+
+
+
+
+const FormItem = ({ label, children, errorMessage, inValid }) => {
+
+  return (
+    <div>
+      <div className="text-gray-800">{label}</div>
+      {children}
+      {inValid && <div className="text-red-500">{errorMessage}</div>}
+    </div>
+  )
+}
+
+export default FormItem

src/main.jsx

@@ -17,8 +17,8 @@ async function enableMocking() {
 
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById("root")).render(
-    <React.StrictMode>
+
       <App />
-    </React.StrictMode>,
+
   );
 });

src/pages/FormOne.jsx

@@ -0,0 +1,30 @@
+import { Icon } from "@iconify/react";
+import { Field, Form, Formik } from "formik";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import FormItem from "../common/FormItem";
+
+
+const FormOne = ({ formikProps }) => {
+    console.log(formikProps)
+    const { values, touched, errors } = formikProps
+
+
+
+    return (
+        <div className="grid md:grid-cols-2 gap-4 mb-10">
+            <FormItem label="Email" inValid={touched.emailId && errors.emailId} errorMessage={errors.emailId}>
+                <Field name='emailId'>
+                    {({ field }) => <input type="text"  {...field} />}
+                </Field>
+            </FormItem>
+            <FormItem label="Password" inValid={touched.password && errors.password} errorMessage={errors.password}>
+                <Field name='password'>
+                    {({ field }) => <input type="password"  {...field} />}
+                </Field>
+            </FormItem>
+        </div>
+    )
+}
+
+export default FormOne

src/pages/FormThree.jsx

@@ -0,0 +1,72 @@
+import { Icon } from "@iconify/react";
+import { Field, Form, Formik } from "formik";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import FormItem from "../common/FormItem";
+
+const Number = /^[0-9]+$/
+
+
+
+
+const FormThree = ({ formikProps }) => {
+    const { values, touched, errors, handleBlur } = formikProps
+    return (
+
+        <div className="grid md:grid-cols-2 gap-4 mb-10">
+            <FormItem label="Contry Code" inValid={touched.countryCode && errors.countryCode} errorMessage={errors.countryCode}>
+                <Field name='countryCode' >
+                    {({ field, form }) => <select value={values.countryCode} {...field} onChange={(e) => {
+
+                        form.setFieldValue(field.name, e.target.value)
+                    }}>
+                        <option value="">Select an option...</option>
+                        <option value="+91">+91</option>
+                        <option value="+1">+1</option>
+
+                    </select>}
+                </Field>
+            </FormItem>
+            <FormItem label="Phone Number" inValid={touched.phoneNumber && errors.phoneNumber} errorMessage={errors.phoneNumber}>
+                <Field name='phoneNumber' >
+                    {({ field, form }) => <input type="text"  {...field}
+                        onChange={(e) => {
+
+                            if (e.target.value === "" || Number.test(e.target.value)) {
+
+                                form.setFieldValue(field.name, e.target.value)
+                            }
+                        }}
+                        onBlur={handleBlur} />}
+                </Field>
+            </FormItem>
+            <FormItem label="" inValid={touched.terms && errors.terms} errorMessage={errors.terms}>
+                <Field name='terms' >
+                    {({ field, form }) => (<div class="flex items-center">
+                        <input
+                            type="checkbox"
+                            id="acceptTerms"
+                            name="acceptTerms"
+                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                            checked={values.terms}
+                            onChange={(e)=>{ form.setFieldValue(field.name, e.target.checked);}}
+                        />
+                        <label htmlFor="acceptTerms" className="ml-2 block text-sm text-gray-900">
+                            I accept the terms and conditions
+                        </label>
+                    </div>)}
+                </Field>
+            </FormItem>
+
+
+
+        </div>
+
+    )
+
+
+}
+
+
+
+export default FormThree