mitre-form-component 0.0.4 → 0.0.6

package/README.md

@@ -1,54 +1,174 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+# 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
+  ```
+
+---
+
+## ❌ 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:
+
+```tsx
+import { MitreFormComponent } from "mitre-form-component-next";
+
+<MitreFormComponent
+  productId={process.env.VITE_PRODUCT_ID!}
+  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
+  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
+  utm_source="google"
+  utm_medium="cpc"
+  utm_campaign="mitre"
+  utm_term="mitre"
+  showHeader={true} // opcional
+  colorPrimary="#FF5733" // opcional
+  textColor="#ffffff" // opcional
+/>;
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+---
+
+## 🛠️ Tecnologias utilizadas
+
+- [React](https://react.dev/)
+- [React Hook Form](https://react-hook-form.com/)
+- [Yup](https://github.com/jquense/yup)
+- [Styled Components](https://styled-components.com/)
+- [Polished](https://polished.js.org/)
+- [React Icons](https://react-icons.github.io/react-icons/)
+- [React Phone Input](https://github.com/bl00mber/react-phone-input-2)
+- [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-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.
+
+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 }
+);
+
+<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>;
+```
+
+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.