npm - react-lgpd-consent - Versions diffs - 0.5.3 → 0.5.4 - Mend

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.

Files changed (6) hide show

package/README.en.md CHANGED Viewed

@@ -1,274 +1,70 @@
-<div align="center"><div align="center">
+<!-- English README for the `react-lgpd-consent` aggregator package -->
+# react-lgpd-consent 🍪
-  <h1>react-lgpd-consent 🍪</h1>  <h1>react-lgpd-consent 🍪</h1>
+LGPD-compliant cookie consent management for React — this package is the aggregator that re-exports the MUI components for backwards compatibility. If you need a smaller bundle or headless API, prefer `@react-lgpd-consent/core` or `@react-lgpd-consent/mui`.
-  <p><strong>LGPD-compliant cookie consent management for React</strong></p>  <p><strong>A React library for cookie consent management compliant with Brazil's LGPD.</strong></p>
-  <div>  <div>
-    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>
-    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>
-    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
-    <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>  <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
-  </div>  </div>
-  <div>  <div>
-    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
-    <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18%2B%2019-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+19"></a>    <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18+-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+"></a>
-    <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>    <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>
-  </div>  </div>
-  <div>  <div>
-    <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>    <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
-    <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white&label=Bundle" alt="Bundle Size"></a>    <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
-  </div>    <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
-  </div>
-  <br />
-  <br />
-  <p>
-    <a href="#-installation"><strong>Installation</strong></a> •  <p>
-    <a href="#-quick-start"><strong>Quick Start</strong></a> •    <a href="#installation"><strong>Installation</strong></a> •
-    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.en.md"><strong>📚 Complete Guide</strong></a> •    <a href="#basic-usage"><strong>Basic Usage</strong></a> •
-    <a href="#-documentation"><strong>Documentation</strong></a> •    <a href="./QUICKSTART.md"><strong>📚 Quickstart</strong></a> •
-    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/packages/react-lgpd-consent/README.md">🇧🇷 Português</a>    <a href="#documentation"><strong>Documentation</strong></a> •
-  </p>    <a href="#contributing"><strong>Contributing</strong></a>
-</div>  </p>
----  <p align="center">
-  <a href="./QUICKSTART.en.md"><img src="https://img.shields.io/badge/Quickstart-Get%20Started-blue?style=for-the-badge&logo=book" alt="Quickstart"></a>
-## 🎯 What's New in v0.5.0  </p>
-### 🏗️ Modular Architecture (BREAKING CHANGE)  <p align="center"><strong>Start here:</strong> follow the <a href="./QUICKSTART.en.md">Quickstart guide (QUICKSTART.en.md)</a> for step-by-step setup, TypeScript examples, props summary and MUI integration — recommended for new users.</p>
-</div>
-v0.5.0 introduces a **monorepo architecture** with 3 independent packages:
+<!-- Badges -->
+[![NPM Version](https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white)](https://www.npmjs.com/package/react-lgpd-consent)
+[![Downloads](https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white)](https://www.npmjs.com/package/react-lgpd-consent)
+[![License](https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white)](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE)
 ---
-| Package | Description | Bundle Size | Use when... |
-|---------|-------------|-------------|-------------|## 🚀 Installation
+## Overview
-| [`@react-lgpd-consent/core`](https://www.npmjs.com/package/@react-lgpd-consent/core) | Headless logic, no UI | ~86 KB | You want to build custom UI |
+`react-lgpd-consent` is the compatibility aggregator for the v0.5.x monorepo. It re-exports the ready-made MUI components and keeps the API compatible with previous releases. If you want to optimize your bundle, import only `@react-lgpd-consent/core` (headless) or `@react-lgpd-consent/mui` (MUI components).
-| [`@react-lgpd-consent/mui`](https://www.npmjs.com/package/@react-lgpd-consent/mui) | Ready-to-use Material-UI components | ~104 KB | You want pre-built MUI components |```bash
+Key features:
-| `react-lgpd-consent` | Aggregator (re-exports MUI) | ~104 KB | **v0.4.x compatibility** |npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
-```
-> **💡 This package (`react-lgpd-consent`)** is the aggregator that maintains backward compatibility. It re-exports `@react-lgpd-consent/mui` and works exactly like v0.4.x, but with the new architecture.
-**Peer dependencies:** `react`, `react-dom`, `@mui/material` and `js-cookie`.
-### ✨ New Features in v0.5.0
+- Cookie banner, preferences modal and floating button (MUI)
+- Conditional script loading based on consent
+- SSR-safe (Next.js / Remix compatible)
+- Auditable events (consent_initialized, consent_updated)
 ---
-- ✅ **Auto-injection of Components**: MUI's `ConsentProvider` automatically injects Banner, Modal, and Floating Button
-- ✅ **Integrated MUI Theme**: Optional ThemeProvider support with `createDefaultConsentTheme()`## ✨ What's New in v0.4.5
-- ✅ **Granular Control**: Props to disable individual components (`disableDefaultBanner`, `disableDefaultModal`, `disableDefaultFloatingButton`)
-- ✅ **Developer Warnings**: Intelligent system that warns when UI components are missing (DEV only)### 📊 DataLayer Events for Google Tag Manager
-- ✅ **TypeScript Monorepo**: Configured paths for better IDE DX- **Standardized Events**: `consent_initialized` and `consent_updated` automatically dispatched
-- **Origin Tracking**: Identifies whether decision came from banner, modal, reset, or programmatic API
-### 📦 Migration from v0.4.x → v0.5.0- **LGPD Audit**: Complete change history with `changed_categories` and ISO 8601 timestamps
-- **GTM Integration**: Full documentation with trigger and tag examples
-**If you use `react-lgpd-consent` (this package):**- **Public API**: Exported `pushConsentInitializedEvent` and `pushConsentUpdatedEvent` functions
-✅ **No changes needed!** The API is 100% backward compatible.### 🔧 CI/CD Improvements
-- **Migration to pnpm**: Workflows updated from npm to pnpm, resolving dependency conflicts
-```tsx- **Optimized Build**: Faster and more reliable pipeline
-// v0.4.x - still works
-import { ConsentProvider, useConsent } from 'react-lgpd-consent'---
+## Installation
+Install the package and peer dependencies:
-// v0.5.0 - same API, same components## 📖 Basic Usage
-import { ConsentProvider, useConsent } from 'react-lgpd-consent'
-```Wrap your app with `ConsentProvider` (minimal example):
-**If you want to optimize bundle size:**```tsx
-import { ConsentProvider } from 'react-lgpd-consent'
-```tsx
-// Option 1: Core (headless) + your own UI (~86 KB)export default function App() {
-import { ConsentProvider } from '@react-lgpd-consent/core'  return (
-    <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
-// Option 2: MUI with ready components (~104 KB)      <YourApp />
-import { ConsentProvider } from '@react-lgpd-consent/mui'    </ConsentProvider>
-  )
-// Option 3: Aggregator (compatibility) (~104 KB)}
-import { ConsentProvider } from 'react-lgpd-consent' // This package```
+```powershell
+npm install react-lgpd-consent
+# ensure peer deps are present in the host app
+npm install react react-dom @mui/material @emotion/react @emotion/styled js-cookie --save-peer
 ```
-- For full guides, TypeScript examples, props table and integrations see:
-----
-- **[QUICKSTART.en.md](./QUICKSTART.en.md)** (recommended)
-## 🚀 Installation  - New in v0.4.0: `customCategories` support — see the “Custom categories (customCategories)” section in the Quickstart.
-  - New in v0.4.1: native integrations for Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom, and Zendesk — see [INTEGRACOES.md](./INTEGRACOES.md).
-```bash  - Tip: set `designTokens.layout.backdrop: 'auto'` for a theme-aware blocking banner backdrop.
-npm install react-lgpd-consent  - 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.
-```  - 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.
-- **[Docs / API](./API.md)**
-### Peer Dependencies (auto-installed if not present)- **[LGPD Compliance](./CONFORMIDADE.md)**
-- **[Integrations](./INTEGRACOES.md)**
-```bash
-npm install react react-dom @mui/material @emotion/react @emotion/styled### 🎨 Interactive Documentation (GitHub Pages)
-```- **[📖 Storybook - Interactive Playground](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore and test all components live with interactive controls.
-- **[⚙️ TypeDoc - API Reference](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Automatically generated complete API documentation.
----- **[🏠 Documentation Portal](https://lucianoedipo.github.io/react-lgpd-consent/)**: Home page that navigates between all docs sites.
-## ⚡ Quick Start### 🧑‍🏫 Developer Guidance (dev-only)
-### Basic Setup (3 lines of code)In development, the library prints a guidance panel in the console to help you configure correctly:
-- Warns when using default categories; suggests making them explicit
-```tsx- Lists active categories and which ones require a UI toggle
-import { ConsentProvider } from 'react-lgpd-consent'- Detects integrations that require categories and suggests enabling them
-- Flags excessive number of categories (UX)
-export default function App() {- Highlights Brazilian LGPD best practices: opt-out by default, clear policy, consent logging, retention
-  return (- Silenced in production; SSR-safe
-    <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
-      <YourApp />### ⚠️ Breaking Changes v0.4.1
-    </ConsentProvider>- **Custom categories support**: `setPreference` and `ScriptIntegration.category` now use `string` instead of `Category`
-  )- **Minimal impact**: Code using literal strings continues working without changes
-}- **Migration guide**: See [CHANGELOG.md](./CHANGELOG.md) for complete details
-```
----
-**This already includes:**
-- ✅ Cookie banner## 🤝 Contributing
-- ✅ Preferences modal
-- ✅ Floating button to reopen preferences1. Open an Issue for bugs or feature requests.
-- ✅ Cookie persistence2. Follow `DEVELOPMENT.md` to submit a PR.
-- ✅ SSR-safe (Next.js, Remix)
+This package re-exports `@react-lgpd-consent/mui` for compatibility. Import only what you need to reduce bundle size.
 ---
-### Access Consent State
+## Quick Start
-## 📄 License
+Minimal example (API compatible with v0.4.x):
 ```tsx
+import React from 'react'
+import { ConsentProvider, useConsent } from 'react-lgpd-consent'
-import { useConsent } from 'react-lgpd-consent'MIT — see the `LICENSE` file.
-function MyComponent() {
-  const { preferences, acceptCategory, rejectCategory } = useConsent()
+export default function App() {
+  return (
+    <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
+      <YourApp />
+    </ConsentProvider>
+  )
+}
-  if (preferences.analytics) {
-    // Analytics is allowed, load scripts
-  }
+function YourApp() {
+  const { preferences, acceptCategory } = useConsent()
   return (
-    <button onClick={() => acceptCategory('marketing')}>
-      Accept Marketing
-    </button>
+    <div>
+      <button onClick={() => acceptCategory('marketing')}>Accept Marketing</button>
+    </div>
   )
 }
 ```
-### Load Scripts Based on Consent
+Load a script only if the user granted the related category:
 ```tsx
 import { ConsentScriptLoader } from 'react-lgpd-consent'
@@ -280,12 +76,7 @@ function Analytics() {
       src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
       strategy="afterInteractive"
     >
-      {`
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'GA_MEASUREMENT_ID');
-      `}
+      {`window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID');`}
     </ConsentScriptLoader>
   )
 }
@@ -293,172 +84,52 @@ function Analytics() {
 ---
-## 🎨 Customization
+## Packages (monorepo)
-### Material-UI Theme
-```tsx
-import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
-<ConsentProvider
-  theme={createDefaultConsentTheme({
-    palette: {
-      primary: { main: '#your-brand-color' }
-    }
-  })}
-  categories={{ enabledCategories: ['analytics'] }}
->
-  <App />
-</ConsentProvider>
-```
-### Disable Default Components
-```tsx
-import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'
-<ConsentProvider
-  categories={{ enabledCategories: ['analytics'] }}
-  disableDefaultBanner
-  disableDefaultModal
->
-  {/* Use your own components */}
-  <CookieBanner position="bottom-left" />
-  <PreferencesModal showBranding={false} />
-  <App />
-</ConsentProvider>
-```
-### Advanced Design Tokens
-```tsx
-<ConsentProvider
-  categories={{ enabledCategories: ['analytics'] }}
-  designTokens={{
-    colors: {
-      primary: '#1976d2',
-      secondary: '#dc004e',
-      background: '#ffffff',
-    },
-    layout: {
-      backdropColor: 'rgba(0, 0, 0, 0.8)',
-      bannerPosition: 'bottom-center',
-    },
-    typography: {
-      fontFamily: 'Inter, sans-serif',
-    }
-  }}
->
-  <App />
-</ConsentProvider>
-```
+| Package | Description |
+|---|---|
+| `@react-lgpd-consent/core` | Headless logic (no UI) — build your own UI |
+| `@react-lgpd-consent/mui` | Ready-to-use MUI components |
+| `react-lgpd-consent` | Aggregator (re-exports MUI) — backward compatibility |
 ---
-## 📚 Documentation
-### 📖 Complete Guides (GitHub)
-- [**📚 Quickstart**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.en.md): Step-by-step tutorial with TypeScript examples
-- [**🏗️ API Reference**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md): Complete reference for components, hooks, and types
-- [**⚖️ LGPD Compliance**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md): Details about compliance and auditing
-- [**🔌 Integrations**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md): Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
-- [**🏛️ Architecture**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md): Monorepo architecture details for v0.5.0
-- [**📝 Changelog**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md): Complete version history
+## Documentation & Examples
-### 🎨 Interactive Documentation (GitHub Pages)
-- [**🎭 Storybook - Interactive Playground**](https://lucianoedipo.github.io/react-lgpd-consent/storybook/): Explore and test all components in real-time
-- [**⚙️ TypeDoc - API Docs**](https://lucianoedipo.github.io/react-lgpd-consent/docs/): Auto-generated API documentation
-- [**🏠 Documentation Portal**](https://lucianoedipo.github.io/react-lgpd-consent/): Central navigation for all docs
+- Quickstart: `QUICKSTART.en.md` (recommended)
+- API Reference: `API.md`
+- Integrations: `INTEGRACOES.md`
+- Storybook: https://lucianoedipo.github.io/react-lgpd-consent/storybook/
+- TypeDoc: https://lucianoedipo.github.io/react-lgpd-consent/docs/
 ---
-## 🔌 Native Integrations
-The library includes ready-to-use integrations for:
+## Contributing
-- ✅ **Google Analytics 4** (GA4)
-- ✅ **Google Tag Manager** (GTM)
-- ✅ **Facebook Pixel**
-- ✅ **Hotjar**
-- ✅ **Microsoft Clarity**
-- ✅ **Mixpanel**
-- ✅ **Intercom**
-- ✅ **Zendesk**
-- ✅ **UserWay** (Accessibility)
+Follow `DEVELOPMENT.md` in the repo. Suggested flow:
-```tsx
-import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
-<ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />
-```
-[**See complete integrations guide →**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)
----
+1. Fork
+2. Branch: `git checkout -b feat/my-feature`
+3. Commit: `git commit -m "feat: description"`
+4. Push and open a PR
-## 🧩 Package Ecosystem
+Before opening PR run the local pipeline:
+```powershell
+npm run type-check
+npm test
+npm run lint
+npm run build
+npm run docs:generate
 ```
-react-lgpd-consent (this package - aggregator)
-├── @react-lgpd-consent/core      # Headless (86 KB)
-└── @react-lgpd-consent/mui       # MUI Components (104 KB)
-```
-### When to use each package?
-| Scenario | Recommended Package |
-|----------|---------------------|
-| **Migration from v0.4.x** | `react-lgpd-consent` (this) |
-| **Complete custom UI** | `@react-lgpd-consent/core` |
-| **Ready MUI components** | `@react-lgpd-consent/mui` |
-| **New project with MUI** | `@react-lgpd-consent/mui` |
-| **Optimized bundle** | `@react-lgpd-consent/core` |
 ---
-## 🌟 Features
+## License
-- ✅ **TypeScript First**: Complete types and automatic inference
-- ✅ **SSR-Safe**: Compatible with Next.js (App Router + Pages Router), Remix
-- ✅ **Zero Config**: Works out-of-the-box with sensible defaults
-- ✅ **Accessible**: WCAG 2.1 AA compliance, keyboard navigation, screen readers
-- ✅ **Responsive**: Mobile-first design with adaptive breakpoints
-- ✅ **Tree-shakeable**: Import only what you use
-- ✅ **Themes**: Light/Dark/Auto with smooth transitions
-- ✅ **i18n**: Multi-language support (pt-BR, en, es)
-- ✅ **Auditable**: Developer logs and DataLayer events for GTM
+MIT © Luciano Edipo — see the `LICENSE` file.
 ---
-## 🤝 Contributing
-Contributions are welcome! See the [Development Guide](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
-1. Fork the repository
-2. Create a branch: `git checkout -b feature/my-feature`
-3. Commit: `git commit -m 'feat: my new feature'`
-4. Push: `git push origin feature/my-feature`
-5. Open a Pull Request
----
-## 📄 License
-MIT © [Luciano Edipo](https://github.com/lucianoedipo)
----
-## 🔗 Useful Links
-- [**GitHub Repository**](https://github.com/lucianoedipo/react-lgpd-consent)
-- [**NPM Package**](https://www.npmjs.com/package/react-lgpd-consent)
-- [**Issues & Bugs**](https://github.com/lucianoedipo/react-lgpd-consent/issues)
-- [**Changelog**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)
----
+If you want the Portuguese README, see `README.md` in the same package.
-<div align="center">
-  <sub>Made with ❤️ for the React community</sub>
-</div>