@pipelinesolucoes/form 1.0.0-beta.0 → 1.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +78 -78
- package/README.md +170 -162
- package/dist/components/ButtonFormStyled.d.ts +2 -0
- package/dist/components/ButtonFormStyled.js +22 -0
- package/dist/components/ButtonFormStyled.js.map +1 -0
- package/dist/components/FormStyled.d.ts +2 -2
- package/dist/components/TextFieldValidate.d.ts +56 -67
- package/dist/components/TextFieldValidate.js +64 -78
- package/dist/components/TextFieldValidate.js.map +1 -1
- package/dist/components/login/GoogleButton.d.ts +66 -0
- package/dist/components/login/GoogleButton.js +112 -0
- package/dist/components/login/GoogleButton.js.map +1 -0
- package/dist/components/{LoginForm.js → login/LoginForm.js} +1 -1
- package/dist/components/login/LoginForm.js.map +1 -0
- package/dist/components/login/PasswordRecoveryForm.d.ts +142 -0
- package/dist/components/login/PasswordRecoveryForm.js +169 -0
- package/dist/components/login/PasswordRecoveryForm.js.map +1 -0
- package/dist/components/{SignUpForm.js → login/SignUpForm.js} +1 -1
- package/dist/components/login/SignUpForm.js.map +1 -0
- package/dist/components/{RecaptchaForm.js → recaptcha/RecaptchaForm.js} +1 -1
- package/dist/components/recaptcha/RecaptchaForm.js.map +1 -0
- package/dist/components/recaptcha/RecaptchaInvisible.js.map +1 -0
- package/dist/components/recaptcha/RecaptchaMessage.js.map +1 -0
- package/dist/index.d.ts +9 -5
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/BorderProps.d.ts +6 -0
- package/dist/types/BorderProps.js +2 -0
- package/dist/types/BorderProps.js.map +1 -0
- package/dist/types/ButtonProps.d.ts +17 -0
- package/dist/types/ButtonProps.js +16 -0
- package/dist/types/ButtonProps.js.map +1 -0
- package/dist/types/ColorProps.d.ts +9 -0
- package/dist/types/ColorProps.js +2 -0
- package/dist/types/ColorProps.js.map +1 -0
- package/dist/types/FieldProps.d.ts +9 -0
- package/dist/types/FieldProps.js +2 -0
- package/dist/types/FieldProps.js.map +1 -0
- package/dist/types/LayoutProps.d.ts +7 -0
- package/dist/types/LayoutProps.js +2 -0
- package/dist/types/LayoutProps.js.map +1 -0
- package/dist/types/TextProps.d.ts +5 -0
- package/dist/types/TextProps.js +2 -0
- package/dist/types/TextProps.js.map +1 -0
- package/package.json +62 -64
- package/dist/components/GoogleButton.d.ts +0 -60
- package/dist/components/GoogleButton.js +0 -110
- package/dist/components/GoogleButton.js.map +0 -1
- package/dist/components/LoginForm.js.map +0 -1
- package/dist/components/RecaptchaForm.js.map +0 -1
- package/dist/components/RecaptchaInvisible.js.map +0 -1
- package/dist/components/RecaptchaMessage.js.map +0 -1
- package/dist/components/RecuperarSenhaForm.d.ts +0 -23
- package/dist/components/RecuperarSenhaForm.js +0 -98
- package/dist/components/RecuperarSenhaForm.js.map +0 -1
- package/dist/components/SignUpForm.js.map +0 -1
- /package/dist/components/{LoginForm.d.ts → login/LoginForm.d.ts} +0 -0
- /package/dist/components/{SignUpForm.d.ts → login/SignUpForm.d.ts} +0 -0
- /package/dist/components/{RecaptchaForm.d.ts → recaptcha/RecaptchaForm.d.ts} +0 -0
- /package/dist/components/{RecaptchaInvisible.d.ts → recaptcha/RecaptchaInvisible.d.ts} +0 -0
- /package/dist/components/{RecaptchaInvisible.js → recaptcha/RecaptchaInvisible.js} +0 -0
- /package/dist/components/{RecaptchaMessage.d.ts → recaptcha/RecaptchaMessage.d.ts} +0 -0
- /package/dist/components/{RecaptchaMessage.js → recaptcha/RecaptchaMessage.js} +0 -0
|
@@ -1,104 +1,93 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import { BorderProps } from '../types/BorderProps';
|
|
3
|
+
import { ColorProps } from '../types/ColorProps';
|
|
4
|
+
import { LayoutProps } from '../types/LayoutProps';
|
|
5
|
+
interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
3
6
|
id?: string;
|
|
4
7
|
label?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
value?: string;
|
|
5
10
|
background?: string;
|
|
11
|
+
backgroundDisabled?: string;
|
|
6
12
|
colorText?: string;
|
|
13
|
+
colorFocused?: string;
|
|
14
|
+
colorDisabled?: string;
|
|
7
15
|
borderRadius?: string;
|
|
8
16
|
boxShadow?: string;
|
|
9
17
|
borderColor?: string;
|
|
10
|
-
|
|
18
|
+
padding?: string;
|
|
11
19
|
disabled?: boolean;
|
|
12
|
-
value?: string;
|
|
13
|
-
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
14
|
-
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
15
20
|
multiline?: boolean;
|
|
16
21
|
rows?: number;
|
|
17
22
|
required?: boolean;
|
|
18
23
|
requiredMessage?: string;
|
|
19
|
-
minLength?: number;
|
|
20
24
|
pattern?: RegExp | string;
|
|
21
25
|
patternMessage?: string;
|
|
22
26
|
validate?: (value: string) => string | null | undefined;
|
|
23
27
|
showErrorOn?: 'change' | 'blur';
|
|
28
|
+
minLength?: number;
|
|
24
29
|
maxLength?: number;
|
|
30
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
31
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
25
32
|
}
|
|
26
33
|
/**
|
|
27
|
-
*
|
|
34
|
+
* Componente de campo de texto com validação, baseado no TextField do Material UI.
|
|
35
|
+
* Permite personalização visual via `styled` e suporte a validações comuns
|
|
36
|
+
* (obrigatório, tamanho mínimo, regex) e validação customizada.
|
|
28
37
|
*
|
|
29
|
-
*
|
|
30
|
-
* - Estilização via `styled` (background, cor do texto, bordas, sombra).
|
|
31
|
-
* - Estados e acessibilidade do MUI (`label`, `disabled`, `helperText`, `error`).
|
|
32
|
-
* - Modo multilinha (`multiline`, `rows`).
|
|
33
|
-
* - Validações simples (obrigatório, tamanho mínimo, `pattern`) e validação customizada (`validate`).
|
|
34
|
-
* - Controle de exibição de erro durante a digitação ou após perder o foco (`showErrorOn`).
|
|
35
|
-
* - Limite máximo de caracteres via `maxLength` (aplicado ao input).
|
|
36
|
-
* - Suporte a um `onBlur` externo para lógicas adicionais (ex: busca de CEP).
|
|
38
|
+
* O erro pode ser exibido durante a digitação ou apenas após o campo perder o foco.
|
|
37
39
|
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* - `borderRadius?: string` — Raio de borda. **Default:** `"6px"`
|
|
44
|
-
* - `boxShadow?: string` — Sombra do campo. **Default:** `"none"`
|
|
45
|
-
* - `borderColor?: string` — Cor da borda do campo (estado base e hover). **Default:** `"#ccc"`
|
|
46
|
-
* - `placeholder?: string` — Placeholder exibido quando o campo está vazio. **Default:** `""`
|
|
47
|
-
* - `disabled?: boolean` — Desabilita o campo (estado disabled). **Default:** `false`
|
|
48
|
-
* - `value?: string` — Valor atual do campo (controlado). **Default:** `""`
|
|
49
|
-
* - `onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void` — Função chamada ao alterar o valor. **Default:** `undefined`
|
|
50
|
-
* - `onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void` — Função chamada ao perder o foco, após a lógica interna marcar o campo como “tocado”. **Default:** `undefined`
|
|
40
|
+
* @param {string} [id] Id do campo (replicado no input do MUI).
|
|
41
|
+
* @param {string} [label] Rótulo exibido acima do campo.
|
|
42
|
+
* @param {string} [placeholder] Placeholder exibido quando o campo está vazio.
|
|
43
|
+
* @param {string} [value=''] Valor atual do campo (modo controlado).
|
|
44
|
+
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
51
45
|
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
46
|
+
* @param {string} [background='#fff'] Cor de fundo do campo.
|
|
47
|
+
* @param {string} [backgroundDisabled='#E5E7EB'] Cor de fundo do campo quando o campo está desabilitado.
|
|
48
|
+
* @param {string} [colorText='#000'] Cor do texto e do label.
|
|
49
|
+
* @param {string} [colorFocused='#1976d2'] Cor da borda quando o campo está focado.
|
|
50
|
+
* @param {string} [colorDisabled='#9CA3AF'] Cor do texto e do label quando o campo está focado.
|
|
51
|
+
* @param {string} [borderColor='#ccc'] Cor da borda no estado normal e hover.
|
|
52
|
+
* @param {string} [borderRadius='0'] Raio da borda do campo.
|
|
53
|
+
* @param {string} [boxShadow='none'] Sombra aplicada ao campo.
|
|
54
|
+
* @param {string} [padding='4px 8px'] Espaçamento interno do input.
|
|
55
55
|
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
* - `requiredMessage?: string` — Mensagem quando obrigatório não atendido. **Default:** `"Campo obrigatório"`
|
|
59
|
-
* - `minLength?: number` — Tamanho mínimo (caracteres). **Default:** `undefined`
|
|
60
|
-
* - `pattern?: RegExp | string` — Expressão regular para validar o formato. **Default:** `undefined`
|
|
61
|
-
* - `patternMessage?: string` — Mensagem quando o `pattern` não é atendido. **Default:** `"Formato inválido"`
|
|
62
|
-
* - `validate?: (value: string) => string | null | undefined` — Validação customizada; retorne string com a mensagem de erro, ou `null/undefined` se válido. **Default:** `undefined`
|
|
63
|
-
* - `showErrorOn?: 'change' | 'blur'` — Quando exibir erros: durante a digitação (`"change"`) ou ao perder o foco (`"blur"`). **Default:** `"blur"`
|
|
56
|
+
* @param {boolean} [multiline=false] Define se o campo é multilinha.
|
|
57
|
+
* @param {number} [rows=3] Número de linhas quando `multiline` está ativo.
|
|
64
58
|
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
59
|
+
* @param {boolean} [required=false] Indica se o campo é obrigatório.
|
|
60
|
+
* @param {string} [requiredMessage='Campo obrigatório'] Mensagem exibida quando o campo obrigatório está vazio.
|
|
61
|
+
* @param {number} [minLength] Número mínimo de caracteres.
|
|
62
|
+
* @param {RegExp | string} [pattern] Expressão regular para validação do valor.
|
|
63
|
+
* @param {string} [patternMessage='Formato inválido'] Mensagem exibida quando o pattern não é atendido.
|
|
64
|
+
* @param {(value: string) => string | null | undefined} [validate] Função de validação customizada.
|
|
65
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento em que o erro deve ser exibido.
|
|
67
66
|
*
|
|
68
|
-
*
|
|
67
|
+
* @param {number} [maxLength] Limite máximo de caracteres permitido no input.
|
|
68
|
+
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] Callback disparado ao alterar o valor.
|
|
69
|
+
* @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
69
72
|
* ```tsx
|
|
70
73
|
* import React from 'react';
|
|
71
|
-
* import TextFieldValidate from '
|
|
72
|
-
*
|
|
73
|
-
* const CepExample: React.FC = () => {
|
|
74
|
-
* const [cep, setCep] = React.useState('');
|
|
75
|
-
*
|
|
76
|
-
* const handleCepBlur = async (event: React.FocusEvent<HTMLInputElement>) => {
|
|
77
|
-
* const raw = event.target.value || '';
|
|
78
|
-
* const onlyDigits = raw.replace(/\D/g, '');
|
|
74
|
+
* import TextFieldValidate from '@/components/TextFieldValidate';
|
|
79
75
|
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
* // const response = await fetch(`https://viacep.com.br/ws/${onlyDigits}/json/`);
|
|
83
|
-
* // const data = await response.json();
|
|
84
|
-
* // ...preencher outros campos do formulário...
|
|
85
|
-
* console.log('CEP para buscar:', onlyDigits);
|
|
86
|
-
* }
|
|
87
|
-
* };
|
|
76
|
+
* const Example = () => {
|
|
77
|
+
* const [email, setEmail] = React.useState('');
|
|
88
78
|
*
|
|
89
79
|
* return (
|
|
90
80
|
* <TextFieldValidate
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
* onChange={(e) => setCep(e.target.value)}
|
|
96
|
-
* onBlur={handleCepBlur}
|
|
97
|
-
* pattern={/^\d{5}-?\d{3}$/}
|
|
98
|
-
* patternMessage="CEP inválido"
|
|
81
|
+
* label="E-mail"
|
|
82
|
+
* placeholder="Digite seu e-mail"
|
|
83
|
+
* value={email}
|
|
84
|
+
* onChange={(e) => setEmail(e.target.value)}
|
|
99
85
|
* required
|
|
86
|
+
* pattern={/^[^\s@]+@[^\s@]+\.[^\s@]+$/}
|
|
87
|
+
* patternMessage="E-mail inválido"
|
|
100
88
|
* showErrorOn="blur"
|
|
101
|
-
* maxLength={
|
|
89
|
+
* maxLength={120}
|
|
90
|
+
* borderRadius="6px"
|
|
102
91
|
* />
|
|
103
92
|
* );
|
|
104
93
|
* };
|
|
@@ -3,30 +3,34 @@ import React from 'react';
|
|
|
3
3
|
import { styled } from '@mui/material/styles';
|
|
4
4
|
import TextField from '@mui/material/TextField';
|
|
5
5
|
const StyledTextField = styled(TextField, {
|
|
6
|
-
shouldForwardProp: (prop) => !['background', 'colorText', 'borderRadius', 'boxShadow', 'borderColor'].includes(prop),
|
|
7
|
-
})(({ background, colorText, borderRadius, boxShadow, borderColor }) => ({
|
|
8
|
-
background: background
|
|
9
|
-
color: colorText
|
|
10
|
-
borderRadius: borderRadius
|
|
11
|
-
boxShadow: boxShadow
|
|
6
|
+
shouldForwardProp: (prop) => !['background', 'colorText', 'borderRadius', 'boxShadow', 'borderColor', 'colorFocused', 'backgroundDisabled', 'colorDisabled', 'padding'].includes(prop),
|
|
7
|
+
})(({ background, backgroundDisabled, colorText, borderRadius, boxShadow, borderColor, colorFocused, colorDisabled, padding }) => ({
|
|
8
|
+
background: background,
|
|
9
|
+
color: colorText,
|
|
10
|
+
borderRadius: borderRadius,
|
|
11
|
+
boxShadow: boxShadow,
|
|
12
12
|
'& .MuiInputBase-root': {
|
|
13
|
-
color: colorText
|
|
14
|
-
background: background
|
|
15
|
-
borderRadius: borderRadius
|
|
16
|
-
boxShadow: boxShadow
|
|
17
|
-
padding:
|
|
13
|
+
color: colorText,
|
|
14
|
+
background: background,
|
|
15
|
+
borderRadius: borderRadius,
|
|
16
|
+
boxShadow: boxShadow,
|
|
17
|
+
padding: padding,
|
|
18
18
|
},
|
|
19
19
|
'& .MuiInputLabel-root': {
|
|
20
|
-
color: colorText
|
|
20
|
+
color: colorText,
|
|
21
21
|
},
|
|
22
22
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
23
|
-
borderColor: borderColor
|
|
23
|
+
borderColor: borderColor,
|
|
24
24
|
},
|
|
25
25
|
'&:hover .MuiOutlinedInput-notchedOutline': {
|
|
26
|
-
borderColor: borderColor
|
|
26
|
+
borderColor: borderColor,
|
|
27
27
|
},
|
|
28
28
|
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
29
|
-
borderColor:
|
|
29
|
+
borderColor: colorFocused,
|
|
30
|
+
},
|
|
31
|
+
"&.Mui-disabled": {
|
|
32
|
+
backgroundColor: backgroundDisabled,
|
|
33
|
+
color: colorDisabled,
|
|
30
34
|
},
|
|
31
35
|
}));
|
|
32
36
|
const computeError = (value, { required, requiredMessage, minLength, pattern, patternMessage, validate, }) => {
|
|
@@ -48,87 +52,69 @@ const computeError = (value, { required, requiredMessage, minLength, pattern, pa
|
|
|
48
52
|
return null;
|
|
49
53
|
};
|
|
50
54
|
/**
|
|
51
|
-
*
|
|
55
|
+
* Componente de campo de texto com validação, baseado no TextField do Material UI.
|
|
56
|
+
* Permite personalização visual via `styled` e suporte a validações comuns
|
|
57
|
+
* (obrigatório, tamanho mínimo, regex) e validação customizada.
|
|
58
|
+
*
|
|
59
|
+
* O erro pode ser exibido durante a digitação ou apenas após o campo perder o foco.
|
|
52
60
|
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
* - Controle de exibição de erro durante a digitação ou após perder o foco (`showErrorOn`).
|
|
59
|
-
* - Limite máximo de caracteres via `maxLength` (aplicado ao input).
|
|
60
|
-
* - Suporte a um `onBlur` externo para lógicas adicionais (ex: busca de CEP).
|
|
61
|
+
* @param {string} [id] Id do campo (replicado no input do MUI).
|
|
62
|
+
* @param {string} [label] Rótulo exibido acima do campo.
|
|
63
|
+
* @param {string} [placeholder] Placeholder exibido quando o campo está vazio.
|
|
64
|
+
* @param {string} [value=''] Valor atual do campo (modo controlado).
|
|
65
|
+
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
61
66
|
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
* - `disabled?: boolean` — Desabilita o campo (estado disabled). **Default:** `false`
|
|
72
|
-
* - `value?: string` — Valor atual do campo (controlado). **Default:** `""`
|
|
73
|
-
* - `onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void` — Função chamada ao alterar o valor. **Default:** `undefined`
|
|
74
|
-
* - `onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void` — Função chamada ao perder o foco, após a lógica interna marcar o campo como “tocado”. **Default:** `undefined`
|
|
67
|
+
* @param {string} [background='#fff'] Cor de fundo do campo.
|
|
68
|
+
* @param {string} [backgroundDisabled='#E5E7EB'] Cor de fundo do campo quando o campo está desabilitado.
|
|
69
|
+
* @param {string} [colorText='#000'] Cor do texto e do label.
|
|
70
|
+
* @param {string} [colorFocused='#1976d2'] Cor da borda quando o campo está focado.
|
|
71
|
+
* @param {string} [colorDisabled='#9CA3AF'] Cor do texto e do label quando o campo está focado.
|
|
72
|
+
* @param {string} [borderColor='#ccc'] Cor da borda no estado normal e hover.
|
|
73
|
+
* @param {string} [borderRadius='0'] Raio da borda do campo.
|
|
74
|
+
* @param {string} [boxShadow='none'] Sombra aplicada ao campo.
|
|
75
|
+
* @param {string} [padding='4px 8px'] Espaçamento interno do input.
|
|
75
76
|
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
* - `rows?: number` — Número de linhas quando `multiline` está ativo. **Default:** `3`
|
|
77
|
+
* @param {boolean} [multiline=false] Define se o campo é multilinha.
|
|
78
|
+
* @param {number} [rows=3] Número de linhas quando `multiline` está ativo.
|
|
79
79
|
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
* - `showErrorOn?: 'change' | 'blur'` — Quando exibir erros: durante a digitação (`"change"`) ou ao perder o foco (`"blur"`). **Default:** `"blur"`
|
|
80
|
+
* @param {boolean} [required=false] Indica se o campo é obrigatório.
|
|
81
|
+
* @param {string} [requiredMessage='Campo obrigatório'] Mensagem exibida quando o campo obrigatório está vazio.
|
|
82
|
+
* @param {number} [minLength] Número mínimo de caracteres.
|
|
83
|
+
* @param {RegExp | string} [pattern] Expressão regular para validação do valor.
|
|
84
|
+
* @param {string} [patternMessage='Formato inválido'] Mensagem exibida quando o pattern não é atendido.
|
|
85
|
+
* @param {(value: string) => string | null | undefined} [validate] Função de validação customizada.
|
|
86
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento em que o erro deve ser exibido.
|
|
88
87
|
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
88
|
+
* @param {number} [maxLength] Limite máximo de caracteres permitido no input.
|
|
89
|
+
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] Callback disparado ao alterar o valor.
|
|
90
|
+
* @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
91
91
|
*
|
|
92
|
-
*
|
|
92
|
+
* @example
|
|
93
93
|
* ```tsx
|
|
94
94
|
* import React from 'react';
|
|
95
|
-
* import TextFieldValidate from '
|
|
96
|
-
*
|
|
97
|
-
* const CepExample: React.FC = () => {
|
|
98
|
-
* const [cep, setCep] = React.useState('');
|
|
99
|
-
*
|
|
100
|
-
* const handleCepBlur = async (event: React.FocusEvent<HTMLInputElement>) => {
|
|
101
|
-
* const raw = event.target.value || '';
|
|
102
|
-
* const onlyDigits = raw.replace(/\D/g, '');
|
|
95
|
+
* import TextFieldValidate from '@/components/TextFieldValidate';
|
|
103
96
|
*
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
* // const response = await fetch(`https://viacep.com.br/ws/${onlyDigits}/json/`);
|
|
107
|
-
* // const data = await response.json();
|
|
108
|
-
* // ...preencher outros campos do formulário...
|
|
109
|
-
* console.log('CEP para buscar:', onlyDigits);
|
|
110
|
-
* }
|
|
111
|
-
* };
|
|
97
|
+
* const Example = () => {
|
|
98
|
+
* const [email, setEmail] = React.useState('');
|
|
112
99
|
*
|
|
113
100
|
* return (
|
|
114
101
|
* <TextFieldValidate
|
|
115
|
-
*
|
|
116
|
-
*
|
|
117
|
-
*
|
|
118
|
-
*
|
|
119
|
-
* onChange={(e) => setCep(e.target.value)}
|
|
120
|
-
* onBlur={handleCepBlur}
|
|
121
|
-
* pattern={/^\d{5}-?\d{3}$/}
|
|
122
|
-
* patternMessage="CEP inválido"
|
|
102
|
+
* label="E-mail"
|
|
103
|
+
* placeholder="Digite seu e-mail"
|
|
104
|
+
* value={email}
|
|
105
|
+
* onChange={(e) => setEmail(e.target.value)}
|
|
123
106
|
* required
|
|
107
|
+
* pattern={/^[^\s@]+@[^\s@]+\.[^\s@]+$/}
|
|
108
|
+
* patternMessage="E-mail inválido"
|
|
124
109
|
* showErrorOn="blur"
|
|
125
|
-
* maxLength={
|
|
110
|
+
* maxLength={120}
|
|
111
|
+
* borderRadius="6px"
|
|
126
112
|
* />
|
|
127
113
|
* );
|
|
128
114
|
* };
|
|
129
115
|
* ```
|
|
130
116
|
*/
|
|
131
|
-
const TextFieldValidate = ({ id, label, background, colorText = '#000', borderRadius, boxShadow, borderColor, placeholder, disabled = false, value = '', onChange, onBlur, multiline = false, rows = 3, required = false, requiredMessage = 'Campo obrigatório', minLength, pattern, patternMessage = 'Formato inválido', validate, showErrorOn = 'blur', maxLength, }) => {
|
|
117
|
+
const TextFieldValidate = ({ id, label, background = '#fff', backgroundDisabled = "#E5E7EB", colorText = '#000', colorFocused = '#1976d2', colorDisabled = "#9CA3AF", borderRadius = '0', boxShadow = 'none', borderColor = '#ccc', placeholder, disabled = false, value = '', onChange, onBlur, multiline = false, rows = 3, required = false, requiredMessage = 'Campo obrigatório', minLength, pattern, patternMessage = 'Formato inválido', validate, showErrorOn = 'blur', maxLength, padding = '4px 8px' }) => {
|
|
132
118
|
const [touched, setTouched] = React.useState(false);
|
|
133
119
|
const errorMessage = React.useMemo(() => {
|
|
134
120
|
if (showErrorOn === 'change') {
|
|
@@ -170,7 +156,7 @@ const TextFieldValidate = ({ id, label, background, colorText = '#000', borderRa
|
|
|
170
156
|
onBlur(event);
|
|
171
157
|
}
|
|
172
158
|
};
|
|
173
|
-
return (_jsx(StyledTextField, { id: id, label: label, placeholder: placeholder, value: value, onChange: onChange, onBlur: handleBlur, background: background, colorText: colorText, borderRadius: borderRadius, boxShadow: boxShadow, borderColor: borderColor, disabled: disabled, multiline: multiline, required: required, rows: multiline ? rows : undefined, fullWidth: true, error: Boolean(errorMessage), helperText: errorMessage || ' ', slotProps: {
|
|
159
|
+
return (_jsx(StyledTextField, { id: id, label: label, placeholder: placeholder, value: value, onChange: onChange, onBlur: handleBlur, background: background, backgroundDisabled: backgroundDisabled, colorText: colorText, colorFocused: colorFocused, colorDisabled: colorDisabled, borderRadius: borderRadius, boxShadow: boxShadow, borderColor: borderColor, padding: padding, disabled: disabled, multiline: multiline, required: required, rows: multiline ? rows : undefined, fullWidth: true, error: Boolean(errorMessage), helperText: errorMessage || ' ', slotProps: {
|
|
174
160
|
input: {
|
|
175
161
|
inputProps: typeof maxLength === 'number' ? { maxLength } : undefined,
|
|
176
162
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldValidate.js","sourceRoot":"","sources":["../../src/components/TextFieldValidate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,SAAS,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"TextFieldValidate.js","sourceRoot":"","sources":["../../src/components/TextFieldValidate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
|
+
import { TypographyVariant, SvgIconProps } from '@mui/material';
|
|
3
|
+
import { ColorProps } from '@/types/ColorProps';
|
|
4
|
+
import { BorderProps } from '@/types/BorderProps';
|
|
5
|
+
import { LayoutProps } from '@/types/LayoutProps';
|
|
6
|
+
import { TextProps } from '@/types/TextProps';
|
|
7
|
+
interface GoogleButtonProps extends ColorProps, BorderProps, LayoutProps, TextProps {
|
|
8
|
+
icon: () => ReactElement<HTMLImageElement> | ReactElement<SvgIconProps>;
|
|
9
|
+
text: string;
|
|
10
|
+
variant?: TypographyVariant;
|
|
11
|
+
endpoint: string;
|
|
12
|
+
messageError?: string;
|
|
13
|
+
errorColor?: string;
|
|
14
|
+
background?: string;
|
|
15
|
+
width?: string;
|
|
16
|
+
height?: string;
|
|
17
|
+
padding?: string;
|
|
18
|
+
margin?: string;
|
|
19
|
+
border?: string;
|
|
20
|
+
borderRadius?: string;
|
|
21
|
+
boxShadow?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Componente de botão que redireciona o usuário para um endpoint externo
|
|
25
|
+
* (ex: autenticação com Google). Durante o clique, o botão entra em estado
|
|
26
|
+
* de loading e, caso ocorra algum erro, exibe uma mensagem abaixo do botão.
|
|
27
|
+
*
|
|
28
|
+
* @param {ReactElement<HTMLImageElement> | ReactElement<SvgIconProps>} icon Icone exibido dentro do botão.
|
|
29
|
+
* @param {string} text Texto exibido dentro do botão.
|
|
30
|
+
* @param {TypographyVariant} [variant='body1'] Variante do Typography usada no texto do botão.
|
|
31
|
+
* @param {string} endpoint URL para a qual o usuário será redirecionado ao clicar no botão.
|
|
32
|
+
* @param {string} [messageError='Ocorreu um erro ao processar sua solicitação.'] Mensagem exibida em caso de erro.
|
|
33
|
+
* @param {string} [errorColor='#d32f2f'] Cor do texto da mensagem de erro.
|
|
34
|
+
* @param {string} [width='auto'] Largura do botão.
|
|
35
|
+
* @param {string} [height='auto'] Altura do botão.
|
|
36
|
+
* @param {string} [padding='8px 24px'] Espaçamento interno do botão.
|
|
37
|
+
* @param {string} [margin='0'] Margem externa do botão.
|
|
38
|
+
* @param {string} [background='transparent'] Cor de fundo do botão.
|
|
39
|
+
* @param {string} [border='none'] Borda do botão.
|
|
40
|
+
* @param {string | number} [borderRadius='8px'] Raio da borda do botão.
|
|
41
|
+
* @param {string} [boxShadow='none'] Sombra aplicada ao botão.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* import { GoogleButton } from '@/components/GoogleButton';
|
|
46
|
+
*
|
|
47
|
+
* const Example = () => {
|
|
48
|
+
* return (
|
|
49
|
+
* <GoogleButton
|
|
50
|
+
* text="Continuar com Google"
|
|
51
|
+
* endpoint="/api/auth/google"
|
|
52
|
+
* width="100%"
|
|
53
|
+
* height="40px"
|
|
54
|
+
* background="transparent"
|
|
55
|
+
* border="1px solid #ccc"
|
|
56
|
+
* borderRadius="6px"
|
|
57
|
+
* boxShadow="0 2px 6px rgba(0,0,0,0.1)"
|
|
58
|
+
* messageError="Falha ao autenticar com o Google."
|
|
59
|
+
* errorColor="#d32f2f"
|
|
60
|
+
* />
|
|
61
|
+
* );
|
|
62
|
+
* };
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
declare const GoogleButton: React.FC<GoogleButtonProps>;
|
|
66
|
+
export default GoogleButton;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Button, styled, Typography, Box } from '@mui/material';
|
|
4
|
+
const ButtonFormStyled = styled(Button, {
|
|
5
|
+
shouldForwardProp: (prop) => ![
|
|
6
|
+
'width',
|
|
7
|
+
'height',
|
|
8
|
+
'padding',
|
|
9
|
+
'margin',
|
|
10
|
+
'background',
|
|
11
|
+
'border',
|
|
12
|
+
'borderRadius',
|
|
13
|
+
'boxShadow',
|
|
14
|
+
].includes(prop),
|
|
15
|
+
})(({ width, height, padding, margin, background, border, borderRadius, boxShadow, }) => ({
|
|
16
|
+
// Layout
|
|
17
|
+
width: width,
|
|
18
|
+
height: height,
|
|
19
|
+
padding: padding,
|
|
20
|
+
margin: margin,
|
|
21
|
+
// Visual
|
|
22
|
+
background: background,
|
|
23
|
+
border: border,
|
|
24
|
+
borderRadius: borderRadius,
|
|
25
|
+
boxShadow: boxShadow,
|
|
26
|
+
textTransform: 'none',
|
|
27
|
+
cursor: 'pointer',
|
|
28
|
+
'&:hover': {
|
|
29
|
+
opacity: 0.9,
|
|
30
|
+
boxShadow: boxShadow || 'none',
|
|
31
|
+
},
|
|
32
|
+
'&:disabled': {
|
|
33
|
+
opacity: 0.6,
|
|
34
|
+
cursor: 'not-allowed',
|
|
35
|
+
},
|
|
36
|
+
}));
|
|
37
|
+
const AreaTexto = styled('div')(() => ({
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'column',
|
|
40
|
+
alignItems: 'flex-start',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
width: '100%',
|
|
43
|
+
gap: '16px',
|
|
44
|
+
textAlign: 'left',
|
|
45
|
+
padding: '0',
|
|
46
|
+
margin: '0',
|
|
47
|
+
}));
|
|
48
|
+
/**
|
|
49
|
+
* Componente de botão que redireciona o usuário para um endpoint externo
|
|
50
|
+
* (ex: autenticação com Google). Durante o clique, o botão entra em estado
|
|
51
|
+
* de loading e, caso ocorra algum erro, exibe uma mensagem abaixo do botão.
|
|
52
|
+
*
|
|
53
|
+
* @param {ReactElement<HTMLImageElement> | ReactElement<SvgIconProps>} icon Icone exibido dentro do botão.
|
|
54
|
+
* @param {string} text Texto exibido dentro do botão.
|
|
55
|
+
* @param {TypographyVariant} [variant='body1'] Variante do Typography usada no texto do botão.
|
|
56
|
+
* @param {string} endpoint URL para a qual o usuário será redirecionado ao clicar no botão.
|
|
57
|
+
* @param {string} [messageError='Ocorreu um erro ao processar sua solicitação.'] Mensagem exibida em caso de erro.
|
|
58
|
+
* @param {string} [errorColor='#d32f2f'] Cor do texto da mensagem de erro.
|
|
59
|
+
* @param {string} [width='auto'] Largura do botão.
|
|
60
|
+
* @param {string} [height='auto'] Altura do botão.
|
|
61
|
+
* @param {string} [padding='8px 24px'] Espaçamento interno do botão.
|
|
62
|
+
* @param {string} [margin='0'] Margem externa do botão.
|
|
63
|
+
* @param {string} [background='transparent'] Cor de fundo do botão.
|
|
64
|
+
* @param {string} [border='none'] Borda do botão.
|
|
65
|
+
* @param {string | number} [borderRadius='8px'] Raio da borda do botão.
|
|
66
|
+
* @param {string} [boxShadow='none'] Sombra aplicada ao botão.
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```tsx
|
|
70
|
+
* import { GoogleButton } from '@/components/GoogleButton';
|
|
71
|
+
*
|
|
72
|
+
* const Example = () => {
|
|
73
|
+
* return (
|
|
74
|
+
* <GoogleButton
|
|
75
|
+
* text="Continuar com Google"
|
|
76
|
+
* endpoint="/api/auth/google"
|
|
77
|
+
* width="100%"
|
|
78
|
+
* height="40px"
|
|
79
|
+
* background="transparent"
|
|
80
|
+
* border="1px solid #ccc"
|
|
81
|
+
* borderRadius="6px"
|
|
82
|
+
* boxShadow="0 2px 6px rgba(0,0,0,0.1)"
|
|
83
|
+
* messageError="Falha ao autenticar com o Google."
|
|
84
|
+
* errorColor="#d32f2f"
|
|
85
|
+
* />
|
|
86
|
+
* );
|
|
87
|
+
* };
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
const GoogleButton = ({ icon, text, variant = 'body1', endpoint, messageError = 'Ocorreu um erro ao processar sua solicitação.', errorColor = '#d32f2f', boxShadow = 'none', width = 'auto', height = 'auto', padding = '8px 24px', margin = '0', background = "transparent", border = 'none', borderRadius, }) => {
|
|
91
|
+
const [loading, setLoading] = React.useState(false);
|
|
92
|
+
const [errorMsg, setErrorMsg] = React.useState(null);
|
|
93
|
+
const handleClick = async () => {
|
|
94
|
+
setErrorMsg(null);
|
|
95
|
+
setLoading(true);
|
|
96
|
+
try {
|
|
97
|
+
window.location.href = endpoint;
|
|
98
|
+
}
|
|
99
|
+
catch (e) {
|
|
100
|
+
setErrorMsg(messageError);
|
|
101
|
+
}
|
|
102
|
+
finally {
|
|
103
|
+
setLoading(false);
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
return (_jsxs(Box, { children: [_jsx(ButtonFormStyled, { onClick: handleClick, disabled: loading, width: width, height: height, padding: padding, margin: margin, background: background, border: border, borderRadius: borderRadius, boxShadow: boxShadow, children: loading
|
|
107
|
+
? 'Carregando...'
|
|
108
|
+
: _jsxs(AreaTexto, { children: [icon(), _jsx(Typography, { variant: variant, children: text })] }) }), errorMsg && (_jsx(Typography, { role: "alert", variant: "body2", sx: { mt: 1 }, color: errorColor, children: errorMsg }))] }));
|
|
109
|
+
};
|
|
110
|
+
GoogleButton.displayName = 'GoogleButton';
|
|
111
|
+
export default GoogleButton;
|
|
112
|
+
//# sourceMappingURL=GoogleButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GoogleButton.js","sourceRoot":"","sources":["../../../src/components/login/GoogleButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { Box, Divider, IconButton, InputAdornment, Typography } from '@mui/material';
|
|
6
|
-
import { ButtonFormStyled, LinkFormStyled, TextFieldStyled } from './FormStyled';
|
|
7
6
|
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
|
8
7
|
import VisibilityIcon from '@mui/icons-material/Visibility';
|
|
9
8
|
import GoogleIcon from '@mui/icons-material/Google';
|
|
9
|
+
import { ButtonFormStyled, LinkFormStyled, TextFieldStyled } from '../FormStyled';
|
|
10
10
|
const FormContainer = styled('div')(() => ({
|
|
11
11
|
display: 'flex',
|
|
12
12
|
flexDirection: 'column',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoginForm.js","sourceRoot":"","sources":["../../../src/components/login/LoginForm.tsx"],"names":[],"mappings":"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"}
|