@tantainnovative/ndpr-toolkit 1.0.0

package/dist/components/consent/ConsentBanner.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { ConsentOption, ConsentSettings } from '../../types/consent';
+export interface ConsentBannerProps {
+    /**
+     * Array of consent options to display
+     */
+    options: ConsentOption[];
+    /**
+     * Callback function called when user saves their consent choices
+     */
+    onSave: (settings: ConsentSettings) => void;
+    /**
+     * Title displayed on the banner
+     * @default "We Value Your Privacy"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the banner
+     * @default "We use cookies and similar technologies to provide our services and enhance your experience."
+     */
+    description?: string;
+    /**
+     * Text for the accept all button
+     * @default "Accept All"
+     */
+    acceptAllButtonText?: string;
+    /**
+     * Text for the reject all button
+     * @default "Reject All"
+     */
+    rejectAllButtonText?: string;
+    /**
+     * Text for the customize button
+     * @default "Customize"
+     */
+    customizeButtonText?: string;
+    /**
+     * Text for the save button
+     * @default "Save Preferences"
+     */
+    saveButtonText?: string;
+    /**
+     * Position of the banner
+     * @default "bottom"
+     */
+    position?: 'top' | 'bottom' | 'center';
+    /**
+     * Version of the consent form
+     * @default "1.0"
+     */
+    version?: string;
+    /**
+     * Whether to show the banner
+     * If not provided, the banner will be shown if no consent has been saved
+     */
+    show?: boolean;
+    /**
+     * Storage key for consent settings
+     * @default "ndpr_consent"
+     */
+    storageKey?: string;
+    /**
+     * Custom CSS class for the banner
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Custom CSS class for the primary button
+     */
+    primaryButtonClassName?: string;
+    /**
+     * Custom CSS class for the secondary button
+     */
+    secondaryButtonClassName?: string;
+}
+export declare const ConsentBanner: React.FC<ConsentBannerProps>;

package/dist/components/consent/ConsentManager.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { ConsentOption, ConsentSettings } from '../../types/consent';
+export interface ConsentManagerProps {
+    /**
+     * Array of consent options to display
+     */
+    options: ConsentOption[];
+    /**
+     * Current consent settings
+     */
+    settings?: ConsentSettings;
+    /**
+     * Callback function called when user saves their consent choices
+     */
+    onSave: (settings: ConsentSettings) => void;
+    /**
+     * Title displayed in the manager
+     * @default "Manage Your Privacy Settings"
+     */
+    title?: string;
+    /**
+     * Description text displayed in the manager
+     * @default "Update your consent preferences at any time. Required cookies cannot be disabled as they are necessary for the website to function."
+     */
+    description?: string;
+    /**
+     * Text for the save button
+     * @default "Save Preferences"
+     */
+    saveButtonText?: string;
+    /**
+     * Text for the reset button
+     * @default "Reset to Defaults"
+     */
+    resetButtonText?: string;
+    /**
+     * Version of the consent form
+     * @default "1.0"
+     */
+    version?: string;
+    /**
+     * Custom CSS class for the manager
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Custom CSS class for the primary button
+     */
+    primaryButtonClassName?: string;
+    /**
+     * Custom CSS class for the secondary button
+     */
+    secondaryButtonClassName?: string;
+    /**
+     * Whether to show a success message after saving
+     * @default true
+     */
+    showSuccessMessage?: boolean;
+    /**
+     * Success message to display after saving
+     * @default "Your preferences have been saved."
+     */
+    successMessage?: string;
+    /**
+     * Duration to show the success message (in milliseconds)
+     * @default 3000
+     */
+    successMessageDuration?: number;
+}
+export declare const ConsentManager: React.FC<ConsentManagerProps>;

package/dist/components/consent/ConsentStorage.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ConsentSettings, ConsentStorageOptions } from '../../types/consent';
+export interface ConsentStorageProps {
+    /**
+     * Current consent settings
+     */
+    settings: ConsentSettings;
+    /**
+     * Storage options for consent settings
+     */
+    storageOptions?: ConsentStorageOptions;
+    /**
+     * Callback function called when settings are loaded from storage
+     */
+    onLoad?: (settings: ConsentSettings | null) => void;
+    /**
+     * Callback function called when settings are saved to storage
+     */
+    onSave?: (settings: ConsentSettings) => void;
+    /**
+     * Whether to automatically save settings to storage
+     * @default true
+     */
+    autoSave?: boolean;
+    /**
+     * Whether to automatically load settings from storage on mount
+     * @default true
+     */
+    autoLoad?: boolean;
+    /**
+     * Children to render
+     * Can be either React nodes or a render prop function that receives storage methods
+     */
+    children?: React.ReactNode | ((props: {
+        loadSettings: () => ConsentSettings | null;
+        saveSettings: (settings: ConsentSettings) => void;
+        clearSettings: () => void;
+        loaded: boolean;
+    }) => React.ReactNode);
+}
+export declare const ConsentStorage: ({ settings, storageOptions, onLoad, onSave, autoSave, autoLoad, children }: ConsentStorageProps) => React.ReactElement | null;

package/dist/components/dpia/DPIAQuestionnaire.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { DPIASection } from '../../types/dpia';
+export interface DPIAQuestionnaireProps {
+    /**
+     * Sections of the DPIA questionnaire
+     */
+    sections: DPIASection[];
+    /**
+     * Current answers to the questionnaire
+     */
+    answers: Record<string, any>;
+    /**
+     * Callback function called when an answer is updated
+     */
+    onAnswerChange: (questionId: string, value: any) => void;
+    /**
+     * Current section index
+     */
+    currentSectionIndex: number;
+    /**
+     * Callback function called when user navigates to the next section
+     */
+    onNextSection?: () => void;
+    /**
+     * Callback function called when user navigates to the previous section
+     */
+    onPrevSection?: () => void;
+    /**
+     * Validation errors for the current section
+     */
+    validationErrors?: Record<string, string>;
+    /**
+     * Whether the questionnaire is in read-only mode
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Custom CSS class for the questionnaire
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Text for the next button
+     * @default "Next"
+     */
+    nextButtonText?: string;
+    /**
+     * Text for the previous button
+     * @default "Previous"
+     */
+    prevButtonText?: string;
+    /**
+     * Text for the submit button (shown on the last section)
+     * @default "Submit"
+     */
+    submitButtonText?: string;
+    /**
+     * Whether to show a progress indicator
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Current progress percentage (0-100)
+     */
+    progress?: number;
+}
+export declare const DPIAQuestionnaire: React.FC<DPIAQuestionnaireProps>;

package/dist/components/dpia/DPIAReport.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DPIAResult, DPIASection } from '../../types/dpia';
+export interface DPIAReportProps {
+    /**
+     * The DPIA result to display
+     */
+    result: DPIAResult;
+    /**
+     * The sections of the DPIA questionnaire
+     */
+    sections: DPIASection[];
+    /**
+     * Whether to show the full report or just a summary
+     * @default true
+     */
+    showFullReport?: boolean;
+    /**
+     * Whether to allow printing the report
+     * @default true
+     */
+    allowPrint?: boolean;
+    /**
+     * Whether to allow exporting the report as PDF
+     * @default true
+     */
+    allowExport?: boolean;
+    /**
+     * Callback function called when the report is exported
+     */
+    onExport?: (format: 'pdf' | 'docx' | 'html') => void;
+    /**
+     * Custom CSS class for the report container
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+}
+export declare const DPIAReport: React.FC<DPIAReportProps>;

package/dist/components/dpia/StepIndicator.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+export interface Step {
+    /**
+     * Unique identifier for the step
+     */
+    id: string;
+    /**
+     * Display label for the step
+     */
+    label: string;
+    /**
+     * Optional description for the step
+     */
+    description?: string;
+    /**
+     * Whether the step is completed
+     */
+    completed: boolean;
+    /**
+     * Whether the step is the current active step
+     */
+    active: boolean;
+    /**
+     * Optional icon for the step
+     */
+    icon?: React.ReactNode;
+}
+export interface StepIndicatorProps {
+    /**
+     * Array of steps to display
+     */
+    steps: Step[];
+    /**
+     * Callback function called when a step is clicked
+     */
+    onStepClick?: (stepId: string) => void;
+    /**
+     * Whether the steps are clickable
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * Orientation of the step indicator
+     * @default "horizontal"
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Custom CSS class for the container
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the active step
+     */
+    activeStepClassName?: string;
+    /**
+     * Custom CSS class for completed steps
+     */
+    completedStepClassName?: string;
+    /**
+     * Custom CSS class for incomplete steps
+     */
+    incompleteStepClassName?: string;
+}
+export declare const StepIndicator: React.FC<StepIndicatorProps>;

package/dist/components/dsr/DSRDashboard.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { DSRRequest, DSRStatus } from '../../types/dsr';
+export interface DSRDashboardProps {
+    /**
+     * List of DSR requests to display
+     */
+    requests: DSRRequest[];
+    /**
+     * Callback function called when a request is selected
+     */
+    onSelectRequest?: (requestId: string) => void;
+    /**
+     * Callback function called when a request status is updated
+     */
+    onUpdateStatus?: (requestId: string, status: DSRStatus) => void;
+    /**
+     * Callback function called when a request is assigned
+     */
+    onAssignRequest?: (requestId: string, assignee: string) => void;
+    /**
+     * Title displayed on the dashboard
+     * @default "Data Subject Request Dashboard"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the dashboard
+     * @default "Track and manage data subject requests in compliance with NDPR requirements."
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the dashboard
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Whether to show the request details
+     * @default true
+     */
+    showRequestDetails?: boolean;
+    /**
+     * Whether to show the request timeline
+     * @default true
+     */
+    showRequestTimeline?: boolean;
+    /**
+     * Whether to show the deadline alerts
+     * @default true
+     */
+    showDeadlineAlerts?: boolean;
+    /**
+     * List of possible assignees
+     */
+    assignees?: string[];
+}
+export declare const DSRDashboard: React.FC<DSRDashboardProps>;

package/dist/components/dsr/DSRRequestForm.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { RequestType } from '../../types/dsr';
+export interface DSRRequestFormProps {
+    /**
+     * Array of request types that can be submitted
+     */
+    requestTypes: RequestType[];
+    /**
+     * Callback function called when form is submitted
+     */
+    onSubmit: (formData: any) => void;
+    /**
+     * Title displayed on the form
+     * @default "Submit a Data Subject Request"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the form
+     * @default "Use this form to exercise your rights under the Nigeria Data Protection Regulation (NDPR)."
+     */
+    description?: string;
+    /**
+     * Text for the submit button
+     * @default "Submit Request"
+     */
+    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 request has been submitted successfully. You will receive a confirmation email shortly."
+     */
+    confirmationMessage?: string;
+    /**
+     * Whether to require identity verification
+     * @default true
+     */
+    requireIdentityVerification?: boolean;
+    /**
+     * Types of identifiers accepted for verification
+     * @default ["email", "account", "customer_id"]
+     */
+    identifierTypes?: Array<{
+        id: string;
+        label: string;
+    }>;
+    /**
+     * Whether to collect additional contact information
+     * @default true
+     */
+    collectAdditionalContact?: boolean;
+    /**
+     * Custom labels for form fields
+     */
+    labels?: {
+        name?: string;
+        email?: string;
+        requestType?: string;
+        description?: string;
+        submit?: string;
+    };
+}
+export declare const DSRRequestForm: React.FC<DSRRequestFormProps>;

package/dist/components/dsr/DSRTracker.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { DSRRequest } from '../../types/dsr';
+export interface DSRTrackerProps {
+    /**
+     * List of DSR requests to track
+     */
+    requests: DSRRequest[];
+    /**
+     * Callback function called when a request is selected
+     */
+    onSelectRequest?: (requestId: string) => void;
+    /**
+     * Title displayed on the tracker
+     * @default "DSR Request Tracker"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the tracker
+     * @default "Track the status and progress of data subject requests."
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the tracker
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Whether to show the summary statistics
+     * @default true
+     */
+    showSummaryStats?: boolean;
+    /**
+     * Whether to show the request type breakdown
+     * @default true
+     */
+    showTypeBreakdown?: boolean;
+    /**
+     * Whether to show the status breakdown
+     * @default true
+     */
+    showStatusBreakdown?: boolean;
+    /**
+     * Whether to show the timeline chart
+     * @default true
+     */
+    showTimelineChart?: boolean;
+    /**
+     * Whether to show the overdue requests
+     * @default true
+     */
+    showOverdueRequests?: boolean;
+}
+export declare const DSRTracker: React.FC<DSRTrackerProps>;

package/dist/components/policy/PolicyExporter.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+export interface PolicyExporterProps {
+    /**
+     * The policy content to export
+     */
+    content: string;
+    /**
+     * The policy title
+     */
+    title?: string;
+    /**
+     * The organization name to include in the exported policy
+     */
+    organizationName?: string;
+    /**
+     * The last updated date to include in the exported policy
+     */
+    lastUpdated?: Date;
+    /**
+     * Callback function called when the export is complete
+     */
+    onExportComplete?: (format: string, url: string) => void;
+    /**
+     * Title displayed on the exporter
+     * @default "Export Privacy Policy"
+     */
+    componentTitle?: string;
+    /**
+     * Description text displayed on the exporter
+     * @default "Export your NDPR-compliant privacy policy in various formats."
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the exporter
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Whether to show the export history
+     * @default true
+     */
+    showExportHistory?: boolean;
+    /**
+     * Whether to include the NDPR compliance notice in the exported policy
+     * @default true
+     */
+    includeComplianceNotice?: boolean;
+    /**
+     * Whether to include the organization logo in the exported policy
+     * @default false
+     */
+    includeLogo?: boolean;
+    /**
+     * URL of the organization logo
+     */
+    logoUrl?: string;
+    /**
+     * Custom CSS styles for the exported policy
+     */
+    customStyles?: string;
+}
+export declare const PolicyExporter: React.FC<PolicyExporterProps>;

package/dist/components/policy/PolicyGenerator.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { PolicySection, PolicyVariable } from '../../types/privacy';
+export interface PolicyGeneratorProps {
+    /**
+     * List of policy sections
+     */
+    sections: PolicySection[];
+    /**
+     * List of policy variables
+     */
+    variables: PolicyVariable[];
+    /**
+     * Callback function called when the policy is generated
+     */
+    onGenerate: (policy: {
+        sections: PolicySection[];
+        variables: PolicyVariable[];
+        content: string;
+    }) => void;
+    /**
+     * Title displayed on the generator
+     * @default "NDPR Privacy Policy Generator"
+     */
+    title?: string;
+    /**
+     * Description text displayed on the generator
+     * @default "Generate an NDPR-compliant privacy policy for your organization."
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the generator
+     */
+    className?: string;
+    /**
+     * Custom CSS class for the buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Text for the generate button
+     * @default "Generate Policy"
+     */
+    generateButtonText?: string;
+    /**
+     * Whether to show a preview of the generated policy
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Whether to allow editing the policy content
+     * @default true
+     */
+    allowEditing?: boolean;
+}
+export declare const PolicyGenerator: React.FC<PolicyGeneratorProps>;