@tantainnovative/ndpr-toolkit 1.0.1 → 1.0.3

package/src/components/ui/Loading.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12',
+  };
+
+  return (
+    <div
+      className={cn('inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]', sizeClasses[size], className)}
+      role="status"
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
+
+interface LoadingOverlayProps {
+  children?: React.ReactNode;
+  message?: string;
+}
+
+export function LoadingOverlay({ children, message = 'Loading...' }: LoadingOverlayProps) {
+  return (
+    <div className="relative">
+      <div className="absolute inset-0 bg-white/75 dark:bg-gray-900/75 backdrop-blur-sm z-10 flex items-center justify-center">
+        <div className="text-center">
+          <LoadingSpinner size="lg" className="mx-auto mb-4 text-blue-600 dark:text-blue-400" />
+          <p className="text-sm font-medium text-gray-700 dark:text-gray-300">{message}</p>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+interface LoadingSkeletonProps {
+  className?: string;
+  lines?: number;
+}
+
+export function LoadingSkeleton({ className, lines = 1 }: LoadingSkeletonProps) {
+  return (
+    <div className={cn('animate-pulse', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            'h-4 bg-gray-200 dark:bg-gray-700 rounded',
+            i !== lines - 1 && 'mb-2',
+            i === lines - 1 && 'w-3/4'
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface LoadingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean;
+  loadingText?: string;
+  children: React.ReactNode;
+}
+
+export function LoadingButton({ 
+  loading = false, 
+  loadingText = 'Loading...', 
+  children, 
+  disabled,
+  className,
+  ...props 
+}: LoadingButtonProps) {
+  return (
+    <button
+      disabled={loading || disabled}
+      className={cn(
+        'relative inline-flex items-center justify-center',
+        loading && 'cursor-not-allowed opacity-70',
+        className
+      )}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <LoadingSpinner size="sm" className="mr-2" />
+          <span>{loadingText}</span>
+        </>
+      ) : (
+        children
+      )}
+    </button>
+  );
+}
+
+interface LoadingStateProps {
+  loading: boolean;
+  error?: Error | null;
+  empty?: boolean;
+  children: React.ReactNode;
+  loadingComponent?: React.ReactNode;
+  errorComponent?: React.ReactNode;
+  emptyComponent?: React.ReactNode;
+  emptyMessage?: string;
+}
+
+export function LoadingState({
+  loading,
+  error,
+  empty,
+  children,
+  loadingComponent,
+  errorComponent,
+  emptyComponent,
+  emptyMessage = 'No data found',
+}: LoadingStateProps) {
+  if (loading) {
+    return (
+      <>
+        {loadingComponent || (
+          <div className="flex items-center justify-center py-8">
+            <LoadingSpinner size="lg" />
+          </div>
+        )}
+      </>
+    );
+  }
+
+  if (error) {
+    return (
+      <>
+        {errorComponent || (
+          <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4" role="alert">
+            <div className="flex">
+              <div className="flex-shrink-0">
+                <svg
+                  className="h-5 w-5 text-red-400"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <h3 className="text-sm font-medium text-red-800 dark:text-red-200">
+                  Error loading data
+                </h3>
+                <p className="mt-1 text-sm text-red-700 dark:text-red-300">
+                  {error.message}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+
+  if (empty) {
+    return (
+      <>
+        {emptyComponent || (
+          <div className="text-center py-8">
+            <svg
+              className="mx-auto h-12 w-12 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+              />
+            </svg>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">{emptyMessage}</p>
+          </div>
+        )}
+      </>
+    );
+  }
+
+  return <>{children}</>;
+}

package/src/components/ui/Select.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+// This interface extends the standard HTML select attributes
+// and allows for additional props to be added in the future
+/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  // Custom props can be added here
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        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",
+          "appearance-none bg-no-repeat bg-right",
+          "bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m6%208%204%204%204-4%22%2F%3E%3C%2Fsvg%3E')]",
+          "bg-[length:1.25em_1.25em] pr-10",
+          "hover:border-blue-400 dark:hover:border-blue-500 transition-colors duration-200",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export { Select };

package/src/components/ui/TextArea.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+// This interface extends the standard HTML textarea attributes
+// and allows for additional props to be added in the future
+/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  // Custom props can be added here
+}
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        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",
+          "min-h-[80px] resize-y",
+          "hover:border-blue-400 dark:hover:border-blue-500 transition-colors duration-200",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+TextArea.displayName = "TextArea";
+
+export { TextArea };

package/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/hooks/useConsent.ts

@@ -0,0 +1,64 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ConsentRecord } from '@/types';
+import consentService from '@/lib/consentService';
+
+export function useConsent() {
+  const [consentRecord, setConsentRecord] = useState<ConsentRecord | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showBanner, setShowBanner] = useState(false);
+
+  useEffect(() => {
+    // Load consent from storage on component mount
+    const storedConsent = consentService.getCurrentConsent();
+    setConsentRecord(storedConsent);
+    setIsLoading(false);
+    
+    // If no consent is stored, show the banner
+    if (!storedConsent) {
+      setShowBanner(true);
+    }
+  }, []);
+
+  const saveConsent = (consents: Record<string, boolean>, userId?: string) => {
+    const newRecord = consentService.saveConsent(consents, userId);
+    setConsentRecord(newRecord);
+    setShowBanner(false);
+    return newRecord;
+  };
+
+  const updateConsent = (
+    consents: Record<string, boolean>, 
+    changeReason?: string,
+    userId?: string
+  ) => {
+    const updatedRecord = consentService.updateConsent(consents, changeReason, userId);
+    setConsentRecord(updatedRecord);
+    return updatedRecord;
+  };
+
+  const hasConsent = (type: string): boolean => {
+    if (!consentRecord) return false;
+    return consentRecord.consents[type] === true;
+  };
+
+  const openPreferences = () => {
+    setShowBanner(true);
+  };
+
+  const closePreferences = () => {
+    setShowBanner(false);
+  };
+
+  return {
+    consentRecord,
+    isLoading,
+    showBanner,
+    saveConsent,
+    updateConsent,
+    hasConsent,
+    openPreferences,
+    closePreferences
+  };
+}

package/src/hooks/useLoadingState.ts

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+interface LoadingState<T = unknown> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+}
+
+interface UseLoadingStateReturn<T = unknown> extends LoadingState<T> {
+  setLoading: (loading: boolean) => void;
+  setError: (error: Error | null) => void;
+  setData: (data: T | null) => void;
+  reset: () => void;
+  execute: <R = T>(asyncFunction: () => Promise<R>) => Promise<R | null>;
+}
+
+export function useLoadingState<T = unknown>(
+  initialData: T | null = null,
+): UseLoadingStateReturn<T> {
+  const [state, setState] = useState<LoadingState<T>>({
+    loading: false,
+    error: null,
+    data: initialData,
+  });
+
+  const setLoading = useCallback((loading: boolean) => {
+    setState((prev) => ({ ...prev, loading }));
+  }, []);
+
+  const setError = useCallback((error: Error | null) => {
+    setState((prev) => ({ ...prev, error, loading: false }));
+  }, []);
+
+  const setData = useCallback((data: T | null) => {
+    setState((prev) => ({ ...prev, data, loading: false, error: null }));
+  }, []);
+
+  const reset = useCallback(() => {
+    setState({
+      loading: false,
+      error: null,
+      data: initialData,
+    });
+  }, [initialData]);
+
+  const execute = useCallback(
+    async <R = T>(asyncFunction: () => Promise<R>): Promise<R | null> => {
+      try {
+        setLoading(true);
+        const result = await asyncFunction();
+        setData(result as unknown as T);
+        return result;
+      } catch (error) {
+        setError(error as Error);
+        return null;
+      }
+    },
+    [setLoading, setData, setError],
+  );
+
+  return {
+    ...state,
+    setLoading,
+    setError,
+    setData,
+    reset,
+    execute,
+  };
+}
+
+// Hook for managing multiple loading states
+export function useMultipleLoadingStates<T extends Record<string, unknown>>(
+  keys: (keyof T)[],
+): Record<keyof T, UseLoadingStateReturn> {
+  const states: Partial<Record<keyof T, UseLoadingStateReturn>> = {};
+
+  keys.forEach((key) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    states[key] = useLoadingState();
+  });
+
+  return states as Record<keyof T, UseLoadingStateReturn>;
+}

package/src/lib/consentService.ts

@@ -0,0 +1,137 @@
+'use client';
+
+import { ConsentRecord, ConsentHistoryEntry } from '@/types';
+import { v4 as uuidv4 } from 'uuid';
+import { storage } from './storage';
+
+// In a real implementation, this would connect to a database
+// For demo purposes, we're using localStorage
+
+const CONSENT_STORAGE_KEY = 'ndpr_consent_records';
+const CONSENT_HISTORY_KEY = 'ndpr_consent_history';
+
+// Helper function to get consent history
+const getConsentHistoryHelper = (): ConsentHistoryEntry[] => {
+  return storage.getItem<ConsentHistoryEntry[]>(CONSENT_HISTORY_KEY, []) || [];
+};
+
+export const consentService = {
+  // Save a new consent record
+  saveConsent: (consents: Record<string, boolean>, userId?: string): ConsentRecord => {
+    const consentRecord: ConsentRecord = {
+      id: uuidv4(),
+      userId,
+      consents,
+      timestamp: new Date(),
+      ipAddress: 'Collected server-side in real implementation',
+      userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : 'Unknown',
+      version: '1.0',
+    };
+
+    // Store in localStorage for demo
+    // Save as current consent
+    if (!storage.setItem(CONSENT_STORAGE_KEY, consentRecord)) {
+      throw new Error('Failed to save consent record');
+    }
+    
+    // Add to history
+    const historyEntry: ConsentHistoryEntry = {
+      timestamp: new Date(),
+      consents,
+      action: 'granted',
+      ipAddress: 'Collected server-side in real implementation',
+      userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : 'Unknown',
+      version: '1.0',
+    };
+    
+    const history = getConsentHistoryHelper();
+    history.push(historyEntry);
+    if (!storage.setItem(CONSENT_HISTORY_KEY, history)) {
+      throw new Error('Failed to save consent history');
+    }
+
+    return consentRecord;
+  },
+
+  // Get the current consent record
+  getCurrentConsent: (): ConsentRecord | null => {
+    return storage.getItem<ConsentRecord>(CONSENT_STORAGE_KEY);
+  },
+
+  // Get consent history
+  getConsentHistory: (): ConsentHistoryEntry[] => {
+    return getConsentHistoryHelper();
+  },
+
+  // Update consent with change reason
+  updateConsent: (
+    consents: Record<string, boolean>, 
+    changeReason?: string,
+    userId?: string
+  ): ConsentRecord => {
+    // Get the previous consent to determine the action
+    const previousConsent = consentService.getCurrentConsent();
+    
+    // Create the new consent record
+    const consentRecord: ConsentRecord = {
+      id: uuidv4(),
+      userId,
+      consents,
+      timestamp: new Date(),
+      ipAddress: 'Collected server-side in real implementation',
+      userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : 'Unknown',
+      version: '1.0',
+    };
+
+    // Store in localStorage for demo
+    // Save as current consent
+    if (!storage.setItem(CONSENT_STORAGE_KEY, consentRecord)) {
+      throw new Error('Failed to save consent record');
+    }
+    
+    // Determine the action type
+    let action: 'granted' | 'revoked' | 'updated' = 'updated';
+    if (!previousConsent) {
+      action = 'granted';
+    } else {
+      const allRevoked = Object.values(consents).every(v => !v);
+      if (allRevoked) {
+        action = 'revoked';
+      }
+    }
+    
+    // Add to history
+    const historyEntry: ConsentHistoryEntry = {
+      timestamp: new Date(),
+      consents,
+      action,
+      ipAddress: 'Collected server-side in real implementation',
+      userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : 'Unknown',
+      version: '1.0',
+    };
+    
+    const history = getConsentHistoryHelper();
+    history.push(historyEntry);
+    if (!storage.setItem(CONSENT_HISTORY_KEY, history)) {
+      throw new Error('Failed to save consent history');
+    }
+
+    return consentRecord;
+  },
+
+  // Clear all consent data (for testing/development)
+  clearConsentData: (): boolean => {
+    const clearedCurrent = storage.removeItem(CONSENT_STORAGE_KEY);
+    const clearedHistory = storage.removeItem(CONSENT_HISTORY_KEY);
+    return clearedCurrent && clearedHistory;
+  },
+
+  // Check if a specific consent is granted
+  hasConsent: (type: string): boolean => {
+    const current = consentService.getCurrentConsent();
+    if (!current) return false;
+    return current.consents[type] === true;
+  }
+};
+
+export default consentService;