@moontra/moonui-pro 2.20.2 → 2.20.4

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

@@ -1,329 +0,0 @@
-"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 w-full",
-        orientation === 'vertical' ? "flex flex-col space-y-8" : "",
-        className
-      )}>
-        {orientation === 'horizontal' ? (
-          <div className="relative w-full">
-            {/* Steps Container with connecting lines */}
-            <div className={cn(
-              "relative flex items-start justify-between w-full",
-              stepIconPosition === 'left' && "pl-14"
-            )}>
-              {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 (
-                  <div key={step.id} className="relative flex-1 flex flex-col items-center">
-                    {/* Step Icon - Left Position */}
-                    {stepIconPosition === 'left' && StepIcon && (
-                      <div className="absolute -left-12 top-1/2 -translate-y-1/2 flex items-center justify-center">
-                        <span className={cn(
-                          "w-8 h-8 flex items-center justify-center transition-colors",
-                          isActive && "text-primary",
-                          isCompleted && !isActive && "text-primary",
-                          !isActive && !isCompleted && "text-muted-foreground"
-                        )}>
-                          {StepIcon}
-                        </span>
-                      </div>
-                    )}
-
-                    {/* Step Icon - Top Position */}
-                    {stepIconPosition === 'top' && StepIcon && (
-                      <div className="flex items-center justify-center mb-2">
-                        <span className={cn(
-                          "w-8 h-8 flex items-center justify-center transition-colors",
-                          isActive && "text-primary",
-                          isCompleted && !isActive && "text-primary",
-                          !isActive && !isCompleted && "text-muted-foreground"
-                        )}>
-                          {StepIcon}
-                        </span>
-                      </div>
-                    )}
-
-                    {/* Step Title & Description - Above the circle */}
-                    {showStepTitles && (
-                      <div className="text-center mb-3 min-h-[40px] px-2">
-                        <p className={cn(
-                          "text-sm font-semibold 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>
-                    )}
-
-                    {/* Step Circle Container with line */}
-                    <div className="relative flex items-center w-full">
-                      {/* Connecting Line - Positioned after each circle except the last */}
-                      {index < steps.length - 1 && (
-                        <div 
-                          className="absolute left-1/2 w-full h-[2px]"
-                          style={{ 
-                            width: 'calc(100% + 24px)',
-                            marginLeft: '24px'
-                          }}
-                        >
-                          <div className="h-full bg-border" />
-                          {index < currentStep && (
-                            <motion.div
-                              className="absolute inset-0 bg-primary"
-                              initial={{ scaleX: 0 }}
-                              animate={{ scaleX: 1 }}
-                              transition={{ duration: 0.5, delay: index * 0.1 }}
-                              style={{ transformOrigin: 'left' }}
-                            />
-                          )}
-                        </div>
-                      )}
-
-                      {/* Step Circle */}
-                      <motion.div
-                        initial={{ scale: 0.8 }}
-                        animate={{ scale: isActive ? 1.05 : 1 }}
-                        transition={{ duration: 0.2 }}
-                        className={cn(
-                          "relative z-10 flex items-center justify-center rounded-full transition-all duration-300 mx-auto",
-                          "w-12 h-12 border-2",
-                          isActive && "border-primary bg-primary text-primary-foreground shadow-lg shadow-primary/20",
-                          isCompleted && !isActive && "border-primary bg-primary text-primary-foreground",
-                          !isActive && !isCompleted && isAccessible && "border-border bg-background text-muted-foreground hover:border-accent",
-                          !isAccessible && "border-border/50 bg-muted text-muted-foreground/50 cursor-not-allowed",
-                          hasError && "border-destructive bg-destructive text-destructive-foreground"
-                        )}
-                      >
-                        {hasError ? (
-                          errorStepIcon
-                        ) : isCompleted && !isActive ? (
-                          completedStepIcon
-                        ) : isActive && activeStepIcon ? (
-                          activeStepIcon
-                        ) : StepIcon && stepIconPosition === 'inside' ? (
-                          <span className="w-5 h-5 flex items-center justify-center">{StepIcon}</span>
-                        ) : showStepNumbers ? (
-                          <span className="text-sm font-semibold">{index + 1}</span>
-                        ) : (
-                          <Circle className="w-4 h-4" />
-                        )}
-                      </motion.div>
-                    </div>
-
-                    {/* Step Label Below Circle */}
-                    <div className="mt-3">
-                      <p className="text-xs text-muted-foreground font-medium">
-                        Step {index + 1} of {steps.length}
-                      </p>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        ) : (
-          // Vertical orientation
-          <div className="relative pl-12">
-            {/* Vertical Progress Line */}
-            {steps.length > 1 && (
-              <>
-                <div className="absolute left-6 top-8 bottom-8 w-[2px] bg-border" />
-                <motion.div
-                  className="absolute left-6 top-8 w-[2px] bg-primary"
-                  initial={{ height: 0 }}
-                  animate={{ 
-                    height: `${(currentStep / (steps.length - 1)) * (100 - 16)}%`
-                  }}
-                  transition={{ duration: 0.5 }}
-                />
-              </>
-            )}
-
-            {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 (
-                <div key={step.id} className="relative flex items-center mb-8 last:mb-0">
-                  {/* Step Circle */}
-                  <motion.div
-                    initial={{ scale: 0.8 }}
-                    animate={{ scale: isActive ? 1.05 : 1 }}
-                    className={cn(
-                      "absolute left-0 z-20 flex items-center justify-center rounded-full border-2 transition-all duration-300",
-                      "w-12 h-12",
-                      isActive && "border-primary bg-primary text-primary-foreground shadow-lg",
-                      isCompleted && !isActive && "border-primary bg-primary text-primary-foreground",
-                      !isActive && !isCompleted && isAccessible && "border-border bg-background text-muted-foreground hover:border-accent",
-                      !isAccessible && "border-border/50 bg-muted text-muted-foreground/50 cursor-not-allowed",
-                      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-semibold">{index + 1}</span>
-                    ) : (
-                      <Circle className="w-4 h-4" />
-                    )}
-                  </motion.div>
-
-                  {/* Step Content */}
-                  <div className="ml-16">
-                    {showStepTitles && (
-                      <>
-                        <p className={cn(
-                          "text-sm font-semibold 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>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </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 * 45 // radius = 45
-    const strokeDashoffset = circumference - (progress / 100) * circumference
-
-    return (
-      <div className={cn("relative w-36 h-36 mx-auto", className)}>
-        <svg className="w-full h-full -rotate-90" viewBox="0 0 144 144">
-          <circle
-            cx="72"
-            cy="72"
-            r="45"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="8"
-            className="text-border"
-          />
-          <motion.circle
-            cx="72"
-            cy="72"
-            r="45"
-            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-3xl 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

@@ -1,111 +0,0 @@
-"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"
-import { Alert, AlertDescription } from "../ui/alert"
-import { AlertCircle } from "lucide-react"
-
-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, error } = 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)}
-        data-wizard-step-content
-      >
-        <div className="space-y-4">
-          {error && (
-            <Alert variant="error">
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-          {content}
-        </div>
-      </motion.div>
-    </AnimatePresence>
-  )
-}

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

@@ -1,102 +0,0 @@
-"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={cn("mb-12", progressClassName)}
-              progressType={progressType}
-              orientation={orientation}
-              showStepNumbers={showStepNumbers}
-              showStepTitles={showStepTitles}
-              stepIconPosition={stepIconPosition}
-              completedStepIcon={completedStepIcon}
-              activeStepIcon={activeStepIcon}
-              errorStepIcon={errorStepIcon}
-            />
-          </>
-        )}
-
-        <Card className={cn("border-0 shadow-none", contentClassName)}>
-          <CardContent className="p-0">
-            <FormWizardStep
-              className={stepClassName}
-              animationType={animationType}
-              animationDuration={animationDuration}
-            />
-          </CardContent>
-        </Card>
-
-        <FormWizardNavigation
-          className={cn("mt-8", 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

@@ -1,77 +0,0 @@
-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> | { isValid: boolean; error?: string; errors?: string[] }
-  requiredFields?: string[] | boolean // Array of field names or boolean to enable/disable automatic validation
-  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
-}