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

feat(institucional):adicionando required nos demais campos

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-11 03:38:42 -03:00
parent 4a846f144d
commit 67c6aff915
8 changed files with 90 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
desafio-5/package-lock.json generated
View File

@ -15,6 +15,7 @@
"@types/node": "^16.18.11",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"cpf-check": "^3.0.0",
"formik": "^2.2.9",
"node-sass": "^7.0.3",
"react": "^18.2.0",
@ -6031,6 +6032,11 @@
"node": ">=10"
}
},
"node_modules/cpf-check": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cpf-check/-/cpf-check-3.0.0.tgz",
"integrity": "sha512-IwUJdDJ57kheRXiO7govTBOcKsLK/AdDrVKfk6rYCCNDcOBUiY9zmUY0fWI4/S/oIpbhHWMcOD0O2DLawuwiBw=="
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -23009,6 +23015,11 @@
"yaml": "^1.10.0"
}
},
"cpf-check": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cpf-check/-/cpf-check-3.0.0.tgz",
"integrity": "sha512-IwUJdDJ57kheRXiO7govTBOcKsLK/AdDrVKfk6rYCCNDcOBUiY9zmUY0fWI4/S/oIpbhHWMcOD0O2DLawuwiBw=="
},
"cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

1
desafio-5/package.json
View File

@ -10,6 +10,7 @@
"@types/node": "^16.18.11",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"cpf-check": "^3.0.0",
"formik": "^2.2.9",
"node-sass": "^7.0.3",
"react": "^18.2.0",

26
desafio-5/src/components/modules/home.module.scss
View File

@ -120,7 +120,19 @@
&_col{
display: flex;
flex-direction: column;
position: relative;
gap: 12px;
&_Invalid{
position: absolute;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
right: 0;
padding: 0 20px;
color: $-red
}
Label{
padding: 0 20px;
font-family: 'Roboto',sans-serif;
@ -156,16 +168,14 @@
display: none;
}
}
.checkLabel{
.checkLabel {
display: flex;
align-items: center;
flex-direction: row-reverse;
gap: 4.28px;
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-decoration: underline;
@ -179,7 +189,17 @@
box-sizing: border-box;
border-radius: 4px;
}
&:after{
content: "*";
color: $-red;
}
}
.remove_underline{
&:after{
text-decoration: none ;
}
}
.checked {
&:before{
background: $-black-100E;

6
desafio-5/src/components/scripts/moleculas/InputForm.tsx
View File

@ -3,8 +3,8 @@ import { Field, ErrorMessage } from 'formik';
interface inputProps {
type:string
required?:boolean
name?:string;
required?:boolean
className?: string;
Errorclass?: string;
Labelclass?: string;
@ -19,7 +19,7 @@ interface checkbox extends inputProps {
}
export const Inputform: React.FC<checkbox> = (
{ type,name,className,Inputclass,Labelclass,id,Label,placeholder, onClick,checked,Errorclass,required = false}
{ type="text",name,className,Inputclass,Labelclass,id,Label,placeholder, onClick,checked,Errorclass,required = false}
) => {
return(
<div className={className}>
@ -34,7 +34,7 @@ export const Inputform: React.FC<checkbox> = (
required={required}/>
<ErrorMessage
component="span"
name="name"
name={String(name)}
className={Errorclass}
/>
</div>

1
desafio-5/src/components/utils/Variables.scss
View File

@ -14,4 +14,5 @@ $-gray-600:#333333;
$-gray-B97:#B9B7B7;
$-prisma: #FF5A5F;
$-crimson: rgb(156, 4, 34);
$-red: #FF0000;
$-shockPink:rgb(220, 20, 60);

24
desafio-5/src/pages/Institucional.tsx
View File

@ -4,9 +4,11 @@ import { Formik,Form, FormikHelpers } from 'formik';
import Homeicon from "../components/assets/icons/home_icon.svg"
import Leftarrow from "../components/assets/icons/Leftarrow.svg"
import MainStyles from "../components/modules/home.module.scss"
import FormShecma from "../schema/FormShecma";
import { Title,BreadcrumbTitle,FormTitle } from "../components/scripts/moleculas/Title"
import { Inputform} from "../components/scripts/moleculas/InputForm"
const title = "INSTITUCIONAL"
@ -114,10 +116,13 @@ const Home = () =>{
</p>
</section>
<Formik
validationSchema={FormShecma}
initialValues={initialValues}
id={MainStyles["Contato"]}
onSubmit={handleFormikSubmit}
>
{({errors,touched}) => (
<Form
id={MainStyles["contact"]}
className={activeSection === "Contato" ? MainStyles["active"] : MainStyles["hiden"]}
@ -128,48 +133,61 @@ const Home = () =>{
type="text" name="name"
Label="NAME"
placeholder="Seu nome completo"
Errorclass={MainStyles.form_col_Invalid}
/>
<Inputform className={MainStyles.form_col}
id={MainStyles.Email}
Label="E-MAIL" name="email"
type="email"
placeholder="Seu e-mail"
Errorclass={MainStyles.form_col_Invalid}
/>
<Inputform className={MainStyles.form_col}
id={MainStyles.Cpf}
Label="CPF" name="cpf"
type="text"
placeholder="000.000.000-00"
Errorclass={MainStyles.form_col_Invalid}
/>
<Inputform className={MainStyles.form_col}
id={MainStyles.Date}
Label="DATA DE NASCIMENTO" name="date"
type="number"
placeholder="00.00.0000"
Errorclass={MainStyles.form_col_Invalid}
/>
<Inputform className={MainStyles.form_col}
id={MainStyles.Phone}
Label="TELEFONE" name="phone"
type="text"
placeholder="(00) 00000-0000"
Errorclass={MainStyles.form_col_Invalid}
/>
<Inputform className={MainStyles.form_col}
id={MainStyles.Insta}
Label="INSTAGRAM" name="instagram"
type="text"
placeholder="@seuuser"
Errorclass={MainStyles.form_col_Invalid}
/>
<Inputform className={MainStyles.form_check}
<Inputform
className={`${MainStyles.form_check} ${isChecked && MainStyles.checked}`}
id={MainStyles.checkbox}
Label="Declaro que li e aceito" name="aceito"
Labelclass= {`${MainStyles.checkLabel} ${isChecked && MainStyles.checked}`}
Labelclass= {`${MainStyles.checkLabel} ${MainStyles.remove_underline}`}
Errorclass={MainStyles.form_col_Invalid}
type="checkbox"
required= {true}
checked={isChecked}
onClick={handleCheckboxChange}
/>
<button type="submit">CADASTRE-SE</button>
<button
type="submit"
>
CADASTRE-SE
</button>
</Form>
)}
</Formik>
</div>

41
desafio-5/src/schema/FormShecma.tsx
View File

@ -1,23 +1,32 @@
import React from "react"
import * as Validate from "yup"
import * as Yup from "yup";
import isCPF from 'cpf-check';
export default Validate.object().shape({
name: Validate.string()
.min(2, "O nome deve ter pelo menos 2 caracteres")
.required("Campo Obrigatório")
,
email: Validate.string()
export default Yup.object().shape({
name: Yup.string()
.min(2, "* O nome deve ter pelo menos 2 caracteres")
.required("* Campo Obrigatório"),
email: Yup.string()
.matches(
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@(?:gmail|hotmail|outlook)\.com$/,
"Apenas emails do Gmail ou Hotmail ou outlook são permitidos"
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@(?:gmail|hotmail|outlook)\.com$/,
"Apenas emails Pessoais (Gmail, Hotmail ou outlook) são permitidos"
)
.required("Campo Obrigatório")
.email("Email inválido")
.required("* Campo Obrigatório")
.email("* Email inválido"),
cpf: Yup.string()
.required("* Campo Obrigatório")
.transform(value => isCPF.format(value))
.test("cpf-valid", "* CPF inválido", value => !isCPF.validate(value))
,
cpf: Validate.string()
.matches(/^\d{3}\.\d{3}\.\d{3}-\d{2}$/, 'Invalid format')
.required("Campo Obrigatório")
date:Yup.string()
.required("* Campo Obrigatório"),
phone:Yup.string()
.required("* Campo Obrigatório"),
instagram:Yup.string(),
});
})

5
desafio-5/yarn.lock
View File

@ -3558,6 +3558,11 @@
"path-type" "^4.0.0"
"yaml" "^1.10.0"
"cpf-check@^3.0.0":
"integrity" "sha512-IwUJdDJ57kheRXiO7govTBOcKsLK/AdDrVKfk6rYCCNDcOBUiY9zmUY0fWI4/S/oIpbhHWMcOD0O2DLawuwiBw=="
"resolved" "https://registry.npmjs.org/cpf-check/-/cpf-check-3.0.0.tgz"
"version" "3.0.0"
"cross-spawn@^7.0.2", "cross-spawn@^7.0.3":
"integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="
"resolved" "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"