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