feat: add formik and yup validation

package.json

@@ -14,14 +14,16 @@
     "@apollo/client": "^3.6.9",
     "@reduxjs/toolkit": "^1.8.5",
     "emoji-picker-react": "^3.6.1",
+    "formik": "^2.2.9",
     "graphql": "^16.6.0",
     "graphql-ws": "^5.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-loader-spinner": "^5.3.4",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@types/node": "^18.8.3",

src/components/FormGroupInput/FormGroupInput.tsx

@@ -1,28 +1,28 @@
+import { ErrorMessage, Field } from "formik"
 import { FormGroupProps } from "../../ts/interfaces"
 
 export default function FormGroupInput({
   type,
   label,
   placeholder,
   minLength,
-  maxLength,
-  required
+  maxLength
 }: FormGroupProps) {
   return (
     <div className="form-group">
       <label className="form__label" htmlFor={type}>
         {label}
       </label>
-      <input
+      <Field
         className="form__input"
         type={type}
         name={type}
         id={type}
         placeholder={placeholder}
-        required={required}
         minLength={minLength}
         maxLength={maxLength}
       />
+      <ErrorMessage name={type} />
     </div>
   )
 }

src/components/FormGroupInput/_formGroupInput.scss

@@ -6,8 +6,10 @@
   gap: 5px;
   width: 100%;
   max-width: 300px;
+  color: $pinkColor;
   .form__label {
     @include fluid-type(font-size, 600px, 1200px, 12px, 14px);
+    color: $whiteColor;
   }
   .form__input {
     height: 4vmin;