react-lgpd-consent 0.5.0 → 0.5.1
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.
- package/README.md +430 -93
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,177 +1,514 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
<h1>react-lgpd-consent 🍪</h1>
|
|
3
|
-
<p><strong>Uma biblioteca React para gerenciamento de consentimento de cookies em conformidade com a LGPD.</strong></p>
|
|
4
|
-
|
|
5
|
-
<div>
|
|
6
|
-
<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>
|
|
7
|
-
<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>
|
|
8
|
-
<a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
|
|
9
|
-
<a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
|
|
10
|
-
</div>
|
|
1
|
+
<div align="center"><div align="center">
|
|
11
2
|
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
<h1>react-lgpd-consent 🍪</h1> <h1>react-lgpd-consent 🍪</h1>
|
|
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>
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
<div> <div>
|
|
10
|
+
|
|
11
|
+
<a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a> <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>
|
|
12
|
+
|
|
13
|
+
<a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a> <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>
|
|
14
|
+
|
|
15
|
+
<a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a> <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
|
|
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> <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
|
+
|
|
19
|
+
</div> </div>
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
<div> <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.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></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> <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>
|
|
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://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
|
+
|
|
31
|
+
</div> </div>
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
<div> <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> <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
|
+
|
|
39
|
+
<a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white&label=Bundle" alt="Bundle Size"></a> <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
|
|
40
|
+
|
|
41
|
+
</div> <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
|
|
17
42
|
|
|
18
|
-
<div>
|
|
19
|
-
<a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
|
|
20
|
-
<a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
|
|
21
|
-
<a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
|
|
22
43
|
</div>
|
|
23
44
|
|
|
24
45
|
<br />
|
|
25
46
|
|
|
47
|
+
<br />
|
|
48
|
+
|
|
26
49
|
<p>
|
|
27
|
-
|
|
28
|
-
<a href="#-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<a href="#-
|
|
50
|
+
|
|
51
|
+
<a href="#-instalação"><strong>Instalação</strong></a> • <p>
|
|
52
|
+
|
|
53
|
+
<a href="#-início-rápido"><strong>Início Rápido</strong></a> • <a href="#-instalação"><strong>Instalação</strong></a> •
|
|
54
|
+
|
|
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> •
|
|
56
|
+
|
|
57
|
+
<a href="#-documentação"><strong>Documentação</strong></a> • <a href="./QUICKSTART.md"><strong>📚 Guia de Início Rápido</strong></a> •
|
|
58
|
+
|
|
59
|
+
<a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/README.en.md">🇺🇸 English</a> <a href="#-documentação-completa"><strong>Documentação</strong></a> •
|
|
60
|
+
|
|
61
|
+
</p> <a href="./README.en.md">🇺🇸 🇬🇧 English</a> •
|
|
62
|
+
|
|
63
|
+
</div> <a href="#-como-contribuir"><strong>Contribuir</strong></a>
|
|
64
|
+
|
|
33
65
|
</p>
|
|
34
66
|
|
|
67
|
+
---
|
|
68
|
+
|
|
35
69
|
<!-- Quickstart callout (mantido) -->
|
|
36
|
-
|
|
70
|
+
|
|
71
|
+
## 🎯 O que há de novo na v0.5.0 <p align="center">
|
|
72
|
+
|
|
37
73
|
<a href="./QUICKSTART.md"><img src="https://img.shields.io/badge/Quickstart-Iniciar%20R%C3%A1pido-blue?style=for-the-badge&logo=book" alt="Quickstart"></a>
|
|
38
|
-
</p>
|
|
39
74
|
|
|
40
|
-
|
|
75
|
+
### 🏗️ Arquitetura Modular (BREAKING CHANGE) </p>
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
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
|
+
|
|
41
81
|
</div>
|
|
42
82
|
|
|
43
|
-
|
|
83
|
+
| Pacote | Descrição | Bundle | Use quando... |
|
|
44
84
|
|
|
45
|
-
|
|
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 |## 🚀 Instalação
|
|
90
|
+
|
|
91
|
+
| **`react-lgpd-consent`** | Agregador (re-exporta MUI) | ~104 KB | **Compatibilidade com v0.4.x** |
|
|
46
92
|
|
|
47
93
|
```bash
|
|
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.npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
|
|
96
|
+
|
|
49
97
|
```
|
|
50
98
|
|
|
99
|
+
### ✨ Novos Recursos v0.5.0
|
|
100
|
+
|
|
51
101
|
**Dependências peer:** `react`, `react-dom`, `@mui/material` e `js-cookie`.
|
|
52
102
|
|
|
53
|
-
|
|
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()`---
|
|
54
106
|
|
|
55
|
-
|
|
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)## ✨ Novidades v0.4.5
|
|
110
|
+
|
|
111
|
+
- ✅ **Monorepo TypeScript**: Paths configurados para melhor DX em IDEs
|
|
56
112
|
|
|
57
113
|
### 📊 DataLayer Events para Google Tag Manager
|
|
58
|
-
|
|
114
|
+
|
|
115
|
+
### 📦 Migração de v0.4.x → v0.5.0- **Eventos Padronizados**: `consent_initialized` e `consent_updated` disparados automaticamente
|
|
116
|
+
|
|
59
117
|
- **Rastreamento de Origem**: Identifica se decisão veio do banner, modal, reset ou API programática
|
|
60
|
-
|
|
118
|
+
|
|
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
|
+
|
|
61
121
|
- **Integração GTM**: Documentação completa com exemplos de triggers e tags
|
|
62
|
-
- **API Pública**: Funções `pushConsentInitializedEvent` e `pushConsentUpdatedEvent` exportadas
|
|
63
122
|
|
|
64
|
-
|
|
65
|
-
- **Migração para pnpm**: Workflows atualizados de npm para pnpm, resolvendo conflitos de dependências
|
|
66
|
-
- **Build Otimizado**: Pipeline mais rápido e confiável
|
|
123
|
+
✅ **Nenhuma mudança necessária!** A API é 100% retrocompatível.- **API Pública**: Funções `pushConsentInitializedEvent` e `pushConsentUpdatedEvent` exportadas
|
|
67
124
|
|
|
68
|
-
---
|
|
69
125
|
|
|
70
|
-
## ✨ Novidades v0.4.4
|
|
71
126
|
|
|
72
|
-
### 🔧 CI/CD
|
|
127
|
+
```tsx### 🔧 Melhorias de CI/CD
|
|
128
|
+
|
|
129
|
+
// v0.4.x - continua funcionando- **Migração para pnpm**: Workflows atualizados de npm para pnpm, resolvendo conflitos de dependências
|
|
130
|
+
|
|
131
|
+
import { ConsentProvider, useConsent } from 'react-lgpd-consent'- **Build Otimizado**: Pipeline mais rápido e confiável
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
// v0.5.0 - mesma API, mesmos componentes---
|
|
136
|
+
|
|
137
|
+
import { ConsentProvider, useConsent } from 'react-lgpd-consent'
|
|
138
|
+
|
|
139
|
+
```## ✨ Novidades v0.4.4
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
**Se você quer otimizar o bundle:**### 🔧 CI/CD e Publicação
|
|
144
|
+
|
|
73
145
|
- **Workflow de Publicação**: Corrigido bug que impedia publicação automática no npm quando tags eram criadas após merge para `main`
|
|
74
|
-
|
|
75
|
-
- **
|
|
146
|
+
|
|
147
|
+
```tsx- **Codecov Integration**: Adicionado upload automático de coverage reports para melhor visualização de cobertura de testes
|
|
148
|
+
|
|
149
|
+
// Opção 1: Core (headless) + sua própria UI (~86 KB)- **Badge de Coverage**: Agora atualizado em tempo real via Codecov
|
|
150
|
+
|
|
151
|
+
import { ConsentProvider } from '@react-lgpd-consent/core'
|
|
76
152
|
|
|
77
153
|
### 📊 Qualidade e Confiabilidade
|
|
78
|
-
- **Publicação Confiável**: Tags agora são publicadas corretamente quando commit está no histórico da `main`
|
|
79
|
-
- **Visibilidade de Cobertura**: Integração completa com Codecov para tracking de qualidade
|
|
80
154
|
|
|
81
|
-
|
|
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`
|
|
82
156
|
|
|
83
|
-
|
|
157
|
+
import { ConsentProvider } from '@react-lgpd-consent/mui'- **Visibilidade de Cobertura**: Integração completa com Codecov para tracking de qualidade
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
// Opção 3: Agregador (compatibilidade) (~104 KB)---
|
|
162
|
+
|
|
163
|
+
import { ConsentProvider } from 'react-lgpd-consent' // Este pacote
|
|
164
|
+
|
|
165
|
+
```## ✨ Novidades v0.4.1
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
---### 🎨 Design Tokens Expandidos
|
|
84
170
|
|
|
85
|
-
### 🎨 Design Tokens Expandidos
|
|
86
171
|
- **200+ pontos de customização** (cores, tipografia, espaçamento, layout)
|
|
87
|
-
|
|
172
|
+
|
|
173
|
+
## 🚀 Instalação- **Sistema responsivo** com breakpoints e variações
|
|
174
|
+
|
|
88
175
|
- **Acessibilidade nativa** com contrast ratios e focus states
|
|
89
|
-
- **Temas light/dark/auto** com transições suaves
|
|
90
176
|
|
|
91
|
-
|
|
177
|
+
```bash- **Temas light/dark/auto** com transições suaves
|
|
178
|
+
|
|
179
|
+
npm install react-lgpd-consent
|
|
180
|
+
|
|
181
|
+
```### 📝 Sistema Avançado de Textos
|
|
182
|
+
|
|
92
183
|
- **Templates pré-configurados** para ecommerce, SaaS e governo
|
|
93
|
-
|
|
184
|
+
|
|
185
|
+
### Dependências Peer (instaladas automaticamente se não existirem)- **Internacionalização completa** (pt, en, es)
|
|
186
|
+
|
|
94
187
|
- **Variações de tom** (formal, casual, técnico)
|
|
95
|
-
- **Resolução automática** baseada em contexto
|
|
96
188
|
|
|
97
|
-
|
|
189
|
+
```bash- **Resolução automática** baseada em contexto
|
|
190
|
+
|
|
191
|
+
npm install react react-dom @mui/material @emotion/react @emotion/styled
|
|
192
|
+
|
|
193
|
+
```### 🔍 Descoberta de Cookies (Experimental)
|
|
194
|
+
|
|
98
195
|
- **Detecção automática** de cookies em runtime
|
|
99
|
-
|
|
196
|
+
|
|
197
|
+
---- **Categorização inteligente** usando padrões LGPD
|
|
198
|
+
|
|
100
199
|
- **Integração nativa** com sistema de override
|
|
101
200
|
|
|
201
|
+
## ⚡ Início Rápido
|
|
202
|
+
|
|
102
203
|
### ⚠️ Breaking Changes
|
|
103
|
-
- **Suporte a categorias customizadas**: `setPreference` e `ScriptIntegration.category` agora usam `string` ao invés de `Category`
|
|
104
|
-
- **Impacto mínimo**: Código usando strings literais continua funcionando sem alterações
|
|
105
|
-
- **Consulte**: [CHANGELOG.md](./CHANGELOG.md) para guia de migração completo
|
|
106
204
|
|
|
107
|
-
|
|
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`
|
|
108
206
|
|
|
109
|
-
|
|
207
|
+
- **Impacto mínimo**: Código usando strings literais continua funcionando sem alterações
|
|
110
208
|
|
|
111
|
-
|
|
209
|
+
```tsx- **Consulte**: [CHANGELOG.md](./CHANGELOG.md) para guia de migração completo
|
|
112
210
|
|
|
113
|
-
```tsx
|
|
114
211
|
import { ConsentProvider } from 'react-lgpd-consent'
|
|
115
212
|
|
|
213
|
+
---
|
|
214
|
+
|
|
116
215
|
export default function App() {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
216
|
+
|
|
217
|
+
return (## 📖 Uso Básico
|
|
218
|
+
|
|
219
|
+
<ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
|
|
220
|
+
|
|
221
|
+
<YourApp />Envolva sua aplicação com o `ConsentProvider` (exemplo mínimo):
|
|
222
|
+
|
|
120
223
|
</ConsentProvider>
|
|
121
|
-
|
|
122
|
-
|
|
224
|
+
|
|
225
|
+
)```tsx
|
|
226
|
+
|
|
227
|
+
}import { ConsentProvider } from 'react-lgpd-consent'
|
|
228
|
+
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
export default function App() {
|
|
232
|
+
|
|
233
|
+
**Isso já inclui:** return (
|
|
234
|
+
|
|
235
|
+
- ✅ Banner de cookies <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
|
|
236
|
+
|
|
237
|
+
- ✅ Modal de preferências <YourApp />
|
|
238
|
+
|
|
239
|
+
- ✅ Botão flutuante para reabrir preferências </ConsentProvider>
|
|
240
|
+
|
|
241
|
+
- ✅ Persistência em cookies )
|
|
242
|
+
|
|
243
|
+
- ✅ SSR-safe (Next.js, Remix)}
|
|
244
|
+
|
|
123
245
|
```
|
|
124
246
|
|
|
247
|
+
### Acessar Estado de Consentimento
|
|
248
|
+
|
|
125
249
|
## Nota sobre ThemeProvider e tema padrão
|
|
126
250
|
|
|
127
|
-
|
|
251
|
+
```tsx
|
|
252
|
+
|
|
253
|
+
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
|
+
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
function MyComponent() {```tsx
|
|
258
|
+
|
|
259
|
+
const { preferences, acceptCategory, rejectCategory } = useConsent()import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
if (preferences.analytics) {// Aplica um tema de fallback somente para os componentes da lib
|
|
264
|
+
|
|
265
|
+
// Analytics está permitido, carregue scripts;<ConsentProvider
|
|
266
|
+
|
|
267
|
+
} theme={createDefaultConsentTheme()}
|
|
268
|
+
|
|
269
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
270
|
+
|
|
271
|
+
return (>
|
|
272
|
+
|
|
273
|
+
<button onClick={() => acceptCategory('marketing')}> <App />
|
|
274
|
+
|
|
275
|
+
Aceitar Marketing</ConsentProvider>
|
|
276
|
+
|
|
277
|
+
</button>```
|
|
278
|
+
|
|
279
|
+
)
|
|
280
|
+
|
|
281
|
+
}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
|
+
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
## 📚 Documentação Completa
|
|
286
|
+
|
|
287
|
+
### Carregar Scripts Condicionados ao Consentimento
|
|
288
|
+
|
|
289
|
+
Para mais detalhes sobre customização, hooks e funcionalidades, consulte os seguintes guias:
|
|
128
290
|
|
|
129
291
|
```tsx
|
|
292
|
+
|
|
293
|
+
import { ConsentScriptLoader } from 'react-lgpd-consent'### 📋 Documentação Principal
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
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.
|
|
298
|
+
|
|
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.
|
|
300
|
+
|
|
301
|
+
<ConsentScriptLoader - Novo na v0.4.0: suporte a `customCategories` — veja a seção “Categorias customizadas (customCategories)” no Quickstart.
|
|
302
|
+
|
|
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).
|
|
304
|
+
|
|
305
|
+
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
|
+
|
|
307
|
+
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
|
+
|
|
309
|
+
> - 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
|
+
|
|
311
|
+
{`- **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
|
|
312
|
+
|
|
313
|
+
window.dataLayer = window.dataLayer || [];- **[Guia de Conformidade (`CONFORMIDADE.md`)](./CONFORMIDADE.md)**: Detalhes sobre as funcionalidades de conformidade com a LGPD.
|
|
314
|
+
|
|
315
|
+
function gtag(){dataLayer.push(arguments);}- **[Guia de Integrações (`INTEGRACOES.md`)](./INTEGRACOES.md)**: Como usar as integrações nativas e criar as suas.
|
|
316
|
+
|
|
317
|
+
gtag('js', new Date());
|
|
318
|
+
|
|
319
|
+
gtag('config', 'GA_MEASUREMENT_ID');### 🎨 Documentação Interativa (GitHub Pages)
|
|
320
|
+
|
|
321
|
+
`}
|
|
322
|
+
|
|
323
|
+
</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
|
+
|
|
325
|
+
)- **[⚙️ TypeDoc - Referência de API](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação completa da API gerada automaticamente.
|
|
326
|
+
|
|
327
|
+
}- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Página inicial com navegação entre todas as documentações.
|
|
328
|
+
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
---
|
|
332
|
+
|
|
333
|
+
---
|
|
334
|
+
|
|
335
|
+
## 🤝 Como Contribuir
|
|
336
|
+
|
|
337
|
+
## 🎨 Customização
|
|
338
|
+
|
|
339
|
+
1. Abra uma [Issue](https://github.com/lucianoedipo/react-lgpd-consent/issues) para bugs ou melhorias.
|
|
340
|
+
|
|
341
|
+
### Tema Material-UI2. Siga o Guia de Desenvolvimento em `DEVELOPMENT.md` para enviar um PR.
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
```tsx---
|
|
346
|
+
|
|
130
347
|
import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
|
|
131
348
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
349
|
+
## 📄 Licença
|
|
350
|
+
|
|
351
|
+
<ConsentProvider
|
|
352
|
+
|
|
353
|
+
theme={createDefaultConsentTheme({MIT — veja o arquivo `LICENSE`.
|
|
354
|
+
|
|
355
|
+
palette: {
|
|
356
|
+
primary: { main: '#your-brand-color' }
|
|
357
|
+
}
|
|
358
|
+
})}
|
|
135
359
|
categories={{ enabledCategories: ['analytics'] }}
|
|
136
360
|
>
|
|
137
361
|
<App />
|
|
138
362
|
</ConsentProvider>
|
|
139
363
|
```
|
|
140
364
|
|
|
141
|
-
|
|
365
|
+
### Desabilitar Componentes Padrão
|
|
142
366
|
|
|
143
|
-
|
|
367
|
+
```tsx
|
|
368
|
+
import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'
|
|
144
369
|
|
|
145
|
-
|
|
370
|
+
<ConsentProvider
|
|
371
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
372
|
+
disableDefaultBanner
|
|
373
|
+
disableDefaultModal
|
|
374
|
+
>
|
|
375
|
+
{/* Use seus próprios componentes */}
|
|
376
|
+
<CookieBanner position="bottom-left" />
|
|
377
|
+
<PreferencesModal showBranding={false} />
|
|
378
|
+
<App />
|
|
379
|
+
</ConsentProvider>
|
|
380
|
+
```
|
|
146
381
|
|
|
147
|
-
###
|
|
382
|
+
### Design Tokens Avançados
|
|
148
383
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
384
|
+
```tsx
|
|
385
|
+
<ConsentProvider
|
|
386
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
387
|
+
designTokens={{
|
|
388
|
+
colors: {
|
|
389
|
+
primary: '#1976d2',
|
|
390
|
+
secondary: '#dc004e',
|
|
391
|
+
background: '#ffffff',
|
|
392
|
+
},
|
|
393
|
+
layout: {
|
|
394
|
+
backdropColor: 'rgba(0, 0, 0, 0.8)',
|
|
395
|
+
bannerPosition: 'bottom-center',
|
|
396
|
+
},
|
|
397
|
+
typography: {
|
|
398
|
+
fontFamily: 'Inter, sans-serif',
|
|
399
|
+
}
|
|
400
|
+
}}
|
|
401
|
+
>
|
|
402
|
+
<App />
|
|
403
|
+
</ConsentProvider>
|
|
404
|
+
```
|
|
405
|
+
|
|
406
|
+
---
|
|
407
|
+
|
|
408
|
+
## 📚 Documentação
|
|
409
|
+
|
|
410
|
+
### 📖 Guias Completos (GitHub)
|
|
411
|
+
|
|
412
|
+
- **[📚 Quickstart](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md)**: Tutorial passo-a-passo com exemplos TypeScript
|
|
413
|
+
- **[🏗️ API Reference](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md)**: Referência completa de componentes, hooks e tipos
|
|
414
|
+
- **[⚖️ Conformidade LGPD](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md)**: Detalhes sobre compliance e auditoria
|
|
415
|
+
- **[🔌 Integrações](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**: Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
|
|
416
|
+
- **[🏛️ Arquitetura](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md)**: Detalhes da arquitetura monorepo v0.5.0
|
|
417
|
+
- **[📝 Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**: Histórico completo de versões
|
|
159
418
|
|
|
160
419
|
### 🎨 Documentação Interativa (GitHub Pages)
|
|
161
420
|
|
|
162
|
-
- **[
|
|
163
|
-
- **[⚙️ TypeDoc -
|
|
164
|
-
- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**:
|
|
421
|
+
- **[🎭 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real
|
|
422
|
+
- **[⚙️ TypeDoc - API Docs](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação da API gerada automaticamente
|
|
423
|
+
- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Navegação central entre todas as docs
|
|
165
424
|
|
|
166
425
|
---
|
|
167
426
|
|
|
168
|
-
##
|
|
427
|
+
## 🔌 Integrações Nativas
|
|
169
428
|
|
|
170
|
-
|
|
171
|
-
|
|
429
|
+
A biblioteca possui integrações prontas para:
|
|
430
|
+
|
|
431
|
+
- ✅ **Google Analytics 4** (GA4)
|
|
432
|
+
- ✅ **Google Tag Manager** (GTM)
|
|
433
|
+
- ✅ **Facebook Pixel**
|
|
434
|
+
- ✅ **Hotjar**
|
|
435
|
+
- ✅ **Microsoft Clarity**
|
|
436
|
+
- ✅ **Mixpanel**
|
|
437
|
+
- ✅ **Intercom**
|
|
438
|
+
- ✅ **Zendesk**
|
|
439
|
+
- ✅ **UserWay** (Acessibilidade)
|
|
440
|
+
|
|
441
|
+
```tsx
|
|
442
|
+
import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
|
|
443
|
+
|
|
444
|
+
<ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
**[Ver guia completo de integrações →](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**
|
|
448
|
+
|
|
449
|
+
---
|
|
450
|
+
|
|
451
|
+
## 🧩 Ecossistema de Pacotes
|
|
452
|
+
|
|
453
|
+
```
|
|
454
|
+
react-lgpd-consent (este pacote - agregador)
|
|
455
|
+
├── @react-lgpd-consent/core # Headless (86 KB)
|
|
456
|
+
└── @react-lgpd-consent/mui # MUI Components (104 KB)
|
|
457
|
+
```
|
|
458
|
+
|
|
459
|
+
### Quando usar cada pacote?
|
|
460
|
+
|
|
461
|
+
| Cenário | Pacote Recomendado |
|
|
462
|
+
|---------|-------------------|
|
|
463
|
+
| **Migração de v0.4.x** | `react-lgpd-consent` (este) |
|
|
464
|
+
| **UI customizada completa** | `@react-lgpd-consent/core` |
|
|
465
|
+
| **Componentes MUI prontos** | `@react-lgpd-consent/mui` |
|
|
466
|
+
| **Novo projeto com MUI** | `@react-lgpd-consent/mui` |
|
|
467
|
+
| **Bundle otimizado** | `@react-lgpd-consent/core` |
|
|
468
|
+
|
|
469
|
+
---
|
|
470
|
+
|
|
471
|
+
## 🌟 Características
|
|
472
|
+
|
|
473
|
+
- ✅ **TypeScript First**: Tipos completos e inferência automática
|
|
474
|
+
- ✅ **SSR-Safe**: Compatível com Next.js (App Router + Pages Router), Remix
|
|
475
|
+
- ✅ **Zero Config**: Funciona out-of-the-box com defaults sensatos
|
|
476
|
+
- ✅ **Acessível**: WCAG 2.1 AA compliance, keyboard navigation, screen readers
|
|
477
|
+
- ✅ **Responsivo**: Mobile-first design com breakpoints adaptativos
|
|
478
|
+
- ✅ **Tree-shakeable**: Import apenas o que você usa
|
|
479
|
+
- ✅ **Temas**: Light/Dark/Auto com transições suaves
|
|
480
|
+
- ✅ **i18n**: Suporte a múltiplos idiomas (pt-BR, en, es)
|
|
481
|
+
- ✅ **Auditável**: Logs de desenvolvedor e eventos DataLayer para GTM
|
|
482
|
+
|
|
483
|
+
---
|
|
484
|
+
|
|
485
|
+
## 🤝 Contribuindo
|
|
486
|
+
|
|
487
|
+
Contribuições são bem-vindas! Veja o [Guia de Desenvolvimento](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
|
|
488
|
+
|
|
489
|
+
1. Fork o repositório
|
|
490
|
+
2. Crie uma branch: `git checkout -b feature/minha-feature`
|
|
491
|
+
3. Commit: `git commit -m 'feat: minha nova feature'`
|
|
492
|
+
4. Push: `git push origin feature/minha-feature`
|
|
493
|
+
5. Abra um Pull Request
|
|
172
494
|
|
|
173
495
|
---
|
|
174
496
|
|
|
175
497
|
## 📄 Licença
|
|
176
498
|
|
|
177
|
-
MIT
|
|
499
|
+
MIT © [Luciano Edipo](https://github.com/lucianoedipo)
|
|
500
|
+
|
|
501
|
+
---
|
|
502
|
+
|
|
503
|
+
## 🔗 Links Úteis
|
|
504
|
+
|
|
505
|
+
- **[GitHub Repository](https://github.com/lucianoedipo/react-lgpd-consent)**
|
|
506
|
+
- **[NPM Package](https://www.npmjs.com/package/react-lgpd-consent)**
|
|
507
|
+
- **[Issues & Bugs](https://github.com/lucianoedipo/react-lgpd-consent/issues)**
|
|
508
|
+
- **[Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**
|
|
509
|
+
|
|
510
|
+
---
|
|
511
|
+
|
|
512
|
+
<div align="center">
|
|
513
|
+
<sub>Feito com ❤️ para a comunidade React brasileira</sub>
|
|
514
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-lgpd-consent",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Biblioteca de consentimento LGPD, integrações nativas e sistema extensível para React.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lgpd",
|
|
@@ -134,6 +134,6 @@
|
|
|
134
134
|
"mutation:tests": "npx stryker run ../../stryker.tests.conf.json",
|
|
135
135
|
"docs:generate": "typedoc --options ../../typedoc.json",
|
|
136
136
|
"storybook": "storybook dev -p 6006 --config-dir ../../.storybook",
|
|
137
|
-
"build-storybook": "storybook build --config-dir ../../.storybook"
|
|
137
|
+
"build-storybook": "storybook build --config-dir ../../.storybook --output-dir ../../storybook-static"
|
|
138
138
|
}
|
|
139
139
|
}
|