react-project/package-lock.json

@@ -21,6 +21,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
+        "react-text-mask": "^5.5.0",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4",
         "yup": "^0.32.11"
@@ -15196,6 +15197,17 @@
         }
       }
     },
+    "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",
@@ -29282,6 +29294,14 @@
         "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",

react-project/package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
+    "react-text-mask": "^5.5.0",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"

react-project/src/assets/styles/modules/Contato.module.scss

@@ -6,6 +6,7 @@
     font-size: 24px;
     line-height: 28px;
     color: var(--black);
+    margin-bottom: 12px;
   }
 
   &__form-col {
@@ -15,6 +16,7 @@
     label {
       display: block;
       margin-bottom: 12px;
+      margin-left: 15px;
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;

react-project/src/components/Contato.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
-
 import FormSchema from "../schema/FormSchema";
 
 import contato from "../assets/styles/modules/Contato.module.scss";
@@ -26,6 +25,23 @@ const initialValues = {
   terms: false,
 };
 
+/*const phoneNumberMask = [
+  "(",
+  /[1-9]/,
+  /\d/,
+  /\d/,
+  ")",
+  " ",
+  /\d/,
+  /\d/,
+  /\d/,
+  "-",
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+];*/
+
 const Contato = () => {
   /*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/
 
@@ -102,6 +118,15 @@ const Contato = () => {
             <div className={contato["forms__form-col"]}>
               <label htmlFor="telefone">Telefone</label>
               <Field
+                /*name="telefone"
+                render={({ field }) => (
+                  <MaskedInput
+                    {...field}
+                    mask={phoneNumberMask}
+                    id="phone"
+                    type="text"
+                  />
+                )}*/
                 placeholder="(00) 00000-0000"
                 type="tel"
                 id="telefone"

react-project/src/schema/FormSchema.ts

@@ -1,8 +1,10 @@
 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"),
+  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"),