From 62fda437db79dcc2669e23e1e1b552ecc02eb592 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 12 Jan 2023 19:42:36 -0300 Subject: [PATCH 1/9] fix: Consertando erro handler formik --- src/components/FormInput/FormInput.tsx | 25 +++++++++++++++++++++++-- src/pages/Home.tsx | 4 ++-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 037376f..260e22b 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -14,7 +14,16 @@ const FormInput = () => { instagram: "", }, validationSchema: Yup.object({ - nome: Yup.string().label("Seu nome completo").required(), + nome: Yup.string() + .required() + .test( + "is-full-name", + "Please enter both your first and last name", + function (value: any) { + const nameArr = value.split(" "); + return nameArr.length >= 2; + } + ), email: Yup.string().email().required(), cpf: Yup.string().required(), nascimento: Yup.string().required(), @@ -35,54 +44,66 @@ const FormInput = () => {
    • - + ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 41d6b3b..8df5d33 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,11 @@ import React from "react"; -import { NavigationBar } from "../components/NavigationBar/NavigationBar"; +import { FormInput } from "../components/FormInput/FormInput"; const Home = () => { //const style = { background: "black" }; return (
    - +
    ); }; -- 2.34.1 From d030826d96c0a9610872714af3e71eca75575d0f Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 13 Jan 2023 17:16:00 -0300 Subject: [PATCH 2/9] =?UTF-8?q?feat(form):=20Criando=20os=20campos=20obrig?= =?UTF-8?q?at=C3=B3rios=20com=20Yup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormInput/FormInput.tsx | 83 +++++++++++++++---- .../FormInput/formInput.module.scss | 8 ++ 2 files changed, 75 insertions(+), 16 deletions(-) diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 260e22b..dbadb60 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -12,27 +12,27 @@ const FormInput = () => { nascimento: "", tel: "", instagram: "", + termos: false, }, validationSchema: Yup.object({ - nome: Yup.string() - .required() - .test( + nome: Yup.string().required("*Campo Obrigatório"), + /*.test( "is-full-name", "Please enter both your first and last name", function (value: any) { const nameArr = value.split(" "); return nameArr.length >= 2; } - ), - email: Yup.string().email().required(), - cpf: Yup.string().required(), - nascimento: Yup.string().required(), - tel: Yup.string().required(), - instagram: Yup.string().required(), + )*/ email: Yup.string().required("*Campo Obrigatório"), + cpf: Yup.string().required("*Campo Obrigatório"), + nascimento: Yup.string().required("*Campo Obrigatório"), + tel: Yup.string().required("*Campo Obrigatório"), + instagram: Yup.string().required("*Campo Obrigatório"), + termos: Yup.boolean().required("*").isTrue(), }), onSubmit: function (values) { alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}. - Age: ${values.nascimento}`); + Age: ${values.nascimento},${values.tel},${values.instagram}`); }, }); @@ -42,7 +42,14 @@ const FormInput = () => {

    Preencha o formulário

    diff --git a/src/components/FormInput/formInput.module.scss b/src/components/FormInput/formInput.module.scss index 61230e0..5923e83 100644 --- a/src/components/FormInput/formInput.module.scss +++ b/src/components/FormInput/formInput.module.scss @@ -7,3 +7,11 @@ flex-direction: column; margin-bottom: 10px; } +.textForm { + display: flex; + flex-direction: row; +} +.errorFormik { + margin-left: 80px; + color: red; +} -- 2.34.1 From ced74423ddecc6a2606b69ada8e478a0e9ff7cf0 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 13 Jan 2023 17:57:19 -0300 Subject: [PATCH 3/9] fix:Consertando erro no input do formulario --- src/components/FormInput/FormInput.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index dbadb60..5217144 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -15,15 +15,17 @@ const FormInput = () => { termos: false, }, validationSchema: Yup.object({ - nome: Yup.string().required("*Campo Obrigatório"), - /*.test( + nome: Yup.string() + .required("*Campo Obrigatório") + .test( "is-full-name", "Please enter both your first and last name", function (value: any) { const nameArr = value.split(" "); return nameArr.length >= 2; } - )*/ email: Yup.string().required("*Campo Obrigatório"), + ), + email: Yup.string().required("*Campo Obrigatório"), cpf: Yup.string().required("*Campo Obrigatório"), nascimento: Yup.string().required("*Campo Obrigatório"), tel: Yup.string().required("*Campo Obrigatório"), -- 2.34.1 From 87696220e320fc05c0c84d72c0c5355a76d0afb9 Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 14 Jan 2023 20:52:36 -0300 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20Melhora=20na=20valida=C3=A7=C3=A3o?= =?UTF-8?q?=20do=20nome?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormInput/FormInput.tsx | 228 ++++++++++--------------- 1 file changed, 90 insertions(+), 138 deletions(-) diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 5217144..774651c 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -1,9 +1,34 @@ import React from "react"; -import { useFormik } from "formik"; +import { + useFormik, + Formik, + Form, + Field, + ErrorMessage, + FormikHelpers, +} from "formik"; import * as Yup from "yup"; import styles from "./formInput.module.scss"; +interface IFormikValues { + nome: string; + //email: string; + //cpf: string; + //nascimento: string; + //tel: string; + //instagram: string; + termos: boolean; +} const FormInput = () => { + const initialValues = { + nome: "", + //email: "", + //cpf: "", + //nascimento: "", + //tel: "", + //instagram: "", + termos: false, + }; /* const formik = useFormik({ initialValues: { nome: "", @@ -13,151 +38,78 @@ const FormInput = () => { tel: "", instagram: "", termos: false, - }, - validationSchema: Yup.object({ - nome: Yup.string() - .required("*Campo Obrigatório") - .test( - "is-full-name", - "Please enter both your first and last name", - function (value: any) { - const nameArr = value.split(" "); - return nameArr.length >= 2; - } - ), - email: Yup.string().required("*Campo Obrigatório"), - cpf: Yup.string().required("*Campo Obrigatório"), - nascimento: Yup.string().required("*Campo Obrigatório"), - tel: Yup.string().required("*Campo Obrigatório"), - instagram: Yup.string().required("*Campo Obrigatório"), - termos: Yup.boolean().required("*").isTrue(), - }), + },*/ + validationSchema: Yup.object({ + nome: Yup.string() + .required("*Campo Obrigatório") + .test( + "is-full-name", + "Please enter both your first and last name", + function (value: any) { + const nameArr = value.split(" "); + return nameArr.length >= 2; + } + ), + email: Yup.string().required("*Campo Obrigatório"), + cpf: Yup.string().required("*Campo Obrigatório"), + nascimento: Yup.string().required("*Campo Obrigatório"), + tel: Yup.string().required("*Campo Obrigatório"), + instagram: Yup.string().required("*Campo Obrigatório"), + termos: Yup.boolean().required("*").isTrue(), + }); /* onSubmit: function (values) { alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}. Age: ${values.nascimento},${values.tel},${values.instagram}`); }, + });*/ + const validacao = Yup.object().shape({ + nome: Yup.string() + .required("*Campo Obrigatório") + .test( + "is-full-name", + "Please enter both your first and last name", + function (value: any) { + if (value === "" || value === undefined) { + return false; + } else { + const nameArr = value.split(" "); + return nameArr.length >= 2; + } + } + ), + termos: Yup.boolean().required("*").isTrue(), }); - + const handleFormikSubmit = (values: IFormikValues) => { + console.log(values); + }; return ( -
    -
    -

    Preencha o formulário

    -
      -
    • -
      - - {formik.touched.nome && formik.errors.nome && ( - - {formik.errors.nome} - - )} +
      +

      Preencha o formulário

      + + {({ errors, touched }) => ( + +
      + + +
      - -
      • -
    • -
      - - {formik.touched.email && formik.errors.email && ( - - {formik.errors.email} - - )} +
      + +
      - -
      • -
    • -
      - - {formik.touched.cpf && formik.errors.cpf && ( - - {formik.errors.cpf} - - )} -
      - -
      • - -
    • -
      - - {formik.touched.nascimento && formik.errors.nascimento && ( - - {formik.errors.nascimento} - - )} -
      - -
      • -
    • -
      - - {formik.touched.tel && formik.errors.tel && ( - - {formik.errors.tel} - - )} -
      - -
      • -
    • -
      - - {formik.touched.instagram && formik.errors.instagram && ( - - {formik.errors.instagram} - - )} -
      - -
      • -
    • - {formik.touched.termos && formik.errors.termos && ( - - {formik.errors.termos} - - )} - Declaro que li e aceito - -
      • -
    - -
    + + + )} +
    ); }; -- 2.34.1 From d4c22e384cb24500caa200f54d1f0ffcaa1480ca Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 15 Jan 2023 13:15:47 -0300 Subject: [PATCH 5/9] feat(form): Adicionado estilos no form --- package-lock.json | 20 ++++++ package.json | 1 + src/components/FormInput/FormInput.tsx | 28 +++++--- .../FormInput/formInput.module.scss | 68 ++++++++++++++++++- yarn.lock | 11 ++- 5 files changed, 117 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb41775..c75e15d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-bootstrap": "^2.7.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-text-mask": "^5.5.0", "typescript": "^4.9.4", "web-vitals": "^2.1.4", "yup": "^0.32.11" @@ -15398,6 +15399,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/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -29686,6 +29698,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" + } + }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index 6535540..49d6fd8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-bootstrap": "^2.7.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-text-mask": "^5.5.0", "typescript": "^4.9.4", "web-vitals": "^2.1.4", "yup": "^0.32.11" diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 774651c..97ecd9a 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -8,6 +8,7 @@ import { FormikHelpers, } from "formik"; import * as Yup from "yup"; + import styles from "./formInput.module.scss"; interface IFormikValues { @@ -66,8 +67,8 @@ const FormInput = () => { nome: Yup.string() .required("*Campo Obrigatório") .test( - "is-full-name", - "Please enter both your first and last name", + "Nome Completo", + "Preencha com um nome e sobrenome válido.", function (value: any) { if (value === "" || value === undefined) { return false; @@ -82,8 +83,9 @@ const FormInput = () => { const handleFormikSubmit = (values: IFormikValues) => { console.log(values); }; + return ( -
    +

    Preencha o formulário

    { > {({ errors, touched }) => (
    -
    +
    + -
    -
    - - + diff --git a/src/components/FormInput/formInput.module.scss b/src/components/FormInput/formInput.module.scss index 5923e83..09d62aa 100644 --- a/src/components/FormInput/formInput.module.scss +++ b/src/components/FormInput/formInput.module.scss @@ -1,4 +1,4 @@ -.form { +/*.form { display: flex; flex-direction: column; } @@ -15,3 +15,69 @@ margin-left: 80px; color: red; } +*/ +.form-wrapper { + width: 100%; + max-width: 720px; + min-height: 100vh; + margin: 0 auto; + padding: 0 12px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} +.form-wrapper h2 { + font-weight: 700; + font-size: 27px; + margin: 0 0 12px 0; + @media screen and (min-width: 2500px) { + font-size: 48px; + } +} +.form-wrapper form { + width: 100%; +} +.form-col { + display: flex; + flex-direction: column; +} +.form-col label { + font-weight: 400; + font-size: 14px; + color: #100d0e; + margin: 0 0 4px 0; + @media screen and (min-width: 2500px) { + font-size: 28px; + } +} +.form-col input { + background: #ffffff; + border: 1px solid #100d0e; + border-radius: 25px; + height: 46px; + padding: 15px 0 15px 20px; + &::placeholder { + font-family: "Roboto"; + font-size: 14px; + color: #b9b7b7; + } + @media screen and (min-width: 2500px) { + height: 63px; + &::placeholder { + font-size: 28px; + } + } +} +.form-wrapper button { + width: 100%; + height: 52.44px; + background: #000000; + border-radius: 25px; + color: #ffffff; + font-family: "Roboto"; + font-size: 16px; + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: 400; +} diff --git a/yarn.lock b/yarn.lock index fca3aa7..37b505c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8183,7 +8183,7 @@ "react-is" "^16.3.2" "warning" "^4.0.0" -"prop-types@^15.6.2", "prop-types@^15.8.1": +"prop-types@^15.5.6", "prop-types@^15.6.2", "prop-types@^15.8.1": "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==" "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" "version" "15.8.1" @@ -8449,6 +8449,13 @@ optionalDependencies: "fsevents" "^2.3.2" +"react-text-mask@^5.5.0": + "integrity" "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==" + "resolved" "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz" + "version" "5.5.0" + dependencies: + "prop-types" "^15.5.6" + "react-transition-group@^4.4.2": "integrity" "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==" "resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz" @@ -8459,7 +8466,7 @@ "loose-envify" "^1.4.0" "prop-types" "^15.6.2" -"react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8.0": +"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8.0": "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==" "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz" "version" "18.2.0" -- 2.34.1 From f43412ec233ce525a1dd538bd6ab997f44fad603 Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 15 Jan 2023 17:00:38 -0300 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20Consertado=20a=20estiliza=C3=A7?= =?UTF-8?q?=C3=A3o=20do=20checkbox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormInput/FormInput.tsx | 38 ++++++++++++++----- .../FormInput/formInput.module.scss | 36 ++++++++++++++++++ 2 files changed, 65 insertions(+), 9 deletions(-) diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 97ecd9a..3269c29 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -95,8 +95,15 @@ const FormInput = () => { {({ errors, touched }) => (
    - - +
    + + +
    + { className={errors.nome && touched.nome && "invalid"} />
    -
    - - + - + )} diff --git a/src/components/FormInput/formInput.module.scss b/src/components/FormInput/formInput.module.scss index 09d62aa..42b097d 100644 --- a/src/components/FormInput/formInput.module.scss +++ b/src/components/FormInput/formInput.module.scss @@ -41,6 +41,7 @@ .form-col { display: flex; flex-direction: column; + margin-bottom: 12px; } .form-col label { font-weight: 400; @@ -69,6 +70,7 @@ } } } + .form-wrapper button { width: 100%; height: 52.44px; @@ -80,4 +82,38 @@ text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400; + @media screen and (min-width: 2500px) { + height: 71px; + font-size: 32px; + } +} +.form-text { + display: flex; + justify-content: space-between; +} +.form-error { + color: red; +} +.form-check { + display: flex; + flex-direction: rows; + justify-content: center; + align-items: center; +} +.form-check label { + a { + color: #000; + } + margin-right: 5px; +} +.form-checkbox { +} + +#check { + font-size: 15px; + border: 1px solid #000000; + border-radius: 3px; +} +.form-btn { + margin-top: 12px; } -- 2.34.1 From cf14b1928136e11b182003045d22dc2a4e947ab0 Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 15 Jan 2023 17:50:12 -0300 Subject: [PATCH 7/9] =?UTF-8?q?feat(form):=20Adicionado=20cpf=20no=20formu?= =?UTF-8?q?l=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormInput/FormInput.tsx | 58 +++++++++++++++++++++++--- 1 file changed, 53 insertions(+), 5 deletions(-) diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 3269c29..7d7739f 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -13,8 +13,8 @@ import styles from "./formInput.module.scss"; interface IFormikValues { nome: string; - //email: string; - //cpf: string; + email: string; + cpf: string; //nascimento: string; //tel: string; //instagram: string; @@ -23,8 +23,8 @@ interface IFormikValues { const FormInput = () => { const initialValues = { nome: "", - //email: "", - //cpf: "", + email: "", + cpf: "", //nascimento: "", //tel: "", //instagram: "", @@ -78,7 +78,19 @@ const FormInput = () => { } } ), - termos: Yup.boolean().required("*").isTrue(), + email: Yup.string().required("*Campo Obrigatório").email("E-mail inválido"), + cpf: Yup.string() + .required("*Campo Obrigatório") + .test("cpf", "Preencha com um cpf válido.", function (value: any) { + if (value === "" || value === undefined) { + return false; + } else { + const cpfRegex = /^\d{3}\.\d{3}\.\d{3}\-\d{2}$/; + const regex = new RegExp(cpfRegex); + return regex.test(value); + } + }), + termos: Yup.boolean().oneOf([true], "*"), }); const handleFormikSubmit = (values: IFormikValues) => { console.log(values); @@ -112,6 +124,42 @@ const FormInput = () => { className={errors.nome && touched.nome && "invalid"} />
    +
    +
    + + +
    + + +
    +
    +
    + + +
    + + +
    Date: Mon, 16 Jan 2023 14:22:38 -0300 Subject: [PATCH 8/9] =?UTF-8?q?feat(form):=20Adicionado=20o=20instagram=20?= =?UTF-8?q?no=20formul=C3=A1rio.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormInput/FormInput.tsx | 99 +++++++++++++++++-- .../FormInput/formInput.module.scss | 2 +- 2 files changed, 94 insertions(+), 7 deletions(-) diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 7d7739f..f2aa14d 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -15,9 +15,9 @@ interface IFormikValues { nome: string; email: string; cpf: string; - //nascimento: string; - //tel: string; - //instagram: string; + nascimento: string; + tel: string; + instagram: string; termos: boolean; } const FormInput = () => { @@ -25,9 +25,9 @@ const FormInput = () => { nome: "", email: "", cpf: "", - //nascimento: "", - //tel: "", - //instagram: "", + nascimento: "", + tel: "", + instagram: "", termos: false, }; /* const formik = useFormik({ @@ -90,6 +90,39 @@ const FormInput = () => { return regex.test(value); } }), + nascimento: Yup.string() + .required("*Campo Obrigatório") + .test( + "nascimento", + "Preencha com uma data válida.", + function (value: any) { + if (value === "" || value === undefined) { + return false; + } else { + const nascimentoRegex = + "^(0[1-9]|[12][0-9]|3[01]).(0[1-9]|1[012]).[12][0-9]{3}$"; + const regex = new RegExp(nascimentoRegex); + return regex.test(value); + } + } + ), + tel: Yup.string() + .required("*Campo Obrigatório") + .test( + "telefone", + "Preencha com um telefone válido.", + function (value: any) { + if (value === "" || value === undefined) { + return false; + } else { + const telefoneRegex = + "^((\\+\\d{2}\\s)?\\(\\d{2}\\)\\s?\\d{4}\\d?\\-\\d{4})?$"; + const regex = new RegExp(telefoneRegex); + return regex.test(value); + } + } + ), + instagram: Yup.string(), termos: Yup.boolean().oneOf([true], "*"), }); const handleFormikSubmit = (values: IFormikValues) => { @@ -160,6 +193,60 @@ const FormInput = () => { className={errors.cpf && touched.cpf && "invalid"} />
    +
    +
    + + +
    + + +
    +
    +
    + + +
    + + +
    +
    +
    + + +
    + + +
    Date: Mon, 16 Jan 2023 19:23:41 -0300 Subject: [PATCH 9/9] feat(form): Adicionado o accordion no formulario --- .../AccordionBody/AccordionBody.tsx | 36 +++++++++++++++++++ .../AccordionBody/accordionBody.module.scss | 17 +++++++++ src/components/FormInput/FormInput.tsx | 2 +- .../FormInput/formInput.module.scss | 3 +- src/pages/Home.tsx | 4 +-- src/styles/common/global.scss | 9 +++++ 6 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 src/components/AccordionBody/AccordionBody.tsx create mode 100644 src/components/AccordionBody/accordionBody.module.scss diff --git a/src/components/AccordionBody/AccordionBody.tsx b/src/components/AccordionBody/AccordionBody.tsx new file mode 100644 index 0000000..e870032 --- /dev/null +++ b/src/components/AccordionBody/AccordionBody.tsx @@ -0,0 +1,36 @@ +import Col from "react-bootstrap/Col"; +import ListGroup from "react-bootstrap/ListGroup"; +import Row from "react-bootstrap/Row"; +import Tab from "react-bootstrap/Tab"; + +import styles from "./accordionBody.module.scss"; +const AccordionBody = () => { + return ( + + + + + + Link 1 + + + Link 2 + + + + + + +

    oi

    +     + +

    tchau

    +     +     + +     +     + ); +}; + +export { AccordionBody }; diff --git a/src/components/AccordionBody/accordionBody.module.scss b/src/components/AccordionBody/accordionBody.module.scss new file mode 100644 index 0000000..b3a97b5 --- /dev/null +++ b/src/components/AccordionBody/accordionBody.module.scss @@ -0,0 +1,17 @@ +.accordion-wrapper { + display: flex; + flex-direction: column; +} +.accordion-item { + display: flex; + flex-direction: row; +} +.accordion-header { +} +/* +.list-group-tabs.active { + background-color: red; +}*/ +.acc-item .active { + background-color: red; +} diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index f2aa14d..3a0d5fb 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -195,7 +195,7 @@ const FormInput = () => {
    - + { //const style = { background: "black" }; return (
    - +
    ); }; diff --git a/src/styles/common/global.scss b/src/styles/common/global.scss index 647fc6d..420d4bc 100644 --- a/src/styles/common/global.scss +++ b/src/styles/common/global.scss @@ -18,3 +18,12 @@ button { li { list-style-type: none; } +/* +$grid-breakpoints: ( + xs: 0, + sm: 375px, + md: 768px, + lg: 1025px, + xl: 1280px, + xxl: 2500px, +);*/ -- 2.34.1