@hanzo/ui 4.8.5 → 5.0.0

package/blocks/ecommerce/product-detail.tsx

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

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

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

package/blocks/index.ts

@@ -1,2 +0,0 @@
-export * from './def'
-export * from './components'