react-lgpd-consent 0.5.3 → 0.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/API.md +576 -0
- package/CHANGELOG.md +3 -3
- package/QUICKSTART.md +90 -11
- package/README.en.md +67 -396
- package/README.md +73 -1131
- package/package.json +6 -4
package/API.md
ADDED
|
@@ -0,0 +1,576 @@
|
|
|
1
|
+
# Guia da API - react-lgpd-consent
|
|
2
|
+
|
|
3
|
+
Este documento é a referência técnica oficial para a API da biblioteca `react-lgpd-consent` (v0.5.0+), publicada como conjunto de pacotes:
|
|
4
|
+
|
|
5
|
+
- `react-lgpd-consent`: agregador com a API pública original.
|
|
6
|
+
- `react-lgpd-consent/core`: subpath export do pacote principal (delegando para `@react-lgpd-consent/core`).
|
|
7
|
+
- `react-lgpd-consent/mui`: subpath export que expõe a camada Material-UI (`@react-lgpd-consent/mui`).
|
|
8
|
+
|
|
9
|
+
## Exports Principais
|
|
10
|
+
|
|
11
|
+
| Nome | Tipo | Descrição |
|
|
12
|
+
| ----------------------------------- | ---------- | ------------------------------------------------------------------------------- |
|
|
13
|
+
| `ConsentProvider` | Componente | O provedor de contexto principal que gerencia todo o estado e a UI. |
|
|
14
|
+
| `useConsent` | Hook | Hook principal para interagir com o estado de consentimento. |
|
|
15
|
+
| `useCategories` | Hook | Retorna a lista de categorias ativas no projeto. |
|
|
16
|
+
| `useCategoryStatus` | Hook | Verifica o status de uma categoria específica. |
|
|
17
|
+
| `useOpenPreferencesModal` | Hook | Retorna uma função para abrir o modal de preferências de forma programática. |
|
|
18
|
+
| `openPreferencesModal` | Função | Versão da função acima para ser usada fora do contexto React. |
|
|
19
|
+
| `ConsentGate` | Componente | Renderiza componentes filhos apenas se uma categoria de cookie for consentida. |
|
|
20
|
+
| `ConsentScriptLoader` | Componente | Carrega scripts de terceiros (como Google Analytics) com base no consentimento. |
|
|
21
|
+
| `buildConsentStorageKey` | Função | (v0.5.2) Gera nomes de cookies `namespace__vX` a partir de namespace/versão. |
|
|
22
|
+
| `createGoogleAnalyticsIntegration` | Função | Factory para integração nativa com o Google Analytics. |
|
|
23
|
+
| `createGoogleTagManagerIntegration` | Função | Factory para integração nativa com o Google Tag Manager. |
|
|
24
|
+
| `createUserWayIntegration` | Função | Factory para integração nativa com o UserWay. |
|
|
25
|
+
| `createFacebookPixelIntegration` | Função | (v0.4.1) Integração nativa com Facebook Pixel. |
|
|
26
|
+
| `createHotjarIntegration` | Função | (v0.4.1) Integração nativa com Hotjar. |
|
|
27
|
+
| `createMixpanelIntegration` | Função | (v0.4.1) Integração nativa com Mixpanel. |
|
|
28
|
+
| `createClarityIntegration` | Função | (v0.4.1) Integração nativa com Microsoft Clarity. |
|
|
29
|
+
| `createIntercomIntegration` | Função | (v0.4.1) Integração nativa com Intercom (chat). |
|
|
30
|
+
| `createZendeskChatIntegration` | Função | (v0.4.1) Integração nativa com Zendesk Chat. |
|
|
31
|
+
| `suggestCategoryForScript` | Função | (v0.4.1) Sugere categoria(s) LGPD para um script conhecido. |
|
|
32
|
+
| `discoverRuntimeCookies` | Função | (v0.4.1) Descobre cookies em tempo real no navegador. |
|
|
33
|
+
| `categorizeDiscoveredCookies` | Função | (v0.4.1) Categoriza cookies descobertos usando padrões LGPD. |
|
|
34
|
+
| `getCookiesInfoForCategory` | Função | Retorna informações detalhadas dos cookies de uma categoria específica. |
|
|
35
|
+
| `resolveTexts` | Função | (v0.4.1) Resolve textos baseados em templates e contexto. |
|
|
36
|
+
| `TEXT_TEMPLATES` | Constante | (v0.4.1) Templates pré-configurados (ecommerce, saas, governo). |
|
|
37
|
+
| `AdvancedConsentTexts` | Tipo | (v0.4.1) Interface expandida com i18n e contextos. |
|
|
38
|
+
| `DesignTokens` | Tipo | (v0.4.1) Sistema completo com 200+ pontos de customização. |
|
|
39
|
+
| `createECommerceIntegrations` | Função | (v0.4.1) Cria integrações comuns para e-commerce. |
|
|
40
|
+
| `createSaaSIntegrations` | Função | (v0.4.1) Cria integrações comuns para SaaS. |
|
|
41
|
+
| `createCorporateIntegrations` | Função | (v0.4.1) Cria integrações comuns para ambientes corporativos. |
|
|
42
|
+
| `INTEGRATION_TEMPLATES` | Constante | (v0.4.1) Presets com IDs essenciais/opcionais e categorias por tipo de negócio. |
|
|
43
|
+
| `setDebugLogging` | Função | Habilita/desabilita o logging de debug da biblioteca. |
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Componentes
|
|
48
|
+
|
|
49
|
+
### `<ConsentProvider />`
|
|
50
|
+
|
|
51
|
+
O componente principal que deve envolver sua aplicação. Ele gerencia o estado, renderiza a UI (banner, modal) e fornece o contexto para os hooks.
|
|
52
|
+
|
|
53
|
+
**Props Mínimas:**
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { ConsentProvider } from 'react-lgpd-consent'
|
|
57
|
+
|
|
58
|
+
function App() {
|
|
59
|
+
return (
|
|
60
|
+
<ConsentProvider
|
|
61
|
+
categories={{ enabledCategories: ['analytics', 'marketing'] }}
|
|
62
|
+
>
|
|
63
|
+
{/* Seu aplicativo aqui */}
|
|
64
|
+
</ConsentProvider>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**Todas as Props:**
|
|
70
|
+
|
|
71
|
+
| Prop | Tipo | Descrição |
|
|
72
|
+
| --- | --- | --- |
|
|
73
|
+
| `categories` | `ProjectCategoriesConfig` | **Obrigatório.** Fonte única de verdade sobre as categorias habilitadas; usada por UI, hooks e integrações. |
|
|
74
|
+
| `texts` | `Partial<ConsentTexts>` | Customiza todos os textos exibidos (banner, modal, botão). |
|
|
75
|
+
| `designTokens` | `DesignTokens` | Ajuste visual granular (cores, spacing, tipografia, overlays). |
|
|
76
|
+
| `blocking` | `boolean` | Ativa overlay bloqueante até o usuário decidir. Padrão: `false`. |
|
|
77
|
+
| `blockingStrategy` | `'auto' \| 'provider' \| 'component'` | Controla quem desenha o overlay quando `blocking` está ativo. |
|
|
78
|
+
| `hideBranding` | `boolean` | Oculta o selo “fornecido por”. |
|
|
79
|
+
| `disableDeveloperGuidance` | `boolean` | Suprime avisos/sugestões no console em desenvolvimento. |
|
|
80
|
+
| `disableFloatingPreferencesButton` | `boolean` | Remove o botão flutuante padrão. |
|
|
81
|
+
| `onConsentGiven` | `(state: ConsentState) => void` | Dispara na primeira vez que o usuário aceita/rejeita. Útil para inicializar analytics. |
|
|
82
|
+
| `onPreferencesSaved` | `(prefs: ConsentPreferences) => void` | Executa toda vez que o usuário salva preferências no modal. |
|
|
83
|
+
| `cookie` | `Partial<ConsentCookieOptions>` | Override fino das opções de cookie (nome, expiração, sameSite, secure, path, domain). Se `name` não for informado, o valor deriva de `storage`. |
|
|
84
|
+
| `storage` | `ConsentStorageConfig` | Define namespace, versão e domínio compartilhado. Gera automaticamente o nome da chave (`namespace__vX`). Alterar `version` força re-consentimento. |
|
|
85
|
+
| `onConsentVersionChange` | `(context: ConsentVersionChangeContext) => void` | Notificado após mudança da chave de storage. O reset já é automático; use o hook para limpar caches externos ou registrar eventos. |
|
|
86
|
+
| `CookieBannerComponent` | `React.ComponentType<CustomCookieBannerProps>` | Substitui o banner padrão. |
|
|
87
|
+
| `PreferencesModalComponent` | `React.ComponentType<CustomPreferencesModalProps>` | Substitui o modal padrão. |
|
|
88
|
+
| `FloatingPreferencesButtonComponent` | `React.ComponentType<CustomFloatingPreferencesButtonProps>` | Substitui o botão flutuante padrão. |
|
|
89
|
+
| `cookieBannerProps` | `Record<string, unknown>` | Props adicionais repassadas ao banner (padrão `{}`). |
|
|
90
|
+
| `preferencesModalProps` | `Record<string, unknown>` | Props adicionais repassadas ao modal (padrão `{}`). |
|
|
91
|
+
| `floatingPreferencesButtonProps` | `Record<string, unknown>` | Props adicionais para o botão flutuante (padrão `{}`). |
|
|
92
|
+
| `theme` | `any` (Tema MUI) | Aplica um `ThemeProvider` local aos componentes padrão (apenas no pacote MUI). |
|
|
93
|
+
| `initialState` | `ConsentState` | Hidratação SSR para evitar flash do banner. |
|
|
94
|
+
|
|
95
|
+
#### Versionamento de consentimento (namespace + versão)
|
|
96
|
+
|
|
97
|
+
- `storage.namespace` e `storage.version` utilizam `buildConsentStorageKey` para gerar o nome do cookie no formato `namespace__v<versão>`. Os valores padrão são `lgpd-consent` e `1`.
|
|
98
|
+
- Alterar `storage.version` (ou `storage.namespace`) remove o cookie anterior, reseta o estado do provider e dispara `onConsentVersionChange`.
|
|
99
|
+
- `storage.domain` injeta o domínio do cookie (ex.: `.example.com`) sem precisar duplicar o valor em `cookie.domain`.
|
|
100
|
+
- `onConsentVersionChange` recebe `{ previousKey, nextKey, resetConsent }`. O `resetConsent` já é executado internamente, mas é exposto para cenários onde você precisa repetir a operação após limpar caches externos.
|
|
101
|
+
- Breaking change? **Não** — projetos que não configurarem `storage` continuam usando `lgpd-consent__v1`; alterar a versão apenas força um novo consentimento.
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import {
|
|
105
|
+
ConsentProvider,
|
|
106
|
+
buildConsentStorageKey,
|
|
107
|
+
type ConsentVersionChangeContext,
|
|
108
|
+
} from 'react-lgpd-consent'
|
|
109
|
+
|
|
110
|
+
function ConsentBoundary({ children }: { children: React.ReactNode }) {
|
|
111
|
+
return (
|
|
112
|
+
<ConsentProvider
|
|
113
|
+
categories={{ enabledCategories: ['analytics', 'marketing'] }}
|
|
114
|
+
storage={{ namespace: 'acme-suite', version: '2025-Q4', domain: '.acme.com' }}
|
|
115
|
+
cookie={{
|
|
116
|
+
// Opcional: persistir um nome de auditoria específico
|
|
117
|
+
name: buildConsentStorageKey({ namespace: 'acme-suite', version: '2025-Q4' }),
|
|
118
|
+
}}
|
|
119
|
+
onConsentVersionChange={({ previousKey, nextKey, resetConsent }: ConsentVersionChangeContext) => {
|
|
120
|
+
audit.log('consent:bump', { previousKey, nextKey })
|
|
121
|
+
localStorage.removeItem('marketingOverrides')
|
|
122
|
+
resetConsent()
|
|
123
|
+
}}
|
|
124
|
+
>
|
|
125
|
+
{children}
|
|
126
|
+
</ConsentProvider>
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
#### Cookies necessários sempre ativos
|
|
132
|
+
|
|
133
|
+
- A categoria `necessary` é adicionada automaticamente pelo `ConsentProvider` e é sempre persistida como `true`.
|
|
134
|
+
- Chamadas a `setPreference('necessary', false)` ou `setPreferences({ necessary: false, ... })` são ignoradas com log de aviso — a biblioteca garante que o estado interno continue válido.
|
|
135
|
+
- O `PreferencesModal` padrão mostra o switch desabilitado com a legenda `Cookies necessários (sempre ativos)`.
|
|
136
|
+
- `writeConsentCookie` força `necessary=true` antes de serializar; mesmo que o estado seja adulterado, a persistência permanece conforme a LGPD.
|
|
137
|
+
- Hooks (`useConsent`, `useCategoryStatus`) e integrações (`ConsentScriptLoader`, eventos do dataLayer) sempre retornam `necessary=true`, assegurando consistência entre UI, lógica e auditoria.
|
|
138
|
+
|
|
139
|
+
### `designTokens.layout.backdrop`
|
|
140
|
+
|
|
141
|
+
O token `designTokens.layout.backdrop` agora aceita `boolean | string`:
|
|
142
|
+
|
|
143
|
+
- `false`: indica que não haverá escurecimento visível; o overlay pode ainda bloquear cliques (útil quando a aplicação já fornece um dark-filter visual próprio).
|
|
144
|
+
- `string`: qualquer valor CSS válido de cor (ex.: `'rgba(0,0,0,0.4)'`) será usado como cor do backdrop.
|
|
145
|
+
- quando ausente, a biblioteca utiliza um fallback seguro `'rgba(0, 0, 0, 0.4)'`.
|
|
146
|
+
|
|
147
|
+
Consulte `types/DesignTokens` para a tipagem completa.
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
### `<ConsentGate />`
|
|
152
|
+
|
|
153
|
+
Renderiza componentes filhos apenas se o usuário deu consentimento para uma categoria específica.
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { ConsentGate } from 'react-lgpd-consent'
|
|
157
|
+
|
|
158
|
+
function MyComponent() {
|
|
159
|
+
return (
|
|
160
|
+
<ConsentGate category="marketing">
|
|
161
|
+
{/* Este componente só será renderizado se o usuário consentiu com cookies de marketing */}
|
|
162
|
+
<FacebookPixelScript />
|
|
163
|
+
</ConsentGate>
|
|
164
|
+
)
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### `<ConsentScriptLoader />`
|
|
169
|
+
|
|
170
|
+
Gerencia o carregamento de scripts de terceiros (ex: Google Analytics) com base no consentimento do usuário. Veja o guia `INTEGRACOES.md` para mais detalhes.
|
|
171
|
+
|
|
172
|
+
```tsx
|
|
173
|
+
import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
|
|
174
|
+
|
|
175
|
+
const integrations = [createGoogleAnalyticsIntegration({ measurementId: 'G-XXXXXXXXXX' })]
|
|
176
|
+
|
|
177
|
+
;<ConsentScriptLoader integrations={integrations} />
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## Hooks
|
|
183
|
+
|
|
184
|
+
### `useConsent()`
|
|
185
|
+
|
|
186
|
+
O hook principal para interagir com o estado de consentimento.
|
|
187
|
+
|
|
188
|
+
**Retorno:**
|
|
189
|
+
|
|
190
|
+
| Chave | Tipo | Descrição |
|
|
191
|
+
| ----------------- | ------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
192
|
+
| `consented` | `boolean` | `true` se o usuário já interagiu com o banner/modal. |
|
|
193
|
+
| `preferences` | `ConsentPreferences` | Um objeto com o estado de consentimento para cada categoria (ex: `{ analytics: true }`). |
|
|
194
|
+
| `isModalOpen` | `boolean` | `true` se o modal de preferências estiver aberto. |
|
|
195
|
+
| `acceptAll` | `() => void` | Aceita todas as categorias de cookies. |
|
|
196
|
+
| `rejectAll` | `() => void` | Rejeita todas as categorias não essenciais. |
|
|
197
|
+
| `setPreference` | `(cat: string, value: boolean) => void` | Define consentimento para uma categoria específica (predefinida ou customizada). |
|
|
198
|
+
| `setPreferences` | `(prefs: ConsentPreferences) => void` | Salva um novo conjunto de preferências. |
|
|
199
|
+
| `openPreferences` | `() => void` | Abre o modal de preferências. |
|
|
200
|
+
| `resetConsent` | `() => void` | Reseta o consentimento, fazendo o banner aparecer novamente. |
|
|
201
|
+
|
|
202
|
+
### `useCategories()`
|
|
203
|
+
|
|
204
|
+
Retorna um array com as definições de todas as categorias ativas no projeto. Útil para construir UIs de preferência customizadas.
|
|
205
|
+
|
|
206
|
+
### `useCategoryStatus()`
|
|
207
|
+
|
|
208
|
+
Verifica se uma categoria específica está ativa e consentida.
|
|
209
|
+
|
|
210
|
+
```tsx
|
|
211
|
+
const analyticsStatus = useCategoryStatus('analytics')
|
|
212
|
+
// Retorna um objeto: { isActive: boolean, isEssential: boolean, ... }
|
|
213
|
+
|
|
214
|
+
if (analyticsStatus.isActive && preferences.analytics) {
|
|
215
|
+
// ...
|
|
216
|
+
}
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### `useOpenPreferencesModal()` e `openPreferencesModal()`
|
|
220
|
+
|
|
221
|
+
Permitem abrir o modal de preferências de forma programática, seja de dentro de um componente React (`useOpenPreferencesModal`) ou de um script JavaScript comum (`openPreferencesModal`).
|
|
222
|
+
|
|
223
|
+
```tsx
|
|
224
|
+
// Em um componente React
|
|
225
|
+
const openModal = useOpenPreferencesModal()
|
|
226
|
+
return <button onClick={openModal}>Abrir Preferências</button>
|
|
227
|
+
|
|
228
|
+
// Em JavaScript puro
|
|
229
|
+
document.getElementById('meu-botao').addEventListener('click', openPreferencesModal)
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
234
|
+
## 🎨 Guia de Customização Avançada
|
|
235
|
+
|
|
236
|
+
A biblioteca foi projetada para ser flexível. Aqui estão as duas principais formas de customização:
|
|
237
|
+
|
|
238
|
+
### 1. Customização de Estilo com a Prop `theme`
|
|
239
|
+
|
|
240
|
+
Se você já usa Material-UI, pode passar seu próprio objeto de tema para a prop `theme` do `ConsentProvider`. Os componentes internos da biblioteca (banner, modal) herdarão suas definições de cores, tipografia, bordas, etc.
|
|
241
|
+
|
|
242
|
+
````tsx
|
|
243
|
+
import { ConsentProvider } from 'react-lgpd-consent';
|
|
244
|
+
|
|
245
|
+
> Nota importante sobre temas MUI
|
|
246
|
+
>
|
|
247
|
+
> A partir da versão 0.3.5 a biblioteca NÃO cria um `ThemeProvider` global automaticamente. O `ConsentProvider` foi refatorado para herdar o tema do aplicativo quando um `ThemeProvider` do MUI estiver presente. Se precisar de um fallback explícito, use `createDefaultConsentTheme()`:
|
|
248
|
+
>
|
|
249
|
+
> ```tsx
|
|
250
|
+
> import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
|
|
251
|
+
>
|
|
252
|
+
> <ConsentProvider theme={createDefaultConsentTheme()} categories={{ enabledCategories: ['analytics'] }}>
|
|
253
|
+
> <App />
|
|
254
|
+
> </ConsentProvider>
|
|
255
|
+
> ```
|
|
256
|
+
>
|
|
257
|
+
> Há também um getter compatível `defaultConsentTheme()` (deprecated) que retorna uma nova instância quando chamada — evite importar um tema já instanciado no nível do módulo para prevenir side-effects em SSR.
|
|
258
|
+
|
|
259
|
+
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
260
|
+
|
|
261
|
+
// 1. Crie seu tema customizado
|
|
262
|
+
const meuTema = createTheme({
|
|
263
|
+
palette: {
|
|
264
|
+
primary: {
|
|
265
|
+
main: '#673ab7', // Roxo
|
|
266
|
+
},
|
|
267
|
+
background: {
|
|
268
|
+
paper: '#f3e5f5', // Um roxo bem claro para o fundo do banner
|
|
269
|
+
},
|
|
270
|
+
},
|
|
271
|
+
typography: {
|
|
272
|
+
fontFamily: ''Georgia', serif',
|
|
273
|
+
},
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
function App() {
|
|
277
|
+
return (
|
|
278
|
+
// 2. Passe o tema para o ThemeProvider do MUI
|
|
279
|
+
<ThemeProvider theme={meuTema}>
|
|
280
|
+
{/* 3. Passe o mesmo tema para o ConsentProvider */}
|
|
281
|
+
<ConsentProvider
|
|
282
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
283
|
+
theme={meuTema}
|
|
284
|
+
>
|
|
285
|
+
<SuaAplicacao />
|
|
286
|
+
</ConsentProvider>
|
|
287
|
+
</ThemeProvider>
|
|
288
|
+
);
|
|
289
|
+
}
|
|
290
|
+
````
|
|
291
|
+
|
|
292
|
+
### 2. Substituição Completa da UI
|
|
293
|
+
|
|
294
|
+
Para controle total, você pode substituir os componentes padrão da biblioteca pelos seus.
|
|
295
|
+
|
|
296
|
+
Use as props `CookieBannerComponent` e `PreferencesModalComponent` para passar seus próprios componentes. A biblioteca cuidará da lógica de quando exibi-los e passará todas as props necessárias para que eles funcionem.
|
|
297
|
+
|
|
298
|
+
**Exemplo: Criando um Banner Totalmente Customizado**
|
|
299
|
+
|
|
300
|
+
```tsx
|
|
301
|
+
import { ConsentProvider, type CustomCookieBannerProps } from 'react-lgpd-consent'
|
|
302
|
+
|
|
303
|
+
// 1. Crie seu componente de banner. Ele receberá as props definidas em CustomCookieBannerProps.
|
|
304
|
+
function MeuBannerCustomizado({
|
|
305
|
+
acceptAll,
|
|
306
|
+
rejectAll,
|
|
307
|
+
openPreferences,
|
|
308
|
+
texts,
|
|
309
|
+
}: CustomCookieBannerProps) {
|
|
310
|
+
// Estilos CSS-in-JS ou classes CSS normais
|
|
311
|
+
const style = {
|
|
312
|
+
position: 'fixed',
|
|
313
|
+
bottom: '20px',
|
|
314
|
+
left: '20px',
|
|
315
|
+
backgroundColor: '#222',
|
|
316
|
+
color: 'white',
|
|
317
|
+
padding: '15px',
|
|
318
|
+
borderRadius: '8px',
|
|
319
|
+
zIndex: 1000,
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
return (
|
|
323
|
+
<div style={style}>
|
|
324
|
+
<h4>{texts.modalTitle}</h4>
|
|
325
|
+
<p>{texts.bannerMessage}</p>
|
|
326
|
+
<div>
|
|
327
|
+
<button onClick={acceptAll}>✅ {texts.acceptAll}</button>
|
|
328
|
+
<button onClick={rejectAll} style={{ marginLeft: '10px' }}>
|
|
329
|
+
❌ {texts.declineAll}
|
|
330
|
+
</button>
|
|
331
|
+
<button onClick={openPreferences} style={{ marginLeft: '10px' }}>
|
|
332
|
+
⚙️ {texts.preferences}
|
|
333
|
+
</button>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
)
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
function App() {
|
|
340
|
+
return (
|
|
341
|
+
<ConsentProvider
|
|
342
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
343
|
+
// 2. Passe seu componente para a prop correspondente
|
|
344
|
+
CookieBannerComponent={MeuBannerCustomizado}
|
|
345
|
+
>
|
|
346
|
+
<SuaAplicacao />
|
|
347
|
+
</ConsentProvider>
|
|
348
|
+
)
|
|
349
|
+
}
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
---
|
|
353
|
+
|
|
354
|
+
## 🆕 Novidades v0.4.1
|
|
355
|
+
|
|
356
|
+
### Descoberta Automática de Cookies
|
|
357
|
+
|
|
358
|
+
```tsx
|
|
359
|
+
import { discoverRuntimeCookies, categorizeDiscoveredCookies } from 'react-lgpd-consent'
|
|
360
|
+
|
|
361
|
+
// Descobrir cookies no navegador
|
|
362
|
+
const cookies = discoverRuntimeCookies()
|
|
363
|
+
console.log('Cookies encontrados:', cookies)
|
|
364
|
+
|
|
365
|
+
// Categorizar automaticamente
|
|
366
|
+
const categorized = categorizeDiscoveredCookies(cookies, true) // true = registra automaticamente
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Sistema Avançado de Textos
|
|
370
|
+
|
|
371
|
+
```tsx
|
|
372
|
+
import { resolveTexts, TEXT_TEMPLATES } from 'react-lgpd-consent'
|
|
373
|
+
|
|
374
|
+
// Usar template pré-configurado
|
|
375
|
+
const customTexts = resolveTexts(TEXT_TEMPLATES.ecommerce, {
|
|
376
|
+
variant: 'casual', // 'formal' | 'casual' | 'technical'
|
|
377
|
+
language: 'pt' // 'pt' | 'en' | 'es'
|
|
378
|
+
})
|
|
379
|
+
|
|
380
|
+
<ConsentProvider
|
|
381
|
+
texts={customTexts}
|
|
382
|
+
// ... outras props
|
|
383
|
+
/>
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
### Design Tokens Expandidos
|
|
387
|
+
|
|
388
|
+
```tsx
|
|
389
|
+
import type { DesignTokens } from 'react-lgpd-consent'
|
|
390
|
+
|
|
391
|
+
const customTokens: DesignTokens = {
|
|
392
|
+
colors: {
|
|
393
|
+
primary: {
|
|
394
|
+
main: '#2E7D32',
|
|
395
|
+
light: '#4CAF50',
|
|
396
|
+
dark: '#1B5E20'
|
|
397
|
+
},
|
|
398
|
+
background: {
|
|
399
|
+
paper: '#FFFFFF',
|
|
400
|
+
backdrop: 'rgba(46, 125, 50, 0.4)'
|
|
401
|
+
}
|
|
402
|
+
},
|
|
403
|
+
typography: {
|
|
404
|
+
h1: { fontSize: '2.5rem', fontWeight: 700 },
|
|
405
|
+
body1: { fontSize: '1rem', lineHeight: 1.6 }
|
|
406
|
+
},
|
|
407
|
+
spacing: {
|
|
408
|
+
xs: '4px',
|
|
409
|
+
sm: '8px',
|
|
410
|
+
md: '16px',
|
|
411
|
+
lg: '24px',
|
|
412
|
+
xl: '32px'
|
|
413
|
+
},
|
|
414
|
+
layout: {
|
|
415
|
+
borderRadius: '12px',
|
|
416
|
+
maxWidth: '1200px'
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
<ConsentProvider
|
|
421
|
+
designTokens={customTokens}
|
|
422
|
+
// ... outras props
|
|
423
|
+
/>
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
---
|
|
427
|
+
|
|
428
|
+
## `getCookiesInfoForCategory(categoryId, integrations)`
|
|
429
|
+
|
|
430
|
+
Função utilitária que retorna informações detalhadas sobre os cookies de uma categoria específica.
|
|
431
|
+
|
|
432
|
+
### Parâmetros
|
|
433
|
+
|
|
434
|
+
- **`categoryId`** (`Category`): ID da categoria ('necessary', 'analytics', 'marketing', etc.)
|
|
435
|
+
- **`integrations`** (`string[]`): Array com IDs das integrações usadas no projeto
|
|
436
|
+
|
|
437
|
+
### Retorno
|
|
438
|
+
|
|
439
|
+
- **`CookieDescriptor[]`**: Array com informações detalhadas de cada cookie
|
|
440
|
+
|
|
441
|
+
### Interface `CookieDescriptor`
|
|
442
|
+
|
|
443
|
+
```typescript
|
|
444
|
+
interface CookieDescriptor {
|
|
445
|
+
name: string // Nome ou padrão do cookie (ex: '_ga', '_ga_*')
|
|
446
|
+
purpose?: string // Finalidade do cookie
|
|
447
|
+
duration?: string // Tempo de retenção (ex: '2 anos', '24 horas')
|
|
448
|
+
domain?: string // Domínio associado (ex: '.example.com')
|
|
449
|
+
provider?: string // Provedor ou serviço (ex: 'Google Analytics')
|
|
450
|
+
}
|
|
451
|
+
```
|
|
452
|
+
|
|
453
|
+
### Exemplo de Uso
|
|
454
|
+
|
|
455
|
+
```tsx
|
|
456
|
+
import { getCookiesInfoForCategory, useCategories } from 'react-lgpd-consent'
|
|
457
|
+
|
|
458
|
+
function DetalhesCookies() {
|
|
459
|
+
const { allCategories } = useCategories()
|
|
460
|
+
const integracoesUsadas = ['google-analytics', 'mixpanel', 'hotjar']
|
|
461
|
+
|
|
462
|
+
return (
|
|
463
|
+
<div>
|
|
464
|
+
{allCategories.map((categoria) => {
|
|
465
|
+
const cookiesDetalhados = getCookiesInfoForCategory(
|
|
466
|
+
categoria.id as any,
|
|
467
|
+
integracoesUsadas
|
|
468
|
+
)
|
|
469
|
+
|
|
470
|
+
return (
|
|
471
|
+
<div key={categoria.id}>
|
|
472
|
+
<h3>{categoria.name}</h3>
|
|
473
|
+
<p>{categoria.description}</p>
|
|
474
|
+
|
|
475
|
+
{cookiesDetalhados.map((cookie) => (
|
|
476
|
+
<div key={cookie.name}>
|
|
477
|
+
<strong>{cookie.name}</strong>
|
|
478
|
+
{cookie.purpose && <p>Finalidade: {cookie.purpose}</p>}
|
|
479
|
+
{cookie.duration && <p>Duração: {cookie.duration}</p>}
|
|
480
|
+
{cookie.provider && <p>Provedor: {cookie.provider}</p>}
|
|
481
|
+
</div>
|
|
482
|
+
))}
|
|
483
|
+
</div>
|
|
484
|
+
)
|
|
485
|
+
})}
|
|
486
|
+
</div>
|
|
487
|
+
)
|
|
488
|
+
}
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
### Integração com Modal Personalizado
|
|
492
|
+
|
|
493
|
+
Esta função é especialmente útil em modais personalizados de preferências:
|
|
494
|
+
|
|
495
|
+
```tsx
|
|
496
|
+
const ModalPersonalizado: React.FC<CustomPreferencesModalProps> = ({
|
|
497
|
+
preferences,
|
|
498
|
+
setPreferences,
|
|
499
|
+
// ... outras props
|
|
500
|
+
}) => {
|
|
501
|
+
const { allCategories } = useCategories()
|
|
502
|
+
const integracoes = ['google-analytics', 'facebook-pixel'] // suas integrações
|
|
503
|
+
|
|
504
|
+
return (
|
|
505
|
+
<div>
|
|
506
|
+
{allCategories.map((categoria) => {
|
|
507
|
+
const cookies = getCookiesInfoForCategory(categoria.id as any, integracoes)
|
|
508
|
+
|
|
509
|
+
return (
|
|
510
|
+
<div key={categoria.id}>
|
|
511
|
+
<label>
|
|
512
|
+
<input
|
|
513
|
+
type="checkbox"
|
|
514
|
+
checked={preferences[categoria.id] || false}
|
|
515
|
+
onChange={(e) => setPreferences({
|
|
516
|
+
...preferences,
|
|
517
|
+
[categoria.id]: e.target.checked
|
|
518
|
+
})}
|
|
519
|
+
disabled={categoria.essential}
|
|
520
|
+
/>
|
|
521
|
+
{categoria.name}
|
|
522
|
+
</label>
|
|
523
|
+
|
|
524
|
+
{/* Detalhes expandíveis dos cookies */}
|
|
525
|
+
<details>
|
|
526
|
+
<summary>Ver cookies ({cookies.length})</summary>
|
|
527
|
+
{cookies.map(cookie => (
|
|
528
|
+
<div key={cookie.name}>
|
|
529
|
+
<code>{cookie.name}</code>: {cookie.purpose}
|
|
530
|
+
</div>
|
|
531
|
+
))}
|
|
532
|
+
</details>
|
|
533
|
+
</div>
|
|
534
|
+
)
|
|
535
|
+
})}
|
|
536
|
+
</div>
|
|
537
|
+
)
|
|
538
|
+
}
|
|
539
|
+
```
|
|
540
|
+
|
|
541
|
+
---
|
|
542
|
+
|
|
543
|
+
## Tipos Principais
|
|
544
|
+
|
|
545
|
+
Para customizações avançadas e tipagem, você pode importar os seguintes tipos:
|
|
546
|
+
|
|
547
|
+
- `ConsentProviderProps`: Interface com todas as props aceitas pelo componente `ConsentProvider`.
|
|
548
|
+
- `DesignTokens`: Objeto para customização profunda da aparência, com mais de 200 tokens para cores, fontes, etc.
|
|
549
|
+
- `AdvancedConsentTexts`: Objeto para internacionalização e textos contextuais, com suporte a múltiplos idiomas e variações.
|
|
550
|
+
- `CookieDescriptor`: Interface que descreve a estrutura de um cookie descoberto.
|
|
551
|
+
- `ConsentCookieOptions`: Estrutura com todas as opções suportadas pelo cookie de consentimento.
|
|
552
|
+
- `ConsentStorageConfig`: Define namespace, versão e domínio compartilhado da chave de armazenamento.
|
|
553
|
+
- `ConsentVersionChangeContext`: Payload recebido em `onConsentVersionChange`.
|
|
554
|
+
- `CustomCookieBannerProps`: Props passadas para um componente de banner customizado.
|
|
555
|
+
- `CustomPreferencesModalProps`: Props passadas para um modal de preferências customizado.
|
|
556
|
+
- `ConsentState`: Objeto que representa o estado completo do consentimento do usuário.
|
|
557
|
+
- `ConsentPreferences`: Objeto com as preferências de consentimento para cada categoria.
|
|
558
|
+
- `ConsentTexts`: Objeto com todos os textos customizáveis da UI.
|
|
559
|
+
- `Category`: Objeto que representa a definição de uma categoria de cookie.
|
|
560
|
+
### Exemplos de categorias (mínimo e completo)
|
|
561
|
+
|
|
562
|
+
Somente necessários (mínimo):
|
|
563
|
+
|
|
564
|
+
```tsx
|
|
565
|
+
<ConsentProvider categories={{ enabledCategories: [] }}>
|
|
566
|
+
<App />
|
|
567
|
+
</ConsentProvider>
|
|
568
|
+
```
|
|
569
|
+
|
|
570
|
+
Conjunto completo (site com analytics/marketing):
|
|
571
|
+
|
|
572
|
+
```tsx
|
|
573
|
+
<ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing', 'functional'] }}>
|
|
574
|
+
<App />
|
|
575
|
+
</ConsentProvider>
|
|
576
|
+
```
|
package/CHANGELOG.md
CHANGED
|
@@ -27,7 +27,7 @@ Esta versão introduz uma **arquitetura modular** que separa a lógica de consen
|
|
|
27
27
|
- MUI opcional como peer dependency
|
|
28
28
|
|
|
29
29
|
- **Workspace PNPM**: Monorepo organizado com builds independentes
|
|
30
|
-
- **Guia de migração completo**: [MIGRATION.md](
|
|
30
|
+
- **Guia de migração completo**: [MIGRATION.md](../../MIGRATION.md) documentando todos os cenários
|
|
31
31
|
- **Scripts de publicação**: Suporte para publicar pacotes independentemente
|
|
32
32
|
|
|
33
33
|
### ⚠️ Breaking Changes
|
|
@@ -36,7 +36,7 @@ Esta versão introduz uma **arquitetura modular** que separa a lógica de consen
|
|
|
36
36
|
- **Antes**: `<ConsentProvider theme={createTheme({...})} />`
|
|
37
37
|
- **Depois**: Use `<ThemeProvider>` do Material-UI diretamente
|
|
38
38
|
- **Razão**: Separação de responsabilidades - tema do MUI gerenciado pelo MUI
|
|
39
|
-
- **Migração**: Ver [MIGRATION.md](
|
|
39
|
+
- **Migração**: Ver [MIGRATION.md](../../MIGRATION.md) seção "Breaking Changes"
|
|
40
40
|
|
|
41
41
|
### 🔄 Changed
|
|
42
42
|
|
|
@@ -122,7 +122,7 @@ packages/
|
|
|
122
122
|
|
|
123
123
|
### 📚 Documentation
|
|
124
124
|
|
|
125
|
-
- Novo [MIGRATION.md](
|
|
125
|
+
- Novo [MIGRATION.md](../../MIGRATION.md) com:
|
|
126
126
|
- 3 cenários de migração detalhados
|
|
127
127
|
- Comparativo de bundles
|
|
128
128
|
- Troubleshooting completo
|