@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/wizard/index.tsx

@@ -0,0 +1,719 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/card"
+import { Progress } from "../../components/progress"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../components/alert-dialog"
+import {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  X,
+  Loader2,
+  AlertCircle,
+  Circle,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type WizardStepStatus = "pending" | "current" | "completed" | "error" | "skipped"
+
+export interface WizardStep {
+  id: string
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  content: React.ReactNode
+  /** Étape optionnelle (peut être sautée) */
+  optional?: boolean
+  /** Validation de l'étape */
+  validate?: () => boolean | Promise<boolean>
+  /** Callback avant de quitter l'étape */
+  onLeave?: () => void | Promise<void>
+  /** Callback en entrant dans l'étape */
+  onEnter?: () => void | Promise<void>
+}
+
+export interface WizardSubmitData {
+  steps: { id: string; status: WizardStepStatus }[]
+  completedSteps: string[]
+  skippedSteps: string[]
+}
+
+export interface WakaWizardProps {
+  /** Étapes du wizard */
+  steps: WizardStep[]
+  /** Étape courante (contrôlé) */
+  currentStep?: number
+  /** Callback changement d'étape */
+  onStepChange?: (step: number) => void
+  /** Callback de soumission */
+  onSubmit?: (data: WizardSubmitData) => void | Promise<void>
+  /** Callback d'annulation */
+  onCancel?: () => void
+  /** Titre du wizard */
+  title?: string
+  /** Description */
+  description?: string
+  /** Texte du bouton précédent */
+  prevButtonText?: string
+  /** Texte du bouton suivant */
+  nextButtonText?: string
+  /** Texte du bouton terminer */
+  finishButtonText?: string
+  /** Texte du bouton annuler */
+  cancelButtonText?: string
+  /** Texte du bouton passer */
+  skipButtonText?: string
+  /** Afficher le bouton annuler */
+  showCancelButton?: boolean
+  /** Afficher la progression */
+  showProgress?: boolean
+  /** Afficher les numéros d'étapes */
+  showStepNumbers?: boolean
+  /** Afficher le stepper */
+  showStepper?: boolean
+  /** Position du stepper */
+  stepperPosition?: "top" | "left"
+  /** Permettre la navigation vers les étapes précédentes */
+  allowBackNavigation?: boolean
+  /** Confirmer l'annulation */
+  confirmCancel?: boolean
+  /** Message de confirmation d'annulation */
+  cancelConfirmMessage?: string
+  /** En cours de soumission */
+  submitting?: boolean
+  /** Layout */
+  layout?: "card" | "page" | "minimal"
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface WizardContextValue {
+  currentStep: number
+  totalSteps: number
+  stepStatuses: WizardStepStatus[]
+  goToStep: (step: number) => void
+  nextStep: () => void
+  prevStep: () => void
+  skipStep: () => void
+  isFirstStep: boolean
+  isLastStep: boolean
+}
+
+const WizardContext = React.createContext<WizardContextValue | null>(null)
+
+export function useWizard() {
+  const context = React.useContext(WizardContext)
+  if (!context) {
+    throw new Error("useWizard must be used within a WakaWizard")
+  }
+  return context
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface WizardStepperProps {
+  steps: WizardStep[]
+  currentStep: number
+  stepStatuses: WizardStepStatus[]
+  showStepNumbers: boolean
+  orientation: "horizontal" | "vertical"
+  onStepClick?: (step: number) => void
+  allowBackNavigation: boolean
+}
+
+function WizardStepper({
+  steps,
+  currentStep,
+  stepStatuses,
+  showStepNumbers,
+  orientation,
+  onStepClick,
+  allowBackNavigation,
+}: WizardStepperProps) {
+  const getStepIcon = (index: number, status: WizardStepStatus) => {
+    if (status === "completed") {
+      return <Check className="h-4 w-4" />
+    }
+    if (status === "error") {
+      return <AlertCircle className="h-4 w-4" />
+    }
+    if (status === "skipped") {
+      return <X className="h-4 w-4 text-muted-foreground" />
+    }
+    if (showStepNumbers) {
+      return <span className="text-xs font-medium">{index + 1}</span>
+    }
+    return <Circle className="h-3 w-3" />
+  }
+
+  const getStepClasses = (status: WizardStepStatus) => {
+    switch (status) {
+      case "completed":
+        return "bg-primary text-primary-foreground border-primary"
+      case "current":
+        return "bg-primary text-primary-foreground border-primary"
+      case "error":
+        return "bg-destructive text-destructive-foreground border-destructive"
+      case "skipped":
+        return "bg-muted text-muted-foreground border-muted"
+      default:
+        return "bg-background text-muted-foreground border-border"
+    }
+  }
+
+  if (orientation === "vertical") {
+    return (
+      <div className="flex flex-col gap-0">
+        {steps.map((step, index) => {
+          const status = stepStatuses[index]
+          const isClickable = allowBackNavigation && index < currentStep
+
+          return (
+            <div key={step.id} className="flex gap-3">
+              {/* Indicator column */}
+              <div className="flex flex-col items-center">
+                <button
+                  type="button"
+                  disabled={!isClickable}
+                  onClick={() => isClickable && onStepClick?.(index)}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-full border-2 transition-colors",
+                    getStepClasses(status),
+                    isClickable && "cursor-pointer hover:opacity-80"
+                  )}
+                >
+                  {step.icon || getStepIcon(index, status)}
+                </button>
+                {index < steps.length - 1 && (
+                  <div
+                    className={cn(
+                      "w-0.5 flex-1 min-h-[24px]",
+                      stepStatuses[index] === "completed" ? "bg-primary" : "bg-border"
+                    )}
+                  />
+                )}
+              </div>
+
+              {/* Content column */}
+              <div className="pb-8">
+                <div
+                  className={cn(
+                    "font-medium",
+                    status === "current" ? "text-foreground" : "text-muted-foreground"
+                  )}
+                >
+                  {step.title}
+                  {step.optional && (
+                    <span className="ml-2 text-xs text-muted-foreground">(optionnel)</span>
+                  )}
+                </div>
+                {step.description && (
+                  <div className="text-sm text-muted-foreground mt-0.5">
+                    {step.description}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-0">
+      {steps.map((step, index) => {
+        const status = stepStatuses[index]
+        const isClickable = allowBackNavigation && index < currentStep
+
+        return (
+          <React.Fragment key={step.id}>
+            <div className="flex flex-col items-center gap-2">
+              <button
+                type="button"
+                disabled={!isClickable}
+                onClick={() => isClickable && onStepClick?.(index)}
+                className={cn(
+                  "flex h-8 w-8 items-center justify-center rounded-full border-2 transition-colors",
+                  getStepClasses(status),
+                  isClickable && "cursor-pointer hover:opacity-80"
+                )}
+              >
+                {step.icon || getStepIcon(index, status)}
+              </button>
+              <div className="text-center">
+                <div
+                  className={cn(
+                    "text-sm font-medium",
+                    status === "current" ? "text-foreground" : "text-muted-foreground"
+                  )}
+                >
+                  {step.title}
+                </div>
+              </div>
+            </div>
+            {index < steps.length - 1 && (
+              <div
+                className={cn(
+                  "flex-1 h-0.5 mx-2 mb-6",
+                  stepStatuses[index] === "completed" ? "bg-primary" : "bg-border"
+                )}
+              />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
+interface WizardFooterProps {
+  onPrev: () => void
+  onNext: () => void
+  onSkip?: () => void
+  onCancel?: () => void
+  isFirstStep: boolean
+  isLastStep: boolean
+  isOptional: boolean
+  prevButtonText: string
+  nextButtonText: string
+  finishButtonText: string
+  skipButtonText: string
+  cancelButtonText: string
+  showCancelButton: boolean
+  submitting: boolean
+}
+
+function WizardFooter({
+  onPrev,
+  onNext,
+  onSkip,
+  onCancel,
+  isFirstStep,
+  isLastStep,
+  isOptional,
+  prevButtonText,
+  nextButtonText,
+  finishButtonText,
+  skipButtonText,
+  cancelButtonText,
+  showCancelButton,
+  submitting,
+}: WizardFooterProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex gap-2">
+        {showCancelButton && onCancel && (
+          <Button type="button" variant="ghost" onClick={onCancel} disabled={submitting}>
+            {cancelButtonText}
+          </Button>
+        )}
+      </div>
+      <div className="flex gap-2">
+        {!isFirstStep && (
+          <Button type="button" variant="outline" onClick={onPrev} disabled={submitting}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            {prevButtonText}
+          </Button>
+        )}
+        {isOptional && onSkip && !isLastStep && (
+          <Button type="button" variant="ghost" onClick={onSkip} disabled={submitting}>
+            {skipButtonText}
+          </Button>
+        )}
+        <Button type="button" onClick={onNext} disabled={submitting}>
+          {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          {isLastStep ? finishButtonText : nextButtonText}
+          {!isLastStep && !submitting && <ArrowRight className="ml-2 h-4 w-4" />}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaWizard({
+  steps,
+  currentStep: externalCurrentStep,
+  onStepChange,
+  onSubmit,
+  onCancel,
+  title,
+  description,
+  prevButtonText = "Précédent",
+  nextButtonText = "Suivant",
+  finishButtonText = "Terminer",
+  cancelButtonText = "Annuler",
+  skipButtonText = "Passer",
+  showCancelButton = true,
+  showProgress = true,
+  showStepNumbers = true,
+  showStepper = true,
+  stepperPosition = "top",
+  allowBackNavigation = true,
+  confirmCancel = true,
+  cancelConfirmMessage = "Êtes-vous sûr de vouloir annuler ? Toutes les modifications seront perdues.",
+  submitting = false,
+  layout = "card",
+  className,
+}: WakaWizardProps) {
+  const [internalCurrentStep, setInternalCurrentStep] = React.useState(0)
+  const [stepStatuses, setStepStatuses] = React.useState<WizardStepStatus[]>(
+    steps.map((_, index) => (index === 0 ? "current" : "pending"))
+  )
+  const [showCancelDialog, setShowCancelDialog] = React.useState(false)
+
+  const currentStep = externalCurrentStep ?? internalCurrentStep
+  const isFirstStep = currentStep === 0
+  const isLastStep = currentStep === steps.length - 1
+  const currentStepData = steps[currentStep]
+  const progress = ((currentStep + 1) / steps.length) * 100
+
+  const updateStepStatuses = (newStep: number, action: "next" | "prev" | "skip" | "goto") => {
+    setStepStatuses((prev) => {
+      const newStatuses = [...prev]
+
+      if (action === "next" && currentStep < steps.length) {
+        newStatuses[currentStep] = "completed"
+      } else if (action === "skip") {
+        newStatuses[currentStep] = "skipped"
+      } else if (action === "goto" && newStep < currentStep) {
+        // Reset statuses for steps after the target
+        for (let i = newStep + 1; i < steps.length; i++) {
+          newStatuses[i] = "pending"
+        }
+      }
+
+      newStatuses[newStep] = "current"
+      return newStatuses
+    })
+  }
+
+  const goToStep = async (step: number) => {
+    if (step < 0 || step >= steps.length) return
+    if (step > currentStep && !allowBackNavigation) return
+
+    if (currentStepData.onLeave) {
+      await currentStepData.onLeave()
+    }
+
+    updateStepStatuses(step, "goto")
+
+    if (onStepChange) {
+      onStepChange(step)
+    } else {
+      setInternalCurrentStep(step)
+    }
+
+    const targetStep = steps[step]
+    if (targetStep.onEnter) {
+      await targetStep.onEnter()
+    }
+  }
+
+  const nextStep = async () => {
+    // Validate current step
+    if (currentStepData.validate) {
+      const isValid = await currentStepData.validate()
+      if (!isValid) {
+        setStepStatuses((prev) => {
+          const newStatuses = [...prev]
+          newStatuses[currentStep] = "error"
+          return newStatuses
+        })
+        return
+      }
+    }
+
+    if (currentStepData.onLeave) {
+      await currentStepData.onLeave()
+    }
+
+    if (isLastStep) {
+      // Submit
+      const submitData: WizardSubmitData = {
+        steps: steps.map((step, index) => ({
+          id: step.id,
+          status: index === currentStep ? "completed" : stepStatuses[index],
+        })),
+        completedSteps: steps
+          .filter((_, index) => stepStatuses[index] === "completed" || index === currentStep)
+          .map((step) => step.id),
+        skippedSteps: steps
+          .filter((_, index) => stepStatuses[index] === "skipped")
+          .map((step) => step.id),
+      }
+      await onSubmit?.(submitData)
+    } else {
+      const nextStepIndex = currentStep + 1
+      updateStepStatuses(nextStepIndex, "next")
+
+      if (onStepChange) {
+        onStepChange(nextStepIndex)
+      } else {
+        setInternalCurrentStep(nextStepIndex)
+      }
+
+      const nextStepData = steps[nextStepIndex]
+      if (nextStepData.onEnter) {
+        await nextStepData.onEnter()
+      }
+    }
+  }
+
+  const prevStep = async () => {
+    if (isFirstStep) return
+
+    if (currentStepData.onLeave) {
+      await currentStepData.onLeave()
+    }
+
+    const prevStepIndex = currentStep - 1
+    updateStepStatuses(prevStepIndex, "prev")
+
+    if (onStepChange) {
+      onStepChange(prevStepIndex)
+    } else {
+      setInternalCurrentStep(prevStepIndex)
+    }
+
+    const prevStepData = steps[prevStepIndex]
+    if (prevStepData.onEnter) {
+      await prevStepData.onEnter()
+    }
+  }
+
+  const skipStep = async () => {
+    if (!currentStepData.optional || isLastStep) return
+
+    if (currentStepData.onLeave) {
+      await currentStepData.onLeave()
+    }
+
+    const nextStepIndex = currentStep + 1
+    updateStepStatuses(nextStepIndex, "skip")
+
+    if (onStepChange) {
+      onStepChange(nextStepIndex)
+    } else {
+      setInternalCurrentStep(nextStepIndex)
+    }
+
+    const nextStepData = steps[nextStepIndex]
+    if (nextStepData.onEnter) {
+      await nextStepData.onEnter()
+    }
+  }
+
+  const handleCancel = () => {
+    if (confirmCancel) {
+      setShowCancelDialog(true)
+    } else {
+      onCancel?.()
+    }
+  }
+
+  const contextValue: WizardContextValue = {
+    currentStep,
+    totalSteps: steps.length,
+    stepStatuses,
+    goToStep,
+    nextStep,
+    prevStep,
+    skipStep,
+    isFirstStep,
+    isLastStep,
+  }
+
+  const stepperComponent = showStepper && (
+    <WizardStepper
+      steps={steps}
+      currentStep={currentStep}
+      stepStatuses={stepStatuses}
+      showStepNumbers={showStepNumbers}
+      orientation={stepperPosition === "left" ? "vertical" : "horizontal"}
+      onStepClick={goToStep}
+      allowBackNavigation={allowBackNavigation}
+    />
+  )
+
+  const footerComponent = (
+    <WizardFooter
+      onPrev={prevStep}
+      onNext={nextStep}
+      onSkip={currentStepData.optional ? skipStep : undefined}
+      onCancel={onCancel ? handleCancel : undefined}
+      isFirstStep={isFirstStep}
+      isLastStep={isLastStep}
+      isOptional={currentStepData.optional || false}
+      prevButtonText={prevButtonText}
+      nextButtonText={nextButtonText}
+      finishButtonText={finishButtonText}
+      skipButtonText={skipButtonText}
+      cancelButtonText={cancelButtonText}
+      showCancelButton={showCancelButton}
+      submitting={submitting}
+    />
+  )
+
+  const content = (
+    <WizardContext.Provider value={contextValue}>
+      {stepperPosition === "left" ? (
+        <div className="flex gap-8">
+          <div className="w-64 flex-shrink-0">{stepperComponent}</div>
+          <div className="flex-1">
+            {showProgress && (
+              <div className="mb-6">
+                <div className="flex justify-between text-sm text-muted-foreground mb-2">
+                  <span>Étape {currentStep + 1} sur {steps.length}</span>
+                  <span>{Math.round(progress)}%</span>
+                </div>
+                <Progress value={progress} />
+              </div>
+            )}
+            <div className="min-h-[300px]">{currentStepData.content}</div>
+            <div className="mt-8">{footerComponent}</div>
+          </div>
+        </div>
+      ) : (
+        <>
+          {stepperComponent && <div className="mb-8">{stepperComponent}</div>}
+          {showProgress && (
+            <div className="mb-6">
+              <div className="flex justify-between text-sm text-muted-foreground mb-2">
+                <span>Étape {currentStep + 1} sur {steps.length}</span>
+                <span>{Math.round(progress)}%</span>
+              </div>
+              <Progress value={progress} />
+            </div>
+          )}
+          <div className="min-h-[300px]">{currentStepData.content}</div>
+          <div className="mt-8">{footerComponent}</div>
+        </>
+      )}
+
+      {/* Cancel confirmation dialog */}
+      <AlertDialog open={showCancelDialog} onOpenChange={setShowCancelDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Annuler ?</AlertDialogTitle>
+            <AlertDialogDescription>{cancelConfirmMessage}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Non, continuer</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                setShowCancelDialog(false)
+                onCancel?.()
+              }}
+            >
+              Oui, annuler
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </WizardContext.Provider>
+  )
+
+  if (layout === "minimal") {
+    return <div className={cn("space-y-6", className)}>{content}</div>
+  }
+
+  if (layout === "page") {
+    return (
+      <div className={cn("container py-8 max-w-4xl", className)}>
+        {(title || description) && (
+          <div className="mb-8">
+            {title && <h1 className="text-2xl font-bold tracking-tight">{title}</h1>}
+            {description && (
+              <p className="text-muted-foreground mt-1">{description}</p>
+            )}
+          </div>
+        )}
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    <Card className={className}>
+      {(title || description) && (
+        <CardHeader>
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent>{content}</CardContent>
+    </Card>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultWizardSteps: WizardStep[] = [
+  {
+    id: "step-1",
+    title: "Informations de base",
+    description: "Renseignez vos informations personnelles",
+    content: (
+      <div className="space-y-4">
+        <p className="text-muted-foreground">
+          Contenu de l'étape 1 - Informations de base
+        </p>
+      </div>
+    ),
+  },
+  {
+    id: "step-2",
+    title: "Configuration",
+    description: "Configurez vos préférences",
+    optional: true,
+    content: (
+      <div className="space-y-4">
+        <p className="text-muted-foreground">
+          Contenu de l'étape 2 - Configuration (optionnel)
+        </p>
+      </div>
+    ),
+  },
+  {
+    id: "step-3",
+    title: "Confirmation",
+    description: "Vérifiez et confirmez",
+    content: (
+      <div className="space-y-4">
+        <p className="text-muted-foreground">
+          Contenu de l'étape 3 - Confirmation
+        </p>
+      </div>
+    ),
+  },
+]
+
+export default WakaWizard