@tantainnovative/ndpr-toolkit 1.0.5 → 1.0.7

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

@@ -1,226 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-'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

@@ -1,59 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,57 +0,0 @@
-'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

@@ -1,50 +0,0 @@
-'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

@@ -1,38 +0,0 @@
-'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 };