@tantainnovative/ndpr-toolkit 1.0.4 → 1.0.6

package/README.md

@@ -1,104 +1,467 @@
-# Nigerian Data Protection Compliance Toolkit (NDPR-Toolkit)
-
-An open-source toolkit that helps Nigerian developers implement Nigeria Data Protection Regulation (NDPR) and Data Protection Act (DPA) compliant features in their web applications.
-
-## Project Vision
-
-This toolkit simplifies regulatory compliance for startups and businesses operating in Nigeria by providing ready-to-use components and tools for implementing data protection requirements.
-
-## Key Components
-
-### 1. Consent Management System
-- User-friendly consent banners and modals with customizable styling
-- Granular consent options (necessary, functional, analytics, marketing)
-- Consent storage and retrieval mechanisms
-- Consent change history tracking
-- Time-stamped audit trails
-
-### 2. Data Subject Rights Portal
-- Pre-built UI components for handling:
-  - Right to access personal data
-  - Right to rectification
-  - Right to erasure ("right to be forgotten")
-  - Right to restrict processing
-  - Right to data portability
-  - Dashboard for data controllers to manage requests
-  - Local storage requestService to track and update requests in demos
-
-### 3. Privacy Policy Generator
-- Interactive wizard to create NDPR-compliant privacy policies
-- Template system with customizable sections
-- Auto-update notifications when regulatory requirements change
-- Version history tracking
-
-### 4. Data Protection Impact Assessment (DPIA) Tool
-- Questionnaire-based tool to help organizations assess data processing risks
-- Risk scoring matrix
-- Mitigation recommendation engine
-- Exportable reports for compliance documentation
-
-### 5. Breach Notification Module
-- Templates for mandatory breach notifications
-- Workflow for documenting breach details
-- Timeline tracking to ensure 72-hour notification compliance
-- Notification delivery to authorities via API (if available)
-### 6. Data Subject Request Service
-- Lightweight requestService storing requests in browser localStorage for demos
-- Helper methods to update request status and retrieve history
-
-## Getting Started
-
-First, run the development server:
+# NDPR Toolkit
+
+<div align="center">
+
+![NDPR Toolkit Logo](https://via.placeholder.com/200x200?text=NDPR+Toolkit)
+
+A comprehensive enterprise solution for implementing NDPR-compliant features in web applications, aligned with the Nigerian Data Protection Regulation (NDPR) and Data Protection Act (DPA).
+
+[![npm version](https://img.shields.io/npm/v/@tantainnovative/ndpr-toolkit.svg)](https://www.npmjs.com/package/@tantainnovative/ndpr-toolkit)
+[![license](https://img.shields.io/npm/l/@tantainnovative/ndpr-toolkit.svg)](https://github.com/tantainnovative/ndpr-toolkit/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-4.9%2B-blue)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-18.0%2B-blue)](https://reactjs.org/)
+
+</div>
+
+## Overview
+
+The NDPR Toolkit is an enterprise-grade solution that provides a comprehensive set of React components, hooks, and utilities to help organizations implement NDPR-compliant features in their web applications with minimal development effort. Designed by compliance experts and developers, this toolkit offers a complete solution for privacy policy management, consent handling, data subject rights, breach notification, and data protection impact assessments.
+
+> **NDPR Toolkit is actively maintained and regularly updated to ensure compliance with the latest Nigerian data protection regulations.**
+
+## Key Features
+
+### Privacy Policy Management
+
+- **PolicyGenerator**: Create customizable, NDPR-compliant privacy policies with an intuitive form interface
+- **PolicyPreview**: Display generated policies with professional formatting and section navigation
+- **PolicyExporter**: Export policies in multiple formats (PDF, HTML, Markdown) with compliance notices
+
+### Consent Management
+
+- **ConsentBanner**: Implement cookie consent banners with customizable appearance and behavior
+- **ConsentManager**: Track and manage user consent preferences across your application
+- **ConsentStorage**: Securely store and retrieve consent records with built-in persistence
+
+### Data Subject Rights (DSR)
+
+- **DSRRequestForm**: Collect and validate data subject requests with comprehensive form validation
+- **DSRTracker**: Monitor the status and progress of data subject requests
+- **DSRDashboard**: Visualize and manage all data subject requests in one place
+
+### Data Protection Impact Assessment (DPIA)
+
+- **DPIAQuestionnaire**: Guide users through the DPIA process with step-by-step questionnaires
+- **DPIAReport**: Generate comprehensive DPIA reports based on questionnaire responses
+- **StepIndicator**: Track progress through multi-step DPIA processes
+
+### Breach Notification
+
+- **BreachReportForm**: Collect essential information about data breaches
+- **BreachRiskAssessment**: Evaluate the risk level of reported breaches
+- **RegulatoryReportGenerator**: Create NDPR-compliant breach notification reports
+- **BreachNotificationManager**: Manage the entire breach notification workflow
+
+### Enterprise Features
+
+- **Advanced Conditional Logic**: Support for complex conditional blocks in policy templates
+- **Professional Formatting**: Enterprise-ready formatting for all exported documents
+- **Comprehensive Type System**: Full TypeScript support with detailed interfaces and type definitions
+- **Modular Architecture**: Use only the components you need with tree-shakable imports
+- **Accessibility**: WCAG 2.1 AA compliant components for inclusive user experiences
+
+## Installation
+
+```bash
+# Using npm
+npm install @tantainnovative/ndpr-toolkit
+
+# Using yarn
+yarn add @tantainnovative/ndpr-toolkit
+
+# Using pnpm
+pnpm add @tantainnovative/ndpr-toolkit
+```
+
+### React 19 Compatibility
+
+If you&apos;re using React 19 and encounter peer dependency warnings with other packages in your project, you can use the `--legacy-peer-deps` flag:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm install @tantainnovative/ndpr-toolkit --legacy-peer-deps
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Alternatively, you can create a `.npmrc` file in your project root with the following content:
 
-## Deployment
+```
+legacy-peer-deps=true
+```
 
-### GitHub Pages
+This will make npm ignore peer dependency conflicts during installation.
 
-This project is configured to deploy automatically to GitHub Pages using GitHub Actions. When you push changes to the `main` branch, the following will happen:
+## Quick Start
 
-1. The GitHub Actions workflow will build the project
-2. The built files will be deployed to GitHub Pages
-3. Your site will be available at `https://[your-username].github.io/ndpr-toolkit/`
+### Consent Management
 
-To manually deploy to GitHub Pages:
+```jsx
+import { ConsentBanner, ConsentManager, ConsentStorage, useConsent } from '@tantainnovative/ndpr-toolkit';
 
-```bash
-# Build the project
-npm run build
+function MyApp() {
+  return (
+    <ConsentManager
+      options={[
+        {
+          id: 'necessary',
+          label: 'Necessary Cookies',
+          description: 'Essential cookies for the website to function.',
+          required: true
+        },
+        {
+          id: 'analytics',
+          label: 'Analytics Cookies',
+          description: 'Cookies that help us understand how you use our website.',
+          required: false
+        }
+      ]}
+      storageKey="my-app-consent"
+      autoLoad={true}
+      autoSave={true}
+    >
+      <AppContent />
+      <ConsentBanner 
+        position="bottom"
+        privacyPolicyUrl="/privacy-policy"
+        showPreferences={true}
+        onSave={(consents) => console.log('Consent saved:', consents)}
+      />
+    </ConsentManager>
+  );
+}
 
-# Deploy to GitHub Pages (if you have gh-pages installed)
-npm run deploy
+function AppContent() {
+  // Use the useConsent hook to manage consent state
+  const { consents, hasConsented, updateConsent } = useConsent();
+  
+  // Check if user has given consent for analytics
+  if (hasConsented('analytics')) {
+    // Initialize analytics
+  }
+  
+  return (
+    <div>
+      {/* Your app content */}
+    </div>
+  );
+}
 ```
 
-#### Configuration
+### Privacy Policy Generator
 
-The GitHub Pages deployment is configured in the following files:
-- `next.config.ts` - Contains the Next.js configuration for static export
-- `.github/workflows/deploy.yml` - Contains the GitHub Actions workflow for automated deployment
+```jsx
+import { PolicyGenerator, PolicyPreview, PolicyExporter, usePrivacyPolicy } from '@tantainnovative/ndpr-toolkit';
 
-## Technical Stack
+function PrivacyPolicyPage() {
+  const { policy, updateVariableValue, generatePolicy } = usePrivacyPolicy();
+  const [generatedPolicy, setGeneratedPolicy] = useState(null);
+  
+  // Define your variables
+  const variables = {
+    organizationName: 'Acme Corporation',
+    websiteUrl: 'https://acme.com',
+    contactEmail: 'privacy@acme.com',
+    lastUpdated: new Date().toLocaleDateString()
+  };
+  
+  return (
+    <div>
+      {!generatedPolicy ? (
+        <PolicyGenerator 
+          templates={[
+            {
+              id: 'standard',
+              name: 'Standard Privacy Policy',
+              description: 'A comprehensive privacy policy suitable for most websites and applications.',
+              sections: [
+                {
+                  id: 'introduction',
+                  title: 'Introduction',
+                  template: 'This Privacy Policy explains how {{organizationName}} collects, uses, and protects your personal data when you visit {{websiteUrl}}.',
+                  required: true,
+                  included: true
+                },
+                // More sections...
+              ]
+            }
+          ]}
+          variables={variables}
+          onComplete={(data) => {
+            // Generate policy with variables
+            const result = generatePolicyText(data.sections, variables);
+            setGeneratedPolicy({
+              title: `Privacy Policy for ${variables.organizationName}`,
+              content: result.fullText,
+              lastUpdated: new Date()
+            });
+          }}
+        />
+      ) : (
+        <>
+          <PolicyPreview 
+            policy={generatedPolicy}
+            variables={variables}
+            onVariableChange={(newVariables) => {
+              // Update variables and regenerate policy
+            }}
+          />
+          
+          <PolicyExporter
+            policy={generatedPolicy}
+            formats={['html', 'pdf', 'markdown']}
+            filename="privacy-policy"
+          />
+        </>
+      )}
+    </div>
+  );
+}
+```
 
-- Next.js with App Router
-- TypeScript
-- Tailwind CSS
-- React
+## Component Categories
 
-## License
+### Consent Management
+- `ConsentBanner`: Cookie consent banner with customizable options
+- `ConsentManager`: Component for managing consent preferences
+- `ConsentStorage`: Storage mechanism for consent settings with support for localStorage, sessionStorage, and cookies
+- `useConsent`: Hook for managing consent state
+
+### Data Subject Rights
+- `DSRRequestForm`: Form for submitting data subject rights requests
+- `DSRDashboard`: Admin dashboard for managing DSR requests
+- `DSRTracker`: Component for tracking the status of DSR requests
+- `useDSR`: Hook for managing DSR state
+- Types: `DSRType`, `DSRStatus`, `DSRRequest` for type-safe implementation
+
+### DPIA (Data Protection Impact Assessment)
+- `DPIAQuestionnaire`: Interactive questionnaire for conducting DPIAs
+- `DPIAReport`: Component for generating DPIA reports
+- `StepIndicator`: Progress indicator for multi-step processes
+- `useDPIA`: Hook for managing DPIA state
+- Types: `DPIAQuestion`, `DPIASection`, `DPIARisk`, `DPIAResult` for structured assessments
+
+### Breach Notification
+- `BreachReportForm`: Form for reporting data breaches
+- `BreachRiskAssessment`: Tool for assessing breach risk and severity
+- `BreachNotificationManager`: Component for managing breach notifications
+- `RegulatoryReportGenerator`: Tool for generating regulatory reports for NITDA
+- `useBreach`: Hook for managing breach notification state
+- Types: `BreachReport`, `RiskAssessment`, `NotificationRequirement` for compliance with 72-hour notification requirements
+
+### Privacy Policy
+- `PolicyGenerator`: Component for generating privacy policies
+- `PolicyPreview`: Preview component for privacy policies
+- `PolicyExporter`: Tool for exporting privacy policies to different formats
+- `generatePolicyText`: Utility for creating dynamic policies with variable support
+- `usePrivacyPolicy`: Hook for managing privacy policy state
+
+## Implementation Guides
+
+### Setting Up Consent Management
+
+```jsx
+// 1. Wrap your application with ConsentManager
+import { ConsentManager } from 'ndpr-toolkit';
+
+function App() {
+  return (
+    <ConsentManager
+      options={[
+        { id: 'necessary', label: 'Necessary', description: '...', required: true },
+        { id: 'analytics', label: 'Analytics', description: '...', required: false },
+        { id: 'marketing', label: 'Marketing', description: '...', required: false }
+      ]}
+      storageKey="my-app-consent"
+      autoLoad={true}
+      autoSave={true}
+    >
+      <YourApp />
+    </ConsentManager>
+  );
+}
+
+// 2. Add the ConsentBanner to your layout
+import { ConsentBanner } from 'ndpr-toolkit';
+
+function Layout({ children }) {
+  return (
+    <>
+      {children}
+      <ConsentBanner
+        position="bottom"
+        privacyPolicyUrl="/privacy-policy"
+        showPreferences={true}
+      />
+    </>
+  );
+}
+
+// 3. Use the consent values in your components
+import { useConsent } from 'ndpr-toolkit';
+
+function AnalyticsComponent() {
+  const { hasConsented } = useConsent();
+  
+  useEffect(() => {
+    if (hasConsented('analytics')) {
+      // Initialize analytics
+    }
+  }, [hasConsented]);
+  
+  return null;
+}
+```
+
+### Implementing a Data Subject Rights Portal
+
+```jsx
+import { DSRRequestForm, DSRTracker, DSRDashboard, useDSR } from '@tantainnovative/ndpr-toolkit';
 
-MIT License
+// 1. Create a form for data subjects to submit requests
+function DSRPortal() {
+  const { submitRequest } = useDSR();
+  
+  const handleSubmit = (formData) => {
+    const request = submitRequest({
+      type: formData.type,
+      subject: {
+        name: formData.name,
+        email: formData.email,
+        phone: formData.phone
+      },
+      details: formData.details
+    });
+    
+    // Show confirmation with tracking ID
+    alert(`Your request has been submitted. Your tracking ID is: ${request.id}`);
+  };
+  
+  return (
+    <DSRRequestForm
+      onSubmit={handleSubmit}
+      requestTypes={[
+        { id: 'access', label: 'Access my data' },
+        { id: 'rectification', label: 'Correct my data' },
+        { id: 'erasure', label: 'Delete my data' },
+        { id: 'restriction', label: 'Restrict processing of my data' },
+        { id: 'portability', label: 'Data portability' },
+        { id: 'objection', label: 'Object to processing' }
+      ]}
+    />
+  );
+}
 
-## Developed by
+// 2. Create an admin dashboard for managing requests
+import { DSRDashboard } from '@tantainnovative/ndpr-toolkit';
+
+function AdminDashboard() {
+  const { requests, updateRequest, deleteRequest } = useDSR();
+  
+  return (
+    <DSRDashboard
+      requests={requests}
+      onUpdateRequest={updateRequest}
+      onDeleteRequest={deleteRequest}
+    />
+  );
+}
+```
+
+### Setting Up a Breach Notification System
+
+```jsx
+import { BreachReportForm, BreachRiskAssessment, RegulatoryReportGenerator, useBreach } from '@tantainnovative/ndpr-toolkit';
+
+// 1. Create a form for reporting breaches
+function BreachReporting() {
+  const { submitBreachReport } = useBreach();
+  
+  const handleSubmit = (formData) => {
+    const report = submitBreachReport({
+      title: formData.title,
+      description: formData.description,
+      category: formData.category,
+      discoveredAt: Date.now(),
+      reporter: {
+        name: formData.reporterName,
+        email: formData.reporterEmail,
+        department: formData.department
+      },
+      affectedSystems: formData.systems,
+      dataTypes: formData.dataTypes,
+      status: 'ongoing'
+    });
+    
+    // Redirect to risk assessment
+    navigate(`/breach/${report.id}/assess`);
+  };
+  
+  return (
+    <BreachReportForm
+      onSubmit={handleSubmit}
+      categories={[
+        { id: 'unauthorized-access', label: 'Unauthorized Access' },
+        { id: 'data-loss', label: 'Data Loss' },
+        { id: 'system-compromise', label: 'System Compromise' }
+      ]}
+    />
+  );
+}
+
+// 2. Create a risk assessment component
+function RiskAssessment({ breachId }) {
+  const { performRiskAssessment, determineNotificationRequirements } = useBreach();
+  
+  const handleAssessment = (assessmentData) => {
+    const assessment = performRiskAssessment({
+      breachId,
+      assessor: {
+        name: 'Jane Smith',
+        role: 'Data Protection Officer',
+        email: 'jane@example.com'
+      },
+      ...assessmentData
+    });
+    
+    const requirements = determineNotificationRequirements({
+      breachId,
+      riskAssessmentId: assessment.id
+    });
+    
+    // Show notification requirements
+    if (requirements.nitdaNotificationRequired) {
+      // Deadline is 72 hours from discovery
+      const deadline = new Date(requirements.nitdaNotificationDeadline);
+      alert(`NITDA notification required by ${deadline.toLocaleString()}`);
+    }
+  };
+  
+  return (
+    <BreachRiskAssessment
+      breachId={breachId}
+      onComplete={handleAssessment}
+    />
+  );
+}
+```
+
+## Documentation
+
+For detailed documentation, visit [https://ndpr-toolkit.tantainnovative.com/docs](https://ndpr-toolkit.tantainnovative.com/docs)
+
+### API Reference
+
+Detailed API documentation is available for all components:
+
+- [Consent Management](https://ndpr-toolkit.tantainnovative.com/docs/components/consent-management)
+- [Data Subject Rights](https://ndpr-toolkit.tantainnovative.com/docs/components/data-subject-rights)
+- [DPIA Questionnaire](https://ndpr-toolkit.tantainnovative.com/docs/components/dpia-questionnaire)
+- [Breach Notification](https://ndpr-toolkit.tantainnovative.com/docs/components/breach-notification)
+- [Privacy Policy Generator](https://ndpr-toolkit.tantainnovative.com/docs/components/privacy-policy-generator)
+- [React Hooks](https://ndpr-toolkit.tantainnovative.com/docs/components/hooks)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
 
-Tanta Innovative - Positioning as a thought leader in regulatory tech solutions for Nigeria
+MIT © Tanta Innovative

package/dist/components/breach/BreachNotificationManager.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { BreachReport, RiskAssessment, RegulatoryNotification } from '../../types/breach';
+export interface BreachNotificationManagerProps {
+    /**
+     * List of breach reports to manage
+     */
+    breachReports: BreachReport[];
+    /**
+     * List of risk assessments
+     */
+    riskAssessments: RiskAssessment[];
+    /**
+     * List of regulatory notifications
+     */
+    regulatoryNotifications: RegulatoryNotification[];
+    /**
+     * Callback function called when a breach is selected
+     */
+    onSelectBreach?: (breachId: string) => void;
+    /**
+     * Callback function called when a risk assessment is requested
+     */
+    onRequestAssessment?: (breachId: string) => void;
+    /**
+     * Callback function called when a notification is requested
+     */
+    onRequestNotification?: (breachId: string) => void;
+    /**
+     * Title displayed on the manager
+     * @default "Breach Notification Manager"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the manager
+     * @default "Manage data breach notifications and track compliance with NDPR requirements."
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the manager
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Whether to show the breach details
+     * @default true
+     */
+    showBreachDetails?: boolean;
+    /**
+     * Whether to show the notification timeline
+     * @default true
+     */
+    showNotificationTimeline?: boolean;
+    /**
+     * Whether to show the deadline alerts
+     * @default true
+     */
+    showDeadlineAlerts?: boolean;
+}
+export declare const BreachNotificationManager: React.FC<BreachNotificationManagerProps>;

package/dist/components/breach/BreachReportForm.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { BreachCategory } from '../../types/breach';
+export interface BreachReportFormProps {
+    /**
+     * Available breach categories
+     */
+    categories: BreachCategory[];
+    /**
+     * Callback function called when form is submitted
+     */
+    onSubmit: (formData: any) => void;
+    /**
+     * Title displayed on the form
+     * @default "Report a Data Breach"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the form
+     * @default "Use this form to report a suspected or confirmed data breach. All fields marked with * are required."
+     */
+    formDescription?: string;
+    /**
+     * Text for the submit button
+     * @default "Submit Report"
+     */
+    submitButtonText?: string;
+    /**
+     * Custom CSS class for the form
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the submit button
+     */
+    buttonClassName?: string;
+    /**
+     * Whether to show a confirmation message after submission
+     * @default true
+     */
+    showConfirmation?: boolean;
+    /**
+     * Confirmation message to display after submission
+     * @default "Your breach report has been submitted successfully. The data protection team has been notified."
+     */
+    confirmationMessage?: string;
+    /**
+     * Whether to allow file attachments
+     * @default true
+     */
+    allowAttachments?: boolean;
+    /**
+     * Maximum number of attachments allowed
+     * @default 5
+     */
+    maxAttachments?: number;
+    /**
+     * Maximum file size for attachments (in bytes)
+     * @default 5242880 (5MB)
+     */
+    maxFileSize?: number;
+    /**
+     * Allowed file types for attachments
+     * @default ['.pdf', '.jpg', '.jpeg', '.png', '.doc', '.docx', '.xls', '.xlsx', '.txt']
+     */
+    allowedFileTypes?: string[];
+}
+export declare const BreachReportForm: React.FC<BreachReportFormProps>;