@tantainnovative/ndpr-toolkit 1.0.3 → 1.0.5

package/src/components/dpia/DPIAQuestionnaire.tsx

@@ -1,13 +1,13 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { RiskAssessmentQuestion } from '@/types';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { TextArea } from '@/components/ui/TextArea';
-import { FormField } from '@/components/ui/FormField';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
-import { Badge } from '@/components/ui/Badge';
+import { useState, useEffect } from "react";
+import { RiskAssessmentQuestion } from "@/types";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { TextArea } from "@/components/ui/TextArea";
+import { FormField } from "@/components/ui/FormField";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
+import { Badge } from "@/components/ui/Badge";
 
 interface DPIAQuestionnaireProps {
   questions: RiskAssessmentQuestion[];
@@ -18,12 +18,14 @@ interface DPIAQuestionnaireProps {
 export default function DPIAQuestionnaire({
   questions,
   onSubmit,
-  className = '',
+  className = "",
 }: DPIAQuestionnaireProps) {
-  const [projectName, setProjectName] = useState('');
-  const [projectDescription, setProjectDescription] = useState('');
-  const [dataController, setDataController] = useState('');
-  const [assessmentDate, setAssessmentDate] = useState(new Date().toISOString().split('T')[0]);
+  const [projectName, setProjectName] = useState("");
+  const [projectDescription, setProjectDescription] = useState("");
+  const [dataController, setDataController] = useState("");
+  const [assessmentDate, setAssessmentDate] = useState(
+    new Date().toISOString().split("T")[0],
+  );
   const [answers, setAnswers] = useState<Record<string, number>>({});
   const [currentStep, setCurrentStep] = useState(0);
   const [errors, setErrors] = useState<Record<string, string>>({});
@@ -31,7 +33,7 @@ export default function DPIAQuestionnaire({
 
   // Since DPIAQuestion doesn't have a category, we'll create a single category
   const categories: Record<string, RiskAssessmentQuestion[]> = {
-    'Assessment Questions': questions
+    "Assessment Questions": questions,
   };
 
   const categoryNames = Object.keys(categories);
@@ -39,9 +41,9 @@ export default function DPIAQuestionnaire({
   const handleAnswerChange = (questionId: string, value: number | string) => {
     setAnswers((prev) => ({
       ...prev,
-      [questionId]: typeof value === 'string' ? parseInt(value, 10) : value,
+      [questionId]: typeof value === "string" ? parseInt(value, 10) : value,
     }));
-    
+
     // Clear error when question is answered
     if (errors[questionId]) {
       setErrors((prev) => {
@@ -55,34 +57,34 @@ export default function DPIAQuestionnaire({
   // Render different input types based on question type
   const renderQuestionInput = (question: RiskAssessmentQuestion) => {
     switch (question.type) {
-      case 'text':
+      case "text":
         return (
           <Input
             id={question.id}
-            value={answers[question.id] || ''}
+            value={answers[question.id] || ""}
             onChange={(e) => handleAnswerChange(question.id, e.target.value)}
             placeholder={question.guidance}
             className="w-full"
           />
         );
-      
-      case 'textarea':
+
+      case "textarea":
         return (
           <TextArea
             id={question.id}
-            value={answers[question.id] || ''}
+            value={answers[question.id] || ""}
             onChange={(e) => handleAnswerChange(question.id, e.target.value)}
             placeholder={question.guidance}
             rows={4}
             className="w-full"
           />
         );
-      
-      case 'select':
+
+      case "select":
         return (
           <select
             id={question.id}
-            value={answers[question.id] || ''}
+            value={answers[question.id] || ""}
             onChange={(e) => handleAnswerChange(question.id, e.target.value)}
             className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
           >
@@ -94,14 +96,16 @@ export default function DPIAQuestionnaire({
             ))}
           </select>
         );
-      
-      case 'radio':
+
+      case "radio":
         return question.options?.map((option) => (
-          <div 
-            key={option.value} 
-            className={`p-3 border rounded-md cursor-pointer transition-colors ${answers[question.id] === parseInt(option.value) 
-              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 dark:border-blue-400' 
-              : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'}`}
+          <div
+            key={option.value}
+            className={`p-3 border rounded-md cursor-pointer transition-colors ${
+              answers[question.id] === parseInt(option.value)
+                ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 dark:border-blue-400"
+                : "border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
+            }`}
             onClick={() => handleAnswerChange(question.id, option.value)}
           >
             <div className="flex items-center justify-between">
@@ -122,12 +126,13 @@ export default function DPIAQuestionnaire({
                   {option.label}
                 </label>
               </div>
-              {option.riskLevel && getRiskLevelIndicator(parseInt(option.value))}
+              {option.riskLevel &&
+                getRiskLevelIndicator(parseInt(option.value))}
             </div>
           </div>
         ));
-      
-      case 'checkbox':
+
+      case "checkbox":
         return question.options?.map((option) => (
           <div key={option.value} className="flex items-center">
             <input
@@ -136,14 +141,16 @@ export default function DPIAQuestionnaire({
               value={option.value}
               checked={answers[question.id]?.toString().includes(option.value)}
               onChange={(e) => {
-                const currentValues = answers[question.id]?.toString().split(',').filter(Boolean) || [];
+                const currentValues =
+                  answers[question.id]?.toString().split(",").filter(Boolean) ||
+                  [];
                 if (e.target.checked) {
                   currentValues.push(option.value);
                 } else {
                   const index = currentValues.indexOf(option.value);
                   if (index > -1) currentValues.splice(index, 1);
                 }
-                handleAnswerChange(question.id, currentValues.join(','));
+                handleAnswerChange(question.id, currentValues.join(","));
               }}
               className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500 rounded"
             />
@@ -155,8 +162,8 @@ export default function DPIAQuestionnaire({
             </label>
           </div>
         ));
-      
-      case 'scale':
+
+      case "scale":
         return (
           <div className="space-y-2">
             <input
@@ -182,9 +189,13 @@ export default function DPIAQuestionnaire({
             </div>
           </div>
         );
-      
+
       default:
-        return <p className="text-gray-500">Unsupported question type: {question.type}</p>;
+        return (
+          <p className="text-gray-500">
+            Unsupported question type: {question.type}
+          </p>
+        );
     }
   };
 
@@ -192,32 +203,34 @@ export default function DPIAQuestionnaire({
   useEffect(() => {
     const totalQuestions = questions.length;
     const answeredQuestions = Object.keys(answers).length;
-    const projectInfoComplete = projectName.trim() !== '' ? 1 : 0;
-    
+    const projectInfoComplete = projectName.trim() !== "" ? 1 : 0;
+
     // Calculate progress percentage (project info counts as one question)
-    const calculatedProgress = Math.round(((answeredQuestions + projectInfoComplete) / (totalQuestions + 1)) * 100);
+    const calculatedProgress = Math.round(
+      ((answeredQuestions + projectInfoComplete) / (totalQuestions + 1)) * 100,
+    );
     setProgress(calculatedProgress);
   }, [answers, projectName, questions.length]);
 
   const validateStep = (step: number) => {
     const newErrors: Record<string, string> = {};
-    
+
     if (step === 0) {
       if (!projectName.trim()) {
-        newErrors.projectName = 'Project name is required';
+        newErrors.projectName = "Project name is required";
       }
       // Description and data controller are optional, so no validation needed
     } else {
       const category = categoryNames[step - 1];
       const categoryQuestions = categories[category];
-      
+
       categoryQuestions.forEach((question) => {
         if (answers[question.id] === undefined) {
-          newErrors[question.id] = 'Please select an answer for this question';
+          newErrors[question.id] = "Please select an answer for this question";
         }
       });
     }
-    
+
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
@@ -243,15 +256,19 @@ export default function DPIAQuestionnaire({
     if (currentStep === 0) {
       return (
         <div className="space-y-6">
-          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Project Information</h3>
-          
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+            Project Information
+          </h3>
+
           <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-md mb-6">
             <p className="text-sm text-blue-800 dark:text-blue-200">
-              This Data Protection Impact Assessment (DPIA) will help you identify and minimize data protection risks in your project.
-              Please provide accurate information to receive the most relevant recommendations.
+              This Data Protection Impact Assessment (DPIA) will help you
+              identify and minimize data protection risks in your project.
+              Please provide accurate information to receive the most relevant
+              recommendations.
             </p>
           </div>
-          
+
           <FormField
             id="projectName"
             label="Project Name"
@@ -265,7 +282,7 @@ export default function DPIAQuestionnaire({
               placeholder="Enter the name of your project or data processing activity"
             />
           </FormField>
-          
+
           <FormField
             id="projectDescription"
             label="Project Description"
@@ -279,7 +296,7 @@ export default function DPIAQuestionnaire({
               placeholder="Briefly describe the purpose and scope of your project"
             />
           </FormField>
-          
+
           <FormField
             id="dataController"
             label="Data Controller"
@@ -292,11 +309,8 @@ export default function DPIAQuestionnaire({
               placeholder="Name of the organization responsible for the data"
             />
           </FormField>
-          
-          <FormField
-            id="assessmentDate"
-            label="Assessment Date"
-          >
+
+          <FormField id="assessmentDate" label="Assessment Date">
             <Input
               type="date"
               id="assessmentDate"
@@ -315,34 +329,45 @@ export default function DPIAQuestionnaire({
       <div className="space-y-6">
         <div className="flex items-center space-x-2">
           <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
-            <span className="text-blue-600 dark:text-blue-300 font-medium">{currentStep}</span>
+            <span className="text-blue-600 dark:text-blue-300 font-medium">
+              {currentStep}
+            </span>
           </div>
-          <h3 className="text-lg font-medium text-gray-900 dark:text-white">{category}</h3>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+            {category}
+          </h3>
         </div>
-        
+
         <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md mb-4">
           <p className="text-sm text-gray-600 dark:text-gray-400">
             {getCategoryDescription(category)}
           </p>
         </div>
-        
+
         {categoryQuestions.map((question, index) => (
-          <div key={question.id} className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg space-y-4">
+          <div
+            key={question.id}
+            className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg space-y-4"
+          >
             <div className="flex items-start">
               <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3 mt-0.5">
-                <span className="text-blue-600 dark:text-blue-300 text-xs font-medium">{index + 1}</span>
+                <span className="text-blue-600 dark:text-blue-300 text-xs font-medium">
+                  {index + 1}
+                </span>
               </div>
               <label className="block text-sm font-medium text-gray-800 dark:text-gray-200">
                 {question.text}
               </label>
             </div>
-            
+
             <div className="ml-9 space-y-2">
               {renderQuestionInput(question)}
             </div>
-            
+
             {errors[question.id] && (
-              <p className="ml-9 text-sm text-red-600 dark:text-red-400">{errors[question.id]}</p>
+              <p className="ml-9 text-sm text-red-600 dark:text-red-400">
+                {errors[question.id]}
+              </p>
             )}
           </div>
         ))}
@@ -353,37 +378,40 @@ export default function DPIAQuestionnaire({
   // Helper function to get category descriptions
   const getCategoryDescription = (category: string): string => {
     switch (category) {
-      case 'Data Collection':
-        return 'These questions help assess the risks associated with the types of personal data you collect and the sources of that data.';
-      case 'Data Processing':
-        return 'These questions evaluate how you use, analyze, and transform the personal data within your project.';
-      case 'Data Sharing':
-        return 'These questions examine the risks of sharing personal data with third parties or transferring it across borders.';
-      case 'Security Measures':
-        return 'These questions assess the safeguards you have in place to protect personal data from unauthorized access or breaches.';
-      case 'Data Subject Rights':
-        return 'These questions evaluate how well your project supports individuals in exercising their rights over their personal data.';
+      case "Data Collection":
+        return "These questions help assess the risks associated with the types of personal data you collect and the sources of that data.";
+      case "Data Processing":
+        return "These questions evaluate how you use, analyze, and transform the personal data within your project.";
+      case "Data Sharing":
+        return "These questions examine the risks of sharing personal data with third parties or transferring it across borders.";
+      case "Security Measures":
+        return "These questions assess the safeguards you have in place to protect personal data from unauthorized access or breaches.";
+      case "Data Subject Rights":
+        return "These questions evaluate how well your project supports individuals in exercising their rights over their personal data.";
       default:
-        return 'Please answer the following questions about your project.';
+        return "Please answer the following questions about your project.";
     }
   };
 
   // Helper function to display risk level indicators
   const getRiskLevelIndicator = (value: number) => {
-    const variants: Record<number, 'success' | 'warning' | 'danger' | 'primary'> = {
-      1: 'success',
-      2: 'warning',
-      3: 'danger',
-      4: 'danger'
+    const variants: Record<
+      number,
+      "success" | "warning" | "danger" | "primary"
+    > = {
+      1: "success",
+      2: "warning",
+      3: "danger",
+      4: "danger",
     };
-    
+
     const labels = {
-      1: 'Low Risk',
-      2: 'Medium Risk',
-      3: 'High Risk',
-      4: 'Very High Risk'
+      1: "Low Risk",
+      2: "Medium Risk",
+      3: "High Risk",
+      4: "Very High Risk",
     };
-    
+
     return (
       <div className="flex items-center ml-auto pl-2">
         <Badge variant={variants[value as keyof typeof variants]}>
@@ -403,7 +431,7 @@ export default function DPIAQuestionnaire({
           Assess the data protection risks of your project with our DPIA tool.
         </p>
       </CardHeader>
-      
+
       <CardContent>
         <div className="mb-6">
           <div className="flex items-center justify-between mb-2">
@@ -412,7 +440,7 @@ export default function DPIAQuestionnaire({
             </div>
             <div className="text-sm font-medium text-gray-900 dark:text-white">
               {currentStep === 0
-                ? 'Project Information'
+                ? "Project Information"
                 : categoryNames[currentStep - 1]}
             </div>
           </div>
@@ -428,51 +456,63 @@ export default function DPIAQuestionnaire({
             </div>
             {currentStep > 0 && currentStep < totalSteps && (
               <div className="text-xs text-gray-500 dark:text-gray-400">
-                {categories[categoryNames[currentStep - 1]].filter(q => 
-                  answers[q.id] !== undefined
-                ).length} of {categories[categoryNames[currentStep - 1]].length} questions answered
+                {
+                  categories[categoryNames[currentStep - 1]].filter(
+                    (q) => answers[q.id] !== undefined,
+                  ).length
+                }{" "}
+                of {categories[categoryNames[currentStep - 1]].length} questions
+                answered
               </div>
             )}
           </div>
         </div>
-        
-        <div className="mb-6">
-          {renderStepContent()}
-        </div>
-        
+
+        <div className="mb-6">{renderStepContent()}</div>
+
         <div className="flex justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
           {currentStep > 0 ? (
-            <Button
-              type="button"
-              onClick={handleBack}
-              variant="outline"
-            >
-              <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            <Button type="button" onClick={handleBack} variant="outline">
+              <svg
+                className="w-5 h-5 mr-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
               </svg>
               Back
             </Button>
           ) : (
             <div>{/* Empty div to maintain layout */}</div>
           )}
-          
+
           {currentStep < totalSteps - 1 ? (
-            <Button
-              type="button"
-              onClick={handleNext}
-              variant="default"
-            >
+            <Button type="button" onClick={handleNext} variant="default">
               Next
-              <svg className="w-5 h-5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              <svg
+                className="w-5 h-5 ml-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
               </svg>
             </Button>
           ) : (
-            <Button
-              type="button"
-              onClick={handleSubmit}
-              variant="default"
-            >
+            <Button type="button" onClick={handleSubmit} variant="default">
               Submit Assessment
             </Button>
           )}

package/src/components/privacy-policy/PolicyGenerator.tsx

@@ -634,7 +634,7 @@ export default function PolicyGenerator({
       title: "Purposes of Data Collection and Processing",
       template: `We collect and process your personal data for the following specific purposes:\n\n${formData.dataCollectionPurposes.map((purpose) => `- ${purpose}`).join("\n")}${formData.includeExamples ? `\n\n${getIndustrySpecificPurposeExample(formData.industryCategory)}` : ""}`,
       required: true,
-        included: true,
+      included: true,
       order: order++,
     });
 
@@ -666,7 +666,7 @@ export default function PolicyGenerator({
       title: "Data Retention",
       template: `We will retain your personal data for ${formData.dataRetentionPeriod}, or for as long as necessary to fulfill the purposes for which it was collected, including for the purposes of satisfying any legal, accounting, or reporting requirements. ${formData.includeNDPRCompliance ? `This is in accordance with ${formData.includeLegalReferences ? "Section 2.1(1)(e) of the NDPR and Section 33 of the DPA" : "the data retention principles of the NDPR and DPA"}.` : ""}\n\nTo determine the appropriate retention period for personal data, we consider the amount, nature, and sensitivity of the personal data, the potential risk of harm from unauthorized use or disclosure of your personal data, the purposes for which we process your personal data and whether we can achieve those purposes through other means, and the applicable legal requirements.`,
       required: true,
-        included: true,
+      included: true,
       order: order++,
     });
 
@@ -797,7 +797,7 @@ export default function PolicyGenerator({
       title: "Your Rights",
       template: rightsContent,
       required: true,
-        included: true,
+      included: true,
       order: order++,
     });
 
@@ -807,7 +807,7 @@ export default function PolicyGenerator({
       title: "Changes to This Privacy Policy",
       template: `We may update this Privacy Policy from time to time. The current version of the Privacy Policy is effective as of ${formData.policyEffectiveDate} (Version ${formData.policyVersion}).${formData.previousPolicyUrl ? ` Previous versions of this Policy can be found at ${formData.previousPolicyUrl}.` : ""}\n\n${formData.policyUpdateProcedure ? `When we make changes to this Privacy Policy: ${formData.policyUpdateProcedure}` : "We will notify you of any material changes to this Privacy Policy by posting the updated Policy on our website and, where appropriate, by sending you a notification."}`,
       required: true,
-        included: true,
+      included: true,
       order: order++,
     });
 
@@ -865,7 +865,7 @@ export default function PolicyGenerator({
       title: "Contact Us",
       template: `If you have any questions about this Privacy Policy or our privacy practices, please contact us at:\n\n${formData.organizationName}\n${formData.organizationAddress ? `${formData.organizationAddress}\n` : ""}Email: ${formData.organizationContact}\n${formData.organizationWebsite ? `Website: ${formData.organizationWebsite}` : ""}`,
       required: true,
-        included: true,
+      included: true,
       order: order++,
     });