feat: criação do formulário e da navegação do formulário

desafio-react-e-typescript/package.json

@@ -44,6 +44,9 @@
   },
   "devDependencies": {
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.26"
+    "@types/styled-components": "^5.1.26",
+    "formik": "^2.2.9",
+    "node-sass": "^7.0.3",
+    "yup": "^0.32.11"
   }
 }

desafio-react-e-typescript/src/App.scss

@@ -0,0 +1,7 @@
+.Container-menu {
+  display: flex;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}

desafio-react-e-typescript/src/App.tsx

@@ -1,9 +1,12 @@
 import { Router } from "./router";
+import "./App.scss";
 
 export const App = () => {
   return (
     <>
-      <Router />
+      <section className="Container-menu">
+        <Router />
+      </section>
     </>
   );
 };

desafio-react-e-typescript/src/components/ContactForm.tsx

@@ -0,0 +1,92 @@
+import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
+import FormSchema from "../schema/FormSchema";
+
+interface IFormikValues {
+  name: string;
+  email: string;
+  cpf: string;
+  data: string;
+  telefone: string;
+  instagram?: string;
+  checkbox: boolean;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  data: "",
+  telefone: "",
+  instagram: "",
+  checkbox: false,
+};
+
+const formSubmit = (values: IFormikValues) => {
+  console.log(values);
+};
+
+export const ContactForm = () => {
+  return (
+    <Formik
+      onSubmit={formSubmit}
+      initialValues={initialValues}
+      validationSchema={FormSchema}
+    >
+      {({ errors, touched }) => (
+        <Form>
+          <h2>Preencha o formulário </h2>
+          <label htmlFor="name">Nome</label>
+          <Field
+            id="name"
+            name="name"
+            className={errors.name && touched.name && "invalid"}
+          />
+          <ErrorMessage name="name" className="form-ivalid-feedback" />
+          <label htmlFor="email">E-mail</label>
+          <Field
+            id="email"
+            name="email"
+            className={errors.email && touched.email && "invalid"}
+          />
+          <ErrorMessage name="email" className="form-ivalid-feedback" />
+          <label htmlFor="cpf">CPF</label>
+          <Field
+            id="cpf"
+            name="cpf"
+            className={errors.cpf && touched.cpf && "invalid"}
+          />
+          <ErrorMessage name="cpf" className="form-ivalid-feedback" />
+          <label htmlFor="data">Data de Nascimento:</label>
+          <Field
+            id="data"
+            name="data"
+            className={errors.data && touched.data && "invalid"}
+          />
+          <ErrorMessage name="data" className="form-ivalid-feedback" />
+          <label htmlFor="telefone">Telefone:</label>
+          <Field
+            id="telefone"
+            name="telefone"
+            className={errors.telefone && touched.telefone && "invalid"}
+          />
+          <ErrorMessage name="telefone" className="form-ivalid-feedback" />
+          <label htmlFor="instagram">Instagram</label>
+          <Field id="instagram" name="instagram" />
+          <ErrorMessage name="instagram" className="form-ivalid-feedback" />
+          <div>
+            <label htmlFor="checkbox">Declaro que li e aceito</label>
+            <Field
+              type="checkbox"
+              id="checkbox"
+              name="checkbox"
+              className={errors.checkbox && touched.checkbox && "invalid"}
+            />
+            <ErrorMessage name="checkbox" className="form-ivalid-feedback" />
+          </div>
+
+          <button type="submit">CADASTRE-SE</button>
+        </Form>
+      )}
+    </Formik>
+  );
+};

desafio-react-e-typescript/src/components/Navegation.scss

@@ -0,0 +1,17 @@
+.Menu-routes {
+  padding: 0 16px;
+
+  @media (min-width: 1025px) {
+    min-width: 24%;
+    margin-left: 100px;
+    padding: 0;
+  }
+
+  ul {
+    list-style: none;
+    a {
+      color: #7d7d7d;
+      text-decoration: none;
+    }
+  }
+}

desafio-react-e-typescript/src/components/Navegation.tsx

@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom";
+import "./Navegation.scss";
+
+export const Navegation = () => {
+  return (
+    <>
+      <nav className="Menu-routes">
+        <ul>
+          <li>
+            <Link to={"/"}> Sobre </Link>
+          </li>
+          <li>
+            <Link to={"/Pagamentos"}> Formas de Pagamento</Link>
+          </li>
+          <li>
+            <Link to={"/Entrega"}> Entrega </Link>
+          </li>
+          <li>
+            <Link to={"/Devolução"}> Troca e Devolução </Link>
+          </li>
+          <li>
+            <Link to={"/Segurança"}> Segurança e Privacidade</Link>
+          </li>
+          <li>
+            <Link to={"/Contatos"}> Contatos</Link>
+          </li>
+        </ul>
+      </nav>
+    </>
+  );
+};

desafio-react-e-typescript/src/pages/Contact.modules.scss

@@ -0,0 +1,21 @@
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 16px;
+
+  input {
+    margin-bottom: 12px;
+  }
+
+  div {
+    display: flex;
+    justify-content: center;
+  }
+
+  @media (max-width: 1024px) {
+    h2 {
+      text-align: center;
+    }
+  }
+}

desafio-react-e-typescript/src/pages/Contact.tsx

@@ -1,3 +1,10 @@
-export const Contact = () => {
-  return <h1> Form </h1>;
+import { ContactForm } from "../components/ContactForm";
+import "./Contact.modules.scss";
+
+export const Form = () => {
+  return (
+    <>
+      <ContactForm />
+    </>
+  );
 };

desafio-react-e-typescript/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

desafio-react-e-typescript/src/router.tsx

@@ -1,22 +1,24 @@
 import { Routes, Route } from "react-router-dom";
+import { Navegation } from "./components/Navegation";
 
 import { About } from "./pages/About";
 import { Payments } from "./pages/Payments";
 import { Delivery } from "./pages/Delivery";
-import { Contact } from "./pages/Contact";
+import { Form } from "./pages/Contact";
 import { Privacy } from "./pages/Privacy";
 import { Refund } from "./pages/Refund";
 
 export const Router = () => {
   return (
     <>
+      <Navegation />
       <Routes>
         <Route path="/" element={<About />} />
         <Route path="/Pagamentos" element={<Payments />} />
         <Route path="/Entrega" element={<Delivery />} />
-        <Route path="/Contatos" element={<Contact />} />
-        <Route path="/Segurança" element={<Privacy />} />
         <Route path="/Devolução" element={<Refund />} />
+        <Route path="/Segurança" element={<Privacy />} />
+        <Route path="/Contatos" element={<Form />} />
       </Routes>
     </>
   );

desafio-react-e-typescript/src/schema/CustonValidations.ts

@@ -0,0 +1,3 @@
+export const phoneNumber = /\([1-9]{2}\) 9[1-9]\d{3}-\d{4}/;
+
+export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;

desafio-react-e-typescript/src/schema/FormSchema.ts

@@ -0,0 +1,15 @@
+import * as Yup from "yup";
+
+import { phoneNumber, cpfNumber } from "./CustonValidations";
+
+export default Yup.object().shape({
+  name: Yup.string().required("*Campo Obrigatório"),
+  email: Yup.string()
+    .email()
+    .required("*Campo Obrigatório")
+    .email("E-mail inválido"),
+  cpf: Yup.string().matches(cpfNumber).required("*Campo Obrigatório"),
+  telefone: Yup.string().matches(phoneNumber).required("*Campo Obrigatório"),
+  data: Yup.number().required("*Campo Obrigatório"),
+  checkbox: Yup.boolean().required("*"),
+});