From 95ae2f5c7a3cbe932ed6bc885fb554ef47c7f02d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Mon, 2 Jan 2023 18:49:43 -0300
Subject: [PATCH] feat: Adiciona inputs do formulario

---
 .../assets/styles/modules/Contato.module.scss |  97 +++++++++++++
 .../src/assets/styles/variables.scss          |   2 +
 react-project/src/components/Contato.tsx      | 135 +++++++++++++++++-
 react-project/src/components/Main.tsx         |   1 -
 react-project/src/components/Newsletter.tsx   |   1 -
 react-project/src/schema/FormSchema.ts        |  11 ++
 6 files changed, 244 insertions(+), 3 deletions(-)
 create mode 100644 react-project/src/schema/FormSchema.ts

diff --git a/react-project/src/assets/styles/modules/Contato.module.scss b/react-project/src/assets/styles/modules/Contato.module.scss
index 68c9c8c..bc451be 100644
--- a/react-project/src/assets/styles/modules/Contato.module.scss
+++ b/react-project/src/assets/styles/modules/Contato.module.scss
@@ -1,8 +1,105 @@
 .forms {
+  width: 100%;
+
   h2 {
     font-weight: 700;
     font-size: 24px;
     line-height: 28px;
     color: var(--black);
   }
+
+  &__form-col {
+    margin-bottom: 12px;
+    position: relative;
+
+    label {
+      display: block;
+      margin-bottom: 12px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: var(--black-300);
+    }
+
+    input {
+      width: 100%;
+      border: 1px solid var(--black-300);
+      border-radius: 25px;
+      height: 46px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: var(--gray-400);
+      padding: 15px 20px;
+
+      &::placeholder {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--gray-400);
+      }
+    }
+  }
+
+  &__terms {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 12px;
+
+    span {
+      color: var(--red-100);
+      margin-right: 2px;
+    }
+
+    label {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      margin-right: 4.28px;
+      position: relative;
+      text-decoration: underline;
+
+      label {
+        position: absolute;
+        height: 18px;
+        width: 18px;
+        border: 1px solid #000000;
+        border-radius: 3px;
+        right: -26px;
+      }
+    }
+    input {
+      opacity: 0;
+      width: 14px;
+      height: 14px;
+      margin-left: 1px;
+      margin-top: 1.5px;
+
+      &:checked {
+        opacity: 1;
+      }
+    }
+  }
+
+  .form-invalid-feedback {
+    top: 14px;
+    right: 19px;
+    position: absolute;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: var(--red-100);
+  }
+
+  button {
+    width: 100%;
+    height: 52.44px;
+    border-radius: 25px;
+    background-color: var(--black);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0.05em;
+    color: var(--white);
+  }
 }
diff --git a/react-project/src/assets/styles/variables.scss b/react-project/src/assets/styles/variables.scss
index b397e80..b84e57e 100644
--- a/react-project/src/assets/styles/variables.scss
+++ b/react-project/src/assets/styles/variables.scss
@@ -4,12 +4,14 @@
   --black: #000;
   --black-100: #292929;
   --black-200: #303030;
+  --black-300: #100d0e;
 
   --white: #fff;
 
   --gray-100: #c4c4c4;
   --gray-200: #7d7d7d;
   --gray-300: #e5e5e5;
+  --gray-400: #b9b7b7;
 
   --red-100: #ff0000;
 }
diff --git a/react-project/src/components/Contato.tsx b/react-project/src/components/Contato.tsx
index 401285c..92dde40 100644
--- a/react-project/src/components/Contato.tsx
+++ b/react-project/src/components/Contato.tsx
@@ -1,14 +1,147 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 
-import * as Yup from "yup";
+import FormSchema from "../schema/FormSchema";
 
 import contato from "../assets/styles/modules/Contato.module.scss";
 
+interface IFormikValues {
+  name: string;
+  email: string;
+  cpf: string;
+  date: string;
+  telefone: string;
+  instagram: string;
+  terms: boolean;
+}
+
+//setar valores iniciais
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  date: "",
+  telefone: "",
+  instagram: "",
+  terms: false,
+};
+
 const Contato = () => {
+  /*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/
+
   return (
     <div className={contato["forms"]}>
       <h2>Preencha o formulário</h2>
+
+      <Formik
+        onSubmit={(values: IFormikValues, actions) => {
+          console.log(values);
+          actions.resetForm();
+        }}
+        initialValues={initialValues}
+        validationSchema={FormSchema}
+      >
+        {({ errors, touched }) => (
+          <Form>
+            <div className={contato["forms__form-col"]}>
+              <label htmlFor="name">Nome</label>
+              <Field
+                placeholder="Seu nome completo"
+                id="name"
+                name="name"
+                className={errors.name && touched.name && "invalid"}
+              />
+              <ErrorMessage
+                component="span"
+                name="name"
+                className={contato["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={contato["forms__form-col"]}>
+              <label htmlFor="email">E-mail</label>
+              <Field
+                placeholder="Seu e-mail"
+                id="email"
+                name="email"
+                className={errors.email && touched.email && "invalid"}
+              />
+              <ErrorMessage
+                component="span"
+                name="email"
+                className={contato["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={contato["forms__form-col"]}>
+              <label htmlFor="cpf">CPF</label>
+              <Field
+                placeholder="000.000.000-00"
+                id="cpf"
+                name="cpf"
+                className={errors.cpf && touched.cpf && "invalid"}
+              />
+              <ErrorMessage
+                component="span"
+                name="cpf"
+                className={contato["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={contato["forms__form-col"]}>
+              <label htmlFor="date">Data de Nascimento</label>
+              <Field
+                type="date"
+                id="date"
+                name="date"
+                className={errors.date && touched.date && "invalid"}
+              />
+              <ErrorMessage
+                component="span"
+                name="date"
+                className={contato["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={contato["forms__form-col"]}>
+              <label htmlFor="telefone">Telefone</label>
+              <Field
+                placeholder="(00) 00000-0000"
+                type="tel"
+                id="telefone"
+                name="telefone"
+                className={errors.telefone && touched.telefone && "invalid"}
+              />
+              <ErrorMessage
+                component="span"
+                name="telefone"
+                className={contato["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={contato["forms__form-col"]}>
+              <label htmlFor="instagram">Instagram</label>
+              <Field
+                placeholder="@seuuser"
+                type="instagram"
+                id="instagram"
+                name="instagram"
+                className={errors.instagram && touched.instagram && "invalid"}
+              />
+              <ErrorMessage
+                component="span"
+                name="instagram"
+                className={contato["form-invalid-feedback"]}
+              />
+            </div>
+            <div className={contato["forms__terms"]}>
+              <span>*</span>
+              <label>
+                Declaro que li e aceito
+                <label htmlFor="terms" className={contato["teste"]}></label>
+              </label>
+              <Field type="checkbox" id="terms" name="terms" />
+            </div>
+
+            <button type="submit">CADASTRE-SE</button>
+          </Form>
+        )}
+      </Formik>
     </div>
   );
 };
diff --git a/react-project/src/components/Main.tsx b/react-project/src/components/Main.tsx
index a86e237..4d894e9 100644
--- a/react-project/src/components/Main.tsx
+++ b/react-project/src/components/Main.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Routes, Route } from "react-router-dom";
 
 import main from "../assets/styles/modules/Main.module.scss";
diff --git a/react-project/src/components/Newsletter.tsx b/react-project/src/components/Newsletter.tsx
index f4c88a2..97c740c 100644
--- a/react-project/src/components/Newsletter.tsx
+++ b/react-project/src/components/Newsletter.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import newsletter from "../assets/styles/modules/Newsletter.module.scss";
 
 import { Formik, Form, Field, ErrorMessage } from "formik";
diff --git a/react-project/src/schema/FormSchema.ts b/react-project/src/schema/FormSchema.ts
new file mode 100644
index 0000000..0fb4fee
--- /dev/null
+++ b/react-project/src/schema/FormSchema.ts
@@ -0,0 +1,11 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  name: Yup.string().required("*Campo obrigatorio"),
+  email: Yup.string().required("*Campo obrigatorio").email("email invalido"),
+  cpf: Yup.string().required("*Campo obrigatorio"),
+  date: Yup.date().required("*Campo obrigatorio"),
+  telefone: Yup.string().required("*Campo obrigatorio"),
+  instagram: Yup.string(),
+  terms: Yup.boolean().oneOf([true], ""),
+});