ui-arreya-components 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-arreya-components",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "types": "dist/index.d.ts",
   "exports": {
@@ -24,7 +24,7 @@
     "build-storybook": "concurrently 'npm run build-storybook:css' 'storybook build'",
     "build-storybook:css": "tailwindcss -m -i ./src/styles/tailwind.css -o ./src/index.css",
     "prepublish": "npm run build",
-    "publish": "npm publish"
+    "test": "echo 'setup unit testing'"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/scripts/build-index-ts.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# Starting fresh
+rm src/index.ts
+
+# Add Components
+for import in `ls src/components/ui/ | grep -v '.stories.' | cut -f1 -d\.`;
+do 
+  echo 'export * from "./components/ui/'$import'"' >> src/index.ts 
+done
+
+# Add Features
+for import in `ls src/components/feature/ | grep -v '.stories.' | cut -f1 -d\.`;
+do 
+  echo 'export * from "./components/feature/'${import}'"' >> src/index.ts 
+done

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/graph-card.stories.tsx

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

@@ -0,0 +1,113 @@
+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/header.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Header } from "./header"
 
 const meta: Meta<typeof Header> = {
-  title: "Components/Header",
+  title: "Feature/Header",
   component: Header,
   parameters: {
     layout: "fullscreen",

package/src/components/feature/header.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/breadcrumb"
 import { ChevronRight, Home } from "lucide-react"
 
-export type BreadcrumbItem = {
+type BreadcrumbItem = {
   label: string
   href?: string
   isCurrentPage?: boolean
@@ -26,7 +26,7 @@ interface HeaderProps {
 export function Header({ title, breadcrumbItems = [], showHomeLink = true, className = "", children }: HeaderProps) {
   return (
     <header className={`border-b pb-4 ${className}`}>
-      <div className="container mx-auto px-4">
+      <div className="container mx-auto p-4">
         {(breadcrumbItems.length > 0 || showHomeLink) && (
           <Breadcrumb className="mb-2">
             <BreadcrumbList>

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"