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 next:dev
`

---

❌ 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 dynamic from "next/dynamic";

const MitreFormComponent = dynamic(() => import("../components/Form"), {
ssr: false,
});

productId={process.env.NEXT_PUBLIC_PRODUCT_ID!}
apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
utm_source="google"
utm_medium="cpc"
utm_campaign="mitre"
utm_term="mitre"
showHeader={true} // opcional
colorPrimary="#FF5733" // opcional
textColor="#ffffff" // opcional
/>;
`

---

🛠️ Tecnologias utilizadas

- React
- React Hook Form
- Yup
- Styled Components
- Polished
- React Icons
- React Phone Input

---

⚙️ 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

O MitreFormComponent aceita as seguintes props:

- productId (string): O ID do produto relacionado ao empreendimento.
- apiUrl (string): URL da API para registro dos leads.
- apiToken (string): Token de autenticação da API.
- utm_source (string): Parâmetro UTM de origem da campanha (ex: 'google').
- utm_medium (string): Parâmetro UTM de meio da campanha (ex: 'cpc').
- utm_campaign (string): Parâmetro UTM de nome da campanha (ex: 'mitre').
- utm_term (string): Parâmetro UTM de termo da campanha (ex: 'mitre').
- showHeader (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: false.
- colorPrimary (opcional, string): Cor primária do componente. Exemplo: #FF5733.
- textColor (opcional, string): Cor do texto do componente. Exemplo: #ffffff.

---

🚨 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 assim como react-phone-input-2/lib/style.css para correta estilização do componente externamente.

Exemplo de uso básico como biblioteca em projetos externos:

`tsx
import "react-phone-input-2/lib/style.css";
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