@moontra/moonui 2.1.5 → 2.1.7

package/src/lib/utils.ts

@@ -1,69 +1,6 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+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'
-}

package/src/components/ui/locked-component.tsx

@@ -1,215 +0,0 @@
-// Locked Component UI
-// Pro componentlerin locked state'ini gösteren wrapper component
-
-import React, { useState } from 'react'
-import { cn } from '../../lib/utils'
-import { Button } from './button'
-import { Badge } from './badge'
-import { Lock, Crown, Zap } from 'lucide-react'
-import Link from 'next/link'
-import { useComponentAccess } from '../../use-pro-access'
-
-interface MoonUILockedComponentProps {
-  children: React.ReactNode
-  componentName: string
-  className?: string
-  showPreview?: boolean
-  previewDuration?: number // ms
-}
-
-export function LockedComponent({
-  children,
-  componentName,
-  className,
-  showPreview = true,
-  previewDuration = 2000
-}: LockedComponentProps) {
-  const [isPreviewActive, setIsPreviewActive] = useState(false)
-  const [previewTimeout, setPreviewTimeout] = useState<NodeJS.Timeout | null>(null)
-
-  const handleMouseEnter = () => {
-    if (!showPreview) return
-    
-    setIsPreviewActive(true)
-    
-    // Clear existing timeout
-    if (previewTimeout) {
-      clearTimeout(previewTimeout)
-    }
-    
-    // Set new timeout
-    const timeout = setTimeout(() => {
-      setIsPreviewActive(false)
-    }, previewDuration)
-    
-    setPreviewTimeout(timeout)
-  }
-
-  const handleMouseLeave = () => {
-    if (previewTimeout) {
-      clearTimeout(previewTimeout)
-      setPreviewTimeout(null)
-    }
-    setIsPreviewActive(false)
-  }
-
-  return (
-    <div 
-      className={cn(
-        "relative group cursor-pointer transition-all duration-300",
-        className
-      )}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {/* Component Content */}
-      <div 
-        className={cn(
-          "transition-all duration-300",
-          !isPreviewActive && "blur-sm grayscale-[0.3] opacity-60"
-        )}
-      >
-        {children}
-      </div>
-
-      {/* Overlay */}
-      <div 
-        className={cn(
-          "absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-purple-500/10",
-          "border-2 border-dashed border-amber-400/30 rounded-lg",
-          "flex items-center justify-center",
-          "transition-all duration-300",
-          isPreviewActive ? "opacity-0" : "opacity-100"
-        )}
-      >
-        <div className="text-center space-y-3 p-6">
-          {/* Pro Badge */}
-          <div className="flex justify-center">
-            <Badge 
-              variant="secondary" 
-              className="bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 px-3 py-1"
-            >
-              <Crown className="w-3 h-3 mr-1" />
-              PRO ONLY
-            </Badge>
-          </div>
-
-          {/* Lock Icon */}
-          <div className="flex justify-center">
-            <div className="p-3 rounded-full bg-amber-100 dark:bg-amber-900/30">
-              <Lock className="w-6 h-6 text-amber-600 dark:text-amber-400" />
-            </div>
-          </div>
-
-          {/* Component Name */}
-          <h3 className="font-semibold text-gray-900 dark:text-gray-100">
-            {componentName}
-          </h3>
-
-          {/* Description */}
-          <p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs">
-            This premium component is available with Pro subscription
-          </p>
-
-          {/* Upgrade Button */}
-          <Link href="/pricing">
-            <Button 
-              size="sm" 
-              className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 border-0"
-            >
-              <Zap className="w-4 h-4 mr-2" />
-              Upgrade to Pro
-            </Button>
-          </Link>
-        </div>
-      </div>
-
-      {/* Preview Hint */}
-      {showPreview && !isPreviewActive && (
-        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-          <div className="bg-black/80 text-white text-xs px-2 py-1 rounded">
-            Hover to preview
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Pro Component Wrapper - Otomatik erişim kontrolü ile
-interface ProComponentWrapperProps {
-  children: React.ReactNode
-  componentId: string
-  componentName?: string
-  className?: string
-  fallback?: React.ReactNode
-}
-
-export function ProComponentWrapper({
-  children,
-  componentId,
-  componentName,
-  className,
-  fallback
-}: ProComponentWrapperProps) {
-  const { canUse, isLocked, isLoading } = useComponentAccess(componentId)
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <div className={cn("animate-pulse bg-gray-200 dark:bg-gray-800 rounded-lg h-32", className)}>
-        <div className="flex items-center justify-center h-full">
-          <div className="text-sm text-gray-500">Loading...</div>
-        </div>
-      </div>
-    )
-  }
-
-  // Unlocked - show actual component
-  if (canUse) {
-    return <div className={className}>{children}</div>
-  }
-
-  // Locked - show locked state
-  if (isLocked) {
-    return (
-      <LockedComponent
-        componentName={componentName || componentId}
-        className={className}
-      >
-        {fallback || children}
-      </LockedComponent>
-    )
-  }
-
-  // Default fallback
-  return <div className={className}>{children}</div>
-}
-
-// Pro Badge Component
-export function ProBadge({ className }: { className?: string }) {
-  return (
-    <Badge 
-      variant="secondary"
-      className={cn(
-        "bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 text-xs",
-        className
-      )}
-    >
-      <Crown className="w-3 h-3 mr-1" />
-      PRO
-    </Badge>
-  )
-}
-
-// Free Badge Component  
-export function FreeBadge({ className }: { className?: string }) {
-  return (
-    <Badge 
-      variant="outline"
-      className={cn("border-green-500 text-green-600 dark:text-green-400 text-xs", className)}
-    >
-      FREE
-    </Badge>
-  )
-}

package/src/use-pro-access.ts

@@ -1,141 +0,0 @@
-// 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'
-  }
-}