react-lgpd-consent 0.1.13 → 0.2.0

package/dist/index.d.cts

@@ -100,16 +100,100 @@ interface FloatingPreferencesButtonProps {
 declare function FloatingPreferencesButton({ position, offset, icon, tooltip, FabProps, hideWhenConsented, }: Readonly<FloatingPreferencesButtonProps>): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Categoria de consentimento para cookies.
- * Pode ser 'analytics' ou 'marketing'.
+ * Integrações nativas com scripts de terceiros.
+ * Facilita o carregamento automático baseado em consentimento.
  */
-type Category = 'analytics' | 'marketing';
+interface ScriptIntegration {
+    /** ID único da integração */
+    id: string;
+    /** Categoria de consentimento necessária */
+    category: string;
+    /** URL do script */
+    src: string;
+    /** Função de inicialização após carregamento */
+    init?: () => void;
+    /** Atributos adicionais do script */
+    attrs?: Record<string, string>;
+}
+/**
+ * Configuração para Google Analytics 4.
+ */
+interface GoogleAnalyticsConfig {
+    measurementId: string;
+    config?: any;
+}
+/**
+ * Configuração para Google Tag Manager.
+ */
+interface GoogleTagManagerConfig {
+    containerId: string;
+    dataLayerName?: string;
+}
+/**
+ * Configuração para UserWay (acessibilidade).
+ */
+interface UserWayConfig {
+    accountId: string;
+}
+/**
+ * Cria integração para Google Analytics 4.
+ */
+declare function createGoogleAnalyticsIntegration(config: GoogleAnalyticsConfig): ScriptIntegration;
+/**
+ * Cria integração para Google Tag Manager.
+ */
+declare function createGoogleTagManagerIntegration(config: GoogleTagManagerConfig): ScriptIntegration;
+/**
+ * Cria integração para UserWay (acessibilidade).
+ */
+declare function createUserWayIntegration(config: UserWayConfig): ScriptIntegration;
+/**
+ * Integrações pré-configuradas mais comuns.
+ */
+declare const COMMON_INTEGRATIONS: {
+    googleAnalytics: typeof createGoogleAnalyticsIntegration;
+    googleTagManager: typeof createGoogleTagManagerIntegration;
+    userway: typeof createUserWayIntegration;
+};
+
+/**
+ * Categorias padrão de consentimento para cookies baseadas no Guia da ANPD.
+ *
+ * - necessary: Cookies essenciais (sempre ativos)
+ * - analytics: Análise e estatísticas
+ * - functional: Funcionalidades extras
+ * - marketing: Publicidade e marketing
+ * - social: Integração com redes sociais
+ * - personalization: Personalização de conteúdo
+ */
+type Category = 'necessary' | 'analytics' | 'functional' | 'marketing' | 'social' | 'personalization';
+/**
+ * Definição detalhada de uma categoria de cookie.
+ */
+interface CategoryDefinition {
+    /** ID único da categoria */
+    id: string;
+    /** Nome amigável exibido na interface */
+    name: string;
+    /** Descrição detalhada da categoria */
+    description: string;
+    /** Se é uma categoria essencial (não pode ser desabilitada) */
+    essential?: boolean;
+    /** Scripts/cookies específicos desta categoria */
+    cookies?: string[];
+}
 /**
  * Preferências de consentimento do usuário para cada categoria.
+ * Baseado nas categorias do Guia da ANPD, mas extensível.
  */
 interface ConsentPreferences {
+    necessary: boolean;
     analytics: boolean;
+    functional: boolean;
     marketing: boolean;
+    social: boolean;
+    personalization: boolean;
+    [key: string]: boolean;
 }
 /**
  * Estado geral do consentimento, incluindo se o usuário consentiu,
@@ -152,6 +236,14 @@ interface ConsentTexts {
     modalIntro: string;
     save: string;
     necessaryAlwaysOn: string;
+    controllerInfo?: string;
+    dataTypes?: string;
+    thirdPartySharing?: string;
+    userRights?: string;
+    contactInfo?: string;
+    retentionPeriod?: string;
+    lawfulBasis?: string;
+    transferCountries?: string;
 }
 /**
  * Opções para configuração do cookie de consentimento.
@@ -176,8 +268,12 @@ interface ConsentProviderProps {
     initialState?: ConsentState;
     /** Textos customizados para a interface. */
     texts?: Partial<ConsentTexts>;
-    /** Tema customizado para os componentes MUI. */
+    /** Tema customizado para os componentes MUI. Aceita qualquer propriedade. */
     theme?: any;
+    /** Categorias customizadas de cookies (complementa as padrão). */
+    customCategories?: CategoryDefinition[];
+    /** Integrações nativas de scripts (Google Analytics, etc.). */
+    scriptIntegrations?: ScriptIntegration[];
     /** Componente customizado para modal de preferências. */
     PreferencesModalComponent?: React.ComponentType<any>;
     /** Props adicionais para o modal customizado. */
@@ -236,7 +332,7 @@ interface ConsentContextValue {
  *   <App />
  * </ConsentProvider>
  */
-declare function ConsentProvider({ initialState, texts: textsProp, theme, PreferencesModalComponent, preferencesModalProps, disableAutomaticModal, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ initialState, texts: textsProp, theme, customCategories, scriptIntegrations, PreferencesModalComponent, preferencesModalProps, disableAutomaticModal, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook principal para acessar e manipular o estado de consentimento de cookies.
@@ -271,8 +367,18 @@ declare function useConsentTexts(): ConsentTexts;
  */
 declare function useConsentHydration(): boolean;
 
+/**
+ * Hook para acessar as categorias customizadas.
+ * Retorna apenas as categorias customizadas (não as padrão analytics/marketing).
+ */
+declare function useCustomCategories(): CategoryDefinition[];
+/**
+ * Hook para obter todas as categorias (padrão + customizadas).
+ */
+declare function useAllCategories(): CategoryDefinition[];
+
 declare function ConsentGate(props: Readonly<{
-    category: Category;
+    category: string;
     children: React$1.ReactNode;
 }>): react_jsx_runtime.JSX.Element | null;
 
@@ -301,4 +407,49 @@ declare function loadScript(id: string, src: string, category?: 'analytics' | 'm
  */
 declare const defaultConsentTheme: _mui_material_styles.Theme;
 
-export { type Category, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentState, type ConsentTexts, CookieBanner, FloatingPreferencesButton, PreferencesModal, defaultConsentTheme, loadScript, useConsent, useConsentHydration, useConsentTexts };
+/**
+ * Componente que carrega scripts automaticamente baseado no consentimento.
+ * Facilita integração com ferramentas como Google Analytics, Tag Manager, etc.
+ */
+
+interface ConsentScriptLoaderProps {
+    /** Lista de integrações de scripts para carregar baseado no consentimento */
+    integrations: ScriptIntegration[];
+    /** Se true, força recarregamento se consentimento mudar */
+    reloadOnChange?: boolean;
+}
+/**
+ * Componente para carregamento automático de scripts baseado no consentimento.
+ *
+ * @example
+ * ```tsx
+ * const integrations = [
+ *   createGoogleAnalyticsIntegration({ measurementId: 'GA_ID' }),
+ *   createUserWayIntegration({ accountId: 'USERWAY_ID' })
+ * ]
+ *
+ * <ConsentScriptLoader integrations={integrations} />
+ * ```
+ */
+declare function ConsentScriptLoader({ integrations, reloadOnChange, }: Readonly<ConsentScriptLoaderProps>): null;
+/**
+ * Hook para carregamento manual de scripts baseado no consentimento.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const loadConsentScript = useConsentScriptLoader()
+ *
+ *   React.useEffect(() => {
+ *     loadConsentScript({
+ *       id: 'my-script',
+ *       category: 'analytics',
+ *       src: 'https://example.com/script.js'
+ *     })
+ *   }, [])
+ * }
+ * ```
+ */
+declare function useConsentScriptLoader(): (integration: ScriptIntegration) => Promise<boolean>;
+
+export { COMMON_INTEGRATIONS, type Category, type CategoryDefinition, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, ConsentScriptLoader, type ConsentState, type ConsentTexts, CookieBanner, FloatingPreferencesButton, type GoogleAnalyticsConfig, type GoogleTagManagerConfig, PreferencesModal, type ScriptIntegration, type UserWayConfig, createGoogleAnalyticsIntegration, createGoogleTagManagerIntegration, createUserWayIntegration, defaultConsentTheme, loadScript, useAllCategories, useConsent, useConsentHydration, useConsentScriptLoader, useConsentTexts, useCustomCategories };

package/dist/index.d.ts

@@ -100,16 +100,100 @@ interface FloatingPreferencesButtonProps {
 declare function FloatingPreferencesButton({ position, offset, icon, tooltip, FabProps, hideWhenConsented, }: Readonly<FloatingPreferencesButtonProps>): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Categoria de consentimento para cookies.
- * Pode ser 'analytics' ou 'marketing'.
+ * Integrações nativas com scripts de terceiros.
+ * Facilita o carregamento automático baseado em consentimento.
  */
-type Category = 'analytics' | 'marketing';
+interface ScriptIntegration {
+    /** ID único da integração */
+    id: string;
+    /** Categoria de consentimento necessária */
+    category: string;
+    /** URL do script */
+    src: string;
+    /** Função de inicialização após carregamento */
+    init?: () => void;
+    /** Atributos adicionais do script */
+    attrs?: Record<string, string>;
+}
+/**
+ * Configuração para Google Analytics 4.
+ */
+interface GoogleAnalyticsConfig {
+    measurementId: string;
+    config?: any;
+}
+/**
+ * Configuração para Google Tag Manager.
+ */
+interface GoogleTagManagerConfig {
+    containerId: string;
+    dataLayerName?: string;
+}
+/**
+ * Configuração para UserWay (acessibilidade).
+ */
+interface UserWayConfig {
+    accountId: string;
+}
+/**
+ * Cria integração para Google Analytics 4.
+ */
+declare function createGoogleAnalyticsIntegration(config: GoogleAnalyticsConfig): ScriptIntegration;
+/**
+ * Cria integração para Google Tag Manager.
+ */
+declare function createGoogleTagManagerIntegration(config: GoogleTagManagerConfig): ScriptIntegration;
+/**
+ * Cria integração para UserWay (acessibilidade).
+ */
+declare function createUserWayIntegration(config: UserWayConfig): ScriptIntegration;
+/**
+ * Integrações pré-configuradas mais comuns.
+ */
+declare const COMMON_INTEGRATIONS: {
+    googleAnalytics: typeof createGoogleAnalyticsIntegration;
+    googleTagManager: typeof createGoogleTagManagerIntegration;
+    userway: typeof createUserWayIntegration;
+};
+
+/**
+ * Categorias padrão de consentimento para cookies baseadas no Guia da ANPD.
+ *
+ * - necessary: Cookies essenciais (sempre ativos)
+ * - analytics: Análise e estatísticas
+ * - functional: Funcionalidades extras
+ * - marketing: Publicidade e marketing
+ * - social: Integração com redes sociais
+ * - personalization: Personalização de conteúdo
+ */
+type Category = 'necessary' | 'analytics' | 'functional' | 'marketing' | 'social' | 'personalization';
+/**
+ * Definição detalhada de uma categoria de cookie.
+ */
+interface CategoryDefinition {
+    /** ID único da categoria */
+    id: string;
+    /** Nome amigável exibido na interface */
+    name: string;
+    /** Descrição detalhada da categoria */
+    description: string;
+    /** Se é uma categoria essencial (não pode ser desabilitada) */
+    essential?: boolean;
+    /** Scripts/cookies específicos desta categoria */
+    cookies?: string[];
+}
 /**
  * Preferências de consentimento do usuário para cada categoria.
+ * Baseado nas categorias do Guia da ANPD, mas extensível.
  */
 interface ConsentPreferences {
+    necessary: boolean;
     analytics: boolean;
+    functional: boolean;
     marketing: boolean;
+    social: boolean;
+    personalization: boolean;
+    [key: string]: boolean;
 }
 /**
  * Estado geral do consentimento, incluindo se o usuário consentiu,
@@ -152,6 +236,14 @@ interface ConsentTexts {
     modalIntro: string;
     save: string;
     necessaryAlwaysOn: string;
+    controllerInfo?: string;
+    dataTypes?: string;
+    thirdPartySharing?: string;
+    userRights?: string;
+    contactInfo?: string;
+    retentionPeriod?: string;
+    lawfulBasis?: string;
+    transferCountries?: string;
 }
 /**
  * Opções para configuração do cookie de consentimento.
@@ -176,8 +268,12 @@ interface ConsentProviderProps {
     initialState?: ConsentState;
     /** Textos customizados para a interface. */
     texts?: Partial<ConsentTexts>;
-    /** Tema customizado para os componentes MUI. */
+    /** Tema customizado para os componentes MUI. Aceita qualquer propriedade. */
     theme?: any;
+    /** Categorias customizadas de cookies (complementa as padrão). */
+    customCategories?: CategoryDefinition[];
+    /** Integrações nativas de scripts (Google Analytics, etc.). */
+    scriptIntegrations?: ScriptIntegration[];
     /** Componente customizado para modal de preferências. */
     PreferencesModalComponent?: React.ComponentType<any>;
     /** Props adicionais para o modal customizado. */
@@ -236,7 +332,7 @@ interface ConsentContextValue {
  *   <App />
  * </ConsentProvider>
  */
-declare function ConsentProvider({ initialState, texts: textsProp, theme, PreferencesModalComponent, preferencesModalProps, disableAutomaticModal, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ initialState, texts: textsProp, theme, customCategories, scriptIntegrations, PreferencesModalComponent, preferencesModalProps, disableAutomaticModal, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook principal para acessar e manipular o estado de consentimento de cookies.
@@ -271,8 +367,18 @@ declare function useConsentTexts(): ConsentTexts;
  */
 declare function useConsentHydration(): boolean;
 
+/**
+ * Hook para acessar as categorias customizadas.
+ * Retorna apenas as categorias customizadas (não as padrão analytics/marketing).
+ */
+declare function useCustomCategories(): CategoryDefinition[];
+/**
+ * Hook para obter todas as categorias (padrão + customizadas).
+ */
+declare function useAllCategories(): CategoryDefinition[];
+
 declare function ConsentGate(props: Readonly<{
-    category: Category;
+    category: string;
     children: React$1.ReactNode;
 }>): react_jsx_runtime.JSX.Element | null;
 
@@ -301,4 +407,49 @@ declare function loadScript(id: string, src: string, category?: 'analytics' | 'm
  */
 declare const defaultConsentTheme: _mui_material_styles.Theme;
 
-export { type Category, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentState, type ConsentTexts, CookieBanner, FloatingPreferencesButton, PreferencesModal, defaultConsentTheme, loadScript, useConsent, useConsentHydration, useConsentTexts };
+/**
+ * Componente que carrega scripts automaticamente baseado no consentimento.
+ * Facilita integração com ferramentas como Google Analytics, Tag Manager, etc.
+ */
+
+interface ConsentScriptLoaderProps {
+    /** Lista de integrações de scripts para carregar baseado no consentimento */
+    integrations: ScriptIntegration[];
+    /** Se true, força recarregamento se consentimento mudar */
+    reloadOnChange?: boolean;
+}
+/**
+ * Componente para carregamento automático de scripts baseado no consentimento.
+ *
+ * @example
+ * ```tsx
+ * const integrations = [
+ *   createGoogleAnalyticsIntegration({ measurementId: 'GA_ID' }),
+ *   createUserWayIntegration({ accountId: 'USERWAY_ID' })
+ * ]
+ *
+ * <ConsentScriptLoader integrations={integrations} />
+ * ```
+ */
+declare function ConsentScriptLoader({ integrations, reloadOnChange, }: Readonly<ConsentScriptLoaderProps>): null;
+/**
+ * Hook para carregamento manual de scripts baseado no consentimento.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const loadConsentScript = useConsentScriptLoader()
+ *
+ *   React.useEffect(() => {
+ *     loadConsentScript({
+ *       id: 'my-script',
+ *       category: 'analytics',
+ *       src: 'https://example.com/script.js'
+ *     })
+ *   }, [])
+ * }
+ * ```
+ */
+declare function useConsentScriptLoader(): (integration: ScriptIntegration) => Promise<boolean>;
+
+export { COMMON_INTEGRATIONS, type Category, type CategoryDefinition, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, ConsentScriptLoader, type ConsentState, type ConsentTexts, CookieBanner, FloatingPreferencesButton, type GoogleAnalyticsConfig, type GoogleTagManagerConfig, PreferencesModal, type ScriptIntegration, type UserWayConfig, createGoogleAnalyticsIntegration, createGoogleTagManagerIntegration, createUserWayIntegration, defaultConsentTheme, loadScript, useAllCategories, useConsent, useConsentHydration, useConsentScriptLoader, useConsentTexts, useCustomCategories };

package/dist/index.js

@@ -3,10 +3,12 @@ import {
   ConsentProvider,
   PreferencesModal,
   defaultConsentTheme,
+  useAllCategories,
   useConsent,
   useConsentHydration,
-  useConsentTexts
-} from "./chunk-XIHO7M77.js";
+  useConsentTexts,
+  useCustomCategories
+} from "./chunk-JTPCDTOQ.js";
 
 // src/components/CookieBanner.tsx
 import Button from "@mui/material/Button";
@@ -216,15 +218,160 @@ function loadScript(id, src, category = null, attrs = {}) {
     checkConsent();
   });
 }
+
+// src/utils/ConsentScriptLoader.tsx
+import * as React from "react";
+function ConsentScriptLoader({
+  integrations,
+  reloadOnChange = false
+}) {
+  const { preferences, consented } = useConsent();
+  const loadedScripts = React.useRef(/* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    if (!consented) return;
+    integrations.forEach(async (integration) => {
+      const shouldLoad = preferences[integration.category];
+      const alreadyLoaded = loadedScripts.current.has(integration.id);
+      if (shouldLoad && (!alreadyLoaded || reloadOnChange)) {
+        try {
+          await loadScript(
+            integration.id,
+            integration.src,
+            integration.category,
+            // Categoria dinâmica
+            integration.attrs
+          );
+          if (integration.init) {
+            integration.init();
+          }
+          loadedScripts.current.add(integration.id);
+          console.log(
+            `\u2705 Script loaded: ${integration.id} (${integration.category})`
+          );
+        } catch (error) {
+          console.error(`\u274C Failed to load script: ${integration.id}`, error);
+        }
+      }
+    });
+  }, [preferences, consented, integrations, reloadOnChange]);
+  return null;
+}
+function useConsentScriptLoader() {
+  const { preferences, consented } = useConsent();
+  return React.useCallback(
+    async (integration) => {
+      if (!consented) {
+        console.warn(
+          `\u26A0\uFE0F Cannot load script ${integration.id}: No consent given`
+        );
+        return false;
+      }
+      const shouldLoad = preferences[integration.category];
+      if (!shouldLoad) {
+        console.warn(
+          `\u26A0\uFE0F Cannot load script ${integration.id}: Category '${integration.category}' not consented`
+        );
+        return false;
+      }
+      try {
+        await loadScript(
+          integration.id,
+          integration.src,
+          integration.category,
+          // Categoria dinâmica
+          integration.attrs
+        );
+        if (integration.init) {
+          integration.init();
+        }
+        console.log(
+          `\u2705 Script loaded: ${integration.id} (${integration.category})`
+        );
+        return true;
+      } catch (error) {
+        console.error(`\u274C Failed to load script: ${integration.id}`, error);
+        return false;
+      }
+    },
+    [preferences, consented]
+  );
+}
+
+// src/utils/scriptIntegrations.ts
+function createGoogleAnalyticsIntegration(config) {
+  return {
+    id: "google-analytics",
+    category: "analytics",
+    src: `https://www.googletagmanager.com/gtag/js?id=${config.measurementId}`,
+    init: () => {
+      if (typeof window !== "undefined") {
+        let gtag2 = function(...args) {
+          window.dataLayer.push(arguments);
+        };
+        var gtag = gtag2;
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = gtag2;
+        gtag2("js", /* @__PURE__ */ new Date());
+        gtag2("config", config.measurementId, config.config || {});
+      }
+    },
+    attrs: { async: "true" }
+  };
+}
+function createGoogleTagManagerIntegration(config) {
+  return {
+    id: "google-tag-manager",
+    category: "analytics",
+    src: `https://www.googletagmanager.com/gtm.js?id=${config.containerId}`,
+    init: () => {
+      if (typeof window !== "undefined") {
+        const dataLayerName = config.dataLayerName || "dataLayer";
+        window[dataLayerName] = window[dataLayerName] || [];
+        window[dataLayerName].push({
+          "gtm.start": (/* @__PURE__ */ new Date()).getTime(),
+          event: "gtm.js"
+        });
+      }
+    }
+  };
+}
+function createUserWayIntegration(config) {
+  return {
+    id: "userway",
+    category: "marketing",
+    // ou poderia ser uma categoria 'accessibility'
+    src: `https://cdn.userway.org/widget.js`,
+    init: () => {
+      if (typeof window !== "undefined") {
+        window.UserWayWidgetApp = window.UserWayWidgetApp || {};
+        window.UserWayWidgetApp.accountId = config.accountId;
+      }
+    },
+    attrs: { "data-account": config.accountId }
+  };
+}
+var COMMON_INTEGRATIONS = {
+  googleAnalytics: createGoogleAnalyticsIntegration,
+  googleTagManager: createGoogleTagManagerIntegration,
+  userway: createUserWayIntegration
+};
 export {
+  COMMON_INTEGRATIONS,
   ConsentGate,
   ConsentProvider,
+  ConsentScriptLoader,
   CookieBanner,
   FloatingPreferencesButton,
   PreferencesModal,
+  createGoogleAnalyticsIntegration,
+  createGoogleTagManagerIntegration,
+  createUserWayIntegration,
   defaultConsentTheme,
   loadScript,
+  useAllCategories,
   useConsent,
   useConsentHydration,
-  useConsentTexts
+  useConsentScriptLoader,
+  useConsentTexts,
+  useCustomCategories
 };