@tantainnovative/ndpr-toolkit 1.0.2 → 1.0.3

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

@@ -0,0 +1,172 @@
+'use client';
+
+import React from 'react';
+import { Card, CardContent } from '@/components/ui/Card';
+
+interface PolicyPreviewStepProps {
+  formData: {
+    organizationName: string;
+    organizationContact: string;
+    organizationWebsite: string;
+    organizationAddress: string;
+    dataCollectionPurposes: string[];
+    dataRetentionPeriod: string;
+    thirdPartySharing: boolean;
+    thirdParties: string[];
+    securityMeasures: string[];
+    cookiesUsed: boolean;
+    cookieTypes: string[];
+    internationalTransfers: boolean;
+    transferCountries: string[];
+    customSections: { title: string; template: string }[];
+    hasDPO: boolean;
+    dpoContact: string;
+    includeNDPRCompliance: boolean;
+    policyEffectiveDate: string;
+  };
+  previewRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export default function PolicyPreviewStep({
+  formData,
+  previewRef,
+}: PolicyPreviewStepProps) {
+  return (
+    <div className="space-y-8">
+      <Card className="transition-all duration-200">
+        <CardContent className="p-6">
+          <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-200 dark:border-gray-700">
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+              </svg>
+              Privacy Policy Preview
+            </h3>
+            <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
+              Preview Mode
+            </span>
+          </div>
+
+          <div ref={previewRef} className="prose dark:prose-invert prose-indigo max-w-none text-base prose-headings:text-gray-800 dark:prose-headings:text-gray-100 prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-h1:text-2xl prose-h1:font-bold prose-h2:text-xl prose-h2:font-semibold prose-h2:border-b prose-h2:border-gray-200 dark:prose-h2:border-gray-700 prose-h2:pb-2 prose-h2:mt-8 overflow-auto">
+            <h1>{formData.organizationName} Privacy Policy</h1>
+
+            <h2>Introduction</h2>
+            <p>
+              This Privacy Policy describes how {formData.organizationName} collects, uses, and discloses your personal information. 
+              {formData.includeNDPRCompliance && ' This policy is compliant with the Nigeria Data Protection Regulation (NDPR) and the Data Protection Act (DPA).'}
+            </p>
+
+            <h2>About Us</h2>
+            <p>
+              {formData.organizationName}
+              {formData.organizationAddress && ` is located at ${formData.organizationAddress}`}.
+              {formData.organizationWebsite && ` Our website is ${formData.organizationWebsite}.`}
+            </p>
+
+            <h2>Information We Collect</h2>
+            <p>We collect and process your personal data for the following purposes:</p>
+            <ul>
+              {(formData.dataCollectionPurposes || []).map((purpose, index) => (
+                <li key={`purpose-${index}`}>{purpose}</li>
+              ))}
+            </ul>
+
+            <h2>Data Retention</h2>
+            <p>
+              We will retain your personal data for {formData.dataRetentionPeriod || 'a period appropriate to the purpose'}, 
+              or for as long as necessary to fulfill the purposes for which it was collected.
+            </p>
+
+            {formData.thirdPartySharing && (formData.thirdParties || []).length > 0 && (
+              <>
+                <h2>Third-Party Sharing</h2>
+                <p>We may share your personal information with the following third parties:</p>
+                <ul>
+                  {(formData.thirdParties || []).map((party, index) => (
+                    <li key={`party-${index}`}>{party}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {formData.cookiesUsed && (formData.cookieTypes || []).length > 0 && (
+              <>
+                <h2>Cookies and Tracking Technologies</h2>
+                <p>Our website uses cookies and similar tracking technologies. We use the following types of cookies:</p>
+                <ul>
+                  {(formData.cookieTypes || []).map((type, index) => (
+                    <li key={`type-${index}`}>{type}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {formData.internationalTransfers && (formData.transferCountries || []).length > 0 && (
+              <>
+                <h2>International Data Transfers</h2>
+                <p>We may transfer your personal data to the following countries outside Nigeria:</p>
+                <ul>
+                  {(formData.transferCountries || []).map((country, index) => (
+                    <li key={`country-${index}`}>{country}</li>
+                  ))}
+                </ul>
+                <p>We ensure appropriate safeguards are in place to protect your data when transferred internationally.</p>
+              </>
+            )}
+
+            {(formData.securityMeasures || []).length > 0 && (
+              <>
+                <h2>Security Measures</h2>
+                <p>We implement the following security measures to protect your personal data:</p>
+                <ul>
+                  {(formData.securityMeasures || []).map((measure, index) => (
+                    <li key={`measure-${index}`}>{measure}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            <h2>Your Rights</h2>
+            <p>
+              {formData.includeNDPRCompliance 
+                ? 'Under the NDPR and DPA, you have the following rights:' 
+                : 'You have the following rights regarding your personal data:'}
+            </p>
+            <ul>
+              <li>Right to access your personal data</li>
+              <li>Right to rectify inaccurate personal data</li>
+              <li>Right to erasure (&quot;right to be forgotten&quot;)</li>
+              <li>Right to restrict processing</li>
+              <li>Right to object to processing</li>
+              <li>Right to data portability</li>
+            </ul>
+            <p>To exercise these rights, please contact us at {formData.organizationContact}.</p>
+
+            {(formData.customSections || []).length > 0 && (formData.customSections || []).map((section, index) => (
+              <div key={`section-${index}`}>
+                <h2>{section.title}</h2>
+                <p>{section.template}</p>
+              </div>
+            ))}
+
+            {formData.hasDPO && formData.dpoContact && (
+              <>
+                <h2>Data Protection Officer</h2>
+                <p>You can contact our Data Protection Officer at {formData.dpoContact}.</p>
+              </>
+            )}
+
+            <h2>Contact Us</h2>
+            <p>
+              If you have any questions about this Privacy Policy, please contact us at {formData.organizationContact}.
+            </p>
+
+            <p className="text-gray-500 dark:text-gray-400 mt-4">
+              Last Updated: {formData.policyEffectiveDate || new Date().toISOString().split('T')[0]}
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/ui/Badge.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-gray-700 text-white dark:bg-gray-500 focus:ring-gray-500",
+        primary: "bg-blue-700 text-white dark:bg-blue-600 focus:ring-blue-500",
+        secondary: "bg-gray-600 text-white dark:bg-gray-400 focus:ring-gray-500",
+        success: "bg-green-700 text-white dark:bg-green-600 focus:ring-green-500",
+        danger: "bg-red-700 text-white dark:bg-red-600 focus:ring-red-500",
+        warning: "bg-amber-700 text-white dark:bg-amber-600 focus:ring-amber-500",
+        info: "bg-blue-700 text-white dark:bg-blue-600 focus:ring-blue-500",
+        outline: "border-2 border-gray-700 dark:border-gray-300 text-gray-900 dark:text-gray-100 focus:ring-gray-500",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(badgeVariants({ variant }), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

package/src/components/ui/Button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/Card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/Checkbox.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, description, ...props }, ref) => {
+    const generatedId = React.useId();
+    const id = props.id || generatedId;
+    
+    return (
+      <div className="flex items-start">
+        <div className="flex items-center h-5">
+          <input
+            type="checkbox"
+            id={id}
+            className={cn(
+              "h-4 w-4 rounded border-gray-300 text-blue-600",
+              "focus:ring-blue-500 focus:ring-offset-0",
+              "disabled:opacity-70 disabled:cursor-not-allowed",
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+        </div>
+        {(label || description) && (
+          <div className="ml-3 text-sm">
+            {label && (
+              <label 
+                htmlFor={id} 
+                className={cn(
+                  "font-medium text-gray-900 dark:text-white",
+                  props.disabled && "text-gray-500 dark:text-gray-400"
+                )}
+              >
+                {label}
+              </label>
+            )}
+            {description && (
+              <p className="text-gray-500 dark:text-gray-400">{description}</p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/src/components/ui/FormField.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  id: string;
+  label: string;
+  description?: string;
+  error?: string;
+  required?: boolean;
+}
+
+const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
+  ({ id, label, description, error, required = false, className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("mb-4", className)} {...props}>
+        <div className="mb-1.5">
+          <label 
+            htmlFor={id} 
+            className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+          >
+            {label}
+            {required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+          
+          {description && (
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {description}
+            </p>
+          )}
+        </div>
+        
+        <div className="mt-1">
+          {children}
+        </div>
+        
+        {error && (
+          <p className="mt-1.5 text-xs text-red-600 dark:text-red-400">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+FormField.displayName = "FormField";
+
+export { FormField };

package/src/components/ui/Input.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+// This interface extends the standard HTML input attributes
+// and allows for additional props to be added in the future
+/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  // Custom props can be added here
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "block w-full px-3 py-2 text-base",
+          "border border-gray-300 dark:border-gray-600 rounded-md shadow-sm",
+          "bg-white dark:bg-gray-800 text-gray-900 dark:text-white",
+          "placeholder:text-gray-400 dark:placeholder:text-gray-500",
+          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-50 dark:disabled:bg-gray-900",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export { Input };