mitre-actions-widget/README.md

Componente flutuante de botões com ações de contato para ser usado em projetos da Mitre Realty.

# Mitre Actions Widget

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

## 🚨 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
  ```

---

## ❌ 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 `MitreActionsWidget`**

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

<MitreActionsWidget
  products={products}
  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
/>;
```

---

## 🛠️ Tecnologias utilizadas

- [React](https://react.dev/)
- [Styled Components](https://styled-components.com/)
- [React Icons](https://react-icons.github.io/react-icons/)
- [Vite](https://vitejs.dev/)
- [Tsup](https://tsup.egoist.dev/)

---

## ⚙️ 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-actions-widget

# Usando yarn
yarn add mitre-actions-widget

# Usando pnpm
pnpm add 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:

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

---

## 🚨 Componente dentro de um `ErrorBoundary`

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

<ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
  <MitreActionsWidget
    products={products}
    apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
    apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
  />
</ErrorBoundary>;
```

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

---

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