@tantainnovative/ndpr-toolkit 1.0.0

package/README.md

@@ -0,0 +1,412 @@
+# NDPR Toolkit
+
+A comprehensive toolkit for implementing NDPR-compliant features in web applications, aligned with the Nigerian Data Protection Regulation (NDPR) and Data Protection Act (DPA).
+
+## Overview
+
+The NDPR Toolkit provides a set of React components, hooks, and utilities to help Nigerian businesses implement NDPR-compliant features in their web applications with minimal development effort. This toolkit is designed to be flexible, customizable, and easy to integrate into existing applications.
+
+[![npm version](https://img.shields.io/npm/v/ndpr-toolkit.svg)](https://www.npmjs.com/package/ndpr-toolkit)
+[![license](https://img.shields.io/npm/l/ndpr-toolkit.svg)](https://github.com/tantainnovative/ndpr-toolkit/blob/main/LICENSE)
+
+> **NDPR Toolkit is actively maintained and regularly updated to ensure compliance with the latest Nigerian data protection regulations.**
+
+## Features
+
+- **Consent Management**: Components for collecting, storing, and managing user consent in compliance with NDPR requirements
+- **Data Subject Rights Portal**: Complete system for handling data subject access requests and other rights
+- **DPIA Questionnaire**: Interactive questionnaire for conducting Data Protection Impact Assessments
+- **Breach Notification System**: Comprehensive tools for managing, assessing, and reporting data breaches within required timeframes
+- **Privacy Policy Generator**: Customizable tool for creating NDPR-compliant privacy policies with variable support
+
+### 🆕 Latest Features
+
+- **Variable Support in Privacy Policies**: Create dynamic privacy policies with variable placeholders that can be easily updated when your organization information changes
+- **Enhanced DSR Types**: Improved type definitions for Data Subject Requests with standardized enums for request types and statuses
+- **ConsentStorage Component**: A flexible component for handling the storage and retrieval of consent settings with support for multiple storage mechanisms
+- **Comprehensive Documentation**: Detailed API references for all components and utilities
+
+## Installation
+
+```bash
+npm install ndpr-toolkit
+# or
+yarn add ndpr-toolkit
+```
+
+## Quick Start
+
+### Consent Management
+
+```jsx
+import { ConsentBanner, ConsentManager, ConsentStorage, useConsent } from '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 '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, useDSR } from '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 '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, useBreach } from '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/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>;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { BreachReport, RiskAssessment } from '../../types/breach';
+export interface BreachRiskAssessmentProps {
+    /**
+     * The breach data to assess
+     */
+    breachData: BreachReport;
+    /**
+     * Initial assessment data (if editing an existing assessment)
+     */
+    initialAssessment?: Partial<RiskAssessment>;
+    /**
+     * Callback function called when assessment is completed
+     */
+    onComplete: (assessment: RiskAssessment) => void;
+    /**
+     * Title displayed on the assessment form
+     * @default "Breach Risk Assessment"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the assessment form
+     * @default "Assess the risk level of this data breach to determine notification requirements."
+     */
+    description?: string;
+    /**
+     * Text for the submit button
+     * @default "Complete Assessment"
+     */
+    submitButtonText?: string;
+    /**
+     * Custom CSS class for the form
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the submit button
+     */
+    buttonClassName?: string;
+    /**
+     * Whether to show the breach summary
+     * @default true
+     */
+    showBreachSummary?: boolean;
+    /**
+     * Whether to show notification requirements after assessment
+     * @default true
+     */
+    showNotificationRequirements?: boolean;
+}
+export declare const BreachRiskAssessment: React.FC<BreachRiskAssessmentProps>;

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { BreachReport, RiskAssessment, RegulatoryNotification } from '../../types/breach';
+export interface OrganizationInfo {
+    /**
+     * Name of the organization
+     */
+    name: string;
+    /**
+     * Registration number or business ID
+     */
+    registrationNumber?: string;
+    /**
+     * Physical address of the organization
+     */
+    address: string;
+    /**
+     * Website URL
+     */
+    website?: string;
+    /**
+     * Name of the Data Protection Officer
+     */
+    dpoName: string;
+    /**
+     * Email of the Data Protection Officer
+     */
+    dpoEmail: string;
+    /**
+     * Phone number of the Data Protection Officer
+     */
+    dpoPhone?: string;
+}
+export interface RegulatoryReportGeneratorProps {
+    /**
+     * The breach data to include in the report
+     */
+    breachData: BreachReport;
+    /**
+     * The risk assessment data
+     */
+    assessmentData?: RiskAssessment;
+    /**
+     * Organization information to include in the report
+     */
+    organizationInfo: OrganizationInfo;
+    /**
+     * Callback function called when the report is generated
+     */
+    onGenerate: (report: RegulatoryNotification) => void;
+    /**
+     * Title displayed on the generator form
+     * @default "Generate NITDA Notification Report"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the generator form
+     * @default "Generate a report for submission to NITDA in compliance with the NDPR breach notification requirements."
+     */
+    description?: string;
+    /**
+     * Text for the generate button
+     * @default "Generate Report"
+     */
+    generateButtonText?: string;
+    /**
+     * Custom CSS class for the form
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Whether to show a preview of the generated report
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Whether to allow editing the report content
+     * @default true
+     */
+    allowEditing?: boolean;
+    /**
+     * Whether to allow downloading the report
+     * @default true
+     */
+    allowDownload?: boolean;
+    /**
+     * Format for downloading the report
+     * @default "pdf"
+     */
+    downloadFormat?: 'pdf' | 'docx' | 'html';
+}
+export declare const RegulatoryReportGenerator: React.FC<RegulatoryReportGeneratorProps>;