react-lgpd-consent 0.2.2 → 0.2.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/README.md +752 -739
- package/dist/{PreferencesModal-UL552BFP.js → PreferencesModal-SOVV24DU.js} +1 -1
- package/dist/{chunk-JAX63PBG.js → chunk-UKKWGQN7.js} +62 -26
- package/dist/index.cjs +63 -26
- package/dist/index.d.cts +177 -18
- package/dist/index.d.ts +177 -18
- package/dist/index.js +2 -2
- package/package.json +109 -105
package/README.md
CHANGED
|
@@ -1,739 +1,752 @@
|
|
|
1
|
-
# react-lgpd-consent 🍪
|
|
2
|
-
|
|
3
|
-
[](http### 🚨 Sistema de Orientações para Desenvolvedores (v0.2.2)
|
|
4
|
-
|
|
5
|
-
A v0.2.2 inclui sistema inteligente que **orienta developers sobre configuração adequada para compliance LGPD**:
|
|
6
|
-
|
|
7
|
-
- 🧠 **Console Automático**: Avisos e sugestões sobre configuração
|
|
8
|
-
- 🎯 **UI Dinâmica**: Componentes se adaptam à configuração do projeto
|
|
9
|
-
- 🛡️ **Compliance por Design**: Previne problemas de conformidade LGPD
|
|
10
|
-
- 🔧 **Hooks Avançados**: `useCategories()` e `useCategoryStatus()` para controle total
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
-
|
|
60
|
-
|
|
61
|
-
-
|
|
62
|
-
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
-
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
<ConsentProvider
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
{
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
>
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
###
|
|
454
|
-
|
|
455
|
-
```tsx
|
|
456
|
-
<ConsentProvider
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
```
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
{
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
//
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
-
|
|
728
|
-
-
|
|
729
|
-
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
1
|
+
# react-lgpd-consent 🍪
|
|
2
|
+
|
|
3
|
+
[](http### 🚨 Sistema de Orientações para Desenvolvedores (v0.2.2)
|
|
4
|
+
|
|
5
|
+
A v0.2.2 inclui sistema inteligente que **orienta developers sobre configuração adequada para compliance LGPD**:
|
|
6
|
+
|
|
7
|
+
- 🧠 **Console Automático**: Avisos e sugestões sobre configuração
|
|
8
|
+
- 🎯 **UI Dinâmica**: Componentes se adaptam à configuração do projeto
|
|
9
|
+
- 🛡️ **Compliance por Design**: Previne problemas de conformidade LGPD
|
|
10
|
+
- 🔧 **Hooks Avançados**: `useCategories()` e `useCategoryStatus()` para controle total
|
|
11
|
+
|
|
12
|
+
**Desativando os Avisos:**
|
|
13
|
+
|
|
14
|
+
Por padrão, os avisos são desativados automaticamente em builds de produção (`process.env.NODE_ENV === 'production'`). Para desativá-los explicitamente em desenvolvimento, você pode usar a prop `disableDeveloperGuidance` no `ConsentProvider`:
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
<ConsentProvider disableDeveloperGuidance={true}>
|
|
18
|
+
{/* Sua aplicação */}
|
|
19
|
+
</ConsentProvider>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
A forma anterior de desativar os avisos via `window.__LGPD_DISABLE_GUIDANCE__ = true` ainda funciona, mas o uso da prop é a forma **preferencial e mais idiomática** em React.
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## 📖 Uso Básico - Configuração Consciente (v0.2.2)
|
|
26
|
+
|
|
27
|
+
### 1. Setup Básico (Compliance LGPD Automática)
|
|
28
|
+
|
|
29
|
+
````tsx
|
|
30
|
+
import { ConsentProvider, CookieBanner } from 'react-lgpd-consent'
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
return (
|
|
34
|
+
<ConsentProvider
|
|
35
|
+
// 🛡️ Especificar apenas categorias necessárias (Minimização de Dados LGPD)
|
|
36
|
+
categories={{
|
|
37
|
+
enabledCategories: ['analytics'], // Apenas analytics + necessary
|
|
38
|
+
}}
|
|
39
|
+
|
|
40
|
+
// � Textos ANPD para compliance (opcionais)
|
|
41
|
+
texts={{
|
|
42
|
+
bannerMessage: "Utilizamos cookies conforme LGPD...",
|
|
43
|
+
controllerInfo: "Controlado por: Empresa XYZ - CNPJ: 00.000.000/0001-00",
|
|
44
|
+
dataTypes: "Coletamos: dados de navegação para análise estatística",
|
|
45
|
+
userRights: "Direitos: acessar, corrigir, excluir dados (dpo@empresa.com)"
|
|
46
|
+
}}
|
|
47
|
+
|
|
48
|
+
// 🔔 Callbacks para auditoria (opcionais)
|
|
49
|
+
onConsentGiven={(state) => console.log('Consentimento registrado:', state)}
|
|
50
|
+
>
|
|
51
|
+
<CookieBanner policyLinkUrl="/politica-de-privacidade" />
|
|
52
|
+
<YourApp />
|
|
53
|
+
</ConsentProvider>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
```eact-lgpd-consent?style=for-the-badge)](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE)
|
|
57
|
+
[](https://www.typescriptlang.org/)
|
|
58
|
+
[](https://reactjs.org/)
|
|
59
|
+
[](https://mui.com/)
|
|
60
|
+
[](https://bundlephobia.com/package/react-lgpd-consent)
|
|
61
|
+
[](https://www.npmjs.com/package/react-lgpd-consent)
|
|
62
|
+
|
|
63
|
+
[](https://reactjs.org/)
|
|
64
|
+
[](https://mui.com/)
|
|
65
|
+
|
|
66
|
+
> **Biblioteca completa de consentimento de cookies para React e Next.js em conformidade com a LGPD**
|
|
67
|
+
|
|
68
|
+
Solução moderna, acessível e personalizável para gerenciar consentimento de cookies em aplicações React, com suporte completo a SSR, Material-UI e TypeScript.
|
|
69
|
+
|
|
70
|
+
## ✨ Características Principais
|
|
71
|
+
|
|
72
|
+
- 🇧🇷 **Conformidade LGPD + ANPD**: Cookie otimizado conforme Guia Orientativo da ANPD
|
|
73
|
+
- 🍪 **Categorias Configuráveis**: Sistema dinâmico - apenas categorias necessárias ao projeto
|
|
74
|
+
- 🛡️ **Princípio da Minimização**: Cookie contém apenas dados essenciais para compliance
|
|
75
|
+
- 🚀 **Integrações Nativas**: Google Analytics, Tag Manager, UserWay automatizados
|
|
76
|
+
- ⏰ **Auditoria Completa**: Timestamps e rastreabilidade para prestação de contas
|
|
77
|
+
- ⚡ **Client-Side First**: Arquitetura otimizada para SPA com zero-flash
|
|
78
|
+
- 🎨 **Material-UI Integration**: Componentes prontos e customizáveis com MUI
|
|
79
|
+
- ♿ **Acessibilidade**: Navegação por teclado e leitores de tela nativamente suportados
|
|
80
|
+
- 🌐 **Internacionalização**: Textos totalmente customizáveis (padrão pt-BR)
|
|
81
|
+
- 🚀 **TypeScript**: API completamente tipada para melhor DX
|
|
82
|
+
- 📦 **Zero Config**: Funciona out-of-the-box com configurações sensatas
|
|
83
|
+
- 🎯 **Granular Control**: Controle individual por categoria ativa
|
|
84
|
+
- 🚫 **Banner Bloqueante**: Modo opcional para exigir interação antes de continuar
|
|
85
|
+
- 🎨 **Sistema de Temas**: Temas customizáveis para integração visual perfeita
|
|
86
|
+
- ⚡ **Carregamento Automático**: Scripts só executam após consentimento explícito
|
|
87
|
+
- 🔌 **Modal Automático**: Modal de preferências incluído automaticamente com lazy loading
|
|
88
|
+
- 🎛️ **Botão Flutuante**: Componente opcional para acesso fácil às preferências
|
|
89
|
+
|
|
90
|
+
## 🚀 Instalação
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm install react-lgpd-consent
|
|
94
|
+
# ou
|
|
95
|
+
yarn add react-lgpd-consent
|
|
96
|
+
# ou
|
|
97
|
+
pnpm add react-lgpd-consent
|
|
98
|
+
````
|
|
99
|
+
|
|
100
|
+
### Dependências
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
npm install @mui/material js-cookie
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## 🆕 Novidades v0.2.0 - Adequação ANPD Completa
|
|
107
|
+
|
|
108
|
+
### 🍪 Categorias Baseadas no Guia da ANPD
|
|
109
|
+
|
|
110
|
+
A biblioteca agora inclui **6 categorias** baseadas no Guia Orientativo da ANPD:
|
|
111
|
+
|
|
112
|
+
- **`necessary`**: Cookies essenciais (sempre ativos)
|
|
113
|
+
- **`analytics`**: Análise e estatísticas de uso
|
|
114
|
+
- **`functional`**: Funcionalidades extras (preferências, idioma)
|
|
115
|
+
- **`marketing`**: Publicidade e marketing direcionado
|
|
116
|
+
- **`social`**: Integração com redes sociais
|
|
117
|
+
- **`personalization`**: Personalização de conteúdo
|
|
118
|
+
|
|
119
|
+
### 🛡️ Conformidade LGPD Rigorosa (v0.2.1)
|
|
120
|
+
|
|
121
|
+
**Princípio da Minimização**: Cookie contém apenas categorias realmente utilizadas:
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
<ConsentProvider
|
|
125
|
+
categories={{
|
|
126
|
+
enabledCategories: ['analytics'], // Apenas analytics + necessary
|
|
127
|
+
customCategories: [{
|
|
128
|
+
id: 'governo',
|
|
129
|
+
name: 'Integração Governamental',
|
|
130
|
+
description: 'Cookies para sistemas gov.br',
|
|
131
|
+
essential: false
|
|
132
|
+
}]
|
|
133
|
+
}}
|
|
134
|
+
blocking={true} // Banner bloqueia até decisão explícita
|
|
135
|
+
>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
**Cookie resultante** (apenas dados essenciais):
|
|
139
|
+
|
|
140
|
+
```json
|
|
141
|
+
{
|
|
142
|
+
"version": "1.0",
|
|
143
|
+
"consented": true,
|
|
144
|
+
"preferences": { "necessary": true, "analytics": false, "governo": true },
|
|
145
|
+
"consentDate": "2025-08-12T14:30:00.000Z",
|
|
146
|
+
"lastUpdate": "2025-08-12T14:30:00.000Z",
|
|
147
|
+
"source": "banner"
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
> 📋 **[Guia Completo de Conformidade LGPD](./docs/CONFORMIDADE-LGPD.md)**
|
|
152
|
+
|
|
153
|
+
### � Sistema de Orientações para Desenvolvedores
|
|
154
|
+
|
|
155
|
+
A v0.2.1 inclui sistema inteligente que **orienta developers sobre configuração adequada**:
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
// ⚠️ Sem configuração - usa padrão e avisa
|
|
159
|
+
<ConsentProvider>
|
|
160
|
+
<App />
|
|
161
|
+
</ConsentProvider>
|
|
162
|
+
// Console: "Usando padrão: necessary + analytics. Especificar para produção."
|
|
163
|
+
|
|
164
|
+
// ✅ Configuração explícita - recomendado
|
|
165
|
+
<ConsentProvider
|
|
166
|
+
categories={{
|
|
167
|
+
enabledCategories: ['analytics', 'marketing'],
|
|
168
|
+
customCategories: [...]
|
|
169
|
+
}}
|
|
170
|
+
>
|
|
171
|
+
<App />
|
|
172
|
+
</ConsentProvider>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
**Console de desenvolvimento** mostra automaticamente:
|
|
176
|
+
|
|
177
|
+
- 🟨 **Avisos**: Configuração faltante ou inconsistente
|
|
178
|
+
- 💡 **Sugestões**: Melhorias para compliance
|
|
179
|
+
- 🔧 **Tabela de categorias ativas**: Para UI customizada
|
|
180
|
+
|
|
181
|
+
> 📋 **[Sistema de Orientações Completo](./docs/ORIENTACOES-DESENVOLVIMENTO.md)**
|
|
182
|
+
|
|
183
|
+
### 🔧 Categorias Customizadas (API Legacy)
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
// LEGACY: ainda suportado, mas deprecated
|
|
187
|
+
const customCategories = [
|
|
188
|
+
{
|
|
189
|
+
id: 'governo',
|
|
190
|
+
name: 'Integração Governo',
|
|
191
|
+
description: 'Cookies para integração com sistemas governamentais.',
|
|
192
|
+
essential: false,
|
|
193
|
+
cookies: ['gov_session', 'cpf_hash']
|
|
194
|
+
}
|
|
195
|
+
]
|
|
196
|
+
|
|
197
|
+
<ConsentProvider customCategories={customCategories}>
|
|
198
|
+
{/* Sua aplicação */}
|
|
199
|
+
</ConsentProvider>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### 🎨 Componentes UI Dinâmicos (v0.2.2)
|
|
203
|
+
|
|
204
|
+
Os componentes agora **renderizam automaticamente** baseado na configuração:
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
import { useCategories, useCategoryStatus } from 'react-lgpd-consent'
|
|
208
|
+
|
|
209
|
+
// ✅ Modal customizado que se adapta às categorias ativas
|
|
210
|
+
function CustomPreferencesModal() {
|
|
211
|
+
const { toggleableCategories } = useCategories()
|
|
212
|
+
const { preferences, setPreferences } = useConsent()
|
|
213
|
+
|
|
214
|
+
return (
|
|
215
|
+
<dialog>
|
|
216
|
+
{/* Renderiza APENAS categorias configuradas no projeto */}
|
|
217
|
+
{toggleableCategories.map((category) => (
|
|
218
|
+
<label key={category.id}>
|
|
219
|
+
<input
|
|
220
|
+
type="checkbox"
|
|
221
|
+
checked={preferences[category.id] ?? false} // ✅ Controlado
|
|
222
|
+
onChange={(e) =>
|
|
223
|
+
setPreferences({
|
|
224
|
+
...preferences,
|
|
225
|
+
[category.id]: e.target.checked,
|
|
226
|
+
})
|
|
227
|
+
}
|
|
228
|
+
/>
|
|
229
|
+
<strong>{category.name}</strong>
|
|
230
|
+
<p>{category.description}</p>
|
|
231
|
+
</label>
|
|
232
|
+
))}
|
|
233
|
+
</dialog>
|
|
234
|
+
)
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// ✅ Feature condicional baseada em configuração
|
|
238
|
+
function AnalyticsDashboard() {
|
|
239
|
+
const analytics = useCategoryStatus('analytics')
|
|
240
|
+
|
|
241
|
+
if (!analytics.isActive) {
|
|
242
|
+
return null // Categoria não configurada - não renderiza
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
return <div>Dashboard só aparece se analytics estiver configurado!</div>
|
|
246
|
+
}
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
**Benefícios:**
|
|
250
|
+
|
|
251
|
+
- ✅ **Zero bugs**: UI sempre consistente com configuração
|
|
252
|
+
- ✅ **Performance**: Não renderiza categorias não utilizadas
|
|
253
|
+
- ✅ **Manutenibilidade**: Mudou configuração? UI atualiza automaticamente
|
|
254
|
+
- ✅ **Orientação**: Console avisa sobre inconsistências
|
|
255
|
+
|
|
256
|
+
### 🚀 Integrações Automáticas
|
|
257
|
+
|
|
258
|
+
```tsx
|
|
259
|
+
import {
|
|
260
|
+
ConsentScriptLoader,
|
|
261
|
+
createGoogleAnalyticsIntegration,
|
|
262
|
+
createUserWayIntegration,
|
|
263
|
+
} from 'react-lgpd-consent'
|
|
264
|
+
|
|
265
|
+
const integrations = [
|
|
266
|
+
createGoogleAnalyticsIntegration({
|
|
267
|
+
measurementId: 'GA_MEASUREMENT_ID',
|
|
268
|
+
}),
|
|
269
|
+
createUserWayIntegration({
|
|
270
|
+
accountId: 'USERWAY_ACCOUNT_ID',
|
|
271
|
+
}),
|
|
272
|
+
]
|
|
273
|
+
|
|
274
|
+
function App() {
|
|
275
|
+
return (
|
|
276
|
+
<ConsentProvider>
|
|
277
|
+
{/* Scripts carregam automaticamente quando categoria é aceita */}
|
|
278
|
+
<ConsentScriptLoader integrations={integrations} />
|
|
279
|
+
|
|
280
|
+
<CookieBanner policyLinkUrl="/privacy-policy" />
|
|
281
|
+
</ConsentProvider>
|
|
282
|
+
)
|
|
283
|
+
}
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
### 📝 Textos ANPD Expandidos
|
|
287
|
+
|
|
288
|
+
```tsx
|
|
289
|
+
<ConsentProvider
|
|
290
|
+
texts={{
|
|
291
|
+
bannerMessage: 'Utilizamos cookies para melhorar sua experiência.',
|
|
292
|
+
// Textos ANPD opcionais
|
|
293
|
+
controllerInfo: 'Controlado por Empresa LTDA (CNPJ: 00.000.000/0001-00)',
|
|
294
|
+
dataTypes: 'Coletamos dados de navegação, preferências e interações.',
|
|
295
|
+
thirdPartySharing: 'Compartilhamos com: Google Analytics, Facebook Pixel',
|
|
296
|
+
userRights: 'Você tem direito a acesso, correção e exclusão dos dados.',
|
|
297
|
+
contactInfo: 'Contato DPO: dpo@empresa.com.br | (11) 9999-9999',
|
|
298
|
+
retentionPeriod: 'Dados armazenados por até 12 meses.',
|
|
299
|
+
lawfulBasis: 'Base legal: consentimento do titular dos dados.',
|
|
300
|
+
transferCountries: 'Dados podem ser transferidos para: EUA, Irlanda.',
|
|
301
|
+
}}
|
|
302
|
+
>
|
|
303
|
+
{/* Os textos são exibidos condicionalmente apenas se definidos */}
|
|
304
|
+
</ConsentProvider>
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
## � Exemplo Completo
|
|
308
|
+
|
|
309
|
+
```tsx
|
|
310
|
+
import {
|
|
311
|
+
ConsentProvider,
|
|
312
|
+
CookieBanner,
|
|
313
|
+
FloatingPreferencesButton,
|
|
314
|
+
} from 'react-lgpd-consent'
|
|
315
|
+
|
|
316
|
+
function App() {
|
|
317
|
+
return (
|
|
318
|
+
<ConsentProvider>
|
|
319
|
+
<div>
|
|
320
|
+
<h1>Meu Site</h1>
|
|
321
|
+
<p>Conteúdo do site...</p>
|
|
322
|
+
|
|
323
|
+
{/* Banner de cookies - Modal incluído automaticamente! */}
|
|
324
|
+
<CookieBanner policyLinkUrl="/privacy-policy" blocking={true} />
|
|
325
|
+
|
|
326
|
+
{/* Botão flutuante opcional para acesso às preferências */}
|
|
327
|
+
<FloatingPreferencesButton position="bottom-right" />
|
|
328
|
+
</div>
|
|
329
|
+
</ConsentProvider>
|
|
330
|
+
)
|
|
331
|
+
}
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
## �📖 Uso Básico
|
|
335
|
+
|
|
336
|
+
### 1. Setup do Provider
|
|
337
|
+
|
|
338
|
+
```tsx
|
|
339
|
+
import { ConsentProvider } from 'react-lgpd-consent'
|
|
340
|
+
|
|
341
|
+
function App() {
|
|
342
|
+
return (
|
|
343
|
+
<ConsentProvider>
|
|
344
|
+
<YourApp />
|
|
345
|
+
</ConsentProvider>
|
|
346
|
+
)
|
|
347
|
+
}
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
### 2. Banner de Consentimento
|
|
351
|
+
|
|
352
|
+
```tsx
|
|
353
|
+
import { CookieBanner } from 'react-lgpd-consent'
|
|
354
|
+
|
|
355
|
+
function Layout() {
|
|
356
|
+
return (
|
|
357
|
+
<>
|
|
358
|
+
<YourContent />
|
|
359
|
+
<CookieBanner
|
|
360
|
+
policyLinkUrl="/politica-privacidade"
|
|
361
|
+
blocking={true} // Padrão: bloqueia até decisão
|
|
362
|
+
/>
|
|
363
|
+
{/* Modal de preferências incluído automaticamente! */}
|
|
364
|
+
</>
|
|
365
|
+
)
|
|
366
|
+
}
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### 3. Uso do Hook
|
|
370
|
+
|
|
371
|
+
```tsx
|
|
372
|
+
import { useConsent } from 'react-lgpd-consent'
|
|
373
|
+
|
|
374
|
+
function MyComponent() {
|
|
375
|
+
const { consented, preferences, acceptAll, openPreferences } = useConsent()
|
|
376
|
+
|
|
377
|
+
return (
|
|
378
|
+
<div>
|
|
379
|
+
<p>Consentimento: {consented ? 'Dado' : 'Pendente'}</p>
|
|
380
|
+
<button onClick={acceptAll}>Aceitar Todos</button>
|
|
381
|
+
<button onClick={openPreferences}>Gerenciar Preferências</button>
|
|
382
|
+
</div>
|
|
383
|
+
)
|
|
384
|
+
}
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
> ✅ **O modal de preferências é incluído automaticamente pelo ConsentProvider!** Não é mais necessário renderizá-lo manualmente.
|
|
388
|
+
|
|
389
|
+
````
|
|
390
|
+
|
|
391
|
+
### 4. Carregamento Condicional de Scripts
|
|
392
|
+
|
|
393
|
+
```tsx
|
|
394
|
+
import { ConsentGate, loadScript } from 'react-lgpd-consent'
|
|
395
|
+
|
|
396
|
+
function Analytics() {
|
|
397
|
+
return (
|
|
398
|
+
<ConsentGate category="analytics">
|
|
399
|
+
<GoogleAnalytics />
|
|
400
|
+
</ConsentGate>
|
|
401
|
+
)
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
// Ou carregando scripts que aguardam consentimento
|
|
405
|
+
function MyComponent() {
|
|
406
|
+
const { preferences, consented } = useConsent()
|
|
407
|
+
|
|
408
|
+
useEffect(() => {
|
|
409
|
+
if (consented && preferences.analytics) {
|
|
410
|
+
loadConditionalScript(
|
|
411
|
+
'ga',
|
|
412
|
+
'https://www.googletagmanager.com/gtag/js?id=GA_ID',
|
|
413
|
+
() => preferences.analytics, // Condição que aguarda
|
|
414
|
+
)
|
|
415
|
+
}
|
|
416
|
+
}, [preferences, consented])
|
|
417
|
+
}
|
|
418
|
+
````
|
|
419
|
+
|
|
420
|
+
## 🎨 Customização
|
|
421
|
+
|
|
422
|
+
### Banner Bloqueante vs Não-bloqueante
|
|
423
|
+
|
|
424
|
+
```tsx
|
|
425
|
+
// Banner bloqueante (padrão) - impede interação até decisão
|
|
426
|
+
<CookieBanner blocking={true} />
|
|
427
|
+
|
|
428
|
+
// Banner não-intrusivo - permite navegação
|
|
429
|
+
<CookieBanner blocking={false} />
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
### Tema Personalizado
|
|
433
|
+
|
|
434
|
+
```tsx
|
|
435
|
+
import { ConsentProvider, defaultConsentTheme } from 'react-lgpd-consent'
|
|
436
|
+
import { createTheme } from '@mui/material/styles'
|
|
437
|
+
|
|
438
|
+
const meuTema = createTheme({
|
|
439
|
+
...defaultConsentTheme,
|
|
440
|
+
palette: {
|
|
441
|
+
...defaultConsentTheme.palette,
|
|
442
|
+
primary: {
|
|
443
|
+
main: '#1976d2', // Sua cor principal
|
|
444
|
+
},
|
|
445
|
+
},
|
|
446
|
+
})
|
|
447
|
+
|
|
448
|
+
<ConsentProvider theme={meuTema}>
|
|
449
|
+
<App />
|
|
450
|
+
</ConsentProvider>
|
|
451
|
+
```
|
|
452
|
+
|
|
453
|
+
### Textos Personalizados
|
|
454
|
+
|
|
455
|
+
```tsx
|
|
456
|
+
<ConsentProvider
|
|
457
|
+
texts={{
|
|
458
|
+
bannerMessage: "Utilizamos cookies para melhorar sua experiência.",
|
|
459
|
+
acceptAll: "Aceitar Todos",
|
|
460
|
+
declineAll: "Recusar Opcionais",
|
|
461
|
+
preferences: "Configurar"
|
|
462
|
+
}}
|
|
463
|
+
>
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
### Configuração do Cookie
|
|
467
|
+
|
|
468
|
+
```tsx
|
|
469
|
+
<ConsentProvider
|
|
470
|
+
cookie={{
|
|
471
|
+
name: 'meuSiteConsent',
|
|
472
|
+
maxAgeDays: 180,
|
|
473
|
+
sameSite: 'Strict'
|
|
474
|
+
}}
|
|
475
|
+
>
|
|
476
|
+
```
|
|
477
|
+
|
|
478
|
+
### Callbacks
|
|
479
|
+
|
|
480
|
+
```tsx
|
|
481
|
+
<ConsentProvider
|
|
482
|
+
onConsentGiven={(state) => {
|
|
483
|
+
console.log('Consentimento dado:', state)
|
|
484
|
+
// Inicializar analytics, etc.
|
|
485
|
+
}}
|
|
486
|
+
onPreferencesSaved={(prefs) => {
|
|
487
|
+
console.log('Preferências salvas:', prefs)
|
|
488
|
+
}}
|
|
489
|
+
>
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
## � Banner Bloqueante
|
|
493
|
+
|
|
494
|
+
Para cenários onde é necessário bloquear o acesso até obter consentimento explícito:
|
|
495
|
+
|
|
496
|
+
```tsx
|
|
497
|
+
<CookieBanner blocking />
|
|
498
|
+
```
|
|
499
|
+
|
|
500
|
+
Com `blocking={true}`, o banner:
|
|
501
|
+
|
|
502
|
+
- Cria um overlay escuro sobre todo o conteúdo
|
|
503
|
+
- Impede interação com o resto da página
|
|
504
|
+
- É útil para casos críticos onde consentimento é obrigatório
|
|
505
|
+
|
|
506
|
+
## 🎨 Sistema de Temas
|
|
507
|
+
|
|
508
|
+
### Tema Personalizado
|
|
509
|
+
|
|
510
|
+
```tsx
|
|
511
|
+
import { createTheme } from '@mui/material/styles'
|
|
512
|
+
|
|
513
|
+
const meuTema = createTheme({
|
|
514
|
+
palette: {
|
|
515
|
+
primary: { main: '#2196f3' },
|
|
516
|
+
secondary: { main: '#f50057' },
|
|
517
|
+
},
|
|
518
|
+
})
|
|
519
|
+
|
|
520
|
+
<ConsentProvider theme={meuTema}>
|
|
521
|
+
<App />
|
|
522
|
+
</ConsentProvider>
|
|
523
|
+
```
|
|
524
|
+
|
|
525
|
+
### Tema Padrão
|
|
526
|
+
|
|
527
|
+
O tema padrão do react-lgpd-consent está disponível para customização:
|
|
528
|
+
|
|
529
|
+
```tsx
|
|
530
|
+
import { defaultConsentTheme } from 'react-lgpd-consent'
|
|
531
|
+
|
|
532
|
+
const temaCustomizado = createTheme({
|
|
533
|
+
...defaultConsentTheme,
|
|
534
|
+
palette: {
|
|
535
|
+
...defaultConsentTheme.palette,
|
|
536
|
+
primary: { main: '#your-color' },
|
|
537
|
+
},
|
|
538
|
+
})
|
|
539
|
+
```
|
|
540
|
+
|
|
541
|
+
## ⚡ Carregamento Inteligente de Scripts
|
|
542
|
+
|
|
543
|
+
### Função loadScript
|
|
544
|
+
|
|
545
|
+
Scripts aguardam automaticamente o **consentimento finalizado** (banner fechado ou preferências salvas):
|
|
546
|
+
|
|
547
|
+
```tsx
|
|
548
|
+
import { loadScript } from 'react-lgpd-consent'
|
|
549
|
+
|
|
550
|
+
// Carrega script apenas após consentimento para analytics
|
|
551
|
+
await loadScript(
|
|
552
|
+
'gtag',
|
|
553
|
+
'https://www.googletagmanager.com/gtag/js?id=GA_ID',
|
|
554
|
+
'analytics', // Categoria obrigatória
|
|
555
|
+
)
|
|
556
|
+
|
|
557
|
+
// Script geral (sempre carrega após consentimento)
|
|
558
|
+
await loadScript('custom-script', 'https://example.com/script.js')
|
|
559
|
+
```
|
|
560
|
+
|
|
561
|
+
### Comportamento Inteligente
|
|
562
|
+
|
|
563
|
+
- **Aguarda decisão final**: Não executa durante mudanças no modal de preferências
|
|
564
|
+
- **Só executa após salvar**: Scripts só rodam quando o usuário finaliza as preferências
|
|
565
|
+
- **Baseado em categoria**: Respeita as permissões por categoria
|
|
566
|
+
|
|
567
|
+
## 🎨 Personalização Total
|
|
568
|
+
|
|
569
|
+
### Modal de Preferências Customizado
|
|
570
|
+
|
|
571
|
+
Substitua completamente o modal padrão com seu próprio componente:
|
|
572
|
+
|
|
573
|
+
```tsx
|
|
574
|
+
import { ConsentProvider, useConsent } from 'react-lgpd-consent'
|
|
575
|
+
import MeuModalCustomizado from './MeuModalCustomizado'
|
|
576
|
+
|
|
577
|
+
function App() {
|
|
578
|
+
return (
|
|
579
|
+
<ConsentProvider
|
|
580
|
+
PreferencesModalComponent={MeuModalCustomizado}
|
|
581
|
+
preferencesModalProps={{ variant: 'custom' }}
|
|
582
|
+
>
|
|
583
|
+
<MeuApp />
|
|
584
|
+
</ConsentProvider>
|
|
585
|
+
)
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
// Seu componente customizado
|
|
589
|
+
function MeuModalCustomizado({ variant }) {
|
|
590
|
+
const { isModalOpen, closePreferences, setPreference } = useConsent()
|
|
591
|
+
|
|
592
|
+
return (
|
|
593
|
+
<MyCustomDialog open={isModalOpen} onClose={closePreferences}>
|
|
594
|
+
{/* Seu design personalizado aqui */}
|
|
595
|
+
</MyCustomDialog>
|
|
596
|
+
)
|
|
597
|
+
}
|
|
598
|
+
```
|
|
599
|
+
|
|
600
|
+
### Desabilitar Modal Automático
|
|
601
|
+
|
|
602
|
+
Para controle total, desabilite o modal automático:
|
|
603
|
+
|
|
604
|
+
```tsx
|
|
605
|
+
<ConsentProvider disableAutomaticModal>
|
|
606
|
+
<MeuApp />
|
|
607
|
+
{/* Renderize seus componentes customizados onde quiser */}
|
|
608
|
+
<MeuModalTotalmenteCustomizado />
|
|
609
|
+
</ConsentProvider>
|
|
610
|
+
```
|
|
611
|
+
|
|
612
|
+
## �🔧 API Completa
|
|
613
|
+
|
|
614
|
+
### Components
|
|
615
|
+
|
|
616
|
+
| Componente | Descrição | Props Principais |
|
|
617
|
+
| --------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------- |
|
|
618
|
+
| `ConsentProvider` | Provider principal do contexto | `initialState`, `texts`, `theme`, `hideBranding`, `PreferencesModalComponent`, `disableDeveloperGuidance`, callbacks |
|
|
619
|
+
| `CookieBanner` | Banner de consentimento | `policyLinkUrl`, `blocking`, `hideBranding`, `debug`, pass-through MUI props |
|
|
620
|
+
| `PreferencesModal` | Modal de preferências (incluído automaticamente) | `DialogProps`, `hideBranding` - **Opcional** |
|
|
621
|
+
| `FloatingPreferencesButton` | Botão flutuante para abrir preferências | `position`, `hideWhenConsented`, `tooltip`, `icon`, `FabProps` |
|
|
622
|
+
| `ConsentGate` | Renderização condicional por categoria | `category`, `children` |
|
|
623
|
+
|
|
624
|
+
### Hook `useConsent()`
|
|
625
|
+
|
|
626
|
+
```typescript
|
|
627
|
+
interface ConsentContextValue {
|
|
628
|
+
consented: boolean // usuário já consentiu?
|
|
629
|
+
preferences: ConsentPreferences // preferências atuais
|
|
630
|
+
isModalOpen: boolean // estado do modal de preferências
|
|
631
|
+
acceptAll(): void // aceitar todas as categorias
|
|
632
|
+
rejectAll(): void // recusar opcionais
|
|
633
|
+
setPreference(cat: Category, value: boolean): void // definir categoria específica
|
|
634
|
+
openPreferences(): void // abrir modal de preferências
|
|
635
|
+
closePreferences(): void // fechar modal
|
|
636
|
+
resetConsent(): void // resetar tudo
|
|
637
|
+
}
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
### Hook `useConsentTexts()`
|
|
641
|
+
|
|
642
|
+
```typescript
|
|
643
|
+
// Acesso aos textos contextuais
|
|
644
|
+
const texts = useConsentTexts()
|
|
645
|
+
console.log(texts.banner.title) // "Política de Cookies"
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
### Utilitários
|
|
649
|
+
|
|
650
|
+
- `loadScript(id, src, category?, attrs?)` - Carrega scripts com consentimento inteligente
|
|
651
|
+
- `defaultConsentTheme` - Tema padrão do Material-UI
|
|
652
|
+
- Tipos TypeScript completos exportados## 🌐 SSR / Next.js
|
|
653
|
+
|
|
654
|
+
Para evitar flash de conteúdo em SSR:
|
|
655
|
+
|
|
656
|
+
```tsx
|
|
657
|
+
// pages/_app.tsx (Next.js)
|
|
658
|
+
function MyApp({ Component, pageProps }) {
|
|
659
|
+
return (
|
|
660
|
+
<ConsentProvider
|
|
661
|
+
initialState={{
|
|
662
|
+
consented: false,
|
|
663
|
+
preferences: { analytics: false, marketing: false },
|
|
664
|
+
}}
|
|
665
|
+
>
|
|
666
|
+
<Component {...pageProps} />
|
|
667
|
+
</ConsentProvider>
|
|
668
|
+
)
|
|
669
|
+
}
|
|
670
|
+
```
|
|
671
|
+
|
|
672
|
+
## ♿ Acessibilidade
|
|
673
|
+
|
|
674
|
+
A biblioteca segue as melhores práticas de acessibilidade:
|
|
675
|
+
|
|
676
|
+
- ✅ Navegação por teclado (Tab, Enter, Escape)
|
|
677
|
+
- ✅ Leitores de tela (`aria-labelledby`, `aria-describedby`)
|
|
678
|
+
- ✅ Foco gerenciado automaticamente
|
|
679
|
+
- ✅ Contrastes adequados
|
|
680
|
+
- ✅ Estrutura semântica correta
|
|
681
|
+
|
|
682
|
+
## 📚 Exemplos
|
|
683
|
+
|
|
684
|
+
Confira exemplos completos no repositório:
|
|
685
|
+
|
|
686
|
+
- [Básico com React](./examples/basic)
|
|
687
|
+
- [Next.js com SSR](./examples/nextjs)
|
|
688
|
+
- [Customização avançada](./examples/advanced)
|
|
689
|
+
- [Integração com analytics](./examples/analytics)
|
|
690
|
+
|
|
691
|
+
## 🤝 Contribuição
|
|
692
|
+
|
|
693
|
+
Contribuições são bem-vindas! Por favor:
|
|
694
|
+
|
|
695
|
+
1. Faça fork do projeto
|
|
696
|
+
2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)
|
|
697
|
+
3. Commit suas mudanças (`git commit -m 'Add some AmazingFeature'`)
|
|
698
|
+
4. Push para a branch (`git push origin feature/AmazingFeature`)
|
|
699
|
+
5. Abra um Pull Request
|
|
700
|
+
|
|
701
|
+
## 📄 Licença
|
|
702
|
+
|
|
703
|
+
Este projeto está licenciado sob a Licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes.
|
|
704
|
+
|
|
705
|
+
## 🙋♀️ Suporte
|
|
706
|
+
|
|
707
|
+
- 📖 [Documentação](./docs)
|
|
708
|
+
- 🐛 [Issues](https://github.com/lucianoedipo/react-lgpd-consent/issues)
|
|
709
|
+
- 💬 [Discussões](https://github.com/lucianoedipo/react-lgpd-consent/discussions)
|
|
710
|
+
|
|
711
|
+
## 🔮 Roadmap
|
|
712
|
+
|
|
713
|
+
### ✅ v0.2.2 - Sistema de Orientações (Lançado!)
|
|
714
|
+
|
|
715
|
+
**Implementado: Sistema inteligente de orientação para desenvolvedores**
|
|
716
|
+
|
|
717
|
+
- ✅ **Console de Desenvolvimento**: Avisos automáticos e orientações
|
|
718
|
+
- ✅ **UI Dinâmica**: Componentes se adaptam à configuração do projeto
|
|
719
|
+
- ✅ **Hooks Avançados**: `useCategories()` e `useCategoryStatus()`
|
|
720
|
+
- ✅ **Validação Automática**: Prevenção de bugs de configuração vs UI
|
|
721
|
+
|
|
722
|
+
### v0.2.3 - Compliance Avançado (Próxima Release)
|
|
723
|
+
|
|
724
|
+
**Baseado em feedback de uso real em projetos governamentais:**
|
|
725
|
+
|
|
726
|
+
- 📋 **Sistema de Logs de Auditoria**: Rastreamento completo para prestação de contas
|
|
727
|
+
- 📜 **Templates Setoriais**: Textos pré-configurados (governo, saúde, educação)
|
|
728
|
+
- 🎨 **Presets Visuais**: Identidade visual por setor (acessibilidade WCAG AAA)
|
|
729
|
+
- 📊 **Dashboard para DPOs**: Relatórios automáticos de compliance
|
|
730
|
+
- 🔌 **Mais Integrações**: Microsoft Clarity, Hotjar, Intercom, LinkedIn
|
|
731
|
+
|
|
732
|
+
### v0.3.0 - Multi-Regulamentação
|
|
733
|
+
|
|
734
|
+
- 🌍 **Suporte GDPR/CCPA**: Detecção automática por geolocalização
|
|
735
|
+
- 🏗️ **Sistema de Plugins**: Extensões de terceiros
|
|
736
|
+
- 🎭 **Temas Avançados**: Design system tokens
|
|
737
|
+
|
|
738
|
+
### v0.4.0 - Enterprise
|
|
739
|
+
|
|
740
|
+
- 📈 **Analytics Avançadas**: Dashboards completos
|
|
741
|
+
- 🔄 **Sync Multi-Domínio**: Consentimento compartilhado
|
|
742
|
+
- 🛡️ **Segurança Empresarial**: Criptografia, audit logs remotos
|
|
743
|
+
|
|
744
|
+
> 📋 **Implementado na v0.2.2**: Sistema de orientações para developers e UI dinâmica
|
|
745
|
+
|
|
746
|
+
---
|
|
747
|
+
|
|
748
|
+
<div align="center">
|
|
749
|
+
|
|
750
|
+
**Feito com ❤️ para a comunidade React brasileira**
|
|
751
|
+
|
|
752
|
+
</div>
|