forked from M3-Academy/desafio-react-e-typescript
Merge pull request 'feat: Cria CustomForm' (#7) from feature/criaCustomForm into main
Reviewed-on: #7
This commit is contained in:
commit
18bd503fef
2
.vscode/settings.json
vendored
Normal file
2
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
||||
195
react-academy/package-lock.json
generated
195
react-academy/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-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3810,6 +3812,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",
|
||||
@ -7961,6 +7968,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",
|
||||
@ -8336,6 +8379,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",
|
||||
@ -11401,6 +11457,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",
|
||||
@ -11726,6 +11787,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",
|
||||
@ -13628,6 +13694,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",
|
||||
@ -13937,6 +14008,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",
|
||||
@ -15494,6 +15570,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",
|
||||
@ -15526,6 +15607,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",
|
||||
@ -16826,6 +16912,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": {
|
||||
@ -19417,6 +19520,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",
|
||||
@ -22490,6 +22598,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",
|
||||
@ -22748,6 +22882,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",
|
||||
@ -24956,6 +25105,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",
|
||||
@ -25201,6 +25355,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",
|
||||
@ -26385,6 +26544,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",
|
||||
@ -26607,6 +26771,11 @@
|
||||
"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-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -27750,6 +27919,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",
|
||||
@ -27773,6 +27947,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",
|
||||
@ -28766,6 +28945,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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
BIN
react-academy/src/Components/BreadCrumb/BreadImages/arrow.png
Normal file
BIN
react-academy/src/Components/BreadCrumb/BreadImages/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 B |
BIN
react-academy/src/Components/BreadCrumb/BreadImages/home.png
Normal file
BIN
react-academy/src/Components/BreadCrumb/BreadImages/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 427 B |
@ -0,0 +1,171 @@
|
||||
import React, { useState } from "react";
|
||||
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
|
||||
import FormSchemaCont from "../../../schema/FormSchemaCont";
|
||||
|
||||
export interface IformikValues {
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
dataNasc: string;
|
||||
tel: string;
|
||||
instagram: string;
|
||||
declaro: boolean;
|
||||
}
|
||||
|
||||
const initialValues: IformikValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
dataNasc: "",
|
||||
tel: "",
|
||||
instagram: "",
|
||||
declaro: false,
|
||||
};
|
||||
|
||||
const CustomFormCont = () => {
|
||||
const handleForm = (
|
||||
values: IformikValues,
|
||||
{ resetForm }: FormikHelpers<IformikValues>
|
||||
) => {
|
||||
setSubmitted(true);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="main-form">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchemaCont}
|
||||
onSubmit={handleForm}
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
<Form className="container-form__description">
|
||||
<div>
|
||||
<h2>Preencha o Formulário</h2>
|
||||
|
||||
<div className="container-form__labels">
|
||||
<label htmlFor="name">Nome</label>
|
||||
<Field
|
||||
render=""
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Seu nome completo"
|
||||
className={errors.name && touched.name && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="name"
|
||||
className="form-invalid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-form__labels">
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<Field
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Seu e-mail"
|
||||
className={errors.email && touched.email && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className="form-invalid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-form__labels">
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<Field
|
||||
id="cpf"
|
||||
name="cpf"
|
||||
placeholder="000.000.000-00"
|
||||
className={errors.cpf && touched.cpf && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className="form-invalid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-form__labels">
|
||||
<label htmlFor="dataNasc">Data de Nascimento</label>
|
||||
<Field
|
||||
id="dataNasc"
|
||||
name="dataNasc"
|
||||
placeholder="00.00.0000"
|
||||
className={errors.dataNasc && touched.dataNasc && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="dataNasc"
|
||||
className="form-invalid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-form__labels">
|
||||
<label htmlFor="tel">Telefone</label>
|
||||
<Field
|
||||
id="tel"
|
||||
name="tel"
|
||||
placeholder="(00) 00000 0000"
|
||||
className={errors.tel && touched.tel && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="tel"
|
||||
className="form-invalid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-form__labels">
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<Field
|
||||
id="instagram"
|
||||
name="instagram"
|
||||
placeholder="@seuuser"
|
||||
className={errors.instagram && touched.instagram && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="instagram"
|
||||
className="form-invalid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-checkbox">
|
||||
<label htmlFor="check">
|
||||
* <u>Declaro que li e aceito</u>
|
||||
</label>
|
||||
<Field
|
||||
type="checkbox"
|
||||
id="declaro"
|
||||
name="declaro"
|
||||
className={errors.declaro && touched.declaro && "invalido"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="declaro"
|
||||
className="form-invalid form-invalid-declaro"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-btn">
|
||||
<button className="btn-contato" type="submit">
|
||||
CADASTRE-SE
|
||||
</button>
|
||||
{submitted ? (
|
||||
<span className="btn-msg">*Formulário enviado com sucesso</span>
|
||||
) : null}
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomFormCont;
|
||||
51
react-academy/src/Components/CustomForm/index.tsx
Normal file
51
react-academy/src/Components/CustomForm/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
|
||||
import FormSchema from "../../schema/FormSchema";
|
||||
import "./style.css";
|
||||
|
||||
interface IformikValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
email: "",
|
||||
};
|
||||
|
||||
const CustomForm = () => {
|
||||
const handleFormikNewsLetter = (values: IformikValues) => {
|
||||
console.log(values);
|
||||
};
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={handleFormikNewsLetter}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
<Form className="footer-newsletter">
|
||||
<div className="footer-newsletter__input">
|
||||
<label htmlFor="email" className="footer-newsletter__title">
|
||||
ASSINE NOSSA NEWSLETTER
|
||||
</label>
|
||||
<Field
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="E-mail"
|
||||
className={errors.email && touched.email && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
className="footer-newsletter__errorMsg"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<div className="btn-submit">
|
||||
<button type="submit">ENVIAR</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomForm;
|
||||
0
react-academy/src/Components/CustomForm/style.css
Normal file
0
react-academy/src/Components/CustomForm/style.css
Normal file
BIN
react-academy/src/Components/Footer/ImagesFooter/top.png
Normal file
BIN
react-academy/src/Components/Footer/ImagesFooter/top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
BIN
react-academy/src/Components/Footer/ImagesFooter/whatsapp.png
Normal file
BIN
react-academy/src/Components/Footer/ImagesFooter/whatsapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -1,44 +1,67 @@
|
||||
import React from "react";
|
||||
import "./style.css";
|
||||
import logoM3Desktop from "../ImagesHeader/Logo-M3-Desktop.png"
|
||||
import search from "../ImagesHeader/search.png"
|
||||
import cart from "../ImagesHeader/cart.png"
|
||||
import logoM3Desktop from "../ImagesHeader/Logo-M3-Desktop.png";
|
||||
import search from "../ImagesHeader/search.png";
|
||||
import cart from "../ImagesHeader/cart.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
const HeaderDesktop = () =>{
|
||||
return (
|
||||
<section className="header-desktop">
|
||||
<div className="page-header">
|
||||
const HeaderDesktop = () => {
|
||||
return (
|
||||
<header className="header-desktop">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<a href="/" className="page-header__logo">
|
||||
<img
|
||||
className="page-header__imgLogo"
|
||||
src={logoM3Desktop}
|
||||
alt="Logo M3 academy"
|
||||
/>
|
||||
</a>
|
||||
<div className="page-header__input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
className="page-header__inputSearch"
|
||||
/>
|
||||
<button className="page-header__iconSearch">
|
||||
<img
|
||||
className="page-header__imgSearch"
|
||||
src={search}
|
||||
alt="Icone Search Header"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="page-header__links">
|
||||
<NavLink to="/" className="page-header-join">
|
||||
ENTRAR
|
||||
</NavLink>
|
||||
<button className="page-header-iconCart">
|
||||
<img
|
||||
className="page-header__cart"
|
||||
src={cart}
|
||||
alt="Icone Cart Header"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="page-header__container">
|
||||
<a href="/" className="page-header__logo">
|
||||
<img className="page-header__imgLogo" src={logoM3Desktop} alt="Logo M3 academy" />
|
||||
</a>
|
||||
<div className="page-header__input">
|
||||
<input type="text" placeholder="Buscar..." className="page-header__inputSearch" />
|
||||
<button className="page-header__iconSearch">
|
||||
<img className="page-header__imgSearch" src={search} alt="Icone Search Header" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="page-header__links">
|
||||
<NavLink to="/" className="page-header-join">ENTRAR</NavLink>
|
||||
<button className="page-header-iconCart">
|
||||
<img className="page-header__cart" src={cart} alt="Icone Cart Header" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="page-belowHeader">
|
||||
<div className="page-belowHeader__containerBelow">
|
||||
<div className="page-belowHeader__links">
|
||||
<NavLink to="/" className="page-belowHeader-nav">CURSOS</NavLink>
|
||||
<NavLink to="/" className="page-belowHeader-nav">SAIBA MAIS</NavLink>
|
||||
<NavLink to="/" className="page-belowHeader-nav">INSTITUCIONAIS</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-belowHeader">
|
||||
<div className="page-belowHeader__containerBelow">
|
||||
<div className="page-belowHeader__links">
|
||||
<NavLink to="/" className="page-belowHeader-nav">
|
||||
CURSOS
|
||||
</NavLink>
|
||||
<NavLink to="/" className="page-belowHeader-nav">
|
||||
SAIBA MAIS
|
||||
</NavLink>
|
||||
<NavLink to="/" className="page-belowHeader-nav">
|
||||
INSTITUCIONAIS
|
||||
</NavLink>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
export default HeaderDesktop;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
export default HeaderDesktop;
|
||||
|
||||
@ -8,12 +8,12 @@ import menu from "../ImagesHeader/menu.png";
|
||||
import closeMenu from "../ImagesHeader/close-menu.png";
|
||||
|
||||
const HeaderTablets = () => {
|
||||
const [Open, setOpen] = useState<boolean>(false);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const body = document.querySelector("body") as HTMLElement;
|
||||
body.classList.toggle("menu");
|
||||
}, [Open]);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="header-tablets">
|
||||
@ -22,16 +22,15 @@ const HeaderTablets = () => {
|
||||
<div className="page-header__menu">
|
||||
<button
|
||||
className="page-header__btnMenu"
|
||||
onClick={() => setOpen(!Open)}
|
||||
aria-label={`${Open ? "Fechar" : "Abrir"} menu`}
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
aria-label={`${open ? "Fechar" : "Abrir"} menu`}
|
||||
>
|
||||
<img src={menu} alt="Menu tablet" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={`menu-tablet ${Open ? "actived" : "disabled"}`}
|
||||
aria-hidden={!Open}
|
||||
className={`menu-tablet ${open ? "actived" : "disabled"}`}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div className="page-belowHeader__links">
|
||||
<div className="page-header__links">
|
||||
@ -58,6 +57,7 @@ const HeaderTablets = () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a className="page-header__link-logo" href="sobre">
|
||||
<img
|
||||
className="page-header__logo"
|
||||
|
||||
@ -53,9 +53,9 @@
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
bottom: 7%;
|
||||
right: 10%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
header .actived {
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
import React, {useEffect, useState} from "react"
|
||||
import React, { useEffect, useState } from "react";
|
||||
import HeaderDesktop from "./HeaderDesktop";
|
||||
import HeaderTablets from "./HeaderTablets";
|
||||
import "./style.css"
|
||||
import "./style.css";
|
||||
|
||||
const Header = ()=>{
|
||||
const [width, setWidth] = useState<number>(window.innerWidth);
|
||||
const Header = () => {
|
||||
const [width, setWidth] = useState<number>(window.innerWidth);
|
||||
|
||||
const handleWindow = ()=>{
|
||||
setWidth(window.innerWidth);
|
||||
}
|
||||
const handleWindow = () => {
|
||||
setWidth(window.innerWidth);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", handleWindow);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleWindow);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <header>{width <= 1024 ? <HeaderTablets /> : <HeaderDesktop />}</header>
|
||||
}
|
||||
export default Header;
|
||||
return (
|
||||
<header>{width <= 1024 ? <HeaderTablets /> : <HeaderDesktop />}</header>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
|
||||
@ -25,6 +25,7 @@ li {
|
||||
/*COLORS*/
|
||||
:root {
|
||||
--color-black: #000;
|
||||
--color-black-100: #100d0e;
|
||||
|
||||
--color-white: #fff;
|
||||
--color-white-100: #f0f0f0;
|
||||
@ -32,4 +33,10 @@ li {
|
||||
--color-gray-100: #303030;
|
||||
--color-gray-200: #c4c4c4;
|
||||
--color-gray-300: #e5e5e5;
|
||||
--color-gray-400: #7d7d7d;
|
||||
--color-gray-500: #292929;
|
||||
|
||||
--color-red: #ff0000;
|
||||
|
||||
--color-green: #008000;
|
||||
}
|
||||
|
||||
5
react-academy/src/schema/FormSchema.ts
Normal file
5
react-academy/src/schema/FormSchema.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import * as Yup from "yup";
|
||||
|
||||
export default Yup.object().shape({
|
||||
email: Yup.string().email("Email Inválido"),
|
||||
});
|
||||
43
react-academy/src/schema/FormSchemaCont.ts
Normal file
43
react-academy/src/schema/FormSchemaCont.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import * as Yup from "yup";
|
||||
import { IformikValues } from "../Components/CustomForm/CustomFormContato";
|
||||
|
||||
const cpfRegex = /([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2})/;
|
||||
|
||||
const dataNascRegex =
|
||||
/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/;
|
||||
|
||||
const telRegex =
|
||||
/\(?\ [0-9]{1,3}\)? ?-?[0-9]{1,3} ?-?[0-9]{3,5} ?-?[0-9]{4}( ?-?[0-9]{3})? ?(\w{1,10}\s?\d{1,6})?/;
|
||||
|
||||
const instaRegex =
|
||||
/(?:@)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)/;
|
||||
|
||||
const formYup: Yup.SchemaOf<IformikValues> = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(3, "O nome deve conter mais de 2 caracteres")
|
||||
.required("*Campo Obrigatório"),
|
||||
|
||||
email: Yup.string().email("Email Inválido").required("*Campo Obrigatório"),
|
||||
|
||||
cpf: Yup.string()
|
||||
.matches(cpfRegex, "CPF inválido")
|
||||
.required("*Campo Obrigatório"),
|
||||
|
||||
dataNasc: Yup.string()
|
||||
.matches(dataNascRegex, "Data de nascimento inválida")
|
||||
.required("*Campo Obrigatório"),
|
||||
|
||||
tel: Yup.string()
|
||||
.matches(telRegex, "Número de telefone inválido")
|
||||
.required("*Campo Obrigatório"),
|
||||
|
||||
instagram: Yup.string()
|
||||
.matches(instaRegex, "User inválido")
|
||||
.required("*Campo Obrigatório"),
|
||||
|
||||
declaro: Yup.boolean()
|
||||
.oneOf([true], "*Campo Obrigatório")
|
||||
.required("*Campo Obrigatório"),
|
||||
});
|
||||
|
||||
export default formYup;
|
||||
Loading…
Reference in New Issue
Block a user