ui-arreya-components 0.0.14 → 0.0.15

package/src/components/feature/wizard.tsx

@@ -1,278 +0,0 @@
-"use client"
-
-import React, { useState, createContext, useContext } from "react"
-import { cn } from "@/lib/utils"
-import { Check, ChevronRight } from 'lucide-react'
-import { Button } from "@/components/ui/button"
-
-// Types
-export type WizardStepStatus = "upcoming" | "current" | "completed"
-
-export interface WizardStep {
-  id: string
-  title: string
-  description?: string
-  optional?: boolean
-}
-
-interface WizardContextValue {
-  currentStepIndex: number
-  steps: WizardStep[]
-  goToStep: (index: number) => void
-  nextStep: () => void
-  prevStep: () => void
-  isFirstStep: boolean
-  isLastStep: boolean
-  getStepStatus: (index: number) => WizardStepStatus
-  completeWizard: () => void
-  isComplete: boolean
-}
-
-// Context
-const WizardContext = createContext<WizardContextValue | undefined>(undefined)
-
-export function useWizard() {
-  const context = useContext(WizardContext)
-  if (!context) {
-    throw new Error("useWizard must be used within a WizardProvider")
-  }
-  return context
-}
-
-// Provider Component
-interface WizardProviderProps {
-  steps: WizardStep[]
-  children: React.ReactNode
-  onComplete?: () => void
-  initialStep?: number
-}
-
-export function WizardProvider({
-  steps,
-  children,
-  onComplete,
-  initialStep = 0,
-}: WizardProviderProps) {
-  const [currentStepIndex, setCurrentStepIndex] = useState(initialStep)
-  const [isComplete, setIsComplete] = useState(false)
-
-  const goToStep = (index: number) => {
-    if (index >= 0 && index < steps.length) {
-      setCurrentStepIndex(index)
-    }
-  }
-
-  const nextStep = () => {
-    if (currentStepIndex < steps.length - 1) {
-      setCurrentStepIndex(currentStepIndex + 1)
-    } else {
-      completeWizard()
-    }
-  }
-
-  const prevStep = () => {
-    if (currentStepIndex > 0) {
-      setCurrentStepIndex(currentStepIndex - 1)
-    }
-  }
-
-  const completeWizard = () => {
-    setIsComplete(true)
-    onComplete?.()
-  }
-
-  const getStepStatus = (index: number): WizardStepStatus => {
-    if (isComplete) return "completed"
-    if (index < currentStepIndex) return "completed"
-    if (index === currentStepIndex) return "current"
-    return "upcoming"
-  }
-
-  const value = {
-    currentStepIndex,
-    steps,
-    goToStep,
-    nextStep,
-    prevStep,
-    isFirstStep: currentStepIndex === 0,
-    isLastStep: currentStepIndex === steps.length - 1,
-    getStepStatus,
-    completeWizard,
-    isComplete,
-  }
-
-  return <WizardContext.Provider value={value}>{children}</WizardContext.Provider>
-}
-
-// Wizard Component
-interface WizardProps extends WizardProviderProps {
-  className?: string
-  showStepIndicator?: boolean
-  navigationPosition?: "top" | "bottom" | "both"
-}
-
-export function Wizard({
-  steps,
-  children,
-  onComplete,
-  initialStep = 0,
-  className,
-  showStepIndicator = true,
-  navigationPosition = "bottom",
-}: WizardProps) {
-  return (
-    <WizardProvider steps={steps} onComplete={onComplete} initialStep={initialStep}>
-      <div className={cn("w-full", className)}>
-        {(navigationPosition === "top" || navigationPosition === "both") && (
-          <WizardNavigation className="mb-6" />
-        )}
-        
-        {showStepIndicator && <WizardStepIndicator className="mb-8" />}
-        
-        <div className="wizard-content">{children}</div>
-        
-        {(navigationPosition === "bottom" || navigationPosition === "both") && (
-          <WizardNavigation className="mt-6" />
-        )}
-      </div>
-    </WizardProvider>
-  )
-}
-
-// Step Indicator Component
-interface WizardStepIndicatorProps {
-  className?: string
-}
-
-export function WizardStepIndicator({ className }: WizardStepIndicatorProps) {
-  const { steps, currentStepIndex, getStepStatus, goToStep } = useWizard()
-
-  return (
-    <div className={cn("w-full", className)}>
-      <div className="relative flex w-full justify-between">
-        {/* Progress Bar */}
-        <div className="absolute top-1/2 h-0.5 w-full -translate-y-1/2 bg-muted">
-          <div
-            className="h-full bg-primary transition-all duration-300 ease-in-out"
-            style={{ width: `${(currentStepIndex / (steps.length - 1)) * 100}%` }}
-          />
-        </div>
-
-        {/* Step Indicators */}
-        {steps.map((step, index) => {
-          const status = getStepStatus(index)
-          return (
-            <div key={step.id} className="relative z-10 flex flex-col items-center">
-              <button
-                onClick={() => {
-                  if (status === "completed") {
-                    goToStep(index)
-                  }
-                }}
-                disabled={status === "upcoming"}
-                className={cn(
-                  "flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors",
-                  status === "completed" && "border-primary bg-primary text-primary-foreground hover:bg-primary/90",
-                  status === "current" && "border-primary bg-background text-primary",
-                  status === "upcoming" && "border-muted bg-background text-muted-foreground"
-                )}
-                aria-current={status === "current" ? "step" : undefined}
-              >
-                {status === "completed" ? <Check className="h-4 w-4" /> : index + 1}
-              </button>
-              <div className="mt-2 text-center">
-                <div
-                  className={cn(
-                    "text-xs font-medium",
-                    status === "completed" && "text-primary",
-                    status === "current" && "text-primary",
-                    status === "upcoming" && "text-muted-foreground"
-                  )}
-                >
-                  {step.title}
-                </div>
-                {step.description && (
-                  <div className="mt-0.5 text-xs text-muted-foreground">
-                    {step.description}
-                  </div>
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-// Navigation Component
-interface WizardNavigationProps {
-  className?: string
-  showCancel?: boolean
-  onCancel?: () => void
-  nextLabel?: string
-  backLabel?: string
-  completeLabel?: string
-}
-
-export function WizardNavigation({
-  className,
-  showCancel = false,
-  onCancel,
-  nextLabel = "Next",
-  backLabel = "Back",
-  completeLabel = "Complete",
-}: WizardNavigationProps) {
-  const { nextStep, prevStep, isFirstStep, isLastStep, completeWizard } = useWizard()
-
-  return (
-    <div className={cn("flex items-center justify-between", className)}>
-      <div>
-        {!isFirstStep && (
-          <Button variant="outline" onClick={prevStep}>
-            {backLabel}
-          </Button>
-        )}
-        {showCancel && isFirstStep && (
-          <Button variant="outline" onClick={onCancel}>
-            Cancel
-          </Button>
-        )}
-      </div>
-      <Button onClick={isLastStep ? completeWizard : nextStep}>
-        {isLastStep ? completeLabel : nextLabel}
-        {!isLastStep && <ChevronRight className="ml-1 h-4 w-4" />}
-      </Button>
-    </div>
-  )
-}
-
-// Step Component
-interface WizardStepContentProps {
-  stepId: string
-  children: React.ReactNode
-}
-
-export function WizardStepContent({ stepId, children }: WizardStepContentProps) {
-  const { steps, currentStepIndex, isComplete } = useWizard()
-  const currentStep = steps[currentStepIndex]
-  
-  if (isComplete) return null
-  if (currentStep.id !== stepId) return null
-  
-  return <>{children}</>
-}
-
-// Completion Component
-interface WizardCompletionProps {
-  children: React.ReactNode
-}
-
-export function WizardCompletion({ children }: WizardCompletionProps) {
-  const { isComplete } = useWizard()
-  
-  if (!isComplete) return null
-  
-  return <>{children}</>
-}
-