@redacto.io/consent-sdk-react 6.0.0 → 7.0.0

package/src/RedactoPrivacyCenter/components/ThemeTransitionOverlay.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { IoSunnyOutline, IoMoonOutline } from 'react-icons/io5';
-import { useTheme } from '../context/theme';
-
-export default function ThemeTransitionOverlay() {
-  const { isTransitioning, targetTheme } = useTheme();
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const iconRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isTransitioning && overlayRef.current && iconRef.current) {
-      const overlay = overlayRef.current;
-      const icon = iconRef.current;
-      
-      // Trigger animation
-      overlay.style.display = 'flex';
-      // Force reflow to ensure display change is applied
-      overlay.offsetHeight;
-      overlay.style.opacity = '1';
-      icon.style.animation = 'none';
-      // Force reflow
-      icon.offsetHeight;
-      icon.style.animation = '';
-      
-      const timeout = setTimeout(() => {
-        if (overlay) {
-          overlay.style.opacity = '0';
-          setTimeout(() => {
-            if (overlay) {
-              overlay.style.display = 'none';
-            }
-          }, 300);
-        }
-      }, 1000);
-
-      return () => clearTimeout(timeout);
-    }
-  }, [isTransitioning, targetTheme]);
-
-  if (!targetTheme) return null;
-
-  const Icon = targetTheme === 'light' ? IoSunnyOutline : IoMoonOutline;
-  // Sun: golden yellow, Moon: soft blue/white
-  const iconColor = targetTheme === 'light' ? '#fbbf24' : '#c7d2fe';
-
-  return (
-    <div
-      ref={overlayRef}
-      className="pc-theme-transition-overlay"
-      style={{
-        display: 'none',
-        opacity: 0,
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none',
-        zIndex: 9999,
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'opacity 0.3s ease',
-      }}
-      aria-hidden="true"
-    >
-      <div
-        ref={iconRef}
-        className={`pc-theme-transition-icon pc-theme-transition-${targetTheme}`}
-        style={{
-          position: 'absolute',
-          bottom: '-150px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          fontSize: '120px',
-          color: iconColor,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Icon size={120} />
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/context/theme.tsx

@@ -1,127 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  type ReactNode,
-} from 'react';
-
-export type Theme = 'light' | 'dark';
-
-type ThemeContextType = {
-  theme: Theme;
-  toggleTheme: () => void;
-  setTheme: (theme: Theme) => void;
-  isTransitioning: boolean;
-  targetTheme: Theme | null;
-};
-
-const THEME_STORAGE_KEY = 'privacy-center-theme';
-
-const ThemeContext = createContext<ThemeContextType | null>(null);
-
-function getInitialTheme(defaultTheme?: Theme): Theme {
-  // If defaultTheme is provided, always use it (takes precedence over sessionStorage)
-  // This ensures that when a parent component explicitly sets a theme, it's respected
-  if (defaultTheme !== undefined) {
-    return defaultTheme;
-  }
-
-  // Otherwise, check sessionStorage first
-  if (typeof window !== 'undefined') {
-    const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
-    if (stored === 'light' || stored === 'dark') {
-      return stored;
-    }
-
-    // Fallback to system preference
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-  }
-
-  return 'light';
-}
-
-type ThemeProviderProps = {
-  children: ReactNode;
-  defaultTheme?: Theme;
-};
-
-export const ThemeProvider = ({ children, defaultTheme }: ThemeProviderProps) => {
-  // Initialize with defaultTheme if provided, otherwise use stored/system preference
-  // When defaultTheme is provided, it takes precedence over sessionStorage
-  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme(defaultTheme));
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const [targetTheme, setTargetTheme] = useState<Theme | null>(null);
-  
-  // Ensure defaultTheme is applied on mount if provided
-  // This handles the case where sessionStorage had a different value
-  useEffect(() => {
-    if (defaultTheme !== undefined) {
-      setThemeState(defaultTheme);
-    }
-  }, []); // Only run on mount
-
-  const setTheme = useCallback((newTheme: Theme) => {
-    if (newTheme !== theme) {
-      setIsTransitioning(true);
-      setTargetTheme(newTheme);
-      setThemeState(newTheme);
-      // Reset transition state after animation completes
-      setTimeout(() => {
-        setIsTransitioning(false);
-        setTargetTheme(null);
-      }, 1000);
-    }
-  }, [theme]);
-
-  const toggleTheme = useCallback(() => {
-    setIsTransitioning(true);
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTargetTheme(newTheme);
-    setThemeState(newTheme);
-    // Reset transition state after animation completes
-    setTimeout(() => {
-      setIsTransitioning(false);
-      setTargetTheme(null);
-    }, 1000);
-  }, [theme]);
-
-  // Apply theme to document and persist to sessionStorage
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-    sessionStorage.setItem(THEME_STORAGE_KEY, theme);
-  }, [theme]);
-
-  // Listen for system theme changes
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      // Only auto-switch if user hasn't explicitly set a preference
-      const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
-      if (!stored) {
-        setThemeState(e.matches ? 'dark' : 'light');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, isTransitioning, targetTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export const useTheme = (): ThemeContextType => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};

package/src/RedactoPrivacyCenter/ui/ThemeToggle.tsx

@@ -1,70 +0,0 @@
-import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PCActionIcon } from './index';
-import { IoSunnyOutline, IoMoonOutline } from 'react-icons/io5';
-import { useTheme } from '../context/theme';
-import { PCTooltip } from './PCTooltip';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-type ThemeToggleProps = {
-  className?: string;
-};
-
-export default function ThemeToggle({ className }: ThemeToggleProps) {
-  const { t } = useTranslation();
-  const { theme, toggleTheme } = useTheme();
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const tooltipLabel =
-    theme === 'light' ? t('switchToDarkMode') : t('switchToLightMode');
-
-  const handleClick = () => {
-    // Capture click position for animation
-    let position: { x: number; y: number };
-    
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      position = { 
-        x: rect.left + rect.width / 2, 
-        y: rect.top + rect.height / 2 
-      };
-    } else {
-      // Fallback to center
-      position = { 
-        x: window.innerWidth / 2, 
-        y: window.innerHeight / 2 
-      };
-    }
-    
-    // Store position globally for ThemeTransitionOverlay to access
-    if (typeof window !== 'undefined') {
-      (window as any).__pcThemeTransitionPosition = position;
-    }
-    
-    toggleTheme();
-  };
-
-  return (
-    <PCTooltip content={tooltipLabel} placement="bottom" color="invert">
-      <div style={{ display: 'inline-flex' }}>
-        <PCActionIcon
-          ref={buttonRef}
-          variant="default"
-          className={className}
-          onClick={handleClick}
-          aria-label={tooltipLabel}
-          style={{ 
-            color: getVar('--pc-text-primary'),
-            transition: 'color 0.3s ease, transform 0.2s ease',
-          }}
-        >
-          {theme === 'light' ? (
-            <IoMoonOutline size={16} />
-          ) : (
-            <IoSunnyOutline size={16} />
-          )}
-        </PCActionIcon>
-      </div>
-    </PCTooltip>
-  );
-}