@moontra/moonui-pro 2.0.22 → 2.0.23

package/src/use-scroll-animation.ts

@@ -0,0 +1,221 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useInView, useScroll, useTransform } from 'framer-motion'
+
+interface UseScrollAnimationOptions {
+  threshold?: number
+  triggerOnce?: boolean
+  rootMargin?: string
+}
+
+export function useScrollAnimation(options: UseScrollAnimationOptions = {}) {
+  const ref = useRef<HTMLElement>(null)
+  const isInView = useInView(ref, {
+    threshold: options.threshold || 0.1,
+    once: options.triggerOnce ?? true,
+    margin: options.rootMargin || '-100px',
+  })
+
+  return { ref, isInView }
+}
+
+export function useScrollProgress() {
+  const { scrollYProgress } = useScroll()
+  return scrollYProgress
+}
+
+export function useScrollBasedAnimation() {
+  const { scrollY } = useScroll()
+  const y = useTransform(scrollY, [0, 300], [0, -50])
+  const opacity = useTransform(scrollY, [0, 300], [1, 0])
+  const scale = useTransform(scrollY, [0, 300], [1, 0.8])
+
+  return { y, opacity, scale, scrollY }
+}
+
+export function useParallaxScroll(speed: number = 0.5) {
+  const ref = useRef<HTMLElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end start']
+  })
+  
+  const y = useTransform(scrollYProgress, [0, 1], [`-${speed * 100}%`, `${speed * 100}%`])
+  
+  return { ref, y }
+}
+
+export function useScrollDirection() {
+  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down')
+  const [scrollY, setScrollY] = useState(0)
+
+  useEffect(() => {
+    let ticking = false
+
+    const updateScrollDirection = () => {
+      const newScrollY = window.scrollY
+
+      if (Math.abs(newScrollY - scrollY) < 5) {
+        ticking = false
+        return
+      }
+
+      setScrollDirection(newScrollY > scrollY ? 'down' : 'up')
+      setScrollY(newScrollY)
+      ticking = false
+    }
+
+    const handleScroll = () => {
+      if (!ticking) {
+        requestAnimationFrame(updateScrollDirection)
+        ticking = true
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [scrollY])
+
+  return { scrollDirection, scrollY }
+}
+
+export function useScrollToElement() {
+  const scrollToElement = (elementId: string, offset: number = 0) => {
+    const element = document.getElementById(elementId)
+    if (element) {
+      const elementPosition = element.offsetTop - offset
+      window.scrollTo({
+        top: elementPosition,
+        behavior: 'smooth'
+      })
+    }
+  }
+
+  return { scrollToElement }
+}
+
+interface UseInfiniteScrollOptions {
+  threshold?: number
+  rootMargin?: string
+}
+
+export function useInfiniteScroll(
+  callback: () => void,
+  options: UseInfiniteScrollOptions = {}
+) {
+  const ref = useRef<HTMLElement>(null)
+  const isInView = useInView(ref, {
+    threshold: options.threshold || 0.1,
+    margin: options.rootMargin || '100px',
+  })
+
+  useEffect(() => {
+    if (isInView) {
+      callback()
+    }
+  }, [isInView, callback])
+
+  return ref
+}
+
+export function useScrollBasedScale() {
+  const ref = useRef<HTMLElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end start']
+  })
+  
+  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8])
+  const opacity = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0])
+  
+  return { ref, scale, opacity }
+}
+
+export function useScrollBasedRotation() {
+  const ref = useRef<HTMLElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end start']
+  })
+  
+  const rotate = useTransform(scrollYProgress, [0, 1], [0, 360])
+  
+  return { ref, rotate }
+}
+
+export function useScrollTriggeredCounter(
+  endValue: number,
+  duration: number = 2000
+) {
+  const [count, setCount] = useState(0)
+  const [isVisible, setIsVisible] = useState(false)
+  const ref = useRef<HTMLElement>(null)
+  
+  const isInView = useInView(ref, {
+    threshold: 0.5,
+    once: true
+  })
+
+  useEffect(() => {
+    if (isInView && !isVisible) {
+      setIsVisible(true)
+      let startTime: number
+      
+      const animate = (currentTime: number) => {
+        if (!startTime) startTime = currentTime
+        const elapsed = currentTime - startTime
+        const progress = Math.min(elapsed / duration, 1)
+        
+        // Easing function for smooth animation
+        const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+        setCount(Math.floor(easeOutQuart * endValue))
+        
+        if (progress < 1) {
+          requestAnimationFrame(animate)
+        }
+      }
+      
+      requestAnimationFrame(animate)
+    }
+  }, [isInView, endValue, duration, isVisible])
+
+  return { ref, count }
+}
+
+export function useScrollBasedBlur() {
+  const { scrollY } = useScroll()
+  const blur = useTransform(scrollY, [0, 300], [0, 10])
+  
+  return blur
+}
+
+export function useScrollSnapPoints(snapPoints: number[]) {
+  const [currentSnap, setCurrentSnap] = useState(0)
+  
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY
+      const closest = snapPoints.reduce((prev, curr, index) => {
+        return Math.abs(curr - scrollPosition) < Math.abs(snapPoints[prev] - scrollPosition) 
+          ? index 
+          : prev
+      }, 0)
+      setCurrentSnap(closest)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [snapPoints])
+
+  const scrollToSnap = (index: number) => {
+    if (index >= 0 && index < snapPoints.length) {
+      window.scrollTo({
+        top: snapPoints[index],
+        behavior: 'smooth'
+      })
+    }
+  }
+
+  return { currentSnap, scrollToSnap }
+}

package/src/use-subscription.ts

@@ -0,0 +1,37 @@
+import { useSession } from "next-auth/react";
+
+export function useSubscription() {
+  const { data: session, status } = useSession();
+
+  const isLoading = status === "loading";
+  const isAuthenticated = status === "authenticated";
+  
+  // Admin kullanıcılar her zaman pro erişime sahip
+  const isAdmin = session?.user?.role === "admin";
+  
+  // Pro abonelik kontrolü
+  const hasProAccess = isAdmin || session?.user?.subscription?.status === "active";
+  const subscriptionPlan = session?.user?.subscription?.plan || (isAdmin ? "lifetime" : "free");
+  
+  // Debug bilgisi
+  if (process.env.NODE_ENV === 'development') {
+    console.log('🔍 useSubscription Debug:', {
+      email: session?.user?.email,
+      role: session?.user?.role,
+      isAdmin,
+      subscription: session?.user?.subscription,
+      hasProAccess,
+      subscriptionPlan,
+      status
+    });
+  }
+  
+  return {
+    isLoading,
+    isAuthenticated,
+    isAdmin,
+    hasProAccess,
+    subscriptionPlan,
+    subscription: session?.user?.subscription,
+  };
+}

package/src/use-toast.ts

@@ -0,0 +1,32 @@
+// Toast hook - şimdilik basit bir implementasyon
+// Gerçek implementasyonda Toaster component'i ile entegre olacak
+
+interface ToastOptions {
+  title: string;
+  description?: string;
+  variant?: 'default' | 'destructive';
+}
+
+export function toast(options: ToastOptions) {
+  // Şimdilik console'a yazdıralım
+  // Gerçek implementasyonda toast notification gösterilecek
+  console.log('Toast:', options);
+  
+  // Browser'da alert gösterelim (geçici çözüm)
+  if (typeof window !== 'undefined') {
+    const message = options.description 
+      ? `${options.title}\n\n${options.description}`
+      : options.title;
+    
+    // Variant'a göre stil belirle
+    if (options.variant === 'destructive') {
+      console.error(message);
+    } else {
+      console.log(message);
+    }
+  }
+}
+
+export const useToast = () => {
+  return { toast };
+};

package/src/utils/chart-helpers.ts

@@ -0,0 +1,257 @@
+import { ChartDataPoint, ChartSeries } from '../components/advanced-chart'
+
+export interface ChartTheme {
+  colors: string[]
+  backgroundColor: string
+  textColor: string
+  gridColor: string
+  tooltipBackground: string
+  tooltipBorder: string
+}
+
+export const CHART_THEMES: Record<string, ChartTheme> = {
+  default: {
+    colors: ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#f97316', '#84cc16', '#ec4899', '#6366f1'],
+    backgroundColor: '#ffffff',
+    textColor: '#374151',
+    gridColor: '#e5e7eb',
+    tooltipBackground: '#1f2937',
+    tooltipBorder: '#374151',
+  },
+  dark: {
+    colors: ['#60a5fa', '#f87171', '#34d399', '#fbbf24', '#a78bfa', '#22d3ee', '#fb923c', '#a3e635', '#f472b6', '#818cf8'],
+    backgroundColor: '#1f2937',
+    textColor: '#f9fafb',
+    gridColor: '#374151',
+    tooltipBackground: '#374151',
+    tooltipBorder: '#4b5563',
+  },
+  minimal: {
+    colors: ['#000000', '#666666', '#999999', '#cccccc'],
+    backgroundColor: '#ffffff',
+    textColor: '#000000',
+    gridColor: '#f3f4f6',
+    tooltipBackground: '#000000',
+    tooltipBorder: '#000000',
+  },
+}
+
+export function generateChartData(
+  count: number,
+  series: string[],
+  options?: {
+    startDate?: Date
+    interval?: 'hour' | 'day' | 'week' | 'month'
+    trend?: 'up' | 'down' | 'random'
+    baseValue?: number
+    variance?: number
+  }
+): ChartDataPoint[] {
+  const {
+    startDate = new Date(),
+    interval = 'day',
+    trend = 'random',
+    baseValue = 100,
+    variance = 20,
+  } = options || {}
+
+  const data: ChartDataPoint[] = []
+  const current = new Date(startDate)
+
+  for (let i = 0; i < count; i++) {
+    const point: ChartDataPoint = {
+      name: formatDateForInterval(current, interval),
+      timestamp: current.getTime(),
+    }
+
+    series.forEach((seriesName, index) => {
+      let value = baseValue
+
+      if (trend === 'up') {
+        value += (i * 5) + (Math.random() - 0.5) * variance
+      } else if (trend === 'down') {
+        value -= (i * 5) + (Math.random() - 0.5) * variance
+      } else {
+        value += (Math.random() - 0.5) * variance * 2
+      }
+
+      // Add some series-specific variation
+      value += index * 10 + (Math.random() - 0.5) * 10
+
+      point[seriesName] = Math.max(0, Math.round(value))
+    })
+
+    data.push(point)
+
+    // Increment date based on interval
+    switch (interval) {
+      case 'hour':
+        current.setHours(current.getHours() + 1)
+        break
+      case 'day':
+        current.setDate(current.getDate() + 1)
+        break
+      case 'week':
+        current.setDate(current.getDate() + 7)
+        break
+      case 'month':
+        current.setMonth(current.getMonth() + 1)
+        break
+    }
+  }
+
+  return data
+}
+
+function formatDateForInterval(date: Date, interval: 'hour' | 'day' | 'week' | 'month'): string {
+  switch (interval) {
+    case 'hour':
+      return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
+    case 'day':
+      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    case 'week':
+      return `Week ${getWeekNumber(date)}`
+    case 'month':
+      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+    default:
+      return date.toLocaleDateString()
+  }
+}
+
+function getWeekNumber(date: Date): number {
+  const firstDayOfYear = new Date(date.getFullYear(), 0, 1)
+  const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000
+  return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7)
+}
+
+export function calculateMovingAverage(data: ChartDataPoint[], key: string, window: number): ChartDataPoint[] {
+  if (window <= 0 || window > data.length) return data
+
+  return data.map((point, index) => {
+    if (index < window - 1) return point
+
+    const windowData = data.slice(index - window + 1, index + 1)
+    const sum = windowData.reduce((acc, item) => acc + (Number(item[key]) || 0), 0)
+    const average = sum / window
+
+    return {
+      ...point,
+      [`${key}_ma${window}`]: Math.round(average * 100) / 100,
+    }
+  })
+}
+
+export function detectOutliers(data: ChartDataPoint[], key: string, threshold: number = 2): ChartDataPoint[] {
+  const values = data.map(point => Number(point[key]) || 0)
+  const mean = values.reduce((sum, val) => sum + val, 0) / values.length
+  const variance = values.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / values.length
+  const stdDev = Math.sqrt(variance)
+
+  return data.map(point => {
+    const value = Number(point[key]) || 0
+    const zScore = Math.abs((value - mean) / stdDev)
+    
+    return {
+      ...point,
+      [`${key}_outlier`]: zScore > threshold,
+      [`${key}_zscore`]: Math.round(zScore * 100) / 100,
+    }
+  })
+}
+
+export function interpolateData(data: ChartDataPoint[], key: string, method: 'linear' | 'polynomial' = 'linear'): ChartDataPoint[] {
+  const result = [...data]
+  
+  for (let i = 0; i < result.length; i++) {
+    const point = result[i]
+    
+    if (point[key] == null || point[key] === '') {
+      // Find nearest non-null values
+      let prevIndex = i - 1
+      let nextIndex = i + 1
+      
+      while (prevIndex >= 0 && (result[prevIndex][key] == null || result[prevIndex][key] === '')) {
+        prevIndex--
+      }
+      
+      while (nextIndex < result.length && (result[nextIndex][key] == null || result[nextIndex][key] === '')) {
+        nextIndex++
+      }
+      
+      if (prevIndex >= 0 && nextIndex < result.length) {
+        const prevValue = Number(result[prevIndex][key])
+        const nextValue = Number(result[nextIndex][key])
+        
+        if (method === 'linear') {
+          const ratio = (i - prevIndex) / (nextIndex - prevIndex)
+          point[key] = prevValue + (nextValue - prevValue) * ratio
+        }
+      } else if (prevIndex >= 0) {
+        point[key] = result[prevIndex][key]
+      } else if (nextIndex < result.length) {
+        point[key] = result[nextIndex][key]
+      }
+    }
+  }
+  
+  return result
+}
+
+export function aggregateDataByPeriod(
+  data: ChartDataPoint[],
+  period: 'hour' | 'day' | 'week' | 'month',
+  aggregations: Record<string, 'sum' | 'avg' | 'min' | 'max' | 'count'>
+): ChartDataPoint[] {
+  const groups: Record<string, ChartDataPoint[]> = {}
+  
+  data.forEach(point => {
+    const timestamp = point.timestamp ? new Date(point.timestamp as number) : new Date()
+    const key = formatDateForInterval(timestamp, period)
+    
+    if (!groups[key]) {
+      groups[key] = []
+    }
+    groups[key].push(point)
+  })
+  
+  return Object.entries(groups).map(([key, groupData]) => {
+    const result: ChartDataPoint = { name: key }
+    
+    Object.entries(aggregations).forEach(([field, operation]) => {
+      const values = groupData.map(point => Number(point[field]) || 0)
+      
+      switch (operation) {
+        case 'sum':
+          result[field] = values.reduce((sum, val) => sum + val, 0)
+          break
+        case 'avg':
+          result[field] = values.reduce((sum, val) => sum + val, 0) / values.length
+          break
+        case 'min':
+          result[field] = Math.min(...values)
+          break
+        case 'max':
+          result[field] = Math.max(...values)
+          break
+        case 'count':
+          result[field] = values.length
+          break
+      }
+    })
+    
+    return result
+  })
+}
+
+export function exportChartAsImage(
+  chartElement: HTMLElement,
+  filename: string = 'chart',
+  format: 'png' | 'jpeg' | 'svg' = 'png'
+): void {
+  // This would typically use html2canvas or similar library
+  // For now, we'll provide a basic implementation
+  console.log(`Exporting chart as ${format} with filename: ${filename}`)
+  
+  // Implementation would go here
+  // This is a placeholder for the actual export functionality
+}

package/src/utils/cn.ts

@@ -0,0 +1,69 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Utility function using clsx and tailwind-merge
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Date formatting utility
+export function formatDate(date: Date): string {
+  if (isNaN(date.getTime())) {
+    return 'Invalid Date'
+  }
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+// Currency formatting utility
+export function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(amount)
+}
+
+// Text truncation utility
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) {
+    return text
+  }
+  return text.slice(0, maxLength) + '...'
+}
+
+// ID generation utility
+export function generateId(length: number = 8): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
+// Get client IP address from request
+export function getClientIP(request: Request): string {
+  // Check various headers for IP address
+  const forwarded = request.headers.get('x-forwarded-for')
+  const realIP = request.headers.get('x-real-ip')
+  const remoteAddr = request.headers.get('x-remote-addr')
+  
+  if (forwarded) {
+    // x-forwarded-for can contain multiple IPs, take the first one
+    return forwarded.split(',')[0].trim()
+  }
+  
+  if (realIP) {
+    return realIP
+  }
+  
+  if (remoteAddr) {
+    return remoteAddr
+  }
+  
+  // Fallback to a default IP if none found
+  return '127.0.0.1'
+}