react-lgpd-consent 0.5.1 → 0.5.3

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