@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/use-paddle.ts

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

@@ -0,0 +1,379 @@
+"use client";
+
+import * as React from "react";
+import { performanceProfiler } from "@/lib/performance-profiler";
+
+// 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,
+  };
+}

package/src/use-pro-access.ts

@@ -0,0 +1,141 @@
+// Pro Access Hook
+// Kullanıcının pro componentlere erişim durumunu kontrol eder
+
+import React from 'react'
+import { useSession } from 'next-auth/react'
+import { useQuery } from '@tanstack/react-query'
+import { getComponentAccess } from '@/lib/component-metadata'
+
+export interface UserSubscription {
+  userId: string
+  plan: 'free' | 'pro_monthly' | 'pro_annual' | 'pro_lifetime'
+  status: 'active' | 'expired' | 'cancelled' | 'trial'
+  expiresAt: Date | null // lifetime için null
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface ProAccessStatus {
+  hasProAccess: boolean
+  subscription: UserSubscription | null | undefined
+  isLoading: boolean
+  error: Error | null
+  daysUntilExpiry: number | null
+}
+
+// Subscription durumunu API'den çek
+async function fetchSubscriptionStatus(): Promise<UserSubscription | null> {
+  const response = await fetch('/api/user/subscription-status')
+  
+  if (!response.ok) {
+    throw new Error('Subscription status fetch failed')
+  }
+  
+  const data = await response.json()
+  return data.subscription
+}
+
+// Pro erişim durumunu hesapla
+function calculateProAccess(subscription: UserSubscription | null | undefined): {
+  hasProAccess: boolean
+  daysUntilExpiry: number | null
+} {
+  if (!subscription) {
+    return { hasProAccess: false, daysUntilExpiry: null }
+  }
+
+  // Lifetime üyelik
+  if (subscription.plan === 'pro_lifetime') {
+    return { hasProAccess: true, daysUntilExpiry: null }
+  }
+
+  // Aktif olmayan subscription
+  if (subscription.status !== 'active') {
+    return { hasProAccess: false, daysUntilExpiry: null }
+  }
+
+  // Süre kontrolü
+  if (subscription.expiresAt) {
+    const now = new Date()
+    const expiryDate = new Date(subscription.expiresAt)
+    const daysUntilExpiry = Math.ceil((expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+    
+    return {
+      hasProAccess: daysUntilExpiry > 0,
+      daysUntilExpiry: daysUntilExpiry > 0 ? daysUntilExpiry : 0
+    }
+  }
+
+  return { hasProAccess: false, daysUntilExpiry: null }
+}
+
+export function useProAccess(): ProAccessStatus {
+  const { data: session, status } = useSession()
+  
+  const {
+    data: subscription,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['subscription-status', session?.user?.id],
+    queryFn: fetchSubscriptionStatus,
+    enabled: !!session?.user?.id && status === 'authenticated',
+    staleTime: 5 * 60 * 1000, // 5 dakika cache
+    refetchInterval: 10 * 60 * 1000, // 10 dakikada bir otomatik refresh
+  })
+
+  const { hasProAccess, daysUntilExpiry } = calculateProAccess(subscription)
+
+  return {
+    hasProAccess,
+    subscription,
+    isLoading: status === 'loading' || isLoading,
+    error: error as Error | null,
+    daysUntilExpiry
+  }
+}
+
+// Component erişim kontrolü için helper hook
+export function useComponentAccess(componentId: string) {
+  const { hasProAccess, isLoading } = useProAccess()
+  
+  const access = React.useMemo(() => {
+    return getComponentAccess(componentId, hasProAccess ? 'pro' : 'free')
+  }, [componentId, hasProAccess])
+  
+  return {
+    ...access,
+    isLoading,
+    canUse: access.access === 'unlocked',
+    isLocked: access.access === 'locked'
+  }
+}
+
+// Subscription durumu için utility functions
+export function getSubscriptionDisplayName(plan: string): string {
+  switch (plan) {
+    case 'pro_monthly':
+      return 'Pro Monthly'
+    case 'pro_annual':
+      return 'Pro Annual'
+    case 'pro_lifetime':
+      return 'Pro Lifetime'
+    default:
+      return 'Free'
+  }
+}
+
+export function getSubscriptionColor(status: string): string {
+  switch (status) {
+    case 'active':
+      return 'green'
+    case 'trial':
+      return 'blue'
+    case 'expired':
+      return 'red'
+    case 'cancelled':
+      return 'gray'
+    default:
+      return 'gray'
+  }
+}