@moontra/moonui-pro 2.6.1 → 2.6.2

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 FormWizardPro = 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>
+  )
+})
+
+FormWizardPro.displayName = "FormWizardPro"
+
+// 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,13 @@ 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"

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 { FormWizardPro, 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 MultiStepFormPro<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 (
+    <FormWizardPro
+      {...wizardProps}
+      steps={wizardSteps}
+      onComplete={handleComplete}
+    />
+  )
+}
+
+// Utility function for better imports
+function cn(...classes: (string | undefined | false)[]) {
+  return classes.filter(Boolean).join(' ')
+}