react-lgpd-consent 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +100 -0
- package/QUICKSTART.en.md +34 -0
- package/QUICKSTART.md +308 -1
- package/README.en.md +19 -0
- package/README.md +30 -0
- package/dist/{PreferencesModal-D2SEVH3N.js → PreferencesModal-RNRD3JKB.js} +1 -1
- package/dist/{chunk-B5FNONG3.js → chunk-VOQUCGOA.js} +902 -242
- package/dist/index.cjs +1698 -277
- package/dist/index.d.cts +1782 -230
- package/dist/index.d.ts +1782 -230
- package/dist/index.js +738 -8
- package/package.json +32 -4
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,106 @@ Todas as mudanças notáveis neste projeto serão documentadas neste arquivo.
|
|
|
4
4
|
|
|
5
5
|
O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.0.0/), e este projeto segue [Semantic Versioning](https://semver.org/lang/pt-BR/).
|
|
6
6
|
|
|
7
|
+
## [0.4.1] - 2025-09-21 — Expansão das Integrações Nativas de Scripts
|
|
8
|
+
|
|
9
|
+
### 🚀 **Integrações Nativas Expandidas**
|
|
10
|
+
- **Facebook Pixel**: `createFacebookPixelIntegration()` com auto-tracking e advanced matching
|
|
11
|
+
- **Hotjar**: `createHotjarIntegration()` para heatmaps e session recordings
|
|
12
|
+
- **Mixpanel**: `createMixpanelIntegration()` com configuração avançada de eventos
|
|
13
|
+
- **Microsoft Clarity**: `createClarityIntegration()` para analytics de comportamento
|
|
14
|
+
- **Intercom**: `createIntercomIntegration()` para chat e suporte ao cliente
|
|
15
|
+
- **Zendesk Chat**: `createZendeskChatIntegration()` para atendimento integrado
|
|
16
|
+
- **Drift**: `createDriftIntegration()` para conversational marketing
|
|
17
|
+
- **Freshchat**: `createFreshchatIntegration()` para customer support
|
|
18
|
+
|
|
19
|
+
### 🎯 **Sistema de Configuração em Lote**
|
|
20
|
+
- **Templates de negócio**: `createECommerceIntegrations()`, `createSaaSIntegrations()`, `createCorporateIntegrations()`
|
|
21
|
+
- **Categorização inteligente**: `suggestCategoryForScript()` para sugestão automática de categorias
|
|
22
|
+
- **Configuração unificada**: Setup simplificado para múltiplas ferramentas com um comando
|
|
23
|
+
- **Padrões de mercado**: Templates baseados em necessidades reais do mercado brasileiro
|
|
24
|
+
|
|
25
|
+
### 🔧 **Melhorias no Sistema de Scripts**
|
|
26
|
+
- **Validação robusta**: `validateNecessaryClassification()` corrigida para evitar falsos positivos
|
|
27
|
+
- **Auto-configuração**: `autoConfigureCategories()` com detecção inteligente de categorias necessárias
|
|
28
|
+
- **Error handling**: Melhor tratamento de erros em carregamento de scripts
|
|
29
|
+
- **Performance**: Carregamento otimizado e lazy loading de integrações
|
|
30
|
+
|
|
31
|
+
### 🔍 **Descoberta Automática de Cookies (Experimental)**
|
|
32
|
+
- **discoverRuntimeCookies()**: Escaneamento de cookies em tempo real no navegador
|
|
33
|
+
- **detectConsentCookieName()**: Detecção automática do cookie de consentimento
|
|
34
|
+
- **categorizeDiscoveredCookies()**: Categorização inteligente usando padrões LGPD
|
|
35
|
+
- **Integração nativa**: Suporte a `setCookieCatalogOverrides` automático
|
|
36
|
+
- **SSR-safe**: Funciona corretamente em ambientes server-side rendering
|
|
37
|
+
|
|
38
|
+
### 🎨 **Design Tokens Expandidos**
|
|
39
|
+
- **200+ pontos de customização**: Expansão dramática do sistema de design tokens
|
|
40
|
+
- **Sistema responsivo**: Breakpoints, spacing responsivo, typography hierarchy
|
|
41
|
+
- **Acessibilidade nativa**: Contrast ratios, focus states, motion preferences
|
|
42
|
+
- **Tokens por componente**: Customização granular para cada elemento UI
|
|
43
|
+
|
|
44
|
+
### 📝 **Sistema Avançado de Textos**
|
|
45
|
+
- **Templates pré-configurados**: Ecommerce, SaaS, Governo com contextos específicos
|
|
46
|
+
- **Multilingual**: Português, inglês, espanhol com fallbacks inteligentes
|
|
47
|
+
- **Função resolveTexts**: Resolução automática de textos baseada em contexto
|
|
48
|
+
|
|
49
|
+
### 🧪 **Melhorias de Testes e Qualidade**
|
|
50
|
+
- **193 testes passando**: Cobertura substancialmente melhorada
|
|
51
|
+
- **19 novos testes**: Especificamente para `cookieRegistry` (antes 45.83% → 100% branches)
|
|
52
|
+
- **Test realism**: Testes adaptados ao comportamento real vs ideal
|
|
53
|
+
- **Edge cases**: Performance, boundary testing, state management
|
|
54
|
+
- **Lint compliance**: Configuração ESLint mais rigorosa e aderente
|
|
55
|
+
|
|
56
|
+
### 🔧 **Melhorias de API e Developer Experience**
|
|
57
|
+
- **Exports organizados**: Melhor estruturação das exportações públicas
|
|
58
|
+
- **TypeScript strict**: Tipagem mais rigorosa e descritiva
|
|
59
|
+
- **Documentação TSDoc**: Comentários expandidos com exemplos práticos
|
|
60
|
+
- **Error handling**: Tratamento de erros mais robusto e informativo
|
|
61
|
+
- **Performance**: Otimizações em carregamento e renderização
|
|
62
|
+
|
|
63
|
+
### 📚 **Exemplos e Migração**
|
|
64
|
+
- **MigrationDemo-v0.4.1.tsx**: Exemplo completo mostrando todas as novidades
|
|
65
|
+
- **Remoção**: TestV0.3.1.tsx removido (obsoleto)
|
|
66
|
+
- **Compatibilidade**: Guias de migração antes/depois
|
|
67
|
+
- **Best practices**: Demonstrações de uso avançado
|
|
68
|
+
|
|
69
|
+
### 🏗️ **Build e Infraestrutura**
|
|
70
|
+
- **Bundle otimizado**: ESM 34.36 KB, CJS 102.74 KB
|
|
71
|
+
- **Tree-shaking**: Configuração `sideEffects: false` otimizada
|
|
72
|
+
- **Docs geradas**: TypeDoc atualizado com novas funcionalidades
|
|
73
|
+
- **Pipeline robusto**: Type-check + tests + lint + build + docs
|
|
74
|
+
|
|
75
|
+
### ⚠️ **Breaking Changes**
|
|
76
|
+
|
|
77
|
+
#### 🔧 **`setPreference` Type Change**
|
|
78
|
+
- **Mudança**: `setPreference(cat: Category, value: boolean)` → `setPreference(cat: string, value: boolean)`
|
|
79
|
+
- **Motivo**: Suporte a categorias customizadas além das predefinidas
|
|
80
|
+
- **Impacto**: Código TypeScript com tipo `Category` explícito pode precisar ajustes
|
|
81
|
+
- **Migração**:
|
|
82
|
+
- ✅ **Nenhuma mudança necessária** se usando strings literais (`'analytics'`, `'marketing'`)
|
|
83
|
+
- ⚠️ **Ajuste necessário** apenas se estava usando explicitamente o tipo `Category`
|
|
84
|
+
- 📚 **Guia**: Use `string` para suportar categorias customizadas ou continue usando os valores padrão
|
|
85
|
+
|
|
86
|
+
#### 🔧 **`ScriptIntegration.category` Type Change**
|
|
87
|
+
- **Mudança**: `category: Category` → `category: string`
|
|
88
|
+
- **Motivo**: Suporte a categorias customizadas nas integrações de script
|
|
89
|
+
- **Impacto**: Integrações customizadas com tipo `Category` explícito
|
|
90
|
+
- **Migração**: Mesmas diretrizes do `setPreference` acima
|
|
91
|
+
|
|
92
|
+
### 🎯 **Categorias Suportadas**
|
|
93
|
+
- `necessary` (sempre ativo)
|
|
94
|
+
- `analytics` (Google Analytics, etc.)
|
|
95
|
+
- `marketing` (Facebook Pixel, Google Ads)
|
|
96
|
+
- `functional` (Chat, mapas, widgets)
|
|
97
|
+
- `social` (Redes sociais, compartilhamento)
|
|
98
|
+
- `personalization` (Preferências, customização)
|
|
99
|
+
|
|
100
|
+
### 📈 **Estatísticas de Melhoria**
|
|
101
|
+
- **Design Tokens**: 4 → 200+ pontos de customização (+4900%)
|
|
102
|
+
- **Testes**: 174 → 193 testes (+11% cobertura)
|
|
103
|
+
- **Funcionalidades**: +15 novas funções exportadas
|
|
104
|
+
- **Documentação**: +3 templates de texto, +6 contextos específicos
|
|
105
|
+
- **Developer APIs**: +8 utilitários para descoberta de cookies
|
|
106
|
+
|
|
7
107
|
## [0.4.0] - 2025-09-09 — Custom categories
|
|
8
108
|
|
|
9
109
|
### Added
|
package/QUICKSTART.en.md
CHANGED
|
@@ -42,6 +42,40 @@ export default App
|
|
|
42
42
|
## 🧩 Custom categories (customCategories)
|
|
43
43
|
Available since v0.4.0.
|
|
44
44
|
|
|
45
|
+
## 🎨 Style tip: Theme-aware backdrop
|
|
46
|
+
|
|
47
|
+
In blocking mode, the banner uses a backdrop to focus user attention. You can control it via design tokens:
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
<ConsentProvider
|
|
51
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
52
|
+
designTokens={{
|
|
53
|
+
layout: {
|
|
54
|
+
// false: transparent | 'auto': adapts to theme | string: custom color (e.g., '#00000088')
|
|
55
|
+
backdrop: 'auto',
|
|
56
|
+
},
|
|
57
|
+
colors: {
|
|
58
|
+
// If omitted, MUI theme palette is used (background.paper, text.primary)
|
|
59
|
+
// background: '#1e1e1e',
|
|
60
|
+
// text: '#ffffff',
|
|
61
|
+
},
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
<App />
|
|
65
|
+
</ConsentProvider>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
If `colors.background` or `colors.text` are omitted, the library falls back to `theme.palette.background.paper` and `theme.palette.text.primary`, ensuring dark mode compatibility.
|
|
69
|
+
|
|
70
|
+
## 🧑🏫 Developer Guidance (console)
|
|
71
|
+
|
|
72
|
+
In development, the console shows a helpful guidance panel:
|
|
73
|
+
- Warns when using defaults; suggests making categories explicit
|
|
74
|
+
- Lists active categories and which require UI toggles
|
|
75
|
+
- Detects integrations that require categories and suggests enabling them
|
|
76
|
+
- Shares Brazilian LGPD best practices and flags UX issues (too many categories)
|
|
77
|
+
- Silenced automatically in production; SSR-safe
|
|
78
|
+
|
|
45
79
|
Add project-specific categories (e.g., support chat, video players, A/B testing):
|
|
46
80
|
|
|
47
81
|
```tsx
|
package/QUICKSTART.md
CHANGED
|
@@ -65,6 +65,40 @@ export default App
|
|
|
65
65
|
## 🧩 Categorias customizadas (customCategories)
|
|
66
66
|
Disponível a partir da v0.4.0.
|
|
67
67
|
|
|
68
|
+
## 🎨 Dica de estilo: Backdrop sensível ao tema
|
|
69
|
+
|
|
70
|
+
No modo bloqueante, o banner usa um backdrop para focar a atenção do usuário. Você pode controlar via design tokens:
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<ConsentProvider
|
|
74
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
75
|
+
designTokens={{
|
|
76
|
+
layout: {
|
|
77
|
+
// false: transparente | 'auto': ajusta ao tema | string: cor custom (ex.: '#00000088')
|
|
78
|
+
backdrop: 'auto',
|
|
79
|
+
},
|
|
80
|
+
colors: {
|
|
81
|
+
// Se omitido, usa o palette do tema MUI (background.paper, text.primary)
|
|
82
|
+
// background: '#1e1e1e',
|
|
83
|
+
// text: '#ffffff',
|
|
84
|
+
},
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
<App />
|
|
88
|
+
</ConsentProvider>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Se `colors.background` ou `colors.text` não forem fornecidos, a lib usa automaticamente `theme.palette.background.paper` e `theme.palette.text.primary` do MUI, garantindo compatibilidade com dark mode.
|
|
92
|
+
|
|
93
|
+
## 🧑🏫 Guia do Dev (console)
|
|
94
|
+
|
|
95
|
+
Durante o desenvolvimento, o console exibe um guia com:
|
|
96
|
+
- Avisos quando a configuração padrão é usada; sugestões para explicitar categorias
|
|
97
|
+
- Lista de categorias ativas e quais exigem toggle
|
|
98
|
+
- Detecção de integrações que requerem categorias, com sugestão para habilitá-las
|
|
99
|
+
- Boas práticas LGPD (Brasil) e alertas de UX (categorias demais)
|
|
100
|
+
- Silenciado automaticamente em produção; SSR-safe
|
|
101
|
+
|
|
68
102
|
Adicione categorias específicas do seu projeto (ex.: chat de suporte, players de vídeo, AB testing):
|
|
69
103
|
|
|
70
104
|
```tsx
|
|
@@ -193,7 +227,6 @@ A biblioteca `react-lgpd-consent` não injeta um `ThemeProvider` global por cont
|
|
|
193
227
|
|
|
194
228
|
```tsx
|
|
195
229
|
import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
|
|
196
|
-
|
|
197
230
|
;<ConsentProvider
|
|
198
231
|
theme={createDefaultConsentTheme()}
|
|
199
232
|
categories={{ enabledCategories: ['analytics'] }}
|
|
@@ -275,6 +308,280 @@ function App() {
|
|
|
275
308
|
}
|
|
276
309
|
```
|
|
277
310
|
|
|
311
|
+
### 🍪 Modal Personalizado com Detalhes dos Cookies
|
|
312
|
+
|
|
313
|
+
Para casos mais avançados onde você precisa exibir informações detalhadas sobre cada cookie (nome, finalidade, duração, provedor), use `getCookiesInfoForCategory` junto com `useCategories`:
|
|
314
|
+
|
|
315
|
+
```tsx
|
|
316
|
+
import React from 'react'
|
|
317
|
+
import {
|
|
318
|
+
ConsentProvider,
|
|
319
|
+
useCategories,
|
|
320
|
+
getCookiesInfoForCategory,
|
|
321
|
+
type CustomPreferencesModalProps,
|
|
322
|
+
type CookieDescriptor,
|
|
323
|
+
} from 'react-lgpd-consent'
|
|
324
|
+
|
|
325
|
+
const ModalComDetalhesCookies: React.FC<CustomPreferencesModalProps> = ({
|
|
326
|
+
preferences,
|
|
327
|
+
setPreferences,
|
|
328
|
+
closePreferences,
|
|
329
|
+
isModalOpen,
|
|
330
|
+
texts,
|
|
331
|
+
}) => {
|
|
332
|
+
const { allCategories } = useCategories()
|
|
333
|
+
|
|
334
|
+
if (!isModalOpen) return null
|
|
335
|
+
|
|
336
|
+
// Simula integrações usadas no projeto (normalmente você teria isso em contexto)
|
|
337
|
+
const integracoesUsadas = ['google-analytics', 'google-tag-manager', 'mixpanel']
|
|
338
|
+
|
|
339
|
+
return (
|
|
340
|
+
<div
|
|
341
|
+
style={{
|
|
342
|
+
position: 'fixed',
|
|
343
|
+
top: 0,
|
|
344
|
+
left: 0,
|
|
345
|
+
width: '100vw',
|
|
346
|
+
height: '100vh',
|
|
347
|
+
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
348
|
+
display: 'flex',
|
|
349
|
+
justifyContent: 'center',
|
|
350
|
+
alignItems: 'center',
|
|
351
|
+
zIndex: 2000,
|
|
352
|
+
}}
|
|
353
|
+
>
|
|
354
|
+
<div
|
|
355
|
+
style={{
|
|
356
|
+
backgroundColor: 'white',
|
|
357
|
+
borderRadius: '12px',
|
|
358
|
+
padding: '2rem',
|
|
359
|
+
maxWidth: '800px',
|
|
360
|
+
maxHeight: '80vh',
|
|
361
|
+
overflow: 'auto',
|
|
362
|
+
boxShadow: '0 10px 25px rgba(0, 0, 0, 0.25)',
|
|
363
|
+
}}
|
|
364
|
+
>
|
|
365
|
+
<h2 style={{ marginBottom: '1rem', color: '#333' }}>{texts.modalTitle}</h2>
|
|
366
|
+
<p style={{ marginBottom: '2rem', color: '#666' }}>{texts.modalIntro}</p>
|
|
367
|
+
|
|
368
|
+
{/* Lista de categorias com detalhes dos cookies */}
|
|
369
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
|
370
|
+
{allCategories.map((categoria) => {
|
|
371
|
+
const cookiesDetalhados: CookieDescriptor[] = getCookiesInfoForCategory(
|
|
372
|
+
categoria.id as any,
|
|
373
|
+
integracoesUsadas,
|
|
374
|
+
)
|
|
375
|
+
|
|
376
|
+
return (
|
|
377
|
+
<div
|
|
378
|
+
key={categoria.id}
|
|
379
|
+
style={{
|
|
380
|
+
border: '1px solid #e0e0e0',
|
|
381
|
+
borderRadius: '8px',
|
|
382
|
+
padding: '1.5rem',
|
|
383
|
+
backgroundColor: '#fafafa',
|
|
384
|
+
}}
|
|
385
|
+
>
|
|
386
|
+
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
|
|
387
|
+
<input
|
|
388
|
+
type="checkbox"
|
|
389
|
+
id={`categoria-${categoria.id}`}
|
|
390
|
+
checked={preferences[categoria.id] || false}
|
|
391
|
+
onChange={(e) =>
|
|
392
|
+
setPreferences({
|
|
393
|
+
...preferences,
|
|
394
|
+
[categoria.id]: e.target.checked,
|
|
395
|
+
})
|
|
396
|
+
}
|
|
397
|
+
disabled={categoria.essential}
|
|
398
|
+
style={{ marginRight: '0.75rem', transform: 'scale(1.2)' }}
|
|
399
|
+
/>
|
|
400
|
+
<label
|
|
401
|
+
htmlFor={`categoria-${categoria.id}`}
|
|
402
|
+
style={{ fontSize: '1.1rem', fontWeight: 'bold', color: '#333' }}
|
|
403
|
+
>
|
|
404
|
+
{categoria.name}
|
|
405
|
+
{categoria.essential && (
|
|
406
|
+
<span style={{ fontSize: '0.8rem', color: '#888', marginLeft: '0.5rem' }}>
|
|
407
|
+
(sempre ativo)
|
|
408
|
+
</span>
|
|
409
|
+
)}
|
|
410
|
+
</label>
|
|
411
|
+
</div>
|
|
412
|
+
|
|
413
|
+
<p style={{ marginBottom: '1rem', color: '#666', fontSize: '0.95rem' }}>
|
|
414
|
+
{categoria.description}
|
|
415
|
+
</p>
|
|
416
|
+
|
|
417
|
+
{/* Lista de cookies desta categoria */}
|
|
418
|
+
{cookiesDetalhados.length > 0 && (
|
|
419
|
+
<details style={{ marginTop: '1rem' }}>
|
|
420
|
+
<summary
|
|
421
|
+
style={{
|
|
422
|
+
cursor: 'pointer',
|
|
423
|
+
fontWeight: '500',
|
|
424
|
+
color: '#4f46e5',
|
|
425
|
+
marginBottom: '0.5rem',
|
|
426
|
+
}}
|
|
427
|
+
>
|
|
428
|
+
Ver cookies desta categoria ({cookiesDetalhados.length})
|
|
429
|
+
</summary>
|
|
430
|
+
<div style={{ marginTop: '0.75rem', paddingLeft: '1rem' }}>
|
|
431
|
+
{cookiesDetalhados.map((cookie, index) => (
|
|
432
|
+
<div
|
|
433
|
+
key={`${cookie.name}-${index}`}
|
|
434
|
+
style={{
|
|
435
|
+
backgroundColor: 'white',
|
|
436
|
+
border: '1px solid #e5e5e5',
|
|
437
|
+
borderRadius: '6px',
|
|
438
|
+
padding: '1rem',
|
|
439
|
+
marginBottom: '0.75rem',
|
|
440
|
+
}}
|
|
441
|
+
>
|
|
442
|
+
<h4
|
|
443
|
+
style={{ margin: '0 0 0.5rem 0', color: '#333', fontSize: '0.95rem' }}
|
|
444
|
+
>
|
|
445
|
+
<code
|
|
446
|
+
style={{
|
|
447
|
+
backgroundColor: '#f3f4f6',
|
|
448
|
+
padding: '2px 6px',
|
|
449
|
+
borderRadius: '4px',
|
|
450
|
+
fontFamily: 'monospace',
|
|
451
|
+
}}
|
|
452
|
+
>
|
|
453
|
+
{cookie.name}
|
|
454
|
+
</code>
|
|
455
|
+
</h4>
|
|
456
|
+
{cookie.purpose && (
|
|
457
|
+
<p style={{ margin: '0.25rem 0', fontSize: '0.9rem', color: '#555' }}>
|
|
458
|
+
<strong>Finalidade:</strong> {cookie.purpose}
|
|
459
|
+
</p>
|
|
460
|
+
)}
|
|
461
|
+
{cookie.duration && (
|
|
462
|
+
<p style={{ margin: '0.25rem 0', fontSize: '0.9rem', color: '#555' }}>
|
|
463
|
+
<strong>Duração:</strong> {cookie.duration}
|
|
464
|
+
</p>
|
|
465
|
+
)}
|
|
466
|
+
{cookie.provider && (
|
|
467
|
+
<p style={{ margin: '0.25rem 0', fontSize: '0.9rem', color: '#555' }}>
|
|
468
|
+
<strong>Provedor:</strong> {cookie.provider}
|
|
469
|
+
</p>
|
|
470
|
+
)}
|
|
471
|
+
</div>
|
|
472
|
+
))}
|
|
473
|
+
</div>
|
|
474
|
+
</details>
|
|
475
|
+
)}
|
|
476
|
+
|
|
477
|
+
{/* Fallback para categorias sem cookies catalogados */}
|
|
478
|
+
{cookiesDetalhados.length === 0 &&
|
|
479
|
+
categoria.cookies &&
|
|
480
|
+
categoria.cookies.length > 0 && (
|
|
481
|
+
<div style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#666' }}>
|
|
482
|
+
<strong>Padrões de cookies:</strong>{' '}
|
|
483
|
+
{categoria.cookies.map((pattern, i) => (
|
|
484
|
+
<code
|
|
485
|
+
key={i}
|
|
486
|
+
style={{
|
|
487
|
+
backgroundColor: '#f3f4f6',
|
|
488
|
+
padding: '2px 4px',
|
|
489
|
+
borderRadius: '3px',
|
|
490
|
+
marginRight: '0.5rem',
|
|
491
|
+
fontFamily: 'monospace',
|
|
492
|
+
fontSize: '0.8rem',
|
|
493
|
+
}}
|
|
494
|
+
>
|
|
495
|
+
{pattern}
|
|
496
|
+
</code>
|
|
497
|
+
))}
|
|
498
|
+
</div>
|
|
499
|
+
)}
|
|
500
|
+
</div>
|
|
501
|
+
)
|
|
502
|
+
})}
|
|
503
|
+
</div>
|
|
504
|
+
|
|
505
|
+
{/* Botões de ação */}
|
|
506
|
+
<div
|
|
507
|
+
style={{
|
|
508
|
+
display: 'flex',
|
|
509
|
+
gap: '1rem',
|
|
510
|
+
justifyContent: 'flex-end',
|
|
511
|
+
marginTop: '2rem',
|
|
512
|
+
paddingTop: '1rem',
|
|
513
|
+
borderTop: '1px solid #e0e0e0',
|
|
514
|
+
}}
|
|
515
|
+
>
|
|
516
|
+
<button
|
|
517
|
+
onClick={closePreferences}
|
|
518
|
+
style={{
|
|
519
|
+
padding: '0.75rem 1.5rem',
|
|
520
|
+
backgroundColor: '#6b7280',
|
|
521
|
+
color: 'white',
|
|
522
|
+
border: 'none',
|
|
523
|
+
borderRadius: '6px',
|
|
524
|
+
cursor: 'pointer',
|
|
525
|
+
fontSize: '0.95rem',
|
|
526
|
+
}}
|
|
527
|
+
>
|
|
528
|
+
Cancelar
|
|
529
|
+
</button>
|
|
530
|
+
<button
|
|
531
|
+
onClick={closePreferences}
|
|
532
|
+
style={{
|
|
533
|
+
padding: '0.75rem 1.5rem',
|
|
534
|
+
backgroundColor: '#4f46e5',
|
|
535
|
+
color: 'white',
|
|
536
|
+
border: 'none',
|
|
537
|
+
borderRadius: '6px',
|
|
538
|
+
cursor: 'pointer',
|
|
539
|
+
fontSize: '0.95rem',
|
|
540
|
+
}}
|
|
541
|
+
>
|
|
542
|
+
{texts.save}
|
|
543
|
+
</button>
|
|
544
|
+
</div>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
)
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
function AppComModalAvancado() {
|
|
551
|
+
return (
|
|
552
|
+
<ConsentProvider
|
|
553
|
+
categories={{
|
|
554
|
+
enabledCategories: ['analytics', 'marketing', 'functional'],
|
|
555
|
+
}}
|
|
556
|
+
PreferencesModalComponent={ModalComDetalhesCookies}
|
|
557
|
+
// Especifique as integrações para obter informações detalhadas dos cookies
|
|
558
|
+
scriptIntegrations={[
|
|
559
|
+
{ id: 'google-analytics', config: { measurementId: 'GA_MEASUREMENT_ID' } },
|
|
560
|
+
{ id: 'google-tag-manager', config: { containerId: 'GTM-XXXXXXX' } },
|
|
561
|
+
{ id: 'mixpanel', config: { token: 'MIXPANEL_TOKEN' } },
|
|
562
|
+
]}
|
|
563
|
+
>
|
|
564
|
+
<main>Minha App com Modal Avançado</main>
|
|
565
|
+
</ConsentProvider>
|
|
566
|
+
)
|
|
567
|
+
}
|
|
568
|
+
```
|
|
569
|
+
|
|
570
|
+
#### 🔧 APIs Utilizadas no Exemplo Avançado
|
|
571
|
+
|
|
572
|
+
- **`useCategories()`**: Hook que retorna informações sobre todas as categorias ativas
|
|
573
|
+
- **`getCookiesInfoForCategory(categoryId, integrations)`**: Função que retorna detalhes completos dos cookies
|
|
574
|
+
- **`CookieDescriptor`**: Interface TypeScript com `name`, `purpose`, `duration`, `provider`
|
|
575
|
+
|
|
576
|
+
#### 💡 Principais Funcionalidades
|
|
577
|
+
|
|
578
|
+
1. **Informações Detalhadas**: Cada cookie mostra nome, finalidade, duração e provedor
|
|
579
|
+
2. **Organização por Categoria**: Cookies agrupados logicamente
|
|
580
|
+
3. **Interface Expansível**: Detalhes dos cookies ficam em `<details>` expansível
|
|
581
|
+
4. **Fallback Inteligente**: Mostra padrões básicos quando detalhes não estão disponíveis
|
|
582
|
+
5. **Acessibilidade**: Labels apropriados e navegação por teclado
|
|
583
|
+
6. **Design Responsivo**: Layout que se adapta a diferentes tamanhos de tela
|
|
584
|
+
|
|
278
585
|
## 🎮 Controle Programático
|
|
279
586
|
|
|
280
587
|
### Hook useOpenPreferencesModal (React)
|
package/README.en.md
CHANGED
|
@@ -64,6 +64,10 @@ export default function App() {
|
|
|
64
64
|
-
|
|
65
65
|
- **[QUICKSTART.en.md](./QUICKSTART.en.md)** (recommended)
|
|
66
66
|
- New in v0.4.0: `customCategories` support — see the “Custom categories (customCategories)” section in the Quickstart.
|
|
67
|
+
- New in v0.4.1: native integrations for Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom, and Zendesk — see [INTEGRACOES.md](./INTEGRACOES.md).
|
|
68
|
+
- Tip: set `designTokens.layout.backdrop: 'auto'` for a theme-aware blocking banner backdrop.
|
|
69
|
+
- Auto-config of categories: the library detects required categories from integrations and surfaces toggles even if you forgot to enable them (initial value is always rejected). We still recommend explicitly listing them in `categories.enabledCategories` for clarity.
|
|
70
|
+
- Non-blocked Policy/Terms pages: if `policyLinkUrl` and/or `termsLinkUrl` point to the current page, the blocking overlay is not applied — ensuring readability of these pages.
|
|
67
71
|
- **[Docs / API](./API.md)**
|
|
68
72
|
- **[LGPD Compliance](./CONFORMIDADE.md)**
|
|
69
73
|
- **[Integrations](./INTEGRACOES.md)**
|
|
@@ -73,6 +77,21 @@ export default function App() {
|
|
|
73
77
|
- **[⚙️ TypeDoc - API Reference](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Automatically generated complete API documentation.
|
|
74
78
|
- **[🏠 Documentation Portal](https://lucianoedipo.github.io/react-lgpd-consent/)**: Home page that navigates between all docs sites.
|
|
75
79
|
|
|
80
|
+
### 🧑🏫 Developer Guidance (dev-only)
|
|
81
|
+
|
|
82
|
+
In development, the library prints a guidance panel in the console to help you configure correctly:
|
|
83
|
+
- Warns when using default categories; suggests making them explicit
|
|
84
|
+
- Lists active categories and which ones require a UI toggle
|
|
85
|
+
- Detects integrations that require categories and suggests enabling them
|
|
86
|
+
- Flags excessive number of categories (UX)
|
|
87
|
+
- Highlights Brazilian LGPD best practices: opt-out by default, clear policy, consent logging, retention
|
|
88
|
+
- Silenced in production; SSR-safe
|
|
89
|
+
|
|
90
|
+
### ⚠️ Breaking Changes v0.4.1
|
|
91
|
+
- **Custom categories support**: `setPreference` and `ScriptIntegration.category` now use `string` instead of `Category`
|
|
92
|
+
- **Minimal impact**: Code using literal strings continues working without changes
|
|
93
|
+
- **Migration guide**: See [CHANGELOG.md](./CHANGELOG.md) for complete details
|
|
94
|
+
|
|
76
95
|
---
|
|
77
96
|
|
|
78
97
|
## 🤝 Contributing
|
package/README.md
CHANGED
|
@@ -46,6 +46,32 @@ npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-c
|
|
|
46
46
|
|
|
47
47
|
---
|
|
48
48
|
|
|
49
|
+
## ✨ Novidades v0.4.1
|
|
50
|
+
|
|
51
|
+
### 🎨 Design Tokens Expandidos
|
|
52
|
+
- **200+ pontos de customização** (cores, tipografia, espaçamento, layout)
|
|
53
|
+
- **Sistema responsivo** com breakpoints e variações
|
|
54
|
+
- **Acessibilidade nativa** com contrast ratios e focus states
|
|
55
|
+
- **Temas light/dark/auto** com transições suaves
|
|
56
|
+
|
|
57
|
+
### 📝 Sistema Avançado de Textos
|
|
58
|
+
- **Templates pré-configurados** para ecommerce, SaaS e governo
|
|
59
|
+
- **Internacionalização completa** (pt, en, es)
|
|
60
|
+
- **Variações de tom** (formal, casual, técnico)
|
|
61
|
+
- **Resolução automática** baseada em contexto
|
|
62
|
+
|
|
63
|
+
### 🔍 Descoberta de Cookies (Experimental)
|
|
64
|
+
- **Detecção automática** de cookies em runtime
|
|
65
|
+
- **Categorização inteligente** usando padrões LGPD
|
|
66
|
+
- **Integração nativa** com sistema de override
|
|
67
|
+
|
|
68
|
+
### ⚠️ Breaking Changes
|
|
69
|
+
- **Suporte a categorias customizadas**: `setPreference` e `ScriptIntegration.category` agora usam `string` ao invés de `Category`
|
|
70
|
+
- **Impacto mínimo**: Código usando strings literais continua funcionando sem alterações
|
|
71
|
+
- **Consulte**: [CHANGELOG.md](./CHANGELOG.md) para guia de migração completo
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
49
75
|
## 📖 Uso Básico
|
|
50
76
|
|
|
51
77
|
Envolva sua aplicação com o `ConsentProvider` (exemplo mínimo):
|
|
@@ -88,6 +114,10 @@ Para mais detalhes sobre customização, hooks e funcionalidades, consulte os se
|
|
|
88
114
|
|
|
89
115
|
- **[📚 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.
|
|
90
116
|
- Novo na v0.4.0: suporte a `customCategories` — veja a seção “Categorias customizadas (customCategories)” no Quickstart.
|
|
117
|
+
- Novo na v0.4.1: integrações nativas para Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom e Zendesk — veja o guia [INTEGRACOES.md](./INTEGRACOES.md).
|
|
118
|
+
- Dica: use `designTokens.layout.backdrop: 'auto'` para backdrop sensível ao tema no banner bloqueante.
|
|
119
|
+
- 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.
|
|
120
|
+
- 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.
|
|
91
121
|
- **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
|
|
92
122
|
- **[Guia de Conformidade (`CONFORMIDADE.md`)](./CONFORMIDADE.md)**: Detalhes sobre as funcionalidades de conformidade com a LGPD.
|
|
93
123
|
- **[Guia de Integrações (`INTEGRACOES.md`)](./INTEGRACOES.md)**: Como usar as integrações nativas e criar as suas.
|