feat(mask): Adiciona mascara nos input

package-lock.json

@@ -18,17 +18,17 @@
         "formik": "^2.2.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-imask": "^6.4.3",
         "react-input-mask": "^2.0.4",
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
-        "react-text-mask": "^5.5.0",
         "sass": "^1.57.1",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4",
         "yup": "^0.32.11"
       },
       "devDependencies": {
+        "@types/jquery": "^3.5.16",
+        "@types/jquery-mask-plugin": "^1.14.4",
         "@types/react-input-mask": "^3.0.2"
       }
     },
@@ -3809,6 +3809,24 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "node_modules/@types/jquery": {
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
+      "integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
+      "dev": true,
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
+    "node_modules/@types/jquery-mask-plugin": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/@types/jquery-mask-plugin/-/jquery-mask-plugin-1.14.4.tgz",
+      "integrity": "sha512-8la3UoP0/hclp+Gknxx+Tx8H+puBLj+Ybp7swLFTLk7rnItC5biPzikT15MroQbPdrBqWdfpNPdHQdfcdyPnNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/jquery": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3931,6 +3949,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+      "dev": true
+    },
     "node_modules/@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -8675,14 +8699,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
-      "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw==",
-      "engines": {
-        "npm": ">=4.0.0"
-      }
-    },
     "node_modules/immer": {
       "version": "9.0.16",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -14050,21 +14066,6 @@
       "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-imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
-      "integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
-      "dependencies": {
-        "imask": "^6.4.3",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "npm": ">=4.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=0.14.0"
-      }
-    },
     "node_modules/react-input-mask": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@@ -14193,17 +14194,6 @@
         }
       }
     },
-    "node_modules/react-text-mask": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
-      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
-      "dependencies": {
-        "prop-types": "^15.5.6"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19610,6 +19600,24 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "@types/jquery": {
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
+      "integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
+      "dev": true,
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/jquery-mask-plugin": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/@types/jquery-mask-plugin/-/jquery-mask-plugin-1.14.4.tgz",
+      "integrity": "sha512-8la3UoP0/hclp+Gknxx+Tx8H+puBLj+Ybp7swLFTLk7rnItC5biPzikT15MroQbPdrBqWdfpNPdHQdfcdyPnNg==",
+      "dev": true,
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -19732,6 +19740,12 @@
         "@types/node": "*"
       }
     },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+      "dev": true
+    },
     "@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -23206,11 +23220,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
     },
-    "imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
-      "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw=="
-    },
     "immer": {
       "version": "9.0.16",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -26903,15 +26912,6 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
-    "react-imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
-      "integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
-      "requires": {
-        "imask": "^6.4.3",
-        "prop-types": "^15.7.2"
-      }
-    },
     "react-input-mask": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@@ -27003,14 +27003,6 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
-    "react-text-mask": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
-      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
-      "requires": {
-        "prop-types": "^15.5.6"
-      }
-    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -13,11 +13,9 @@
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-imask": "^6.4.3",
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
-    "react-text-mask": "^5.5.0",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4",
@@ -48,6 +46,8 @@
     ]
   },
   "devDependencies": {
+    "@types/jquery": "^3.5.16",
+    "@types/jquery-mask-plugin": "^1.14.4",
     "@types/react-input-mask": "^3.0.2"
   }
 }

src/components/Main/Subject/Contato/RegistrationForm.tsx

@@ -1,10 +1,18 @@
-import react, { useState } from "react";
+import React, { useState } from "react";
-import styles from "./form.module.scss";
 import stylesInput from "./input.module.scss";
 import stylesCheckbox from "./checkbox.module.scss";
 import { FormSchema } from "./schema/FormSchema";
+import InputMask from "react-input-mask";
+import {
+  Formik,
+  Form,
+  Field,
+  ErrorMessage,
+  FormikHelpers,
+  FieldProps,
+} from "formik";
 
-import { Formik, Form, Field, ErrorMessage } from "formik";
+import styles from "./form.module.scss";
 
 interface FormikValues {
   name: string;
@@ -26,16 +34,24 @@ const initialValues = {
   acceptTerms: false,
 };
 
+let listClient: Array<any> = [];
+
 const RegistrationForm = () => {
   const [isSubmit, setIsSubmit] = useState(false);
+  const handleSubmit = (
+    values: FormikValues,
+    actions: FormikHelpers<FormikValues>
+  ) => {
+    listClient.push(values);
+    console.log(listClient);
+    actions.resetForm();
+    setIsSubmit(!isSubmit);
+  };
+
   return (
     <div className={styles["page-main__form"]}>
       <Formik
-        onSubmit={(values: FormikValues, { resetForm }) => {
+        onSubmit={handleSubmit}
-          console.log(values);
-          setIsSubmit(!isSubmit);
-          resetForm({ values: initialValues });
-        }}
         initialValues={initialValues}
         validationSchema={FormSchema}
       >
@@ -78,11 +94,16 @@ const RegistrationForm = () => {
               CPF
             </label>
             <Field
+              name="cpf"
+              render={({ field }: any) => (
+                <InputMask
+                  {...field}
                   className={stylesInput["page-main__input"]}
                   id="Cpf"
                   placeholder="000.000.000-00"
-              name="cpf"
+                  mask={"999.999.999-99"}
-              mask="999.999.999-99"
+                />
+              )}
             />
             <ErrorMessage
               component="span"
@@ -95,11 +116,16 @@ const RegistrationForm = () => {
               Data de Nascimento:
             </label>
             <Field
+              name="data"
+              render={({ field }: FieldProps) => (
+                <InputMask
+                  {...field}
+                  mask="99.99.9999"
                   className={stylesInput["page-main__input"]}
                   id="Data"
                   placeholder="00.00.0000"
-              name="data"
+                />
-              mask="99.99.9999"
+              )}
             />
             <ErrorMessage
               component="span"
@@ -112,12 +138,17 @@ const RegistrationForm = () => {
               Telefone:
             </label>
             <Field
+              name="tel"
+              render={({ field }: any) => (
+                <InputMask
+                  {...field}
                   className={stylesInput["page-main__input"]}
                   id="tel"
                   placeholder="(00) 00000-0000"
-              name="tel"
                   mask="(99) 99999-9999"
                 />
+              )}
+            />
             <ErrorMessage
               component="span"
               name="tel"

src/components/Main/Subject/Contato/schema/FormSchema.ts

@@ -6,10 +6,13 @@ const FormSchema = () =>
       .min(3, "mínimo 3 caracteres")
       .required("*Campo Obrigatório"),
     email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
-    cpf: Yup.string().length(14).required("*Campo Obrigatório"),
+    cpf: Yup.string()
+      .min(14, "mínimo 14 caracteres")
+      .required("*Campo Obrigatório"),
     data: Yup.date()
-      .required("*Campo Obrigatório")
+      .min("01/01/1900")
-      .max(new Date(), "Não é possível incluir uma data futura"),
+      .max(new Date())
+      .required("Campo obrigatório"),
     tel: Yup.string().length(15).required("*Campo Obrigatório"),
     instagram: Yup.string(),
     acceptTerms: Yup.bool().oneOf([true], "*"),

src/components/Main/Subject/SubjectText.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import styles from "./subject.module.scss";
 
 interface SubjectTextProps {

src/pages/Home.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Footer } from "../components/footer/Footer";
 import { Header } from "../components/Header/Header";
 import { Main } from "../components/Main/Main";