ui-arreya-components 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-arreya-components",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "types": "dist/index.d.ts",
   "exports": {

package/scripts/template.sh

@@ -13,21 +13,21 @@ COMPONENT_OR_FEATURE_NAME=$2
 case $TEMPLATE_TYPE in
   feature)
     echo "Creating feature template..."
-    mkdir -p src/components/features/${COMPONENT_OR_FEATURE_NAME}
+    mkdir -p src/components/feature/${COMPONENT_OR_FEATURE_NAME}
 
-    cat <<EOF > src/components/features/${COMPONENT_OR_FEATURE_NAME}/index.ts 
+    cat <<EOF > src/components/feature/${COMPONENT_OR_FEATURE_NAME}/index.ts 
 export * from './${COMPONENT_OR_FEATURE_NAME}'
 EOF
 
-    cat <<EOF >> src/components/features/index.ts 
+    cat <<EOF >> src/components/feature/index.ts 
 export * from './${COMPONENT_OR_FEATURE_NAME}'
 EOF
 
     cat <<EOF >> src/components/index.ts 
-export * from './features/${COMPONENT_OR_FEATURE_NAME}'
+export * from './feature/${COMPONENT_OR_FEATURE_NAME}'
 EOF
 
-    touch src/components/features/${COMPONENT_OR_FEATURE_NAME}/{${COMPONENT_OR_FEATURE_NAME}.stories.tsx,${COMPONENT_OR_FEATURE_NAME}.tsx}
+    touch src/components/feature/${COMPONENT_OR_FEATURE_NAME}/{${COMPONENT_OR_FEATURE_NAME}.stories.tsx,${COMPONENT_OR_FEATURE_NAME}.tsx}
     ;;
   component)
     echo "Creating component template"

package/src/components/feature/search-bar.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { SearchBar } from "@/components/feature/search-bar"
+
+const meta = {
+  title: "Feature/SearchBar",
+  component: SearchBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    options: [
+      "First",
+      "Second",
+      "Third"
+    ],
+    search: [
+      "How to use React hooks",
+      "Tailwind CSS tutorial",
+      "Next.js documentation",
+      "JavaScript best practices",
+      "TypeScript interfaces",
+      "CSS Grid layout examples",
+      "React performance optimization",
+      "State management in React",
+    ],
+    submit: (search, option) => { console.log(`pressed ${search} ${option}`) },
+  }
+}

package/src/components/feature/search-bar.tsx

@@ -0,0 +1,141 @@
+import { 
+  useEffect,
+  useState,
+  useRef,
+} from 'react'
+
+import { Search, ChevronDown } from 'lucide-react'
+
+type SearchBarProps = {
+  search: string[],
+  options?: string[]
+  submit: (search:string, option?: string) => void
+}
+
+export const SearchBar = ({ search, options, submit }: SearchBarProps): JSX.Element => {
+    const firstDropdownOption = (options && options.length > 0) ? options[0] : ""
+
+    const [isOptionsOpen, setIsOptionsOpen] = useState(false)
+    const [isSearchOpen, setIsSearchOpen] = useState(false)
+    const [searchValue, setSearchValue] = useState("") 
+    const [selectedOption, setSelectedOption] = useState(firstDropdownOption)
+
+    const optionsDropdownRef = useRef<HTMLDivElement>(null)
+    const searchDropdownRef = useRef<HTMLDivElement>(null)
+    const searchInputRef = useRef<HTMLInputElement>(null)
+
+    // TODO if no dropdownOptions make it a regular search bar
+    
+    // Filtered search options based on input
+    const filteredOptions = searchValue
+      ? search.filter((option) => option?.toLowerCase().includes(searchValue.toLowerCase()))
+      : []
+
+    const onSubmit = () => {
+      submit(searchValue, selectedOption)
+    }
+
+    // Close dropdowns when clicking outside
+    useEffect(() => {
+      function handleClickOutside(event: MouseEvent) {
+        if (optionsDropdownRef.current && !optionsDropdownRef.current.contains(event.target as Node)) {
+          setIsOptionsOpen(false)
+        }
+
+        if (
+          searchDropdownRef.current &&
+          !searchDropdownRef.current.contains(event.target as Node) &&
+          event.target !== searchInputRef.current
+
+        ) {
+          setIsSearchOpen(false)
+        }
+      }
+
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }, [])
+
+    // Handle search input changes
+    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value
+      setSearchValue(value)
+      setIsSearchOpen(value.length > 0)
+    }
+
+    // Handle search option selection
+    const handleSelectSearchOption = (option: string) => {
+      setSearchValue(option)
+      setIsSearchOpen(false)
+      searchInputRef.current?.focus()
+    }
+
+    return (
+      <div className="flex max-w-xl rounded-lg border border-blue-100 bg-white">
+        <div className="relative flex-1" ref={searchDropdownRef}>
+          <input
+            ref={searchInputRef}
+            type="search"
+            placeholder="Search..."
+            value={searchValue}
+            onChange={handleSearchChange}
+            onFocus={() => searchValue && setIsSearchOpen(true)}
+            className="h-9 w-full border-0 bg-transparent px-3 py-2 outline-none"
+          />
+
+          {isSearchOpen && filteredOptions.length > 0 && (
+            <div className="absolute left-0 top-full z-10 mt-1 w-full rounded-md border border-gray-200 bg-white py-1 shadow-lg">
+              {filteredOptions.map((option) => (
+                <button
+                  key={option}
+                  className="flex w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
+                  onClick={() => handleSelectSearchOption(option)}
+                >
+                  {option}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center">
+          <div className="h-5 w-[1px] bg-slate-200" />
+          <div className="relative" ref={optionsDropdownRef}>
+            <button
+              onClick={() => setIsOptionsOpen(!isOptionsOpen)}
+              className="flex h-9 items-center gap-1 px-3 text-sm font-normal text-gray-700 hover:bg-gray-50"
+            >
+              {selectedOption}
+              <ChevronDown className="h-4 w-4 opacity-50" />
+            </button>
+
+            {isOptionsOpen && (
+              <div className="absolute right-0 top-full z-10 mt-1 w-48 rounded-md border border-gray-200 bg-white py-1 shadow-lg">
+                {options?.map((option) => (
+                  <button
+                    key={option}
+                    className="flex w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
+                    onClick={() => {
+                      setSelectedOption(option)
+                      setIsOptionsOpen(false)
+                    }}
+                  >
+                    {option}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="h-5 w-[1px] bg-slate-200" />
+          <button 
+            className="flex h-9 w-9 items-center justify-center text-gray-500 hover:bg-gray-50"
+            onClick={onSubmit}
+          >
+            <Search className="h-2 w-2" />
+          </button>
+        </div>
+      </div> 
+    )
+  }
+
+SearchBar.displayName = "SearchBar"

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}</>
+}
+