@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/use-local-storage.tsx

@@ -1,71 +0,0 @@
-import { useState, useEffect } from 'react'
-
-// Local storage hook with error handling and SSR support
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T
-): [T | undefined, (value: T | undefined | ((val: T | undefined) => T | undefined)) => void] {
-  // State to store our value
-  // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState<T | undefined>(() => {
-    if (typeof window === 'undefined') {
-      return initialValue
-    }
-    
-    try {
-      // Get from local storage by key
-      const item = window.localStorage.getItem(key)
-      // Parse stored json or if none return initialValue
-      return item ? JSON.parse(item) : initialValue
-    } catch (error) {
-      // If error also return initialValue
-      console.error(`Error reading localStorage key "${key}":`, error)
-      return initialValue
-    }
-  })
-
-  // Return a wrapped version of useState's setter function that persists the new value to localStorage
-  const setValue = (value: T | undefined | ((val: T | undefined) => T | undefined)) => {
-    try {
-      // Allow value to be a function so we have the same API as useState
-      const valueToStore = value instanceof Function ? value(storedValue) : value
-      
-      // Save state
-      setStoredValue(valueToStore)
-      
-      // Save to local storage
-      if (typeof window !== 'undefined') {
-        if (valueToStore === undefined) {
-          window.localStorage.removeItem(key)
-        } else {
-          window.localStorage.setItem(key, JSON.stringify(valueToStore))
-        }
-      }
-    } catch (error) {
-      // A more advanced implementation would handle the error case
-      console.error(`Error setting localStorage key "${key}":`, error)
-    }
-  }
-
-  // Listen for changes to localStorage from other tabs/windows
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return
-    }
-
-    const handleStorageChange = (e: StorageEvent) => {
-      if (e.key === key && e.newValue !== null) {
-        try {
-          setStoredValue(JSON.parse(e.newValue))
-        } catch (error) {
-          console.error(`Error parsing localStorage value for key "${key}":`, error)
-        }
-      }
-    }
-
-    window.addEventListener('storage', handleStorageChange)
-    return () => window.removeEventListener('storage', handleStorageChange)
-  }, [key])
-
-  return [storedValue, setValue]
-}

package/src/use-paddle.ts

@@ -1,138 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getPaddleInstance } from '@/lib/paddle';
-import type { Paddle } from '@paddle/paddle-js';
-
-interface UsePaddleReturn {
-  paddle: Paddle | null;
-  isLoading: boolean;
-  error: string | null;
-  openCheckout: (planId: string) => Promise<void>;
-}
-
-/**
- * Custom hook for Paddle integration
- * Handles Paddle initialization and checkout operations
- */
-export function usePaddle(): UsePaddleReturn {
-  const [paddle, setPaddle] = useState<Paddle | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Initialize Paddle on mount
-  useEffect(() => {
-    let mounted = true;
-
-    const initPaddle = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-
-        const paddleInstance = await getPaddleInstance();
-        
-        if (mounted) {
-          if (paddleInstance) {
-            setPaddle(paddleInstance);
-          } else {
-            setError('Failed to initialize Paddle');
-          }
-        }
-      } catch (err) {
-        if (mounted) {
-          setError(err instanceof Error ? err.message : 'Unknown error');
-        }
-      } finally {
-        if (mounted) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    initPaddle();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  /**
-   * Open Paddle checkout for a specific plan
-   */
-  const openCheckout = async (planId: string) => {
-    if (!paddle) {
-      throw new Error('Paddle not initialized');
-    }
-
-    try {
-      // Call our API to handle the checkout
-      const response = await fetch('/api/paddle', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ plan: planId }),
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(errorText || 'Failed to create checkout');
-      }
-
-      const result = await response.json();
-      
-      if (!result.success) {
-        throw new Error(result.message || 'Checkout failed');
-      }
-
-      // For mock mode, we need to manually trigger checkout
-      if (process.env.NEXT_PUBLIC_USE_MOCK_PADDLE === 'true') {
-        console.log('🧪 [Hook] Mock mode detected, triggering checkout');
-        
-        // Import paddle config to get price ID
-        const { PADDLE_CONFIG } = await import('@/lib/paddle');
-        const priceId = PADDLE_CONFIG.priceIds[planId as keyof typeof PADDLE_CONFIG.priceIds];
-        
-        console.log('🧪 [Hook] Using price ID:', priceId, 'for plan:', planId);
-        console.log('🧪 [Hook] Paddle instance:', paddle);
-        
-        // Trigger mock checkout
-        const checkoutData = {
-          items: [{ priceId, quantity: 1 }],
-          settings: {
-            displayMode: 'overlay' as const,
-            theme: 'light' as const,
-            locale: 'en' as const,
-            successUrl: `${window.location.origin}/dashboard?success=true`
-          },
-          customData: {
-            planId,
-            userId: 'test_user',
-            timestamp: new Date().toISOString()
-          }
-        };
-        
-        console.log('🧪 [Hook] Opening checkout with data:', checkoutData);
-        
-        try {
-          paddle.Checkout.open(checkoutData);
-          console.log('🧪 [Hook] Checkout.open called successfully');
-        } catch (checkoutError) {
-          console.error('🧪 [Hook] Checkout.open error:', checkoutError);
-        }
-      }
-
-      // Checkout is opened inline by Paddle
-      console.log('✅ Paddle checkout opened for plan:', planId);
-      
-    } catch (error) {
-      console.error('❌ Checkout error:', error);
-      throw error;
-    }
-  };
-
-  return {
-    paddle,
-    isLoading,
-    error,
-    openCheckout,
-  };
-}

package/src/use-performance-optimizer.ts

@@ -1,389 +0,0 @@
-"use client";
-
-import * as React from "react";
-// Performance profiler implementation
-const performanceProfiler = {
-  getPerformanceSummary: () => ({}),
-  getMeasurements: (type: string) => [] as any[],
-  measureComponent: (name: string, callback: () => void) => {
-    const start = performance.now();
-    callback();
-    const duration = performance.now() - start;
-    return { name, duration };
-  }
-};
-
-// Performance optimization hooks
-export function usePerformanceOptimizer() {
-  const [optimizations, setOptimizations] = React.useState<OptimizationSuggestion[]>([]);
-  const [isAnalyzing, setIsAnalyzing] = React.useState(false);
-
-  const analyzePerformance = React.useCallback(async () => {
-    setIsAnalyzing(true);
-    
-    try {
-      const metrics = performanceProfiler.getPerformanceSummary();
-      const suggestions: OptimizationSuggestion[] = [];
-
-      // Analyze component render times
-      const componentMetrics = performanceProfiler.getMeasurements('component');
-      if (componentMetrics.length > 0) {
-        const slowComponents = componentMetrics
-          .filter(m => m.duration > 16.67) // Slower than 60fps
-          .sort((a, b) => b.duration - a.duration)
-          .slice(0, 5);
-
-        slowComponents.forEach(component => {
-          suggestions.push({
-            type: 'component',
-            severity: component.duration > 50 ? 'high' : 'medium',
-            title: `Slow component: ${component.name}`,
-            description: `Component takes ${component.duration.toFixed(2)}ms to render`,
-            solution: 'Consider using React.memo, useMemo, or useCallback',
-            impact: 'high',
-          });
-        });
-      }
-
-      // Analyze memory usage
-      if ('memory' in performance) {
-        const memory = (performance as any).memory;
-        const usagePercent = (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100;
-        
-        if (usagePercent > 80) {
-          suggestions.push({
-            type: 'memory',
-            severity: 'high',
-            title: 'High memory usage',
-            description: `Memory usage is at ${usagePercent.toFixed(1)}%`,
-            solution: 'Review for memory leaks, optimize data structures, use lazy loading',
-            impact: 'high',
-          });
-        }
-      }
-
-      // Analyze layout shifts
-      const layoutShifts = performanceProfiler.getMeasurements('layout-shift');
-      if (layoutShifts.length > 0) {
-        const totalShift = layoutShifts.reduce((sum, shift) => sum + (shift.value || 0), 0);
-        
-        if (totalShift > 0.1) {
-          suggestions.push({
-            type: 'layout',
-            severity: 'medium',
-            title: 'Layout shifts detected',
-            description: `Cumulative Layout Shift: ${totalShift.toFixed(3)}`,
-            solution: 'Add dimensions to images, reserve space for dynamic content',
-            impact: 'medium',
-          });
-        }
-      }
-
-      // Analyze bundle size (if available)
-      if (typeof window !== 'undefined' && window.performance) {
-        const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
-        const jsResources = resources.filter(r => r.name.includes('.js'));
-        const largeResources = jsResources.filter(r => r.transferSize > 100000); // >100KB
-        
-        if (largeResources.length > 0) {
-          suggestions.push({
-            type: 'bundle',
-            severity: 'medium',
-            title: 'Large JavaScript bundles',
-            description: `${largeResources.length} JavaScript files exceed 100KB`,
-            solution: 'Implement code splitting, lazy loading, and tree shaking',
-            impact: 'medium',
-          });
-        }
-      }
-
-      setOptimizations(suggestions);
-    } catch (error) {
-      console.error('Performance analysis failed:', error);
-    } finally {
-      setIsAnalyzing(false);
-    }
-  }, []);
-
-  return {
-    optimizations,
-    isAnalyzing,
-    analyzePerformance,
-  };
-}
-
-// Hook for render optimization
-export function useRenderOptimization<T>(
-  value: T,
-  dependencies: React.DependencyList
-): T {
-  const memoizedValue = React.useMemo(() => value, dependencies);
-  
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'development') {
-      const componentName = 'useRenderOptimization';
-      performanceProfiler.measureComponent(componentName, () => {
-        // Measure the impact of memoization
-      });
-    }
-  }, dependencies);
-
-  return memoizedValue;
-}
-
-// Hook for debounced performance tracking
-export function useDebouncePerformance<T extends (...args: any[]) => void>(
-  callback: T,
-  delay: number = 300
-): T {
-  const timeoutRef = React.useRef<NodeJS.Timeout>();
-  
-  const debouncedCallback = React.useCallback(
-    (...args: Parameters<T>) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      
-      timeoutRef.current = setTimeout(() => {
-        performanceProfiler.measureComponent('debounced-callback', () => {
-          callback(...args);
-        });
-      }, delay);
-    },
-    [callback, delay]
-  ) as T;
-
-  React.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  return debouncedCallback;
-}
-
-// Hook for throttled performance tracking
-export function useThrottlePerformance<T extends (...args: any[]) => void>(
-  callback: T,
-  delay: number = 100
-): T {
-  const lastCallRef = React.useRef<number>(0);
-  
-  const throttledCallback = React.useCallback(
-    (...args: Parameters<T>) => {
-      const now = Date.now();
-      
-      if (now - lastCallRef.current >= delay) {
-        lastCallRef.current = now;
-        performanceProfiler.measureComponent('throttled-callback', () => {
-          callback(...args);
-        });
-      }
-    },
-    [callback, delay]
-  ) as T;
-
-  return throttledCallback;
-}
-
-// Hook for measuring component lifecycle
-export function useComponentLifecycleTracking(componentName: string) {
-  const mountTime = React.useRef<number>(0);
-  const updateCount = React.useRef<number>(0);
-
-  React.useEffect(() => {
-    // Component mount
-    mountTime.current = performance.now();
-    
-    performanceProfiler.measureComponent(`${componentName}-mount`, () => {
-      // Measure mount time
-    });
-
-    return () => {
-      // Component unmount
-      const lifetime = performance.now() - mountTime.current;
-      performanceProfiler.measureComponent(`${componentName}-unmount`, () => {
-        // Record component lifetime
-      });
-    };
-  }, [componentName]);
-
-  React.useEffect(() => {
-    // Component update
-    updateCount.current++;
-    
-    if (updateCount.current > 1) {
-      performanceProfiler.measureComponent(`${componentName}-update`, () => {
-        // Measure update time
-      });
-    }
-  });
-
-  return {
-    mountTime: mountTime.current,
-    updateCount: updateCount.current,
-  };
-}
-
-// Hook for virtual scrolling optimization
-export function useVirtualScrolling<T>(
-  items: T[],
-  itemHeight: number,
-  containerHeight: number,
-  overscan: number = 3
-) {
-  const [scrollTop, setScrollTop] = React.useState(0);
-  
-  const visibleRange = React.useMemo(() => {
-    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-    const endIndex = Math.min(
-      items.length - 1,
-      Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
-    );
-    
-    return { startIndex, endIndex };
-  }, [scrollTop, itemHeight, containerHeight, overscan, items.length]);
-
-  const visibleItems = React.useMemo(() => {
-    return items.slice(visibleRange.startIndex, visibleRange.endIndex + 1);
-  }, [items, visibleRange]);
-
-  const totalHeight = items.length * itemHeight;
-  const offsetY = visibleRange.startIndex * itemHeight;
-
-  return {
-    visibleItems,
-    totalHeight,
-    offsetY,
-    startIndex: visibleRange.startIndex,
-    endIndex: visibleRange.endIndex,
-    setScrollTop,
-  };
-}
-
-// Hook for image lazy loading optimization
-export function useLazyImageOptimization(src: string, threshold: number = 0.1) {
-  const [isLoaded, setIsLoaded] = React.useState(false);
-  const [isIntersecting, setIsIntersecting] = React.useState(false);
-  const imgRef = React.useRef<HTMLImageElement>(null);
-
-  React.useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsIntersecting(true);
-          
-          // Measure image load time
-          const startTime = performance.now();
-          const img = new Image();
-          
-          img.onload = () => {
-            const loadTime = performance.now() - startTime;
-            performanceProfiler.measureComponent('image-load', () => {
-              // Record image load time
-            });
-            setIsLoaded(true);
-          };
-          
-          img.src = src;
-          observer.disconnect();
-        }
-      },
-      { threshold }
-    );
-
-    if (imgRef.current) {
-      observer.observe(imgRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, [src, threshold]);
-
-  return {
-    imgRef,
-    isLoaded,
-    isIntersecting,
-    shouldLoad: isIntersecting,
-  };
-}
-
-// Performance optimization interfaces
-interface OptimizationSuggestion {
-  type: 'component' | 'memory' | 'layout' | 'bundle' | 'network';
-  severity: 'low' | 'medium' | 'high';
-  title: string;
-  description: string;
-  solution: string;
-  impact: 'low' | 'medium' | 'high';
-}
-
-// Hook for automatic performance optimization
-export function useAutoPerformanceOptimization() {
-  const [isOptimizing, setIsOptimizing] = React.useState(false);
-  const [optimizations, setOptimizations] = React.useState<string[]>([]);
-
-  const applyOptimizations = React.useCallback(async () => {
-    setIsOptimizing(true);
-    const applied: string[] = [];
-
-    try {
-      // Apply automatic optimizations
-      
-      // 1. Prefetch critical resources
-      const criticalResources = document.querySelectorAll('link[rel="preload"]');
-      if (criticalResources.length === 0) {
-        // Add preload hints for critical resources
-        const cssLinks = document.querySelectorAll('link[rel="stylesheet"]');
-        cssLinks.forEach(link => {
-          const preloadLink = document.createElement('link');
-          preloadLink.rel = 'preload';
-          preloadLink.href = (link as HTMLLinkElement).href;
-          preloadLink.as = 'style';
-          document.head.appendChild(preloadLink);
-        });
-        applied.push('Added preload hints for CSS');
-      }
-
-      // 2. Optimize images
-      const images = document.querySelectorAll('img:not([loading])');
-      images.forEach(img => {
-        (img as HTMLImageElement).loading = 'lazy';
-      });
-      if (images.length > 0) {
-        applied.push(`Applied lazy loading to ${images.length} images`);
-      }
-
-      // 3. Add intersection observers for below-fold content
-      const belowFoldElements = document.querySelectorAll('[data-optimize="lazy"]');
-      belowFoldElements.forEach(element => {
-        const observer = new IntersectionObserver(
-          ([entry]) => {
-            if (entry.isIntersecting) {
-              element.classList.add('optimized');
-              observer.disconnect();
-            }
-          },
-          { threshold: 0.1 }
-        );
-        observer.observe(element);
-      });
-      if (belowFoldElements.length > 0) {
-        applied.push(`Added intersection observers to ${belowFoldElements.length} elements`);
-      }
-
-      setOptimizations(applied);
-    } catch (error) {
-      console.error('Auto-optimization failed:', error);
-    } finally {
-      setIsOptimizing(false);
-    }
-  }, []);
-
-  return {
-    isOptimizing,
-    optimizations,
-    applyOptimizations,
-  };
-}