@tantainnovative/ndpr-toolkit 1.0.5 → 1.0.7

package/src/components/privacy-policy/steps/DataSharingStep.tsx

@@ -1,418 +0,0 @@
-'use client';
-
-import React, { useRef } from 'react';
-import CheckboxField from '../shared/CheckboxField';
-import CheckboxGroup from '../shared/CheckboxGroup';
-import FormField from '../shared/FormField';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
-import { TextArea } from '@/components/ui/TextArea';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { cn } from '@/lib/utils';
-
-interface DataSharingStepProps {
-  formData: {
-    thirdPartySharing: boolean;
-    thirdParties: string[];
-    thirdPartyCategories: string[];
-    thirdPartyPurposes: string[];
-    cookiesUsed: boolean;
-    cookieTypes: string[];
-    cookieLifespan: string;
-    trackingTechnologies: string[];
-    internationalTransfers: boolean;
-    transferCountries: string[];
-    transferSafeguards: string[];
-    processesChildrenData: boolean;
-    childrenDataDetails: string;
-    processesSpecialCategories: boolean;
-    specialCategoriesDetails: string;
-    dataBreachProcedures: string;
-    regulatoryCompliance: string[];
-  };
-  errors: Record<string, string>;
-  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
-  onToggleItem: (
-    category: 
-      'cookieTypes' | 
-      'transferCountries' | 
-      'trackingTechnologies' | 
-      'transferSafeguards' | 
-      'thirdPartyCategories' | 
-      'thirdPartyPurposes' | 
-      'regulatoryCompliance', 
-    item: string
-  ) => void;
-  onAddThirdParty: () => void;
-  onRemoveThirdParty: (index: number) => void;
-  defaultCookieTypes: string[];
-  commonTransferCountries: string[];
-  trackingTechnologies: string[];
-  transferSafeguards: string[];
-}
-
-export default function DataSharingStep({
-  formData,
-  errors,
-  onChange,
-  onToggleItem,
-  onAddThirdParty,
-  onRemoveThirdParty,
-  defaultCookieTypes,
-  commonTransferCountries,
-  trackingTechnologies,
-  transferSafeguards,
-}: DataSharingStepProps) {
-  const thirdPartyInputRef = useRef<HTMLInputElement>(null);
-
-  // Define third party categories
-  const thirdPartyCategories = [
-    'Cloud service providers',
-    'Payment processors',
-    'Analytics providers',
-    'Marketing and advertising partners',
-    'Customer support services',
-    'Social media platforms',
-    'Delivery and logistics providers',
-    'IT and system maintenance providers',
-    'Professional advisors (legal, accounting)',
-    'Regulatory authorities',
-    'Business partners',
-    'Affiliates and subsidiaries'
-  ];
-
-  // Define third party purposes
-  const thirdPartyPurposes = [
-    'Processing payments',
-    'Delivering products or services',
-    'Customer support',
-    'Analytics and performance monitoring',
-    'Marketing and advertising',
-    'Fraud prevention and security',
-    'Legal and regulatory compliance',
-    'Service optimization',
-    'Research and development',
-    'Business operations'
-  ];
-
-  // Define regulatory compliance options
-  const regulatoryComplianceOptions = [
-    'General Data Protection Regulation (GDPR)',
-    'California Consumer Privacy Act (CCPA)',
-    'Personal Information Protection and Electronic Documents Act (PIPEDA)',
-    'Health Insurance Portability and Accountability Act (HIPAA)',
-    'Children\'s Online Privacy Protection Act (COPPA)',
-    'Payment Card Industry Data Security Standard (PCI DSS)',
-    'South Africa\'s Protection of Personal Information Act (POPIA)',
-    'Kenya\'s Data Protection Act',
-    'Ghana\'s Data Protection Act',
-    'ISO 27001 Information Security Standard'
-  ];
-
-  return (
-    <div className="space-y-8">
-      {/* Third-Party Sharing */}
-      <Card className="overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
-        <CardHeader className="bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 pb-3">
-          <CardTitle className="text-lg font-semibold text-gray-800 dark:text-white">Third-Party Sharing</CardTitle>
-          <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-            Specify if and how you share personal data with third parties
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-5">
-          <CheckboxField
-            id="thirdPartySharing"
-            name="thirdPartySharing"
-            label="We don&apos;t share your data with third parties"
-            checked={formData.thirdPartySharing}
-            onChange={onChange}
-            className="mb-4"
-          />
-
-          {formData.thirdPartySharing && (
-            <div className="space-y-4">
-              <FormField
-                id="thirdPartyInput"
-                label="Add Specific Third Parties"
-                error={errors.thirdParties}
-              >
-                <div className="flex space-x-2 mb-2">
-                  <input
-                    ref={thirdPartyInputRef}
-                    type="text"
-                    id="thirdPartyInput"
-                    placeholder="e.g., Google Analytics, Stripe"
-                    className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white sm:text-sm"
-                  />
-                  <button
-                    type="button"
-                    onClick={onAddThirdParty}
-                    className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                  >
-                    Add
-                  </button>
-                </div>
-              </FormField>
-
-              {formData.thirdParties.length > 0 && (
-                <div className="mt-2">
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Added Third Parties:</label>
-                  <ul className="space-y-1">
-                    {formData.thirdParties.map((party, index) => (
-                      <li key={index} className="flex justify-between items-center bg-gray-50 dark:bg-gray-800 px-3 py-2 rounded-md text-sm">
-                        <span>{party}</span>
-                        <button
-                          type="button"
-                          onClick={() => onRemoveThirdParty(index)}
-                          className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
-                        >
-                          Remove
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-
-              <CheckboxGroup
-                title="Categories of Third Parties"
-                items={thirdPartyCategories}
-                selectedItems={formData.thirdPartyCategories}
-                onToggleItem={(item) => onToggleItem('thirdPartyCategories', item)}
-                required
-                error={errors.thirdPartyCategories}
-                columns={1}
-              />
-
-              <CheckboxGroup
-                title="Purposes of Sharing"
-                items={thirdPartyPurposes}
-                selectedItems={formData.thirdPartyPurposes}
-                onToggleItem={(item) => onToggleItem('thirdPartyPurposes', item)}
-                required
-                error={errors.thirdPartyPurposes}
-                columns={1}
-              />
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Cookies and Tracking */}
-      <Card className="overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
-        <CardHeader className="bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 pb-3">
-          <CardTitle className="text-lg font-semibold text-gray-800 dark:text-white">Cookies and Tracking Technologies</CardTitle>
-          <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-            Specify how you use cookies and other tracking technologies
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-5">
-          <CheckboxField
-            id="cookiesUsed"
-            name="cookiesUsed"
-            label="We use cookies and similar tracking technologies"
-            checked={formData.cookiesUsed}
-            onChange={onChange}
-            className="mb-4"
-          />
-
-          {formData.cookiesUsed && (
-            <div className="space-y-4">
-              <CheckboxGroup
-                title="Types of Cookies Used"
-                items={defaultCookieTypes}
-                selectedItems={formData.cookieTypes}
-                onToggleItem={(item) => onToggleItem('cookieTypes', item)}
-                required
-                error={errors.cookieTypes}
-                columns={2}
-              />
-
-              <FormField
-                id="cookieLifespan"
-                label="Cookie Lifespan"
-                required
-                error={errors.cookieLifespan}
-              >
-                <select
-                  id="cookieLifespan"
-                  name="cookieLifespan"
-                  value={formData.cookieLifespan}
-                  onChange={onChange}
-                  className={`mt-1 block w-full rounded-md shadow-sm sm:text-sm ${
-                    errors.cookieLifespan
-                      ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
-                      : 'border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500'
-                  } dark:bg-gray-700 dark:text-white`}
-                >
-                  <option value="">Select cookie lifespan</option>
-                  <option value="Session only">Session only</option>
-                  <option value="1 day">1 day</option>
-                  <option value="7 days">7 days</option>
-                  <option value="30 days">30 days</option>
-                  <option value="90 days">90 days</option>
-                  <option value="1 year">1 year</option>
-                  <option value="2 years">2 years</option>
-                  <option value="Varies by cookie type">Varies by cookie type</option>
-                </select>
-              </FormField>
-
-              <CheckboxGroup
-                title="Other Tracking Technologies Used"
-                items={trackingTechnologies}
-                selectedItems={formData.trackingTechnologies}
-                onToggleItem={(item) => onToggleItem('trackingTechnologies', item)}
-                columns={2}
-              />
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* International Transfers */}
-      <Card className="overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
-        <CardHeader className="bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 pb-3">
-          <CardTitle className="text-lg font-semibold text-gray-800 dark:text-white">International Data Transfers</CardTitle>
-          <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-            Specify if you transfer data internationally and the safeguards in place
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-5">
-          <CheckboxField
-            id="internationalTransfers"
-            name="internationalTransfers"
-            label="We transfer data internationally"
-            checked={formData.internationalTransfers}
-            onChange={onChange}
-            className="mb-4"
-          />
-
-          {formData.internationalTransfers && (
-            <div className="space-y-4">
-              <CheckboxGroup
-                title="Countries or Regions of Transfer"
-                items={commonTransferCountries}
-                selectedItems={formData.transferCountries}
-                onToggleItem={(item) => onToggleItem('transferCountries', item)}
-                required
-                error={errors.transferCountries}
-                columns={2}
-              />
-
-              <CheckboxGroup
-                title="Transfer Safeguards"
-                items={transferSafeguards}
-                selectedItems={formData.transferSafeguards}
-                onToggleItem={(item) => onToggleItem('transferSafeguards', item)}
-                required
-                error={errors.transferSafeguards}
-                columns={1}
-              />
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Special Categories */}
-      <Card className="overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
-        <CardHeader className="bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 pb-3">
-          <CardTitle className="text-lg font-semibold text-gray-800 dark:text-white">Special Categories of Data</CardTitle>
-          <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-            Specify if you process children&apos;s data or special categories of personal data
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-5">
-          <div className="space-y-4">
-            <CheckboxField
-              id="processesChildrenData"
-              name="processesChildrenData"
-              label="We process data of children under 18"
-              checked={formData.processesChildrenData}
-              onChange={onChange}
-              className="mb-2"
-            />
-
-            {formData.processesChildrenData && (
-              <FormField
-                id="childrenDataDetails"
-                label="Details about children's data processing"
-                required
-                error={errors.childrenDataDetails}
-              >
-                <TextArea
-                  id="childrenDataDetails"
-                  name="childrenDataDetails"
-                  value={formData.childrenDataDetails}
-                  onChange={onChange}
-                  rows={3}
-                  placeholder="Explain how you collect, use, and protect children's data, including parental consent mechanisms"
-                />
-              </FormField>
-            )}
-
-            <CheckboxField
-              id="processesSpecialCategories"
-              name="processesSpecialCategories"
-              label="We process special categories of data (race, ethnicity, health, biometric, etc.)"
-              checked={formData.processesSpecialCategories}
-              onChange={onChange}
-              className="mb-2"
-            />
-
-            {formData.processesSpecialCategories && (
-              <FormField
-                id="specialCategoriesDetails"
-                label="Details about special category data processing"
-                required
-                error={errors.specialCategoriesDetails}
-              >
-                <TextArea
-                  id="specialCategoriesDetails"
-                  name="specialCategoriesDetails"
-                  value={formData.specialCategoriesDetails}
-                  onChange={onChange}
-                  rows={3}
-                  placeholder="Explain what special categories of data you process, why, and the legal basis for processing"
-                />
-              </FormField>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Additional Compliance */}
-      <Card className="overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
-        <CardHeader className="bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 pb-3">
-          <CardTitle className="text-lg font-semibold text-gray-800 dark:text-white">Additional Compliance</CardTitle>
-          <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-            Specify additional compliance measures and regulatory frameworks
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-5">
-          <div className="space-y-4">
-            <FormField
-              id="dataBreachProcedures"
-              label="Data Breach Procedures"
-            >
-              <TextArea
-                id="dataBreachProcedures"
-                name="dataBreachProcedures"
-                value={formData.dataBreachProcedures}
-                onChange={onChange}
-                rows={3}
-                placeholder="Describe your procedures for handling data breaches, including notification timelines"
-              />
-            </FormField>
-
-            <CheckboxGroup
-              title="Additional Regulatory Compliance"
-              items={regulatoryComplianceOptions}
-              selectedItems={formData.regulatoryCompliance}
-              onToggleItem={(item) => onToggleItem('regulatoryCompliance', item)}
-              columns={1}
-            />
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/src/components/privacy-policy/steps/OrganizationInfoStep.tsx

@@ -1,202 +0,0 @@
-'use client';
-
-import React from 'react';
-import { FormField } from '@/components/ui/FormField';
-import { Input } from '@/components/ui/Input';
-import { TextArea } from '@/components/ui/TextArea';
-import { Checkbox } from '@/components/ui/Checkbox';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { cn } from '@/lib/utils';
-
-interface OrganizationInfoStepProps {
-  formData: {
-    organizationName: string;
-    organizationContact: string;
-    organizationWebsite: string;
-    organizationAddress: string;
-    hasDPO: boolean;
-    dpoContact: string;
-    includeNDPRCompliance: boolean;
-  };
-  errors: Record<string, string>;
-  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-}
-
-export default function OrganizationInfoStep({
-  formData,
-  errors,
-  onChange,
-}: OrganizationInfoStepProps) {
-  return (
-    <div className="space-y-8">
-      <Card className="overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
-        <CardHeader className="bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 pb-3">
-          <CardTitle className="text-lg font-semibold text-gray-800 dark:text-white">Organization Details</CardTitle>
-          <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-            Provide information about your organization for the privacy policy
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-5">
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
-          <FormField
-            id="organizationName"
-            label="Organization Name"
-            required
-            error={errors.organizationName}
-            className="md:col-span-2"
-          >
-            <Input
-              type="text"
-              id="organizationName"
-              name="organizationName"
-              value={formData.organizationName}
-              onChange={onChange}
-              placeholder="e.g., Acme Corporation"
-              aria-required="true"
-              className={errors.organizationName ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''}
-            />
-          </FormField>
-
-          <FormField
-            id="organizationContact"
-            label="Contact Information"
-            required
-            error={errors.organizationContact}
-          >
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
-                  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
-                </svg>
-              </div>
-              <Input
-                type="text"
-                id="organizationContact"
-                name="organizationContact"
-                value={formData.organizationContact}
-                onChange={onChange}
-                placeholder="email@example.com or phone"
-                aria-required="true"
-                className={`pl-10 ${errors.organizationContact ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''}`}
-              />
-            </div>
-          </FormField>
-
-          <FormField
-            id="organizationWebsite"
-            label="Website (Optional)"
-            error={errors.organizationWebsite}
-          >
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fillRule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clipRule="evenodd" />
-                </svg>
-              </div>
-              <Input
-                type="text"
-                id="organizationWebsite"
-                name="organizationWebsite"
-                value={formData.organizationWebsite}
-                onChange={onChange}
-                placeholder="e.g., https://www.example.com"
-                className="pl-10"
-              />
-            </div>
-          </FormField>
-        </div>
-
-        <FormField
-          id="organizationAddress"
-          label="Address (Optional)"
-          error={errors.organizationAddress}
-          className="mt-4"
-        >
-          <TextArea
-            id="organizationAddress"
-            name="organizationAddress"
-            value={formData.organizationAddress}
-            onChange={onChange}
-            rows={2}
-            placeholder="e.g., 123 Main Street, Lagos, Nigeria"
-          />
-        </FormField>
-        </CardContent>
-      </Card>
-
-      <Card className="overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
-        <CardHeader className="bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 pb-3">
-          <CardTitle className="text-lg font-semibold text-gray-800 dark:text-white">Compliance Settings</CardTitle>
-          <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-            Configure data protection compliance options
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-5">
-
-        <Checkbox
-          id="hasDPO"
-          name="hasDPO"
-          label="We have a Data Protection Officer (DPO)"
-          checked={formData.hasDPO}
-          onChange={onChange}
-        />
-
-        {formData.hasDPO && (
-          <div className="ml-8 mt-2 mb-4">
-            <FormField
-              id="dpoContact"
-              label="DPO Contact Information"
-              required
-              error={errors.dpoContact}
-            >
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
-                  </svg>
-                </div>
-                <Input
-                  type="text"
-                  id="dpoContact"
-                  name="dpoContact"
-                  value={formData.dpoContact}
-                  onChange={onChange}
-                  placeholder="dpo@example.com or phone number"
-                  aria-required="true"
-                  className={`pl-10 ${errors.dpoContact ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''}`}
-                />
-              </div>
-            </FormField>
-          </div>
-        )}
-
-        <Checkbox
-          id="includeNDPRCompliance"
-          name="includeNDPRCompliance"
-          label="Include NDPR and DPA compliance statements"
-          checked={formData.includeNDPRCompliance}
-          onChange={onChange}
-        />
-
-        <div className="mt-4 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-100 dark:border-indigo-800/30">
-          <div className="flex">
-            <div className="flex-shrink-0">
-              <svg className="h-5 w-5 text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-              </svg>
-            </div>
-            <div className="ml-3 flex-1 md:flex md:justify-between">
-              <p className="text-sm text-indigo-700 dark:text-indigo-300">
-                Including compliance statements helps demonstrate your commitment to data protection regulations.
-              </p>
-            </div>
-          </div>
-        </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}