@tantainnovative/ndpr-toolkit 1.0.3 → 1.0.4

package/packages/ndpr-toolkit/src/components/consent/ConsentBanner.tsx

@@ -1,270 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ConsentOption, ConsentSettings } from '../../types/consent';
-
-export interface ConsentBannerProps {
-  /**
-   * Array of consent options to display
-   */
-  options: ConsentOption[];
-  
-  /**
-   * Callback function called when user saves their consent choices
-   */
-  onSave: (settings: ConsentSettings) => void;
-  
-  /**
-   * Title displayed on the banner
-   * @default "We Value Your Privacy"
-   */
-  title?: string;
-  
-  /**
-   * Description text displayed on the banner
-   * @default "We use cookies and similar technologies to provide our services and enhance your experience."
-   */
-  description?: string;
-  
-  /**
-   * Text for the accept all button
-   * @default "Accept All"
-   */
-  acceptAllButtonText?: string;
-  
-  /**
-   * Text for the reject all button
-   * @default "Reject All"
-   */
-  rejectAllButtonText?: string;
-  
-  /**
-   * Text for the customize button
-   * @default "Customize"
-   */
-  customizeButtonText?: string;
-  
-  /**
-   * Text for the save button
-   * @default "Save Preferences"
-   */
-  saveButtonText?: string;
-  
-  /**
-   * Position of the banner
-   * @default "bottom"
-   */
-  position?: 'top' | 'bottom' | 'center';
-  
-  /**
-   * Version of the consent form
-   * @default "1.0"
-   */
-  version?: string;
-  
-  /**
-   * Whether to show the banner
-   * If not provided, the banner will be shown if no consent has been saved
-   */
-  show?: boolean;
-  
-  /**
-   * Storage key for consent settings
-   * @default "ndpr_consent"
-   */
-  storageKey?: string;
-  
-  /**
-   * Custom CSS class for the banner
-   */
-  className?: string;
-  
-  /**
-   * Custom CSS class for the buttons
-   */
-  buttonClassName?: string;
-  
-  /**
-   * Custom CSS class for the primary button
-   */
-  primaryButtonClassName?: string;
-  
-  /**
-   * Custom CSS class for the secondary button
-   */
-  secondaryButtonClassName?: string;
-}
-
-export const ConsentBanner: React.FC<ConsentBannerProps> = ({
-  options,
-  onSave,
-  title = "We Value Your Privacy",
-  description = "We use cookies and similar technologies to provide our services and enhance your experience.",
-  acceptAllButtonText = "Accept All",
-  rejectAllButtonText = "Reject All",
-  customizeButtonText = "Customize",
-  saveButtonText = "Save Preferences",
-  position = "bottom",
-  version = "1.0",
-  show,
-  storageKey = "ndpr_consent",
-  className = "",
-  buttonClassName = "",
-  primaryButtonClassName = "",
-  secondaryButtonClassName = ""
-}) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [showCustomize, setShowCustomize] = useState<boolean>(false);
-  const [consents, setConsents] = useState<Record<string, boolean>>({});
-  
-  // Initialize consents from options
-  useEffect(() => {
-    const initialConsents: Record<string, boolean> = {};
-    options.forEach(option => {
-      initialConsents[option.id] = option.defaultValue || false;
-    });
-    setConsents(initialConsents);
-    
-    // Check if consent is already saved
-    if (show === undefined) {
-      const savedConsent = localStorage.getItem(storageKey);
-      setIsOpen(!savedConsent);
-    } else {
-      setIsOpen(show);
-    }
-  }, [options, show, storageKey]);
-  
-  const handleAcceptAll = () => {
-    const allConsents: Record<string, boolean> = {};
-    options.forEach(option => {
-      allConsents[option.id] = true;
-    });
-    saveConsent(allConsents);
-  };
-  
-  const handleRejectAll = () => {
-    const rejectedConsents: Record<string, boolean> = {};
-    options.forEach(option => {
-      rejectedConsents[option.id] = option.required || false;
-    });
-    saveConsent(rejectedConsents);
-  };
-  
-  const handleToggleConsent = (id: string, value: boolean) => {
-    setConsents(prev => ({
-      ...prev,
-      [id]: value
-    }));
-  };
-  
-  const handleSavePreferences = () => {
-    saveConsent(consents);
-  };
-  
-  const saveConsent = (consentValues: Record<string, boolean>) => {
-    const settings: ConsentSettings = {
-      consents: consentValues,
-      timestamp: Date.now(),
-      version,
-      method: showCustomize ? 'customize' : 'banner',
-      hasInteracted: true
-    };
-    
-    // Save to localStorage
-    localStorage.setItem(storageKey, JSON.stringify(settings));
-    
-    // Call onSave callback
-    onSave(settings);
-    
-    // Close the banner
-    setIsOpen(false);
-    setShowCustomize(false);
-  };
-  
-  if (!isOpen) {
-    return null;
-  }
-  
-  const positionClass = 
-    position === 'top' ? 'top-0 left-0 right-0' :
-    position === 'center' ? 'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 max-w-lg' :
-    'bottom-0 left-0 right-0';
-  
-  return (
-    <div 
-      className={`fixed z-50 bg-white dark:bg-gray-800 shadow-lg p-4 border border-gray-200 dark:border-gray-700 ${positionClass} ${className}`}
-      role="dialog"
-      aria-labelledby="consent-banner-title"
-    >
-      <div className="max-w-6xl mx-auto">
-        <h2 id="consent-banner-title" className="text-lg font-bold mb-2">{title}</h2>
-        <p className="mb-4">{description}</p>
-        
-        {showCustomize ? (
-          <div className="mb-4">
-            <div className="space-y-3">
-              {options.map(option => (
-                <div key={option.id} className="flex items-start">
-                  <div className="flex items-center h-5">
-                    <input
-                      id={`consent-${option.id}`}
-                      type="checkbox"
-                      checked={consents[option.id] || false}
-                      onChange={e => handleToggleConsent(option.id, e.target.checked)}
-                      disabled={option.required}
-                      className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                    />
-                  </div>
-                  <div className="ml-3 text-sm">
-                    <label htmlFor={`consent-${option.id}`} className="font-medium">
-                      {option.label} {option.required && <span className="text-red-500">*</span>}
-                    </label>
-                    <p className="text-gray-500 dark:text-gray-400">{option.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-            
-            <div className="mt-4 flex flex-wrap gap-2">
-              <button
-                onClick={handleSavePreferences}
-                className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName} ${primaryButtonClassName}`}
-              >
-                {saveButtonText}
-              </button>
-              <button
-                onClick={() => setShowCustomize(false)}
-                className={`px-4 py-2 bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 ${buttonClassName} ${secondaryButtonClassName}`}
-              >
-                Back
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="flex flex-wrap gap-2">
-            <button
-              onClick={handleAcceptAll}
-              className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName} ${primaryButtonClassName}`}
-            >
-              {acceptAllButtonText}
-            </button>
-            <button
-              onClick={handleRejectAll}
-              className={`px-4 py-2 bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 ${buttonClassName} ${secondaryButtonClassName}`}
-            >
-              {rejectAllButtonText}
-            </button>
-            <button
-              onClick={() => setShowCustomize(true)}
-              className={`px-4 py-2 bg-transparent text-gray-800 dark:text-white hover:underline ${buttonClassName}`}
-            >
-              {customizeButtonText}
-            </button>
-          </div>
-        )}
-        
-        <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-          By clicking "Accept All", you agree to the use of ALL cookies. Visit our Cookie Policy to learn more.
-        </div>
-      </div>
-    </div>
-  );
-};

package/packages/ndpr-toolkit/src/components/consent/ConsentManager.tsx

@@ -1,217 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ConsentOption, ConsentSettings } from '../../types/consent';
-
-export interface ConsentManagerProps {
-  /**
-   * Array of consent options to display
-   */
-  options: ConsentOption[];
-  
-  /**
-   * Current consent settings
-   */
-  settings?: ConsentSettings;
-  
-  /**
-   * Callback function called when user saves their consent choices
-   */
-  onSave: (settings: ConsentSettings) => void;
-  
-  /**
-   * Title displayed in the manager
-   * @default "Manage Your Privacy Settings"
-   */
-  title?: string;
-  
-  /**
-   * Description text displayed in the manager
-   * @default "Update your consent preferences at any time. Required cookies cannot be disabled as they are necessary for the website to function."
-   */
-  description?: string;
-  
-  /**
-   * Text for the save button
-   * @default "Save Preferences"
-   */
-  saveButtonText?: string;
-  
-  /**
-   * Text for the reset button
-   * @default "Reset to Defaults"
-   */
-  resetButtonText?: string;
-  
-  /**
-   * Version of the consent form
-   * @default "1.0"
-   */
-  version?: string;
-  
-  /**
-   * Custom CSS class for the manager
-   */
-  className?: string;
-  
-  /**
-   * Custom CSS class for the buttons
-   */
-  buttonClassName?: string;
-  
-  /**
-   * Custom CSS class for the primary button
-   */
-  primaryButtonClassName?: string;
-  
-  /**
-   * Custom CSS class for the secondary button
-   */
-  secondaryButtonClassName?: string;
-  
-  /**
-   * Whether to show a success message after saving
-   * @default true
-   */
-  showSuccessMessage?: boolean;
-  
-  /**
-   * Success message to display after saving
-   * @default "Your preferences have been saved."
-   */
-  successMessage?: string;
-  
-  /**
-   * Duration to show the success message (in milliseconds)
-   * @default 3000
-   */
-  successMessageDuration?: number;
-}
-
-export const ConsentManager: React.FC<ConsentManagerProps> = ({
-  options,
-  settings,
-  onSave,
-  title = "Manage Your Privacy Settings",
-  description = "Update your consent preferences at any time. Required cookies cannot be disabled as they are necessary for the website to function.",
-  saveButtonText = "Save Preferences",
-  resetButtonText = "Reset to Defaults",
-  version = "1.0",
-  className = "",
-  buttonClassName = "",
-  primaryButtonClassName = "",
-  secondaryButtonClassName = "",
-  showSuccessMessage = true,
-  successMessage = "Your preferences have been saved.",
-  successMessageDuration = 3000
-}) => {
-  const [consents, setConsents] = useState<Record<string, boolean>>({});
-  const [showSuccess, setShowSuccess] = useState<boolean>(false);
-  
-  // Initialize consents from settings or options
-  useEffect(() => {
-    if (settings && settings.consents) {
-      setConsents(settings.consents);
-    } else {
-      const initialConsents: Record<string, boolean> = {};
-      options.forEach(option => {
-        initialConsents[option.id] = option.defaultValue || false;
-      });
-      setConsents(initialConsents);
-    }
-  }, [options, settings]);
-  
-  const handleToggleConsent = (id: string, value: boolean) => {
-    setConsents(prev => ({
-      ...prev,
-      [id]: value
-    }));
-  };
-  
-  const handleSave = () => {
-    const newSettings: ConsentSettings = {
-      consents,
-      timestamp: Date.now(),
-      version,
-      method: 'manager',
-      hasInteracted: true
-    };
-    
-    onSave(newSettings);
-    
-    if (showSuccessMessage) {
-      setShowSuccess(true);
-      setTimeout(() => {
-        setShowSuccess(false);
-      }, successMessageDuration);
-    }
-  };
-  
-  const handleReset = () => {
-    const defaultConsents: Record<string, boolean> = {};
-    options.forEach(option => {
-      defaultConsents[option.id] = option.defaultValue || false;
-    });
-    setConsents(defaultConsents);
-  };
-  
-  return (
-    <div className={`bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 ${className}`}>
-      <h2 className="text-xl font-bold mb-2">{title}</h2>
-      <p className="mb-6 text-gray-600 dark:text-gray-300">{description}</p>
-      
-      <div className="space-y-6">
-        {options.map(option => (
-          <div key={option.id} className="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-0">
-            <div className="flex items-start justify-between">
-              <div>
-                <h3 className="font-medium text-gray-900 dark:text-white">{option.label}</h3>
-                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{option.description}</p>
-              </div>
-              <div className="ml-4 flex-shrink-0">
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input
-                    type="checkbox"
-                    className="sr-only peer"
-                    checked={consents[option.id] || false}
-                    onChange={e => handleToggleConsent(option.id, e.target.checked)}
-                    disabled={option.required}
-                  />
-                  <div className={`w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 ${option.required ? 'opacity-60' : ''}`}></div>
-                  <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-                    {consents[option.id] ? 'Enabled' : 'Disabled'}
-                    {option.required && <span className="text-xs text-red-500 ml-1">(Required)</span>}
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-      
-      {showSuccess && (
-        <div className="mt-4 p-3 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 rounded-md">
-          {successMessage}
-        </div>
-      )}
-      
-      <div className="mt-6 flex flex-wrap gap-3">
-        <button
-          onClick={handleSave}
-          className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName} ${primaryButtonClassName}`}
-        >
-          {saveButtonText}
-        </button>
-        <button
-          onClick={handleReset}
-          className={`px-4 py-2 bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 ${buttonClassName} ${secondaryButtonClassName}`}
-        >
-          {resetButtonText}
-        </button>
-      </div>
-      
-      <div className="mt-4 text-xs text-gray-500 dark:text-gray-400">
-        <p>Last updated: {settings ? new Date(settings.timestamp).toLocaleString() : 'Never'}</p>
-        <p>Version: {version}</p>
-      </div>
-    </div>
-  );
-};

package/packages/ndpr-toolkit/src/components/consent/ConsentStorage.tsx

@@ -1,206 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ConsentSettings, ConsentStorageOptions } from '../../types/consent';
-
-export interface ConsentStorageProps {
-  /**
-   * Current consent settings
-   */
-  settings: ConsentSettings;
-  
-  /**
-   * Storage options for consent settings
-   */
-  storageOptions?: ConsentStorageOptions;
-  
-  /**
-   * Callback function called when settings are loaded from storage
-   */
-  onLoad?: (settings: ConsentSettings | null) => void;
-  
-  /**
-   * Callback function called when settings are saved to storage
-   */
-  onSave?: (settings: ConsentSettings) => void;
-  
-  /**
-   * Whether to automatically save settings to storage
-   * @default true
-   */
-  autoSave?: boolean;
-  
-  /**
-   * Whether to automatically load settings from storage on mount
-   * @default true
-   */
-  autoLoad?: boolean;
-  
-  /**
-   * Children to render
-   * Can be either React nodes or a render prop function that receives storage methods
-   */
-  children?: React.ReactNode | ((props: {
-    loadSettings: () => ConsentSettings | null;
-    saveSettings: (settings: ConsentSettings) => void;
-    clearSettings: () => void;
-    loaded: boolean;
-  }) => React.ReactNode);
-}
-
-export const ConsentStorage = ({
-  settings,
-  storageOptions = {},
-  onLoad,
-  onSave,
-  autoSave = true,
-  autoLoad = true,
-  children
-}: ConsentStorageProps): React.ReactElement | null => {
-  const {
-    storageKey = "ndpr_consent",
-    storageType = "localStorage",
-    cookieOptions = {}
-  } = storageOptions;
-  
-  const [loaded, setLoaded] = useState<boolean>(false);
-  
-  // Load consent settings from storage on mount
-  useEffect(() => {
-    if (autoLoad && !loaded) {
-      loadSettings();
-    }
-  }, [autoLoad, loaded]);
-  
-  // Save consent settings to storage when they change
-  useEffect(() => {
-    if (autoSave && loaded) {
-      saveSettings(settings);
-    }
-  }, [settings, autoSave, loaded]);
-  
-  // Load settings from storage
-  const loadSettings = (): ConsentSettings | null => {
-    let loadedSettings: ConsentSettings | null = null;
-    
-    try {
-      if (storageType === 'localStorage' && typeof window !== 'undefined') {
-        const savedData = localStorage.getItem(storageKey);
-        if (savedData) {
-          loadedSettings = JSON.parse(savedData);
-        }
-      } else if (storageType === 'sessionStorage' && typeof window !== 'undefined') {
-        const savedData = sessionStorage.getItem(storageKey);
-        if (savedData) {
-          loadedSettings = JSON.parse(savedData);
-        }
-      } else if (storageType === 'cookie' && typeof document !== 'undefined') {
-        const cookies = document.cookie.split(';');
-        const consentCookie = cookies.find(cookie => cookie.trim().startsWith(`${storageKey}=`));
-        if (consentCookie) {
-          const cookieValue = consentCookie.split('=')[1];
-          loadedSettings = JSON.parse(decodeURIComponent(cookieValue));
-        }
-      }
-      
-      setLoaded(true);
-      
-      if (onLoad) {
-        onLoad(loadedSettings);
-      }
-    } catch (error) {
-      console.error('Error loading consent settings:', error);
-      setLoaded(true);
-      
-      if (onLoad) {
-        onLoad(null);
-      }
-    }
-    
-    return loadedSettings;
-  };
-  
-  // Save settings to storage
-  const saveSettings = (settingsToSave: ConsentSettings): boolean => {
-    try {
-      const settingsString = JSON.stringify(settingsToSave);
-      
-      if (storageType === 'localStorage' && typeof window !== 'undefined') {
-        localStorage.setItem(storageKey, settingsString);
-      } else if (storageType === 'sessionStorage' && typeof window !== 'undefined') {
-        sessionStorage.setItem(storageKey, settingsString);
-      } else if (storageType === 'cookie' && typeof document !== 'undefined') {
-        const {
-          domain,
-          path = '/',
-          expires = 365,
-          secure = true,
-          sameSite = 'Lax'
-        } = cookieOptions;
-        
-        const expiryDate = new Date();
-        expiryDate.setDate(expiryDate.getDate() + expires);
-        
-        let cookieString = `${storageKey}=${encodeURIComponent(settingsString)}; path=${path}; expires=${expiryDate.toUTCString()}`;
-        
-        if (domain) {
-          cookieString += `; domain=${domain}`;
-        }
-        
-        if (secure) {
-          cookieString += '; secure';
-        }
-        
-        cookieString += `; samesite=${sameSite}`;
-        
-        document.cookie = cookieString;
-      }
-      
-      if (onSave) {
-        onSave(settingsToSave);
-      }
-      
-      return true;
-    } catch (error) {
-      console.error('Error saving consent settings:', error);
-      return false;
-    }
-  };
-  
-  // Clear settings from storage
-  const clearSettings = (): boolean => {
-    try {
-      if (storageType === 'localStorage' && typeof window !== 'undefined') {
-        localStorage.removeItem(storageKey);
-      } else if (storageType === 'sessionStorage' && typeof window !== 'undefined') {
-        sessionStorage.removeItem(storageKey);
-      } else if (storageType === 'cookie' && typeof document !== 'undefined') {
-        const { domain, path = '/' } = cookieOptions;
-        
-        let cookieString = `${storageKey}=; path=${path}; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
-        
-        if (domain) {
-          cookieString += `; domain=${domain}`;
-        }
-        
-        document.cookie = cookieString;
-      }
-      
-      return true;
-    } catch (error) {
-      console.error('Error clearing consent settings:', error);
-      return false;
-    }
-  };
-  
-  // If children is a function, call it with the storage methods
-  if (typeof children === 'function') {
-    return <>{children({
-      loadSettings,
-      saveSettings,
-      clearSettings,
-      loaded
-    })}</>;  
-  }
-  
-  // Otherwise, just render the children
-  return <>{children}</>;
-};