@pipelinesolucoes/form 1.2.0-beta.3 → 1.2.0-beta.30
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/README.md +16 -2
- package/dist/components/ChipList.d.ts +9 -0
- package/dist/components/ChipList.js +60 -0
- package/dist/components/ChipList.js.map +1 -0
- package/dist/components/SelectField.d.ts +73 -0
- package/dist/components/SelectField.js +142 -0
- package/dist/components/SelectField.js.map +1 -0
- package/dist/components/TextFieldBirthDateWithAge.d.ts +83 -0
- package/dist/components/TextFieldBirthDateWithAge.js +259 -0
- package/dist/components/TextFieldBirthDateWithAge.js.map +1 -0
- package/dist/components/TextFieldCPFValidate.d.ts +37 -0
- package/dist/components/TextFieldCPFValidate.js +147 -0
- package/dist/components/TextFieldCPFValidate.js.map +1 -0
- package/dist/components/TextFieldNumberValidate.d.ts +110 -0
- package/dist/components/TextFieldNumberValidate.js +196 -0
- package/dist/components/TextFieldNumberValidate.js.map +1 -0
- package/dist/components/TextFieldPassword.d.ts +141 -53
- package/dist/components/TextFieldPassword.js +161 -98
- package/dist/components/TextFieldPassword.js.map +1 -1
- package/dist/components/TextFieldValidate.d.ts +89 -43
- package/dist/components/TextFieldValidate.js +103 -94
- package/dist/components/TextFieldValidate.js.map +1 -1
- package/dist/components/login/FormLogin.d.ts +129 -6
- package/dist/components/login/FormLogin.js +155 -29
- package/dist/components/login/FormLogin.js.map +1 -1
- package/dist/components/login/FormPasswordRecovery.d.ts +97 -89
- package/dist/components/login/FormPasswordRecovery.js +131 -124
- package/dist/components/login/FormPasswordRecovery.js.map +1 -1
- package/dist/components/login/FormSignUp.d.ts +130 -11
- package/dist/components/login/FormSignUp.js +154 -29
- package/dist/components/login/FormSignUp.js.map +1 -1
- package/dist/components/login/StyleLogin.d.ts +7 -0
- package/dist/components/login/StyleLogin.js +16 -1
- package/dist/components/login/StyleLogin.js.map +1 -1
- package/dist/components/recaptcha/RecaptchaForm.d.ts +8 -14
- package/dist/components/recaptcha/RecaptchaForm.js +30 -25
- package/dist/components/recaptcha/RecaptchaForm.js.map +1 -1
- package/dist/constant.d.ts +11 -0
- package/dist/constant.js +12 -0
- package/dist/constant.js.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -1
- package/dist/{components/style → style}/ButtonFormStyled.d.ts +1 -1
- package/dist/{components/style → style}/ButtonFormStyled.js +6 -5
- package/dist/style/ButtonFormStyled.js.map +1 -0
- package/dist/{components/style → style}/LinkFormStyled.d.ts +1 -1
- package/dist/{components/style → style}/LinkFormStyled.js +5 -4
- package/dist/style/LinkFormStyled.js.map +1 -0
- package/dist/style/TextFieldStyle.d.ts +19 -0
- package/dist/style/TextFieldStyle.js +61 -0
- package/dist/style/TextFieldStyle.js.map +1 -0
- package/dist/theme.js +46 -18
- package/dist/theme.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/FieldProps.d.ts +1 -0
- package/dist/utils/formatCEP.d.ts +20 -0
- package/dist/utils/formatCEP.js +35 -0
- package/dist/utils/formatCEP.js.map +1 -0
- package/dist/utils/formatCpf.d.ts +14 -0
- package/dist/utils/formatCpf.js +35 -0
- package/dist/utils/formatCpf.js.map +1 -0
- package/dist/utils/validateCpf.d.ts +40 -0
- package/dist/utils/validateCpf.js +67 -0
- package/dist/utils/validateCpf.js.map +1 -0
- package/dist/utils/validateEmail.js +1 -1
- package/dist/utils/validateEmail.js.map +1 -1
- package/package.json +4 -2
- package/dist/components/recaptcha/FormStyled.d.ts +0 -30
- package/dist/components/recaptcha/FormStyled.js +0 -67
- package/dist/components/recaptcha/FormStyled.js.map +0 -1
- package/dist/components/style/ButtonFormStyled.js.map +0 -1
- package/dist/components/style/LinkFormStyled.js.map +0 -1
|
@@ -1,69 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
shouldForwardProp: (prop) => ![
|
|
7
|
-
"background",
|
|
8
|
-
"borderRadius",
|
|
9
|
-
"boxShadow",
|
|
10
|
-
"borderColor",
|
|
11
|
-
"colorFocused",
|
|
12
|
-
"backgroundDisabled",
|
|
13
|
-
"colorDisabled",
|
|
14
|
-
"padding",
|
|
15
|
-
"colorText",
|
|
16
|
-
].includes(prop),
|
|
17
|
-
})(({ theme, background, backgroundDisabled, colorText, borderRadius, boxShadow, borderColor, colorFocused, colorDisabled, padding, margin }) => {
|
|
18
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
19
|
-
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
20
|
-
// props -> tokens -> fallback
|
|
21
|
-
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : '#fff';
|
|
22
|
-
const bgDisabled = (_d = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _d !== void 0 ? _d : "#E5E7EB";
|
|
23
|
-
const txt = (_e = colorText !== null && colorText !== void 0 ? colorText : field === null || field === void 0 ? void 0 : field.color) !== null && _e !== void 0 ? _e : '#000';
|
|
24
|
-
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : "#9CA3AF";
|
|
25
|
-
const br = (_g = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _g !== void 0 ? _g : "0";
|
|
26
|
-
const sh = (_h = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _h !== void 0 ? _h : "none";
|
|
27
|
-
const bd = (_j = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _j !== void 0 ? _j : '#ccc';
|
|
28
|
-
const bdFocused = (_k = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _k !== void 0 ? _k : '#1976d2';
|
|
29
|
-
const pad = (_l = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _l !== void 0 ? _l : '4px 8px'; // pode deixar undefined se quiser respeitar o default do MUI
|
|
30
|
-
const mg = (_m = margin !== null && margin !== void 0 ? margin : field === null || field === void 0 ? void 0 : field.margin) !== null && _m !== void 0 ? _m : '0';
|
|
31
|
-
return {
|
|
32
|
-
// (opcional) pode manter, mas o mais importante é estilizar os slots internos:
|
|
33
|
-
background: bg,
|
|
34
|
-
borderRadius: br,
|
|
35
|
-
boxShadow: sh,
|
|
36
|
-
"& .MuiInputBase-root": {
|
|
37
|
-
color: txt,
|
|
38
|
-
},
|
|
39
|
-
"& .MuiOutlinedInput-root": Object.assign(Object.assign({ borderRadius: br, boxShadow: sh }, (pad ? { padding: pad } : {})), { "& .MuiOutlinedInput-notchedOutline": {
|
|
40
|
-
borderColor: bd,
|
|
41
|
-
}, "&:hover .MuiOutlinedInput-notchedOutline": {
|
|
42
|
-
borderColor: bd,
|
|
43
|
-
}, "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
44
|
-
borderColor: bdFocused,
|
|
45
|
-
}, "&.Mui-disabled": {
|
|
46
|
-
background: bgDisabled,
|
|
47
|
-
color: txtDisabled,
|
|
48
|
-
"& .MuiOutlinedInput-notchedOutline": {
|
|
49
|
-
borderColor: bd,
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
// texto digitado quando disabled
|
|
53
|
-
"& input.Mui-disabled": {
|
|
54
|
-
WebkitTextFillColor: txtDisabled,
|
|
55
|
-
} }),
|
|
56
|
-
"& .MuiInputLabel-root": {
|
|
57
|
-
color: txt,
|
|
58
|
-
},
|
|
59
|
-
"& .MuiInputLabel-root.Mui-focused": {
|
|
60
|
-
color: bdFocused,
|
|
61
|
-
},
|
|
62
|
-
"& .MuiInputLabel-root.Mui-disabled": {
|
|
63
|
-
color: txtDisabled,
|
|
64
|
-
},
|
|
65
|
-
};
|
|
66
|
-
});
|
|
3
|
+
import { useTheme } from '@mui/material/styles';
|
|
4
|
+
import { TextFieldStyled } from '../style/TextFieldStyle';
|
|
5
|
+
import { fbbackground, fbbackgroundDisabled, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbcolorDisabled, fbcolorFocused, fbheigth, fbmargin, fbpadding } from '../constant';
|
|
67
6
|
const computeError = (value, { required, requiredMessage, minLength, pattern, patternMessage, validate, }) => {
|
|
68
7
|
const v = value !== null && value !== void 0 ? value : '';
|
|
69
8
|
if (required && v.trim().length === 0)
|
|
@@ -83,48 +22,101 @@ const computeError = (value, { required, requiredMessage, minLength, pattern, pa
|
|
|
83
22
|
return null;
|
|
84
23
|
};
|
|
85
24
|
/**
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
25
|
+
* Campo de texto com suporte a validações comuns e customizadas, construído
|
|
26
|
+
* sobre o TextField do Material UI e estilizado via Design System da Pipeline.
|
|
27
|
+
*
|
|
28
|
+
* Funcionalidades principais:
|
|
29
|
+
* - Suporte a modo controlado (`value`)
|
|
30
|
+
* - Validações nativas (obrigatório, tamanho mínimo, regex)
|
|
31
|
+
* - Validação customizada via função
|
|
32
|
+
* - Controle de momento de exibição do erro (`change` ou `blur`)
|
|
33
|
+
* - Suporte a campo multilinha
|
|
34
|
+
* - Customização visual via props e tokens de theme
|
|
89
35
|
*
|
|
90
|
-
*
|
|
36
|
+
* Tokens de estilo (ordem de prioridade):
|
|
37
|
+
* - `prop` do componente
|
|
38
|
+
* - `theme.pipelinesolucoes.forms.field`
|
|
39
|
+
* - Fallback interno (constantes `fb*`)
|
|
40
|
+
*
|
|
41
|
+
* Tipografia:
|
|
42
|
+
* - Suporte à tipografia do Material UI via `textVariant`
|
|
43
|
+
* - Fallback para `theme.pipelinesolucoes.forms.field.typography`
|
|
44
|
+
* - Fallback final para `theme.typography.body1`
|
|
45
|
+
*
|
|
46
|
+
* @param {string} [id] Identificador do campo, repassado ao input do Material UI.
|
|
47
|
+
* @param {string} [label] Texto do rótulo exibido acima do campo.
|
|
48
|
+
* @param {string} [placeholder] Texto exibido quando o campo está vazio.
|
|
49
|
+
* @param {string} [value] Valor atual do campo (modo controlado).
|
|
91
50
|
*
|
|
92
|
-
* @param {string} [id] Id do campo (replicado no input do MUI).
|
|
93
|
-
* @param {string} [label] Rótulo exibido acima do campo.
|
|
94
|
-
* @param {string} [placeholder] Placeholder exibido quando o campo está vazio.
|
|
95
|
-
* @param {string} [value=''] Valor atual do campo (modo controlado).
|
|
96
51
|
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
97
52
|
*
|
|
98
|
-
* @param {
|
|
99
|
-
* @param {
|
|
100
|
-
*
|
|
101
|
-
* @param {
|
|
102
|
-
* @param {
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
*
|
|
53
|
+
* @param {number} [minLength] Número mínimo de caracteres permitidos.
|
|
54
|
+
* @param {number} [maxLength] Número máximo de caracteres permitidos.
|
|
55
|
+
*
|
|
56
|
+
* @param {boolean} [multiline=false] Define se o campo aceita múltiplas linhas.
|
|
57
|
+
* @param {number} [rows=3] Quantidade de linhas visíveis quando `multiline` está ativo.
|
|
58
|
+
*
|
|
59
|
+
*
|
|
60
|
+
* ### Estilo / Aparência
|
|
61
|
+
*
|
|
62
|
+
* @param {import('@mui/material/styles').TypographyVariant} [textVariant] Variante tipográfica do Material UI aplicada ao texto e placeholder.
|
|
63
|
+
*
|
|
64
|
+
* @param {string} [background]
|
|
65
|
+
* Cor de fundo do campo.
|
|
66
|
+
* Ordem: `background` → `theme.pipelinesolucoes.forms.field.background` → `#fff`.
|
|
67
|
+
*
|
|
68
|
+
* @param {string} [backgroundDisabled]
|
|
69
|
+
* Cor de fundo do campo quando desabilitado.
|
|
70
|
+
* Ordem: `backgroundDisabled` → `theme.pipelinesolucoes.forms.field.backgroundDisabled` → `#E5E7EB`.
|
|
107
71
|
*
|
|
108
|
-
* @param {
|
|
109
|
-
*
|
|
72
|
+
* @param {string} [color]
|
|
73
|
+
* Cor do texto do campo (texto digitado e label).
|
|
74
|
+
* Ordem: `color` → `theme.pipelinesolucoes.forms.field.color` → `#000`.
|
|
75
|
+
*
|
|
76
|
+
* @param {string} [colorFocused]
|
|
77
|
+
* Cor aplicada ao estado focado (usada como cor de borda no focus).
|
|
78
|
+
* Ordem: `colorFocused` → `theme.pipelinesolucoes.forms.field.colorFocused` → `#1976d2`.
|
|
79
|
+
*
|
|
80
|
+
* @param {string} [colorDisabled]
|
|
81
|
+
* Cor do texto do campo quando desabilitado.
|
|
82
|
+
* Ordem: `colorDisabled` → `theme.pipelinesolucoes.forms.field.colorDisabled` → `#9CA3AF`.
|
|
83
|
+
*
|
|
84
|
+
* @param {string} [borderRadius]
|
|
85
|
+
* Raio da borda do campo.
|
|
86
|
+
* Ordem: `borderRadius` → `theme.pipelinesolucoes.forms.field.borderRadius` → `"0"`.
|
|
87
|
+
*
|
|
88
|
+
* @param {string} [boxShadow]
|
|
89
|
+
* Sombra do campo.
|
|
90
|
+
* Ordem: `boxShadow` → `theme.pipelinesolucoes.forms.field.boxShadow` → `"none"`.
|
|
91
|
+
*
|
|
92
|
+
* @param {string} [borderColor]
|
|
93
|
+
* Cor da borda do campo (estado padrão/hover).
|
|
94
|
+
* Ordem: `borderColor` → `theme.pipelinesolucoes.forms.field.borderColor` → `#ccc`.
|
|
95
|
+
*
|
|
96
|
+
* @param {string} [padding]
|
|
97
|
+
* Espaçamento interno do input (aplicado no texto e textarea).
|
|
98
|
+
* Ordem: `padding` → `theme.pipelinesolucoes.forms.field.padding` → `"4px 8px"`.
|
|
99
|
+
*
|
|
100
|
+
* ---
|
|
101
|
+
* ### Validação
|
|
110
102
|
*
|
|
111
103
|
* @param {boolean} [required=false] Indica se o campo é obrigatório.
|
|
112
|
-
* @param {string} [requiredMessage
|
|
113
|
-
* @param {
|
|
114
|
-
* @param {
|
|
115
|
-
* @param {
|
|
104
|
+
* @param {string} [requiredMessage] Mensagem exibida quando o campo obrigatório está vazio.
|
|
105
|
+
* @param {RegExp | string} [pattern] Expressão regular utilizada para validação do valor.
|
|
106
|
+
* @param {string} [patternMessage] Mensagem exibida quando o valor não atende ao pattern.
|
|
107
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Define quando o erro será exibido.
|
|
116
108
|
* @param {(value: string) => string | null | undefined} [validate] Função de validação customizada.
|
|
117
|
-
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento em que o erro deve ser exibido.
|
|
118
109
|
*
|
|
119
|
-
*
|
|
110
|
+
* ---
|
|
111
|
+
* ### Eventos
|
|
112
|
+
*
|
|
120
113
|
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] Callback disparado ao alterar o valor.
|
|
121
114
|
* @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
122
115
|
*
|
|
116
|
+
* ---
|
|
117
|
+
*
|
|
123
118
|
* @example
|
|
124
119
|
* ```tsx
|
|
125
|
-
* import React from 'react';
|
|
126
|
-
* import TextFieldValidate from '@/components/TextFieldValidate';
|
|
127
|
-
*
|
|
128
120
|
* const Example = () => {
|
|
129
121
|
* const [email, setEmail] = React.useState('');
|
|
130
122
|
*
|
|
@@ -140,12 +132,14 @@ const computeError = (value, { required, requiredMessage, minLength, pattern, pa
|
|
|
140
132
|
* showErrorOn="blur"
|
|
141
133
|
* maxLength={120}
|
|
142
134
|
* borderRadius="6px"
|
|
135
|
+
* textVariant="subtitle2"
|
|
143
136
|
* />
|
|
144
137
|
* );
|
|
145
138
|
* };
|
|
146
139
|
* ```
|
|
147
140
|
*/
|
|
148
|
-
const TextFieldValidate = ({ id, label, background, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, placeholder, disabled = false, value = '', onChange, onBlur, multiline = false, rows = 3, required = false, requiredMessage = '
|
|
141
|
+
const TextFieldValidate = ({ id, label, background, backgroundFocused, backgroundDisabled, color, colorFocused, colorDisabled, 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, padding, textVariant, height, margin }) => {
|
|
142
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
149
143
|
const [touched, setTouched] = React.useState(false);
|
|
150
144
|
const errorMessage = React.useMemo(() => {
|
|
151
145
|
if (showErrorOn === 'change') {
|
|
@@ -187,7 +181,22 @@ const TextFieldValidate = ({ id, label, background, backgroundDisabled, color, c
|
|
|
187
181
|
onBlur(event);
|
|
188
182
|
}
|
|
189
183
|
};
|
|
190
|
-
|
|
184
|
+
const theme = useTheme();
|
|
185
|
+
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
186
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : fbbackground;
|
|
187
|
+
const bgFocused = (_d = backgroundFocused !== null && backgroundFocused !== void 0 ? backgroundFocused : field === null || field === void 0 ? void 0 : field.backgroundFocused) !== null && _d !== void 0 ? _d : bg;
|
|
188
|
+
const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : fbbackgroundDisabled;
|
|
189
|
+
const txt = (_f = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _f !== void 0 ? _f : fbcolor;
|
|
190
|
+
const txtDisabled = (_g = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _g !== void 0 ? _g : fbcolorDisabled;
|
|
191
|
+
const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : fbborderRadius;
|
|
192
|
+
const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : fbboxShadow;
|
|
193
|
+
const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : fbborderColor;
|
|
194
|
+
const bdFocused = (_l = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _l !== void 0 ? _l : fbcolorFocused;
|
|
195
|
+
const pad = (_m = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _m !== void 0 ? _m : fbpadding;
|
|
196
|
+
const hg = multiline ? undefined : ((_o = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _o !== void 0 ? _o : fbheigth);
|
|
197
|
+
const mg = (_p = margin !== null && margin !== void 0 ? margin : field === null || field === void 0 ? void 0 : field.margin) !== null && _p !== void 0 ? _p : fbmargin;
|
|
198
|
+
const typo = (_r = (_q = (textVariant && theme.typography[textVariant])) !== null && _q !== void 0 ? _q : field === null || field === void 0 ? void 0 : field.typography) !== null && _r !== void 0 ? _r : theme.typography.body1;
|
|
199
|
+
return (_jsx(TextFieldStyled, { id: id, label: label, placeholder: placeholder, value: value, typo: typo, onChange: onChange, onBlur: handleBlur, background: bg, backgroundFocused: bgFocused, backgroundDisabled: bgDisabled, colorText: txt, colorFocused: bdFocused, colorDisabled: txtDisabled, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, marginField: mg, disabled: disabled, multiline: multiline, required: required, rows: multiline ? rows : undefined, fullWidth: true, height: hg, error: Boolean(errorMessage), helperText: errorMessage || ' ', slotProps: {
|
|
191
200
|
input: {
|
|
192
201
|
inputProps: typeof maxLength === 'number' ? { maxLength } : undefined,
|
|
193
202
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldValidate.js","sourceRoot":"","sources":["../../src/components/TextFieldValidate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"TextFieldValidate.js","sourceRoot":"","sources":["../../src/components/TextFieldValidate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,9 @@ import { TypographyVariant } from '@mui/material/styles';
|
|
|
3
3
|
import { SvgIconProps } from '@mui/material';
|
|
4
4
|
import { ButtonProps } from '../../types/ButtonProps';
|
|
5
5
|
import { FieldProps } from '@/types/FieldProps';
|
|
6
|
-
import { BorderProps, ColorProps } from '@pipelinesolucoes/theme';
|
|
6
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
7
7
|
import { ClickResult } from './ClickResult';
|
|
8
|
-
export interface FormLoginProps extends ColorProps, BorderProps, ButtonProps, FieldProps {
|
|
8
|
+
export interface FormLoginProps extends ColorProps, BorderProps, ButtonProps, FieldProps, LayoutProps {
|
|
9
9
|
urlRecuperarConta: string;
|
|
10
10
|
urlCriarConta: string;
|
|
11
11
|
Icon?: React.ElementType<SvgIconProps>;
|
|
@@ -13,15 +13,138 @@ export interface FormLoginProps extends ColorProps, BorderProps, ButtonProps, Fi
|
|
|
13
13
|
googleButton: () => React.ReactElement;
|
|
14
14
|
textButton?: string;
|
|
15
15
|
variantButton?: TypographyVariant;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
colorLink: string;
|
|
19
|
-
divider: string;
|
|
16
|
+
colorLink?: string;
|
|
17
|
+
divider?: string;
|
|
20
18
|
children?: React.ReactNode;
|
|
21
19
|
onClick?: (data: {
|
|
22
20
|
email: string;
|
|
23
21
|
password: string;
|
|
24
22
|
}) => Promise<ClickResult> | ClickResult;
|
|
25
23
|
}
|
|
24
|
+
/**
|
|
25
|
+
* Componente de formulário de login completo, com suporte a:
|
|
26
|
+
* autenticação por email/senha, botão de login social (ex: Google),
|
|
27
|
+
* validação básica de campos, exibição de mensagens de sucesso/erro
|
|
28
|
+
* e customização visual via props ou tema.
|
|
29
|
+
*
|
|
30
|
+
* @param {string} urlRecuperarConta URL para a página de recuperação de senha.
|
|
31
|
+
*
|
|
32
|
+
* @param {string} urlCriarConta URL para a página de criação de conta.
|
|
33
|
+
*
|
|
34
|
+
* @param {React.ElementType<SvgIconProps>} [Icon] Ícone exibido no topo do formulário.
|
|
35
|
+
*
|
|
36
|
+
* @param {() => React.ReactElement} [titulo] Função que retorna o título do formulário.
|
|
37
|
+
*
|
|
38
|
+
* @param {() => React.ReactElement} googleButton Função que renderiza o botão de login social.
|
|
39
|
+
*
|
|
40
|
+
* @param {string} [textButton='Enviar'] Texto exibido no botão principal de submit.
|
|
41
|
+
* @param {TypographyVariant} [variantButton='body1'] Variante tipográfica usada nos textos do botão e links.
|
|
42
|
+
*
|
|
43
|
+
* @param {(data: { email: string; password: string }) => Promise<ClickResult> | ClickResult} [onClick]
|
|
44
|
+
* Callback executado ao submeter o formulário. Deve retornar um objeto com sucesso, mensagem e cor opcional.
|
|
45
|
+
*
|
|
46
|
+
* @param {React.ReactNode} [children] Conteúdo adicional renderizado abaixo do formulário.
|
|
47
|
+
*
|
|
48
|
+
* @param {string} [colorLink] Cor dos links de ação (criar conta / recuperar senha).
|
|
49
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
|
|
50
|
+
*
|
|
51
|
+
* @param {string} [divider] Cor do divisor visual entre login social e formulário.
|
|
52
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
|
|
53
|
+
*
|
|
54
|
+
* @param {string} [background] Cor de fundo do container principal do formulário.
|
|
55
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
|
|
56
|
+
*
|
|
57
|
+
* @param {string | number} [borderRadius] Raio da borda do container principal do formulário.
|
|
58
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
|
|
59
|
+
*
|
|
60
|
+
* @param {string} [border] Borda do container principal do formulário.
|
|
61
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
|
|
62
|
+
*
|
|
63
|
+
* @param {string} [boxShadow] Sombra do container principal do formulário.
|
|
64
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.
|
|
65
|
+
*
|
|
66
|
+
* @param {string} [maxWidth] Largura Máxima do container principal do formulário.
|
|
67
|
+
*
|
|
68
|
+
* @param {string} [backgroundField] Cor de fundo dos campos de formulário.
|
|
69
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
|
|
70
|
+
*
|
|
71
|
+
* @param {string} [colorField] Cor do texto dos campos de formulário.
|
|
72
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
|
|
73
|
+
*
|
|
74
|
+
* @param {string | number} [borderRadiusField] Raio da borda dos campos de formulário.
|
|
75
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
|
|
76
|
+
*
|
|
77
|
+
* @param {string} [boxShadowField] Sombra aplicada aos campos de formulário.
|
|
78
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
|
|
79
|
+
*
|
|
80
|
+
* @param {string} [borderColorField] Cor da borda dos campos de formulário.
|
|
81
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
|
|
82
|
+
*
|
|
83
|
+
* @param {string | number} [paddingField] Espaçamento interno dos campos de formulário.
|
|
84
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
|
|
85
|
+
*
|
|
86
|
+
* @param {string | number} [marginField] Margem externa dos campos de formulário.
|
|
87
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.field.
|
|
88
|
+
*
|
|
89
|
+
* @param {string} [textButton='Enviar'] Texto exibido no botão principal do formulário.
|
|
90
|
+
*
|
|
91
|
+
* @param {TypographyVariant} [variantButton='body1'] Variante tipográfica utilizada no texto do botão e links.
|
|
92
|
+
*
|
|
93
|
+
* @param {string} [backgroundButton] Cor de fundo do botão.
|
|
94
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
95
|
+
*
|
|
96
|
+
* @param {string} [backgroundHoverButton] Cor de fundo do botão ao passar o mouse.
|
|
97
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
98
|
+
*
|
|
99
|
+
* @param {string} [colorButton] Cor do texto do botão.
|
|
100
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
101
|
+
*
|
|
102
|
+
* @param {string} [colorHoverButton] Cor do texto do botão ao passar o mouse.
|
|
103
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
104
|
+
*
|
|
105
|
+
* @param {string | number} [borderRadiusButton] Raio da borda do botão.
|
|
106
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
107
|
+
*
|
|
108
|
+
* @param {string} [borderButton='none'] Borda do botão.
|
|
109
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
110
|
+
*
|
|
111
|
+
* @param {string} [boxShadowButton] Sombra aplicada ao botão.
|
|
112
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
113
|
+
*
|
|
114
|
+
* @param {string | number} [widthButton='auto'] Largura do botão.
|
|
115
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
116
|
+
*
|
|
117
|
+
* @param {string | number} [heightButton='auto'] Altura do botão.
|
|
118
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
119
|
+
*
|
|
120
|
+
* @param {string | number} [paddingButton] Espaçamento interno do botão.
|
|
121
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
122
|
+
*
|
|
123
|
+
* @param {string | number} [marginButton='0'] Margem externa do botão.
|
|
124
|
+
* Opcional. Caso não seja informado, será utilizada a configuração definida no theme.pipelinesolucoes.forms.login.button.
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
* @example
|
|
128
|
+
* ```tsx
|
|
129
|
+
* import { FormLogin } from '@/components/FormLogin';
|
|
130
|
+
* import GoogleIcon from '@mui/icons-material/Google';
|
|
131
|
+
*
|
|
132
|
+
* const Example = () => {
|
|
133
|
+
* return (
|
|
134
|
+
* <FormLogin
|
|
135
|
+
* urlCriarConta="/criar-conta"
|
|
136
|
+
* urlRecuperarConta="/recuperar-senha"
|
|
137
|
+
* googleButton={() => <button>Entrar com Google</button>}
|
|
138
|
+
* onClick={async ({ email, password }) => {
|
|
139
|
+
* if (email === 'teste@teste.com' && password === '123') {
|
|
140
|
+
* return { success: true, message: 'Login realizado com sucesso!' };
|
|
141
|
+
* }
|
|
142
|
+
* return { success: false, message: 'Credenciais inválidas.' };
|
|
143
|
+
* }}
|
|
144
|
+
* />
|
|
145
|
+
* );
|
|
146
|
+
* };
|
|
147
|
+
* ```
|
|
148
|
+
*/
|
|
26
149
|
declare const FormLogin: React.FC<FormLoginProps>;
|
|
27
150
|
export default FormLogin;
|