@pipelinesolucoes/form 1.2.0-beta.9 → 1.3.1

package/README.md

@@ -14,24 +14,33 @@ A biblioteca inclui os seguintes componentes:
   Componente de botão que redireciona o usuário para um endpoint externo (ex: autenticação com Google). 
   Durante o clique, o botão entra em estado de loading e, caso ocorra algum erro, exibe uma mensagem abaixo do botão.
 
-- **FormLogin**
-  Componente de formulário de login com suporte a autenticação via Google e login por email/senha.
-  Inclui validação básica de email, exibição de mensagens de erro/sucesso retornadas pelo handler `onClick` e 
-  customização visual via props (container, campos, botão e links).
-
-- **FormPasswordRecovery**
-  Componente de formulário para recuperação de senha via e-mail.
-  Faz a validação do e-mail, dispara um `onSubmit` assíncrono (obrigatório) e exibe a mensagem retornada.    
+- **FormMessage**
+  Componente de formulário para envio de mensagem.
+  Faz a validação do e-mail, telefone e exibe a mensagem retornada.    
 
 - **TextFieldPassword**
-  Componente de campo de senha baseado no TextField do Material UI, com botão para alternar entre mostrar/ocultar a senha. O componente:
+  Componente de campo de senha baseado no TextField do Material UI, com botão para alternar entre mostrar/ocultar a senha. 
+  O componente:
   - Retorna somente a senha digitada via `onPasswordChange`
   - Valida obrigatório + formato (regex) e exibe mensagens de erro automaticamente
   - Dispara um "evento" de validação via `onValidationChange`
 
 - **TextFieldValidate**  
   Componente de campo de texto com validação, baseado no TextField do Material UI.
-  Permite personalização visual via `styled` e suporte a validações comuns (obrigatório, tamanho mínimo, regex) e validação customizada.   
+  Permite personalização visual via `styled` e suporte a validações comuns (obrigatório, tamanho mínimo, regex) e validação customizada. 
+
+- **TextFieldNumberValidate**  
+   Campo de texto numérico com suporte a validações comuns e customizadas, construído sobre o TextField do Material UI e 
+   estilizado via Design System da Pipeline.
+
+- **TextFieldBirthDateWithAge**  
+   Campo de data de nascimento com entrada somente numérica, máscara `dd/mm/yyyy`,
+   validações comuns (required, min/maxLength, pattern) + validação customizada,
+   e cálculo automático de idade exibido na label.  
+
+- **TextFieldCPFValidate**  
+   Campo de CPF com entrada somente numérica, máscara `000.000.000-00`,
+   validações comuns (required, min/maxLength, pattern) + validação customizada.    
 
 - **NotificationSnackbar**
   Componente que exibe uma notificação no topo da tela utilizando o Snackbar e Alert do Material UI.  

package/dist/components/ChipList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
+import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
+export interface ChipListProps extends Pick<ColorProps, 'background' | 'color' | 'backgroundHover' | 'colorHover'>, Pick<LayoutProps, 'width' | 'height' | 'padding' | 'margin'>, BorderProps {
+    items: string[];
+    variant?: TypographyVariant;
+}
+declare const ChipList: React.FC<ChipListProps>;
+export default ChipList;

package/dist/components/ChipList.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import { styled, useTheme } from '@mui/material/styles';
+const StyledChipArea = styled(Box)({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+});
+const StyledChip = styled(Chip, {
+    shouldForwardProp: (prop) => ![
+        'width',
+        'height',
+        'padding',
+        'margin',
+        'background',
+        'colorText',
+        'borderRadius',
+        'boxShadow',
+        'border',
+        'backgroundHover',
+        'colorHover',
+        'typo',
+    ].includes(prop),
+})(({ width, height, padding, margin, background, colorText, borderRadius, boxShadow, border, backgroundHover, colorHover, typo }) => (Object.assign(Object.assign({ width,
+    height,
+    padding,
+    margin,
+    borderRadius,
+    boxShadow, backgroundColor: background, color: colorText, border }, (typo !== null && typo !== void 0 ? typo : {})), { '&:hover': {
+        backgroundColor: backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : background,
+        color: colorHover !== null && colorHover !== void 0 ? colorHover : colorText,
+    }, '&.MuiChip-outlined': {
+        backgroundColor: 'transparent',
+    }, '&.MuiChip-outlined:hover': {
+        backgroundColor: backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : 'transparent',
+        color: colorHover !== null && colorHover !== void 0 ? colorHover : colorText,
+    } })));
+const ChipList = ({ items, variant, width, height, padding, margin, background, color, borderRadius, boxShadow, border, backgroundHover, colorHover, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    const theme = useTheme();
+    const themechip = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.chip;
+    const wchip = (_d = (_c = themechip === null || themechip === void 0 ? void 0 : themechip.width) !== null && _c !== void 0 ? _c : width) !== null && _d !== void 0 ? _d : '100%';
+    const hchip = (_f = (_e = themechip === null || themechip === void 0 ? void 0 : themechip.height) !== null && _e !== void 0 ? _e : height) !== null && _f !== void 0 ? _f : 'auto';
+    const pchip = (_h = (_g = themechip === null || themechip === void 0 ? void 0 : themechip.padding) !== null && _g !== void 0 ? _g : padding) !== null && _h !== void 0 ? _h : '16px';
+    const mchip = (_k = (_j = themechip === null || themechip === void 0 ? void 0 : themechip.margin) !== null && _j !== void 0 ? _j : margin) !== null && _k !== void 0 ? _k : '0';
+    const bchip = (_m = (_l = themechip === null || themechip === void 0 ? void 0 : themechip.background) !== null && _l !== void 0 ? _l : background) !== null && _m !== void 0 ? _m : '#ffffff';
+    const clchip = (_p = (_o = themechip === null || themechip === void 0 ? void 0 : themechip.color) !== null && _o !== void 0 ? _o : color) !== null && _p !== void 0 ? _p : 'inherit';
+    const brchip = (_r = (_q = themechip === null || themechip === void 0 ? void 0 : themechip.borderRadius) !== null && _q !== void 0 ? _q : borderRadius) !== null && _r !== void 0 ? _r : 'inherit';
+    const bschip = (_t = (_s = themechip === null || themechip === void 0 ? void 0 : themechip.boxShadow) !== null && _s !== void 0 ? _s : boxShadow) !== null && _t !== void 0 ? _t : 'none';
+    const bdchip = (_v = (_u = themechip === null || themechip === void 0 ? void 0 : themechip.border) !== null && _u !== void 0 ? _u : border) !== null && _v !== void 0 ? _v : 'inherit';
+    const bHoverchip = (_x = (_w = themechip === null || themechip === void 0 ? void 0 : themechip.backgroundHover) !== null && _w !== void 0 ? _w : backgroundHover) !== null && _x !== void 0 ? _x : bchip;
+    const clHoverchip = (_z = (_y = themechip === null || themechip === void 0 ? void 0 : themechip.colorHover) !== null && _y !== void 0 ? _y : colorHover) !== null && _z !== void 0 ? _z : clchip;
+    const typo = (_1 = (_0 = (variant && theme.typography[variant])) !== null && _0 !== void 0 ? _0 : themechip === null || themechip === void 0 ? void 0 : themechip.typography) !== null && _1 !== void 0 ? _1 : theme.typography.body1;
+    return (_jsx(StyledChipArea, { children: items.map((item, idx) => (_jsx(StyledChip, { label: item, width: wchip, height: hchip, padding: pchip, margin: mchip, background: bchip, colorText: clchip, borderRadius: brchip, boxShadow: bschip, border: bdchip, backgroundHover: bHoverchip, colorHover: clHoverchip, typo: typo }, `${item}-${idx}`))) }));
+};
+ChipList.displayName = 'ChipList';
+export default ChipList;
+//# sourceMappingURL=ChipList.js.map

package/dist/components/ChipList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipList.js","sourceRoot":"","sources":["../../src/components/ChipList.tsx"],"names":[],"mappings":"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"}

package/dist/components/FormMessage.d.ts

@@ -0,0 +1,268 @@
+import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
+import { SvgIconProps } from '@mui/material';
+import { ButtonProps } from '../types/ButtonProps';
+import { FieldProps } from '@/types/FieldProps';
+import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
+import { ClickResult } from '../types/ClickResult';
+export interface FormMessageProps extends ColorProps, BorderProps, ButtonProps, FieldProps, LayoutProps {
+    Icon?: React.ElementType<SvgIconProps>;
+    titulo?: () => React.ReactElement;
+    textButton?: string;
+    variantButton?: TypographyVariant;
+    rowsMessage?: number;
+    children?: React.ReactNode;
+    onClick?: (data: {
+        nome: string;
+        email: string;
+        telefone: string;
+        mensagem: string;
+    }) => Promise<ClickResult> | ClickResult;
+}
+/**
+ * Componente de formulário para envio de mensagem (contato), com campos controlados internamente
+ * (**nome**, **email**, **telefone** e **mensagem**) e submissão via callback assíncrono (`onClick`).
+ *
+ * Funcionalidades principais:
+ * - Renderiza campos de texto com validação (via `TextFieldValidate`) e feedback de erro ao usuário.
+ * - Validação local mínima para **email** antes de disparar o `onClick`.
+ * - Exibe mensagem de retorno (sucesso/erro) após execução do `onClick`, com cor configurável.
+ * - Suporta cabeçalho opcional com ícone (`Icon`) e título customizado (`titulo`).
+ * - Permite conteúdo adicional via `children` abaixo do feedback do formulário.
+ *
+ * Tokens de estilo (ordem de prioridade):
+ * - Container do formulário (`StyledRoot`):
+ *   - `background` → `theme.pipelinesolucoes.forms.background` → `'transparent'`
+ *   - `borderRadius` → `theme.pipelinesolucoes.forms.borderRadius` → `'0'`
+ *   - `border` → `theme.pipelinesolucoes.forms.border` → `'0'`
+ *   - `boxShadow` → `theme.pipelinesolucoes.forms.boxShadow` → `'none'`
+ *   - `maxWidth` → *(sem token de theme neste componente)* → *(comportamento do styled component)*
+ * - Campos (`TextFieldValidate`), aplicados igualmente a todos os campos:
+ *   - `backgroundField` → `theme.pipelinesolucoes.forms.field.background` → `undefined`
+ *   - `colorField` → `theme.pipelinesolucoes.forms.field.color` → `undefined`
+ *   - `borderRadiusField` → `theme.pipelinesolucoes.forms.field.borderRadius` → `undefined`
+ *   - `boxShadowField` → `theme.pipelinesolucoes.forms.field.boxShadow` → `undefined`
+ *   - `borderColorField` → `theme.pipelinesolucoes.forms.field.borderColor` → `undefined`
+ *   - `paddingField` → `theme.pipelinesolucoes.forms.field.padding` → `undefined`
+ *   - `marginField` → `theme.pipelinesolucoes.forms.field.margin` → `undefined`
+ *   - `heightField` → `theme.pipelinesolucoes.forms.field.height` → `undefined`
+ * - Botão (`ButtonFormStyled`):
+ *   - `backgroundButton` → `theme.pipelinesolucoes.forms.button.background` → `undefined`
+ *   - `backgroundHoverButton` → `theme.pipelinesolucoes.forms.button.backgroundHover` → `undefined`
+ *   - `colorButton` → `theme.pipelinesolucoes.forms.button.color` → `undefined`
+ *   - `colorHoverButton` → `theme.pipelinesolucoes.forms.button.colorHover` → `undefined`
+ *   - `borderRadiusButton` → `theme.pipelinesolucoes.forms.button.borderRadius` → `undefined`
+ *   - `boxShadowButton` → `theme.pipelinesolucoes.forms.button.boxShadow` → `undefined`
+ *   - `paddingButton` → `theme.pipelinesolucoes.forms.button.padding` → `undefined`
+ *   - `borderButton` → *(prop do componente)* → `'none'`
+ *   - `widthButton` → *(prop do componente)* → `'auto'`
+ *   - `heightButton` → *(prop do componente)* → `'auto'`
+ *   - `marginButton` → *(prop do componente)* → `'0'`
+ *
+ * Tipografia:
+ * - O texto do botão é renderizado com `Typography` do Material UI.
+ * - Ordem de prioridade:
+ *   - `variantButton` → *(fallback interno)* `'body1'`
+ * - Observação: `variantButton` aceita qualquer `TypographyVariant` compatível com o theme do Material UI.
+ *
+ * @param {import('@mui/material/styles').TypographyVariant} [variantButton]
+ * Variante tipográfica do texto do botão (`Typography variant`).
+ * Ordem: `variantButton` → `'body1'`.
+ *
+ * @param {string} [textButton]
+ * Texto exibido no botão quando não está carregando.
+ * Padrão: `'Enviar'`.
+ *
+ * @param {number} [rowsMessage]
+ * Número de linhas do campo **Mensagem** quando `multiline` está ativo.
+ * Padrão: `5`.
+ *
+ * @param {React.ElementType<import('@mui/material').SvgIconProps>} [Icon]
+ * Componente de ícone (ex.: `EmailOutlined`, `ChatOutlined`) renderizado no cabeçalho do formulário.
+ * Renderizado apenas quando fornecido.
+ *
+ * @param {() => React.ReactElement} [titulo]
+ * Função que retorna o elemento React usado como título no cabeçalho do formulário.
+ * Renderizado apenas quando fornecido.
+ *
+ * @param {React.ReactNode} [children]
+ * Conteúdo adicional renderizado ao final do componente (abaixo da mensagem de feedback da API).
+ *
+ * @param {(data: { nome: string; email: string; telefone: string; mensagem: string; }) => (Promise<import('../types/ClickResult').ClickResult> | import('../types/ClickResult').ClickResult)} [onClick]
+ * Callback acionado ao clicar no botão (submissão). Recebe os valores atuais dos campos do formulário.
+ * - Se ausente, o componente exibe a mensagem: **"Nenhuma ação foi configurada para o botão."**
+ * - Se retornar `{ success: true }`, exibe `message` com cor `color` (ou `theme.palette.success.main` como fallback).
+ * - Se retornar `{ success: false }`, exibe `message` com cor `color` (ou `theme.palette.error.main` como fallback).
+ * - Em exceção (`throw`), exibe: **"Erro inesperado ao processar a solicitação."** com `theme.palette.error.main`.
+ *
+ * Estilo / Aparência:
+ * @param {import('@pipelinesolucoes/theme').ColorProps['background']} [background]
+ * Background do container do formulário.
+ * Ordem: `background` → `theme.pipelinesolucoes.forms.background` → `'transparent'`.
+ *
+ * @param {import('@pipelinesolucoes/theme').BorderProps['borderRadius']} [borderRadius]
+ * Raio de borda do container do formulário.
+ * Ordem: `borderRadius` → `theme.pipelinesolucoes.forms.borderRadius` → `'0'`.
+ *
+ * @param {import('@pipelinesolucoes/theme').BorderProps['border']} [border]
+ * Borda do container do formulário.
+ * Ordem: `border` → `theme.pipelinesolucoes.forms.border` → `'0'`.
+ *
+ * @param {import('@pipelinesolucoes/theme').LayoutProps['boxShadow']} [boxShadow]
+ * Sombra do container do formulário.
+ * Ordem: `boxShadow` → `theme.pipelinesolucoes.forms.boxShadow` → `'none'`.
+ *
+ * @param {import('@pipelinesolucoes/theme').LayoutProps['maxWidth']} [maxWidth]
+ * Largura máxima do container do formulário. *(Sem token de theme aplicado diretamente neste componente.)*
+ *
+ * @param {import('@/types/FieldProps').FieldProps['backgroundField']} [backgroundField]
+ * Background aplicado aos campos (`TextFieldValidate`).
+ * Ordem: `backgroundField` → `theme.pipelinesolucoes.forms.field.background` → `undefined`.
+ *
+ * @param {import('@/types/FieldProps').FieldProps['colorField']} [colorField]
+ * Cor do texto aplicada aos campos (`TextFieldValidate`).
+ * Ordem: `colorField` → `theme.pipelinesolucoes.forms.field.color` → `undefined`.
+ *
+ * @param {import('@/types/FieldProps').FieldProps['borderRadiusField']} [borderRadiusField]
+ * Raio de borda aplicado aos campos (`TextFieldValidate`).
+ * Ordem: `borderRadiusField` → `theme.pipelinesolucoes.forms.field.borderRadius` → `undefined`.
+ *
+ * @param {import('@/types/FieldProps').FieldProps['boxShadowField']} [boxShadowField]
+ * Sombra aplicada aos campos (`TextFieldValidate`).
+ * Ordem: `boxShadowField` → `theme.pipelinesolucoes.forms.field.boxShadow` → `undefined`.
+ *
+ * @param {import('@/types/FieldProps').FieldProps['borderColorField']} [borderColorField]
+ * Cor da borda aplicada aos campos (`TextFieldValidate`).
+ * Ordem: `borderColorField` → `theme.pipelinesolucoes.forms.field.borderColor` → `undefined`.
+ *
+ * @param {import('@/types/FieldProps').FieldProps['paddingField']} [paddingField]
+ * Padding aplicado aos campos (`TextFieldValidate`).
+ * Ordem: `paddingField` → `theme.pipelinesolucoes.forms.field.padding` → `undefined`.
+ *
+ * @param {import('@/types/FieldProps').FieldProps['marginField']} [marginField]
+ * Margem aplicada aos campos (`TextFieldValidate`).
+ * Ordem: `marginField` → `theme.pipelinesolucoes.forms.field.margin` → `undefined`.
+ *
+ * @param {import('@/types/FieldProps').FieldProps['heightField']} [heightField]
+ * Altura aplicada aos campos (`TextFieldValidate`).
+ * Ordem: `heightField` → `theme.pipelinesolucoes.forms.field.height` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['backgroundButton']} [backgroundButton]
+ * Background do botão.
+ * Ordem: `backgroundButton` → `theme.pipelinesolucoes.forms.button.background` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['backgroundHoverButton']} [backgroundHoverButton]
+ * Background do botão em hover.
+ * Ordem: `backgroundHoverButton` → `theme.pipelinesolucoes.forms.button.backgroundHover` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['colorButton']} [colorButton]
+ * Cor do texto do botão.
+ * Ordem: `colorButton` → `theme.pipelinesolucoes.forms.button.color` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['colorHoverButton']} [colorHoverButton]
+ * Cor do texto do botão em hover.
+ * Ordem: `colorHoverButton` → `theme.pipelinesolucoes.forms.button.colorHover` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['borderRadiusButton']} [borderRadiusButton]
+ * Raio de borda do botão.
+ * Ordem: `borderRadiusButton` → `theme.pipelinesolucoes.forms.button.borderRadius` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['borderButton']} [borderButton]
+ * Borda do botão.
+ * Ordem: `borderButton` → `'none'`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['boxShadowButton']} [boxShadowButton]
+ * Sombra do botão.
+ * Ordem: `boxShadowButton` → `theme.pipelinesolucoes.forms.button.boxShadow` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['widthButton']} [widthButton]
+ * Largura do botão.
+ * Ordem: `widthButton` → `'auto'`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['heightButton']} [heightButton]
+ * Altura do botão.
+ * Ordem: `heightButton` → `'auto'`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['paddingButton']} [paddingButton]
+ * Padding do botão.
+ * Ordem: `paddingButton` → `theme.pipelinesolucoes.forms.button.padding` → `undefined`.
+ *
+ * @param {import('../types/ButtonProps').ButtonProps['marginButton']} [marginButton]
+ * Margem do botão.
+ * Ordem: `marginButton` → `'0'`.
+ *
+ * Validação:
+ * - Email: validação local por regex simples (`/\S+@\S+\.\S+/`) antes de executar `onClick`.
+ * - Campos: cada `TextFieldValidate` recebe `required` e `showErrorOn="blur"`, além de validações específicas:
+ *   - `validateEmailMessage` para email.
+ *   - `validateTelefoneMessage` para telefone.
+ *
+ * Eventos:
+ * - Clique no botão: dispara `handleClick`, que:
+ *   - Prevê `preventDefault()` no evento de formulário.
+ *   - Bloqueia envio se email inválido e exibe mensagem padrão de erro.
+ *   - Desabilita o botão enquanto `isLoading` estiver `true`, exibindo "Enviando...".
+ *
+ * @example
+ * ```tsx
+ * import FormMessage from './FormMessage';
+ * import EmailOutlined from '@mui/icons-material/EmailOutlined';
+ *
+ * export function Contato() {
+ *   return (
+ *     <FormMessage
+ *       Icon={EmailOutlined}
+ *       titulo={() => <strong>Fale conosco</strong>}
+ *       textButton="Enviar mensagem"
+ *       variantButton="body2"
+ *       rowsMessage={6}
+ *       onClick={async ({ nome, email, telefone, mensagem }) => {
+ *         // Exemplo: chamada de API
+ *         const ok = Boolean(nome && email && telefone && mensagem);
+ *         return ok
+ *           ? { success: true, message: 'Mensagem enviada com sucesso!' }
+ *           : { success: false, message: 'Não foi possível enviar a mensagem.' };
+ *       }}
+ *     >
+ *       <small>Responderemos em até 1 dia útil.</small>
+ *     </FormMessage>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Exemplo de configuração no theme (Pipeline)
+ * const theme = {
+ *   pipelinesolucoes: {
+ *     forms: {
+ *       background: 'transparent',
+ *       borderRadius: '8px',
+ *       border: '1px solid rgba(0,0,0,0.12)',
+ *       boxShadow: 'none',
+ *       field: {
+ *         background: '#fff',
+ *         color: '#111',
+ *         borderRadius: '8px',
+ *         borderColor: 'rgba(0,0,0,0.23)',
+ *         boxShadow: 'none',
+ *         padding: '12px',
+ *         margin: '0 0 12px 0',
+ *         height: '48px',
+ *       },
+ *       button: {
+ *         background: '#111',
+ *         backgroundHover: '#222',
+ *         color: '#fff',
+ *         colorHover: '#fff',
+ *         borderRadius: '8px',
+ *         boxShadow: 'none',
+ *         padding: '12px 16px',
+ *       },
+ *     },
+ *   },
+ * };
+ * ```
+ */
+declare const FormMessage: React.FC<FormMessageProps>;
+export default FormMessage;