forked from M3-Academy/desafio-react-e-typescript
feat(Contato): Cria e estiliza o formulário #3
105
desafio-react-typescript/package-lock.json
generated
105
desafio-react-typescript/package-lock.json
generated
@ -15,12 +15,14 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3802,6 +3804,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",
|
||||
@ -7959,6 +7966,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",
|
||||
@ -8334,6 +8377,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",
|
||||
@ -11404,6 +11460,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",
|
||||
@ -11729,6 +11790,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",
|
||||
@ -13631,6 +13697,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",
|
||||
@ -13940,6 +14011,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",
|
||||
@ -15483,6 +15559,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",
|
||||
@ -15515,6 +15596,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",
|
||||
@ -16815,6 +16901,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,12 +10,14 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -0,0 +1,101 @@
|
||||
@import "../../../../styles/all.scss";
|
||||
|
||||
.contato {
|
||||
width: 69.2592592%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 73.04347826%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include fontStyle(700, 24px, 28px, $black);
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(48px, 56px);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__label {
|
||||
@include fontStyle(400, 14px, 16px, $black-500);
|
||||
margin: 0 0 12px 15px;
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
@include fontStyle(400, 14px, 16px, $gray-300);
|
||||
@include borderStyle(1px, $black-500, 25px);
|
||||
margin-bottom: 12px;
|
||||
padding: 15px 20px;
|
||||
|
||||
@include mq($xl, min) {
|
||||
height: 63px;
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
}
|
||||
|
||||
&__span-agree {
|
||||
@include fontStyle(400, 14px, 16px, $primary-900);
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&__agree-wrapper {
|
||||
@include display(flex, row, flex-end, center);
|
||||
}
|
||||
|
||||
&__label-agree {
|
||||
text-decoration: underline;
|
||||
@include fontStyle(400, 14px, 16px, $black-500);
|
||||
margin-right: 4.28px;
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
}
|
||||
|
||||
&__agree {
|
||||
width: 18.64px;
|
||||
height: 18px;
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 36.4px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-submit {
|
||||
width: 100%;
|
||||
height: 52.44px;
|
||||
background: $black;
|
||||
|
||||
border-radius: 25px;
|
||||
|
||||
padding: 17px 0 16.44px;
|
||||
margin-top: 12px;
|
||||
|
||||
@include fontStyle(400, 16px, 19px, $white);
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(32px, 38px);
|
||||
height: 71px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
import React from "react";
|
||||
|
||||
import { Formik, Form, Field } from "formik";
|
||||
|
||||
import styles from "./Contato.module.scss";
|
||||
|
||||
interface IForm {
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
dateBirth: string;
|
||||
telephone: string;
|
||||
instagram: string;
|
||||
agree: boolean;
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
dateBirth: "",
|
||||
telephone: "",
|
||||
instagram: "",
|
||||
agree: false,
|
||||
};
|
||||
|
||||
const Contato = () => {
|
||||
const handleSubmit = (values: IForm) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["contato"]}>
|
||||
<Formik onSubmit={handleSubmit} initialValues={initialValues}>
|
||||
<Form>
|
||||
<h2 className={styles["contato__title"]}>Preencha o formulário</h2>
|
||||
<div className={styles["contato__container"]}>
|
||||
<label className={styles["contato__label"]} htmlFor="name">
|
||||
Nome
|
||||
</label>
|
||||
<Field
|
||||
className={styles["contato__input"]}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Seu nome completo"
|
||||
/>
|
||||
<label className={styles["contato__label"]} htmlFor="email">
|
||||
E-mail
|
||||
</label>
|
||||
<Field
|
||||
className={styles["contato__input"]}
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="Seu e-mail"
|
||||
/>
|
||||
<label className={styles["contato__label"]} htmlFor="cpf">
|
||||
CPF
|
||||
</label>
|
||||
<Field
|
||||
className={styles["contato__input"]}
|
||||
name="cpf"
|
||||
id="cpf"
|
||||
placeholder="000.000.000-00"
|
||||
/>
|
||||
<label className={styles["contato__label"]} htmlFor="dateBirth">
|
||||
Data de Nascimento:
|
||||
</label>
|
||||
<Field
|
||||
className={styles["contato__input"]}
|
||||
name="dateBirth"
|
||||
id="dateBirth"
|
||||
placeholder="00.00.000"
|
||||
/>
|
||||
<label className={styles["contato__label"]} htmlFor="telephone">
|
||||
Telefone:
|
||||
</label>
|
||||
<Field
|
||||
className={styles["contato__input"]}
|
||||
name="telephone"
|
||||
id="telephone"
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
<label className={styles["contato__label"]} htmlFor="instagram">
|
||||
Instagram
|
||||
</label>
|
||||
<Field
|
||||
className={styles["contato__input"]}
|
||||
name="instagram"
|
||||
id="instagram"
|
||||
placeholder="@seuuser"
|
||||
/>
|
||||
<div className={styles["contato__agree-wrapper"]}>
|
||||
<span className={styles["contato__span-agree"]}>*</span>
|
||||
<label className={styles["contato__label-agree"]} htmlFor="agree">
|
||||
Declaro que li e aceito
|
||||
</label>
|
||||
<Field
|
||||
className={styles["contato__agree"]}
|
||||
type="checkbox"
|
||||
name="agree"
|
||||
id="agree"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className={styles["contato__button-submit"]} type="submit">
|
||||
CADASTRA-SE
|
||||
</button>
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contato;
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const FormCustom = () => {
|
||||
return (
|
||||
<h1>Form</h1>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormCustom;
|
||||
@ -10,6 +10,7 @@
|
||||
.content-list {
|
||||
border-right: 1px solid $black;
|
||||
width: 27.96296296%;
|
||||
max-height: 285px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 100%;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import Contato from "./Contato/Contato";
|
||||
import styles from "./Informacoes.module.scss";
|
||||
|
||||
const Informacoes = () => {
|
||||
@ -22,7 +23,7 @@ const Informacoes = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles["content-subject"]}>
|
||||
{/* <div className={styles["content-subject"]}>
|
||||
<h2 className={styles["content-subject__title"]}>Sobre</h2>
|
||||
<p className={styles["content-subject__content"]}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
@ -51,7 +52,9 @@ const Informacoes = () => {
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
|
||||
voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<Contato />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -13,8 +13,11 @@ $primary-700: #f2f2f2;
|
||||
$primary-800: #f9f9f9;
|
||||
$primary-900: #ff0000;
|
||||
|
||||
|
||||
$gray-300: #B9B7B7;
|
||||
$gray-500: #7d7d7d;
|
||||
$gray-900: #292929;
|
||||
$black-500: #100D0E;
|
||||
//media Queries
|
||||
$sm: 375px;
|
||||
$lg: 1024px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user