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:

  yarn next:dev

❌ Itens que NÃO devem ser modificados

Código do componente

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

Dependências

• 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

1. Configuração do Componente

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

2. Componente MitreFormComponent

Aqui está um exemplo de uso básico dentro do projeto:

import dynamic from "next/dynamic";

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

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

# 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:

• 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:

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 }
);

<ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
  <MitreFormComponent
    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"
  />
</ErrorBoundary>;

🏗️ 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:

   Execute o comando para gerar o build da biblioteca:

   yarn build

3. Publicar no npm:

   Após o build, publique a nova versão da biblioteca no npm com o comando:

   yarn publish --new-version 0.x.xxx

📄 Licença

Este projeto é mantido pela Mitre Realty. Uso restrito aos colaboradores e parceiros autorizados.

🧑‍💻 Contato

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.