@pipelinesolucoes/form 1.0.0-beta.7 → 1.2.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/README.md +2 -2
- package/dist/components/NotificationSnackbar.d.ts +1 -2
- package/dist/components/NotificationSnackbar.js +2 -2
- package/dist/components/NotificationSnackbar.js.map +1 -1
- package/dist/components/TextFieldPassword.d.ts +4 -33
- package/dist/components/TextFieldPassword.js +20 -18
- package/dist/components/TextFieldPassword.js.map +1 -1
- package/dist/components/TextFieldValidate.d.ts +5 -6
- package/dist/components/TextFieldValidate.js +14 -13
- package/dist/components/TextFieldValidate.js.map +1 -1
- package/dist/components/login/FormLogin.d.ts +131 -0
- package/dist/components/login/FormLogin.js +227 -0
- package/dist/components/login/FormLogin.js.map +1 -0
- package/dist/components/login/{PasswordRecoveryForm.d.ts → FormPasswordRecovery.d.ts} +4 -25
- package/dist/components/login/FormPasswordRecovery.js +190 -0
- package/dist/components/login/FormPasswordRecovery.js.map +1 -0
- package/dist/components/login/{LoginForm.d.ts → FormSignUp.d.ts} +8 -36
- package/dist/components/login/FormSignUp.js +231 -0
- package/dist/components/login/FormSignUp.js.map +1 -0
- package/dist/components/login/GoogleButton.d.ts +1 -4
- package/dist/components/login/GoogleButton.js.map +1 -1
- package/dist/components/{FormStyled.d.ts → recaptcha/FormStyled.d.ts} +1 -8
- package/dist/components/{FormStyled.js → recaptcha/FormStyled.js} +0 -13
- package/dist/components/recaptcha/FormStyled.js.map +1 -0
- package/dist/components/recaptcha/RecaptchaForm.js +1 -1
- package/dist/components/recaptcha/RecaptchaForm.js.map +1 -1
- package/dist/components/style/ButtonFormStyled.d.ts +2 -0
- package/dist/components/style/ButtonFormStyled.js +22 -0
- package/dist/components/style/ButtonFormStyled.js.map +1 -0
- package/dist/components/style/LinkFormStyled.d.ts +7 -0
- package/dist/components/style/LinkFormStyled.js +15 -0
- package/dist/components/style/LinkFormStyled.js.map +1 -0
- package/dist/index.d.ts +3 -7
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/theme.d.ts +2 -2
- package/dist/theme.js +20 -21
- package/dist/theme.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/FieldProps.d.ts +4 -0
- package/package.json +9 -5
- package/dist/components/ButtonFormStyled.d.ts +0 -2
- package/dist/components/ButtonFormStyled.js +0 -22
- package/dist/components/ButtonFormStyled.js.map +0 -1
- package/dist/components/FormStyled.js.map +0 -1
- package/dist/components/login/LoginForm.js +0 -198
- package/dist/components/login/LoginForm.js.map +0 -1
- package/dist/components/login/PasswordRecoveryForm.js +0 -169
- package/dist/components/login/PasswordRecoveryForm.js.map +0 -1
- package/dist/components/login/SignUpForm.d.ts +0 -26
- package/dist/components/login/SignUpForm.js +0 -138
- package/dist/components/login/SignUpForm.js.map +0 -1
- package/dist/mui-theme.d.ts +0 -33
- package/dist/mui-theme.js +0 -2
- package/dist/mui-theme.js.map +0 -1
- package/dist/pages/_app.d.ts +0 -2
- package/dist/pages/_app.js +0 -20
- package/dist/pages/_app.js.map +0 -1
- package/dist/pages/_document.d.ts +0 -9
- package/dist/pages/_document.js +0 -33
- package/dist/pages/_document.js.map +0 -1
- package/dist/types/BorderProps.d.ts +0 -6
- package/dist/types/BorderProps.js +0 -2
- package/dist/types/BorderProps.js.map +0 -1
- package/dist/types/ColorProps.d.ts +0 -9
- package/dist/types/ColorProps.js +0 -2
- package/dist/types/ColorProps.js.map +0 -1
- package/dist/types/LayoutProps.d.ts +0 -7
- package/dist/types/LayoutProps.js +0 -2
- package/dist/types/LayoutProps.js.map +0 -1
- package/dist/types/TextProps.d.ts +0 -5
- package/dist/types/TextProps.js +0 -2
- package/dist/types/TextProps.js.map +0 -1
package/README.md
CHANGED
|
@@ -14,12 +14,12 @@ A biblioteca inclui os seguintes componentes:
|
|
|
14
14
|
Componente de botão que redireciona o usuário para um endpoint externo (ex: autenticação com Google).
|
|
15
15
|
Durante o clique, o botão entra em estado de loading e, caso ocorra algum erro, exibe uma mensagem abaixo do botão.
|
|
16
16
|
|
|
17
|
-
- **
|
|
17
|
+
- **FormLogin**
|
|
18
18
|
Componente de formulário de login com suporte a autenticação via Google e login por email/senha.
|
|
19
19
|
Inclui validação básica de email, exibição de mensagens de erro/sucesso retornadas pelo handler `onClick` e
|
|
20
20
|
customização visual via props (container, campos, botão e links).
|
|
21
21
|
|
|
22
|
-
- **
|
|
22
|
+
- **FormPasswordRecovery**
|
|
23
23
|
Componente de formulário para recuperação de senha via e-mail.
|
|
24
24
|
Faz a validação do e-mail, dispara um `onSubmit` assíncrono (obrigatório) e exibe a mensagem retornada.
|
|
25
25
|
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { ColorProps } from "../types/ColorProps";
|
|
2
|
-
import { TextProps } from "../types/TextProps";
|
|
3
1
|
import { AlertColor, TypographyVariant, SnackbarOrigin } from "@mui/material";
|
|
2
|
+
import { ColorProps, TextProps } from "@pipelinesolucoes/theme";
|
|
4
3
|
export interface NotificationSnackbarProps extends TextProps, ColorProps {
|
|
5
4
|
background?: string;
|
|
6
5
|
text: string;
|
|
@@ -43,11 +43,11 @@ import { Snackbar, Alert, Typography, useTheme } from "@mui/material";
|
|
|
43
43
|
* };
|
|
44
44
|
* ```
|
|
45
45
|
*/
|
|
46
|
-
const NotificationSnackbar = ({ background
|
|
46
|
+
const NotificationSnackbar = ({ background, open, text, variant = 'body1', severity = "success", anchorOrigin = { vertical: 'top', horizontal: 'center' }, onClose, }) => {
|
|
47
47
|
var _a, _b, _c, _d;
|
|
48
48
|
const theme = useTheme();
|
|
49
49
|
// 1) prop -> 2) token -> 3) fallback
|
|
50
|
-
const resolvedBackground = (_d = background !== null && background !== void 0 ? background : (_c = (_b = (_a = theme.
|
|
50
|
+
const resolvedBackground = (_d = background !== null && background !== void 0 ? background : (_c = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.notification) === null || _c === void 0 ? void 0 : _c.background) !== null && _d !== void 0 ? _d : "#ffffff";
|
|
51
51
|
return (_jsx(Snackbar, { open: open, autoHideDuration: 4000, onClose: onClose, anchorOrigin: anchorOrigin, children: _jsx(Alert, { onClose: onClose, severity: severity, variant: "filled", sx: { color: resolvedBackground }, children: _jsx(Typography, { variant: variant, component: "span", children: text }) }) }));
|
|
52
52
|
};
|
|
53
53
|
NotificationSnackbar.displayName = 'NotificationSnackbar';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationSnackbar.js","sourceRoot":"","sources":["../../src/components/NotificationSnackbar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"NotificationSnackbar.js","sourceRoot":"","sources":["../../src/components/NotificationSnackbar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAc,UAAU,EAAqC,QAAQ,EAAE,MAAM,eAAe,CAAC;AAarH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,oBAAoB,GAAwC,CAAC,EACjE,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,OAAO,GAAC,OAAO,EACf,QAAQ,GAAG,SAAS,EACpB,YAAY,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,OAAO,GACR,EAAE,EAAE;;IAEH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,qCAAqC;IACrC,MAAM,kBAAkB,GACtB,MAAA,UAAU,aAAV,UAAU,cAAV,UAAU,GACV,MAAA,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,KAAK,0CAAE,YAAY,0CAAE,UAAU,mCACvD,SAAS,CAAC;IAEZ,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,IAAI,EACtB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,YAE1B,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,YAC7F,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,YAAE,IAAI,GAAc,GAC5D,GACC,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;AAE1D,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BorderProps } from '
|
|
3
|
-
import { ColorProps } from '@/types/ColorProps';
|
|
4
|
-
import { LayoutProps } from '@/types/LayoutProps';
|
|
2
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
5
3
|
type ValidationStatus = 'idle' | 'required' | 'invalid' | 'valid';
|
|
6
4
|
interface PasswordValidationResult {
|
|
7
5
|
isValid: boolean;
|
|
@@ -13,10 +11,6 @@ interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
13
11
|
id?: string;
|
|
14
12
|
label?: string;
|
|
15
13
|
placeholder?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Valor controlado do campo (opcional).
|
|
18
|
-
* Se você não passar `value`, o componente funciona de forma "semi-controlada" internamente.
|
|
19
|
-
*/
|
|
20
14
|
value?: string;
|
|
21
15
|
background?: string;
|
|
22
16
|
backgroundDisabled?: string;
|
|
@@ -28,34 +22,11 @@ interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
28
22
|
borderColor?: string;
|
|
29
23
|
padding?: string;
|
|
30
24
|
disabled?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Se true, valida obrigatório.
|
|
33
|
-
* @default true
|
|
34
|
-
*/
|
|
35
25
|
required?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Regra de formato (regex) para validar a senha.
|
|
38
|
-
* @default /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/
|
|
39
|
-
*/
|
|
40
|
-
passwordPattern?: RegExp;
|
|
41
|
-
/**
|
|
42
|
-
* Mensagem quando o campo é obrigatório e está vazio.
|
|
43
|
-
* @default 'Senha obrigatória'
|
|
44
|
-
*/
|
|
45
26
|
requiredMessage?: string;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
*/
|
|
50
|
-
invalidMessage?: string;
|
|
51
|
-
/**
|
|
52
|
-
* Quando validar:
|
|
53
|
-
* - 'blur': valida ao sair do campo
|
|
54
|
-
* - 'change': valida a cada digitação
|
|
55
|
-
* - 'both': valida nos dois
|
|
56
|
-
* @default 'blur'
|
|
57
|
-
*/
|
|
58
|
-
validateOn?: 'blur' | 'change' | 'both';
|
|
27
|
+
pattern?: RegExp;
|
|
28
|
+
patternMessage?: string;
|
|
29
|
+
showErrorOn?: 'blur' | 'change' | 'both';
|
|
59
30
|
/**
|
|
60
31
|
* Retorna somente a senha digitada (string).
|
|
61
32
|
*/
|
|
@@ -20,25 +20,27 @@ const StyledTextField = styled(TextField, {
|
|
|
20
20
|
'colorText',
|
|
21
21
|
].includes(prop),
|
|
22
22
|
})(({ theme, background, backgroundDisabled, colorText, borderRadius, boxShadow, borderColor, colorFocused, colorDisabled, padding, }) => {
|
|
23
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
24
|
-
const field = (_b = (_a = theme.
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
23
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
24
|
+
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
25
|
+
// props -> tokens -> fallback
|
|
26
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : '#fff';
|
|
27
|
+
const bgDisabled = (_d = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _d !== void 0 ? _d : "#E5E7EB";
|
|
28
|
+
const txt = (_e = colorText !== null && colorText !== void 0 ? colorText : field === null || field === void 0 ? void 0 : field.color) !== null && _e !== void 0 ? _e : '#000';
|
|
29
|
+
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : "#9CA3AF";
|
|
30
|
+
const br = (_g = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _g !== void 0 ? _g : "0";
|
|
31
|
+
const sh = (_h = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _h !== void 0 ? _h : "none";
|
|
32
|
+
const bd = (_j = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _j !== void 0 ? _j : '#ccc';
|
|
33
|
+
const bdFocused = (_k = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _k !== void 0 ? _k : '#1976d2';
|
|
34
|
+
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
|
|
34
35
|
return {
|
|
35
36
|
background: bg,
|
|
36
37
|
borderRadius: br,
|
|
37
38
|
boxShadow: sh,
|
|
39
|
+
paddingRight: '16px',
|
|
38
40
|
'& .MuiInputBase-root': {
|
|
39
41
|
color: txt,
|
|
40
42
|
},
|
|
41
|
-
'& .MuiOutlinedInput-root': Object.assign(Object.assign({
|
|
43
|
+
'& .MuiOutlinedInput-root': Object.assign(Object.assign({ borderRadius: br, boxShadow: sh }, (pad ? { padding: pad } : {})), { '& .MuiOutlinedInput-notchedOutline': {
|
|
42
44
|
borderColor: bd,
|
|
43
45
|
}, '&:hover .MuiOutlinedInput-notchedOutline': {
|
|
44
46
|
borderColor: bd,
|
|
@@ -105,7 +107,7 @@ const StyledTextField = styled(TextField, {
|
|
|
105
107
|
* };
|
|
106
108
|
* ```
|
|
107
109
|
*/
|
|
108
|
-
const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, onValidationChange, required = true,
|
|
110
|
+
const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, onValidationChange, required = true, pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/, requiredMessage = 'Senha obrigatória', patternMessage = 'Senha inválida', showErrorOn = 'blur', background, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, disabled = false, padding, onChange, onBlur, }) => {
|
|
109
111
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
110
112
|
const [touched, setTouched] = React.useState(false);
|
|
111
113
|
// fallback interno caso o usuário não use `value`
|
|
@@ -120,15 +122,15 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
120
122
|
if (required && trimmed.length === 0) {
|
|
121
123
|
return { isValid: false, status: 'required', message: requiredMessage, value: nextValue };
|
|
122
124
|
}
|
|
123
|
-
if (trimmed.length > 0 &&
|
|
124
|
-
return { isValid: false, status: 'invalid', message:
|
|
125
|
+
if (trimmed.length > 0 && pattern && !pattern.test(trimmed)) {
|
|
126
|
+
return { isValid: false, status: 'invalid', message: patternMessage, value: nextValue };
|
|
125
127
|
}
|
|
126
128
|
// se não é required e está vazio, consideramos "idle" (sem erro)
|
|
127
129
|
if (!required && trimmed.length === 0) {
|
|
128
130
|
return { isValid: true, status: 'idle', message: '', value: nextValue };
|
|
129
131
|
}
|
|
130
132
|
return { isValid: true, status: 'valid', message: '', value: nextValue };
|
|
131
|
-
}, [
|
|
133
|
+
}, [patternMessage, pattern, required, requiredMessage]);
|
|
132
134
|
const emitValidation = React.useCallback((nextValue) => {
|
|
133
135
|
const result = computeValidation(nextValue);
|
|
134
136
|
if (onValidationChange)
|
|
@@ -136,8 +138,8 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
136
138
|
return result;
|
|
137
139
|
}, [computeValidation, onValidationChange]);
|
|
138
140
|
const [validation, setValidation] = React.useState(() => computeValidation(currentValue));
|
|
139
|
-
const shouldValidateOnChange =
|
|
140
|
-
const shouldValidateOnBlur =
|
|
141
|
+
const shouldValidateOnChange = showErrorOn === 'change' || showErrorOn === 'both';
|
|
142
|
+
const shouldValidateOnBlur = showErrorOn === 'blur' || showErrorOn === 'both';
|
|
141
143
|
const handleChange = (event) => {
|
|
142
144
|
const nextValue = event.target.value;
|
|
143
145
|
// atualiza interno caso não seja controlado
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldPassword.js","sourceRoot":"","sources":["../../src/components/TextFieldPassword.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"TextFieldPassword.js","sourceRoot":"","sources":["../../src/components/TextFieldPassword.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BorderProps } from '
|
|
3
|
-
import { ColorProps } from '../types/ColorProps';
|
|
4
|
-
import { LayoutProps } from '../types/LayoutProps';
|
|
2
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
5
3
|
interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
6
4
|
id?: string;
|
|
7
5
|
label?: string;
|
|
@@ -16,17 +14,18 @@ interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
16
14
|
boxShadow?: string;
|
|
17
15
|
borderColor?: string;
|
|
18
16
|
padding?: string;
|
|
17
|
+
margin?: string;
|
|
19
18
|
disabled?: boolean;
|
|
20
|
-
multiline?: boolean;
|
|
21
|
-
rows?: number;
|
|
22
19
|
required?: boolean;
|
|
23
20
|
requiredMessage?: string;
|
|
24
21
|
pattern?: RegExp | string;
|
|
25
22
|
patternMessage?: string;
|
|
26
|
-
validate?: (value: string) => string | null | undefined;
|
|
27
23
|
showErrorOn?: 'change' | 'blur';
|
|
28
24
|
minLength?: number;
|
|
29
25
|
maxLength?: number;
|
|
26
|
+
multiline?: boolean;
|
|
27
|
+
rows?: number;
|
|
28
|
+
validate?: (value: string) => string | null | undefined;
|
|
30
29
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
31
30
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
31
|
}
|
|
@@ -14,19 +14,20 @@ const StyledTextField = styled(TextField, {
|
|
|
14
14
|
"padding",
|
|
15
15
|
"colorText",
|
|
16
16
|
].includes(prop),
|
|
17
|
-
})(({ theme, background, backgroundDisabled, colorText, borderRadius, boxShadow, borderColor, colorFocused, colorDisabled, padding, }) => {
|
|
18
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
19
|
-
const field = (_b = (_a = theme.
|
|
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
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 :
|
|
22
|
-
const bgDisabled = (_d = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _d !== void 0 ? _d :
|
|
23
|
-
const txt = (_e = colorText !== null && colorText !== void 0 ? colorText : field === null || field === void 0 ? void 0 : field.color) !== null && _e !== void 0 ? _e :
|
|
24
|
-
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f :
|
|
25
|
-
const br = (_g = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _g !== void 0 ? _g : "
|
|
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
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 :
|
|
28
|
-
const bdFocused = (_k = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _k !== void 0 ? _k :
|
|
29
|
-
const pad = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding; // pode deixar undefined se quiser respeitar o default do MUI
|
|
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';
|
|
30
31
|
return {
|
|
31
32
|
// (opcional) pode manter, mas o mais importante é estilizar os slots internos:
|
|
32
33
|
background: bg,
|
|
@@ -35,7 +36,7 @@ const StyledTextField = styled(TextField, {
|
|
|
35
36
|
"& .MuiInputBase-root": {
|
|
36
37
|
color: txt,
|
|
37
38
|
},
|
|
38
|
-
"& .MuiOutlinedInput-root": Object.assign(Object.assign({
|
|
39
|
+
"& .MuiOutlinedInput-root": Object.assign(Object.assign({ borderRadius: br, boxShadow: sh }, (pad ? { padding: pad } : {})), { "& .MuiOutlinedInput-notchedOutline": {
|
|
39
40
|
borderColor: bd,
|
|
40
41
|
}, "&:hover .MuiOutlinedInput-notchedOutline": {
|
|
41
42
|
borderColor: bd,
|
|
@@ -144,7 +145,7 @@ const computeError = (value, { required, requiredMessage, minLength, pattern, pa
|
|
|
144
145
|
* };
|
|
145
146
|
* ```
|
|
146
147
|
*/
|
|
147
|
-
const TextFieldValidate = ({ id, label, background
|
|
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 = 'Campo obrigatório', minLength, pattern, patternMessage = 'Formato inválido', validate, showErrorOn = 'blur', maxLength, padding }) => {
|
|
148
149
|
const [touched, setTouched] = React.useState(false);
|
|
149
150
|
const errorMessage = React.useMemo(() => {
|
|
150
151
|
if (showErrorOn === 'change') {
|
|
@@ -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,131 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
+
import { SvgIconProps } from '@mui/material';
|
|
4
|
+
import { ButtonProps } from '../../types/ButtonProps';
|
|
5
|
+
import { FieldProps } from '@/types/FieldProps';
|
|
6
|
+
import { BorderProps, ColorProps } from '@pipelinesolucoes/theme';
|
|
7
|
+
/**
|
|
8
|
+
* Retorno do onClick/onSubmit do componente pai.
|
|
9
|
+
* - success: define se a ação foi bem sucedida
|
|
10
|
+
* - message: mensagem para exibir no próprio FormLogin
|
|
11
|
+
* - color: cor opcional para a mensagem (caso queira sobrescrever as cores padrão)
|
|
12
|
+
*/
|
|
13
|
+
export interface ClickResult {
|
|
14
|
+
success: boolean;
|
|
15
|
+
message: string;
|
|
16
|
+
color?: string;
|
|
17
|
+
}
|
|
18
|
+
export interface FormLoginProps extends ColorProps, BorderProps, ButtonProps, FieldProps {
|
|
19
|
+
Icon?: React.ElementType<SvgIconProps>;
|
|
20
|
+
titulo?: () => React.ReactElement;
|
|
21
|
+
googleButton: () => React.ReactElement;
|
|
22
|
+
textButton?: string;
|
|
23
|
+
variantButton?: TypographyVariant;
|
|
24
|
+
color_message_sucess: string;
|
|
25
|
+
color_message_erro: string;
|
|
26
|
+
color_link: string;
|
|
27
|
+
color_separador: string;
|
|
28
|
+
urlRecuperarConta: string;
|
|
29
|
+
urlCriarConta: string;
|
|
30
|
+
children?: React.ReactNode;
|
|
31
|
+
onClick?: (data: {
|
|
32
|
+
email: string;
|
|
33
|
+
password: string;
|
|
34
|
+
}) => Promise<ClickResult> | ClickResult;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Componente de formulário de login com suporte a autenticação via Google e login por email/senha.
|
|
38
|
+
* Inclui validação básica de email, exibição de mensagens de erro/sucesso retornadas pelo handler `onClick`
|
|
39
|
+
* e customização visual via props (container, campos, botão e links).
|
|
40
|
+
*
|
|
41
|
+
* @param {string} urlRecuperarConta URL para a página de recuperação de conta/senha. Obrigatório.
|
|
42
|
+
* @param {string} urlCriarConta URL para a página de criação de conta. Obrigatório.
|
|
43
|
+
* @param {React.ElementType<SvgIconProps>} [Icon] Ícone opcional (MUI SvgIcon) exibido no topo do formulário.
|
|
44
|
+
* @param {() => React.ReactElement} [titulo] Função que retorna o conteúdo do título exibido no topo do formulário.
|
|
45
|
+
* @param {() => React.ReactElement} googleButton Função que retorna o botão de login com Google. Obrigatório.
|
|
46
|
+
*
|
|
47
|
+
* @param {string} [background='transparent'] Cor de fundo do container principal.
|
|
48
|
+
* @param {string} [borderRadius='0'] Raio da borda do container principal.
|
|
49
|
+
* @param {string} [border='none'] Borda do container principal.
|
|
50
|
+
* @param {string} [boxShadow='none'] Sombra do container principal.
|
|
51
|
+
*
|
|
52
|
+
* @param {string} [backgroundField='transparent'] Fundo dos campos (email/senha).
|
|
53
|
+
* @param {string} [colorField='#000'] Cor do texto dos campos (email/senha).
|
|
54
|
+
* @param {string} [colorFocusedField] Cor do estado focado do campo (se suportado pelos campos internos).
|
|
55
|
+
* @param {string} [borderRadiusField='0px'] Raio da borda dos campos.
|
|
56
|
+
* @param {string} [boxShadowField='none'] Sombra dos campos.
|
|
57
|
+
* @param {string} [borderColorField='#ccc'] Cor da borda dos campos.
|
|
58
|
+
* @param {string} [paddingField='4px 8px'] Espaçamento interno dos campos.
|
|
59
|
+
*
|
|
60
|
+
* @param {string} [textButton='Enviar'] Texto do botão principal.
|
|
61
|
+
* @param {TypographyVariant} [variantButton='body1'] Variante do Typography usada no texto do botão.
|
|
62
|
+
* @param {string} [backgroundButton='transparent'] Fundo do botão principal.
|
|
63
|
+
* @param {string} [backgroundHoverButton='transparent'] Fundo do botão no hover.
|
|
64
|
+
* @param {string} [colorButton='#000'] Cor do texto do botão.
|
|
65
|
+
* @param {string} [colorHoverButton='#000'] Cor do texto do botão no hover.
|
|
66
|
+
* @param {string} [borderRadiusButton='0'] Raio da borda do botão.
|
|
67
|
+
* @param {string} [borderButton='none'] Borda do botão.
|
|
68
|
+
* @param {string} [boxShadowButton='none'] Sombra do botão.
|
|
69
|
+
* @param {string} [widthButton='auto'] Largura do botão.
|
|
70
|
+
* @param {string} [heightButton='auto'] Altura do botão.
|
|
71
|
+
* @param {string} [paddingButton='4px 24px'] Padding do botão.
|
|
72
|
+
* @param {string} [marginButton='0'] Margem do botão.
|
|
73
|
+
*
|
|
74
|
+
* @param {string} color_message_sucess Cor padrão para mensagem de sucesso (caso `onClick` não retorne `color`). Obrigatório.
|
|
75
|
+
* @param {string} color_message_erro Cor padrão para mensagem de erro (caso `onClick` não retorne `color`). Obrigatório.
|
|
76
|
+
* @param {string} color_link Cor aplicada nos links "Esqueceu sua senha?" e "Criar conta". Obrigatório.
|
|
77
|
+
* @param {string} color_separador Cor da linha separadora (Divider). Obrigatório.
|
|
78
|
+
*
|
|
79
|
+
* @param {(data: { email: string; password: string }) => Promise<ClickResult> | ClickResult} [onClick]
|
|
80
|
+
* Handler chamado ao submeter o formulário. Recebe `{ email, password }` e deve retornar um `ClickResult`.
|
|
81
|
+
* - Se `success` for `true`, exibe `message` com `color_message_sucess` (ou `result.color` se fornecida)
|
|
82
|
+
* - Se `success` for `false`, exibe `message` com `color_message_erro` (ou `result.color` se fornecida)
|
|
83
|
+
* Se não for informado, o componente exibirá a mensagem: "Nenhuma ação foi configurada para o botão.".
|
|
84
|
+
*
|
|
85
|
+
* @param {React.ReactNode} [children] Conteúdo extra renderizado ao final do container (abaixo da mensagem).
|
|
86
|
+
*
|
|
87
|
+
* @example
|
|
88
|
+
* ```tsx
|
|
89
|
+
* import FormLogin from '@/components/FormLogin';
|
|
90
|
+
* import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
|
91
|
+
* import { Button } from '@mui/material';
|
|
92
|
+
*
|
|
93
|
+
* export default function Example() {
|
|
94
|
+
* return (
|
|
95
|
+
* <FormLogin
|
|
96
|
+
* urlRecuperarConta="/recuperar"
|
|
97
|
+
* urlCriarConta="/cadastro"
|
|
98
|
+
* Icon={LockOutlinedIcon}
|
|
99
|
+
* titulo={() => <h2>Entrar</h2>}
|
|
100
|
+
* googleButton={() => <Button variant="outlined">Continuar com Google</Button>}
|
|
101
|
+
* color="#111"
|
|
102
|
+
* background="#fff"
|
|
103
|
+
* borderRadius="12px"
|
|
104
|
+
* boxShadow="0 10px 30px rgba(0,0,0,0.08)"
|
|
105
|
+
* backgroundField="#fafafa"
|
|
106
|
+
* borderColorField="#e0e0e0"
|
|
107
|
+
* paddingField="10px 12px"
|
|
108
|
+
* textButton="Acessar"
|
|
109
|
+
* backgroundButton="#111"
|
|
110
|
+
* backgroundHoverButton="#000"
|
|
111
|
+
* colorButton="#fff"
|
|
112
|
+
* colorHoverButton="#fff"
|
|
113
|
+
* borderRadiusButton="10px"
|
|
114
|
+
* paddingButton="10px 16px"
|
|
115
|
+
* color_message_sucess="#1b5e20"
|
|
116
|
+
* color_message_erro="#b71c1c"
|
|
117
|
+
* color_link="#1976d2"
|
|
118
|
+
* color_separador="#e0e0e0"
|
|
119
|
+
* onClick={async ({ email, password }) => {
|
|
120
|
+
* if (email === 'teste@exemplo.com' && password === '123') {
|
|
121
|
+
* return { success: true, message: 'Login realizado com sucesso!' };
|
|
122
|
+
* }
|
|
123
|
+
* return { success: false, message: 'Email ou senha inválidos.' };
|
|
124
|
+
* }}
|
|
125
|
+
* />
|
|
126
|
+
* );
|
|
127
|
+
* }
|
|
128
|
+
* ```
|
|
129
|
+
*/
|
|
130
|
+
declare const FormLogin: React.FC<FormLoginProps>;
|
|
131
|
+
export default FormLogin;
|