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

feat(form): Adiciona validação do formulario

Browse Source
This commit is contained in:
Amanda de Almeida Fonseca 2023-01-06 01:09:35 -03:00
parent ec9f9b79c4
commit f490f473bd
24 changed files with 532 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
package-lock.json generated
View File

@ -15,12 +15,16 @@
"@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-imask": "^6.4.3",
"react-input-mask": "^2.0.4",
"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 +3806,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",
@ -7953,6 +7962,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",
@ -8328,6 +8373,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",
@ -8595,6 +8653,14 @@
"node": ">= 4"
}
},
"node_modules/imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
"integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw==",
"engines": {
"npm": ">=4.0.0"
}
},
"node_modules/immer": {
"version": "9.0.16",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@ -8698,6 +8764,14 @@
"node": ">= 0.4"
}
},
"node_modules/invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/ipaddr.js": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@ -11398,6 +11472,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",
@ -11723,6 +11802,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",
@ -13625,6 +13709,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",
@ -13934,6 +14023,39 @@
"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-imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
"integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
"dependencies": {
"imask": "^6.4.3",
"prop-types": "^15.7.2"
},
"engines": {
"npm": ">=4.0.0"
},
"peerDependencies": {
"react": ">=0.14.0"
}
},
"node_modules/react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
"integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
"dependencies": {
"invariant": "^2.2.4",
"warning": "^4.0.2"
},
"peerDependencies": {
"react": ">=0.14.0",
"react-dom": ">=0.14.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -15477,6 +15599,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",
@ -15509,6 +15636,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",
@ -15885,6 +16017,14 @@
"makeerror": "1.0.12"
}
},
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/watchpack": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@ -16809,6 +16949,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"
}
}
},
"dependencies": {
@ -19395,6 +19552,11 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"@types/mime": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@ -22468,6 +22630,32 @@
"mime-types": "^2.1.12"
}
},
"formik": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
"requires": {
"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"
},
"dependencies": {
"deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -22726,6 +22914,21 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"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==",
"requires": {
"react-is": "^16.7.0"
},
"dependencies": {
"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=="
}
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -22926,6 +23129,11 @@
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
},
"imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
"integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw=="
},
"immer": {
"version": "9.0.16",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@ -23000,6 +23208,14 @@
"side-channel": "^1.0.4"
}
},
"invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"ipaddr.js": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@ -24939,6 +25155,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"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=="
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -25184,6 +25405,11 @@
"thunky": "^1.0.2"
}
},
"nanoclone": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
},
"nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -26368,6 +26594,11 @@
}
}
},
"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=="
},
"proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@ -26590,6 +26821,29 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"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=="
},
"react-imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
"integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
"requires": {
"imask": "^6.4.3",
"prop-types": "^15.7.2"
}
},
"react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
"integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
"requires": {
"invariant": "^2.2.4",
"warning": "^4.0.2"
}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -27726,6 +27980,11 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
"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=="
},
"tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@ -27749,6 +28008,11 @@
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
},
"toposort": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
},
"tough-cookie": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@ -28025,6 +28289,14 @@
"makeerror": "1.0.12"
}
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@ -28742,6 +29014,20 @@
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
},
"yup": {
"version": "0.32.11",
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
"integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
"requires": {
"@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"
}
}
}
}

6
package.json
View File

@ -10,12 +10,16 @@
"@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-imask": "^6.4.3",
"react-input-mask": "^2.0.4",
"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",

4
src/components/Header.tsx
View File

@ -5,9 +5,9 @@ import Cart from "../assets/img/Cart.png";
import iconMenu from "../assets/img/iconMenu.png";
import Link from "./Link";
import HeaderLinks from "./HeaderLinks";
import MenuMobile from "./menuMobile";
import MenuMobile from "./MenuMobile";
import styles from "../styles/header.module.scss";
import styles from "./header.module.scss";
const Header = () => {
const [isActive, setIsActive] = useState(false);

2
src/components/Link.tsx
View File

@ -1,4 +1,4 @@
import styles from "../styles/header.module.scss";
import styles from "./header.module.scss";
export interface LinkProps {
link: string;

2
src/components/Main.tsx
View File

@ -2,7 +2,7 @@ import iconHome from "../assets/img/iconHome.png";
import arrow from "../assets/img/arrow.png";
import SubjectMain from "./SubjectMain";
import styles from "../styles/main.module.scss";
import styles from "./main.module.scss";
const Main = () => {
return (

2
src/components/Nav.tsx
View File

@ -1,4 +1,4 @@
import styles from "../styles/subject.module.scss";
import styles from "./subject.module.scss";
interface NavProps {
text: string;

202
src/components/RegistrationForm.tsx Normal file
View File

@ -0,0 +1,202 @@
import { useCallback, useState } from "react";
import styles from "./form.module.scss";
import stylesInput from "./input.module.scss";
import stylesCheckbox from "./checkbox.module.scss";
import FormSchema from "../schema/FormSchema";
import { Formik, Form, Field, ErrorMessage } from "formik";
interface RegistrationFormProps {
active: boolean;
}
interface FormikValues {
name: string;
email: string;
cpf: string;
data: string;
tel: string;
instagram: string;
acceptTerms: boolean;
}
const initialValues = {
name: "",
email: "",
cpf: "",
data: "",
tel: "",
instagram: "",
acceptTerms: false,
};
const RegistrationForm = (props: RegistrationFormProps) => {
const [isSubmit, setIsSubmit] = useState(false);
const handleFormSubmit = (values: FormikValues) => {
values.name = "";
values.email = "";
values.cpf = "";
values.data = "";
values.tel = "";
values.instagram = "";
values.acceptTerms = false;
setIsSubmit(!isSubmit);
};
const handleTel = useCallback((e: React.FormEvent<HTMLInputElement>) => {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{2})(\d{5})(\d)/, "($1) $2-$3");
e.currentTarget.value = value;
}, []);
const handleDate = useCallback((e: React.FormEvent<HTMLInputElement>) => {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{2})(\d{2})(\d)/, "$1.$2.$3");
e.currentTarget.value = value;
}, []);
const handleCpf = useCallback((e: React.FormEvent<HTMLInputElement>) => {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{3})(\d{3})(\d{3})(\d)/, "$1.$2.$3-$4");
e.currentTarget.value = value;
}, []);
return (
<div
className={props.active ? styles["page-main__form"] : styles["desative"]}
>
<Formik
onSubmit={handleFormSubmit}
initialValues={initialValues}
validationSchema={FormSchema}
>
<Form>
<h3 className={styles["page-main__title"]}>Preencha o formulário</h3>
<div className={stylesInput["page-main__container"]}>
<label className={stylesInput["page-main__label"]} htmlFor="Name">
Nome
</label>
<Field
className={stylesInput["page-main__input"]}
id="Name"
placeholder="Seu nome completo"
name="name"
/>
<ErrorMessage
name="name"
component="span"
className={stylesInput["page-main__error"]}
/>
</div>
<div className={stylesInput["page-main__container"]}>
<label className={stylesInput["page-main__label"]} htmlFor="E-mail">
E-mail
</label>
<Field
className={stylesInput["page-main__input"]}
id="Email"
placeholder="Seu e-mail"
name="email"
/>
<ErrorMessage
component="span"
name="email"
className={stylesInput["page-main__error"]}
/>
</div>
<div className={stylesInput["page-main__container"]}>
<label className={stylesInput["page-main__label"]} htmlFor="Cpf">
CPF
</label>
<Field
className={stylesInput["page-main__input"]}
id="Cpf"
placeholder="000.000.000-00"
name="cpf"
onKeyUp={handleCpf}
/>
<ErrorMessage
component="span"
name="cpf"
className={stylesInput["page-main__error"]}
/>
</div>
<div className={stylesInput["page-main__container"]}>
<label className={stylesInput["page-main__label"]} htmlFor="Data">
Data de Nascimento:
</label>
<Field
className={stylesInput["page-main__input"]}
id="Data"
placeholder="00.00.0000"
name="data"
onKeyUp={handleDate}
/>
<ErrorMessage
component="span"
name="data"
className={stylesInput["page-main__error"]}
/>
</div>
<div className={stylesInput["page-main__container"]}>
<label className={stylesInput["page-main__label"]} htmlFor="tel">
Telefone:
</label>
<Field
className={stylesInput["page-main__input"]}
id="tel"
placeholder="(00) 00000-0000"
name="tel"
onKeyUp={handleTel}
/>
<ErrorMessage
component="span"
name="tel"
className={stylesInput["page-main__error"]}
/>
</div>
<label
className={stylesInput["page-main__label"]}
htmlFor="Instagram"
>
Instagram
</label>
<Field
className={stylesInput["page-main__input"]}
id="Instagram"
placeholder="@seuuser"
name="instagram"
/>
<div className={stylesCheckbox["page-main__container"]}>
<label
className={stylesCheckbox["page-main__label"]}
htmlFor="acceptTerms"
>
*<strong>Declaro que li e aceito</strong>
</label>
<Field
type="checkbox"
name="acceptTerms"
className={stylesCheckbox["page-main__input"]}
/>
</div>
<button type="submit" className={styles["page-main__button"]}>
CADASTRE-SE
</button>
<p
className={
isSubmit
? styles["page-main__success"]
: styles["page-main__error"]
}
>
*Formulário enviado com sucesso!
</p>
</Form>
</Formik>
</div>
);
};
export default RegistrationForm;

2
src/components/SearchBar.tsx
View File

@ -1,6 +1,6 @@
import iconBusca from "../assets/img/IconBusca.png";
import styles from "../styles/header.module.scss";
import styles from "./header.module.scss";
const SearchBar = () => {
return (

6
src/components/SubjectMain.tsx
View File

@ -1,8 +1,8 @@
import Nav from "./Nav";
import SubjectText from "./SubjectText";
import styles from "../styles/subject.module.scss";
import Forum from "./form";
import styles from "./subject.module.scss";
import Forum from "./RegistrationForm";
import { useState } from "react";
const SubjectMain = () => {
@ -123,8 +123,6 @@ const SubjectMain = () => {
<Forum active={isForm} />,
];
console.log(Subjects);
return (
<section className={styles["page-subject"]}>
<nav className={styles["page-subject__nav"]}>

2
src/components/SubjectText.tsx
View File

@ -1,4 +1,4 @@
import styles from "../styles/subject.module.scss";
import styles from "./subject.module.scss";
interface SubjectTextProps {
title: string;

5
src/styles/checkbox.module.scss → src/components/checkbox.module.scss
View File

@ -1,4 +1,4 @@
@import './variables.scss';
@import 'variables.scss';
.page-main {
&__container {
@ -12,14 +12,15 @@
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $red;
text-decoration: initial;
color: $red;
strong {
font-weight: 400;
text-decoration: underline;
color: $black-200;
}
}
&__input {

18
src/components/checkbox.tsx
View File

@ -1,18 +0,0 @@
import styles from "../styles/checkbox.module.scss";
const Checkbox = () => {
return (
<div className={styles["page-main__container"]}>
<label className={styles["page-main__label"]} htmlFor="checkbox">
*<strong>Declaro que li e aceito</strong>
</label>
<input
id="checkbox"
className={styles["page-main__input"]}
type="checkbox"
/>
</div>
);
};
export default Checkbox;

2
src/styles/form.module.scss → src/components/form.module.scss
View File

@ -1,4 +1,4 @@
@import './variables.scss';
@import 'variables.scss';
.desative {
display: none;

75
src/components/form.tsx
View File

@ -1,75 +0,0 @@
import styles from "../styles/form.module.scss";
import Checkbox from "./checkbox";
import Input from "./input";
interface FormProps {
active: boolean;
activeError?: boolean;
}
const Form = (props: FormProps) => {
return (
<form
className={props.active ? styles["page-main__form"] : styles["desative"]}
>
<h3 className={styles["page-main__title"]}>Preencha o formulário</h3>
<Input
htmlFor="Name"
id="Name"
textLabel="Nome"
type="text"
placeholder="Seu nome completo"
/>
<Input
htmlFor="Email"
id="Email"
textLabel="E-mail"
type="email"
placeholder="Seu e-mail"
/>
<Input
htmlFor="Cpf"
id="Cpf"
textLabel="CPF"
type="text"
placeholder="000.000.000-00"
/>
<Input
htmlFor="Data"
id="Data"
textLabel="Data de Nascimento:"
type="text"
placeholder="00.00.0000"
/>
<Input
htmlFor="tel"
id="tel"
textLabel="Telefone:"
type="text"
placeholder="(00) 00000-0000"
/>
<Input
htmlFor="Instagram"
id="Instagram"
textLabel="Instagram"
type="text"
placeholder="@seuuser"
/>
<Checkbox />
<button type="submit" className={styles["page-main__button"]}>
CADASTRE-SE
</button>
<p
className={
props.activeError
? styles["page-main__success"]
: styles["page-main__error"]
}
>
*Formulário enviado com sucesso!
</p>
</form>
);
};
export default Form;

2
src/styles/header.module.scss → src/components/header.module.scss
View File

@ -1,4 +1,4 @@
@import './variables.scss';
@import 'variables.scss';
.page-header {
display: flex;

11
src/styles/input.module.scss → src/components/input.module.scss
View File

@ -1,12 +1,8 @@
@import './variables.scss';
@import 'variables.scss';
.page-main {
&__container {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
&__label {
@ -29,16 +25,13 @@
padding-left: 20px;
color: $gray-700;
outline: 0;
margin: 12px 0;
&::placeholder {
color: $gray-700;
}
}
&__sem-erro {
display: none;
}
&__error {
display: flex;
position: absolute;

37
src/components/input.tsx
View File

@ -1,37 +0,0 @@
import styles from "../styles/input.module.scss";
interface InputProps {
placeholder: string;
type: string;
textLabel: string;
htmlFor: string;
id: string;
active?: boolean;
}
const Input = (props: InputProps) => {
return (
<div className={styles["page-main__container"]}>
<label className={styles["page-main__label"]} htmlFor={props.htmlFor}>
{props.textLabel}
</label>
<p
className={
props.active
? styles["page-main__error"]
: styles["page-main__sem-erro"]
}
>
*Campo Obrigatório
</p>
<input
id={props.id}
className={styles["page-main__input"]}
type={props.type}
placeholder={props.placeholder}
/>
</div>
);
};
export default Input;

0
src/styles/main.module.scss → src/components/main.module.scss
View File

2
src/components/menuMobile.tsx
View File

@ -2,7 +2,7 @@ import iconExit from "../assets/img/iconExit.png";
import Link from "./Link";
import HeaderLinks from "./HeaderLinks";
import styles from "../styles/header.module.scss";
import styles from "./header.module.scss";
interface MenuMobileProps {
className: string;

4
src/styles/subject.module.scss → src/components/subject.module.scss
View File

@ -107,6 +107,10 @@
flex-direction: column;
margin-top: 40px;
&__nav {
border: 0;
}
&__menu {
width: 100%;
border-right: 0;

0
src/styles/variables.scss → src/components/variables.scss
View File

2
src/styles/global.module.scss → src/global.module.scss
View File

@ -1,4 +1,4 @@
@import './variables.scss';
@import './components/variables.scss';
* {
padding: 0;

2
src/index.tsx
View File

@ -1,5 +1,5 @@
import ReactDOM from "react-dom";
import "./styles/global.module.scss";
import "./global.module.scss";
import Home from "./pages/Home";
const App = () => {

15
src/schema/FormSchema.ts Normal file
View File

@ -0,0 +1,15 @@
import * as Yup from "yup";
export default Yup.object().shape({
name: Yup.string()
.min(3, "mínimo 3 caracteres")
.required("*Campo Obrigatório"),
email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
cpf: Yup.string().length(14).required("*Campo Obrigatório"),
data: Yup.date()
.required("*Campo Obrigatório")
.max(new Date(), "Não é possível incluir uma data futura"),
tel: Yup.string().length(15).required("*Campo Obrigatório"),
instagram: Yup.string(),
acceptTerms: Yup.bool().oneOf([true], "*"),
});