react-lgpd-consent 0.5.1 → 0.5.2

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