@tantainnovative/ndpr-toolkit 1.0.4 → 1.0.5

package/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

package/next.config.js

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  basePath: '',
+  images: {
+    unoptimized: true,
+  },
+  eslint: {
+    // Warning: This allows production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
+}
+
+module.exports = nextConfig

package/next.config.ts

@@ -0,0 +1,62 @@
+import type { NextConfig } from "next";
+
+// Check if we're in development mode
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+// Repository name for GitHub Pages
+const REPO_NAME = 'ndpr-toolkit';
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  
+  // These settings apply to all environments
+  poweredByHeader: false,
+  
+  // Fix for hydration errors
+  // This ensures consistent rendering between server and client
+  experimental: {
+    // Reduce hydration mismatches by making SSR output match client rendering
+    scrollRestoration: true,
+  },
+  
+  // Optimize fonts to reduce hydration mismatches
+  optimizeFonts: true,
+  
+  // Suppress hydration warnings in development
+  onDemandEntries: {
+    // Keep pages in memory for longer to avoid reloading
+    maxInactiveAge: 25 * 1000,
+    pagesBufferLength: 5,
+  },
+  
+  // Only use static export, basePath and assetPrefix in production
+  ...(isDevelopment 
+    ? {
+        // Development config - no basePath or static export
+      } 
+    : {
+        // Production config for GitHub Pages
+        output: 'export',  // Enable static HTML export
+        trailingSlash: true,  // Important for GitHub Pages to work correctly with routing
+        images: {
+          unoptimized: true,  // Required for static export
+        },
+        basePath: `/${REPO_NAME}`,
+        assetPrefix: `/${REPO_NAME}`,
+      }
+  ),
+};
+
+// Add a custom export script to generate a .nojekyll file
+// This prevents GitHub Pages from ignoring files that begin with an underscore
+if (process.env.NODE_ENV === 'production') {
+  const { execSync } = require('child_process');
+  try {
+    execSync('touch out/.nojekyll');
+    console.log('Created .nojekyll file');
+  } catch (error) {
+    console.error('Error creating .nojekyll file:', error);
+  }
+}
+
+export default nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tantainnovative/ndpr-toolkit",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "description": "Nigerian Data Protection Compliance Toolkit for implementing NDPR and DPA compliant features",
   "scripts": {

package/packages/ndpr-toolkit/README.md

@@ -0,0 +1,467 @@
+# 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 install @tantainnovative/ndpr-toolkit --legacy-peer-deps
+```
+
+Alternatively, you can create a `.npmrc` file in your project root with the following content:
+
+```
+legacy-peer-deps=true
+```
+
+This will make npm ignore peer dependency conflicts during installation.
+
+## Quick Start
+
+### Consent Management
+
+```jsx
+import { ConsentBanner, ConsentManager, ConsentStorage, useConsent } from '@tantainnovative/ndpr-toolkit';
+
+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>
+  );
+}
+
+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>
+  );
+}
+```
+
+### Privacy Policy Generator
+
+```jsx
+import { PolicyGenerator, PolicyPreview, PolicyExporter, usePrivacyPolicy } from '@tantainnovative/ndpr-toolkit';
+
+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>
+  );
+}
+```
+
+## Component Categories
+
+### 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';
+
+// 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' }
+      ]}
+    />
+  );
+}
+
+// 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
+
+MIT © Tanta Innovative

package/packages/ndpr-toolkit/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/packages/ndpr-toolkit/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>;