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/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 037376f..3a0d5fb 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -1,9 +1,35 @@ 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: "", @@ -12,78 +38,245 @@ const FormInput = () => { nascimento: "", tel: "", instagram: "", - }, - validationSchema: Yup.object({ - nome: Yup.string().label("Seu nome completo").required(), - email: Yup.string().email().required(), - cpf: Yup.string().required(), - nascimento: Yup.string().required(), - tel: Yup.string().required(), - instagram: Yup.string().required(), - }), + 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(), + }); /* 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}`); }, + });*/ + const validacao = Yup.object().shape({ + nome: Yup.string() + .required("*Campo Obrigatório") + .test( + "Nome Completo", + "Preencha com um nome e sobrenome válido.", + function (value: any) { + if (value === "" || value === undefined) { + return false; + } else { + const nameArr = value.split(" "); + return nameArr.length >= 2; + } + } + ), + 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); + } + }), + 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) => { + console.log(values); + }; return ( -
-
-

Preencha o formulário

- - -
+ +
+
+
+ + +
+ + +
+
+
+ + +
+ + +
+
+
+ + +
+ + +
+
+
+ + +
+ + +
+
+
+ + +
+ + +
+
+
+ + +
+ + +
+ + + )} + ); }; diff --git a/src/components/FormInput/formInput.module.scss b/src/components/FormInput/formInput.module.scss index 61230e0..e6ba9c2 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; } @@ -7,3 +7,114 @@ flex-direction: column; margin-bottom: 10px; } +.textForm { + display: flex; + flex-direction: row; +} +.errorFormik { + margin-left: 80px; + color: red; +} +*/ +.form-wrapper { + width: 100%; + max-width: 720px; + min-height: 100vh; + margin: 0 auto; + padding: 0 12px; + display: flex; + + 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; + margin-bottom: 12px; +} +.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: 10px 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; + @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; +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 41d6b3b..10c4cb1 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 { AccordionBody } from "../components/AccordionBody/AccordionBody"; const Home = () => { //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, +);*/ 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"