Componente flutuante de botões com ações de contato para ser usado em projetos da Mitre Realty. Totalmente encapsulado sem conflitos de estilos.
npm install mitre-actions-widgetComponente flutuante com botões de ações rápidas para ser usado em projetos da Mitre Realty. Esta biblioteca oferece um botão fixo que permite o acesso rápido a canais de contato como WhatsApp e ligação telefônica.
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
---
- 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 { MitreActionsWidget } from "mitre-actions-widget";
// 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!}
/>
// Com cor personalizada
apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
backgroundColor="#FF5733"
/>
`
---
- React
- Styled Components
- React Icons
- Vite
- Tsup
---
A partir da versão 1.0.0, todos os estilos do componente são completamente encapsulados e não afetam outros elementos da aplicação. Isso significa:
- ✅ Sem conflitos de CSS: As variáveis e estilos do componente não interferem com o projeto host
- ✅ Sem dependências globais: Não é necessário adicionar fontes ou resets CSS no projeto
- ✅ Fonte integrada: A fonte Montserrat é carregada automaticamente pelo componente (verificando se já existe para evitar duplicação)
- ✅ Reset CSS scoped: Regras de reset aplicadas apenas ao escopo do componente
O componente gerencia internamente:
- Fonte Google (Montserrat) com fallbacks para fontes do sistema
- Paleta de cores própria
- Reset CSS localizado
- Customização de scrollbar apenas nos elementos internos
Importante: Esta é uma mudança que melhora significativamente a integração do componente em projetos externos, eliminando side effects indesejados.
---
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-actions-widget
Depois de instalar a biblioteca, você pode começar a usá-la diretamente no seu projeto.
---
🔧 Props do Componente
O
MitreActionsWidget aceita as seguintes props:-
products (Product[]): Array de produtos do empreendimento.
- apiUrl (string): URL da API para registro dos leads.
- apiToken (string): Token de autenticação da API.
- backgroundColor (string, opcional): Cor de fundo personalizada para o botão flutuante. Padrão: #2DCE68 (verde).---
🚨 Componente dentro de um
ErrorBoundaryRecomendamos que o componente
MitreActionsWidget 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 MitreActionsWidget = dynamic(
() => import("mitre-actions-widget").then((mod) => mod.MitreActionsWidget),
{ ssr: false }
);
// array de produtos
const products = JSON.parse(process.env.NEXT_PUBLIC_PRODUCT_ID!);
// Exemplo de NEXT_PUBLIC_PRODUCT_ID: '[{"id":1,"name":"Apartamento 2 quartos"},{"id":2,"name":"Casa 3 quartos"}]'
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.