@moontra/moonui-pro 2.6.1 → 2.7.0

package/src/components/multi-step-form/index.tsx

@@ -0,0 +1,223 @@
+"use client"
+
+import React from "react"
+import { useForm, FormProvider, UseFormReturn, FieldValues, DefaultValues } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { MoonUIFormWizardPro, FormWizardProps, WizardStep } from "../form-wizard"
+import { Alert, AlertDescription } from "../ui/alert"
+import { AlertCircle } from "lucide-react"
+
+export interface MultiStepFormField {
+  name: string
+  label: string
+  type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'file' | 'date' | 'time' | 'datetime'
+  placeholder?: string
+  description?: string
+  required?: boolean
+  validation?: z.ZodSchema<any>
+  options?: Array<{ value: string; label: string }>
+  defaultValue?: any
+  disabled?: boolean
+  autoComplete?: string
+  min?: number | string
+  max?: number | string
+  step?: number | string
+  pattern?: string
+  multiple?: boolean
+  accept?: string
+}
+
+export interface MultiStepFormStep extends Omit<WizardStep, 'content' | 'validation'> {
+  fields: MultiStepFormField[]
+  schema?: z.ZodSchema<any>
+  submitLabel?: string
+}
+
+export interface MultiStepFormProps<TFormData extends FieldValues = FieldValues> extends Omit<FormWizardProps, 'steps'> {
+  steps: MultiStepFormStep[]
+  onSubmit: (data: TFormData) => void | Promise<void>
+  defaultValues?: DefaultValues<TFormData>
+  showErrorSummary?: boolean
+  fieldClassName?: string
+  labelClassName?: string
+  errorClassName?: string
+  descriptionClassName?: string
+  renderField?: (field: MultiStepFormField, form: UseFormReturn<TFormData>) => React.ReactNode
+}
+
+function createStepSchema(fields: MultiStepFormField[]): z.ZodSchema<any> {
+  const shape: Record<string, z.ZodSchema<any>> = {}
+
+  fields.forEach(field => {
+    if (field.validation) {
+      shape[field.name] = field.validation
+    } else {
+      let schema: z.ZodSchema<any> = z.any()
+
+      switch (field.type) {
+        case 'email':
+          schema = z.string().email('Invalid email address')
+          break
+        case 'number':
+          schema = z.number()
+          if (field.min !== undefined) schema = (schema as z.ZodNumber).min(Number(field.min))
+          if (field.max !== undefined) schema = (schema as z.ZodNumber).max(Number(field.max))
+          break
+        case 'url':
+          schema = z.string().url('Invalid URL')
+          break
+        case 'tel':
+          schema = z.string().regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number')
+          break
+        case 'checkbox':
+        case 'switch':
+          schema = z.boolean()
+          break
+        default:
+          schema = z.string()
+          if (field.min !== undefined) schema = (schema as z.ZodString).min(Number(field.min))
+          if (field.max !== undefined) schema = (schema as z.ZodString).max(Number(field.max))
+          if (field.pattern) schema = (schema as z.ZodString).regex(new RegExp(field.pattern))
+      }
+
+      if (!field.required) {
+        schema = schema.optional()
+      }
+
+      shape[field.name] = schema
+    }
+  })
+
+  return z.object(shape)
+}
+
+export function MoonUIMultiStepFormPro<TFormData extends FieldValues = FieldValues>({
+  steps,
+  onSubmit,
+  defaultValues,
+  showErrorSummary = true,
+  fieldClassName,
+  labelClassName,
+  errorClassName,
+  descriptionClassName,
+  renderField,
+  ...wizardProps
+}: MultiStepFormProps<TFormData>) {
+  // Create combined schema from all steps
+  const combinedSchema = React.useMemo(() => {
+    const shape: Record<string, z.ZodSchema<any>> = {}
+    
+    steps.forEach(step => {
+      const stepSchema = step.schema || createStepSchema(step.fields)
+      if (stepSchema instanceof z.ZodObject) {
+        Object.assign(shape, stepSchema.shape)
+      }
+    })
+    
+    return z.object(shape)
+  }, [steps])
+
+  const form = useForm<TFormData>({
+    resolver: zodResolver(combinedSchema) as any,
+    defaultValues,
+    mode: 'onChange'
+  })
+
+  const wizardSteps: WizardStep[] = steps.map((step, stepIndex) => ({
+    ...step,
+    validation: async () => {
+      // Validate only the fields in the current step
+      const currentStepFields = step.fields.map(f => f.name)
+      const result = await form.trigger(currentStepFields as any)
+      return result
+    },
+    content: ({ updateStepData }) => {
+      const errors = form.formState.errors
+      const stepErrors = step.fields
+        .map(field => errors[field.name])
+        .filter(Boolean)
+
+      return (
+        <FormProvider {...form}>
+          <form className="space-y-6">
+            {showErrorSummary && stepErrors.length > 0 && (
+              <Alert variant="error">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>
+                  Please fix the errors below before proceeding.
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {step.fields.map(field => {
+              if (renderField) {
+                return <div key={field.name}>{renderField(field, form)}</div>
+              }
+
+              // Default field rendering
+              return (
+                <div key={field.name} className={fieldClassName}>
+                  <label
+                    htmlFor={field.name}
+                    className={cn(
+                      "block text-sm font-medium",
+                      labelClassName
+                    )}
+                  >
+                    {field.label}
+                    {field.required && <span className="text-destructive ml-1">*</span>}
+                  </label>
+
+                  {field.description && (
+                    <p className={cn("text-sm text-muted-foreground mt-1", descriptionClassName)}>
+                      {field.description}
+                    </p>
+                  )}
+
+                  <div className="mt-2">
+                    {/* Field rendering would go here - simplified for brevity */}
+                    <input
+                      {...form.register(field.name as any)}
+                      id={field.name}
+                      type={field.type}
+                      placeholder={field.placeholder}
+                      disabled={field.disabled}
+                      className="w-full px-3 py-2 border rounded-md"
+                    />
+                  </div>
+
+                  {errors[field.name] && (
+                    <p className={cn("text-sm text-destructive mt-1", errorClassName)}>
+                      {errors[field.name]?.message as string}
+                    </p>
+                  )}
+                </div>
+              )
+            })}
+          </form>
+        </FormProvider>
+      )
+    }
+  }))
+
+  const handleComplete = async (stepData: Record<string, any>) => {
+    const isValid = await form.trigger()
+    if (isValid) {
+      await onSubmit(form.getValues())
+    }
+  }
+
+  return (
+    <MoonUIFormWizardPro
+      {...wizardProps}
+      steps={wizardSteps}
+      onComplete={handleComplete}
+    />
+  )
+}
+
+// Utility function for better imports
+function cn(...classes: (string | undefined | false)[]) {
+  return classes.filter(Boolean).join(' ')
+}

package/src/components/phone-number-input/index.tsx

@@ -0,0 +1,335 @@
+"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+import { Phone, Globe, Check, X } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+
+// Ülke kodları ve bayrakları
+const countries = [
+  { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸', format: '(xxx) xxx-xxxx' },
+  { code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: '🇬🇧', format: 'xxxx xxxxxx' },
+  { code: 'TR', name: 'Turkey', dialCode: '+90', flag: '🇹🇷', format: '(xxx) xxx xx xx' },
+  { code: 'DE', name: 'Germany', dialCode: '+49', flag: '🇩🇪', format: 'xxx xxxxxxxx' },
+  { code: 'FR', name: 'France', dialCode: '+33', flag: '🇫🇷', format: 'x xx xx xx xx' },
+  { code: 'IT', name: 'Italy', dialCode: '+39', flag: '🇮🇹', format: 'xxx xxxxxxx' },
+  { code: 'ES', name: 'Spain', dialCode: '+34', flag: '🇪🇸', format: 'xxx xxx xxx' },
+  { code: 'CN', name: 'China', dialCode: '+86', flag: '🇨🇳', format: 'xxx xxxx xxxx' },
+  { code: 'JP', name: 'Japan', dialCode: '+81', flag: '🇯🇵', format: 'xx xxxx xxxx' },
+  { code: 'KR', name: 'South Korea', dialCode: '+82', flag: '🇰🇷', format: 'xx xxxx xxxx' },
+  { code: 'IN', name: 'India', dialCode: '+91', flag: '🇮🇳', format: 'xxxxx xxxxx' },
+  { code: 'BR', name: 'Brazil', dialCode: '+55', flag: '🇧🇷', format: '(xx) xxxxx-xxxx' },
+  { code: 'MX', name: 'Mexico', dialCode: '+52', flag: '🇲🇽', format: 'xxx xxx xxxx' },
+  { code: 'CA', name: 'Canada', dialCode: '+1', flag: '🇨🇦', format: '(xxx) xxx-xxxx' },
+  { code: 'AU', name: 'Australia', dialCode: '+61', flag: '🇦🇺', format: 'xxx xxx xxx' },
+  { code: 'RU', name: 'Russia', dialCode: '+7', flag: '🇷🇺', format: '(xxx) xxx-xx-xx' },
+  { code: 'NL', name: 'Netherlands', dialCode: '+31', flag: '🇳🇱', format: 'x xxxxxxxx' },
+  { code: 'SE', name: 'Sweden', dialCode: '+46', flag: '🇸🇪', format: 'xx xxx xx xx' },
+  { code: 'NO', name: 'Norway', dialCode: '+47', flag: '🇳🇴', format: 'xxx xx xxx' },
+  { code: 'FI', name: 'Finland', dialCode: '+358', flag: '🇫🇮', format: 'xx xxxxxxx' }
+]
+
+export interface PhoneNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  value?: {
+    country: string
+    number: string
+  }
+  onChange?: (value: { country: string; number: string; fullNumber: string; isValid: boolean }) => void
+  defaultCountry?: string
+  countries?: typeof countries
+  showFlags?: boolean
+  showDialCode?: boolean
+  autoFormat?: boolean
+  validateOnChange?: boolean
+  showValidationIcon?: boolean
+  label?: string
+  error?: string
+  helperText?: string
+  required?: boolean
+  className?: string
+  inputClassName?: string
+  selectClassName?: string
+  labelClassName?: string
+  errorClassName?: string
+  allowInternationalFormat?: boolean
+}
+
+// Telefon numarası formatlama
+function formatPhoneNumber(number: string, format: string): string {
+  const cleaned = number.replace(/\D/g, '')
+  let formatted = ''
+  let digitIndex = 0
+  
+  for (let i = 0; i < format.length && digitIndex < cleaned.length; i++) {
+    if (format[i] === 'x') {
+      formatted += cleaned[digitIndex]
+      digitIndex++
+    } else {
+      formatted += format[i]
+    }
+  }
+  
+  return formatted
+}
+
+// Telefon numarası doğrulama
+function validatePhoneNumber(number: string, countryCode: string): boolean {
+  const cleaned = number.replace(/\D/g, '')
+  const country = countries.find(c => c.code === countryCode)
+  
+  if (!country) return false
+  
+  // Format'taki x sayısını say
+  const expectedLength = country.format.split('').filter(c => c === 'x').length
+  
+  return cleaned.length === expectedLength
+}
+
+// Uluslararası format dönüştürme
+function toInternationalFormat(countryCode: string, phoneNumber: string): string {
+  const country = countries.find(c => c.code === countryCode)
+  if (!country) return phoneNumber
+  
+  const cleaned = phoneNumber.replace(/\D/g, '')
+  return `${country.dialCode}${cleaned}`
+}
+
+export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneNumberInputProps>(({
+  value = { country: 'US', number: '' },
+  onChange,
+  defaultCountry = 'US',
+  countries: customCountries,
+  showFlags = true,
+  showDialCode = true,
+  autoFormat = true,
+  validateOnChange = true,
+  showValidationIcon = true,
+  label,
+  error,
+  helperText,
+  required,
+  className,
+  inputClassName,
+  selectClassName,
+  labelClassName,
+  errorClassName,
+  disabled,
+  allowInternationalFormat = true,
+  ...props
+}, ref) => {
+  const [isValid, setIsValid] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  
+  const countryList = customCountries || countries
+  const selectedCountry = countryList.find(c => c.code === value.country) || countryList[0]
+
+  // Doğrulama
+  useEffect(() => {
+    if (validateOnChange && value.number) {
+      const valid = validatePhoneNumber(value.number, value.country)
+      setIsValid(valid)
+    }
+  }, [value, validateOnChange])
+
+  const handleCountryChange = (countryCode: string) => {
+    const fullNumber = allowInternationalFormat 
+      ? toInternationalFormat(countryCode, value.number)
+      : value.number
+      
+    onChange?.({
+      country: countryCode,
+      number: value.number,
+      fullNumber,
+      isValid: validatePhoneNumber(value.number, countryCode)
+    })
+  }
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let newValue = e.target.value
+    
+    if (autoFormat) {
+      // Sadece sayıları al
+      const cleaned = newValue.replace(/\D/g, '')
+      // Format uygula
+      newValue = formatPhoneNumber(cleaned, selectedCountry.format)
+    }
+    
+    const valid = validatePhoneNumber(newValue, value.country)
+    const fullNumber = allowInternationalFormat 
+      ? toInternationalFormat(value.country, newValue)
+      : newValue
+    
+    onChange?.({
+      country: value.country,
+      number: newValue,
+      fullNumber,
+      isValid: valid
+    })
+  }
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    if (!autoFormat) return
+    
+    e.preventDefault()
+    const pastedText = e.clipboardData.getData('text')
+    const cleaned = pastedText.replace(/\D/g, '')
+    const formatted = formatPhoneNumber(cleaned, selectedCountry.format)
+    
+    const valid = validatePhoneNumber(formatted, value.country)
+    const fullNumber = allowInternationalFormat 
+      ? toInternationalFormat(value.country, formatted)
+      : formatted
+    
+    onChange?.({
+      country: value.country,
+      number: formatted,
+      fullNumber,
+      isValid: valid
+    })
+  }
+
+  return (
+    <div ref={ref} className={cn("space-y-2", className)} {...props}>
+      {label && (
+        <Label htmlFor="phone-number" className={labelClassName}>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      
+      <div className="flex gap-2">
+        {/* Ülke Seçici */}
+        <Select
+          value={value.country}
+          onValueChange={handleCountryChange}
+          disabled={disabled}
+        >
+          <SelectTrigger 
+            className={cn(
+              "w-[140px]",
+              error && "border-destructive",
+              selectClassName
+            )}
+          >
+            <SelectValue>
+              <div className="flex items-center gap-2">
+                {showFlags && <span className="text-lg">{selectedCountry.flag}</span>}
+                {showDialCode && <span className="text-sm">{selectedCountry.dialCode}</span>}
+                {!showFlags && !showDialCode && <span className="text-sm">{selectedCountry.code}</span>}
+              </div>
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {countryList.map((country) => (
+              <SelectItem key={country.code} value={country.code}>
+                <div className="flex items-center gap-2">
+                  {showFlags && <span className="text-lg">{country.flag}</span>}
+                  <span className="text-sm">{country.name}</span>
+                  {showDialCode && <span className="text-muted-foreground text-sm">{country.dialCode}</span>}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Telefon Numarası Input */}
+        <div className="relative flex-1">
+          <Input
+            ref={inputRef}
+            id="phone-number"
+            type="tel"
+            value={value.number}
+            onChange={handleNumberChange}
+            onPaste={handlePaste}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            placeholder={selectedCountry.format.replace(/x/g, '•')}
+            className={cn(
+              "pr-10",
+              error && "border-destructive",
+              inputClassName
+            )}
+            disabled={disabled}
+          />
+          
+          {/* Doğrulama İkonu */}
+          {showValidationIcon && value.number && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+              <AnimatePresence mode="wait">
+                {isValid ? (
+                  <motion.div
+                    key="valid"
+                    initial={{ scale: 0, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    exit={{ scale: 0, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <Check className="w-4 h-4 text-green-500" />
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="invalid"
+                    initial={{ scale: 0, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    exit={{ scale: 0, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <X className="w-4 h-4 text-destructive" />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Helper Text veya Error */}
+      {(error || helperText) && (
+        <AnimatePresence mode="wait">
+          {error ? (
+            <motion.p
+              key="error"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className={cn("text-sm text-destructive", errorClassName)}
+            >
+              {error}
+            </motion.p>
+          ) : (
+            <motion.p
+              key="helper"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="text-sm text-muted-foreground"
+            >
+              {helperText}
+            </motion.p>
+          )}
+        </AnimatePresence>
+      )}
+
+      {/* Uluslararası Format Gösterimi */}
+      {allowInternationalFormat && value.number && isValid && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="flex items-center gap-2 text-sm text-muted-foreground"
+        >
+          <Globe className="w-4 h-4" />
+          <span>International: {toInternationalFormat(value.country, value.number)}</span>
+        </motion.div>
+      )}
+    </div>
+  )
+})
+
+MoonUIPhoneNumberInputPro.displayName = "MoonUIPhoneNumberInputPro"
+
+// Ülke listesini de export edelim
+export { countries as phoneCountries }