@hanzo/ui 4.7.0 → 4.8.2

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'

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