mitre-form-component 0.0.49 → 0.1.0

package/README.md

@@ -12,6 +12,16 @@ Este projeto foi desenvolvido para ser usado diretamente em projetos da Mitre Re
   yarn dev
   ```
 
+### 📌 Componente Autossuficiente
+
+Este componente é **totalmente autossuficiente** e não requer nenhuma configuração adicional no projeto host:
+
+- ✅ **Fonte Montserrat**: Carregada automaticamente pelo componente
+- ✅ **Estilos isolados**: Não interferem com estilos do projeto host
+- ✅ **Zero dependências externas**: Funciona out-of-the-box
+
+**Nota**: A fonte Montserrat é carregada automaticamente do Google Fonts quando o componente é montado. Não é necessário adicionar nenhum link ou import no projeto host.
+
 ---
 
 ## ❌ Itens que NÃO devem ser modificados
@@ -47,16 +57,18 @@ const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
   products={products}
   apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
   apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
-  showHeader={true}  //[Opcional] Se irá exibir ou não o cabeçalho com "Atendimento por Mensagem - Informe seus dados e retornaremos a mensagem."
+  showHeader={true}  //[Opcional] Se irá exibir ou não o cabeçalho
+  title="Atendimento por mensagem"  //[Opcional] Título do formulário
+  subtitle="Informe seus dados e retornaremos a mensagem."  //[Opcional] Subtítulo do formulário
   backgroundColor="#000"  //[Opcional] 
   textColor="#ffffff"  //[Opcional] 
-  buttonBackgroundColor="#FF5733"
-  buttonTextColor="#FFF" // [Opcional]
+  buttonBackgroundColor="#FF5733"  //[Opcional]
+  buttonTextColor="#FFF"  //[Opcional]
   innerPadding="0.2rem"  //[Opcional]
   inputBackgroundColor="#000"  //[Opcional]
   inputBorderColor="#000"  //[Opcional]
   inputFocusBorderColor="#76B"  //[Opcional]
-  inputPlaceholderColor="#FFF" //[Opcional]
+  inputPlaceholderColor="#FFF"  //[Opcional]
   inputTextColor="#FFF"  //[Opcional]
   onSuccess={(requestBody, leadId) => console.log('Formulário enviado com sucesso!', requestBody, leadId)}  //[Opcional]
   onError={(error) => console.error('Erro ao enviar formulário:', error)}  //[Opcional]
@@ -77,6 +89,16 @@ const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
 - [Vite](https://vitejs.dev/)
 - [Tsup](https://tsup.egoist.dev/)
 
+### 🎨 Estilos Isolados
+
+Este componente **não injeta estilos globais** no projeto host, evitando conflitos de CSS. Todos os estilos são aplicados de forma isolada usando styled-components, garantindo que:
+
+- ✅ Não há poluição do escopo global com variáveis CSS
+- ✅ Não há conflitos com classes utilitárias
+- ✅ Não há reset CSS que afete o projeto host
+- ✅ Fonte Montserrat carregada automaticamente (não afeta outros componentes)
+- ✅ O componente pode ser usado em qualquer projeto React sem efeitos colaterais ou configurações adicionais
+
 ---
 
 ## ⚙️ Instalação
@@ -107,7 +129,9 @@ O `MitreFormComponent` aceita as seguintes props:
   - Se o array contém múltiplos produtos: é exibido um seletor para o usuário escolher
 - **`apiUrl`** (string): URL da API para registro dos leads.
 - **`apiToken`** (string): Token de autenticação da API.
-- **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `false`.
+- **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `true`.
+- **`title`** (opcional, string): Título do formulário. Padrão: `"Atendimento por mensagem"`.
+- **`subtitle`** (opcional, string): Subtítulo do formulário. Padrão: `"Informe seus dados e retornaremos a mensagem."`.
 - **`backgroundColor`** (opcional, string): Cor de fundo do formulário. Padrão: `#CECECE`.
 - **`textColor`** (opcional, string): Cor dos textos do cabeçalho, do label dos inputs e do texto de privacidade. Padrão: `#2F2F2F`.
 - **`buttonBackgroundColor`** (opcional, string): Define a cor de fundo do botão. Padrão: `#F6C76B`.