react-lgpd-consent 0.5.3 → 0.5.4

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 (6) hide show
  1. package/API.md +576 -0
  2. package/CHANGELOG.md +3 -3
  3. package/QUICKSTART.md +90 -11
  4. package/README.en.md +67 -396
  5. package/README.md +73 -1131
  6. package/package.json +6 -4
package/README.md CHANGED
@@ -1,1192 +1,134 @@
1
- <div align="center"><div align="center"><div align="center"><div align="center">
1
+ <!-- Package README for the `react-lgpd-consent` aggregator package -->
2
+ # react-lgpd-consent 🍪
2
3
 
3
- <h1>react-lgpd-consent 🍪</h1>
4
+ Gerenciamento de consentimento de cookies em conformidade com a LGPD — pacote agregador que re-exporta os componentes MUI por conveniência. Se você precisa só da lógica headless ou de um bundle menor, prefira `@react-lgpd-consent/core` ou `@react-lgpd-consent/mui` conforme o seu caso.
4
5
 
5
- <p><strong>Gerenciamento de consentimento de cookies em conformidade com a LGPD</strong></p> <h1>react-lgpd-consent 🍪</h1>
6
-
7
-
8
-
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
-
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
-
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
-
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>
64
-
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>
6
+ <!-- Badges (mantidos) -->
7
+ [![NPM Version](https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white)](https://www.npmjs.com/package/react-lgpd-consent)
8
+ [![Downloads](https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white)](https://www.npmjs.com/package/react-lgpd-consent)
9
+ [![License](https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white)](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE)
10
+ [![Coverage](https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white)](https://codecov.io/gh/lucianoedipo/react-lgpd-consent)
66
11
 
67
12
  ---
68
13
 
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>
14
+ ## Descrição
98
15
 
99
- ### ✨ Novos Recursos v0.5.0
16
+ `react-lgpd-consent` é o pacote agregador compatível com versões anteriores (v0.4.x → v0.5.x). Ele re-exporta os componentes prontos em MUI e facilita a migração. Para projetos mais otimizados, considere importar diretamente `@react-lgpd-consent/core` (headless) ou `@react-lgpd-consent/mui` (componentes MUI).
100
17
 
101
- <a href="#-instalação"><strong>Instalação</strong></a> •
18
+ Principais características:
102
19
 
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'
20
+ - Banner de cookies, modal de preferências e botão flutuante prontos (MUI)
21
+ - Carregamento condicional de scripts com base no consentimento
22
+ - SSR-safe (compatível com Next.js / Remix)
23
+ - Eventos auditáveis (consent_initialized, consent_updated)
132
24
 
133
25
  ---
134
26
 
135
- // v0.5.0 - mesma API, mesmos componentes
27
+ ## Instalação
136
28
 
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 />
29
+ Instale o pacote e as peer-dependencies se necessário:
178
30
 
31
+ ```powershell
179
32
  npm install react-lgpd-consent
33
+ npm install react react-dom @mui/material @emotion/react @emotion/styled js-cookie --save-peer
34
+ ```
180
35
 
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
-
36
+ Observação: `react-lgpd-consent` é o agregador (re-exporta `@react-lgpd-consent/mui`). Para otimizar bundle, importe apenas o pacote que você precisa.
211
37
 
38
+ ---
212
39
 
213
- ```tsx- ✅ **Controle Granular**: Props para desabilitar componentes individuais (`disableDefaultBanner`, `disableDefaultModal`, `disableDefaultFloatingButton`)
40
+ ## Início rápido
214
41
 
215
- import { ConsentProvider } from 'react-lgpd-consent'
42
+ Exemplo mínimo (mantém compatibilidade com v0.4.x):
216
43
 
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> •
44
+ ```tsx
45
+ import React from 'react'
46
+ import { ConsentProvider, useConsent } from 'react-lgpd-consent'
218
47
 
219
48
  export default function App() {
220
-
221
- return (- ✅ **Monorepo TypeScript**: Paths configurados para melhor DX em IDEs
222
-
49
+ return (
223
50
  <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
-
51
+ <YourApp />
227
52
  </ConsentProvider>
228
-
229
- )### 📦 Migração de v0.4.x → v0.5.0
230
-
53
+ )
231
54
  }
232
55
 
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) -->
56
+ function YourApp() {
57
+ const { preferences, acceptCategory } = useConsent()
274
58
 
275
59
  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
-
60
+ <div>
61
+ <button onClick={() => acceptCategory('marketing')}>Aceitar Marketing</button>
62
+ </div>
283
63
  )
284
-
285
- }**Se você quer otimizar o bundle:**
286
-
64
+ }
287
65
  ```
288
66
 
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
67
+ Para carregar scripts condicionados ao consentimento:
292
68
 
293
69
  ```tsx
70
+ import { ConsentScriptLoader } from 'react-lgpd-consent'
294
71
 
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
-
72
+ function Analytics() {
303
73
  return (
304
-
305
74
  <ConsentScriptLoader
306
-
307
75
  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
-
76
+ src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
311
77
  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
-
78
+ >
79
+ {`window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID');`}
327
80
  </ConsentScriptLoader>
328
-
329
- )```| Pacote | Descrição | Bundle | Use quando... |
330
-
81
+ )
331
82
  }
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
83
  ```
376
84
 
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
85
  ---
462
86
 
87
+ ## Pacotes (monorepo v0.5.x)
463
88
 
89
+ | Pacote | Descrição |
90
+ |---|---|
91
+ | `@react-lgpd-consent/core` | Lógica headless (sem UI) — recomendado para UI customizada |
92
+ | `@react-lgpd-consent/mui` | Componentes prontos em MUI |
93
+ | `react-lgpd-consent` | Agregador (re-exporta MUI) — compatibilidade retroativa |
464
94
 
465
- ## 📚 Documentação**Isso já inclui:**- **Rastreamento de Origem**: Identifica se decisão veio do banner, modal, reset ou API programática
466
-
467
-
95
+ ---
468
96
 
469
- ### 📖 Guias Completos (GitHub)- ✅ Banner de cookies
97
+ ## Documentação e exemplos
470
98
 
99
+ - Quickstart: `QUICKSTART.md` (tutoriais e exemplos) — veja no repositório
100
+ - API Reference: `API.md`
101
+ - Integrações: `INTEGRACOES.md`
102
+ - Storybook: https://lucianoedipo.github.io/react-lgpd-consent/storybook/
103
+ - TypeDoc: https://lucianoedipo.github.io/react-lgpd-consent/docs/
471
104
 
105
+ ---
472
106
 
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
107
+ ## Contribuindo
474
108
 
475
- - **[🏗️ API Reference](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md)**: Referência completa de componentes, hooks e tipos
109
+ Leia `DEVELOPMENT.md` no repositório principal. Fluxo sugerido:
476
110
 
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
111
+ 1. Fork
112
+ 2. Branch: `git checkout -b feat/minha-feature`
113
+ 3. Commit: `git commit -m "feat: descrição"`
114
+ 4. Push e abra PR
478
115
 
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
-
497
-
498
-
499
- ---
500
-
501
- ```tsx
502
-
503
- ## 🔌 Integrações Nativas
504
-
505
- import { useConsent } from 'react-lgpd-consent'```tsx### 🔧 Melhorias de CI/CD
506
-
507
- A biblioteca possui integrações prontas para:
508
-
509
-
510
-
511
- - ✅ **Google Analytics 4** (GA4)
512
-
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
514
-
515
- - ✅ **Facebook Pixel**
516
-
517
- - ✅ **Hotjar** const { preferences, acceptCategory, rejectCategory } = useConsent()
518
-
519
- - ✅ **Microsoft Clarity**
520
-
521
- - ✅ **Mixpanel**import { ConsentProvider, useConsent } from 'react-lgpd-consent'- **Build Otimizado**: Pipeline mais rápido e confiável
522
-
523
- - ✅ **Intercom**
524
-
525
- - ✅ **Zendesk** if (preferences.analytics) {
526
-
527
- - ✅ **UserWay** (Acessibilidade)
528
-
529
- // Analytics está permitido, carregue scripts
530
-
531
- ```tsx
532
-
533
- import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent' }
534
-
535
-
536
-
537
- <ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />// v0.5.0 - mesma API, mesmos componentes---
538
-
539
- ```
540
-
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'
546
-
547
- ---
548
-
549
- Aceitar Marketing
550
-
551
- ## 🧩 Ecossistema de Pacotes
552
-
553
- </button>```## ✨ Novidades v0.4.4
554
-
555
- ```
556
-
557
- react-lgpd-consent (este pacote - agregador) )
558
-
559
- ├── @react-lgpd-consent/core # Headless (86 KB)
560
-
561
- └── @react-lgpd-consent/mui # MUI Components (104 KB)}
562
-
563
- ```
564
-
565
- ```
566
-
567
- ### Quando usar cada pacote?
568
-
569
- **Se você quer otimizar o bundle:**### 🔧 CI/CD e Publicação
570
-
571
- | Cenário | Pacote Recomendado |
572
-
573
- |---------|-------------------|### Carregar Scripts Condicionados ao Consentimento
574
-
575
- | **Migração de v0.4.x** | `react-lgpd-consent` (este) |
576
-
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`
578
-
579
- | **Componentes MUI prontos** | `@react-lgpd-consent/mui` |
580
-
581
- | **Novo projeto com MUI** | `@react-lgpd-consent/mui` |```tsx
582
-
583
- | **Bundle otimizado** | `@react-lgpd-consent/core` |
584
-
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
586
-
587
- ---
588
-
589
-
590
-
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
596
-
597
- - ✅ **SSR-Safe**: Compatível com Next.js (App Router + Pages Router), Remix return (
598
-
599
- - ✅ **Zero Config**: Funciona out-of-the-box com defaults sensatos
600
-
601
- - ✅ **Acessível**: WCAG 2.1 AA compliance, keyboard navigation, screen readers <ConsentScriptLoaderimport { ConsentProvider } from '@react-lgpd-consent/core'
602
-
603
- - ✅ **Responsivo**: Mobile-first design com breakpoints adaptativos
604
-
605
- - ✅ **Tree-shakeable**: Import apenas o que você usa category="analytics"
606
-
607
- - ✅ **Temas**: Light/Dark/Auto com transições suaves
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
610
-
611
- - ✅ **Auditável**: Logs de desenvolvedor e eventos DataLayer para GTM
612
-
613
- strategy="afterInteractive"
614
-
615
- ---
616
-
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`
618
-
619
- ## 🤝 Contribuindo
620
-
621
- {`
622
-
623
- Contribuições são bem-vindas! Veja o [Guia de Desenvolvimento](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
624
-
625
- window.dataLayer = window.dataLayer || [];import { ConsentProvider } from '@react-lgpd-consent/mui'- **Visibilidade de Cobertura**: Integração completa com Codecov para tracking de qualidade
626
-
627
- 1. Fork o repositório
628
-
629
- 2. Crie uma branch: `git checkout -b feature/minha-feature` function gtag(){dataLayer.push(arguments);}
630
-
631
- 3. Commit: `git commit -m 'feat: minha nova feature'`
632
-
633
- 4. Push: `git push origin feature/minha-feature` gtag('js', new Date());
634
-
635
- 5. Abra um Pull Request
636
-
637
- gtag('config', 'GA_MEASUREMENT_ID');
638
-
639
- ---
640
-
641
- `}// Opção 3: Agregador (compatibilidade) (~104 KB)---
642
-
643
- ## 📄 Licença
644
-
645
- </ConsentScriptLoader>
646
-
647
- MIT © [Luciano Edipo](https://github.com/lucianoedipo)
648
-
649
- )import { ConsentProvider } from 'react-lgpd-consent' // Este pacote
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
674
-
675
-
676
-
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)
682
-
683
-
684
-
685
-
686
- ```tsx## 🚀 Instalação- **Sistema responsivo** com breakpoints e variações
687
-
688
- import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
689
-
690
- - **Acessibilidade nativa** com contrast ratios e focus states
691
-
692
- <ConsentProvider
693
-
694
- theme={createDefaultConsentTheme({```bash- **Temas light/dark/auto** com transições suaves
695
-
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
707
-
708
- <App />
709
-
710
- </ConsentProvider>### Dependências Peer (instaladas automaticamente se não existirem)- **Internacionalização completa** (pt, en, es)
711
-
712
- ```
713
-
714
- - **Variações de tom** (formal, casual, técnico)
715
-
716
- ### Desabilitar Componentes Padrão
717
-
718
- ```bash- **Resolução automática** baseada em contexto
719
-
720
- ```tsx
721
-
722
- import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'npm install react react-dom @mui/material @emotion/react @emotion/styled
723
-
724
-
725
-
726
- <ConsentProvider```### 🔍 Descoberta de Cookies (Experimental)
727
-
728
- categories={{ enabledCategories: ['analytics'] }}
729
-
730
- disableDefaultBanner- **Detecção automática** de cookies em runtime
731
-
732
- disableDefaultModal
733
-
734
- >---- **Categorização inteligente** usando padrões LGPD
735
-
736
- {/* Use seus próprios componentes */}
737
-
738
- <CookieBanner position="bottom-left" />- **Integração nativa** com sistema de override
739
-
740
- <PreferencesModal showBranding={false} />
741
-
742
- <App />## ⚡ Início Rápido
743
-
744
- </ConsentProvider>
745
-
746
- ```### ⚠️ Breaking Changes
747
-
748
-
749
-
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`
751
-
752
-
753
-
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'
795
-
796
-
797
-
798
- ---```
799
-
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
821
-
822
- - ✅ Persistência em cookies )
823
-
824
- ### 🎨 Documentação Interativa (GitHub Pages)
825
-
826
- - ✅ SSR-safe (Next.js, Remix)}
827
-
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
833
-
834
- ### Acessar Estado de Consentimento
835
-
836
- ---
837
-
838
- ## Nota sobre ThemeProvider e tema padrão
839
-
840
- ## 🔌 Integrações Nativas
841
-
842
- ```tsx
843
-
844
- A biblioteca possui integrações prontas para:
845
-
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`:
847
-
848
- - ✅ **Google Analytics 4** (GA4)
849
-
850
- - ✅ **Google Tag Manager** (GTM)
851
-
852
- - ✅ **Facebook Pixel**
853
-
854
- - ✅ **Hotjar**function MyComponent() {```tsx
855
-
856
- - ✅ **Microsoft Clarity**
857
-
858
- - ✅ **Mixpanel** const { preferences, acceptCategory, rejectCategory } = useConsent()import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
859
-
860
- - ✅ **Intercom**
861
-
862
- - ✅ **Zendesk**
863
-
864
- - ✅ **UserWay** (Acessibilidade)
865
-
866
- if (preferences.analytics) {// Aplica um tema de fallback somente para os componentes da lib
867
-
868
- ```tsx
869
-
870
- import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent' // Analytics está permitido, carregue scripts;<ConsentProvider
871
-
872
-
873
-
874
- <ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} /> } theme={createDefaultConsentTheme()}
116
+ Antes de criar PR execute a pipeline local sugerida:
875
117
 
118
+ ```powershell
119
+ npm run type-check
120
+ npm test
121
+ npm run lint
122
+ npm run build
123
+ npm run docs:generate
876
124
  ```
877
125
 
878
- categories={{ enabledCategories: ['analytics'] }}
879
-
880
- [**Ver guia completo de integrações →**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)
881
-
882
- return (>
883
-
884
- ---
885
-
886
- <button onClick={() => acceptCategory('marketing')}> <App />
887
-
888
- ## 🧩 Ecossistema de Pacotes
889
-
890
- Aceitar Marketing</ConsentProvider>
891
-
892
- ```
893
-
894
- react-lgpd-consent (este pacote - agregador) </button>```
895
-
896
- ├── @react-lgpd-consent/core # Headless (86 KB)
897
-
898
- └── @react-lgpd-consent/mui # MUI Components (104 KB) )
899
-
900
- ```
901
-
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.
903
-
904
- ### Quando usar cada pacote?
905
-
906
- ```
907
-
908
- | Cenário | Pacote Recomendado |
909
-
910
- |---------|-------------------|## 📚 Documentação Completa
911
-
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` |
921
-
922
- ```tsx
923
-
924
- ---
925
-
926
- import { ConsentScriptLoader } from 'react-lgpd-consent'### 📋 Documentação Principal
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.
939
-
940
- - ✅ **Responsivo**: Mobile-first design com breakpoints adaptativos
941
-
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.
943
-
944
- - ✅ **Temas**: Light/Dark/Auto com transições suaves
945
-
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).
947
-
948
- - ✅ **Auditável**: Logs de desenvolvedor e eventos DataLayer para GTM
949
-
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.
951
-
952
- ---
953
-
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.
955
-
956
- ## 🤝 Contribuindo
957
-
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.
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
-
962
- {`- **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
963
-
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.
971
-
972
- 5. Abra um Pull Request
973
-
974
- gtag('js', new Date());
975
-
976
- ---
977
-
978
- gtag('config', 'GA_MEASUREMENT_ID');### 🎨 Documentação Interativa (GitHub Pages)
979
-
980
- ## 📄 Licença
981
-
982
- `}
983
-
984
- MIT © [Luciano Edipo](https://github.com/lucianoedipo)
985
-
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.
987
-
988
- ---
989
-
990
- )- **[⚙️ TypeDoc - Referência de API](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação completa da API gerada automaticamente.
991
-
992
- ## 🔗 Links Úteis
993
-
994
- }- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Página inicial com navegação entre todas as documentações.
995
-
996
- - [**GitHub Repository**](https://github.com/lucianoedipo/react-lgpd-consent)
997
-
998
- - [**NPM Package**](https://www.npmjs.com/package/react-lgpd-consent)```
999
-
1000
- - [**Issues & Bugs**](https://github.com/lucianoedipo/react-lgpd-consent/issues)
1001
-
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
1015
-
1016
-
1017
- 1. Abra uma [Issue](https://github.com/lucianoedipo/react-lgpd-consent/issues) para bugs ou melhorias.
1018
-
1019
- ### Tema Material-UI2. Siga o Guia de Desenvolvimento em `DEVELOPMENT.md` para enviar um PR.
1020
-
1021
-
1022
-
1023
- ```tsx---
1024
-
1025
- import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
1026
-
1027
- ## 📄 Licença
1028
-
1029
- <ConsentProvider
1030
-
1031
- theme={createDefaultConsentTheme({MIT — veja o arquivo `LICENSE`.
1032
-
1033
- palette: {
1034
- primary: { main: '#your-brand-color' }
1035
- }
1036
- })}
1037
- categories={{ enabledCategories: ['analytics'] }}
1038
- >
1039
- <App />
1040
- </ConsentProvider>
1041
- ```
1042
-
1043
- ### Desabilitar Componentes Padrão
1044
-
1045
- ```tsx
1046
- import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'
1047
-
1048
- <ConsentProvider
1049
- categories={{ enabledCategories: ['analytics'] }}
1050
- disableDefaultBanner
1051
- disableDefaultModal
1052
- >
1053
- {/* Use seus próprios componentes */}
1054
- <CookieBanner position="bottom-left" />
1055
- <PreferencesModal showBranding={false} />
1056
- <App />
1057
- </ConsentProvider>
1058
- ```
1059
-
1060
- ### Design Tokens Avançados
1061
-
1062
- ```tsx
1063
- <ConsentProvider
1064
- categories={{ enabledCategories: ['analytics'] }}
1065
- designTokens={{
1066
- colors: {
1067
- primary: '#1976d2',
1068
- secondary: '#dc004e',
1069
- background: '#ffffff',
1070
- },
1071
- layout: {
1072
- backdropColor: 'rgba(0, 0, 0, 0.8)',
1073
- bannerPosition: 'bottom-center',
1074
- },
1075
- typography: {
1076
- fontFamily: 'Inter, sans-serif',
1077
- }
1078
- }}
1079
- >
1080
- <App />
1081
- </ConsentProvider>
1082
- ```
1083
-
1084
- ---
1085
-
1086
- ## 📚 Documentação
1087
-
1088
- ### 📖 Guias Completos (GitHub)
1089
-
1090
- - **[📚 Quickstart](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md)**: Tutorial passo-a-passo com exemplos TypeScript
1091
- - **[🏗️ API Reference](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md)**: Referência completa de componentes, hooks e tipos
1092
- - **[⚖️ Conformidade LGPD](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md)**: Detalhes sobre compliance e auditoria
1093
- - **[🔌 Integrações](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**: Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
1094
- - **[🏛️ Arquitetura](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md)**: Detalhes da arquitetura monorepo v0.5.0
1095
- - **[📝 Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**: Histórico completo de versões
1096
-
1097
- ### 🎨 Documentação Interativa (GitHub Pages)
1098
-
1099
- - **[🎭 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real
1100
- - **[⚙️ TypeDoc - API Docs](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação da API gerada automaticamente
1101
- - **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Navegação central entre todas as docs
1102
-
1103
- ---
1104
-
1105
- ## 🔌 Integrações Nativas
1106
-
1107
- A biblioteca possui integrações prontas para:
1108
-
1109
- - ✅ **Google Analytics 4** (GA4)
1110
- - ✅ **Google Tag Manager** (GTM)
1111
- - ✅ **Facebook Pixel**
1112
- - ✅ **Hotjar**
1113
- - ✅ **Microsoft Clarity**
1114
- - ✅ **Mixpanel**
1115
- - ✅ **Intercom**
1116
- - ✅ **Zendesk**
1117
- - ✅ **UserWay** (Acessibilidade)
1118
-
1119
- ```tsx
1120
- import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
1121
-
1122
- <ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />
1123
- ```
1124
-
1125
- **[Ver guia completo de integrações →](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**
1126
-
1127
- ---
1128
-
1129
- ## 🧩 Ecossistema de Pacotes
1130
-
1131
- ```
1132
- react-lgpd-consent (este pacote - agregador)
1133
- ├── @react-lgpd-consent/core # Headless (86 KB)
1134
- └── @react-lgpd-consent/mui # MUI Components (104 KB)
1135
- ```
1136
-
1137
- ### Quando usar cada pacote?
1138
-
1139
- | Cenário | Pacote Recomendado |
1140
- |---------|-------------------|
1141
- | **Migração de v0.4.x** | `react-lgpd-consent` (este) |
1142
- | **UI customizada completa** | `@react-lgpd-consent/core` |
1143
- | **Componentes MUI prontos** | `@react-lgpd-consent/mui` |
1144
- | **Novo projeto com MUI** | `@react-lgpd-consent/mui` |
1145
- | **Bundle otimizado** | `@react-lgpd-consent/core` |
1146
-
1147
- ---
1148
-
1149
- ## 🌟 Características
1150
-
1151
- - ✅ **TypeScript First**: Tipos completos e inferência automática
1152
- - ✅ **SSR-Safe**: Compatível com Next.js (App Router + Pages Router), Remix
1153
- - ✅ **Zero Config**: Funciona out-of-the-box com defaults sensatos
1154
- - ✅ **Acessível**: WCAG 2.1 AA compliance, keyboard navigation, screen readers
1155
- - ✅ **Responsivo**: Mobile-first design com breakpoints adaptativos
1156
- - ✅ **Tree-shakeable**: Import apenas o que você usa
1157
- - ✅ **Temas**: Light/Dark/Auto com transições suaves
1158
- - ✅ **i18n**: Suporte a múltiplos idiomas (pt-BR, en, es)
1159
- - ✅ **Auditável**: Logs de desenvolvedor e eventos DataLayer para GTM
1160
-
1161
- ---
1162
-
1163
- ## 🤝 Contribuindo
1164
-
1165
- Contribuições são bem-vindas! Veja o [Guia de Desenvolvimento](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
1166
-
1167
- 1. Fork o repositório
1168
- 2. Crie uma branch: `git checkout -b feature/minha-feature`
1169
- 3. Commit: `git commit -m 'feat: minha nova feature'`
1170
- 4. Push: `git push origin feature/minha-feature`
1171
- 5. Abra um Pull Request
1172
-
1173
- ---
1174
-
1175
- ## 📄 Licença
1176
-
1177
- MIT © [Luciano Edipo](https://github.com/lucianoedipo)
1178
-
1179
126
  ---
1180
127
 
1181
- ## 🔗 Links Úteis
128
+ ## Licença
1182
129
 
1183
- - **[GitHub Repository](https://github.com/lucianoedipo/react-lgpd-consent)**
1184
- - **[NPM Package](https://www.npmjs.com/package/react-lgpd-consent)**
1185
- - **[Issues & Bugs](https://github.com/lucianoedipo/react-lgpd-consent/issues)**
1186
- - **[Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**
130
+ MIT © Luciano Edipo — veja o arquivo `LICENSE`.
1187
131
 
1188
132
  ---
1189
133
 
1190
- <div align="center">
1191
- <sub>Feito com ❤️ para a comunidade React brasileira</sub>
1192
- </div>
134
+ If you prefer the English version of the README, consult `README.en.md` in the same package.