Feat: Adiciona o formulário de contato e schema
This commit is contained in:
parent
9551231a9f
commit
b01f4538af
105
my-app/package-lock.json
generated
105
my-app/package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"formik": "^2.2.9",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
@ -23,7 +24,8 @@
|
||||
"react-scripts": "5.0.1",
|
||||
"sort-by": "^1.2.0",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.57.1"
|
||||
@ -3817,6 +3819,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.191",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
|
||||
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
|
||||
},
|
||||
"node_modules/@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
@ -7996,6 +8003,42 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/formik": {
|
||||
"version": "2.2.9",
|
||||
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
|
||||
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://opencollective.com/formik"
|
||||
}
|
||||
],
|
||||
"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"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/formik/node_modules/deepmerge": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/formik/node_modules/tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@ -8396,6 +8439,19 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -11501,6 +11557,11 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
@ -11835,6 +11896,11 @@
|
||||
"multicast-dns": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoclone": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
|
||||
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.4",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
|
||||
@ -13745,6 +13811,11 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/property-expr": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
|
||||
"integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
|
||||
},
|
||||
"node_modules/proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
@ -14054,6 +14125,11 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "2.0.4",
|
||||
"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-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -15641,6 +15717,11 @@
|
||||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"node_modules/tmpl": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
|
||||
@ -15673,6 +15754,11 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
|
||||
},
|
||||
"node_modules/tough-cookie": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
|
||||
@ -16986,6 +17072,23 @@
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/yup": {
|
||||
"version": "0.32.11",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
|
||||
"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"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"formik": "^2.2.9",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
@ -18,7 +19,8 @@
|
||||
"react-scripts": "5.0.1",
|
||||
"sort-by": "^1.2.0",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
bottom: 50px;
|
||||
bottom: 20px;
|
||||
left: 30px;
|
||||
width: 748px;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import './About.modules.scss'
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
<div className="AboutPage">
|
||||
<h1>Sobre</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
@ -13,7 +13,7 @@ const About = () => {
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
25
my-app/src/pages/Contact.modules.scss
Normal file
25
my-app/src/pages/Contact.modules.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.checkbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 13.58px;
|
||||
margin-bottom: 12.6px;
|
||||
}
|
||||
.signupButton{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
input.input-error,
|
||||
select.input-error{
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #FF0000;
|
||||
}
|
||||
@ -4,6 +4,7 @@ import{HeaderBottom} from "../components/HeaderBottom/HeaderBottom"
|
||||
import {Main} from "./institucional"
|
||||
import {Route, Routes} from "react-router-dom"
|
||||
import {About} from "./About"
|
||||
import {Contact} from "./Contact"
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -13,6 +14,7 @@ function App() {
|
||||
<Main />
|
||||
<Routes>
|
||||
<Route path="/About" element={<About/>}></Route>
|
||||
<Route path="/Contact" element={<Contact/>}></Route>
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,9 +1,94 @@
|
||||
const Contact = () => {
|
||||
<>
|
||||
<div>
|
||||
import { useFormik } from 'formik';
|
||||
import './Contact.modules.scss'
|
||||
import { Schema } from '../schemas/Schema'
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log("submitted")
|
||||
}
|
||||
|
||||
const Contact = () => {
|
||||
const {values, errors, touched, handleBlur, handleChange, handleSubmit} = useFormik({
|
||||
initialValues: {
|
||||
nome: '',
|
||||
email: '',
|
||||
cpf: '',
|
||||
nascimento: '',
|
||||
telefone: '',
|
||||
instagram: '',
|
||||
},
|
||||
validationSchema: Schema ,
|
||||
onSubmit
|
||||
})
|
||||
console.log(values)
|
||||
console.log(errors);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Preencha o formulário</h1>
|
||||
<div className='formWrapper'>
|
||||
<form onSubmit={handleSubmit} className='form' autoComplete='off'>
|
||||
<label htmlFor="nome">Nome</label>
|
||||
<input value={values.nome}
|
||||
onChange={handleChange}
|
||||
id='nome'
|
||||
type="text"
|
||||
placeholder='Seu nome completo'
|
||||
onBlur={handleBlur}
|
||||
className={errors.nome && touched.nome ? "input-error" : ""}/>
|
||||
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<input value={values.email}
|
||||
onChange={handleChange}
|
||||
id='email'
|
||||
type="email"
|
||||
placeholder='Seu e-mail'
|
||||
onBlur={handleBlur}
|
||||
className={errors.email && touched.email ? "input-error" : ""}/>
|
||||
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<input value={values.cpf}
|
||||
onChange={handleChange}
|
||||
id='cpf'
|
||||
type="number"
|
||||
placeholder='000.000.000-00'
|
||||
onBlur={handleBlur}/>
|
||||
|
||||
<label htmlFor="nascimento">Data de Nascimento</label>
|
||||
<input value={values.nascimento}
|
||||
onChange={handleChange}
|
||||
id='nascimento'
|
||||
type="number"
|
||||
placeholder='00.00.0000'
|
||||
onBlur={handleBlur}/>
|
||||
|
||||
<label htmlFor="telefone">telefone</label>
|
||||
<input value={values.telefone}
|
||||
onChange={handleChange}
|
||||
id='telefone'
|
||||
type="tel"
|
||||
placeholder='(00) 00000-0000'
|
||||
onBlur={handleBlur}/>
|
||||
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<input value={values.instagram}
|
||||
onChange={handleChange}
|
||||
id='instagram'
|
||||
type="text"
|
||||
placeholder='@seuuser'
|
||||
onBlur={handleBlur}/>
|
||||
<div className='checkbox'>
|
||||
<label htmlFor="check">
|
||||
<a href="">Declaro que li e aceito</a>
|
||||
</label>
|
||||
<input id='check' type="checkbox" />
|
||||
</div>
|
||||
<div className='signupButton'>
|
||||
<button type='submit'>CADASTRE-SE</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Contact}
|
||||
@ -14,12 +14,12 @@ const Main = () => {
|
||||
<h1 className='mainH1'>INSTITUCIONAL</h1>
|
||||
<div className='instituWrapper'>
|
||||
<ul className='instituUl'>
|
||||
<li className='instituLi'><Link to="/about" className='instituLink'>Sobre</Link></li>
|
||||
<li className='instituLi'><Link to="/About" className='instituLink'>Sobre</Link></li>
|
||||
<li className='instituLi'><Link to="/" className='instituLink'>Forma de Pagamento</Link></li>
|
||||
<li className='instituLi'><Link to="/" className='instituLink'>Entrega</Link></li>
|
||||
<li className='instituLi'><Link to="/" className='instituLink'>Troca e Devolução</Link></li>
|
||||
<li className='instituLi'><Link to="/" className='instituLink'>Segurança e Privacidade</Link></li>
|
||||
<li className='instituLi'><Link to="/" className='instituLink'>Contato</Link></li>
|
||||
<li className='instituLi'><Link to="/Contact" className='instituLink'>Contato</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
|
||||
12
my-app/src/schemas/Schema.tsx
Normal file
12
my-app/src/schemas/Schema.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import * as yup from 'yup';
|
||||
|
||||
const Schema = yup.object().shape({
|
||||
nome: yup.string().matches(/^[aA-zZ\s]+$/).required("*Campo Obrigatório"),
|
||||
email: yup.string().email().required("*Campo Obrigatório"),
|
||||
cpf: yup.number().min(11).max(11).required("*Campo Obrigatório"),
|
||||
nascimento: yup.number().min(8).max(8).required("*Campo Obrigatório"),
|
||||
telefone: yup.number().min(11).max(11).required("*Campo Obrigatório"),
|
||||
instagram: yup.string().required("*Campo Obrigatório")
|
||||
});
|
||||
|
||||
export {Schema};
|
||||
Loading…
Reference in New Issue
Block a user