From 39d72a3b8ad1c522878ebe62a9b6feb6a691f330 Mon Sep 17 00:00:00 2001
From: Matheus <matheusmariosa341@gmail.com>
Date: Fri, 20 Jan 2023 20:23:01 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20constru=C3=A7=C3=A3o=20da=20valida?=
 =?UTF-8?q?=C3=A7=C3=A3o=20inicial?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/formschema.ts    | 10 +++++
 src/components/Main/main.module.scss | 35 ++++++++++++-----
 src/components/Main/mainFormik.tsx   | 57 ++++++++++++++++++----------
 3 files changed, 73 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Main/formschema.ts

diff --git a/src/components/Main/formschema.ts b/src/components/Main/formschema.ts
new file mode 100644
index 0000000..060a3b1
--- /dev/null
+++ b/src/components/Main/formschema.ts
@@ -0,0 +1,10 @@
+import { type } from "os";
+import * as Yup from "yup"
+
+export default Yup.object().shape({
+    nome: Yup.string().required("*Campo Obrigatório").min(2),
+    email: Yup.string().required("*Campo Obrigatório").email("E-mail inválido"),
+    cpf: Yup.number().required("*Campo Obrigatório").min(14),
+    dataDeNacismento: Yup.date().required("*Campo Obrigatório"),
+    telefone: Yup.number().required("*Campo Obrigatório").min(9),
+})
\ No newline at end of file
diff --git a/src/components/Main/main.module.scss b/src/components/Main/main.module.scss
index 9545abf..c4f488e 100644
--- a/src/components/Main/main.module.scss
+++ b/src/components/Main/main.module.scss
@@ -122,21 +122,36 @@
                 .item-form-conteiner{
                     display: flex;
                     flex-direction: column;
+                    
+                    .item-form-conteiner-schema {
+                        height: 40px;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                        align-items: center;
 
-                    .form-label, .form-input{
+                        .form-label, .invalid-feedback{
+                            font-family: 'Roboto';
+                            font-weight: 400;
+                            font-size: 14px;
+                            line-height: 16px;
+                            color: #100D0E;
+                            margin-left: 15px;
+                        }
+    
+                        .invalid-feedback{
+                            color: red;
+                            margin-left: 0;
+                            margin-top: 24px;
+                        }
+
+                    }
+
+                    .form-input{
                         font-family: 'Roboto';
                         font-weight: 400;
                         font-size: 14px;
                         line-height: 16px;
-                    }
-
-                    .form-label{
-                        color: #100D0E;
-                        margin: 12px 0;
-                        margin-left: 15px;
-                    }
-
-                    .form-input{
                         border: 1px solid #100D0E;
                         border-radius: 25px;
                         padding: 15px 20px;
diff --git a/src/components/Main/mainFormik.tsx b/src/components/Main/mainFormik.tsx
index b9ca250..f28351e 100644
--- a/src/components/Main/mainFormik.tsx
+++ b/src/components/Main/mainFormik.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import styles from './main.module.scss';
 
+import formschema from './formschema';
+
 import {Formik, Form, Field, ErrorMessage, FormikHelpers} from 'formik';
 
 interface IformikValues {
@@ -31,42 +33,59 @@ const Contato = () => {
     return(
         <div className={styles['conteiner-form']}>
             <h2 className={styles['item-form-title']}>Preencha o formulário </h2>
-            <Formik onSubmit={fomikSubmit} initialValues={initialValue}>
+            <Formik onSubmit={fomikSubmit} initialValues={initialValue} validationSchema={formschema}>
                 <Form className={styles['form']}>
                     <div className={styles['item-form-conteiner']}>
-                        <label htmlFor="nome" className={styles['form-label']}>
-                            Nome
-                        </label>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="nome" className={styles['form-label']}>
+                                Nome
+                            </label>
+                            <ErrorMessage component="span" name="nome" className={styles["invalid-feedback"]}/>
+                        </div>
                         <Field className={styles['form-input']} id="nome" name="nome" placeholder="Seu nome completo" />
                     </div>
                     <div className={styles['item-form-conteiner']}>
-                        <label htmlFor="email" className={styles['form-label']}>
-                            E-mail
-                        </label>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="email" className={styles['form-label']}>
+                                E-mail
+                            </label>
+                            <ErrorMessage component="span" name="email" className={styles["invalid-feedback"]}/>
+                        </div>
                         <Field className={styles['form-input']} id="email" name="email" placeholder="Seu e-mail" />
                     </div>
                     <div className={styles['item-form-conteiner']}>
-                        <label htmlFor="cpf" className={styles['form-label']}>
-                            CPF
-                        </label>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="cpf" className={styles['form-label']}>
+                                CPF
+                            </label>
+                            <ErrorMessage component="span" name="cpf" className={styles["invalid-feedback"]}/>
+                        </div>
                         <Field className={styles['form-input']} id="cpf" name="cpf" placeholder="000.000.000-00" />
                     </div>
                     <div className={styles['item-form-conteiner']}>
-                        <label htmlFor="dataDeNacismento" className={styles['form-label']}>
-                            Data de Nascimento
-                        </label>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="dataDeNacismento" className={styles['form-label']}>
+                                Data de Nascimento
+                            </label>
+                            <ErrorMessage component="span" name="dataDeNacismento" className={styles["invalid-feedback"]}/>
+                        </div>
                         <Field className={styles['form-input']} id="dataDeNacismento" name="dataDeNacismento" placeholder="00.00.0000" />
                     </div>
                     <div className={styles['item-form-conteiner']}>
-                        <label htmlFor="telefone" className={styles['form-label']}>
-                            Telefone
-                        </label>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="telefone" className={styles['form-label']}>
+                                Telefone
+                            </label>
+                            <ErrorMessage component="span" name="telefone" className={styles["invalid-feedback"]}/>
+                        </div>
                         <Field className={styles['form-input']} id="telefone" name="telefone" placeholder="(00) 00000-0000" />
                     </div>
                     <div className={styles['item-form-conteiner']}>
-                        <label htmlFor="instagram" className={styles['form-label']}>
-                            Instagram
-                        </label>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="instagram" className={styles['form-label']}>
+                                Instagram
+                            </label>
+                        </div>
                         <Field className={styles['form-input']} id="instagram" name="instagram" placeholder="@seuuser" />
                     </div>
                     <div className={styles['form-conteiner-checkbox']}>