@tantainnovative/ndpr-toolkit 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/README.md +113 -402
  2. package/dist/components/breach-notification/BreachNotificationForm.d.ts +18 -0
  3. package/dist/components/breach-notification/BreachNotificationForm.d.ts.map +1 -0
  4. package/dist/components/consent/ConsentBanner.d.ts +26 -75
  5. package/dist/components/consent/ConsentBanner.d.ts.map +1 -0
  6. package/dist/components/consent/ConsentManager.d.ts +50 -72
  7. package/dist/components/consent/ConsentManager.d.ts.map +1 -0
  8. package/dist/components/consent/ConsentSettings.d.ts +15 -0
  9. package/dist/components/consent/ConsentSettings.d.ts.map +1 -0
  10. package/dist/components/consent/unstyled/UnstyledConsentBanner.d.ts +7 -0
  11. package/dist/components/consent/unstyled/UnstyledConsentBanner.d.ts.map +1 -0
  12. package/dist/components/consent/unstyled/UnstyledConsentSettings.d.ts +7 -0
  13. package/dist/components/consent/unstyled/UnstyledConsentSettings.d.ts.map +1 -0
  14. package/dist/components/consent/unstyled/UnstyledConsentToggle.d.ts +8 -0
  15. package/dist/components/consent/unstyled/UnstyledConsentToggle.d.ts.map +1 -0
  16. package/dist/components/consent/unstyled/index.d.ts +4 -0
  17. package/dist/components/consent/unstyled/index.d.ts.map +1 -0
  18. package/dist/components/data-subject-rights/DataSubjectRequestForm.d.ts +14 -0
  19. package/dist/components/data-subject-rights/DataSubjectRequestForm.d.ts.map +1 -0
  20. package/dist/components/docs/DocLayout.d.ts +9 -0
  21. package/dist/components/docs/DocLayout.d.ts.map +1 -0
  22. package/dist/components/docs/index.d.ts +2 -0
  23. package/dist/components/docs/index.d.ts.map +1 -0
  24. package/dist/components/dpia/DPIAQuestionnaire.d.ts +7 -68
  25. package/dist/components/dpia/DPIAQuestionnaire.d.ts.map +1 -0
  26. package/dist/components/privacy-policy/PolicyGenerator.d.ts +12 -0
  27. package/dist/components/privacy-policy/PolicyGenerator.d.ts.map +1 -0
  28. package/dist/components/privacy-policy/data.d.ts +8 -0
  29. package/dist/components/privacy-policy/data.d.ts.map +1 -0
  30. package/dist/components/privacy-policy/shared/CheckboxField.d.ts +13 -0
  31. package/dist/components/privacy-policy/shared/CheckboxField.d.ts.map +1 -0
  32. package/dist/components/privacy-policy/shared/CheckboxGroup.d.ts +13 -0
  33. package/dist/components/privacy-policy/shared/CheckboxGroup.d.ts.map +1 -0
  34. package/dist/components/privacy-policy/shared/FormField.d.ts +13 -0
  35. package/dist/components/privacy-policy/shared/FormField.d.ts.map +1 -0
  36. package/dist/components/privacy-policy/shared/StepIndicator.d.ts +8 -0
  37. package/dist/components/privacy-policy/shared/StepIndicator.d.ts.map +1 -0
  38. package/dist/components/privacy-policy/steps/CustomSectionsStep.d.ts +15 -0
  39. package/dist/components/privacy-policy/steps/CustomSectionsStep.d.ts.map +1 -0
  40. package/dist/components/privacy-policy/steps/DataCollectionStep.d.ts +20 -0
  41. package/dist/components/privacy-policy/steps/DataCollectionStep.d.ts.map +1 -0
  42. package/dist/components/privacy-policy/steps/DataSharingStep.d.ts +34 -0
  43. package/dist/components/privacy-policy/steps/DataSharingStep.d.ts.map +1 -0
  44. package/dist/components/privacy-policy/steps/OrganizationInfoStep.d.ts +17 -0
  45. package/dist/components/privacy-policy/steps/OrganizationInfoStep.d.ts.map +1 -0
  46. package/dist/components/privacy-policy/steps/PolicyPreviewStep.d.ts +30 -0
  47. package/dist/components/privacy-policy/steps/PolicyPreviewStep.d.ts.map +1 -0
  48. package/dist/components/ui/Badge.d.ts +10 -0
  49. package/dist/components/ui/Badge.d.ts.map +1 -0
  50. package/dist/components/ui/Button.d.ts +11 -0
  51. package/dist/components/ui/Button.d.ts.map +1 -0
  52. package/dist/components/ui/Card.d.ts +10 -0
  53. package/dist/components/ui/Card.d.ts.map +1 -0
  54. package/dist/components/ui/Checkbox.d.ts +8 -0
  55. package/dist/components/ui/Checkbox.d.ts.map +1 -0
  56. package/dist/components/ui/FormField.d.ts +11 -0
  57. package/dist/components/ui/FormField.d.ts.map +1 -0
  58. package/dist/components/ui/Input.d.ts +6 -0
  59. package/dist/components/ui/Input.d.ts.map +1 -0
  60. package/dist/components/ui/Select.d.ts +6 -0
  61. package/dist/components/ui/Select.d.ts.map +1 -0
  62. package/dist/components/ui/TextArea.d.ts +6 -0
  63. package/dist/components/ui/TextArea.d.ts.map +1 -0
  64. package/dist/components/ui/dialog.d.ts +18 -0
  65. package/dist/components/ui/dialog.d.ts.map +1 -0
  66. package/dist/components/ui/label.d.ts +5 -0
  67. package/dist/components/ui/label.d.ts.map +1 -0
  68. package/dist/components/ui/switch.d.ts +5 -0
  69. package/dist/components/ui/switch.d.ts.map +1 -0
  70. package/dist/components/ui/tabs.d.ts +8 -0
  71. package/dist/components/ui/tabs.d.ts.map +1 -0
  72. package/dist/contexts/ConsentContext.d.ts +35 -0
  73. package/dist/contexts/ConsentContext.d.ts.map +1 -0
  74. package/dist/contexts/GenericConsentContext.d.ts +11 -0
  75. package/dist/contexts/GenericConsentContext.d.ts.map +1 -0
  76. package/dist/hooks/useConsent.d.ts +12 -63
  77. package/dist/hooks/useConsent.d.ts.map +1 -0
  78. package/dist/hooks/useConsentActions.d.ts +12 -0
  79. package/dist/hooks/useConsentActions.d.ts.map +1 -0
  80. package/dist/hooks/useConsentManager.d.ts +14 -0
  81. package/dist/hooks/useConsentManager.d.ts.map +1 -0
  82. package/dist/hooks/useConsentState.d.ts +10 -0
  83. package/dist/hooks/useConsentState.d.ts.map +1 -0
  84. package/dist/index.d.mts +256 -0
  85. package/dist/index.d.ts +23 -30
  86. package/dist/index.d.ts.map +1 -0
  87. package/dist/index.js +2 -2
  88. package/dist/index.js.map +1 -1
  89. package/dist/index.mjs +2 -0
  90. package/dist/index.mjs.map +1 -0
  91. package/dist/lib/consentService.d.ts +11 -0
  92. package/dist/lib/consentService.d.ts.map +1 -0
  93. package/dist/lib/dpiaQuestions.d.ts +3 -0
  94. package/dist/lib/dpiaQuestions.d.ts.map +1 -0
  95. package/dist/lib/requestService.d.ts +10 -0
  96. package/dist/lib/requestService.d.ts.map +1 -0
  97. package/dist/lib/utils.d.ts +3 -0
  98. package/dist/lib/utils.d.ts.map +1 -0
  99. package/dist/styles.css +38 -0
  100. package/dist/types/consent.d.ts +47 -85
  101. package/dist/types/consent.d.ts.map +1 -0
  102. package/dist/types/index.d.ts +86 -30
  103. package/dist/types/index.d.ts.map +1 -0
  104. package/dist/unstyled.d.mts +22 -0
  105. package/dist/unstyled.d.ts +2 -0
  106. package/dist/unstyled.d.ts.map +1 -0
  107. package/dist/unstyled.js +2 -0
  108. package/dist/unstyled.js.map +1 -0
  109. package/dist/unstyled.mjs +2 -0
  110. package/dist/unstyled.mjs.map +1 -0
  111. package/package.json +97 -51
  112. package/dist/components/breach/BreachNotificationManager.d.ts +0 -62
  113. package/dist/components/breach/BreachReportForm.d.ts +0 -66
  114. package/dist/components/breach/BreachRiskAssessment.d.ts +0 -50
  115. package/dist/components/breach/RegulatoryReportGenerator.d.ts +0 -94
  116. package/dist/components/consent/ConsentStorage.d.ts +0 -41
  117. package/dist/components/dpia/DPIAReport.d.ts +0 -40
  118. package/dist/components/dpia/StepIndicator.d.ts +0 -64
  119. package/dist/components/dsr/DSRDashboard.d.ts +0 -58
  120. package/dist/components/dsr/DSRRequestForm.d.ts +0 -74
  121. package/dist/components/dsr/DSRTracker.d.ts +0 -56
  122. package/dist/components/policy/PolicyExporter.d.ts +0 -65
  123. package/dist/components/policy/PolicyGenerator.d.ts +0 -54
  124. package/dist/components/policy/PolicyPreview.d.ts +0 -71
  125. package/dist/hooks/useBreach.d.ts +0 -97
  126. package/dist/hooks/useDPIA.d.ts +0 -92
  127. package/dist/hooks/useDSR.d.ts +0 -72
  128. package/dist/hooks/usePrivacyPolicy.d.ts +0 -87
  129. package/dist/index.esm.js +0 -2
  130. package/dist/index.esm.js.map +0 -1
  131. package/dist/setupTests.d.ts +0 -2
  132. package/dist/types/breach.d.ts +0 -239
  133. package/dist/types/dpia.d.ts +0 -196
  134. package/dist/types/dsr.d.ts +0 -162
  135. package/dist/types/privacy.d.ts +0 -204
  136. package/dist/utils/breach.d.ts +0 -14
  137. package/dist/utils/consent.d.ts +0 -10
  138. package/dist/utils/dpia.d.ts +0 -12
  139. package/dist/utils/dsr.d.ts +0 -11
  140. package/dist/utils/privacy.d.ts +0 -12
package/README.md CHANGED
@@ -1,467 +1,178 @@
1
- # NDPR Toolkit
2
-
3
- <div align="center">
4
-
5
- ![NDPR Toolkit Logo](https://via.placeholder.com/200x200?text=NDPR+Toolkit)
6
-
7
- 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).
1
+ # Nigerian Data Protection Compliance Toolkit (NDPR-Toolkit)
8
2
 
9
3
  [![npm version](https://img.shields.io/npm/v/@tantainnovative/ndpr-toolkit.svg)](https://www.npmjs.com/package/@tantainnovative/ndpr-toolkit)
10
- [![license](https://img.shields.io/npm/l/@tantainnovative/ndpr-toolkit.svg)](https://github.com/tantainnovative/ndpr-toolkit/blob/main/LICENSE)
11
- [![TypeScript](https://img.shields.io/badge/TypeScript-4.9%2B-blue)](https://www.typescriptlang.org/)
12
- [![React](https://img.shields.io/badge/React-18.0%2B-blue)](https://reactjs.org/)
13
-
14
- </div>
15
-
16
- ## Overview
17
-
18
- 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.
19
-
20
- > **NDPR Toolkit is actively maintained and regularly updated to ensure compliance with the latest Nigerian data protection regulations.**
21
-
22
- ## Key Features
23
-
24
- ### Privacy Policy Management
25
-
26
- - **PolicyGenerator**: Create customizable, NDPR-compliant privacy policies with an intuitive form interface
27
- - **PolicyPreview**: Display generated policies with professional formatting and section navigation
28
- - **PolicyExporter**: Export policies in multiple formats (PDF, HTML, Markdown) with compliance notices
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
29
5
 
30
- ### Consent Management
31
-
32
- - **ConsentBanner**: Implement cookie consent banners with customizable appearance and behavior
33
- - **ConsentManager**: Track and manage user consent preferences across your application
34
- - **ConsentStorage**: Securely store and retrieve consent records with built-in persistence
35
-
36
- ### Data Subject Rights (DSR)
37
-
38
- - **DSRRequestForm**: Collect and validate data subject requests with comprehensive form validation
39
- - **DSRTracker**: Monitor the status and progress of data subject requests
40
- - **DSRDashboard**: Visualize and manage all data subject requests in one place
41
-
42
- ### Data Protection Impact Assessment (DPIA)
43
-
44
- - **DPIAQuestionnaire**: Guide users through the DPIA process with step-by-step questionnaires
45
- - **DPIAReport**: Generate comprehensive DPIA reports based on questionnaire responses
46
- - **StepIndicator**: Track progress through multi-step DPIA processes
47
-
48
- ### Breach Notification
49
-
50
- - **BreachReportForm**: Collect essential information about data breaches
51
- - **BreachRiskAssessment**: Evaluate the risk level of reported breaches
52
- - **RegulatoryReportGenerator**: Create NDPR-compliant breach notification reports
53
- - **BreachNotificationManager**: Manage the entire breach notification workflow
54
-
55
- ### Enterprise Features
56
-
57
- - **Advanced Conditional Logic**: Support for complex conditional blocks in policy templates
58
- - **Professional Formatting**: Enterprise-ready formatting for all exported documents
59
- - **Comprehensive Type System**: Full TypeScript support with detailed interfaces and type definitions
60
- - **Modular Architecture**: Use only the components you need with tree-shakable imports
61
- - **Accessibility**: WCAG 2.1 AA compliant components for inclusive user experiences
6
+ 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.
62
7
 
63
8
  ## Installation
64
9
 
65
10
  ```bash
66
- # Using npm
67
11
  npm install @tantainnovative/ndpr-toolkit
68
-
69
- # Using yarn
12
+ # or
70
13
  yarn add @tantainnovative/ndpr-toolkit
71
-
72
- # Using pnpm
14
+ # or
73
15
  pnpm add @tantainnovative/ndpr-toolkit
74
16
  ```
75
17
 
76
- ### React 19 Compatibility
18
+ ## Project Vision
77
19
 
78
- 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:
20
+ 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.
79
21
 
80
- ```bash
81
- npm install @tantainnovative/ndpr-toolkit --legacy-peer-deps
82
- ```
22
+ ## Key Components
83
23
 
84
- Alternatively, you can create a `.npmrc` file in your project root with the following content:
85
-
86
- ```
87
- legacy-peer-deps=true
88
- ```
24
+ ### 1. Consent Management System
89
25
 
90
- This will make npm ignore peer dependency conflicts during installation.
26
+ **New in v1.0.7:** Complete flexibility with headless mode, custom UI support, and event-driven architecture.
91
27
 
92
- ## Quick Start
28
+ #### Features:
29
+ - **Flexible Implementation**: Use pre-built UI, headless mode, or hybrid approach
30
+ - **Full Customization**: Override any component or behavior
31
+ - **Event-Driven**: Subscribe to consent changes with event listeners
32
+ - **TypeScript Support**: Fully typed with generic support for custom categories
33
+ - **Granular Consent**: Analytics, marketing, functional, and custom categories
34
+ - **Audit Trail**: Time-stamped consent history tracking
93
35
 
94
- ### Consent Management
36
+ #### Quick Start:
95
37
 
96
- ```jsx
97
- import { ConsentBanner, ConsentManager, ConsentStorage, useConsent } from '@tantainnovative/ndpr-toolkit';
38
+ ```tsx
39
+ import { ConsentManager } from '@tantainnovative/ndpr-toolkit';
98
40
 
99
- function MyApp() {
41
+ // Basic usage with pre-built UI
42
+ function App() {
100
43
  return (
101
- <ConsentManager
102
- options={[
103
- {
104
- id: 'necessary',
105
- label: 'Necessary Cookies',
106
- description: 'Essential cookies for the website to function.',
107
- required: true
108
- },
109
- {
110
- id: 'analytics',
111
- label: 'Analytics Cookies',
112
- description: 'Cookies that help us understand how you use our website.',
113
- required: false
114
- }
115
- ]}
116
- storageKey="my-app-consent"
117
- autoLoad={true}
118
- autoSave={true}
119
- >
120
- <AppContent />
121
- <ConsentBanner
122
- position="bottom"
123
- privacyPolicyUrl="/privacy-policy"
124
- showPreferences={true}
125
- onSave={(consents) => console.log('Consent saved:', consents)}
126
- />
44
+ <ConsentManager>
45
+ {/* Your app content */}
127
46
  </ConsentManager>
128
47
  );
129
48
  }
130
49
 
131
- function AppContent() {
132
- // Use the useConsent hook to manage consent state
133
- const { consents, hasConsented, updateConsent } = useConsent();
134
-
135
- // Check if user has given consent for analytics
136
- if (hasConsented('analytics')) {
137
- // Initialize analytics
138
- }
139
-
50
+ // Headless mode with custom UI
51
+ function HeadlessApp() {
140
52
  return (
141
- <div>
142
- {/* Your app content */}
143
- </div>
53
+ <ConsentManager headless>
54
+ <YourCustomBanner />
55
+ <YourCustomSettings />
56
+ </ConsentManager>
144
57
  );
145
58
  }
146
59
  ```
147
60
 
148
- ### Privacy Policy Generator
61
+ [See full consent management documentation](./docs/CONSENT_MANAGEMENT.md)
62
+
63
+ ### 2. Data Subject Rights Portal
64
+ - Pre-built UI components for handling:
65
+ - Right to access personal data
66
+ - Right to rectification
67
+ - Right to erasure ("right to be forgotten")
68
+ - Right to restrict processing
69
+ - Right to data portability
70
+ - Dashboard for data controllers to manage requests
71
+ - Local storage requestService to track and update requests in demos
72
+
73
+ ### 3. Privacy Policy Generator
74
+ - Interactive wizard to create NDPR-compliant privacy policies
75
+ - Template system with customizable sections
76
+ - Auto-update notifications when regulatory requirements change
77
+ - Version history tracking
78
+
79
+ ### 4. Data Protection Impact Assessment (DPIA) Tool
80
+ - Questionnaire-based tool to help organizations assess data processing risks
81
+ - Risk scoring matrix
82
+ - Mitigation recommendation engine
83
+ - Exportable reports for compliance documentation
84
+
85
+ ### 5. Breach Notification Module
86
+ - Templates for mandatory breach notifications
87
+ - Workflow for documenting breach details
88
+ - Timeline tracking to ensure 72-hour notification compliance
89
+ - Notification delivery to authorities via API (if available)
90
+ ### 6. Data Subject Request Service
91
+ - Lightweight requestService storing requests in browser localStorage for demos
92
+ - Helper methods to update request status and retrieve history
149
93
 
150
- ```jsx
151
- import { PolicyGenerator, PolicyPreview, PolicyExporter, usePrivacyPolicy } from '@tantainnovative/ndpr-toolkit';
94
+ ## Quick Start
152
95
 
153
- function PrivacyPolicyPage() {
154
- const { policy, updateVariableValue, generatePolicy } = usePrivacyPolicy();
155
- const [generatedPolicy, setGeneratedPolicy] = useState(null);
156
-
157
- // Define your variables
158
- const variables = {
159
- organizationName: 'Acme Corporation',
160
- websiteUrl: 'https://acme.com',
161
- contactEmail: 'privacy@acme.com',
162
- lastUpdated: new Date().toLocaleDateString()
163
- };
164
-
165
- return (
166
- <div>
167
- {!generatedPolicy ? (
168
- <PolicyGenerator
169
- templates={[
170
- {
171
- id: 'standard',
172
- name: 'Standard Privacy Policy',
173
- description: 'A comprehensive privacy policy suitable for most websites and applications.',
174
- sections: [
175
- {
176
- id: 'introduction',
177
- title: 'Introduction',
178
- template: 'This Privacy Policy explains how {{organizationName}} collects, uses, and protects your personal data when you visit {{websiteUrl}}.',
179
- required: true,
180
- included: true
181
- },
182
- // More sections...
183
- ]
184
- }
185
- ]}
186
- variables={variables}
187
- onComplete={(data) => {
188
- // Generate policy with variables
189
- const result = generatePolicyText(data.sections, variables);
190
- setGeneratedPolicy({
191
- title: `Privacy Policy for ${variables.organizationName}`,
192
- content: result.fullText,
193
- lastUpdated: new Date()
194
- });
195
- }}
196
- />
197
- ) : (
198
- <>
199
- <PolicyPreview
200
- policy={generatedPolicy}
201
- variables={variables}
202
- onVariableChange={(newVariables) => {
203
- // Update variables and regenerate policy
204
- }}
205
- />
206
-
207
- <PolicyExporter
208
- policy={generatedPolicy}
209
- formats={['html', 'pdf', 'markdown']}
210
- filename="privacy-policy"
211
- />
212
- </>
213
- )}
214
- </div>
215
- );
216
- }
217
- ```
96
+ ### Using the Toolkit in Your Project
218
97
 
219
- ## Component Categories
220
-
221
- ### Consent Management
222
- - `ConsentBanner`: Cookie consent banner with customizable options
223
- - `ConsentManager`: Component for managing consent preferences
224
- - `ConsentStorage`: Storage mechanism for consent settings with support for localStorage, sessionStorage, and cookies
225
- - `useConsent`: Hook for managing consent state
226
-
227
- ### Data Subject Rights
228
- - `DSRRequestForm`: Form for submitting data subject rights requests
229
- - `DSRDashboard`: Admin dashboard for managing DSR requests
230
- - `DSRTracker`: Component for tracking the status of DSR requests
231
- - `useDSR`: Hook for managing DSR state
232
- - Types: `DSRType`, `DSRStatus`, `DSRRequest` for type-safe implementation
233
-
234
- ### DPIA (Data Protection Impact Assessment)
235
- - `DPIAQuestionnaire`: Interactive questionnaire for conducting DPIAs
236
- - `DPIAReport`: Component for generating DPIA reports
237
- - `StepIndicator`: Progress indicator for multi-step processes
238
- - `useDPIA`: Hook for managing DPIA state
239
- - Types: `DPIAQuestion`, `DPIASection`, `DPIARisk`, `DPIAResult` for structured assessments
240
-
241
- ### Breach Notification
242
- - `BreachReportForm`: Form for reporting data breaches
243
- - `BreachRiskAssessment`: Tool for assessing breach risk and severity
244
- - `BreachNotificationManager`: Component for managing breach notifications
245
- - `RegulatoryReportGenerator`: Tool for generating regulatory reports for NITDA
246
- - `useBreach`: Hook for managing breach notification state
247
- - Types: `BreachReport`, `RiskAssessment`, `NotificationRequirement` for compliance with 72-hour notification requirements
248
-
249
- ### Privacy Policy
250
- - `PolicyGenerator`: Component for generating privacy policies
251
- - `PolicyPreview`: Preview component for privacy policies
252
- - `PolicyExporter`: Tool for exporting privacy policies to different formats
253
- - `generatePolicyText`: Utility for creating dynamic policies with variable support
254
- - `usePrivacyPolicy`: Hook for managing privacy policy state
255
-
256
- ## Implementation Guides
257
-
258
- ### Setting Up Consent Management
259
-
260
- ```jsx
261
- // 1. Wrap your application with ConsentManager
262
- import { ConsentManager } from 'ndpr-toolkit';
98
+ ```tsx
99
+ import { ConsentManager, useConsent } from '@tantainnovative/ndpr-toolkit';
263
100
 
264
101
  function App() {
265
102
  return (
266
- <ConsentManager
267
- options={[
268
- { id: 'necessary', label: 'Necessary', description: '...', required: true },
269
- { id: 'analytics', label: 'Analytics', description: '...', required: false },
270
- { id: 'marketing', label: 'Marketing', description: '...', required: false }
271
- ]}
272
- storageKey="my-app-consent"
273
- autoLoad={true}
274
- autoSave={true}
275
- >
103
+ <ConsentManager onConsentChange={(consent) => console.log('Consent updated:', consent)}>
276
104
  <YourApp />
277
105
  </ConsentManager>
278
106
  );
279
107
  }
280
108
 
281
- // 2. Add the ConsentBanner to your layout
282
- import { ConsentBanner } from 'ndpr-toolkit';
283
-
284
- function Layout({ children }) {
109
+ function YourApp() {
110
+ const { consentState, openSettings } = useConsent();
111
+
285
112
  return (
286
- <>
287
- {children}
288
- <ConsentBanner
289
- position="bottom"
290
- privacyPolicyUrl="/privacy-policy"
291
- showPreferences={true}
292
- />
293
- </>
113
+ <div>
114
+ {consentState.analytics && <AnalyticsScript />}
115
+ <button onClick={openSettings}>Manage Cookies</button>
116
+ </div>
294
117
  );
295
118
  }
296
-
297
- // 3. Use the consent values in your components
298
- import { useConsent } from 'ndpr-toolkit';
299
-
300
- function AnalyticsComponent() {
301
- const { hasConsented } = useConsent();
302
-
303
- useEffect(() => {
304
- if (hasConsented('analytics')) {
305
- // Initialize analytics
306
- }
307
- }, [hasConsented]);
308
-
309
- return null;
310
- }
311
119
  ```
312
120
 
313
- ### Implementing a Data Subject Rights Portal
121
+ ### Development
314
122
 
315
- ```jsx
316
- import { DSRRequestForm, DSRTracker, DSRDashboard, useDSR } from '@tantainnovative/ndpr-toolkit';
123
+ To contribute or run the demo locally:
317
124
 
318
- // 1. Create a form for data subjects to submit requests
319
- function DSRPortal() {
320
- const { submitRequest } = useDSR();
321
-
322
- const handleSubmit = (formData) => {
323
- const request = submitRequest({
324
- type: formData.type,
325
- subject: {
326
- name: formData.name,
327
- email: formData.email,
328
- phone: formData.phone
329
- },
330
- details: formData.details
331
- });
332
-
333
- // Show confirmation with tracking ID
334
- alert(`Your request has been submitted. Your tracking ID is: ${request.id}`);
335
- };
336
-
337
- return (
338
- <DSRRequestForm
339
- onSubmit={handleSubmit}
340
- requestTypes={[
341
- { id: 'access', label: 'Access my data' },
342
- { id: 'rectification', label: 'Correct my data' },
343
- { id: 'erasure', label: 'Delete my data' },
344
- { id: 'restriction', label: 'Restrict processing of my data' },
345
- { id: 'portability', label: 'Data portability' },
346
- { id: 'objection', label: 'Object to processing' }
347
- ]}
348
- />
349
- );
350
- }
125
+ ```bash
126
+ # Clone the repository
127
+ git clone https://github.com/tantainnovative/ndpr-toolkit.git
128
+ cd ndpr-toolkit
351
129
 
352
- // 2. Create an admin dashboard for managing requests
353
- import { DSRDashboard } from '@tantainnovative/ndpr-toolkit';
130
+ # Install dependencies
131
+ pnpm install
354
132
 
355
- function AdminDashboard() {
356
- const { requests, updateRequest, deleteRequest } = useDSR();
357
-
358
- return (
359
- <DSRDashboard
360
- requests={requests}
361
- onUpdateRequest={updateRequest}
362
- onDeleteRequest={deleteRequest}
363
- />
364
- );
365
- }
133
+ # Run development server
134
+ pnpm dev
366
135
  ```
367
136
 
368
- ### Setting Up a Breach Notification System
137
+ Open [http://localhost:3000](http://localhost:3000) to see the demo.
369
138
 
370
- ```jsx
371
- import { BreachReportForm, BreachRiskAssessment, RegulatoryReportGenerator, useBreach } from '@tantainnovative/ndpr-toolkit';
139
+ ## Deployment
372
140
 
373
- // 1. Create a form for reporting breaches
374
- function BreachReporting() {
375
- const { submitBreachReport } = useBreach();
376
-
377
- const handleSubmit = (formData) => {
378
- const report = submitBreachReport({
379
- title: formData.title,
380
- description: formData.description,
381
- category: formData.category,
382
- discoveredAt: Date.now(),
383
- reporter: {
384
- name: formData.reporterName,
385
- email: formData.reporterEmail,
386
- department: formData.department
387
- },
388
- affectedSystems: formData.systems,
389
- dataTypes: formData.dataTypes,
390
- status: 'ongoing'
391
- });
392
-
393
- // Redirect to risk assessment
394
- navigate(`/breach/${report.id}/assess`);
395
- };
396
-
397
- return (
398
- <BreachReportForm
399
- onSubmit={handleSubmit}
400
- categories={[
401
- { id: 'unauthorized-access', label: 'Unauthorized Access' },
402
- { id: 'data-loss', label: 'Data Loss' },
403
- { id: 'system-compromise', label: 'System Compromise' }
404
- ]}
405
- />
406
- );
407
- }
141
+ ### GitHub Pages
408
142
 
409
- // 2. Create a risk assessment component
410
- function RiskAssessment({ breachId }) {
411
- const { performRiskAssessment, determineNotificationRequirements } = useBreach();
412
-
413
- const handleAssessment = (assessmentData) => {
414
- const assessment = performRiskAssessment({
415
- breachId,
416
- assessor: {
417
- name: 'Jane Smith',
418
- role: 'Data Protection Officer',
419
- email: 'jane@example.com'
420
- },
421
- ...assessmentData
422
- });
423
-
424
- const requirements = determineNotificationRequirements({
425
- breachId,
426
- riskAssessmentId: assessment.id
427
- });
428
-
429
- // Show notification requirements
430
- if (requirements.nitdaNotificationRequired) {
431
- // Deadline is 72 hours from discovery
432
- const deadline = new Date(requirements.nitdaNotificationDeadline);
433
- alert(`NITDA notification required by ${deadline.toLocaleString()}`);
434
- }
435
- };
436
-
437
- return (
438
- <BreachRiskAssessment
439
- breachId={breachId}
440
- onComplete={handleAssessment}
441
- />
442
- );
443
- }
444
- ```
143
+ 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:
445
144
 
446
- ## Documentation
145
+ 1. The GitHub Actions workflow will build the project
146
+ 2. The built files will be deployed to GitHub Pages
147
+ 3. Your site will be available at `https://[your-username].github.io/ndpr-toolkit/`
447
148
 
448
- For detailed documentation, visit [https://ndpr-toolkit.tantainnovative.com/docs](https://ndpr-toolkit.tantainnovative.com/docs)
149
+ To manually deploy to GitHub Pages:
449
150
 
450
- ### API Reference
151
+ ```bash
152
+ # Build the project
153
+ npm run build
451
154
 
452
- Detailed API documentation is available for all components:
155
+ # Deploy to GitHub Pages (if you have gh-pages installed)
156
+ npm run deploy
157
+ ```
158
+
159
+ #### Configuration
453
160
 
454
- - [Consent Management](https://ndpr-toolkit.tantainnovative.com/docs/components/consent-management)
455
- - [Data Subject Rights](https://ndpr-toolkit.tantainnovative.com/docs/components/data-subject-rights)
456
- - [DPIA Questionnaire](https://ndpr-toolkit.tantainnovative.com/docs/components/dpia-questionnaire)
457
- - [Breach Notification](https://ndpr-toolkit.tantainnovative.com/docs/components/breach-notification)
458
- - [Privacy Policy Generator](https://ndpr-toolkit.tantainnovative.com/docs/components/privacy-policy-generator)
459
- - [React Hooks](https://ndpr-toolkit.tantainnovative.com/docs/components/hooks)
161
+ The GitHub Pages deployment is configured in the following files:
162
+ - `next.config.ts` - Contains the Next.js configuration for static export
163
+ - `.github/workflows/deploy.yml` - Contains the GitHub Actions workflow for automated deployment
460
164
 
461
- ## Contributing
165
+ ## Technical Stack
462
166
 
463
- Contributions are welcome! Please feel free to submit a Pull Request.
167
+ - Next.js with App Router
168
+ - TypeScript
169
+ - Tailwind CSS
170
+ - React
464
171
 
465
172
  ## License
466
173
 
467
- MIT © Tanta Innovative
174
+ MIT License
175
+
176
+ ## Developed by
177
+
178
+ Tanta Innovative - Positioning as a thought leader in regulatory tech solutions for Nigeria
@@ -0,0 +1,18 @@
1
+ import { BreachSeverity } from '@/types';
2
+ interface BreachNotificationFormProps {
3
+ onSubmit: (data: {
4
+ title: string;
5
+ description: string;
6
+ discoveryDate: string;
7
+ affectedDataSubjects: number;
8
+ dataCategories: string[];
9
+ severity: BreachSeverity;
10
+ mitigationSteps: string[];
11
+ reportedToAuthorities: boolean;
12
+ reportedToDataSubjects: boolean;
13
+ }) => void;
14
+ className?: string;
15
+ }
16
+ export default function BreachNotificationForm({ onSubmit, className, }: BreachNotificationFormProps): import("react/jsx-runtime").JSX.Element;
17
+ export {};
18
+ //# sourceMappingURL=BreachNotificationForm.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BreachNotificationForm.d.ts","sourceRoot":"","sources":["../../../src/components/breach-notification/BreachNotificationForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAOzC,UAAU,2BAA2B;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,aAAa,EAAE,MAAM,CAAC;QACtB,oBAAoB,EAAE,MAAM,CAAC;QAC7B,cAAc,EAAE,MAAM,EAAE,CAAC;QACzB,QAAQ,EAAE,cAAc,CAAC;QACzB,eAAe,EAAE,MAAM,EAAE,CAAC;QAC1B,qBAAqB,EAAE,OAAO,CAAC;QAC/B,sBAAsB,EAAE,OAAO,CAAC;KACjC,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,QAAQ,EACR,SAAc,GACf,EAAE,2BAA2B,2CAkc7B"}