feat(main-content-form): Cria formulario com validacao de inputs usando formik e yup

src/components/main-content.module.scss

@@ -2,9 +2,8 @@
 
 .main-content-container {
   width: 100%;
-  // height: 588px;
   background: variables.$color-white;
-  // padding-top: 40px;
+  padding: 40px 0;
 
   .main-content-wrapper {
     width: 80.46875%;
@@ -18,13 +17,16 @@
 
     .main-content-list {
       width: 29.32038%;
+      height: 285px;
+      border-right: 1px solid variables.$color-black;
 
       @media screen and (max-width: 1024px) {
         width: 100%;
+        border: 0;
       }
 
       .main-content-item {
-        padding: 10px 0 16px 16px;
+        padding: 5px 0 5px 16px;
 
         @media screen and (max-width: 1024px) {
           padding: 10px 16px;
@@ -49,14 +51,13 @@
 
     .main-content-text {
       width: 72.62135%;
-      border-left: 1px solid variables.$color-black;
 
       @media screen and (max-width: 1024px) {
         width: 100%;
         border: 0;
       }
 
-      div {
+      .main-content-text-wrapper {
         margin-left: 30px;
 
         @media screen and (max-width: 1024px) {

src/components/main/components/Contato.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { MainMenu } from "./MainMenu";
+import { MainForm } from "./MainForm";
 
 import style from "../../main-content.module.scss";
 
@@ -9,7 +10,8 @@ const Contato = () => {
       <MainMenu />
       <div className={style["main-content-text"]}>
         <div className={style["main-content-text-wrapper"]}>
-          <h2>Contato</h2>
+          <h2>Preencha o formulário</h2>
+          <MainForm />
         </div>
       </div>
     </section>

src/components/main/components/MainForm.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { Field, Form, Formik, ErrorMessage } from "formik";
+
+import style from "../../main/components/main-form.module.scss";
+import FormMainSchema from "../../../schema/FormMainSchema";
+
+interface IFormMain {
+  name: string;
+  email: string;
+  cpf: string;
+  datee: string;
+  tel: string;
+  inst: string;
+  check: boolean;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  datee: "",
+  tel: "",
+  inst: "",
+  check: false,
+};
+
+const MainForm = () => {
+  return (
+    <section className={style["main-form-container"]}>
+      <Formik
+        onSubmit={(values: IFormMain, { resetForm }) => {
+          console.log(values);
+          resetForm();
+        }}
+        initialValues={initialValues}
+        validationSchema={FormMainSchema}
+      >
+        {({ errors, touched, isSubmitting }) => (
+          <Form className={style["main-form"]}>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="name">Nome</label>
+              <Field id="name" name="name" placeholder="Seu nome completo" />
+              <ErrorMessage
+                component="span"
+                name="name"
+                className={errors.name && touched ? "form-feedback" : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="email">E-mail</label>
+              <Field id="email" name="email" placeholder="Seu e-mail" />
+              <ErrorMessage
+                component="span"
+                name="email"
+                className={errors.email && touched ? "form-feedback" : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="cpf">CPF</label>
+              <Field id="cpf" name="cpf" placeholder="000.000.000-00" />
+              <ErrorMessage
+                component="span"
+                name="cpf"
+                className={errors.cpf && touched ? "form-feedback" : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="datee">Data de Nascimento:</label>
+              <Field id="datee" name="datee" placeholder="00.00.0000" />
+              <ErrorMessage
+                component="span"
+                name="date"
+                className={errors.datee && touched ? "form-feedback" : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="tel">Telefone:</label>
+              <Field id="tel" name="tel" placeholder="(00) 00000-0000" />
+              <ErrorMessage
+                component="span"
+                name="tel"
+                className={errors.tel && touched ? "form-feedback" : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="inst">Instagram</label>
+              <Field id="inst" name="inst" placeholder="@seuuser" />
+              <ErrorMessage
+                component="span"
+                name="inst"
+                className={errors.inst && touched ? "form-feedback" : ""}
+              />
+            </div>
+
+            <div className={style["main-form-checkbox"]}>
+              <label htmlFor="check">
+                <span className={style["main-form-dot"]}>* </span>
+                <span className={style["main-form-span"]}>
+                  Declaro que li e aceito
+                </span>
+                <Field type="checkbox" id="check" name="check" />
+                <ErrorMessage
+                  component="span"
+                  name="check"
+                  className={errors.check && touched ? "form-feedback" : ""}
+                />
+              </label>
+            </div>
+
+            <button
+              className={style["main-form-button"]}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              CADASTRE-SE
+            </button>
+          </Form>
+        )}
+      </Formik>
+    </section>
+  );
+};
+
+export { MainForm };

src/components/main/components/main-form.module.scss

@@ -0,0 +1,78 @@
+@use "../../../variables.module.scss";
+
+.main-form-container {
+  width: 100%;
+  height: 650px;
+
+  .main-form {
+    width: 100%;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+
+    .main-form-item-wrapper {
+      display: flex;
+      flex-direction: column;
+
+      label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: variables.$color-black4;
+
+        margin-left: 15px;
+        margin-bottom: 12px;
+      }
+
+      input {
+        padding: 15px 20px;
+        border: 1px solid variables.$color-black4;
+        border-radius: 25px;
+
+        margin-bottom: 12px;
+      }
+    }
+
+    .main-form-checkbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 12px;
+
+      input {
+        margin-left: 4.28px;
+      }
+
+      .main-form-dot,
+      .main-form-span {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+      }
+
+      .main-form-dot {
+        color: variables.$color-red;
+      }
+
+      .main-form-span {
+        color: variables.$color-black4;
+        text-decoration: underline;
+      }
+    }
+
+    .main-form-button {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: 0.05em;
+      color: variables.$color-white;
+
+      outline: 0;
+      border: 0;
+      padding: 17px 0;
+
+      background: variables.$color-black;
+      border-radius: 25px;
+    }
+  }
+}

src/schema/FormMainSchema.ts

@@ -0,0 +1,37 @@
+import * as Yup from "yup";
+
+const getFormatedDate = (currentDate: string) => {
+  return currentDate.split("/").reverse().join("-");
+};
+
+const getFormatedCPF = (currentCPF: string) => {
+  return currentCPF.split(".").reverse().join("-");
+};
+
+const getFormatedTel = (currentTel: string) => {
+  return currentTel.split("()").reverse().join("-");
+};
+
+const getFormatedInst = (currentInst: string) => {
+  return currentInst.split("@").join("@");
+};
+
+export default Yup.object().shape({
+  name: Yup.string()
+    .min(2, "Nome deve conter pelo menos 2 letras!")
+    .required("*Campo Obrigatório"),
+  email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
+  cpf: Yup.string()
+    .min(11, getFormatedCPF("111.111.111-11"))
+    .required("*Campo Obrigatório"),
+  datee: Yup.date()
+    .min(getFormatedDate("01/01/1900"))
+    .required("*Campo Obrigatório"),
+  tel: Yup.string()
+    .min(11, getFormatedTel("(22)99999-9999"))
+    .required("*Campo Obrigatório"),
+  inst: Yup.string().min(3, getFormatedInst("@seuuser")).notRequired(),
+  check: Yup.boolean()
+    .oneOf([true], "Você deve aceitar os termos!")
+    .required("*Campo Obrigatório"),
+});

src/variables.module.scss

@@ -9,6 +9,7 @@ $font-primary: "Roboto", sans-serif;
 $color-black: #000000;
 $color-black2: #292929;
 $color-black3: #303030;
+$color-black4: #100d0e;
 
 $color-white: #ffffff;