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