@moontra/moonui-pro 2.20.1 → 2.20.3

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

@@ -1,406 +0,0 @@
-"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-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 p-6 text-white shadow-xl overflow-hidden"
-          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 text-white/80" />
-          </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 text-white/70">NAME</div>
-                <div className="text-sm uppercase">
-                  {value.name || 'YOUR NAME'}
-                </div>
-              </div>
-              
-              <div>
-                <div className="text-xs text-white/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"