react-lgpd-consent 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.en.md +407 -70
  2. package/README.md +773 -99
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,177 +1,851 @@
1
- <div align="center">
1
+ <div align="center"><div align="center"><div align="center">
2
+
2
3
  <h1>react-lgpd-consent 🍪</h1>
3
- <p><strong>Uma biblioteca React para gerenciamento de consentimento de cookies em conformidade com a LGPD.</strong></p>
4
4
 
5
- <div>
5
+ <p><strong>Gerenciamento de consentimento de cookies em conformidade com a LGPD</strong></p> <h1>react-lgpd-consent 🍪</h1> <h1>react-lgpd-consent 🍪</h1>
6
+
7
+
8
+
9
+ <div> <p><strong>Gerenciamento de consentimento de cookies em conformidade com a LGPD</strong></p> <p><strong>Uma biblioteca React para gerenciamento de consentimento de cookies em conformidade com a LGPD.</strong></p>
10
+
6
11
  <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>
12
+
7
13
  <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>
14
+
8
15
  <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
9
- <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
16
+
17
+ <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a> <div> <div>
18
+
10
19
  </div>
11
20
 
21
+ <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a> <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>
22
+
12
23
  <div>
13
- <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
14
- <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18+-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+"></a>
15
- <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>
24
+
25
+ <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a> <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a> <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>
26
+
27
+ <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18%2B%2019-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+19"></a>
28
+
29
+ <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a> <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a> <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
30
+
16
31
  </div>
17
32
 
33
+ <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a> <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
34
+
18
35
  <div>
19
- <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
20
- <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
21
- <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
36
+
37
+ <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a> </div> </div>
38
+
39
+ <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white&label=Bundle" alt="Bundle Size"></a>
40
+
22
41
  </div>
23
42
 
24
- <br />
25
43
 
26
- <p>
44
+
45
+ <br /> <div> <div>
46
+
47
+
48
+
49
+ <p> <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a> <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
50
+
27
51
  <a href="#-instalação"><strong>Instalação</strong></a> •
28
- <a href="#-uso-básico"><strong>Uso Básico</strong></a> •
29
- <a href="./QUICKSTART.md"><strong>📚 Guia de Início Rápido</strong></a> •
30
- <a href="#-documentação-completa"><strong>Documentação</strong></a> •
31
- <a href="./README.en.md">🇺🇸 🇬🇧 English</a> •
32
- <a href="#-como-contribuir"><strong>Contribuir</strong></a>
33
- </p>
34
-
35
- <!-- Quickstart callout (mantido) -->
36
- <p align="center">
37
- <a href="./QUICKSTART.md"><img src="https://img.shields.io/badge/Quickstart-Iniciar%20R%C3%A1pido-blue?style=for-the-badge&logo=book" alt="Quickstart"></a>
38
- </p>
39
52
 
40
- <p align="center"><strong>Comece por aqui:</strong> siga o <a href="./QUICKSTART.md">Guia de Início Rápido (QUICKSTART.md)</a> para um tutorial passo-a-passo, exemplos TypeScript, tabela de props e integração com MUI — recomendado para usuários novos.</p>
53
+ <a href="#-início-rápido"><strong>Início Rápido</strong></a> • <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18%2B%2019-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+19"></a> <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18+-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+"></a>
54
+
55
+ <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md"><strong>📚 Guia Completo</strong></a> •
56
+
57
+ <a href="#-documentação"><strong>Documentação</strong></a> • <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a> <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>
58
+
59
+ <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/packages/react-lgpd-consent/README.en.md">🇺🇸 English</a>
60
+
61
+ </p> </div> </div>
62
+
41
63
  </div>
42
64
 
65
+
66
+
43
67
  ---
44
68
 
45
- ## 🚀 Instalação
69
+ <div> <div>
46
70
 
47
- ```bash
48
- npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
49
- ```
71
+ ## 🎯 O que há de novo na v0.5.0
50
72
 
51
- **Dependências peer:** `react`, `react-dom`, `@mui/material` e `js-cookie`.
73
+ <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a> <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
52
74
 
53
- ---
75
+ ### 🏗️ Arquitetura Modular (BREAKING CHANGE)
54
76
 
55
- ## ✨ Novidades v0.4.5
77
+ <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white&label=Bundle" alt="Bundle Size"></a> <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
56
78
 
57
- ### 📊 DataLayer Events para Google Tag Manager
58
- - **Eventos Padronizados**: `consent_initialized` e `consent_updated` disparados automaticamente
59
- - **Rastreamento de Origem**: Identifica se decisão veio do banner, modal, reset ou API programática
60
- - **Auditoria LGPD**: Histórico completo de mudanças com `changed_categories` e timestamps ISO 8601
61
- - **Integração GTM**: Documentação completa com exemplos de triggers e tags
62
- - **API Pública**: Funções `pushConsentInitializedEvent` e `pushConsentUpdatedEvent` exportadas
79
+ A v0.5.0 introduz uma **arquitetura monorepo** com 3 pacotes independentes:
63
80
 
64
- ### 🔧 Melhorias de CI/CD
65
- - **Migração para pnpm**: Workflows atualizados de npm para pnpm, resolvendo conflitos de dependências
66
- - **Build Otimizado**: Pipeline mais rápido e confiável
81
+ </div> <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
67
82
 
68
- ---
83
+ | Pacote | Descrição | Bundle | Use quando... |
69
84
 
70
- ## ✨ Novidades v0.4.4
85
+ |--------|-----------|--------|---------------| </div>
71
86
 
72
- ### 🔧 CI/CD e Publicação
73
- - **Workflow de Publicação**: Corrigido bug que impedia publicação automática no npm quando tags eram criadas após merge para `main`
74
- - **Codecov Integration**: Adicionado upload automático de coverage reports para melhor visualização de cobertura de testes
75
- - **Badge de Coverage**: Agora atualizado em tempo real via Codecov
87
+ | [`@react-lgpd-consent/core`](https://www.npmjs.com/package/@react-lgpd-consent/core) | Lógica headless sem UI | ~86 KB | Você vai criar sua própria UI customizada |
76
88
 
77
- ### 📊 Qualidade e Confiabilidade
78
- - **Publicação Confiável**: Tags agora são publicadas corretamente quando commit está no histórico da `main`
79
- - **Visibilidade de Cobertura**: Integração completa com Codecov para tracking de qualidade
89
+ | [`@react-lgpd-consent/mui`](https://www.npmjs.com/package/@react-lgpd-consent/mui) | Componentes Material-UI prontos | ~104 KB | Você quer componentes UI prontos com MUI | <br />
80
90
 
81
- ---
91
+ | `react-lgpd-consent` | Agregador (re-exporta MUI) | ~104 KB | **Compatibilidade com v0.4.x** |
82
92
 
83
- ## ✨ Novidades v0.4.1
93
+ <br />
84
94
 
85
- ### 🎨 Design Tokens Expandidos
86
- - **200+ pontos de customização** (cores, tipografia, espaçamento, layout)
87
- - **Sistema responsivo** com breakpoints e variações
88
- - **Acessibilidade nativa** com contrast ratios e focus states
89
- - **Temas light/dark/auto** com transições suaves
95
+ > **💡 Este pacote (`react-lgpd-consent`)** é o agregador que mantém compatibilidade retroativa. Ele re-exporta `@react-lgpd-consent/mui` e funciona exatamente como a v0.4.x, mas agora com a nova arquitetura.
90
96
 
91
- ### 📝 Sistema Avançado de Textos
92
- - **Templates pré-configurados** para ecommerce, SaaS e governo
93
- - **Internacionalização completa** (pt, en, es)
94
- - **Variações de tom** (formal, casual, técnico)
95
- - **Resolução automática** baseada em contexto
97
+ <p>
98
+
99
+ ### ✨ Novos Recursos v0.5.0
100
+
101
+ <a href="#-instalação"><strong>Instalação</strong></a> • <p>
102
+
103
+ - ✅ **Auto-injeção de Componentes**: `ConsentProvider` do MUI injeta automaticamente Banner, Modal e Floating Button
104
+
105
+ - ✅ **Tema MUI Integrado**: Suporte a ThemeProvider opcional com `createDefaultConsentTheme()` <a href="#-início-rápido"><strong>Início Rápido</strong></a> • <a href="#-instalação"><strong>Instalação</strong></a> •
106
+
107
+ - ✅ **Controle Granular**: Props para desabilitar componentes individuais (`disableDefaultBanner`, `disableDefaultModal`, `disableDefaultFloatingButton`)
108
+
109
+ - ✅ **Warnings de Desenvolvedor**: Sistema inteligente que avisa quando faltam componentes UI (apenas em DEV) <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md"><strong>📚 Guia Completo</strong></a> • <a href="#-uso-básico"><strong>Uso Básico</strong></a> •
96
110
 
97
- ### 🔍 Descoberta de Cookies (Experimental)
98
- - **Detecção automática** de cookies em runtime
99
- - **Categorização inteligente** usando padrões LGPD
100
- - **Integração nativa** com sistema de override
111
+ - ✅ **Monorepo TypeScript**: Paths configurados para melhor DX em IDEs
101
112
 
102
- ### ⚠️ Breaking Changes
103
- - **Suporte a categorias customizadas**: `setPreference` e `ScriptIntegration.category` agora usam `string` ao invés de `Category`
104
- - **Impacto mínimo**: Código usando strings literais continua funcionando sem alterações
105
- - **Consulte**: [CHANGELOG.md](./CHANGELOG.md) para guia de migração completo
113
+ <a href="#-documentação"><strong>Documentação</strong></a> • <a href="./QUICKSTART.md"><strong>📚 Guia de Início Rápido</strong></a> •
114
+
115
+ ### 📦 Migração de v0.4.x → v0.5.0
116
+
117
+ <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/README.en.md">🇺🇸 English</a> <a href="#-documentação-completa"><strong>Documentação</strong></a> •
118
+
119
+ **Se você usa `react-lgpd-consent` (este pacote):**
120
+
121
+ </p> <a href="./README.en.md">🇺🇸 🇬🇧 English</a> •
122
+
123
+ ✅ **Nenhuma mudança necessária!** A API é 100% retrocompatível.
124
+
125
+ </div> <a href="#-como-contribuir"><strong>Contribuir</strong></a>
126
+
127
+ ```tsx
128
+
129
+ // v0.4.x - continua funcionando </p>
130
+
131
+ import { ConsentProvider, useConsent } from 'react-lgpd-consent'
106
132
 
107
133
  ---
108
134
 
109
- ## 📖 Uso Básico
135
+ // v0.5.0 - mesma API, mesmos componentes
136
+
137
+ import { ConsentProvider, useConsent } from 'react-lgpd-consent' <!-- Quickstart callout (mantido) -->
138
+
139
+ ```
140
+
141
+ ## 🎯 O que há de novo na v0.5.0 <p align="center">
110
142
 
111
- Envolva sua aplicação com o `ConsentProvider` (exemplo mínimo):
143
+ **Se você quer otimizar o bundle:**
144
+
145
+ <a href="./QUICKSTART.md"><img src="https://img.shields.io/badge/Quickstart-Iniciar%20R%C3%A1pido-blue?style=for-the-badge&logo=book" alt="Quickstart"></a>
112
146
 
113
147
  ```tsx
148
+
149
+ // Opção 1: Core (headless) + sua própria UI (~86 KB)### 🏗️ Arquitetura Modular (BREAKING CHANGE) </p>
150
+
151
+ import { ConsentProvider } from '@react-lgpd-consent/core'
152
+
153
+
154
+
155
+ // Opção 2: MUI com componentes prontos (~104 KB)
156
+
157
+ import { ConsentProvider } from '@react-lgpd-consent/mui'A v0.5.0 introduz uma **arquitetura monorepo** com 3 pacotes independentes: <p align="center"><strong>Comece por aqui:</strong> siga o <a href="./QUICKSTART.md">Guia de Início Rápido (QUICKSTART.md)</a> para um tutorial passo-a-passo, exemplos TypeScript, tabela de props e integração com MUI — recomendado para usuários novos.</p>
158
+
159
+
160
+
161
+ // Opção 3: Agregador (compatibilidade) (~104 KB)</div>
162
+
163
+ import { ConsentProvider } from 'react-lgpd-consent' // Este pacote
164
+
165
+ ```| Pacote | Descrição | Bundle | Use quando... |
166
+
167
+
168
+
169
+ ---|--------|-----------|--------|---------------|---
170
+
171
+
172
+
173
+ ## 🚀 Instalação| **`@react-lgpd-consent/core`** | Lógica headless sem UI | ~86 KB | Você vai criar sua própria UI customizada |
174
+
175
+
176
+
177
+ ```bash| **`@react-lgpd-consent/mui`** | Componentes Material-UI prontos | ~104 KB | Você quer componentes UI prontos com MUI |## 🚀 Instalação
178
+
179
+ npm install react-lgpd-consent
180
+
181
+ ```| **`react-lgpd-consent`** | Agregador (re-exporta MUI) | ~104 KB | **Compatibilidade com v0.4.x** |
182
+
183
+
184
+
185
+ ### Dependências Peer (instaladas automaticamente se não existirem)```bash
186
+
187
+
188
+
189
+ ```bash> **💡 Este pacote (`react-lgpd-consent`)** é o agregador que mantém compatibilidade retroativa. Ele re-exporta `@react-lgpd-consent/mui` e funciona exatamente como a v0.4.x, mas agora com a nova arquitetura.npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
190
+
191
+ npm install react react-dom @mui/material @emotion/react @emotion/styled
192
+
193
+ ``````
194
+
195
+
196
+
197
+ ---### ✨ Novos Recursos v0.5.0
198
+
199
+
200
+
201
+ ## ⚡ Início Rápido**Dependências peer:** `react`, `react-dom`, `@mui/material` e `js-cookie`.
202
+
203
+
204
+
205
+ ### Setup Básico (3 linhas de código)- ✅ **Auto-injeção de Componentes**: `ConsentProvider` do MUI injeta automaticamente Banner, Modal e Floating Button
206
+
207
+
208
+
209
+ ```tsx- ✅ **Tema MUI Integrado**: Suporte a ThemeProvider opcional com `createDefaultConsentTheme()`---
210
+
114
211
  import { ConsentProvider } from 'react-lgpd-consent'
115
212
 
213
+ - ✅ **Controle Granular**: Props para desabilitar componentes individuais (`disableDefaultBanner`, `disableDefaultModal`, `disableDefaultFloatingButton`)
214
+
116
215
  export default function App() {
117
- return (
118
- <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
119
- <YourApp />
216
+
217
+ return (- ✅ **Warnings de Desenvolvedor**: Sistema inteligente que avisa quando faltam componentes UI (apenas em DEV)## ✨ Novidades v0.4.5
218
+
219
+ <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
220
+
221
+ <YourApp />- ✅ **Monorepo TypeScript**: Paths configurados para melhor DX em IDEs
222
+
120
223
  </ConsentProvider>
224
+
225
+ )### 📊 DataLayer Events para Google Tag Manager
226
+
227
+ }
228
+
229
+ ```### 📦 Migração de v0.4.x → v0.5.0- **Eventos Padronizados**: `consent_initialized` e `consent_updated` disparados automaticamente
230
+
231
+
232
+
233
+ **Isso já inclui:**- **Rastreamento de Origem**: Identifica se decisão veio do banner, modal, reset ou API programática
234
+
235
+ - ✅ Banner de cookies
236
+
237
+ - ✅ Modal de preferências**Se você usa `react-lgpd-consent` (este pacote):**- **Auditoria LGPD**: Histórico completo de mudanças com `changed_categories` e timestamps ISO 8601
238
+
239
+ - ✅ Botão flutuante para reabrir preferências
240
+
241
+ - ✅ Persistência em cookies- **Integração GTM**: Documentação completa com exemplos de triggers e tags
242
+
243
+ - ✅ SSR-safe (Next.js, Remix)
244
+
245
+ ✅ **Nenhuma mudança necessária!** A API é 100% retrocompatível.- **API Pública**: Funções `pushConsentInitializedEvent` e `pushConsentUpdatedEvent` exportadas
246
+
247
+ ### Acessar Estado de Consentimento
248
+
249
+
250
+
251
+ ```tsx
252
+
253
+ import { useConsent } from 'react-lgpd-consent'```tsx### 🔧 Melhorias de CI/CD
254
+
255
+
256
+
257
+ function MyComponent() {// v0.4.x - continua funcionando- **Migração para pnpm**: Workflows atualizados de npm para pnpm, resolvendo conflitos de dependências
258
+
259
+ const { preferences, acceptCategory, rejectCategory } = useConsent()
260
+
261
+ import { ConsentProvider, useConsent } from 'react-lgpd-consent'- **Build Otimizado**: Pipeline mais rápido e confiável
262
+
263
+ if (preferences.analytics) {
264
+
265
+ // Analytics está permitido, carregue scripts
266
+
267
+ }
268
+
269
+ // v0.5.0 - mesma API, mesmos componentes---
270
+
271
+ return (
272
+
273
+ <button onClick={() => acceptCategory('marketing')}>import { ConsentProvider, useConsent } from 'react-lgpd-consent'
274
+
275
+ Aceitar Marketing
276
+
277
+ </button>```## ✨ Novidades v0.4.4
278
+
121
279
  )
280
+
122
281
  }
282
+
123
283
  ```
124
284
 
285
+ **Se você quer otimizar o bundle:**### 🔧 CI/CD e Publicação
286
+
287
+ ### Carregar Scripts Condicionados ao Consentimento
288
+
289
+ - **Workflow de Publicação**: Corrigido bug que impedia publicação automática no npm quando tags eram criadas após merge para `main`
290
+
291
+ ```tsx
292
+
293
+ import { ConsentScriptLoader } from 'react-lgpd-consent'```tsx- **Codecov Integration**: Adicionado upload automático de coverage reports para melhor visualização de cobertura de testes
294
+
295
+
296
+
297
+ function Analytics() {// Opção 1: Core (headless) + sua própria UI (~86 KB)- **Badge de Coverage**: Agora atualizado em tempo real via Codecov
298
+
299
+ return (
300
+
301
+ <ConsentScriptLoaderimport { ConsentProvider } from '@react-lgpd-consent/core'
302
+
303
+ category="analytics"
304
+
305
+ src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"### 📊 Qualidade e Confiabilidade
306
+
307
+ strategy="afterInteractive"
308
+
309
+ >// Opção 2: MUI com componentes prontos (~104 KB)- **Publicação Confiável**: Tags agora são publicadas corretamente quando commit está no histórico da `main`
310
+
311
+ {`
312
+
313
+ window.dataLayer = window.dataLayer || [];import { ConsentProvider } from '@react-lgpd-consent/mui'- **Visibilidade de Cobertura**: Integração completa com Codecov para tracking de qualidade
314
+
315
+ function gtag(){dataLayer.push(arguments);}
316
+
317
+ gtag('js', new Date());
318
+
319
+ gtag('config', 'GA_MEASUREMENT_ID');
320
+
321
+ `}// Opção 3: Agregador (compatibilidade) (~104 KB)---
322
+
323
+ </ConsentScriptLoader>
324
+
325
+ )import { ConsentProvider } from 'react-lgpd-consent' // Este pacote
326
+
327
+ }
328
+
329
+ ``````## ✨ Novidades v0.4.1
330
+
331
+
332
+
333
+ ---
334
+
335
+
336
+
337
+ ## 🎨 Customização---### 🎨 Design Tokens Expandidos
338
+
339
+
340
+
341
+ ### Tema Material-UI- **200+ pontos de customização** (cores, tipografia, espaçamento, layout)
342
+
343
+
344
+
345
+ ```tsx## 🚀 Instalação- **Sistema responsivo** com breakpoints e variações
346
+
347
+ import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
348
+
349
+ - **Acessibilidade nativa** com contrast ratios e focus states
350
+
351
+ <ConsentProvider
352
+
353
+ theme={createDefaultConsentTheme({```bash- **Temas light/dark/auto** com transições suaves
354
+
355
+ palette: {
356
+
357
+ primary: { main: '#your-brand-color' }npm install react-lgpd-consent
358
+
359
+ }
360
+
361
+ })}```### 📝 Sistema Avançado de Textos
362
+
363
+ categories={{ enabledCategories: ['analytics'] }}
364
+
365
+ >- **Templates pré-configurados** para ecommerce, SaaS e governo
366
+
367
+ <App />
368
+
369
+ </ConsentProvider>### Dependências Peer (instaladas automaticamente se não existirem)- **Internacionalização completa** (pt, en, es)
370
+
371
+ ```
372
+
373
+ - **Variações de tom** (formal, casual, técnico)
374
+
375
+ ### Desabilitar Componentes Padrão
376
+
377
+ ```bash- **Resolução automática** baseada em contexto
378
+
379
+ ```tsx
380
+
381
+ import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'npm install react react-dom @mui/material @emotion/react @emotion/styled
382
+
383
+
384
+
385
+ <ConsentProvider```### 🔍 Descoberta de Cookies (Experimental)
386
+
387
+ categories={{ enabledCategories: ['analytics'] }}
388
+
389
+ disableDefaultBanner- **Detecção automática** de cookies em runtime
390
+
391
+ disableDefaultModal
392
+
393
+ >---- **Categorização inteligente** usando padrões LGPD
394
+
395
+ {/* Use seus próprios componentes */}
396
+
397
+ <CookieBanner position="bottom-left" />- **Integração nativa** com sistema de override
398
+
399
+ <PreferencesModal showBranding={false} />
400
+
401
+ <App />## ⚡ Início Rápido
402
+
403
+ </ConsentProvider>
404
+
405
+ ```### ⚠️ Breaking Changes
406
+
407
+
408
+
409
+ ### Design Tokens Avançados### Setup Básico (3 linhas de código)- **Suporte a categorias customizadas**: `setPreference` e `ScriptIntegration.category` agora usam `string` ao invés de `Category`
410
+
411
+
412
+
413
+ ```tsx- **Impacto mínimo**: Código usando strings literais continua funcionando sem alterações
414
+
415
+ <ConsentProvider
416
+
417
+ categories={{ enabledCategories: ['analytics'] }}```tsx- **Consulte**: [CHANGELOG.md](./CHANGELOG.md) para guia de migração completo
418
+
419
+ designTokens={{
420
+
421
+ colors: {import { ConsentProvider } from 'react-lgpd-consent'
422
+
423
+ primary: '#1976d2',
424
+
425
+ secondary: '#dc004e',---
426
+
427
+ background: '#ffffff',
428
+
429
+ },export default function App() {
430
+
431
+ layout: {
432
+
433
+ backdropColor: 'rgba(0, 0, 0, 0.8)', return (## 📖 Uso Básico
434
+
435
+ bannerPosition: 'bottom-center',
436
+
437
+ }, <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
438
+
439
+ typography: {
440
+
441
+ fontFamily: 'Inter, sans-serif', <YourApp />Envolva sua aplicação com o `ConsentProvider` (exemplo mínimo):
442
+
443
+ }
444
+
445
+ }} </ConsentProvider>
446
+
447
+ >
448
+
449
+ <App /> )```tsx
450
+
451
+ </ConsentProvider>
452
+
453
+ ```}import { ConsentProvider } from 'react-lgpd-consent'
454
+
455
+
456
+
457
+ ---```
458
+
459
+
460
+
461
+ ## 📚 Documentaçãoexport default function App() {
462
+
463
+
464
+
465
+ ### 📖 Guias Completos (GitHub)**Isso já inclui:** return (
466
+
467
+
468
+
469
+ - [**📚 Quickstart**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md): Tutorial passo-a-passo com exemplos TypeScript- ✅ Banner de cookies <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
470
+
471
+ - [**🏗️ API Reference**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md): Referência completa de componentes, hooks e tipos
472
+
473
+ - [**⚖️ Conformidade LGPD**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md): Detalhes sobre compliance e auditoria- ✅ Modal de preferências <YourApp />
474
+
475
+ - [**🔌 Integrações**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md): Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
476
+
477
+ - [**🏛️ Arquitetura**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md): Detalhes da arquitetura monorepo v0.5.0- ✅ Botão flutuante para reabrir preferências </ConsentProvider>
478
+
479
+ - [**📝 Changelog**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md): Histórico completo de versões
480
+
481
+ - ✅ Persistência em cookies )
482
+
483
+ ### 🎨 Documentação Interativa (GitHub Pages)
484
+
485
+ - ✅ SSR-safe (Next.js, Remix)}
486
+
487
+ - [**🎭 Storybook - Playground Interativo**](https://lucianoedipo.github.io/react-lgpd-consent/storybook/): Explore e teste todos os componentes em tempo real
488
+
489
+ - [**⚙️ TypeDoc - API Docs**](https://lucianoedipo.github.io/react-lgpd-consent/docs/): Documentação da API gerada automaticamente```
490
+
491
+ - [**🏠 Portal de Documentação**](https://lucianoedipo.github.io/react-lgpd-consent/): Navegação central entre todas as docs
492
+
493
+ ### Acessar Estado de Consentimento
494
+
495
+ ---
496
+
125
497
  ## Nota sobre ThemeProvider e tema padrão
126
498
 
127
- A biblioteca não cria um `ThemeProvider` global automaticamente. Ela tenta herdar o tema do seu app quando você já possui um `ThemeProvider` do MUI. Se você quiser aplicar explicitamente um tema de fallback para os componentes de consentimento, use a fábrica exportada `createDefaultConsentTheme()` e passe via prop `theme`:
499
+ ## 🔌 Integrações Nativas
500
+
501
+ ```tsx
502
+
503
+ A biblioteca possui integrações prontas para:
504
+
505
+ import { useConsent } from 'react-lgpd-consent'A biblioteca não cria um `ThemeProvider` global automaticamente. Ela tenta herdar o tema do seu app quando você já possui um `ThemeProvider` do MUI. Se você quiser aplicar explicitamente um tema de fallback para os componentes de consentimento, use a fábrica exportada `createDefaultConsentTheme()` e passe via prop `theme`:
506
+
507
+ - ✅ **Google Analytics 4** (GA4)
508
+
509
+ - ✅ **Google Tag Manager** (GTM)
510
+
511
+ - ✅ **Facebook Pixel**
512
+
513
+ - ✅ **Hotjar**function MyComponent() {```tsx
514
+
515
+ - ✅ **Microsoft Clarity**
516
+
517
+ - ✅ **Mixpanel** const { preferences, acceptCategory, rejectCategory } = useConsent()import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
518
+
519
+ - ✅ **Intercom**
520
+
521
+ - ✅ **Zendesk**
522
+
523
+ - ✅ **UserWay** (Acessibilidade)
524
+
525
+ if (preferences.analytics) {// Aplica um tema de fallback somente para os componentes da lib
526
+
527
+ ```tsx
528
+
529
+ import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent' // Analytics está permitido, carregue scripts;<ConsentProvider
530
+
531
+
532
+
533
+ <ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} /> } theme={createDefaultConsentTheme()}
534
+
535
+ ```
536
+
537
+ categories={{ enabledCategories: ['analytics'] }}
538
+
539
+ [**Ver guia completo de integrações →**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)
540
+
541
+ return (>
542
+
543
+ ---
544
+
545
+ <button onClick={() => acceptCategory('marketing')}> <App />
546
+
547
+ ## 🧩 Ecossistema de Pacotes
548
+
549
+ Aceitar Marketing</ConsentProvider>
550
+
551
+ ```
552
+
553
+ react-lgpd-consent (este pacote - agregador) </button>```
554
+
555
+ ├── @react-lgpd-consent/core # Headless (86 KB)
556
+
557
+ └── @react-lgpd-consent/mui # MUI Components (104 KB) )
558
+
559
+ ```
560
+
561
+ }Evite depender de criação de tema no import (isso evita side-effects e problemas em SSR). Se você precisar de compatibilidade retroativa com quem importava `defaultConsentTheme`, entre em contato para adicionarmos um export compatível com deprecação documentada.
562
+
563
+ ### Quando usar cada pacote?
564
+
565
+ ```
566
+
567
+ | Cenário | Pacote Recomendado |
568
+
569
+ |---------|-------------------|## 📚 Documentação Completa
570
+
571
+ | **Migração de v0.4.x** | `react-lgpd-consent` (este) |
572
+
573
+ | **UI customizada completa** | `@react-lgpd-consent/core` |### Carregar Scripts Condicionados ao Consentimento
574
+
575
+ | **Componentes MUI prontos** | `@react-lgpd-consent/mui` |
576
+
577
+ | **Novo projeto com MUI** | `@react-lgpd-consent/mui` |Para mais detalhes sobre customização, hooks e funcionalidades, consulte os seguintes guias:
578
+
579
+ | **Bundle otimizado** | `@react-lgpd-consent/core` |
128
580
 
129
581
  ```tsx
582
+
583
+ ---
584
+
585
+ import { ConsentScriptLoader } from 'react-lgpd-consent'### 📋 Documentação Principal
586
+
587
+ ## 🌟 Características
588
+
589
+
590
+
591
+ - ✅ **TypeScript First**: Tipos completos e inferência automática
592
+
593
+ - ✅ **SSR-Safe**: Compatível com Next.js (App Router + Pages Router), Remixfunction Analytics() {- **[📚 Guia de Início Rápido (`QUICKSTART.md`)](./QUICKSTART.md)**: Tutorial passo a passo com exemplos práticos, tabela completa de props, debugging e integrações.
594
+
595
+ - ✅ **Zero Config**: Funciona out-of-the-box com defaults sensatos
596
+
597
+ - ✅ **Acessível**: WCAG 2.1 AA compliance, keyboard navigation, screen readers return ( - Seção recomendada: “SSR/Next.js (App Router) — Padrões seguros” com boas práticas de `'use client'`, `dynamic({ ssr: false })` e ordem dos provedores/estilos (MUI/Emotion) para evitar hydration mismatch.
598
+
599
+ - ✅ **Responsivo**: Mobile-first design com breakpoints adaptativos
600
+
601
+ - ✅ **Tree-shakeable**: Import apenas o que você usa <ConsentScriptLoader - Novo na v0.4.0: suporte a `customCategories` — veja a seção “Categorias customizadas (customCategories)” no Quickstart.
602
+
603
+ - ✅ **Temas**: Light/Dark/Auto com transições suaves
604
+
605
+ - ✅ **i18n**: Suporte a múltiplos idiomas (pt-BR, en, es) category="analytics" - Novo na v0.4.1: integrações nativas para Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom e Zendesk — veja o guia [INTEGRACOES.md](./INTEGRACOES.md).
606
+
607
+ - ✅ **Auditável**: Logs de desenvolvedor e eventos DataLayer para GTM
608
+
609
+ src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" - Dica: use `designTokens.layout.backdrop: 'auto'` para backdrop sensível ao tema no banner bloqueante.
610
+
611
+ ---
612
+
613
+ strategy="afterInteractive" - Auto-config de categorias: a biblioteca detecta categorias requeridas pelas integrações e exibe os toggles mesmo se você esquecer de habilitar (valor inicial sempre rejeitado). Recomendamos explicitar em `categories.enabledCategories` para clareza.
614
+
615
+ ## 🤝 Contribuindo
616
+
617
+ > - Páginas de Política/Termos não bloqueadas: se `policyLinkUrl` e/ou `termsLinkUrl` apontarem para a página atual, o overlay bloqueante não é aplicado — garantindo legibilidade destas páginas.
618
+
619
+ Contribuições são bem-vindas! Veja o [Guia de Desenvolvimento](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
620
+
621
+ {`- **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
622
+
623
+ 1. Fork o repositório
624
+
625
+ 2. Crie uma branch: `git checkout -b feature/minha-feature` window.dataLayer = window.dataLayer || [];- **[Guia de Conformidade (`CONFORMIDADE.md`)](./CONFORMIDADE.md)**: Detalhes sobre as funcionalidades de conformidade com a LGPD.
626
+
627
+ 3. Commit: `git commit -m 'feat: minha nova feature'`
628
+
629
+ 4. Push: `git push origin feature/minha-feature` function gtag(){dataLayer.push(arguments);}- **[Guia de Integrações (`INTEGRACOES.md`)](./INTEGRACOES.md)**: Como usar as integrações nativas e criar as suas.
630
+
631
+ 5. Abra um Pull Request
632
+
633
+ gtag('js', new Date());
634
+
635
+ ---
636
+
637
+ gtag('config', 'GA_MEASUREMENT_ID');### 🎨 Documentação Interativa (GitHub Pages)
638
+
639
+ ## 📄 Licença
640
+
641
+ `}
642
+
643
+ MIT © [Luciano Edipo](https://github.com/lucianoedipo)
644
+
645
+ </ConsentScriptLoader>- **[📖 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real com controles interativos.
646
+
647
+ ---
648
+
649
+ )- **[⚙️ TypeDoc - Referência de API](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação completa da API gerada automaticamente.
650
+
651
+ ## 🔗 Links Úteis
652
+
653
+ }- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Página inicial com navegação entre todas as documentações.
654
+
655
+ - [**GitHub Repository**](https://github.com/lucianoedipo/react-lgpd-consent)
656
+
657
+ - [**NPM Package**](https://www.npmjs.com/package/react-lgpd-consent)```
658
+
659
+ - [**Issues & Bugs**](https://github.com/lucianoedipo/react-lgpd-consent/issues)
660
+
661
+ - [**Changelog**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)---
662
+
663
+
664
+
665
+ ------
666
+
667
+
668
+
669
+ <div align="center">## 🤝 Como Contribuir
670
+
671
+ <sub>Feito com ❤️ para a comunidade React brasileira</sub>
672
+
673
+ </div>## 🎨 Customização
674
+
675
+
676
+ 1. Abra uma [Issue](https://github.com/lucianoedipo/react-lgpd-consent/issues) para bugs ou melhorias.
677
+
678
+ ### Tema Material-UI2. Siga o Guia de Desenvolvimento em `DEVELOPMENT.md` para enviar um PR.
679
+
680
+
681
+
682
+ ```tsx---
683
+
130
684
  import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
131
685
 
132
- // Aplica um tema de fallback somente para os componentes da lib
133
- ;<ConsentProvider
134
- theme={createDefaultConsentTheme()}
686
+ ## 📄 Licença
687
+
688
+ <ConsentProvider
689
+
690
+ theme={createDefaultConsentTheme({MIT — veja o arquivo `LICENSE`.
691
+
692
+ palette: {
693
+ primary: { main: '#your-brand-color' }
694
+ }
695
+ })}
696
+ categories={{ enabledCategories: ['analytics'] }}
697
+ >
698
+ <App />
699
+ </ConsentProvider>
700
+ ```
701
+
702
+ ### Desabilitar Componentes Padrão
703
+
704
+ ```tsx
705
+ import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'
706
+
707
+ <ConsentProvider
135
708
  categories={{ enabledCategories: ['analytics'] }}
709
+ disableDefaultBanner
710
+ disableDefaultModal
136
711
  >
712
+ {/* Use seus próprios componentes */}
713
+ <CookieBanner position="bottom-left" />
714
+ <PreferencesModal showBranding={false} />
137
715
  <App />
138
716
  </ConsentProvider>
139
717
  ```
140
718
 
141
- Evite depender de criação de tema no import (isso evita side-effects e problemas em SSR). Se você precisar de compatibilidade retroativa com quem importava `defaultConsentTheme`, entre em contato para adicionarmos um export compatível com deprecação documentada.
719
+ ### Design Tokens Avançados
720
+
721
+ ```tsx
722
+ <ConsentProvider
723
+ categories={{ enabledCategories: ['analytics'] }}
724
+ designTokens={{
725
+ colors: {
726
+ primary: '#1976d2',
727
+ secondary: '#dc004e',
728
+ background: '#ffffff',
729
+ },
730
+ layout: {
731
+ backdropColor: 'rgba(0, 0, 0, 0.8)',
732
+ bannerPosition: 'bottom-center',
733
+ },
734
+ typography: {
735
+ fontFamily: 'Inter, sans-serif',
736
+ }
737
+ }}
738
+ >
739
+ <App />
740
+ </ConsentProvider>
741
+ ```
142
742
 
143
- ## 📚 Documentação Completa
743
+ ---
144
744
 
145
- Para mais detalhes sobre customização, hooks e funcionalidades, consulte os seguintes guias:
745
+ ## 📚 Documentação
146
746
 
147
- ### 📋 Documentação Principal
747
+ ### 📖 Guias Completos (GitHub)
148
748
 
149
- - **[📚 Guia de Início Rápido (`QUICKSTART.md`)](./QUICKSTART.md)**: Tutorial passo a passo com exemplos práticos, tabela completa de props, debugging e integrações.
150
- - Seção recomendada: “SSR/Next.js (App Router) — Padrões seguros” com boas práticas de `'use client'`, `dynamic({ ssr: false })` e ordem dos provedores/estilos (MUI/Emotion) para evitar hydration mismatch.
151
- - Novo na v0.4.0: suporte a `customCategories` — veja a seção “Categorias customizadas (customCategories)” no Quickstart.
152
- - Novo na v0.4.1: integrações nativas para Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom e Zendesk — veja o guia [INTEGRACOES.md](./INTEGRACOES.md).
153
- - Dica: use `designTokens.layout.backdrop: 'auto'` para backdrop sensível ao tema no banner bloqueante.
154
- - Auto-config de categorias: a biblioteca detecta categorias requeridas pelas integrações e exibe os toggles mesmo se você esquecer de habilitar (valor inicial sempre rejeitado). Recomendamos explicitar em `categories.enabledCategories` para clareza.
155
- - Páginas de Política/Termos não bloqueadas: se `policyLinkUrl` e/ou `termsLinkUrl` apontarem para a página atual, o overlay bloqueante não é aplicado — garantindo legibilidade destas páginas.
156
- - **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
157
- - **[Guia de Conformidade (`CONFORMIDADE.md`)](./CONFORMIDADE.md)**: Detalhes sobre as funcionalidades de conformidade com a LGPD.
158
- - **[Guia de Integrações (`INTEGRACOES.md`)](./INTEGRACOES.md)**: Como usar as integrações nativas e criar as suas.
749
+ - **[📚 Quickstart](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md)**: Tutorial passo-a-passo com exemplos TypeScript
750
+ - **[🏗️ API Reference](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md)**: Referência completa de componentes, hooks e tipos
751
+ - **[⚖️ Conformidade LGPD](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md)**: Detalhes sobre compliance e auditoria
752
+ - **[🔌 Integrações](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**: Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
753
+ - **[🏛️ Arquitetura](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md)**: Detalhes da arquitetura monorepo v0.5.0
754
+ - **[📝 Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**: Histórico completo de versões
159
755
 
160
756
  ### 🎨 Documentação Interativa (GitHub Pages)
161
757
 
162
- - **[📖 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real com controles interativos.
163
- - **[⚙️ TypeDoc - Referência de API](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação completa da API gerada automaticamente.
164
- - **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Página inicial com navegação entre todas as documentações.
758
+ - **[🎭 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real
759
+ - **[⚙️ TypeDoc - API Docs](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação da API gerada automaticamente
760
+ - **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Navegação central entre todas as docs
165
761
 
166
762
  ---
167
763
 
168
- ## 🤝 Como Contribuir
764
+ ## 🔌 Integrações Nativas
169
765
 
170
- 1. Abra uma [Issue](https://github.com/lucianoedipo/react-lgpd-consent/issues) para bugs ou melhorias.
171
- 2. Siga o Guia de Desenvolvimento em `DEVELOPMENT.md` para enviar um PR.
766
+ A biblioteca possui integrações prontas para:
767
+
768
+ - ✅ **Google Analytics 4** (GA4)
769
+ - ✅ **Google Tag Manager** (GTM)
770
+ - ✅ **Facebook Pixel**
771
+ - ✅ **Hotjar**
772
+ - ✅ **Microsoft Clarity**
773
+ - ✅ **Mixpanel**
774
+ - ✅ **Intercom**
775
+ - ✅ **Zendesk**
776
+ - ✅ **UserWay** (Acessibilidade)
777
+
778
+ ```tsx
779
+ import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
780
+
781
+ <ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />
782
+ ```
783
+
784
+ **[Ver guia completo de integrações →](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**
785
+
786
+ ---
787
+
788
+ ## 🧩 Ecossistema de Pacotes
789
+
790
+ ```
791
+ react-lgpd-consent (este pacote - agregador)
792
+ ├── @react-lgpd-consent/core # Headless (86 KB)
793
+ └── @react-lgpd-consent/mui # MUI Components (104 KB)
794
+ ```
795
+
796
+ ### Quando usar cada pacote?
797
+
798
+ | Cenário | Pacote Recomendado |
799
+ |---------|-------------------|
800
+ | **Migração de v0.4.x** | `react-lgpd-consent` (este) |
801
+ | **UI customizada completa** | `@react-lgpd-consent/core` |
802
+ | **Componentes MUI prontos** | `@react-lgpd-consent/mui` |
803
+ | **Novo projeto com MUI** | `@react-lgpd-consent/mui` |
804
+ | **Bundle otimizado** | `@react-lgpd-consent/core` |
805
+
806
+ ---
807
+
808
+ ## 🌟 Características
809
+
810
+ - ✅ **TypeScript First**: Tipos completos e inferência automática
811
+ - ✅ **SSR-Safe**: Compatível com Next.js (App Router + Pages Router), Remix
812
+ - ✅ **Zero Config**: Funciona out-of-the-box com defaults sensatos
813
+ - ✅ **Acessível**: WCAG 2.1 AA compliance, keyboard navigation, screen readers
814
+ - ✅ **Responsivo**: Mobile-first design com breakpoints adaptativos
815
+ - ✅ **Tree-shakeable**: Import apenas o que você usa
816
+ - ✅ **Temas**: Light/Dark/Auto com transições suaves
817
+ - ✅ **i18n**: Suporte a múltiplos idiomas (pt-BR, en, es)
818
+ - ✅ **Auditável**: Logs de desenvolvedor e eventos DataLayer para GTM
819
+
820
+ ---
821
+
822
+ ## 🤝 Contribuindo
823
+
824
+ Contribuições são bem-vindas! Veja o [Guia de Desenvolvimento](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
825
+
826
+ 1. Fork o repositório
827
+ 2. Crie uma branch: `git checkout -b feature/minha-feature`
828
+ 3. Commit: `git commit -m 'feat: minha nova feature'`
829
+ 4. Push: `git push origin feature/minha-feature`
830
+ 5. Abra um Pull Request
172
831
 
173
832
  ---
174
833
 
175
834
  ## 📄 Licença
176
835
 
177
- MIT — veja o arquivo `LICENSE`.
836
+ MIT © [Luciano Edipo](https://github.com/lucianoedipo)
837
+
838
+ ---
839
+
840
+ ## 🔗 Links Úteis
841
+
842
+ - **[GitHub Repository](https://github.com/lucianoedipo/react-lgpd-consent)**
843
+ - **[NPM Package](https://www.npmjs.com/package/react-lgpd-consent)**
844
+ - **[Issues & Bugs](https://github.com/lucianoedipo/react-lgpd-consent/issues)**
845
+ - **[Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**
846
+
847
+ ---
848
+
849
+ <div align="center">
850
+ <sub>Feito com ❤️ para a comunidade React brasileira</sub>
851
+ </div>