ui-arreya-components 0.0.14 → 0.0.15

package/src/components/feature/graph-card.stories.tsx

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { GraphCard } from "./graph-card"
-import { Area, AreaChart, ResponsiveContainer } from "recharts"
-
-const meta: Meta<typeof GraphCard> = {
-  title: "Feature/GraphCard",
-  component: GraphCard,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The title of the graph card",
-    },
-    description: {
-      control: "text",
-      description: "Optional description text below the title",
-    },
-    value: {
-      control: "text",
-      description: "The primary value to display (e.g., total, average)",
-    },
-    change: {
-      control: "number",
-      description: "Percentage change to display",
-    },
-    changeType: {
-      control: { type: "select" },
-      options: ["increase", "decrease", "neutral"],
-      description: "Type of change (affects color and icon)",
-    },
-    changeLabel: {
-      control: "text",
-      description: "Label to display after the change value",
-    },
-    isLoading: {
-      control: "boolean",
-      description: "Whether to show a loading state",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof GraphCard>
-
-// Simple example with minimal data
-export const Simple: Story = {
-  args: {
-    title: "Monthly Sales",
-    description: "Total sales for the current month",
-    value: "$12,345",
-    chart: (
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart
-          data={[
-            { month: "Jan", value: 1000 },
-            { month: "Feb", value: 2000 },
-            { month: "Mar", value: 1500 },
-            { month: "Apr", value: 3000 },
-            { month: "May", value: 2500 },
-            { month: "Jun", value: 4000 },
-          ]}
-        >
-          <Area type="monotone" dataKey="value" stroke="hsl(var(--primary))" fill="hsl(var(--primary) / 0.2)" />
-        </AreaChart>
-      </ResponsiveContainer>
-    ),
-  },
-}
-
-// Example with positive change
-export const PositiveChange: Story = {
-  args: {
-    title: "Website Traffic",
-    description: "Unique visitors per day",
-    value: "12,456",
-    change: 23.5,
-    changeType: "increase",
-    changeLabel: "vs last week",
-    chart: (
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart
-          data={[
-            { day: "Mon", value: 1000 },
-            { day: "Tue", value: 2000 },
-            { day: "Wed", value: 3000 },
-            { day: "Thu", value: 2500 },
-            { day: "Fri", value: 4000 },
-            { day: "Sat", value: 3500 },
-            { day: "Sun", value: 4500 },
-          ]}
-        >
-          <Area type="monotone" dataKey="value" stroke="hsl(var(--primary))" fill="hsl(var(--primary) / 0.2)" />
-        </AreaChart>
-      </ResponsiveContainer>
-    ),
-  },
-}
-
-// Example with negative change
-export const NegativeChange: Story = {
-  args: {
-    title: "Conversion Rate",
-    description: "Percentage of visitors who make a purchase",
-    value: "3.2%",
-    change: 5.7,
-    changeType: "decrease",
-    changeLabel: "vs last month",
-    chart: (
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart
-          data={[
-            { week: "W1", value: 4.5 },
-            { week: "W2", value: 4.2 },
-            { week: "W3", value: 3.8 },
-            { week: "W4", value: 3.5 },
-            { week: "W5", value: 3.2 },
-          ]}
-        >
-          <Area type="monotone" dataKey="value" stroke="hsl(var(--destructive))" fill="hsl(var(--destructive) / 0.2)" />
-        </AreaChart>
-      </ResponsiveContainer>
-    ),
-  },
-}
-
-// Loading state
-export const Loading: Story = {
-  args: {
-    title: "Revenue",
-    description: "Total revenue this quarter",
-    value: "$143,245",
-    isLoading: true,
-    chart: <div />, // This won't be shown in loading state
-  },
-}

package/src/components/feature/graph-card.tsx

@@ -1,113 +0,0 @@
-import type React from "react"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { ChartContainer } from "@/components/ui/chart"
-import { cn } from "@/lib/utils"
-import { ArrowDownIcon, ArrowUpIcon, MoreHorizontal } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-
-export interface GraphCardProps {
-  title: string
-  description?: string
-  chart?: React.ReactNode | any
-  value?: string | number
-  previousValue?: string | number
-  change?: number
-  changeType?: "increase" | "decrease" | "neutral"
-  changeLabel?: string
-  className?: string
-  footerContent?: React.ReactNode
-  menuItems?: Array<{ label: string; onClick: () => void }>
-  chartConfig?: Record<string, any>
-  isLoading?: boolean
-}
-
-export function GraphCard({
-  title,
-  description,
-  chart,
-  value,
-  previousValue,
-  change,
-  changeType,
-  changeLabel,
-  className,
-  footerContent,
-  menuItems,
-  chartConfig,
-  isLoading = false,
-}: GraphCardProps) {
-  const renderChangeIndicator = () => {
-    if (changeType === "increase") {
-      return <ArrowUpIcon className="h-4 w-4 text-emerald-500" />
-    } else if (changeType === "decrease") {
-      return <ArrowDownIcon className="h-4 w-4 text-red-500" />
-    }
-    return null
-  }
-
-  const getChangeTextColor = () => {
-    if (changeType === "increase") return "text-emerald-500"
-    if (changeType === "decrease") return "text-red-500"
-    return "text-muted-foreground"
-  }
-
-  return (
-    <Card className={cn("overflow-hidden", className)}>
-      <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <div>
-          <CardTitle className="text-base font-medium">{title}</CardTitle>
-          {description && <CardDescription>{description}</CardDescription>}
-        </div>
-        {menuItems && menuItems.length > 0 && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0">
-                <span className="sr-only">Open menu</span>
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {menuItems.map((item, index) => (
-                <DropdownMenuItem key={index} onClick={item.onClick}>
-                  {item.label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </CardHeader>
-      <CardContent className="pb-2">
-        {value && (
-          <div className="flex items-center justify-between">
-            <div className="space-y-1">
-              <p className="text-2xl font-bold">{value}</p>
-              {(change !== undefined || previousValue) && (
-                <div className="flex items-center text-xs">
-                  {renderChangeIndicator()}
-                  <span className={cn("ml-1", getChangeTextColor())}>
-                    {change !== undefined && `${Math.abs(change)}%`}
-                    {previousValue && !change && `from ${previousValue}`}
-                  </span>
-                  {changeLabel && <span className="ml-1 text-muted-foreground">{changeLabel}</span>}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-        <div className={cn("mt-4", value ? "h-[180px]" : "h-[240px]")}>
-          {isLoading ? (
-            <div className="flex h-full items-center justify-center">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
-            </div>
-          ) : (chartConfig && chart) ? (
-            <ChartContainer config={chartConfig}>{ chart }</ChartContainer>
-          ) : (
-            chart
-          )}
-        </div>
-      </CardContent>
-      {footerContent && <CardFooter>{footerContent}</CardFooter>}
-    </Card>
-  )
-}

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

@@ -1,35 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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>
-  ),
-}
-
-