Mitre Form Component

Componente 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.

🚨 Avisos importantes

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
`

$3

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.

---

❌ Itens que NÃO devem ser modificados

$3

- 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.

$3

- 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.

---

✅ Itens que DEVEM ser modificados

$3

Embora o componente esteja pronto para uso, você pode personalizá-lo ao passar as props adequadas.

$3

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"}]'

products={products}
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]
/>;
`

---

🛠️ Tecnologias utilizadas

- React
- React Hook Form
- Yup
- Styled Components
- Polished
- React Icons
- React Internation Phone
- Vite
- Tsup

$3

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

---

⚙️ Instalação

Este componente pode ser instalado em qualquer projeto React usando o gerenciador de pacotes de sua preferência (npm, yarn, pnpm, etc.).

`bash


Usando npm

npm install mitre-form-component-next

Usando yarn

yarn add mitre-form-component-next

Usando pnpm

pnpm add 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 ErrorBoundary

Recomendamos 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