@graffico/legal
v0.1.9
Published
Premium GDPR compliance solution for React/Next.js
Readme
@graffico/legal
Una soluzione premium, completa e GDPR compliant per la gestione dei consensi e delle informative legali in applicazioni React/Next.js.
Caratteristiche principali
- 🛡️ GDPR Ready: Gestione granulare dei consensi, documentazione delle finalità e prove legali del consenso (Consent ID).
- 🎨 Premium UI: Design moderno, pulito e altamente personalizzabile.
- 🌓 Temi Dinamici: Supporto per modalità Dark/Light e personalizzazione del colore primario.
- 🌍 Service Presets: Oltre 15 servizi comuni già pre-configurati.
Servizi Supportati (Presets)
Puoi aggiungere questi servizi semplicemente inserendo il loro ID nell'array services:
- Analytics:
google-analytics,facebook-pixel,linkedin-insight,tiktok-pixel,microsoft-clarity,hotjar,google-tag-manager. - Pagamenti:
stripe,paypal. - Contenuti:
youtube,google-maps,google-fonts. - Marketing/CRM:
mailchimp,newsletter,contact-form.
Puoi anche definire servizi personalizzati passando un oggetto LegalService completo.
- 📱 Mobile First: Layout ottimizzato per ogni dispositivo con paginazione intelligente per elenchi servizi lunghi.
Installazione
npm install @graffico/legal
# oppure
pnpm add @graffico/legalGuida all'uso
1. Configurazione
Definisci i dati della tua azienda:
import { CompanyConfig } from "@graffico/legal";
const legalConfig: CompanyConfig = {
name: "Mia Azienda",
domain: "azienda.it",
owners: "Nome Proprietario",
addresses: "Via Roma 1, Milano",
vatNumbers: "01234567890",
email: "[email protected]",
services: [
"google-analytics", // Preset ID
"facebook-pixel", // Preset ID
{
id: "servizio-custom",
name: "Il Mio CRM",
category: "provided", // 'automatic' | 'provided' | 'marketing'
purposes: ["Gestione Utenti", "Invio Newsletter"],
dataCollected: ["Email", "Nome", "Dati di Navigazione"],
}, // Servizio definito manualmente
],
theme: "dark",
primaryColor: "#2c5282",
};Servizi Personalizzati
La libreria è estensibile. Se un servizio non è tra i preset, puoi passare un oggetto che segue l'interfaccia LegalService:
const customService = {
id: "crm-aziendale",
name: "CRM Interno",
category: "provided", // 'automatic' (tracking/pixel), 'provided' (moduli/form), 'marketing' (ADV)
purposes: ["Gestione Clienti"],
dataCollected: ["Email", "Nome"],
};2. Provider e Banner (Layout)
Avvolgi la tua applicazione con il LegalProvider e aggiungi il ConsentBanner nel tuo layout principale.
// app/layout.tsx (Next.js App Router)
import { LegalProvider, ConsentBanner } from "@graffico/legal";
export default function RootLayout({ children }) {
return (
<html>
<body>
<LegalProvider config={legalConfig}>
{children}
<ConsentBanner />
</LegalProvider>
</body>
</html>
);
}3. Pagine Privacy e Cookie
Crea le rotte per le tue informative in modo semplicissimo:
// app/privacy-policy/page.tsx
import { PrivacyPolicy } from "@graffico/legal";
export default function Page() {
return <PrivacyPolicy />;
}
// app/cookie-policy/page.tsx
import { CookiePolicy } from "@graffico/legal";
export default function Page() {
return <CookiePolicy />;
}Componenti Inclusi
LegalProvider: Gestore dello stato dei consensi.ConsentBanner: Banner iniziale per l'accettazione dei cookie.PreferenceModal: Modal per la personalizzazione granulare (aperto automaticamente dal banner).PrivacyPolicy: Pagina completa di Privacy Policy.CookiePolicy: Pagina completa di Cookie Policy con Centro Preferenze integrato.ServiceGrid: Griglia interattiva dei servizi utilizzati.FloatingConsentToggle: Pulsante flottante per riaprire le preferenze (appare solo dopo il consenso).
Requisiti
- React 18+
- TailwindCSS (opzionale per l'applicazione ospitante, la libreria gestisce i propri stili).
Generato con ❤️ da Graffico Studio