react-lgpd-consent 0.1.5 → 0.1.6

package/README.md

@@ -1,6 +1,14 @@
 # react-lgpd-consent 🍪
 
-[![NPM Version](https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&color=blue)](https://www.npmjs.com/package/react-lgpd-consent)
+[![NPM Version](https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&color=blue)](https://www.n useEffect(() => {
+if (consented && preferences.analytics) {
+loadScript(
+'ga',
+'https://www.googletagmanager.com/gtag/js?id=GA_ID',
+'analytics' // Aguarda consentimento finalizado
+)
+}
+}, [preferences, consented])package/react-lgpd-consent)
 [![License](https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge)](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-18%2B-61DAFB?style=for-the-badge&logo=react)](https://reactjs.org/)
@@ -23,6 +31,7 @@ Solução moderna, acessível e personalizável para gerenciar consentimento de
 - 🚫 **Banner Bloqueante**: Modo opcional para exigir interação antes de continuar
 - 🎨 **Sistema de Temas**: Temas customizáveis para integração visual perfeita
 - ⚡ **Carregamento Condicional**: Scripts só executam após consentimento explícito
+- 🔌 **Modal Automático**: Modal de preferências incluído automaticamente com lazy loading
 
 ## 🚀 Instalação
 
@@ -40,7 +49,27 @@ pnpm add react-lgpd-consent
 npm install @mui/material js-cookie
 ```
 
-## 📖 Uso Básico
+## � Exemplo Completo
+
+```tsx
+import { ConsentProvider, CookieBanner } from 'react-lgpd-consent'
+
+function App() {
+  return (
+    <ConsentProvider>
+      <div>
+        <h1>Meu Site</h1>
+        <p>Conteúdo do site...</p>
+
+        {/* Banner de cookies */}
+        <CookieBanner policyLinkUrl="/privacy-policy" blocking={true} />
+      </div>
+    </ConsentProvider>
+  )
+}
+```
+
+## �📖 Uso Básico
 
 ### 1. Setup do Provider
 
@@ -69,6 +98,7 @@ function Layout() {
         policyLinkUrl="/politica-privacidade"
         blocking={true} // Padrão: bloqueia até decisão
       />
+      {/* Modal de preferências incluído automaticamente! */}
     </>
   )
 }
@@ -92,10 +122,14 @@ function MyComponent() {
 }
 ```
 
+> ✅ **O modal de preferências é incluído automaticamente pelo ConsentProvider!** Não é mais necessário renderizá-lo manualmente.
+
+````
+
 ### 4. Carregamento Condicional de Scripts
 
 ```tsx
-import { ConsentGate, loadConditionalScript } from 'react-lgpd-consent'
+import { ConsentGate, loadScript } from 'react-lgpd-consent'
 
 function Analytics() {
   return (
@@ -119,7 +153,7 @@ function MyComponent() {
     }
   }, [preferences, consented])
 }
-```
+````
 
 ## 🎨 Customização
 
@@ -242,41 +276,87 @@ const temaCustomizado = createTheme({
 })
 ```
 
-## ⚡ Carregamento Condicional
+## ⚡ Carregamento Inteligente de Scripts
 
-### Função loadConditionalScript
+### Função loadScript
 
-Para scripts que devem aguardar consentimento específico:
+Scripts aguardam automaticamente o **consentimento finalizado** (banner fechado ou preferências salvas):
 
 ```tsx
-import { loadConditionalScript } from 'react-lgpd-consent'
+import { loadScript } from 'react-lgpd-consent'
 
-// Carrega script apenas quando analytics for aceito
-await loadConditionalScript(
+// Carrega script apenas após consentimento para analytics
+await loadScript(
   'gtag',
   'https://www.googletagmanager.com/gtag/js?id=GA_ID',
-  () => preferences.analytics,
-  { timeout: 10000 }, // timeout opcional
+  'analytics', // Categoria obrigatória
 )
+
+// Script geral (sempre carrega após consentimento)
+await loadScript('custom-script', 'https://example.com/script.js')
+```
+
+### Comportamento Inteligente
+
+- **Aguarda decisão final**: Não executa durante mudanças no modal de preferências
+- **Só executa após salvar**: Scripts só rodam quando o usuário finaliza as preferências
+- **Baseado em categoria**: Respeita as permissões por categoria
+
+## 🎨 Personalização Total
+
+### Modal de Preferências Customizado
+
+Substitua completamente o modal padrão com seu próprio componente:
+
+```tsx
+import { ConsentProvider, useConsent } from 'react-lgpd-consent'
+import MeuModalCustomizado from './MeuModalCustomizado'
+
+function App() {
+  return (
+    <ConsentProvider
+      PreferencesModalComponent={MeuModalCustomizado}
+      preferencesModalProps={{ variant: 'custom' }}
+    >
+      <MeuApp />
+    </ConsentProvider>
+  )
+}
+
+// Seu componente customizado
+function MeuModalCustomizado({ variant }) {
+  const { isModalOpen, closePreferences, setPreference } = useConsent()
+
+  return (
+    <MyCustomDialog open={isModalOpen} onClose={closePreferences}>
+      {/* Seu design personalizado aqui */}
+    </MyCustomDialog>
+  )
+}
 ```
 
-### Parâmetros
+### Desabilitar Modal Automático
 
-- `id`: Identificador único para o script
-- `src`: URL do script a ser carregado
-- `condition`: Função que retorna boolean indicando se deve carregar
-- `options`: Configurações opcionais (timeout, etc.)
+Para controle total, desabilite o modal automático:
+
+```tsx
+<ConsentProvider disableAutomaticModal>
+  <MeuApp />
+  {/* Renderize seus componentes customizados onde quiser */}
+  <MeuModalTotalmenteCustomizado />
+</ConsentProvider>
+```
 
 ## �🔧 API Completa
 
 ### Components
 
-| Componente         | Descrição                              | Props Principais                                             |
-| ------------------ | -------------------------------------- | ------------------------------------------------------------ |
-| `ConsentProvider`  | Provider principal do contexto         | `initialState`, `texts`, `theme`, `cookie`, callbacks        |
-| `CookieBanner`     | Banner de consentimento                | `policyLinkUrl`, `blocking`, `debug`, pass-through MUI props |
-| `PreferencesModal` | Modal de preferências detalhadas       | `DialogProps` (MUI pass-through)                             |
-| `ConsentGate`      | Renderização condicional por categoria | `category`, `children`                                       |
+| Componente         | Descrição                                        | Props Principais                                                                                  |
+| ------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
+| `ConsentProvider`  | Provider principal do contexto                   | `initialState`, `texts`, `theme`, `PreferencesModalComponent`, `disableAutomaticModal`, callbacks |
+| `CookieBanner`     | Banner de consentimento                          | `policyLinkUrl`, `blocking`, `debug`, pass-through MUI props                                      |
+| `PreferencesModal` | Modal de preferências (incluído automaticamente) | `DialogProps` (MUI pass-through) - **Opcional**                                                   |
+| `ConsentGate`      | Renderização condicional por categoria           | `category`, `children`                                                                            |
 
 ### Hook `useConsent()`
 
@@ -304,12 +384,9 @@ console.log(texts.banner.title) // "Política de Cookies"
 
 ### Utilitários
 
-- `loadScript(id, src, attrs?)` - Carrega scripts dinamicamente
-- `loadConditionalScript(id, src, condition, options?)` - Carrega scripts condicionalmente
+- `loadScript(id, src, category?, attrs?)` - Carrega scripts com consentimento inteligente
 - `defaultConsentTheme` - Tema padrão do Material-UI
-- Tipos TypeScript completos exportados
-
-## 🌐 SSR / Next.js
+- Tipos TypeScript completos exportados## 🌐 SSR / Next.js
 
 Para evitar flash de conteúdo em SSR:
 

package/dist/PreferencesModal-LWZAP5OT.js

@@ -0,0 +1,6 @@
+import {
+  PreferencesModal
+} from "./chunk-K3EVSUMQ.js";
+export {
+  PreferencesModal
+};

package/dist/chunk-K3EVSUMQ.js

@@ -0,0 +1,368 @@
+// src/components/PreferencesModal.tsx
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import Switch from "@mui/material/Switch";
+import Typography from "@mui/material/Typography";
+
+// src/context/ConsentContext.tsx
+import * as React from "react";
+import { ThemeProvider } from "@mui/material/styles";
+
+// src/utils/cookieUtils.ts
+import Cookies from "js-cookie";
+var DEFAULT_COOKIE_OPTS = {
+  name: "cookieConsent",
+  maxAgeDays: 365,
+  sameSite: "Lax",
+  secure: true,
+  path: "/"
+};
+function readConsentCookie(name = DEFAULT_COOKIE_OPTS.name) {
+  if (typeof document === "undefined") return null;
+  const raw = Cookies.get(name);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function writeConsentCookie(state, opts) {
+  if (typeof document === "undefined") return;
+  const o = { ...DEFAULT_COOKIE_OPTS, ...opts };
+  Cookies.set(o.name, JSON.stringify(state), {
+    expires: o.maxAgeDays,
+    sameSite: o.sameSite,
+    secure: o.secure,
+    path: o.path
+  });
+}
+function removeConsentCookie(opts) {
+  if (typeof document === "undefined") return;
+  const o = { ...DEFAULT_COOKIE_OPTS, ...opts };
+  Cookies.remove(o.name, { path: o.path });
+}
+
+// src/utils/theme.ts
+import { createTheme } from "@mui/material/styles";
+var defaultConsentTheme = createTheme({
+  palette: {
+    primary: {
+      main: "#1976d2",
+      // Azul institucional
+      contrastText: "#ffffff"
+    },
+    secondary: {
+      main: "#dc004e",
+      // Rosa/vermelho para ações importantes
+      contrastText: "#ffffff"
+    },
+    background: {
+      default: "#fafafa",
+      paper: "#ffffff"
+    },
+    text: {
+      primary: "#333333",
+      secondary: "#666666"
+    },
+    action: {
+      hover: "rgba(25, 118, 210, 0.04)"
+    }
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    body2: {
+      fontSize: "0.875rem",
+      lineHeight: 1.43
+    },
+    button: {
+      fontWeight: 500,
+      textTransform: "none"
+      // Manter capitalização original
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          paddingX: 16,
+          paddingY: 8
+        },
+        contained: {
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          "&:hover": {
+            boxShadow: "0 4px 8px rgba(0,0,0,0.15)"
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 16
+        }
+      }
+    }
+  }
+});
+
+// src/context/ConsentContext.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PreferencesModal = React.lazy(
+  () => import("./PreferencesModal-LWZAP5OT.js").then((m) => ({
+    default: m.PreferencesModal
+  }))
+);
+var DEFAULT_PREFERENCES = {
+  analytics: false,
+  marketing: false
+};
+var DEFAULT_TEXTS = {
+  bannerMessage: "Utilizamos cookies para melhorar sua experi\xEAncia.",
+  acceptAll: "Aceitar todos",
+  declineAll: "Recusar",
+  preferences: "Prefer\xEAncias",
+  policyLink: "Saiba mais",
+  modalTitle: "Prefer\xEAncias de Cookies",
+  modalIntro: "Ajuste as categorias de cookies. Cookies necess\xE1rios s\xE3o sempre utilizados para funcionalidades b\xE1sicas.",
+  save: "Salvar prefer\xEAncias",
+  necessaryAlwaysOn: "Cookies necess\xE1rios (sempre ativos)"
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case "ACCEPT_ALL":
+      return {
+        consented: true,
+        preferences: { analytics: true, marketing: true },
+        isModalOpen: false
+      };
+    case "REJECT_ALL":
+      return {
+        consented: true,
+        preferences: { analytics: false, marketing: false },
+        isModalOpen: false
+      };
+    case "SET_CATEGORY":
+      return {
+        ...state,
+        preferences: {
+          ...state.preferences,
+          [action.category]: action.value
+        }
+      };
+    case "OPEN_MODAL":
+      return { ...state, isModalOpen: true };
+    case "CLOSE_MODAL":
+      return { ...state, isModalOpen: false, consented: true };
+    // houve interação
+    case "RESET":
+      return {
+        consented: false,
+        preferences: { ...DEFAULT_PREFERENCES },
+        isModalOpen: false
+      };
+    case "HYDRATE":
+      return { ...action.state };
+    default:
+      return state;
+  }
+}
+var StateCtx = React.createContext(null);
+var ActionsCtx = React.createContext(null);
+var TextsCtx = React.createContext(DEFAULT_TEXTS);
+function ConsentProvider({
+  initialState,
+  texts: textsProp,
+  theme,
+  PreferencesModalComponent,
+  preferencesModalProps = {},
+  disableAutomaticModal = false,
+  onConsentGiven,
+  onPreferencesSaved,
+  cookie: cookieOpts,
+  children
+}) {
+  const texts = React.useMemo(
+    () => ({ ...DEFAULT_TEXTS, ...textsProp ?? {} }),
+    [textsProp]
+  );
+  const cookie = React.useMemo(
+    () => ({ ...DEFAULT_COOKIE_OPTS, ...cookieOpts ?? {} }),
+    [cookieOpts]
+  );
+  const appliedTheme = React.useMemo(
+    () => theme || defaultConsentTheme,
+    [theme]
+  );
+  const boot = React.useMemo(() => {
+    if (initialState) return { ...initialState, isModalOpen: false };
+    const saved = readConsentCookie(cookie.name);
+    return saved ?? {
+      consented: false,
+      preferences: { ...DEFAULT_PREFERENCES },
+      isModalOpen: false
+    };
+  }, [initialState, cookie.name]);
+  const [state, dispatch] = React.useReducer(reducer, boot);
+  React.useEffect(() => {
+    if (state.consented) writeConsentCookie(state, cookie);
+  }, [state, cookie]);
+  const prevConsented = React.useRef(state.consented);
+  React.useEffect(() => {
+    if (!prevConsented.current && state.consented && onConsentGiven) {
+      setTimeout(() => onConsentGiven(state), 150);
+    }
+    prevConsented.current = state.consented;
+  }, [state, onConsentGiven]);
+  const prevPrefs = React.useRef(state.preferences);
+  React.useEffect(() => {
+    if (state.consented && onPreferencesSaved && prevPrefs.current !== state.preferences) {
+      setTimeout(() => onPreferencesSaved(state.preferences), 150);
+      prevPrefs.current = state.preferences;
+    }
+  }, [state, onPreferencesSaved]);
+  const api = React.useMemo(() => {
+    const acceptAll = () => dispatch({ type: "ACCEPT_ALL" });
+    const rejectAll = () => dispatch({ type: "REJECT_ALL" });
+    const setPreference = (category, value) => dispatch({ type: "SET_CATEGORY", category, value });
+    const openPreferences = () => dispatch({ type: "OPEN_MODAL" });
+    const closePreferences = () => dispatch({ type: "CLOSE_MODAL" });
+    const resetConsent = () => {
+      removeConsentCookie(cookie);
+      dispatch({ type: "RESET" });
+    };
+    return {
+      consented: !!state.consented,
+      preferences: state.preferences,
+      isModalOpen: state.isModalOpen,
+      acceptAll,
+      rejectAll,
+      setPreference,
+      openPreferences,
+      closePreferences,
+      resetConsent
+    };
+  }, [state, cookie]);
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ jsx(StateCtx.Provider, { value: state, children: /* @__PURE__ */ jsx(ActionsCtx.Provider, { value: api, children: /* @__PURE__ */ jsxs(TextsCtx.Provider, { value: texts, children: [
+    children,
+    !disableAutomaticModal && /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: PreferencesModalComponent ? /* @__PURE__ */ jsx(PreferencesModalComponent, { ...preferencesModalProps }) : /* @__PURE__ */ jsx(PreferencesModal, {}) })
+  ] }) }) }) });
+}
+function useConsentStateInternal() {
+  const ctx = React.useContext(StateCtx);
+  if (!ctx)
+    throw new Error("useConsentState must be used within ConsentProvider");
+  return ctx;
+}
+function useConsentActionsInternal() {
+  const ctx = React.useContext(ActionsCtx);
+  if (!ctx)
+    throw new Error("useConsentActions must be used within ConsentProvider");
+  return ctx;
+}
+function useConsentTextsInternal() {
+  const ctx = React.useContext(TextsCtx);
+  return ctx;
+}
+
+// src/hooks/useConsent.ts
+function useConsent() {
+  const state = useConsentStateInternal();
+  const actions = useConsentActionsInternal();
+  return {
+    consented: state.consented,
+    preferences: state.preferences,
+    isModalOpen: state.isModalOpen,
+    acceptAll: actions.acceptAll,
+    rejectAll: actions.rejectAll,
+    setPreference: actions.setPreference,
+    openPreferences: actions.openPreferences,
+    closePreferences: actions.closePreferences,
+    resetConsent: actions.resetConsent
+  };
+}
+function useConsentTexts() {
+  return useConsentTextsInternal();
+}
+
+// src/components/PreferencesModal.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PreferencesModal2({
+  DialogProps: DialogProps2
+}) {
+  const { preferences, setPreference, closePreferences, isModalOpen } = useConsent();
+  const texts = useConsentTexts();
+  const open = DialogProps2?.open ?? isModalOpen ?? false;
+  return /* @__PURE__ */ jsxs2(
+    Dialog,
+    {
+      "aria-labelledby": "cookie-pref-title",
+      open,
+      onClose: closePreferences,
+      ...DialogProps2,
+      children: [
+        /* @__PURE__ */ jsx2(DialogTitle, { id: "cookie-pref-title", children: texts.modalTitle }),
+        /* @__PURE__ */ jsxs2(DialogContent, { dividers: true, children: [
+          /* @__PURE__ */ jsx2(Typography, { variant: "body2", sx: { mb: 2 }, children: texts.modalIntro }),
+          /* @__PURE__ */ jsxs2(FormGroup, { children: [
+            /* @__PURE__ */ jsx2(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx2(
+                  Switch,
+                  {
+                    checked: preferences.analytics,
+                    onChange: (e) => setPreference("analytics", e.target.checked)
+                  }
+                ),
+                label: "Cookies Anal\xEDticos (medem uso do site)"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx2(
+                  Switch,
+                  {
+                    checked: preferences.marketing,
+                    onChange: (e) => setPreference("marketing", e.target.checked)
+                  }
+                ),
+                label: "Cookies de Marketing/Publicidade"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx2(Switch, { checked: true, disabled: true }),
+                label: texts.necessaryAlwaysOn
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(DialogActions, { children: /* @__PURE__ */ jsx2(Button, { variant: "contained", onClick: closePreferences, children: texts.save }) })
+      ]
+    }
+  );
+}
+
+export {
+  defaultConsentTheme,
+  PreferencesModal2 as PreferencesModal,
+  ConsentProvider,
+  useConsent,
+  useConsentTexts
+};