@moontra/moonui-pro 2.6.1 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/credit-card-input/index.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import React, { useState, useRef, useEffect } from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import { CreditCard, Lock } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+
+export interface CreditCardInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  value?: {
+    number: string
+    expiry: string
+    cvc: string
+    name?: string
+  }
+  onChange?: (value: {
+    number: string
+    expiry: string
+    cvc: string
+    name?: string
+  }) => void
+  showCardPreview?: boolean
+  showCardType?: boolean
+  showSecurityBadge?: boolean
+  autoFormat?: boolean
+  validateOnChange?: boolean
+  labels?: {
+    number?: string
+    expiry?: string
+    cvc?: string
+    name?: string
+  }
+  placeholders?: {
+    number?: string
+    expiry?: string
+    cvc?: string
+    name?: string
+  }
+  errors?: {
+    number?: string
+    expiry?: string
+    cvc?: string
+    name?: string
+  }
+  className?: string
+  inputClassName?: string
+  labelClassName?: string
+  errorClassName?: string
+}
+
+// Kart tipi tespiti için regex patternleri
+const cardPatterns = {
+  visa: /^4/,
+  mastercard: /^5[1-5]/,
+  amex: /^3[47]/,
+  discover: /^6(?:011|5)/,
+  diners: /^3(?:0[0-5]|[68])/,
+  jcb: /^35/,
+  unionpay: /^62/
+}
+
+// Kart numarası formatlama fonksiyonu
+function formatCardNumber(value: string, cardType?: string): string {
+  const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
+  const matches = cardType === 'amex' 
+    ? v.match(/\d{1,4}/g) 
+    : v.match(/\d{1,4}/g)
+  return matches ? matches.join(' ') : v
+}
+
+// Expiry formatlama fonksiyonu
+function formatExpiry(value: string): string {
+  const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
+  if (v.length >= 2) {
+    return v.slice(0, 2) + (v.length > 2 ? '/' + v.slice(2, 4) : '')
+  }
+  return v
+}
+
+// Kart tipi tespiti
+function detectCardType(number: string): string | null {
+  const cleanNumber = number.replace(/\s+/g, '')
+  for (const [type, pattern] of Object.entries(cardPatterns)) {
+    if (pattern.test(cleanNumber)) {
+      return type
+    }
+  }
+  return null
+}
+
+// Luhn algoritması ile kart numarası doğrulama
+function validateCardNumber(number: string): boolean {
+  const cleanNumber = number.replace(/\s+/g, '')
+  if (!/^\d+$/.test(cleanNumber)) return false
+  
+  let sum = 0
+  let isEven = false
+  
+  for (let i = cleanNumber.length - 1; i >= 0; i--) {
+    let digit = parseInt(cleanNumber.charAt(i), 10)
+    
+    if (isEven) {
+      digit *= 2
+      if (digit > 9) {
+        digit -= 9
+      }
+    }
+    
+    sum += digit
+    isEven = !isEven
+  }
+  
+  return sum % 10 === 0
+}
+
+// Expiry doğrulama
+function validateExpiry(expiry: string): boolean {
+  const parts = expiry.split('/')
+  if (parts.length !== 2) return false
+  
+  const month = parseInt(parts[0], 10)
+  const year = parseInt('20' + parts[1], 10)
+  
+  if (month < 1 || month > 12) return false
+  
+  const now = new Date()
+  const expiryDate = new Date(year, month - 1)
+  
+  return expiryDate > now
+}
+
+export const MoonUICreditCardInputPro = React.forwardRef<HTMLDivElement, CreditCardInputProps>(({
+  value = { number: '', expiry: '', cvc: '', name: '' },
+  onChange,
+  showCardPreview = true,
+  showCardType = true,
+  showSecurityBadge = true,
+  autoFormat = true,
+  validateOnChange = false,
+  labels = {},
+  placeholders = {},
+  errors = {},
+  className,
+  inputClassName,
+  labelClassName,
+  errorClassName,
+  disabled,
+  required,
+  ...props
+}, ref) => {
+  const [cardType, setCardType] = useState<string | null>(null)
+  const [focused, setFocused] = useState<string | null>(null)
+  const [localErrors, setLocalErrors] = useState<typeof errors>({})
+  
+  const numberRef = useRef<HTMLInputElement>(null)
+  const expiryRef = useRef<HTMLInputElement>(null)
+  const cvcRef = useRef<HTMLInputElement>(null)
+  const nameRef = useRef<HTMLInputElement>(null)
+
+  // Kart tipini tespit et
+  useEffect(() => {
+    const detectedType = detectCardType(value.number)
+    setCardType(detectedType)
+  }, [value.number])
+
+  // Doğrulama
+  useEffect(() => {
+    if (!validateOnChange) return
+
+    const newErrors: typeof errors = {}
+    
+    if (value.number && !validateCardNumber(value.number)) {
+      newErrors.number = 'Invalid card number'
+    }
+    
+    if (value.expiry && !validateExpiry(value.expiry)) {
+      newErrors.expiry = 'Invalid expiry date'
+    }
+    
+    if (value.cvc && (value.cvc.length < 3 || value.cvc.length > 4)) {
+      newErrors.cvc = 'Invalid CVC'
+    }
+    
+    setLocalErrors(newErrors)
+  }, [value, validateOnChange])
+
+  const handleChange = (field: keyof typeof value, newValue: string) => {
+    let formattedValue = newValue
+    
+    if (autoFormat) {
+      if (field === 'number') {
+        formattedValue = formatCardNumber(newValue, cardType || undefined)
+        // Maksimum uzunluk kontrolü
+        const maxLength = cardType === 'amex' ? 18 : 19 // Boşluklarla birlikte
+        if (formattedValue.length > maxLength) return
+      } else if (field === 'expiry') {
+        formattedValue = formatExpiry(newValue)
+        if (formattedValue.length > 5) return
+      } else if (field === 'cvc') {
+        formattedValue = newValue.replace(/\D/g, '')
+        const maxLength = cardType === 'amex' ? 4 : 3
+        if (formattedValue.length > maxLength) return
+      }
+    }
+    
+    onChange?.({
+      ...value,
+      [field]: formattedValue
+    })
+    
+    // Otomatik geçiş
+    if (autoFormat) {
+      if (field === 'number' && formattedValue.length === (cardType === 'amex' ? 18 : 19)) {
+        expiryRef.current?.focus()
+      } else if (field === 'expiry' && formattedValue.length === 5) {
+        cvcRef.current?.focus()
+      } else if (field === 'cvc' && formattedValue.length === (cardType === 'amex' ? 4 : 3)) {
+        nameRef.current?.focus()
+      }
+    }
+  }
+
+  const displayErrors = { ...localErrors, ...errors }
+
+  return (
+    <div ref={ref} className={cn("space-y-4", className)} {...props}>
+      {showCardPreview && (
+        <motion.div
+          className="relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-gray-700 to-gray-900 p-6 text-white shadow-xl"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <div className="flex justify-between items-start mb-8">
+            <div className="text-lg font-semibold">
+              {cardType ? cardType.toUpperCase() : 'CARD'}
+            </div>
+            <CreditCard className="w-8 h-8" />
+          </div>
+          
+          <div className="space-y-4">
+            <div className="text-xl font-mono tracking-wider">
+              {value.number || '•••• •••• •••• ••••'}
+            </div>
+            
+            <div className="flex justify-between">
+              <div>
+                <div className="text-xs opacity-70">NAME</div>
+                <div className="text-sm uppercase">
+                  {value.name || 'YOUR NAME'}
+                </div>
+              </div>
+              
+              <div>
+                <div className="text-xs opacity-70">EXPIRES</div>
+                <div className="text-sm">
+                  {value.expiry || 'MM/YY'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      <div className="space-y-4">
+        {/* Kart Numarası */}
+        <div className="space-y-1">
+          <Label htmlFor="card-number" className={labelClassName}>
+            {labels.number || 'Card Number'}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </Label>
+          <div className="relative">
+            <Input
+              ref={numberRef}
+              id="card-number"
+              type="text"
+              inputMode="numeric"
+              value={value.number}
+              onChange={(e) => handleChange('number', e.target.value)}
+              onFocus={() => setFocused('number')}
+              onBlur={() => setFocused(null)}
+              placeholder={placeholders.number || '1234 5678 9012 3456'}
+              className={cn(
+                "pr-20",
+                displayErrors.number && "border-destructive",
+                inputClassName
+              )}
+              disabled={disabled}
+            />
+            {showCardType && cardType && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground">
+                {cardType.toUpperCase()}
+              </div>
+            )}
+          </div>
+          {displayErrors.number && (
+            <p className={cn("text-sm text-destructive", errorClassName)}>
+              {displayErrors.number}
+            </p>
+          )}
+        </div>
+
+        {/* Expiry ve CVC */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1">
+            <Label htmlFor="card-expiry" className={labelClassName}>
+              {labels.expiry || 'Expiry Date'}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              ref={expiryRef}
+              id="card-expiry"
+              type="text"
+              inputMode="numeric"
+              value={value.expiry}
+              onChange={(e) => handleChange('expiry', e.target.value)}
+              onFocus={() => setFocused('expiry')}
+              onBlur={() => setFocused(null)}
+              placeholder={placeholders.expiry || 'MM/YY'}
+              className={cn(
+                displayErrors.expiry && "border-destructive",
+                inputClassName
+              )}
+              disabled={disabled}
+            />
+            {displayErrors.expiry && (
+              <p className={cn("text-sm text-destructive", errorClassName)}>
+                {displayErrors.expiry}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-1">
+            <Label htmlFor="card-cvc" className={labelClassName}>
+              {labels.cvc || 'CVC'}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <div className="relative">
+              <Input
+                ref={cvcRef}
+                id="card-cvc"
+                type="text"
+                inputMode="numeric"
+                value={value.cvc}
+                onChange={(e) => handleChange('cvc', e.target.value)}
+                onFocus={() => setFocused('cvc')}
+                onBlur={() => setFocused(null)}
+                placeholder={placeholders.cvc || cardType === 'amex' ? '1234' : '123'}
+                className={cn(
+                  displayErrors.cvc && "border-destructive",
+                  inputClassName
+                )}
+                disabled={disabled}
+              />
+              {showSecurityBadge && (
+                <Lock className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              )}
+            </div>
+            {displayErrors.cvc && (
+              <p className={cn("text-sm text-destructive", errorClassName)}>
+                {displayErrors.cvc}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Kart Sahibi Adı */}
+        <div className="space-y-1">
+          <Label htmlFor="card-name" className={labelClassName}>
+            {labels.name || 'Cardholder Name'}
+          </Label>
+          <Input
+            ref={nameRef}
+            id="card-name"
+            type="text"
+            value={value.name}
+            onChange={(e) => handleChange('name', e.target.value)}
+            onFocus={() => setFocused('name')}
+            onBlur={() => setFocused(null)}
+            placeholder={placeholders.name || 'John Doe'}
+            className={cn(
+              displayErrors.name && "border-destructive",
+              inputClassName
+            )}
+            disabled={disabled}
+          />
+          {displayErrors.name && (
+            <p className={cn("text-sm text-destructive", errorClassName)}>
+              {displayErrors.name}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {showSecurityBadge && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Lock className="w-4 h-4" />
+          <span>Your payment information is secure and encrypted</span>
+        </div>
+      )}
+    </div>
+  )
+})
+
+MoonUICreditCardInputPro.displayName = "MoonUICreditCardInputPro"

package/src/components/form-wizard/form-wizard-context.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from "react"
+import { WizardContextValue, WizardStep, FormWizardProps } from "./types"
+
+const FormWizardContext = createContext<WizardContextValue | null>(null)
+
+export const useFormWizard = () => {
+  const context = useContext(FormWizardContext)
+  if (!context) {
+    throw new Error("useFormWizard must be used within a FormWizardProvider")
+  }
+  return context
+}
+
+interface FormWizardProviderProps {
+  children: React.ReactNode
+  steps: WizardStep[]
+  initialStep?: number
+  onStepChange?: FormWizardProps['onStepChange']
+  onComplete?: FormWizardProps['onComplete']
+  validateOnStepChange?: boolean
+  allowBackNavigation?: boolean
+  allowStepSkip?: boolean
+  autoSave?: boolean
+  autoSaveDelay?: number
+  onAutoSave?: FormWizardProps['onAutoSave']
+  persistData?: boolean
+  storageKey?: string
+}
+
+export const FormWizardProvider: React.FC<FormWizardProviderProps> = ({
+  children,
+  steps,
+  initialStep = 0,
+  onStepChange,
+  onComplete,
+  validateOnStepChange = true,
+  allowBackNavigation = true,
+  allowStepSkip = false,
+  autoSave = false,
+  autoSaveDelay = 2000,
+  onAutoSave,
+  persistData = false,
+  storageKey = "form-wizard-data"
+}) => {
+  const [currentStep, setCurrentStep] = useState(initialStep)
+  const [stepData, setStepData] = useState<Record<string, any>>({})
+  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Load persisted data on mount
+  useEffect(() => {
+    if (persistData && typeof window !== 'undefined') {
+      const savedData = localStorage.getItem(storageKey)
+      if (savedData) {
+        try {
+          const parsed = JSON.parse(savedData)
+          setStepData(parsed.stepData || {})
+          setCurrentStep(parsed.currentStep || 0)
+          setCompletedSteps(new Set(parsed.completedSteps || []))
+        } catch (e) {
+          console.error("Failed to load persisted wizard data:", e)
+        }
+      }
+    }
+  }, [persistData, storageKey])
+
+  // Auto-save functionality
+  useEffect(() => {
+    if (!autoSave || !onAutoSave) return
+
+    const timeoutId = setTimeout(() => {
+      const currentStepData = stepData[steps[currentStep].id]
+      if (currentStepData) {
+        onAutoSave(steps[currentStep].id, currentStepData)
+      }
+    }, autoSaveDelay)
+
+    return () => clearTimeout(timeoutId)
+  }, [stepData, currentStep, autoSave, autoSaveDelay, onAutoSave, steps])
+
+  // Persist data when it changes
+  useEffect(() => {
+    if (persistData && typeof window !== 'undefined') {
+      const dataToSave = {
+        stepData,
+        currentStep,
+        completedSteps: Array.from(completedSteps)
+      }
+      localStorage.setItem(storageKey, JSON.stringify(dataToSave))
+    }
+  }, [stepData, currentStep, completedSteps, persistData, storageKey])
+
+  const validateCurrentStep = useCallback(async (): Promise<boolean> => {
+    const step = steps[currentStep]
+    if (!step.validation) return true
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const isValid = await step.validation()
+      if (!isValid) {
+        setError("Please complete all required fields before proceeding")
+      }
+      return isValid
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Validation failed")
+      return false
+    } finally {
+      setIsLoading(false)
+    }
+  }, [currentStep, steps])
+
+  const updateStepData = useCallback((stepId: string, data: any) => {
+    setStepData(prev => ({
+      ...prev,
+      [stepId]: { ...prev[stepId], ...data }
+    }))
+    setError(null)
+  }, [])
+
+  const goToStep = useCallback(async (stepIndex: number) => {
+    if (stepIndex < 0 || stepIndex >= steps.length) return
+    if (stepIndex === currentStep) return
+
+    const targetStep = steps[stepIndex]
+    const isDisabled = typeof targetStep.isDisabled === 'function' 
+      ? targetStep.isDisabled(currentStep, steps)
+      : targetStep.isDisabled
+
+    if (isDisabled) return
+
+    // Validate current step if moving forward
+    if (validateOnStepChange && stepIndex > currentStep) {
+      const isValid = await validateCurrentStep()
+      if (!isValid) return
+    }
+
+    // Call exit handler for current step
+    const currentStepObj = steps[currentStep]
+    if (currentStepObj.onExit) {
+      await currentStepObj.onExit()
+    }
+
+    // Update completed steps
+    if (stepIndex > currentStep) {
+      setCompletedSteps(prev => new Set([...prev, currentStep]))
+    }
+
+    // Call enter handler for new step
+    if (targetStep.onEnter) {
+      await targetStep.onEnter()
+    }
+
+    const previousStep = currentStep
+    setCurrentStep(stepIndex)
+    onStepChange?.(stepIndex, previousStep)
+  }, [currentStep, steps, validateOnStepChange, validateCurrentStep, onStepChange])
+
+  const goToNext = useCallback(() => {
+    goToStep(currentStep + 1)
+  }, [currentStep, goToStep])
+
+  const goToPrevious = useCallback(() => {
+    if (!allowBackNavigation) return
+    goToStep(currentStep - 1)
+  }, [currentStep, goToStep, allowBackNavigation])
+
+  const completeWizard = useCallback(async () => {
+    const isValid = await validateCurrentStep()
+    if (!isValid) return
+
+    setCompletedSteps(prev => new Set([...prev, currentStep]))
+    
+    if (onComplete) {
+      setIsLoading(true)
+      try {
+        await onComplete(stepData)
+        
+        // Clear persisted data after successful completion
+        if (persistData && typeof window !== 'undefined') {
+          localStorage.removeItem(storageKey)
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to complete wizard")
+      } finally {
+        setIsLoading(false)
+      }
+    }
+  }, [currentStep, stepData, validateCurrentStep, onComplete, persistData, storageKey])
+
+  const resetWizard = useCallback(() => {
+    setCurrentStep(0)
+    setStepData({})
+    setCompletedSteps(new Set())
+    setError(null)
+    
+    if (persistData && typeof window !== 'undefined') {
+      localStorage.removeItem(storageKey)
+    }
+  }, [persistData, storageKey])
+
+  const isStepCompleted = useCallback((stepIndex: number) => {
+    return completedSteps.has(stepIndex)
+  }, [completedSteps])
+
+  const isStepAccessible = useCallback((stepIndex: number) => {
+    if (stepIndex === 0) return true
+    if (allowStepSkip) return true
+    
+    // Check if all previous steps are completed
+    for (let i = 0; i < stepIndex; i++) {
+      if (!completedSteps.has(i) && !steps[i].isOptional) {
+        return false
+      }
+    }
+    
+    return true
+  }, [completedSteps, allowStepSkip, steps])
+
+  const value: WizardContextValue = {
+    steps,
+    currentStep,
+    stepData,
+    isLoading,
+    error,
+    goToNext,
+    goToPrevious,
+    goToStep,
+    updateStepData: (data: any) => updateStepData(steps[currentStep].id, data),
+    validateCurrentStep,
+    completeWizard,
+    resetWizard,
+    isStepCompleted,
+    isStepAccessible,
+    canGoNext: currentStep < steps.length - 1,
+    canGoPrevious: allowBackNavigation && currentStep > 0
+  }
+
+  return (
+    <FormWizardContext.Provider value={value}>
+      {children}
+    </FormWizardContext.Provider>
+  )
+}