From a17271fa7cb6cd25f3f6de4b33ec8aa35a958249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Tue, 3 Jan 2023 18:44:01 -0300
Subject: [PATCH] feat: Adiciona masks nos inputs

---
 react-project/package-lock.json          | 55 ++++++++++++++++++
 react-project/package.json               |  1 +
 react-project/src/Declarations.d.ts      |  1 +
 react-project/src/components/Contato.tsx | 74 ++++++++++++++++++------
 react-project/src/schema/FormSchema.ts   | 14 +++--
 5 files changed, 122 insertions(+), 23 deletions(-)
 create mode 100644 react-project/src/Declarations.d.ts

diff --git a/react-project/package-lock.json b/react-project/package-lock.json
index 00fb352..128dd0d 100644
--- a/react-project/package-lock.json
+++ b/react-project/package-lock.json
@@ -19,6 +19,7 @@
         "node-sass": "^7.0.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-input-mask": "^2.0.4",
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
         "react-text-mask": "^5.5.0",
@@ -9327,6 +9328,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -15082,6 +15091,19 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0",
+        "react-dom": ">=0.14.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -17579,6 +17601,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -25212,6 +25242,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -29212,6 +29250,15 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "requires": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -31089,6 +31136,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/react-project/package.json b/react-project/package.json
index feda978..081aa34 100644
--- a/react-project/package.json
+++ b/react-project/package.json
@@ -14,6 +14,7 @@
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "react-text-mask": "^5.5.0",
diff --git a/react-project/src/Declarations.d.ts b/react-project/src/Declarations.d.ts
new file mode 100644
index 0000000..b614a49
--- /dev/null
+++ b/react-project/src/Declarations.d.ts
@@ -0,0 +1 @@
+declare module "react-text-mask";
diff --git a/react-project/src/components/Contato.tsx b/react-project/src/components/Contato.tsx
index efa9809..bd3079b 100644
--- a/react-project/src/components/Contato.tsx
+++ b/react-project/src/components/Contato.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import FormSchema from "../schema/FormSchema";
+import { render } from "react-dom";
+import MaskedInput from "react-text-mask";
 
 import contato from "../assets/styles/modules/Contato.module.scss";
 
@@ -25,9 +27,27 @@ const initialValues = {
   terms: false,
 };
 
-/*const phoneNumberMask = [
+const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
+
+const cpfMask = [
+  /\d/,
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  /\d/,
+  "-",
+  /\d/,
+  /\d/,
+];
+
+const phoneNumberMask = [
   "(",
-  /[1-9]/,
   /\d/,
   /\d/,
   ")",
@@ -35,12 +55,14 @@ const initialValues = {
   /\d/,
   /\d/,
   /\d/,
+  /\d/,
+  /\d/,
   "-",
   /\d/,
   /\d/,
   /\d/,
   /\d/,
-];*/
+];
 
 const Contato = () => {
   /*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/
@@ -57,7 +79,7 @@ const Contato = () => {
         initialValues={initialValues}
         validationSchema={FormSchema}
       >
-        {({ errors, touched }) => (
+        {({ errors, touched, handleBlur }) => (
           <Form>
             <div className={contato["forms__form-col"]}>
               <label htmlFor="name">Nome</label>
@@ -90,10 +112,18 @@ const Contato = () => {
             <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"}
+                render={({ field }: any) => (
+                  <MaskedInput
+                    {...field}
+                    id="cpf"
+                    mask={cpfMask}
+                    type="text"
+                    placeholder="000.000.000-00"
+                    onBlur={handleBlur}
+                    className={errors.cpf && touched.cpf && "invalid"}
+                  />
+                )}
               />
               <ErrorMessage
                 component="span"
@@ -104,10 +134,18 @@ const Contato = () => {
             <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"}
+                render={({ field }: any) => (
+                  <MaskedInput
+                    {...field}
+                    id="date"
+                    mask={dateMask}
+                    type="text"
+                    placeholder="00.00.0000"
+                    onBlur={handleBlur}
+                    className={errors.date && touched.date && "invalid"}
+                  />
+                )}
               />
               <ErrorMessage
                 component="span"
@@ -118,20 +156,18 @@ const Contato = () => {
             <div className={contato["forms__form-col"]}>
               <label htmlFor="telefone">Telefone</label>
               <Field
-                /*name="telefone"
-                render={({ field }) => (
+                name="telefone"
+                render={({ field }: any) => (
                   <MaskedInput
                     {...field}
+                    id="telefone"
                     mask={phoneNumberMask}
-                    id="phone"
                     type="text"
+                    placeholder="(00) 00000-0000"
+                    onBlur={handleBlur}
+                    className={errors.telefone && touched.telefone && "invalid"}
                   />
-                )}*/
-                placeholder="(00) 00000-0000"
-                type="tel"
-                id="telefone"
-                name="telefone"
-                className={errors.telefone && touched.telefone && "invalid"}
+                )}
               />
               <ErrorMessage
                 component="span"
diff --git a/react-project/src/schema/FormSchema.ts b/react-project/src/schema/FormSchema.ts
index cf1eff9..f926c23 100644
--- a/react-project/src/schema/FormSchema.ts
+++ b/react-project/src/schema/FormSchema.ts
@@ -4,10 +4,16 @@ export default Yup.object().shape({
   name: Yup.string()
     .min(3, "Digite no mínimo 3 letras")
     .required("*Campo obrigatorio"),
-  email: Yup.string().required("*Campo obrigatorio").email("E-mail invalido"),
-  cpf: Yup.string().required("*Campo obrigatorio"),
-  date: Yup.date().required("*Campo obrigatorio"),
-  telefone: Yup.string().required("*Campo obrigatorio"),
+  email: Yup.string().required("*Campo obrigatorio").email("E-mail inválido"),
+  cpf: Yup.string()
+    .matches(/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/, "CPF inválido")
+    .required("*Campo obrigatorio"),
+  date: Yup.string()
+    .matches(/^\d{2}\.\d{2}\.\d{4}$/, "Data inválida")
+    .required("*Campo obrigatorio"),
+  telefone: Yup.string()
+    .matches(/^\([1-9]{2}\) [0-9]{5}\-[0-9]{4}$/, "Número inválido")
+    .required("*Campo obrigatorio"),
   instagram: Yup.string(),
   terms: Yup.boolean().oneOf([true], ""),
 });