Componente de formulário de captação de leads para ser usado em projetos da Mitre Realty.
npm install mitre-form-componentComponente de formulário de captação de leads para ser usado em projetos da Mitre Realty. Esta biblioteca oferece um componente pronto para facilitar a implementação de formulários em suas páginas, com validação e integração com APIs para registro de leads.
Este projeto foi desenvolvido para ser usado diretamente em projetos da Mitre Realty. Algumas partes da biblioteca são essenciais e não devem ser alteradas ou removidas.
- Exemplo de uso: Dentro de src/app/page.tsx, há um exemplo de uso do componente, disponível apenas para visualização. Para executar e ver o exemplo em funcionamento, execute o comando:
``bash`
yarn dev
Este componente é totalmente autossuficiente e não requer nenhuma configuração adicional no projeto host:
- ✅ Fonte Montserrat: Carregada automaticamente pelo componente
- ✅ Estilos isolados: Não interferem com estilos do projeto host
- ✅ Zero dependências externas: Funciona out-of-the-box
Nota: A fonte Montserrat é carregada automaticamente do Google Fonts quando o componente é montado. Não é necessário adicionar nenhum link ou import no projeto host.
---
- O comportamento básico do componente, como a integração com a API e as interações de formulário, não devem ser alterados.
- Certifique-se de que as dependências do package.json estão intactas para garantir o funcionamento correto da biblioteca. Alterações nas versões podem causar incompatibilidade com o sistema.
---
Embora o componente esteja pronto para uso, você pode personalizá-lo ao passar as props adequadas.
Aqui está um exemplo de uso básico dentro do projeto:
`tsx
import { MitreFormComponent } from "mitre-form-component-next";
// array de produtos
const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
// Exemplo de VITE_PRODUCT_ID: '[{"id":1,"name":"Apartamento 2 quartos"},{"id":2,"name":"Casa 3 quartos"}]'
apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
showHeader={true} //[Opcional] Se irá exibir ou não o cabeçalho
title="Atendimento por mensagem" //[Opcional] Título do formulário
subtitle="Informe seus dados e retornaremos a mensagem." //[Opcional] Subtítulo do formulário
backgroundColor="#000" //[Opcional]
textColor="#ffffff" //[Opcional]
buttonBackgroundColor="#FF5733" //[Opcional]
buttonTextColor="#FFF" //[Opcional]
innerPadding="0.2rem" //[Opcional]
inputBackgroundColor="#000" //[Opcional]
inputBorderColor="#000" //[Opcional]
inputFocusBorderColor="#76B" //[Opcional]
inputPlaceholderColor="#FFF" //[Opcional]
inputTextColor="#FFF" //[Opcional]
onSuccess={(requestBody, leadId) => console.log('Formulário enviado com sucesso!', requestBody, leadId)} //[Opcional]
onError={(error) => console.error('Erro ao enviar formulário:', error)} //[Opcional]
/>;
`
---
- React
- React Hook Form
- Yup
- Styled Components
- Polished
- React Icons
- React Internation Phone
- Vite
- Tsup
Este componente não injeta estilos globais no projeto host, evitando conflitos de CSS. Todos os estilos são aplicados de forma isolada usando styled-components, garantindo que:
- ✅ Não há poluição do escopo global com variáveis CSS
- ✅ Não há conflitos com classes utilitárias
- ✅ Não há reset CSS que afete o projeto host
- ✅ Fonte Montserrat carregada automaticamente (não afeta outros componentes)
- ✅ O componente pode ser usado em qualquer projeto React sem efeitos colaterais ou configurações adicionais
---
Este componente pode ser instalado em qualquer projeto React usando o gerenciador de pacotes de sua preferência (npm, yarn, pnpm, etc.).
`bashUsando npm
npm install mitre-form-component-next
Depois de instalar a biblioteca, você pode começar a usá-la diretamente no seu projeto.
---
🔧 Props do Componente
O
MitreFormComponent aceita as seguintes props:-
products (array): Array de objetos contendo os produtos disponíveis. Cada produto deve ter id (number) e name (string).
- Se o array contém apenas 1 produto: o formulário usa automaticamente esse produto
- Se o array contém múltiplos produtos: é exibido um seletor para o usuário escolher
- apiUrl (string): URL da API para registro dos leads.
- apiToken (string): Token de autenticação da API.
- showHeader (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: true.
- title (opcional, string): Título do formulário. Padrão: "Atendimento por mensagem".
- subtitle (opcional, string): Subtítulo do formulário. Padrão: "Informe seus dados e retornaremos a mensagem.".
- backgroundColor (opcional, string): Cor de fundo do formulário. Padrão: #CECECE.
- textColor (opcional, string): Cor dos textos do cabeçalho, do label dos inputs e do texto de privacidade. Padrão: #2F2F2F.
- buttonBackgroundColor (opcional, string): Define a cor de fundo do botão. Padrão: #F6C76B.
- buttonTextColor (opcional, string): Define a cor do texto do botão. Padrão: #2F2F2F.
- innerPadding (opcional, string): Espaçamento interno do componente com relação às bordas. Padrão 1rem.
- inputBackgroundColor (opcional, string): Cor de fundo do input. Padrão: #FFF.
- inputBorderColor (opcional, string): Cor da borda do input. Padrão: transparent.
- inputFocusBorderColor (opcional, string): Cor da borda do input quando selecionado. Padrão: #F6C76B.
- inputPlaceholderColor (opcional, string): Cor do placeholder do input. Padrão: #B6B6B6.
- inputTextColor (opcional, string): Cor do texto do input. Padrão: #2F2F2F.
- onSuccess (opcional, função): Callback executado quando o formulário é enviado com sucesso. Recebe dois parâmetros: requestBody (objeto com os dados enviados) e leadId (string com o ID do lead retornado pela API).
- onError (opcional, função): Callback executado quando ocorre um erro no envio do formulário. Recebe um objeto Error como parâmetro.---
🎯 Comportamento dos Produtos
O componente possui comportamento inteligente baseado na quantidade de produtos fornecidos:
$3
- O formulário usa automaticamente o único produto disponível
- Não é exibido seletor de produto
- O usuário preenche apenas nome, email e telefone$3
- É exibido um campo de seleção "Produto de interesse" antes do campo nome
- O usuário deve selecionar um produto para prosseguir
- Validação obrigatória da seleção de produto$3
- É exibida uma mensagem de erro no lugar do formulário
- O erro é logado no console para debug
- Mensagem amigável: "Erro no carregamento do formulário!"$3
`typescript
interface Product {
id: number; // ID único do produto
name: string; // Nome do produto para exibição
}
`---
🚨 Componente dentro de um
ErrorBoundaryRecomendamos que o componente
MitreFormComponent seja sempre utilizado dentro de um ErrorBoundary para garantir que a aplicação não quebre em caso de falha no carregamento do componente. Também é preciso usar dynamic do next/dynamics para a importação.Exemplo de uso básico como biblioteca em projetos Nextjs externos:
`tsx
import dynamic from "next/dynamic";import { ErrorBoundary } from "react-error-boundary";
const MitreFormComponent = dynamic(
() =>
import("mitre-form-component-next").then((mod) => mod.MitreFormComponent),
{ ssr: false }
);
Erro ao carregar o formulário
Para uso em outros frameworks, fazer o import básico conforme Artigo 2
---
🏗️ Como gerar o build e publicar no npm
Para gerar o build da biblioteca e publicá-la no npm, siga estas etapas:
1. Incrementar a versão no
package.json:
No arquivo package.json, atualize a versão da biblioteca.2. Executar o build:
`bash
yarn build
`3. Publicar no npm:
`bash
yarn publish --new-version 0.x.xxx
``---
Este projeto é mantido pela Mitre Realty. Uso restrito aos colaboradores e parceiros autorizados.
---
Para dúvidas ou suporte sobre o uso desta biblioteca, entre em contato com o time de desenvolvimento interno da Mitre Realty.
---
> Mitre Realty © Todos os direitos reservados.