ui-arreya-components 0.0.15 → 0.0.16

package/src/components/feature/wizard.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Wizard, WizardStepContent, WizardCompletion } from "./wizard"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent } from "@/components/ui/card"
+
+const meta: Meta<typeof Wizard> = {
+  title: "Feature/Wizard",
+  component: Wizard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Wizard>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-full max-w-2xl">
+      <CardContent className="p-6">
+        <Wizard
+          steps={[
+            { id: "step1", title: "Step 1", description: "Personal Info" },
+            { id: "step2", title: "Step 2", description: "Account Details" },
+            { id: "step3", title: "Step 3", description: "Confirmation" },
+          ]}
+        >
+          <WizardStepContent stepId="step1">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Personal Information</h3>
+              <p className="text-sm text-muted-foreground">Please provide your personal details.</p>
+              <div className="grid gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="name">Full Name</Label>
+                  <Input id="name" placeholder="John Doe" />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input id="email" type="email" placeholder="john@example.com" />
+                </div>
+              </div>
+            </div>
+          </WizardStepContent>
+
+          <WizardStepContent stepId="step2">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Account Details</h3>
+              <p className="text-sm text-muted-foreground">Set up your account preferences.</p>
+              <div className="grid gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="username">Username</Label>
+                  <Input id="username" placeholder="johndoe" />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="password">Password</Label>
+                  <Input id="password" type="password" />
+                </div>
+              </div>
+            </div>
+          </WizardStepContent>
+
+          <WizardStepContent stepId="step3">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Confirmation</h3>
+              <p className="text-sm text-muted-foreground">Review your information before submitting.</p>
+              <div className="rounded-lg border p-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="text-sm font-medium">Name</div>
+                  <div className="text-sm">John Doe</div>
+                  <div className="text-sm font-medium">Email</div>
+                  <div className="text-sm">john@example.com</div>
+                  <div className="text-sm font-medium">Username</div>
+                  <div className="text-sm">johndoe</div>
+                </div>
+              </div>
+            </div>
+          </WizardStepContent>
+
+          <WizardCompletion>
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <div className="rounded-full bg-primary/10 p-3 mb-4">
+                <svg
+                  className="h-8 w-8 text-primary"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M20 6L9 17l-5-5" />
+                </svg>
+              </div>
+              <h3 className="text-2xl font-semibold mb-2">Setup Complete!</h3>
+              <p className="text-muted-foreground mb-6">Your account has been successfully created.</p>
+              <Button>Go to Dashboard</Button>
+            </div>
+          </WizardCompletion>
+        </Wizard>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const WithoutStepIndicator: Story = {
+  render: () => (
+    <Card className="w-full max-w-2xl">
+      <CardContent className="p-6">
+        <Wizard
+          steps={[
+            { id: "step1", title: "Step 1" },
+            { id: "step2", title: "Step 2" },
+            { id: "step3", title: "Step 3" },
+          ]}
+          showStepIndicator={false}
+        >
+          <WizardStepContent stepId="step1">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Step 1 Content</h3>
+              <p className="text-sm text-muted-foreground">This wizard doesn't show the step indicator.</p>
+            </div>
+          </WizardStepContent>
+
+          <WizardStepContent stepId="step2">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Step 2 Content</h3>
+              <p className="text-sm text-muted-foreground">Navigation is still available at the bottom.</p>
+            </div>
+          </WizardStepContent>
+
+          <WizardStepContent stepId="step3">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Step 3 Content</h3>
+              <p className="text-sm text-muted-foreground">This is the final step.</p>
+            </div>
+          </WizardStepContent>
+
+          <WizardCompletion>
+            <div className="py-4 text-center">
+              <h3 className="text-lg font-medium">All Done!</h3>
+            </div>
+          </WizardCompletion>
+        </Wizard>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const TopNavigation: Story = {
+  render: () => (
+    <Card className="w-full max-w-2xl">
+      <CardContent className="p-6">
+        <Wizard
+          steps={[
+            { id: "step1", title: "Step 1" },
+            { id: "step2", title: "Step 2" },
+            { id: "step3", title: "Step 3" },
+          ]}
+          navigationPosition="top"
+        >
+          <WizardStepContent stepId="step1">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Step 1 Content</h3>
+              <p className="text-sm text-muted-foreground">This wizard has navigation at the top.</p>
+            </div>
+          </WizardStepContent>
+
+          <WizardStepContent stepId="step2">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Step 2 Content</h3>
+              <p className="text-sm text-muted-foreground">Navigation buttons are above the content.</p>
+            </div>
+          </WizardStepContent>
+
+          <WizardStepContent stepId="step3">
+            <div className="space-y-4 py-4">
+              <h3 className="text-lg font-medium">Step 3 Content</h3>
+              <p className="text-sm text-muted-foreground">This is the final step.</p>
+            </div>
+          </WizardStepContent>
+
+          <WizardCompletion>
+            <div className="py-4 text-center">
+              <h3 className="text-lg font-medium">All Done!</h3>
+            </div>
+          </WizardCompletion>
+        </Wizard>
+      </CardContent>
+    </Card>
+  ),
+}
+
+

package/src/components/feature/wizard.tsx

@@ -0,0 +1,278 @@
+"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}</>
+}
+

package/src/components/ui/sheet.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/components/ui/sonner.tsx

@@ -3,7 +3,7 @@ import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
-const Toaster = ({ ...props }: ToasterProps) => {
+const SonnerToaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
   return (
@@ -26,4 +26,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster }
+export { SonnerToaster }