@moontra/moonui-pro 2.6.1 → 2.7.0

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

@@ -0,0 +1,118 @@
+"use client"
+
+import React from "react"
+import { motion } from "framer-motion"
+import { ChevronLeft, ChevronRight, Check, Loader2 } from "lucide-react"
+import { Button } from "../ui/button"
+import { cn } from "../../lib/utils"
+import { useFormWizard } from "./form-wizard-context"
+
+interface FormWizardNavigationProps {
+  className?: string
+  showStepIndicator?: boolean
+  previousText?: string
+  nextText?: string
+  completeText?: string
+  loadingText?: string
+  onPreviousClick?: () => void
+  onNextClick?: () => void
+  onCompleteClick?: () => void
+}
+
+export const FormWizardNavigation: React.FC<FormWizardNavigationProps> = ({
+  className,
+  showStepIndicator = true,
+  previousText = "Previous",
+  nextText = "Next",
+  completeText = "Complete",
+  loadingText = "Processing...",
+  onPreviousClick,
+  onNextClick,
+  onCompleteClick
+}) => {
+  const {
+    steps,
+    currentStep,
+    isLoading,
+    canGoNext,
+    canGoPrevious,
+    goToNext,
+    goToPrevious,
+    completeWizard
+  } = useFormWizard()
+
+  const isLastStep = currentStep === steps.length - 1
+  const currentStepObj = steps[currentStep]
+
+  const handlePrevious = () => {
+    onPreviousClick?.()
+    goToPrevious()
+  }
+
+  const handleNext = () => {
+    if (isLastStep) {
+      onCompleteClick?.()
+      completeWizard()
+    } else {
+      onNextClick?.()
+      goToNext()
+    }
+  }
+
+  return (
+    <div className={cn("flex items-center justify-between", className)}>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handlePrevious}
+          disabled={!canGoPrevious || isLoading}
+          className={cn(
+            "transition-all duration-200",
+            !canGoPrevious && "invisible"
+          )}
+        >
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          {previousText}
+        </Button>
+
+        {showStepIndicator && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="px-3 py-1 text-sm text-muted-foreground"
+          >
+            Step {currentStep + 1} of {steps.length}
+            {currentStepObj.isOptional && (
+              <span className="ml-1 text-xs">(Optional)</span>
+            )}
+          </motion.div>
+        )}
+      </div>
+
+      <Button
+        type="button"
+        onClick={handleNext}
+        disabled={isLoading || (!canGoNext && !isLastStep)}
+        className="min-w-[120px]"
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            {loadingText}
+          </>
+        ) : isLastStep ? (
+          <>
+            <Check className="w-4 h-4 mr-2" />
+            {completeText}
+          </>
+        ) : (
+          <>
+            {nextText}
+            <ChevronRight className="w-4 h-4 ml-1" />
+          </>
+        )}
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,193 @@
+"use client"
+
+import React from "react"
+import { motion } from "framer-motion"
+import { CheckCircle, Circle, XCircle } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { useFormWizard } from "./form-wizard-context"
+import { FormWizardProps } from "./types"
+
+interface FormWizardProgressProps {
+  className?: string
+  progressType?: FormWizardProps['progressType']
+  orientation?: FormWizardProps['orientation']
+  showStepNumbers?: boolean
+  showStepTitles?: boolean
+  stepIconPosition?: FormWizardProps['stepIconPosition']
+  completedStepIcon?: React.ReactNode
+  activeStepIcon?: React.ReactNode
+  errorStepIcon?: React.ReactNode
+}
+
+export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
+  className,
+  progressType = 'linear',
+  orientation = 'horizontal',
+  showStepNumbers = true,
+  showStepTitles = true,
+  stepIconPosition = 'top',
+  completedStepIcon = <CheckCircle className="w-5 h-5" />,
+  activeStepIcon,
+  errorStepIcon = <XCircle className="w-5 h-5" />
+}) => {
+  const { steps, currentStep, isStepCompleted, isStepAccessible, error } = useFormWizard()
+
+  if (progressType === 'linear') {
+    return (
+      <div className={cn(
+        "relative",
+        orientation === 'vertical' ? "flex flex-col space-y-8" : "flex items-center justify-between",
+        className
+      )}>
+        {steps.map((step, index) => {
+          const isActive = index === currentStep
+          const isCompleted = isStepCompleted(index)
+          const isAccessible = isStepAccessible(index)
+          const hasError = isActive && error
+          
+          const StepIcon = typeof step.icon === 'function' 
+            ? step.icon({ isActive, isCompleted })
+            : step.icon
+
+          return (
+            <React.Fragment key={step.id}>
+              <div className={cn(
+                "relative flex items-center",
+                orientation === 'vertical' ? "w-full" : "flex-1"
+              )}>
+                <motion.div
+                  initial={{ scale: 0.8 }}
+                  animate={{ scale: isActive ? 1.1 : 1 }}
+                  className={cn(
+                    "relative z-20 flex items-center justify-center rounded-full border-2 transition-all duration-300",
+                    stepIconPosition === 'inside' ? "w-12 h-12" : "w-10 h-10",
+                    isActive && "border-primary bg-primary text-primary-foreground shadow-lg",
+                    isCompleted && !isActive && "border-primary bg-primary text-primary-foreground",
+                    !isActive && !isCompleted && isAccessible && "border-muted-foreground/50 bg-background text-muted-foreground hover:border-muted-foreground",
+                    !isAccessible && "border-muted bg-muted text-muted-foreground cursor-not-allowed opacity-50",
+                    hasError && "border-destructive bg-destructive text-destructive-foreground"
+                  )}
+                >
+                  {hasError ? (
+                    errorStepIcon
+                  ) : isCompleted && !isActive ? (
+                    completedStepIcon
+                  ) : isActive && activeStepIcon ? (
+                    activeStepIcon
+                  ) : StepIcon ? (
+                    <span className="w-5 h-5 flex items-center justify-center">{StepIcon}</span>
+                  ) : showStepNumbers ? (
+                    <span className="text-sm font-medium">{index + 1}</span>
+                  ) : (
+                    <Circle className="w-4 h-4" />
+                  )}
+                </motion.div>
+
+                {showStepTitles && (
+                  <div className={cn(
+                    "absolute whitespace-nowrap",
+                    orientation === 'vertical' 
+                      ? "left-16 top-1/2 -translate-y-1/2" 
+                      : "top-full mt-2 left-1/2 -translate-x-1/2 text-center"
+                  )}>
+                    <p className={cn(
+                      "text-sm font-medium transition-colors",
+                      isActive && "text-primary",
+                      isCompleted && !isActive && "text-primary",
+                      !isActive && !isCompleted && "text-muted-foreground"
+                    )}>
+                      {step.title}
+                    </p>
+                    {step.description && (
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {step.description}
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                {index < steps.length - 1 && (
+                  <div className={cn(
+                    "absolute transition-all duration-500",
+                    orientation === 'vertical' 
+                      ? "top-12 left-5 w-0.5 h-8" 
+                      : "left-12 right-0 top-1/2 -translate-y-1/2 h-0.5",
+                    isCompleted ? "bg-primary" : "bg-muted"
+                  )} />
+                )}
+              </div>
+            </React.Fragment>
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (progressType === 'dots') {
+    return (
+      <div className={cn("flex items-center justify-center space-x-2", className)}>
+        {steps.map((_, index) => {
+          const isActive = index === currentStep
+          const isCompleted = isStepCompleted(index)
+          
+          return (
+            <motion.div
+              key={index}
+              initial={{ scale: 0.8 }}
+              animate={{ scale: isActive ? 1.2 : 1 }}
+              className={cn(
+                "rounded-full transition-all duration-300",
+                isActive ? "w-3 h-3 bg-primary" : "w-2 h-2",
+                isCompleted && !isActive && "bg-primary/60",
+                !isActive && !isCompleted && "bg-muted"
+              )}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (progressType === 'circular') {
+    const progress = ((currentStep + 1) / steps.length) * 100
+    const circumference = 2 * Math.PI * 40 // radius = 40
+    const strokeDashoffset = circumference - (progress / 100) * circumference
+
+    return (
+      <div className={cn("relative w-32 h-32", className)}>
+        <svg className="w-full h-full -rotate-90">
+          <circle
+            cx="64"
+            cy="64"
+            r="40"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="8"
+            className="text-muted"
+          />
+          <motion.circle
+            cx="64"
+            cy="64"
+            r="40"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="8"
+            strokeDasharray={circumference}
+            initial={{ strokeDashoffset: circumference }}
+            animate={{ strokeDashoffset }}
+            className="text-primary"
+            transition={{ duration: 0.5 }}
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-2xl font-bold">{currentStep + 1}</p>
+            <p className="text-sm text-muted-foreground">of {steps.length}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}

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

@@ -0,0 +1,100 @@
+"use client"
+
+import React from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { cn } from "../../lib/utils"
+import { useFormWizard } from "./form-wizard-context"
+import { FormWizardProps } from "./types"
+
+interface FormWizardStepProps {
+  className?: string
+  animationType?: FormWizardProps['animationType']
+  animationDuration?: number
+}
+
+const animations = {
+  slide: {
+    initial: (direction: number) => ({
+      x: direction > 0 ? 1000 : -1000,
+      opacity: 0
+    }),
+    animate: {
+      x: 0,
+      opacity: 1
+    },
+    exit: (direction: number) => ({
+      x: direction < 0 ? 1000 : -1000,
+      opacity: 0
+    })
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8 }
+  },
+  none: {
+    initial: {},
+    animate: {},
+    exit: {}
+  }
+}
+
+export const FormWizardStep: React.FC<FormWizardStepProps> = ({
+  className,
+  animationType = 'slide',
+  animationDuration = 0.3
+}) => {
+  const { steps, currentStep, goToNext, goToPrevious, goToStep, updateStepData, stepData } = useFormWizard()
+  const [direction, setDirection] = React.useState(0)
+  const previousStep = React.useRef(currentStep)
+
+  React.useEffect(() => {
+    setDirection(currentStep > previousStep.current ? 1 : -1)
+    previousStep.current = currentStep
+  }, [currentStep])
+
+  const currentStepObj = steps[currentStep]
+  const isFirstStep = currentStep === 0
+  const isLastStep = currentStep === steps.length - 1
+
+  const stepContentProps = {
+    currentStep,
+    totalSteps: steps.length,
+    goToNext,
+    goToPrevious,
+    goToStep,
+    isFirstStep,
+    isLastStep,
+    stepData: stepData[currentStepObj.id] || {},
+    updateStepData: (data: any) => updateStepData(currentStepObj.id, data)
+  }
+
+  const content = typeof currentStepObj.content === 'function'
+    ? currentStepObj.content(stepContentProps)
+    : currentStepObj.content
+
+  return (
+    <AnimatePresence mode="wait" custom={direction}>
+      <motion.div
+        key={currentStep}
+        custom={direction}
+        variants={animations[animationType]}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        transition={{
+          duration: animationDuration,
+          ease: "easeInOut"
+        }}
+        className={cn("w-full", className)}
+      >
+        {content}
+      </motion.div>
+    </AnimatePresence>
+  )
+}

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

@@ -0,0 +1,105 @@
+"use client"
+
+import React from "react"
+import { cn } from "../../lib/utils"
+import { FormWizardProvider } from "./form-wizard-context"
+import { FormWizardProgress } from "./form-wizard-progress"
+import { FormWizardStep } from "./form-wizard-step"
+import { FormWizardNavigation } from "./form-wizard-navigation"
+import { FormWizardProps } from "./types"
+import { Card, CardContent } from "../ui/card"
+import { Separator } from "../ui/separator"
+
+export const MoonUIFormWizardPro = React.forwardRef<HTMLDivElement, FormWizardProps>(({
+  steps,
+  currentStep = 0,
+  onStepChange,
+  onComplete,
+  orientation = 'horizontal',
+  progressType = 'linear',
+  allowStepSkip = false,
+  allowBackNavigation = true,
+  validateOnStepChange = true,
+  animationType = 'slide',
+  animationDuration = 0.3,
+  showStepNumbers = true,
+  showStepTitles = true,
+  showProgressBar = true,
+  stepIconPosition = 'top',
+  completedStepIcon,
+  activeStepIcon,
+  errorStepIcon,
+  className,
+  progressClassName,
+  navigationClassName,
+  contentClassName,
+  stepClassName,
+  autoSave = false,
+  autoSaveDelay = 2000,
+  onAutoSave,
+  persistData = false,
+  storageKey = "form-wizard-data"
+}, ref) => {
+  return (
+    <FormWizardProvider
+      steps={steps}
+      initialStep={currentStep}
+      onStepChange={onStepChange}
+      onComplete={onComplete}
+      validateOnStepChange={validateOnStepChange}
+      allowBackNavigation={allowBackNavigation}
+      allowStepSkip={allowStepSkip}
+      autoSave={autoSave}
+      autoSaveDelay={autoSaveDelay}
+      onAutoSave={onAutoSave}
+      persistData={persistData}
+      storageKey={storageKey}
+    >
+      <div ref={ref} className={cn("w-full", className)}>
+        {showProgressBar && (
+          <>
+            <FormWizardProgress
+              className={progressClassName}
+              progressType={progressType}
+              orientation={orientation}
+              showStepNumbers={showStepNumbers}
+              showStepTitles={showStepTitles}
+              stepIconPosition={stepIconPosition}
+              completedStepIcon={completedStepIcon}
+              activeStepIcon={activeStepIcon}
+              errorStepIcon={errorStepIcon}
+            />
+            <Separator className="my-8" />
+          </>
+        )}
+
+        <Card className={cn("border-0 shadow-none", contentClassName)}>
+          <CardContent className="p-0">
+            <FormWizardStep
+              className={stepClassName}
+              animationType={animationType}
+              animationDuration={animationDuration}
+            />
+          </CardContent>
+        </Card>
+
+        <Separator className="my-8" />
+
+        <FormWizardNavigation
+          className={navigationClassName}
+        />
+      </div>
+    </FormWizardProvider>
+  )
+})
+
+MoonUIFormWizardPro.displayName = "MoonUIFormWizardPro"
+
+// Export types and hooks
+export type { FormWizardProps, WizardStep, WizardStepContentProps } from "./types"
+export { useFormWizard } from "./form-wizard-context"
+
+// Export sub-components for advanced usage
+export { FormWizardProgress } from "./form-wizard-progress"
+export { FormWizardStep } from "./form-wizard-step"
+export { FormWizardNavigation } from "./form-wizard-navigation"

package/src/components/form-wizard/types.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from "react"
+
+export interface WizardStep {
+  id: string
+  title: string
+  description?: string
+  icon?: ReactNode | ((props: { isActive: boolean; isCompleted: boolean }) => ReactNode)
+  content: ReactNode | ((props: WizardStepContentProps) => ReactNode)
+  validation?: () => boolean | Promise<boolean>
+  isOptional?: boolean
+  isDisabled?: boolean | ((currentStep: number, steps: WizardStep[]) => boolean)
+  onEnter?: () => void | Promise<void>
+  onExit?: () => void | Promise<void>
+}
+
+export interface WizardStepContentProps {
+  currentStep: number
+  totalSteps: number
+  goToNext: () => void
+  goToPrevious: () => void
+  goToStep: (step: number) => void
+  isFirstStep: boolean
+  isLastStep: boolean
+  stepData: any
+  updateStepData: (data: any) => void
+}
+
+export interface FormWizardProps {
+  steps: WizardStep[]
+  currentStep?: number
+  onStepChange?: (step: number, previousStep: number) => void
+  onComplete?: (data: Record<string, any>) => void | Promise<void>
+  orientation?: 'horizontal' | 'vertical'
+  progressType?: 'linear' | 'circular' | 'dots' | 'custom'
+  allowStepSkip?: boolean
+  allowBackNavigation?: boolean
+  validateOnStepChange?: boolean
+  animationType?: 'slide' | 'fade' | 'scale' | 'none'
+  animationDuration?: number
+  showStepNumbers?: boolean
+  showStepTitles?: boolean
+  showProgressBar?: boolean
+  stepIconPosition?: 'top' | 'left' | 'inside'
+  completedStepIcon?: ReactNode
+  activeStepIcon?: ReactNode
+  errorStepIcon?: ReactNode
+  className?: string
+  progressClassName?: string
+  navigationClassName?: string
+  contentClassName?: string
+  stepClassName?: string
+  autoSave?: boolean
+  autoSaveDelay?: number
+  onAutoSave?: (stepId: string, data: any) => void | Promise<void>
+  persistData?: boolean
+  storageKey?: string
+}
+
+export interface WizardContextValue {
+  steps: WizardStep[]
+  currentStep: number
+  stepData: Record<string, any>
+  isLoading: boolean
+  error: string | null
+  goToNext: () => void
+  goToPrevious: () => void
+  goToStep: (step: number) => void
+  updateStepData: (stepId: string, data: any) => void
+  validateCurrentStep: () => Promise<boolean>
+  completeWizard: () => void
+  resetWizard: () => void
+  isStepCompleted: (stepIndex: number) => boolean
+  isStepAccessible: (stepIndex: number) => boolean
+  canGoNext: boolean
+  canGoPrevious: boolean
+}

package/src/components/index.ts

@@ -84,4 +84,19 @@ export * from "./file-upload"
 export * from "./data-table"
 
 // Sidebar
-export * from "./sidebar"
+export * from "./sidebar"
+
+// Form Wizard
+export * from "./form-wizard"
+
+// Multi-Step Form
+export * from "./multi-step-form"
+
+// Quiz Form
+export * from "./quiz-form"
+
+// Credit Card Input
+export * from "./credit-card-input"
+
+// Phone Number Input
+export * from "./phone-number-input"