@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/hooks/use-data-table.ts

@@ -0,0 +1,182 @@
+"use client"
+
+import React from 'react'
+import { ColumnDef } from '@tanstack/react-table'
+
+export interface UseDataTableOptions<TData> {
+  data: TData[]
+  columns: ColumnDef<TData, any>[]
+  searchable?: boolean
+  filterable?: boolean
+  sortable?: boolean
+  pagination?: boolean
+  pageSize?: number
+  enableRowSelection?: boolean
+  enableMultiRowSelection?: boolean
+}
+
+export interface UseDataTableReturn<TData> {
+  // Table state
+  filteredData: TData[]
+  selectedRows: TData[]
+  searchQuery: string
+  currentPage: number
+  totalPages: number
+  
+  // Actions
+  setSearchQuery: (query: string) => void
+  setCurrentPage: (page: number) => void
+  selectRow: (row: TData) => void
+  selectAllRows: () => void
+  clearSelection: () => void
+  exportData: (format?: 'csv' | 'json') => void
+  
+  // Utilities
+  getRowCount: () => number
+  getSelectedCount: () => number
+  isRowSelected: (row: TData) => boolean
+}
+
+export function useDataTable<TData extends Record<string, any>>(
+  options: UseDataTableOptions<TData>
+): UseDataTableReturn<TData> {
+  const {
+    data,
+    searchable = true,
+    pageSize = 10,
+    enableRowSelection = false,
+    enableMultiRowSelection = true,
+  } = options
+
+  const [searchQuery, setSearchQuery] = React.useState('')
+  const [currentPage, setCurrentPage] = React.useState(1)
+  const [selectedRows, setSelectedRows] = React.useState<TData[]>([])
+
+  // Filter data based on search query
+  const filteredData = React.useMemo(() => {
+    if (!searchable || !searchQuery.trim()) {
+      return data
+    }
+
+    return data.filter((row) => {
+      return Object.values(row).some((value) => {
+        if (value == null) return false
+        return String(value).toLowerCase().includes(searchQuery.toLowerCase())
+      })
+    })
+  }, [data, searchQuery, searchable])
+
+  // Calculate pagination
+  const totalPages = Math.ceil(filteredData.length / pageSize)
+  const paginatedData = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize
+    const endIndex = startIndex + pageSize
+    return filteredData.slice(startIndex, endIndex)
+  }, [filteredData, currentPage, pageSize])
+
+  // Row selection handlers
+  const selectRow = React.useCallback((row: TData) => {
+    if (!enableRowSelection) return
+
+    setSelectedRows((prev) => {
+      if (!enableMultiRowSelection) {
+        return [row]
+      }
+
+      const isSelected = prev.some((selectedRow) => 
+        JSON.stringify(selectedRow) === JSON.stringify(row)
+      )
+
+      if (isSelected) {
+        return prev.filter((selectedRow) => 
+          JSON.stringify(selectedRow) !== JSON.stringify(row)
+        )
+      } else {
+        return [...prev, row]
+      }
+    })
+  }, [enableRowSelection, enableMultiRowSelection])
+
+  const selectAllRows = React.useCallback(() => {
+    if (!enableRowSelection) return
+
+    setSelectedRows((prev) => {
+      if (prev.length === filteredData.length) {
+        return []
+      } else {
+        return [...filteredData]
+      }
+    })
+  }, [enableRowSelection, filteredData])
+
+  const clearSelection = React.useCallback(() => {
+    setSelectedRows([])
+  }, [])
+
+  const isRowSelected = React.useCallback((row: TData) => {
+    return selectedRows.some((selectedRow) => 
+      JSON.stringify(selectedRow) === JSON.stringify(row)
+    )
+  }, [selectedRows])
+
+  // Export functionality
+  const exportData = React.useCallback((format: 'csv' | 'json' = 'csv') => {
+    const dataToExport = selectedRows.length > 0 ? selectedRows : filteredData
+
+    if (format === 'csv') {
+      const headers = Object.keys(dataToExport[0] || {})
+      const csvContent = [
+        headers.join(','),
+        ...dataToExport.map(row => 
+          headers.map(header => {
+            const value = row[header]
+            // Escape commas and quotes in CSV
+            if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
+              return `"${value.replace(/"/g, '""')}"`
+            }
+            return value
+          }).join(',')
+        )
+      ].join('\n')
+
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = 'data.csv'
+      link.click()
+    } else if (format === 'json') {
+      const jsonContent = JSON.stringify(dataToExport, null, 2)
+      const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' })
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = 'data.json'
+      link.click()
+    }
+  }, [selectedRows, filteredData])
+
+  // Utility functions
+  const getRowCount = React.useCallback(() => filteredData.length, [filteredData])
+  const getSelectedCount = React.useCallback(() => selectedRows.length, [selectedRows])
+
+  // Reset page when search changes
+  React.useEffect(() => {
+    setCurrentPage(1)
+  }, [searchQuery])
+
+  return {
+    filteredData: paginatedData,
+    selectedRows,
+    searchQuery,
+    currentPage,
+    totalPages,
+    setSearchQuery,
+    setCurrentPage,
+    selectRow,
+    selectAllRows,
+    clearSelection,
+    exportData,
+    getRowCount,
+    getSelectedCount,
+    isRowSelected,
+  }
+}

package/src/hooks/use-docs-pro-access.ts

@@ -0,0 +1,13 @@
+// Mock docs pro access hook for standalone moonui-pro package
+// Bu hook, moonui-pro'nun bağımsız çalışması için basit bir mock'tur
+
+export function useDocsProAccess() {
+  // Production ortamında her zaman pro erişim verilir
+  // Gerçek uygulamada bu hook uygulamanın kendi auth sistemiyle değiştirilmelidir
+  
+  return {
+    hasProAccess: true,
+    isLoading: false,
+    isDocsMode: false, // Standalone package'da docs mode yok
+  };
+}

package/src/hooks/use-license-check.ts

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react'
+
+interface LicenseCheckResult {
+  isValid: boolean
+  isLoading: boolean
+  error?: string
+}
+
+// License kontrolü için hook
+export function useLicenseCheck(): LicenseCheckResult {
+  const [isValid, setIsValid] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    async function checkLicense() {
+      try {
+        // Önce localStorage'dan kontrol et
+        const cachedLicense = localStorage.getItem('moonui_pro_license')
+        if (cachedLicense) {
+          const parsed = JSON.parse(cachedLicense)
+          if (parsed.expiresAt && new Date(parsed.expiresAt) > new Date()) {
+            setIsValid(true)
+            setIsLoading(false)
+            return
+          }
+        }
+
+        // API'den kontrol et
+        const response = await fetch('/api/license/verify', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            key: process.env.NEXT_PUBLIC_MOONUI_LICENSE_KEY || localStorage.getItem('moonui_license_key')
+          })
+        })
+
+        if (response.ok) {
+          const data = await response.json()
+          if (data.valid) {
+            // Cache'e kaydet
+            localStorage.setItem('moonui_pro_license', JSON.stringify({
+              valid: true,
+              expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000) // 24 saat
+            }))
+            setIsValid(true)
+          } else {
+            setError('Invalid license key')
+          }
+        } else {
+          setError('License verification failed')
+        }
+      } catch (err) {
+        console.error('License check error:', err)
+        setError('License verification error')
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    checkLicense()
+  }, [])
+
+  return { isValid, isLoading, error }
+}

package/src/hooks/use-subscription.ts

@@ -0,0 +1,19 @@
+// Mock subscription hook for standalone moonui-pro package
+// Bu hook, moonui-pro'nun bağımsız çalışması için basit bir mock'tur
+
+export function useSubscription() {
+  // Production ortamında her zaman pro erişim verilir
+  // Gerçek uygulamada bu hook uygulamanın kendi auth sistemiyle değiştirilmelidir
+  
+  return {
+    isLoading: false,
+    isAuthenticated: true,
+    isAdmin: false,
+    hasProAccess: true, // Pro package kullanıcıları varsayılan olarak pro erişime sahip
+    subscriptionPlan: "pro" as const,
+    subscription: {
+      status: "active" as const,
+      plan: "pro" as const,
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+// Pro Components Export - Source of Truth: packages/moonui-pro
+// Development environment imports from local packages
+
+// Package access guard - ensures CLI usage
+import "./utils/package-guard"
+
+// Import CSS for auto-loading
+import "./styles/index.css"
+
+// Pro Components (Commercial License) - from packages/moonui-pro
+export * from "./components"
+
+// Enhanced Components - Premium animations and effects
+export * as Enhanced from "./components/enhanced"

package/src/lib/micro-interactions.ts

@@ -0,0 +1,255 @@
+// MoonUI Micro-interactions System
+// Provides consistent hover, focus, and active states across all components
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+/**
+ * Micro-interaction variants for consistent component behavior
+ */
+export const microInteractionVariants = cva("", {
+  variants: {
+    hover: {
+      lift: [
+        "transition-all duration-200 ease-out",
+        "hover:-translate-y-0.5",
+        "hover:shadow-md",
+      ],
+      glow: [
+        "transition-all duration-300 ease-out",
+        "hover:shadow-lg",
+        "hover:shadow-primary/20",
+      ],
+      scale: [
+        "transition-transform duration-200 ease-out",
+        "hover:scale-105",
+        "active:scale-95",
+      ],
+      brightness: [
+        "transition-all duration-200 ease-out",
+        "hover:brightness-110",
+        "active:brightness-95",
+      ],
+      border: [
+        "transition-all duration-200 ease-out",
+        "hover:border-primary/50",
+      ],
+    },
+    focus: {
+      ring: [
+        "focus:outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-primary/50",
+        "focus-visible:ring-offset-2",
+      ],
+      glow: [
+        "focus:outline-none",
+        "focus-visible:shadow-lg",
+        "focus-visible:shadow-primary/30",
+      ],
+      border: [
+        "focus:outline-none",
+        "focus-visible:border-primary",
+        "focus-visible:border-2",
+      ],
+    },
+    active: {
+      scale: [
+        "active:scale-95",
+        "transition-transform duration-100",
+      ],
+      darken: [
+        "active:brightness-90",
+        "transition-all duration-100",
+      ],
+      depress: [
+        "active:translate-y-0.5",
+        "active:shadow-sm",
+        "transition-all duration-100",
+      ],
+    },
+    cursor: {
+      pointer: "cursor-pointer",
+      grab: "cursor-grab active:cursor-grabbing",
+      text: "cursor-text",
+      wait: "cursor-wait",
+      help: "cursor-help",
+      notAllowed: "cursor-not-allowed",
+    },
+  },
+  defaultVariants: {
+    hover: "lift",
+    focus: "ring",
+    active: "scale",
+    cursor: "pointer",
+  },
+});
+
+/**
+ * Spring animation configurations
+ */
+export const springAnimations = {
+  // Smooth spring for general use
+  smooth: {
+    type: "spring",
+    stiffness: 260,
+    damping: 20,
+  },
+  // Bouncy spring for playful interactions
+  bouncy: {
+    type: "spring",
+    stiffness: 300,
+    damping: 15,
+  },
+  // Stiff spring for quick responses
+  stiff: {
+    type: "spring",
+    stiffness: 400,
+    damping: 25,
+  },
+  // Gentle spring for subtle movements
+  gentle: {
+    type: "spring",
+    stiffness: 150,
+    damping: 15,
+  },
+};
+
+/**
+ * Hover animation presets
+ */
+export const hoverAnimations = {
+  lift: {
+    y: -2,
+    transition: springAnimations.smooth,
+  },
+  scale: {
+    scale: 1.05,
+    transition: springAnimations.smooth,
+  },
+  glow: {
+    boxShadow: "0 0 20px rgba(var(--primary), 0.3)",
+    transition: springAnimations.smooth,
+  },
+  rotate: {
+    rotate: 2,
+    transition: springAnimations.bouncy,
+  },
+};
+
+/**
+ * Tap/Click animation presets
+ */
+export const tapAnimations = {
+  scale: {
+    scale: 0.95,
+    transition: { duration: 0.1 },
+  },
+  depress: {
+    y: 1,
+    transition: { duration: 0.1 },
+  },
+};
+
+/**
+ * Focus animation presets
+ */
+export const focusAnimations = {
+  ring: {
+    boxShadow: "0 0 0 2px var(--background), 0 0 0 4px var(--primary)",
+    transition: springAnimations.smooth,
+  },
+  glow: {
+    boxShadow: "0 0 0 3px rgba(var(--primary), 0.3)",
+    transition: springAnimations.smooth,
+  },
+};
+
+/**
+ * Stagger animation for lists
+ */
+export const staggerAnimation = {
+  container: {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+      },
+    },
+  },
+  item: {
+    hidden: { opacity: 0, y: 20 },
+    show: { 
+      opacity: 1, 
+      y: 0,
+      transition: springAnimations.smooth,
+    },
+  },
+};
+
+/**
+ * Page transition animations
+ */
+export const pageTransitions = {
+  fadeIn: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.3 },
+  },
+  slideUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 },
+    transition: springAnimations.smooth,
+  },
+  slideRight: {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 20 },
+    transition: springAnimations.smooth,
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.05 },
+    transition: springAnimations.smooth,
+  },
+};
+
+/**
+ * Skeleton loading animation
+ */
+export const skeletonAnimation = {
+  initial: { opacity: 0.5 },
+  animate: {
+    opacity: [0.5, 0.8, 0.5],
+    transition: {
+      duration: 1.5,
+      repeat: Infinity,
+      ease: "easeInOut",
+    },
+  },
+};
+
+/**
+ * Tooltip animation
+ */
+export const tooltipAnimation = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 },
+  transition: { duration: 0.15 },
+};
+
+/**
+ * Notification animation
+ */
+export const notificationAnimation = {
+  initial: { opacity: 0, y: -20, scale: 0.95 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } },
+  transition: springAnimations.bouncy,
+};
+
+export type MicroInteractionProps = VariantProps<typeof microInteractionVariants>;

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}