@hanzo/ui 4.6.0 → 4.8.2

package/blocks/ecommerce/product-detail.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import { Badge } from '@hanzo/ui/primitives'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
+import { Star, ShoppingCart, Heart, Share2 } from 'lucide-react'
+
+interface ProductDetailProps extends React.ComponentPropsWithoutRef<'div'> {
+  product: {
+    id: string | number
+    name: string
+    description: string
+    price: number
+    originalPrice?: number
+    currency?: string
+    images: string[]
+    rating?: number
+    reviewCount?: number
+    badge?: string
+    inStock?: boolean
+    variants?: Array<{
+      id: string
+      name: string
+      value: string
+    }>
+    features?: string[]
+    specifications?: Record<string, string>
+  }
+  onAddToCart?: (quantity: number, variant?: string) => void
+  onAddToWishlist?: () => void
+  onShare?: () => void
+}
+
+export function ProductDetail({
+  className,
+  product,
+  onAddToCart,
+  onAddToWishlist,
+  onShare,
+  ...props
+}: ProductDetailProps) {
+  const [selectedImage, setSelectedImage] = useState(0)
+  const [quantity, setQuantity] = useState(1)
+  const [selectedVariant, setSelectedVariant] = useState(
+    product.variants?.[0]?.id || ''
+  )
+
+  const formatPrice = (price: number, currency = '$') => {
+    return `${currency}${price.toFixed(2)}`
+  }
+
+  const calculateDiscount = (price: number, originalPrice: number) => {
+    return Math.round(((originalPrice - price) / originalPrice) * 100)
+  }
+
+  return (
+    <div className={cn('container py-8', className)} {...props}>
+      <div className="grid gap-8 lg:grid-cols-2">
+        {/* Images */}
+        <div className="space-y-4">
+          <div className="aspect-square overflow-hidden rounded-lg">
+            <img
+              src={product.images[selectedImage]}
+              alt={product.name}
+              className="h-full w-full object-cover"
+            />
+          </div>
+          {product.images.length > 1 && (
+            <div className="grid grid-cols-4 gap-4">
+              {product.images.map((image, i) => (
+                <button
+                  key={i}
+                  onClick={() => setSelectedImage(i)}
+                  className={cn(
+                    'aspect-square overflow-hidden rounded-lg border-2',
+                    selectedImage === i ? 'border-primary' : 'border-transparent'
+                  )}
+                >
+                  <img
+                    src={image}
+                    alt=""
+                    className="h-full w-full object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Product Info */}
+        <div className="space-y-6">
+          <div>
+            {product.badge && (
+              <Badge className="mb-2">{product.badge}</Badge>
+            )}
+            <h1 className="text-3xl font-bold">{product.name}</h1>
+            {product.rating !== undefined && (
+              <div className="mt-4 flex items-center gap-2">
+                <div className="flex items-center gap-1">
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <Star
+                      key={i}
+                      className={cn(
+                        'h-5 w-5',
+                        i < Math.floor(product.rating!)
+                          ? 'fill-primary text-primary'
+                          : 'text-muted-foreground'
+                      )}
+                    />
+                  ))}
+                </div>
+                <span className="font-medium">{product.rating.toFixed(1)}</span>
+                {product.reviewCount !== undefined && (
+                  <span className="text-muted-foreground">
+                    ({product.reviewCount} reviews)
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-3xl font-bold">
+                {formatPrice(product.price, product.currency)}
+              </span>
+              {product.originalPrice && product.originalPrice > product.price && (
+                <>
+                  <span className="text-xl text-muted-foreground line-through">
+                    {formatPrice(product.originalPrice, product.currency)}
+                  </span>
+                  <Badge variant="destructive">
+                    -{calculateDiscount(product.price, product.originalPrice)}%
+                  </Badge>
+                </>
+              )}
+            </div>
+            {product.inStock === false && (
+              <p className="text-sm text-destructive">Out of stock</p>
+            )}
+          </div>
+
+          <p className="text-muted-foreground">{product.description}</p>
+
+          {/* Variants */}
+          {product.variants && product.variants.length > 0 && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {product.variants[0].name}
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {product.variants.map((variant) => (
+                  <Button
+                    key={variant.id}
+                    variant={selectedVariant === variant.id ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setSelectedVariant(variant.id)}
+                  >
+                    {variant.value}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Quantity and Actions */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-4">
+              <label className="text-sm font-medium">Quantity:</label>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="icon"
+                  variant="outline"
+                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                  disabled={quantity <= 1}
+                >
+                  -
+                </Button>
+                <span className="w-12 text-center">{quantity}</span>
+                <Button
+                  size="icon"
+                  variant="outline"
+                  onClick={() => setQuantity(quantity + 1)}
+                >
+                  +
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex gap-4">
+              <Button
+                className="flex-1"
+                size="lg"
+                disabled={product.inStock === false}
+                onClick={() => onAddToCart?.(quantity, selectedVariant)}
+              >
+                <ShoppingCart className="mr-2 h-5 w-5" />
+                Add to Cart
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                onClick={onAddToWishlist}
+              >
+                <Heart className="h-5 w-5" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                onClick={onShare}
+              >
+                <Share2 className="h-5 w-5" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Tabs */}
+          {(product.features || product.specifications) && (
+            <Tabs defaultValue="features" className="w-full">
+              <TabsList className="grid w-full grid-cols-2">
+                {product.features && <TabsTrigger value="features">Features</TabsTrigger>}
+                {product.specifications && (
+                  <TabsTrigger value="specifications">Specifications</TabsTrigger>
+                )}
+              </TabsList>
+              {product.features && (
+                <TabsContent value="features" className="space-y-2">
+                  <ul className="list-inside list-disc space-y-1">
+                    {product.features.map((feature, i) => (
+                      <li key={i} className="text-sm">
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </TabsContent>
+              )}
+              {product.specifications && (
+                <TabsContent value="specifications">
+                  <dl className="space-y-2">
+                    {Object.entries(product.specifications).map(([key, value]) => (
+                      <div key={key} className="flex gap-4 text-sm">
+                        <dt className="min-w-[120px] font-medium">{key}:</dt>
+                        <dd className="text-muted-foreground">{value}</dd>
+                      </div>
+                    ))}
+                  </dl>
+                </TabsContent>
+              )}
+            </Tabs>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/blocks/ecommerce/product-grid.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import { Card, CardContent, CardFooter } from '@hanzo/ui/primitives'
+import { Badge } from '@hanzo/ui/primitives'
+import { Star, ShoppingCart } from 'lucide-react'
+
+export interface Product {
+  id: string | number
+  name: string
+  description?: string
+  price: number
+  originalPrice?: number
+  currency?: string
+  image: string
+  rating?: number
+  reviewCount?: number
+  badge?: string
+  inStock?: boolean
+}
+
+interface ProductGridProps extends React.ComponentPropsWithoutRef<'section'> {
+  products: Product[]
+  columns?: 2 | 3 | 4
+  onAddToCart?: (product: Product) => void
+  onProductClick?: (product: Product) => void
+}
+
+export function ProductGrid({
+  className,
+  products,
+  columns = 4,
+  onAddToCart,
+  onProductClick,
+  ...props
+}: ProductGridProps) {
+  const gridCols = {
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-2 lg:grid-cols-3',
+    4: 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  }[columns]
+
+  const formatPrice = (price: number, currency = '$') => {
+    return `${currency}${price.toFixed(2)}`
+  }
+
+  const calculateDiscount = (price: number, originalPrice: number) => {
+    return Math.round(((originalPrice - price) / originalPrice) * 100)
+  }
+
+  return (
+    <section className={cn('py-8', className)} {...props}>
+      <div className="container">
+        <div className={cn('grid gap-6', gridCols)}>
+          {products.map((product) => (
+            <Card
+              key={product.id}
+              className="group relative overflow-hidden"
+            >
+              {product.badge && (
+                <Badge className="absolute left-2 top-2 z-10">
+                  {product.badge}
+                </Badge>
+              )}
+              {product.originalPrice && product.originalPrice > product.price && (
+                <Badge
+                  variant="destructive"
+                  className="absolute right-2 top-2 z-10"
+                >
+                  -{calculateDiscount(product.price, product.originalPrice)}%
+                </Badge>
+              )}
+              
+              <div
+                className="aspect-square cursor-pointer overflow-hidden"
+                onClick={() => onProductClick?.(product)}
+              >
+                <img
+                  src={product.image}
+                  alt={product.name}
+                  className="h-full w-full object-cover transition-transform group-hover:scale-105"
+                />
+              </div>
+              
+              <CardContent className="p-4">
+                <h3
+                  className="cursor-pointer font-semibold hover:underline"
+                  onClick={() => onProductClick?.(product)}
+                >
+                  {product.name}
+                </h3>
+                
+                {product.description && (
+                  <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+                    {product.description}
+                  </p>
+                )}
+                
+                {product.rating !== undefined && (
+                  <div className="mt-2 flex items-center gap-2">
+                    <div className="flex items-center gap-1">
+                      <Star className="h-4 w-4 fill-primary text-primary" />
+                      <span className="text-sm font-medium">
+                        {product.rating.toFixed(1)}
+                      </span>
+                    </div>
+                    {product.reviewCount !== undefined && (
+                      <span className="text-sm text-muted-foreground">
+                        ({product.reviewCount})
+                      </span>
+                    )}
+                  </div>
+                )}
+                
+                <div className="mt-3 flex items-center gap-2">
+                  <span className="text-lg font-bold">
+                    {formatPrice(product.price, product.currency)}
+                  </span>
+                  {product.originalPrice && product.originalPrice > product.price && (
+                    <span className="text-sm text-muted-foreground line-through">
+                      {formatPrice(product.originalPrice, product.currency)}
+                    </span>
+                  )}
+                </div>
+                
+                {product.inStock === false && (
+                  <p className="mt-2 text-sm text-destructive">Out of stock</p>
+                )}
+              </CardContent>
+              
+              <CardFooter className="p-4 pt-0">
+                <Button
+                  className="w-full"
+                  disabled={product.inStock === false}
+                  onClick={() => onAddToCart?.(product)}
+                >
+                  <ShoppingCart className="mr-2 h-4 w-4" />
+                  Add to cart
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/blocks/ecommerce/shopping-cart.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@hanzo/ui/primitives'
+import { Separator } from '@hanzo/ui/primitives'
+import { Trash2, Plus, Minus } from 'lucide-react'
+
+export interface CartItem {
+  id: string | number
+  name: string
+  price: number
+  quantity: number
+  image: string
+  variant?: string
+  currency?: string
+}
+
+interface ShoppingCartProps extends React.ComponentPropsWithoutRef<'div'> {
+  items: CartItem[]
+  onUpdateQuantity?: (id: string | number, quantity: number) => void
+  onRemoveItem?: (id: string | number) => void
+  onCheckout?: () => void
+  shippingCost?: number
+  taxRate?: number
+  currency?: string
+}
+
+export function ShoppingCart({
+  className,
+  items,
+  onUpdateQuantity,
+  onRemoveItem,
+  onCheckout,
+  shippingCost = 0,
+  taxRate = 0,
+  currency = '$',
+  ...props
+}: ShoppingCartProps) {
+  const formatPrice = (price: number) => {
+    return `${currency}${price.toFixed(2)}`
+  }
+
+  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const tax = subtotal * taxRate
+  const total = subtotal + tax + shippingCost
+
+  return (
+    <div className={cn('grid gap-6 lg:grid-cols-3', className)} {...props}>
+      <div className="lg:col-span-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Shopping Cart ({items.length} items)</CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            {items.length === 0 ? (
+              <div className="p-6 text-center text-muted-foreground">
+                Your cart is empty
+              </div>
+            ) : (
+              <div className="divide-y">
+                {items.map((item) => (
+                  <div key={item.id} className="flex gap-4 p-6">
+                    <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
+                      <img
+                        src={item.image}
+                        alt={item.name}
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                    <div className="flex flex-1 flex-col">
+                      <div className="flex justify-between">
+                        <div>
+                          <h3 className="font-semibold">{item.name}</h3>
+                          {item.variant && (
+                            <p className="mt-1 text-sm text-muted-foreground">
+                              {item.variant}
+                            </p>
+                          )}
+                        </div>
+                        <p className="font-semibold">
+                          {formatPrice(item.price * item.quantity)}
+                        </p>
+                      </div>
+                      <div className="mt-4 flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <Button
+                            size="icon"
+                            variant="outline"
+                            className="h-8 w-8"
+                            onClick={() => 
+                              onUpdateQuantity?.(item.id, Math.max(1, item.quantity - 1))
+                            }
+                            disabled={item.quantity <= 1}
+                          >
+                            <Minus className="h-4 w-4" />
+                          </Button>
+                          <Input
+                            type="number"
+                            value={item.quantity}
+                            onChange={(e) => {
+                              const value = parseInt(e.target.value, 10)
+                              if (!isNaN(value) && value > 0) {
+                                onUpdateQuantity?.(item.id, value)
+                              }
+                            }}
+                            className="h-8 w-16 text-center"
+                            min="1"
+                          />
+                          <Button
+                            size="icon"
+                            variant="outline"
+                            className="h-8 w-8"
+                            onClick={() => 
+                              onUpdateQuantity?.(item.id, item.quantity + 1)
+                            }
+                          >
+                            <Plus className="h-4 w-4" />
+                          </Button>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => onRemoveItem?.(item.id)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Order Summary</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex justify-between">
+              <span>Subtotal</span>
+              <span>{formatPrice(subtotal)}</span>
+            </div>
+            {shippingCost > 0 && (
+              <div className="flex justify-between">
+                <span>Shipping</span>
+                <span>{formatPrice(shippingCost)}</span>
+              </div>
+            )}
+            {taxRate > 0 && (
+              <div className="flex justify-between">
+                <span>Tax</span>
+                <span>{formatPrice(tax)}</span>
+              </div>
+            )}
+            <Separator />
+            <div className="flex justify-between text-lg font-semibold">
+              <span>Total</span>
+              <span>{formatPrice(total)}</span>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button
+              className="w-full"
+              size="lg"
+              onClick={onCheckout}
+              disabled={items.length === 0}
+            >
+              Proceed to Checkout
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  )
+}