@pipelinesolucoes/form 1.2.0-beta.1 → 1.2.0-beta.10
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/dist/components/NotificationSnackbar.d.ts +1 -2
- package/dist/components/NotificationSnackbar.js +1 -1
- package/dist/components/NotificationSnackbar.js.map +1 -1
- package/dist/components/SelectField.d.ts +73 -0
- package/dist/components/SelectField.js +140 -0
- package/dist/components/SelectField.js.map +1 -0
- package/dist/components/TextFieldPassword.d.ts +7 -33
- package/dist/components/TextFieldPassword.js +33 -23
- package/dist/components/TextFieldPassword.js.map +1 -1
- package/dist/components/TextFieldValidate.d.ts +8 -15
- package/dist/components/TextFieldValidate.js +46 -43
- package/dist/components/TextFieldValidate.js.map +1 -1
- package/dist/components/login/ClickResult.d.ts +11 -0
- package/dist/components/login/ClickResult.js +2 -0
- package/dist/components/login/ClickResult.js.map +1 -0
- package/dist/components/login/FormLogin.d.ts +113 -124
- package/dist/components/login/FormLogin.js +137 -124
- package/dist/components/login/FormLogin.js.map +1 -1
- package/dist/components/login/FormPasswordRecovery.d.ts +97 -110
- package/dist/components/login/FormPasswordRecovery.js +132 -105
- package/dist/components/login/FormPasswordRecovery.js.map +1 -1
- package/dist/components/login/FormSignUp.d.ts +114 -127
- package/dist/components/login/FormSignUp.js +138 -134
- package/dist/components/login/FormSignUp.js.map +1 -1
- package/dist/components/login/GoogleButton.d.ts +1 -4
- package/dist/components/login/GoogleButton.js.map +1 -1
- package/dist/components/login/StyleLogin.d.ts +14 -0
- package/dist/components/login/StyleLogin.js +57 -0
- package/dist/components/login/StyleLogin.js.map +1 -0
- package/dist/components/{FormStyled.d.ts → recaptcha/FormStyled.d.ts} +0 -7
- 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/{ButtonFormStyled.d.ts → style/ButtonFormStyled.d.ts} +1 -1
- 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 +1 -4
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/theme.js +27 -0
- package/dist/theme.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/FieldProps.d.ts +4 -0
- package/package.json +5 -3
- 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/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
|
@@ -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,7 +43,7 @@ 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
|
|
@@ -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"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TypographyProps } from '@mui/material/Typography';
|
|
3
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
4
|
+
export interface SelectFieldOption {
|
|
5
|
+
value: string | number;
|
|
6
|
+
label: string;
|
|
7
|
+
}
|
|
8
|
+
interface SelectFieldProps extends BorderProps, ColorProps, LayoutProps {
|
|
9
|
+
id?: string;
|
|
10
|
+
label?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
value?: string | number;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
variant?: TypographyProps['variant'];
|
|
15
|
+
helperText?: string;
|
|
16
|
+
helperTextColor?: string;
|
|
17
|
+
options: SelectFieldOption[];
|
|
18
|
+
onChange: (value: string | number) => void;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* ComboBox baseado no Material UI, sem validação e sem máscaras,
|
|
22
|
+
* permitindo customização visual e controle completo do valor selecionado.
|
|
23
|
+
*
|
|
24
|
+
* @param {string} [id] Identificador único do campo (usado para acessibilidade).
|
|
25
|
+
* @param {ComboBoxOption[]} options Lista de opções exibidas no ComboBox.
|
|
26
|
+
* @param {string | number} value Valor selecionado.
|
|
27
|
+
* @param {(value: string | number) => void} onChange Callback disparado ao selecionar uma opção.
|
|
28
|
+
* @param {string} [label] Texto do rótulo do campo.
|
|
29
|
+
* @param {string} [placeholder] Texto exibido quando nenhum valor está selecionado.
|
|
30
|
+
* @param {string} [helperText] Texto auxiliar exibido abaixo do campo.
|
|
31
|
+
* @param {string} [helperTextColor] Cor do helperText. Se não for informada, usa a cor de erro do theme.
|
|
32
|
+
* @param {TypographyProps['variant']} [variant='body1'] Variante da tipografia aplicada ao label, valor, opções e helperText.
|
|
33
|
+
* @param {string | number} [width='100%'] Largura do componente.
|
|
34
|
+
* @param {string | number} [height='auto'] Altura do campo.
|
|
35
|
+
* @param {string | number} [containerMargin=0] Margem externa do container.
|
|
36
|
+
* @param {string | number} [padding=0] Padding interno do texto selecionado.
|
|
37
|
+
* @param {string} [background='transparent'] Cor de fundo do campo e do menu aberto.
|
|
38
|
+
* @param {string} [colorText='#000'] Cor do texto (label, valor selecionado e itens).
|
|
39
|
+
* @param {string | number} [borderRadius=4] Raio da borda.
|
|
40
|
+
* @param {string} [boxShadow='none'] Sombra do campo.
|
|
41
|
+
* @param {string} [borderColor='#c4c4c4'] Cor da borda.
|
|
42
|
+
* @param {boolean} [disabled=false] Desabilita o campo.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```tsx
|
|
46
|
+
* import { ComboBox } from '@/components/ComboBox';
|
|
47
|
+
*
|
|
48
|
+
* const Example = () => (
|
|
49
|
+
* <ComboBox
|
|
50
|
+
* id="category"
|
|
51
|
+
* label="Categoria"
|
|
52
|
+
* placeholder="Selecione uma opção"
|
|
53
|
+
* helperText="Campo obrigatório"
|
|
54
|
+
* helperTextColor="warning.main"
|
|
55
|
+
* variant="body2"
|
|
56
|
+
* background="#111"
|
|
57
|
+
* colorText="#fff"
|
|
58
|
+
* options={[
|
|
59
|
+
* { value: 1, label: 'Frontend' },
|
|
60
|
+
* { value: 2, label: 'Backend' },
|
|
61
|
+
* ]}
|
|
62
|
+
* value={1}
|
|
63
|
+
* onChange={(v) => console.log(v)}
|
|
64
|
+
* width={320}
|
|
65
|
+
* containerMargin="16px 0"
|
|
66
|
+
* padding="12px"
|
|
67
|
+
* borderRadius={12}
|
|
68
|
+
* />
|
|
69
|
+
* );
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
declare const SelectField: React.FC<SelectFieldProps>;
|
|
73
|
+
export default SelectField;
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { FormControl, InputLabel, MenuItem, Select, FormHelperText, Typography } from '@mui/material';
|
|
4
|
+
import { styled, useTheme } from '@mui/material/styles';
|
|
5
|
+
const StyledWrapper = styled('div', {
|
|
6
|
+
shouldForwardProp: (prop) => !['width', 'margin'].includes(prop),
|
|
7
|
+
})(({ width, margin }) => ({
|
|
8
|
+
width: width,
|
|
9
|
+
margin: margin,
|
|
10
|
+
}));
|
|
11
|
+
const StyledFormControl = styled(FormControl, {
|
|
12
|
+
shouldForwardProp: (prop) => !['height',
|
|
13
|
+
'padding',
|
|
14
|
+
'background',
|
|
15
|
+
'borderRadius',
|
|
16
|
+
'boxShadow',
|
|
17
|
+
'borderColor',
|
|
18
|
+
'colorText',
|
|
19
|
+
].includes(prop),
|
|
20
|
+
})(({ height, padding, background, borderRadius, boxShadow, borderColor, colorText }) => ({
|
|
21
|
+
width: '100%',
|
|
22
|
+
'& .MuiOutlinedInput-root': {
|
|
23
|
+
height: height,
|
|
24
|
+
background: background,
|
|
25
|
+
borderRadius: borderRadius,
|
|
26
|
+
boxShadow: boxShadow,
|
|
27
|
+
'& fieldset': {
|
|
28
|
+
borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : '#c4c4c4',
|
|
29
|
+
},
|
|
30
|
+
'&:hover fieldset': {
|
|
31
|
+
borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : '#9e9e9e',
|
|
32
|
+
},
|
|
33
|
+
'&.Mui-focused fieldset': {
|
|
34
|
+
borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : '#1976d2',
|
|
35
|
+
},
|
|
36
|
+
'& .MuiSelect-select': {
|
|
37
|
+
padding: padding !== null && padding !== void 0 ? padding : 0,
|
|
38
|
+
color: colorText,
|
|
39
|
+
display: 'flex',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
'& .MuiInputLabel-root': {
|
|
44
|
+
color: colorText,
|
|
45
|
+
},
|
|
46
|
+
'& .MuiInputLabel-root.Mui-focused': {
|
|
47
|
+
color: colorText,
|
|
48
|
+
},
|
|
49
|
+
}));
|
|
50
|
+
/**
|
|
51
|
+
* ComboBox baseado no Material UI, sem validação e sem máscaras,
|
|
52
|
+
* permitindo customização visual e controle completo do valor selecionado.
|
|
53
|
+
*
|
|
54
|
+
* @param {string} [id] Identificador único do campo (usado para acessibilidade).
|
|
55
|
+
* @param {ComboBoxOption[]} options Lista de opções exibidas no ComboBox.
|
|
56
|
+
* @param {string | number} value Valor selecionado.
|
|
57
|
+
* @param {(value: string | number) => void} onChange Callback disparado ao selecionar uma opção.
|
|
58
|
+
* @param {string} [label] Texto do rótulo do campo.
|
|
59
|
+
* @param {string} [placeholder] Texto exibido quando nenhum valor está selecionado.
|
|
60
|
+
* @param {string} [helperText] Texto auxiliar exibido abaixo do campo.
|
|
61
|
+
* @param {string} [helperTextColor] Cor do helperText. Se não for informada, usa a cor de erro do theme.
|
|
62
|
+
* @param {TypographyProps['variant']} [variant='body1'] Variante da tipografia aplicada ao label, valor, opções e helperText.
|
|
63
|
+
* @param {string | number} [width='100%'] Largura do componente.
|
|
64
|
+
* @param {string | number} [height='auto'] Altura do campo.
|
|
65
|
+
* @param {string | number} [containerMargin=0] Margem externa do container.
|
|
66
|
+
* @param {string | number} [padding=0] Padding interno do texto selecionado.
|
|
67
|
+
* @param {string} [background='transparent'] Cor de fundo do campo e do menu aberto.
|
|
68
|
+
* @param {string} [colorText='#000'] Cor do texto (label, valor selecionado e itens).
|
|
69
|
+
* @param {string | number} [borderRadius=4] Raio da borda.
|
|
70
|
+
* @param {string} [boxShadow='none'] Sombra do campo.
|
|
71
|
+
* @param {string} [borderColor='#c4c4c4'] Cor da borda.
|
|
72
|
+
* @param {boolean} [disabled=false] Desabilita o campo.
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```tsx
|
|
76
|
+
* import { ComboBox } from '@/components/ComboBox';
|
|
77
|
+
*
|
|
78
|
+
* const Example = () => (
|
|
79
|
+
* <ComboBox
|
|
80
|
+
* id="category"
|
|
81
|
+
* label="Categoria"
|
|
82
|
+
* placeholder="Selecione uma opção"
|
|
83
|
+
* helperText="Campo obrigatório"
|
|
84
|
+
* helperTextColor="warning.main"
|
|
85
|
+
* variant="body2"
|
|
86
|
+
* background="#111"
|
|
87
|
+
* colorText="#fff"
|
|
88
|
+
* options={[
|
|
89
|
+
* { value: 1, label: 'Frontend' },
|
|
90
|
+
* { value: 2, label: 'Backend' },
|
|
91
|
+
* ]}
|
|
92
|
+
* value={1}
|
|
93
|
+
* onChange={(v) => console.log(v)}
|
|
94
|
+
* width={320}
|
|
95
|
+
* containerMargin="16px 0"
|
|
96
|
+
* padding="12px"
|
|
97
|
+
* borderRadius={12}
|
|
98
|
+
* />
|
|
99
|
+
* );
|
|
100
|
+
* ```
|
|
101
|
+
*/
|
|
102
|
+
const SelectField = ({ id, label, placeholder, value, background, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, width = "100%", height, padding, margin = '0', disabled = false, variant = 'body1', helperText, helperTextColor, options, onChange, }) => {
|
|
103
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
104
|
+
const labelId = id ? `${id}-label` : undefined;
|
|
105
|
+
const shouldShrinkLabel = Boolean(value) || Boolean(placeholder);
|
|
106
|
+
const handleChange = (event, _child) => {
|
|
107
|
+
const raw = event.target.value;
|
|
108
|
+
const matched = options.find((opt) => String(opt.value) === raw);
|
|
109
|
+
onChange(matched ? matched.value : raw);
|
|
110
|
+
};
|
|
111
|
+
const theme = useTheme();
|
|
112
|
+
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
113
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : '#fff';
|
|
114
|
+
const txt = (_d = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _d !== void 0 ? _d : '#000';
|
|
115
|
+
const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : "#E5E7EB";
|
|
116
|
+
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : "#9CA3AF";
|
|
117
|
+
const bdFocused = (_g = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _g !== void 0 ? _g : '#1976d2';
|
|
118
|
+
const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : "0";
|
|
119
|
+
const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : "none";
|
|
120
|
+
const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : '#ccc';
|
|
121
|
+
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';
|
|
122
|
+
const mg = (_m = margin !== null && margin !== void 0 ? margin : field === null || field === void 0 ? void 0 : field.margin) !== null && _m !== void 0 ? _m : '0';
|
|
123
|
+
return (_jsx(StyledWrapper, { width: width, margin: mg, children: _jsxs(StyledFormControl, { id: id, disabled: disabled, variant: "outlined", background: bg, borderRadius: br, boxShadow: sh, borderColor: bd, colorText: txt, height: height !== null && height !== void 0 ? height : 'auto', padding: pad, children: [label && (_jsx(InputLabel, { id: labelId, htmlFor: id, shrink: shouldShrinkLabel, children: _jsx(Typography, { variant: variant, sx: { color: txt }, children: label }) })), _jsx(Select, { id: id, labelId: labelId, value: value !== undefined && value !== null ? String(value) : '', onChange: handleChange, displayEmpty: true, label: label, MenuProps: {
|
|
124
|
+
PaperProps: {
|
|
125
|
+
sx: {
|
|
126
|
+
backgroundColor: bg,
|
|
127
|
+
},
|
|
128
|
+
},
|
|
129
|
+
}, renderValue: (selected) => {
|
|
130
|
+
var _a;
|
|
131
|
+
if ((selected === '' || selected === undefined) && placeholder) {
|
|
132
|
+
return (_jsx(Typography, { variant: variant, color: "text.disabled", children: placeholder }));
|
|
133
|
+
}
|
|
134
|
+
const option = options.find((opt) => String(opt.value) === selected);
|
|
135
|
+
return _jsx(Typography, { variant: variant, children: (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '' });
|
|
136
|
+
}, children: options.map((option) => (_jsx(MenuItem, { value: String(option.value), children: _jsx(Typography, { variant: variant, sx: { color: txt }, children: option.label }) }, option.value))) }), helperText && (_jsx(FormHelperText, { error: !helperTextColor, children: _jsx(Typography, { variant: variant, sx: { color: helperTextColor }, children: helperText }) }))] }) }));
|
|
137
|
+
};
|
|
138
|
+
SelectField.displayName = 'SelectField';
|
|
139
|
+
export default SelectField;
|
|
140
|
+
//# sourceMappingURL=SelectField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/components/SelectField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { ColorProps } from '
|
|
4
|
-
import { LayoutProps } from '@/types/LayoutProps';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
5
4
|
type ValidationStatus = 'idle' | 'required' | 'invalid' | 'valid';
|
|
6
5
|
interface PasswordValidationResult {
|
|
7
6
|
isValid: boolean;
|
|
@@ -13,11 +12,8 @@ interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
13
12
|
id?: string;
|
|
14
13
|
label?: string;
|
|
15
14
|
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
15
|
value?: string;
|
|
16
|
+
textVariant?: TypographyVariant;
|
|
21
17
|
background?: string;
|
|
22
18
|
backgroundDisabled?: string;
|
|
23
19
|
color?: string;
|
|
@@ -28,34 +24,11 @@ interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
28
24
|
borderColor?: string;
|
|
29
25
|
padding?: string;
|
|
30
26
|
disabled?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Se true, valida obrigatório.
|
|
33
|
-
* @default true
|
|
34
|
-
*/
|
|
35
27
|
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
28
|
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';
|
|
29
|
+
pattern?: RegExp;
|
|
30
|
+
patternMessage?: string;
|
|
31
|
+
showErrorOn?: 'blur' | 'change' | 'both';
|
|
59
32
|
/**
|
|
60
33
|
* Retorna somente a senha digitada (string).
|
|
61
34
|
*/
|
|
@@ -81,6 +54,7 @@ interface TextFieldPasswordProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
81
54
|
* @param {string} [label] Label do campo.
|
|
82
55
|
* @param {string} [placeholder] Placeholder do input.
|
|
83
56
|
* @param {string} [value] Valor controlado do campo.
|
|
57
|
+
* @param {import('@mui/material/Typography').TypographyProps['variant']} [textVariant='body1'] Variante de tipografia (MUI) aplicada ao texto digitado e ao placeholder.
|
|
84
58
|
* @param {boolean} [required=true] Se true, valida senha obrigatória.
|
|
85
59
|
* @param {RegExp} [passwordPattern=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/] Regex para validar formato.
|
|
86
60
|
* @param {string} [requiredMessage='Senha obrigatória'] Mensagem para campo vazio.
|
|
@@ -18,28 +18,29 @@ const StyledTextField = styled(TextField, {
|
|
|
18
18
|
'colorDisabled',
|
|
19
19
|
'padding',
|
|
20
20
|
'colorText',
|
|
21
|
+
'textVariant',
|
|
21
22
|
].includes(prop),
|
|
22
|
-
})(({ theme, background, backgroundDisabled, colorText, borderRadius, boxShadow, borderColor, colorFocused, colorDisabled, padding, }) => {
|
|
23
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
23
|
+
})(({ theme, background, backgroundDisabled, colorText, borderRadius, boxShadow, borderColor, colorFocused, colorDisabled, padding, textVariant, }) => {
|
|
24
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
24
25
|
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
26
|
+
// props -> tokens -> fallback
|
|
27
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : '#fff';
|
|
28
|
+
const bgDisabled = (_d = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _d !== void 0 ? _d : "#E5E7EB";
|
|
29
|
+
const txt = (_e = colorText !== null && colorText !== void 0 ? colorText : field === null || field === void 0 ? void 0 : field.color) !== null && _e !== void 0 ? _e : '#000';
|
|
30
|
+
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : "#9CA3AF";
|
|
31
|
+
const br = (_g = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _g !== void 0 ? _g : "0";
|
|
32
|
+
const sh = (_h = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _h !== void 0 ? _h : "none";
|
|
33
|
+
const bd = (_j = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _j !== void 0 ? _j : '#ccc';
|
|
34
|
+
const bdFocused = (_k = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _k !== void 0 ? _k : '#1976d2';
|
|
35
|
+
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
|
|
36
|
+
const typo = textVariant ? theme.typography[textVariant] : undefined;
|
|
34
37
|
return {
|
|
35
|
-
background: bg,
|
|
36
38
|
borderRadius: br,
|
|
37
39
|
boxShadow: sh,
|
|
38
|
-
paddingRight: '16px',
|
|
39
40
|
'& .MuiInputBase-root': {
|
|
40
41
|
color: txt,
|
|
41
42
|
},
|
|
42
|
-
'& .MuiOutlinedInput-root': Object.assign(Object.assign({ borderRadius: br, boxShadow: sh }, (pad ? { padding: pad } : {})), { '& .MuiOutlinedInput-notchedOutline': {
|
|
43
|
+
'& .MuiOutlinedInput-root': Object.assign(Object.assign(Object.assign({ background: bg, borderRadius: br, boxShadow: sh }, (pad ? { padding: pad } : {})), { '& .MuiOutlinedInput-notchedOutline': {
|
|
43
44
|
borderColor: bd,
|
|
44
45
|
}, '&:hover .MuiOutlinedInput-notchedOutline': {
|
|
45
46
|
borderColor: bd,
|
|
@@ -53,7 +54,15 @@ const StyledTextField = styled(TextField, {
|
|
|
53
54
|
},
|
|
54
55
|
}, '& input.Mui-disabled': {
|
|
55
56
|
WebkitTextFillColor: txtDisabled,
|
|
56
|
-
} }),
|
|
57
|
+
} }), (typo
|
|
58
|
+
? {
|
|
59
|
+
// Texto digitado
|
|
60
|
+
'& .MuiInputBase-input': Object.assign({}, typo),
|
|
61
|
+
// Placeholder (input e textarea)
|
|
62
|
+
'& input::placeholder': Object.assign(Object.assign({}, typo), { opacity: 0.7 }),
|
|
63
|
+
'& textarea::placeholder': Object.assign(Object.assign({}, typo), { opacity: 0.7 }),
|
|
64
|
+
}
|
|
65
|
+
: {})),
|
|
57
66
|
'& .MuiInputLabel-root': {
|
|
58
67
|
color: txt,
|
|
59
68
|
},
|
|
@@ -76,6 +85,7 @@ const StyledTextField = styled(TextField, {
|
|
|
76
85
|
* @param {string} [label] Label do campo.
|
|
77
86
|
* @param {string} [placeholder] Placeholder do input.
|
|
78
87
|
* @param {string} [value] Valor controlado do campo.
|
|
88
|
+
* @param {import('@mui/material/Typography').TypographyProps['variant']} [textVariant='body1'] Variante de tipografia (MUI) aplicada ao texto digitado e ao placeholder.
|
|
79
89
|
* @param {boolean} [required=true] Se true, valida senha obrigatória.
|
|
80
90
|
* @param {RegExp} [passwordPattern=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/] Regex para validar formato.
|
|
81
91
|
* @param {string} [requiredMessage='Senha obrigatória'] Mensagem para campo vazio.
|
|
@@ -106,7 +116,7 @@ const StyledTextField = styled(TextField, {
|
|
|
106
116
|
* };
|
|
107
117
|
* ```
|
|
108
118
|
*/
|
|
109
|
-
const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, onValidationChange, required = true,
|
|
119
|
+
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 = 'A senha deve ter no mínimo 8 caracteres, com ao menos uma letra maiúscula, uma letra minúscula, um número e um caractere especial.', showErrorOn = 'blur', background, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, disabled = false, padding, textVariant = 'body1', onChange, onBlur, }) => {
|
|
110
120
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
111
121
|
const [touched, setTouched] = React.useState(false);
|
|
112
122
|
// fallback interno caso o usuário não use `value`
|
|
@@ -121,15 +131,15 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
121
131
|
if (required && trimmed.length === 0) {
|
|
122
132
|
return { isValid: false, status: 'required', message: requiredMessage, value: nextValue };
|
|
123
133
|
}
|
|
124
|
-
if (trimmed.length > 0 &&
|
|
125
|
-
return { isValid: false, status: 'invalid', message:
|
|
134
|
+
if (trimmed.length > 0 && pattern && !pattern.test(trimmed)) {
|
|
135
|
+
return { isValid: false, status: 'invalid', message: patternMessage, value: nextValue };
|
|
126
136
|
}
|
|
127
137
|
// se não é required e está vazio, consideramos "idle" (sem erro)
|
|
128
138
|
if (!required && trimmed.length === 0) {
|
|
129
139
|
return { isValid: true, status: 'idle', message: '', value: nextValue };
|
|
130
140
|
}
|
|
131
141
|
return { isValid: true, status: 'valid', message: '', value: nextValue };
|
|
132
|
-
}, [
|
|
142
|
+
}, [patternMessage, pattern, required, requiredMessage]);
|
|
133
143
|
const emitValidation = React.useCallback((nextValue) => {
|
|
134
144
|
const result = computeValidation(nextValue);
|
|
135
145
|
if (onValidationChange)
|
|
@@ -137,8 +147,8 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
137
147
|
return result;
|
|
138
148
|
}, [computeValidation, onValidationChange]);
|
|
139
149
|
const [validation, setValidation] = React.useState(() => computeValidation(currentValue));
|
|
140
|
-
const shouldValidateOnChange =
|
|
141
|
-
const shouldValidateOnBlur =
|
|
150
|
+
const shouldValidateOnChange = showErrorOn === 'change' || showErrorOn === 'both';
|
|
151
|
+
const shouldValidateOnBlur = showErrorOn === 'blur' || showErrorOn === 'both';
|
|
142
152
|
const handleChange = (event) => {
|
|
143
153
|
const nextValue = event.target.value;
|
|
144
154
|
// atualiza interno caso não seja controlado
|
|
@@ -167,9 +177,9 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
167
177
|
};
|
|
168
178
|
const shouldShowError = touched && !validation.isValid && validation.status !== 'idle';
|
|
169
179
|
const helperText = shouldShowError ? validation.message : ' ';
|
|
170
|
-
return (_jsx(StyledTextField, { type: showPassword ? 'text' : 'password', id: id, label: label, placeholder: placeholder, value: currentValue, background: background, backgroundDisabled: backgroundDisabled, colorText: color, colorFocused: colorFocused, colorDisabled: colorDisabled, borderRadius: borderRadius, boxShadow: boxShadow, borderColor: borderColor, padding: padding, disabled: disabled, required: required, fullWidth: true, error: shouldShowError, helperText: helperText, slotProps: {
|
|
180
|
+
return (_jsx(StyledTextField, { type: showPassword ? 'text' : 'password', id: id, textVariant: textVariant, label: label, placeholder: placeholder, value: currentValue, background: background, backgroundDisabled: backgroundDisabled, colorText: color, colorFocused: colorFocused, colorDisabled: colorDisabled, borderRadius: borderRadius, boxShadow: boxShadow, borderColor: borderColor, padding: padding, disabled: disabled, required: required, fullWidth: true, error: shouldShowError, helperText: helperText, slotProps: {
|
|
171
181
|
input: {
|
|
172
|
-
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setShowPassword((prev) => !prev), edge: "end", "aria-label": showPassword ? 'Ocultar senha' : 'Mostrar senha', children: showPassword ? _jsx(VisibilityOffIcon, {}) : _jsx(VisibilityIcon, {}) }) })),
|
|
182
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setShowPassword((prev) => !prev), edge: "end", "aria-label": showPassword ? 'Ocultar senha' : 'Mostrar senha', sx: { margin: '0 16px 0 0' }, children: showPassword ? _jsx(VisibilityOffIcon, {}) : _jsx(VisibilityIcon, {}) }) })),
|
|
173
183
|
},
|
|
174
184
|
}, onChange: handleChange, onBlur: handleBlur }));
|
|
175
185
|
};
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"TextFieldPassword.js","sourceRoot":"","sources":["../../src/components/TextFieldPassword.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,32 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { ColorProps } from '
|
|
4
|
-
import { LayoutProps } from '../types/LayoutProps';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
5
4
|
interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
6
5
|
id?: string;
|
|
7
6
|
label?: string;
|
|
8
7
|
placeholder?: string;
|
|
9
8
|
value?: string;
|
|
10
|
-
|
|
11
|
-
backgroundDisabled?: string;
|
|
12
|
-
color?: string;
|
|
13
|
-
colorFocused?: string;
|
|
14
|
-
colorDisabled?: string;
|
|
15
|
-
borderRadius?: string;
|
|
16
|
-
boxShadow?: string;
|
|
17
|
-
borderColor?: string;
|
|
18
|
-
padding?: string;
|
|
9
|
+
textVariant?: TypographyVariant;
|
|
19
10
|
disabled?: boolean;
|
|
20
|
-
multiline?: boolean;
|
|
21
|
-
rows?: number;
|
|
22
11
|
required?: boolean;
|
|
23
12
|
requiredMessage?: string;
|
|
24
13
|
pattern?: RegExp | string;
|
|
25
14
|
patternMessage?: string;
|
|
26
|
-
validate?: (value: string) => string | null | undefined;
|
|
27
15
|
showErrorOn?: 'change' | 'blur';
|
|
28
16
|
minLength?: number;
|
|
29
17
|
maxLength?: number;
|
|
18
|
+
multiline?: boolean;
|
|
19
|
+
rows?: number;
|
|
20
|
+
validate?: (value: string) => string | null | undefined;
|
|
30
21
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
31
22
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
23
|
}
|
|
@@ -42,6 +33,7 @@ interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
42
33
|
* @param {string} [placeholder] Placeholder exibido quando o campo está vazio.
|
|
43
34
|
* @param {string} [value=''] Valor atual do campo (modo controlado).
|
|
44
35
|
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
36
|
+
* @param {import('@mui/material/Typography').TypographyProps['variant']} [textVariant='body1'] Variante de tipografia (MUI) aplicada ao texto digitado e ao placeholder.
|
|
45
37
|
*
|
|
46
38
|
* @param {string} [background='#fff'] Cor de fundo do campo.
|
|
47
39
|
* @param {string} [backgroundDisabled='#E5E7EB'] Cor de fundo do campo quando o campo está desabilitado.
|
|
@@ -88,6 +80,7 @@ interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
88
80
|
* showErrorOn="blur"
|
|
89
81
|
* maxLength={120}
|
|
90
82
|
* borderRadius="6px"
|
|
83
|
+
* textVariant="subtitle2"
|
|
91
84
|
* />
|
|
92
85
|
* );
|
|
93
86
|
* };
|