@hanzo/ui 4.6.0 → 4.8.2

package/blocks/data-display/data-table.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@hanzo/ui/util'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@hanzo/ui/primitives'
+import { Button } from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@hanzo/ui/primitives'
+import { ChevronUp, ChevronDown, Search } from 'lucide-react'
+
+interface Column<T> {
+  key: string
+  header: string
+  accessor: (row: T) => any
+  sortable?: boolean
+  searchable?: boolean
+  render?: (value: any, row: T) => React.ReactNode
+}
+
+interface DataTableProps<T> extends React.ComponentPropsWithoutRef<'div'> {
+  data: T[]
+  columns: Column<T>[]
+  pageSize?: number
+  searchable?: boolean
+  title?: string
+  description?: string
+  onRowClick?: (row: T) => void
+}
+
+export function DataTable<T>({
+  className,
+  data,
+  columns,
+  pageSize = 10,
+  searchable = true,
+  title,
+  description,
+  onRowClick,
+  ...props
+}: DataTableProps<T>) {
+  const [currentPage, setCurrentPage] = useState(1)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [sortColumn, setSortColumn] = useState<string | null>(null)
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
+  const [itemsPerPage, setItemsPerPage] = useState(pageSize)
+
+  // Filter data based on search
+  const filteredData = searchTerm
+    ? data.filter((row) =>
+        columns.some((column) => {
+          if (column.searchable === false) return false
+          const value = column.accessor(row)
+          return value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
+        })
+      )
+    : data
+
+  // Sort data
+  const sortedData = [...filteredData].sort((a, b) => {
+    if (!sortColumn) return 0
+    
+    const column = columns.find((col) => col.key === sortColumn)
+    if (!column) return 0
+    
+    const aValue = column.accessor(a)
+    const bValue = column.accessor(b)
+    
+    if (aValue === bValue) return 0
+    
+    const comparison = aValue < bValue ? -1 : 1
+    return sortDirection === 'asc' ? comparison : -comparison
+  })
+
+  // Paginate data
+  const totalPages = Math.ceil(sortedData.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const paginatedData = sortedData.slice(startIndex, startIndex + itemsPerPage)
+
+  const handleSort = (columnKey: string) => {
+    if (sortColumn === columnKey) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortColumn(columnKey)
+      setSortDirection('asc')
+    }
+  }
+
+  return (
+    <div className={cn('space-y-4', className)} {...props}>
+      {(title || description || searchable) && (
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            {title && <h3 className="text-lg font-semibold">{title}</h3>}
+            {description && (
+              <p className="text-sm text-muted-foreground">{description}</p>
+            )}
+          </div>
+          {searchable && (
+            <div className="relative w-full sm:w-64">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search..."
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value)
+                  setCurrentPage(1)
+                }}
+                className="pl-8"
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => (
+                <TableHead
+                  key={column.key}
+                  className={column.sortable ? 'cursor-pointer select-none' : ''}
+                  onClick={() => column.sortable && handleSort(column.key)}
+                >
+                  <div className="flex items-center gap-2">
+                    {column.header}
+                    {column.sortable && sortColumn === column.key && (
+                      <>
+                        {sortDirection === 'asc' ? (
+                          <ChevronUp className="h-4 w-4" />
+                        ) : (
+                          <ChevronDown className="h-4 w-4" />
+                        )}
+                      </>
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedData.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No data available
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedData.map((row, i) => (
+                <TableRow
+                  key={i}
+                  className={onRowClick ? 'cursor-pointer' : ''}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {columns.map((column) => (
+                    <TableCell key={column.key}>
+                      {column.render
+                        ? column.render(column.accessor(row), row)
+                        : column.accessor(row)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>Rows per page:</span>
+            <Select
+              value={itemsPerPage.toString()}
+              onValueChange={(value) => {
+                setItemsPerPage(parseInt(value))
+                setCurrentPage(1)
+              }}
+            >
+              <SelectTrigger className="h-8 w-16">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5">5</SelectItem>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="25">25</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">
+              Showing {startIndex + 1}-{Math.min(startIndex + itemsPerPage, sortedData.length)} of {sortedData.length}
+            </span>
+            <div className="flex gap-1">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(currentPage - 1)}
+                disabled={currentPage === 1}
+              >
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(currentPage + 1)}
+                disabled={currentPage === totalPages}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/blocks/data-display/stats-grid.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui/primitives'
+import type { LucideIcon } from 'lucide-react'
+import { ArrowUp, ArrowDown, Minus } from 'lucide-react'
+
+interface Stat {
+  title: string
+  value: string | number
+  description?: string
+  change?: number
+  changeLabel?: string
+  icon?: LucideIcon
+  trend?: 'up' | 'down' | 'neutral'
+}
+
+interface StatsGridProps extends React.ComponentPropsWithoutRef<'div'> {
+  stats: Stat[]
+  columns?: 2 | 3 | 4
+  variant?: 'default' | 'compact' | 'detailed'
+}
+
+export function StatsGrid({
+  className,
+  stats,
+  columns = 4,
+  variant = 'default',
+  ...props
+}: StatsGridProps) {
+  const gridCols = {
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-2 lg:grid-cols-3',
+    4: 'sm:grid-cols-2 lg:grid-cols-4',
+  }[columns]
+
+  const getTrendIcon = (trend?: 'up' | 'down' | 'neutral') => {
+    switch (trend) {
+      case 'up':
+        return <ArrowUp className="h-4 w-4 text-green-500" />
+      case 'down':
+        return <ArrowDown className="h-4 w-4 text-red-500" />
+      case 'neutral':
+        return <Minus className="h-4 w-4 text-muted-foreground" />
+      default:
+        return null
+    }
+  }
+
+  const getTrendColor = (change?: number) => {
+    if (!change) return 'text-muted-foreground'
+    return change > 0 ? 'text-green-500' : 'text-red-500'
+  }
+
+  if (variant === 'compact') {
+    return (
+      <div className={cn('grid gap-4', gridCols, className)} {...props}>
+        {stats.map((stat, i) => {
+          const Icon = stat.icon
+          return (
+            <Card key={i}>
+              <CardHeader className="pb-2">
+                <CardDescription className="flex items-center justify-between">
+                  {stat.title}
+                  {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-baseline justify-between">
+                  <div className="text-2xl font-bold">{stat.value}</div>
+                  {(stat.change !== undefined || stat.trend) && (
+                    <div className="flex items-center gap-1">
+                      {getTrendIcon(stat.trend)}
+                      {stat.change !== undefined && (
+                        <span className={cn('text-xs', getTrendColor(stat.change))}>
+                          {stat.change > 0 && '+'}
+                          {stat.change}%
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+                {stat.changeLabel && (
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {stat.changeLabel}
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (variant === 'detailed') {
+    return (
+      <div className={cn('grid gap-6', gridCols, className)} {...props}>
+        {stats.map((stat, i) => {
+          const Icon = stat.icon
+          return (
+            <Card key={i}>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-sm font-medium">
+                    {stat.title}
+                  </CardTitle>
+                  {Icon && (
+                    <div className="rounded-lg bg-primary/10 p-2">
+                      <Icon className="h-5 w-5 text-primary" />
+                    </div>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-1">
+                  <div className="text-3xl font-bold">{stat.value}</div>
+                  {stat.description && (
+                    <CardDescription>{stat.description}</CardDescription>
+                  )}
+                  {(stat.change !== undefined || stat.trend || stat.changeLabel) && (
+                    <div className="flex items-center gap-2 pt-2">
+                      <div className="flex items-center gap-1">
+                        {getTrendIcon(stat.trend)}
+                        {stat.change !== undefined && (
+                          <span
+                            className={cn(
+                              'text-sm font-medium',
+                              getTrendColor(stat.change)
+                            )}
+                          >
+                            {stat.change > 0 && '+'}
+                            {stat.change}%
+                          </span>
+                        )}
+                      </div>
+                      {stat.changeLabel && (
+                        <span className="text-sm text-muted-foreground">
+                          {stat.changeLabel}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          )
+        })}
+      </div>
+    )
+  }
+
+  // Default variant
+  return (
+    <div className={cn('grid gap-4', gridCols, className)} {...props}>
+      {stats.map((stat, i) => {
+        const Icon = stat.icon
+        return (
+          <Card key={i}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                {stat.title}
+              </CardTitle>
+              {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stat.value}</div>
+              {stat.description && (
+                <p className="text-xs text-muted-foreground">
+                  {stat.description}
+                </p>
+              )}
+              {(stat.change !== undefined || stat.changeLabel) && (
+                <div className="mt-2 flex items-center text-xs">
+                  {stat.change !== undefined && (
+                    <span className={getTrendColor(stat.change)}>
+                      {stat.change > 0 && '+'}
+                      {stat.change}%
+                    </span>
+                  )}
+                  {stat.changeLabel && (
+                    <span className="ml-1 text-muted-foreground">
+                      {stat.changeLabel}
+                    </span>
+                  )}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}

package/blocks/ecommerce/checkout.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import { Label } from '@hanzo/ui/primitives'
+import { RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@hanzo/ui/primitives'
+import { Separator } from '@hanzo/ui/primitives'
+import { Checkbox } from '@hanzo/ui/primitives'
+
+interface CheckoutProps extends React.ComponentPropsWithoutRef<'div'> {
+  orderSummary: {
+    items: Array<{
+      name: string
+      quantity: number
+      price: number
+    }>
+    subtotal: number
+    shipping: number
+    tax: number
+    total: number
+    currency?: string
+  }
+  onSubmit?: (data: any) => void
+  onBack?: () => void
+}
+
+export function Checkout({
+  className,
+  orderSummary,
+  onSubmit,
+  onBack,
+  ...props
+}: CheckoutProps) {
+  const formatPrice = (price: number, currency = '$') => {
+    return `${currency}${price.toFixed(2)}`
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const data = Object.fromEntries(formData.entries())
+    onSubmit?.(data)
+  }
+
+  return (
+    <div className={cn('container py-8', className)} {...props}>
+      <form onSubmit={handleSubmit} className="grid gap-8 lg:grid-cols-3">
+        <div className="lg:col-span-2 space-y-6">
+          {/* Shipping Information */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Shipping Information</CardTitle>
+              <CardDescription>
+                Enter your shipping address details
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="grid gap-2">
+                  <Label htmlFor="firstName">First Name</Label>
+                  <Input id="firstName" name="firstName" required />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="lastName">Last Name</Label>
+                  <Input id="lastName" name="lastName" required />
+                </div>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" name="email" type="email" required />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="address">Street Address</Label>
+                <Input id="address" name="address" required />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="address2">Apartment, suite, etc. (optional)</Label>
+                <Input id="address2" name="address2" />
+              </div>
+              <div className="grid gap-4 sm:grid-cols-3">
+                <div className="grid gap-2">
+                  <Label htmlFor="city">City</Label>
+                  <Input id="city" name="city" required />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="state">State / Province</Label>
+                  <Input id="state" name="state" required />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="zip">ZIP / Postal Code</Label>
+                  <Input id="zip" name="zip" required />
+                </div>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="phone">Phone Number</Label>
+                <Input id="phone" name="phone" type="tel" />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Payment Method */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Payment Method</CardTitle>
+              <CardDescription>
+                Select your payment method
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-6">
+              <RadioGroup defaultValue="card" name="paymentMethod">
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="card" id="card" />
+                  <Label htmlFor="card">Credit Card</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="paypal" id="paypal" />
+                  <Label htmlFor="paypal">PayPal</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="crypto" id="crypto" />
+                  <Label htmlFor="crypto">Cryptocurrency</Label>
+                </div>
+              </RadioGroup>
+
+              <div className="grid gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="cardNumber">Card Number</Label>
+                  <Input
+                    id="cardNumber"
+                    name="cardNumber"
+                    placeholder="1234 5678 9012 3456"
+                  />
+                </div>
+                <div className="grid gap-4 sm:grid-cols-3">
+                  <div className="grid gap-2 sm:col-span-2">
+                    <Label htmlFor="expiry">Expiry Date</Label>
+                    <Input
+                      id="expiry"
+                      name="expiry"
+                      placeholder="MM/YY"
+                    />
+                  </div>
+                  <div className="grid gap-2">
+                    <Label htmlFor="cvc">CVC</Label>
+                    <Input
+                      id="cvc"
+                      name="cvc"
+                      placeholder="123"
+                    />
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Billing Address */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Billing Address</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="sameAsShipping" name="sameAsShipping" defaultChecked />
+                <label
+                  htmlFor="sameAsShipping"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Same as shipping address
+                </label>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Order Summary */}
+        <div>
+          <Card>
+            <CardHeader>
+              <CardTitle>Order Summary</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                {orderSummary.items.map((item, i) => (
+                  <div key={i} className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">
+                      {item.name} x {item.quantity}
+                    </span>
+                    <span>
+                      {formatPrice(item.price * item.quantity, orderSummary.currency)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+              <Separator />
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span>Subtotal</span>
+                  <span>{formatPrice(orderSummary.subtotal, orderSummary.currency)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Shipping</span>
+                  <span>{formatPrice(orderSummary.shipping, orderSummary.currency)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Tax</span>
+                  <span>{formatPrice(orderSummary.tax, orderSummary.currency)}</span>
+                </div>
+              </div>
+              <Separator />
+              <div className="flex justify-between text-lg font-semibold">
+                <span>Total</span>
+                <span>{formatPrice(orderSummary.total, orderSummary.currency)}</span>
+              </div>
+            </CardContent>
+            <CardFooter className="flex-col gap-2">
+              <Button type="submit" className="w-full" size="lg">
+                Complete Order
+              </Button>
+              {onBack && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full"
+                  onClick={onBack}
+                >
+                  Back to Cart
+                </Button>
+              )}
+            </CardFooter>
+          </Card>
+
+          <div className="mt-4 text-xs text-center text-muted-foreground">
+            Your payment information is encrypted and secure.
+            We never store your credit card details.
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}

package/blocks/ecommerce/index.ts

@@ -0,0 +1,7 @@
+export { ProductGrid } from './product-grid'
+export { ProductDetail } from './product-detail'
+export { ShoppingCart } from './shopping-cart'
+export { Checkout } from './checkout'
+
+export type { Product } from './product-grid'
+export type { CartItem } from './shopping-cart'