emmanuelvitor/desafio-react-e-typescript-emmanuelvitor
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria formulario, validação e regex do formulario #9

Merged
emmanuelvitor merged 1 commits from feature/createForm into development 2023-01-16 15:15:40 +00:00
Conversation 0 Commits 1 Files Changed 9 +232 -7
9 changed files with 232 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -10,13 +10,15 @@
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"formik": "^2.2.9",
"node-sass": "^8.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-headless-accordion": "^1.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
"web-vitals": "^2.1.0",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",

16
src/_variaveis.scss
View File

@ -24,6 +24,22 @@ $color-blue2: #00C8FF;
$color-green: #4caf50;
$color-black: #000;
$color-black-800: #100d0e;
$color-white: #fff;
$color-white-100: #f0f0f0;
$color-white-500: #e5e5e5;
$color-gray: #c4c4c4;
$color-gray-300: #b9b7b7;
$color-gray-500: #7d7d7d;
$color-gray-700: #303030;
$color-gray-800: #292929;
$color-red: #ff0000;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,

2
src/components/Footer/Accordion/styles/Accordion.module.scss
View File

@ -24,7 +24,7 @@ h5 {
max-width: 707px;
height: 139px;
@media (min-width:250px) {
@media (min-width:2500px) {
max-width: 1531px;

108
src/components/Main/Fom/ContactForm.tsx Normal file
View File

@ -0,0 +1,108 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import contactFormSchema from "../../../schema/ContactFormSchema";
import styleForm from "./ContactForm.module.scss";
interface IFormikValues {
name: string;
email: string;
cpf: string;
dateBirth: string;
phone: string;
instagram?: string;
checkbox: boolean;
}
const initialValues = {
name: "",
email: "",
cpf: "",
dateBirth: "",
phone: "",
instagram: "",
checkbox: false,
};
const formSubmit = (values: IFormikValues) => {
console.log(values);
};
export const ContactForm = () => {
return (
<Formik
onSubmit={formSubmit}
initialValues={initialValues}
validationSchema={contactFormSchema}
>
{({ errors, touched }) => (
<Form className="formulario">
<label htmlFor="name">Nome</label>
<Field
id="name"
name="name"
placeholder="Seu nome completo"
className={errors.name && touched.name && "invalid"}
/>
<ErrorMessage name="name" className="form-ivalid-feedback" />
<label htmlFor="email">E-mail</label>
<Field
id="email"
name="email"
placeholder="Seu e-mail"
className={errors.email && touched.email && "invalid"}
/>
<ErrorMessage name="email" className="form-ivalid-feedback" />
<label htmlFor="cpf">CPF</label>
<Field
id="cpf"
name="cpf"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
<ErrorMessage name="cpf" className="form-ivalid-feedback" />
<label htmlFor="data">Data de Nascimento:</label>
<Field
id="dateBirth"
name="dateBirth"
placeholder="00.00.0000"
className={errors.dateBirth && touched.dateBirth && "invalid"}
/>
<ErrorMessage name="dateBirth" className="form-ivalid-feedback" />
<label htmlFor="phone">Telefone:</label>
<Field
id="phone"
name="phone"
type="tel"
placeholder="(00) 00000-0000"
className={errors.phone && touched.phone && "invalid"}
/>
<ErrorMessage name="phone" className="form-ivalid-feedback" />
<label htmlFor="instagram">Instagram</label>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
<ErrorMessage name="instagram" className="form-ivalid-feedback" />
<div>
<label htmlFor="checkbox">Declaro que li e aceito</label>
<Field
type="checkbox"
id="checkbox"
name="checkbox"
className={errors.checkbox && touched.checkbox && "invalid"}
/>
<ErrorMessage name="checkbox" className="form-ivalid-feedback" />
</div>
<button type="submit">CADASTRE-SE</button>
</Form>
)}
</Formik>
);
};

3
src/components/Main/Main.tsx
View File

@ -1,8 +1,11 @@
import React from "react";
import "./Main.module.scss";
export const Main = () => {
return (
<div></div>
);
}

4
src/pages/Home.tsx
View File

@ -1,14 +1,14 @@
import React from "react";
import { Footer } from "../components/Footer/Footer";
import { Rodape } from "../components/Footer/Rodape/Rodape";
import { Header } from "../components/Header/Header";
import { Main } from "../components/Main/Main";
export const Home = () => {
return (
<>
<Header />
<Main />
<Footer />
</>

20
src/schema/ContactFormSchema.ts Normal file
View File

@ -0,0 +1,20 @@
import * as Yup from "yup";
import { cpfRegex, phoneRegex, instaRegex } from "./ContactValidations";
export default Yup.object().shape({
name: Yup.string().required("*Campo Obrigatório"),
email: Yup.string()
.email()
.required("*Campo Obrigatório")
.email("E-mail inválido"),
cpf: Yup.string()
.matches(cpfRegex, "CPF inválido")
.required("*Campo Obrigatório"),
telefone: Yup.string()
.matches(phoneRegex, "numero inválido")
.required("*Campo Obrigatório"),
instagram: Yup.string().matches(instaRegex, "conta inválida"),
data: Yup.date().required("*Campo Obrigatório"),
checkbox: Yup.boolean().oneOf([true], "*"),
});

3
src/schema/ContactValidations.ts Normal file
View File

@ -0,0 +1,3 @@
export const phoneRegex = /\([1-9]{2}\) [1-9]{2}\d{3}-\d{4}/;
export const cpfRegex = /\d{3}.\d{3}.\d{3}-\d{2}/;
export const instaRegex = /(?:^|[^\w])(?:@)([\w-](?:(?:[\w-]|(?:\.(?!\.))){0,28}(?:[\w-]))?)/;

79
yarn.lock
View File

@ -1036,7 +1036,7 @@
core-js-pure "^3.25.1"
regenerator-runtime "^0.13.11"
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.20.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
@ -2028,6 +2028,11 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
"@types/lodash@^4.14.175":
version "4.14.191"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
"@types/mime@*":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@ -3752,6 +3757,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
deepmerge@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
deepmerge@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@ -4709,6 +4719,19 @@ form-data@^3.0.0:
combined-stream "^1.0.8"
mime-types "^2.1.12"
formik@^2.2.9:
version "2.2.9"
resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"
integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==
dependencies:
deepmerge "^2.1.1"
hoist-non-react-statics "^3.3.0"
lodash "^4.17.21"
lodash-es "^4.17.21"
react-fast-compare "^2.0.1"
tiny-warning "^1.0.2"
tslib "^1.10.0"
forwarded@0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@ -5046,6 +5069,13 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"
hoopy@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@ -6399,6 +6429,11 @@ locate-path@^6.0.0:
dependencies:
p-locate "^5.0.0"
lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@ -6796,6 +6831,11 @@ nan@^2.17.0:
resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
nanoclone@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
nanoid@^3.3.4:
version "3.3.4"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@ -7927,6 +7967,11 @@ prop-types@^15.8.1:
object-assign "^4.1.1"
react-is "^16.13.1"
property-expr@^2.0.4:
version "2.0.5"
resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
proxy-addr@~2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@ -8061,12 +8106,17 @@ react-error-overlay@^6.0.11:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
react-fast-compare@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-headless-accordion@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz#df45168fc379a9014bd7becc2f4be100af456b6e"
integrity sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==
react-is@^16.13.1:
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -9200,6 +9250,11 @@ thunky@^1.0.2:
resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
tmpl@1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@ -9222,6 +9277,11 @@ toidentifier@1.0.1:
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
toposort@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
tough-cookie@^4.0.0:
version "4.1.2"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
@ -9271,7 +9331,7 @@ tsconfig-paths@^3.14.1:
minimist "^1.2.6"
strip-bom "^3.0.0"
tslib@^1.8.1:
tslib@^1.10.0, tslib@^1.8.1:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@ -10072,3 +10132,16 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
yup@^0.32.11:
version "0.32.11"
resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
dependencies:
"@babel/runtime" "^7.15.4"
"@types/lodash" "^4.14.175"
lodash "^4.17.21"
lodash-es "^4.17.21"
nanoclone "^0.2.1"
property-expr "^2.0.4"
toposort "^2.0.2"