@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/product-list/product-card-5.tsx

@@ -0,0 +1,367 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { CheckboxCheck } from './product-card-5-checkbox-check'
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../../../ui/input-group'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../ui/table'
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'
+import { Heart, ShoppingCart, Star, Search, Filter, Eye, ArrowUpDown, GitCompare } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { ProductCard5ReactionToggle } from './product-card-5-reaction-toggle'
+
+export interface ProductCard5Product {
+  id: string
+  name: string
+  category: string
+  price: number
+  rating: number
+  reviews: number
+  image: string
+  stock: string
+  specifications: string
+  brand: string
+}
+
+export interface ProductCard5Props {
+  products: ProductCard5Product[]
+  onToggleWishlist?: (product: ProductCard5Product) => void
+  onAddToCart?: (product: ProductCard5Product) => void
+  onQuickView?: (product: ProductCard5Product) => void
+  onCompare?: (products: ProductCard5Product[]) => void
+  onExport?: (products: ProductCard5Product[]) => void
+}
+
+/**
+ * Stock state as a Badge variant rather than a hand-mixed palette.
+ *
+ * These used to be literal `bg-green-100 … dark:bg-green-900/20` triples, which is the one thing
+ * a themed design system cannot absorb: they ignored the customizer entirely and needed a manual
+ * `dark:` for every value. `secondary` and `destructive` are the tokens that already mean
+ * "fine" and "not fine", and the label carries the meaning in words either way.
+ */
+const stockVariants: Record<string, 'secondary' | 'outline' | 'destructive'> = {
+  'In Stock': 'secondary',
+  'Low Stock': 'outline',
+  'Out of Stock': 'destructive',
+}
+
+export function ProductCard5({
+  products,
+  onToggleWishlist,
+  onAddToCart,
+  onQuickView,
+  onCompare,
+  onExport,
+}: ProductCard5Props) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState('all')
+  const [selectedProducts, setSelectedProducts] = useState<string[]>([])
+  const [sortBy, setSortBy] = useState<'name' | 'price' | 'rating'>('name')
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
+  const [wishlisted, setWishlisted] = useState<string[]>([])
+
+  const filteredProducts = products
+    .filter(product => {
+      const matchesSearch =
+        product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        product.brand.toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesCategory = categoryFilter === 'all' || product.category === categoryFilter
+      return matchesSearch && matchesCategory
+    })
+    .sort((a, b) => {
+      let aValue: string | number = a[sortBy]
+      let bValue: string | number = b[sortBy]
+
+      if (sortOrder === 'asc') {
+        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
+      } else {
+        return aValue > bValue ? -1 : aValue < bValue ? 1 : 0
+      }
+    })
+
+  const categories = [...new Set(products.map(p => p.category))]
+
+  const selectedProductObjects = products.filter(p => selectedProducts.includes(p.id))
+
+  const handleSort = (field: 'name' | 'price' | 'rating') => {
+    if (sortBy === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortBy(field)
+      setSortOrder('asc')
+    }
+  }
+
+  const toggleProductSelection = (productId: string) => {
+    setSelectedProducts(prev => (prev.includes(productId) ? prev.filter(id => id !== productId) : [...prev, productId]))
+  }
+
+  const toggleWishlist = (product: ProductCard5Product) => {
+    setWishlisted(prev => (prev.includes(product.id) ? prev.filter(id => id !== product.id) : [...prev, product.id]))
+    onToggleWishlist?.(product)
+  }
+
+  const renderStars = (rating: number) => {
+    return Array.from({ length: 5 }, (_, i) => (
+      <Star
+        key={i}
+        aria-hidden='true'
+        className={cn(
+          'size-3',
+          i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''
+        )}
+      />
+    ))
+  }
+
+  return (
+    <section className='py-8'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <Card>
+          <CardHeader>
+            <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+              <div>
+                <CardTitle className='text-2xl text-balance'>Comparación de productos</CardTitle>
+                <p className='text-muted-foreground'>Compara productos lado a lado para tomar la mejor decisión</p>
+              </div>
+              {/*
+                No height, padding or cursor overrides on top of the variant: the default size
+                already is `h-9 px-4`, and re-stating it by class is how a button drifts out of
+                step with every other button the moment the design system moves.
+              */}
+              {selectedProducts.length > 0 && (
+                <Button onClick={onCompare ? () => onCompare(selectedProductObjects) : undefined}>
+                  <GitCompare data-icon='inline-start' aria-hidden='true' />
+                  Comparar {selectedProducts.length} productos
+                </Button>
+              )}
+            </div>
+          </CardHeader>
+          <CardContent>
+            {/* Filters */}
+            <div className='mb-6 flex flex-col gap-4 sm:flex-row sm:items-center'>
+              {/*
+                An InputGroup rather than a relative div with an absolutely positioned icon and
+                a hand-picked `ps-9` to clear it. The group owns that offset, so the icon and the
+                text cannot drift apart when the radius or the input's height changes.
+              */}
+              <InputGroup className='max-w-md flex-1'>
+                <InputGroupAddon>
+                  <Search />
+                </InputGroupAddon>
+                <InputGroupInput
+                  placeholder='Buscar productos o marcas...'
+                  value={searchQuery}
+                  onChange={e => setSearchQuery(e.target.value)}
+                  aria-label='Buscar productos o marcas'
+                />
+              </InputGroup>
+              <Select value={categoryFilter} onValueChange={value => value && setCategoryFilter(value)}>
+                <SelectTrigger className='w-[180px]' aria-label='Filtrar por categoría'>
+                  <Filter className='me-2 size-4' />
+                  <SelectValue>{categoryFilter === 'all' ? 'Todas las categorías' : categoryFilter}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {/* Items belong in a group — the list is one set, not loose children. */}
+                  <SelectGroup>
+                    <SelectItem value='all'>Todas las categorías</SelectItem>
+                    {categories.map(category => (
+                      <SelectItem key={category} value={category}>
+                        {category}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Products Table */}
+            <div className='overflow-x-auto rounded-md border'>
+              <Table className='min-w-full table-fixed'>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className='w-12 ps-4'>
+                      <CheckboxCheck
+                        checked={selectedProducts.length === filteredProducts.length && filteredProducts.length > 0}
+                        onCheckedChange={checked => {
+                          if (checked) {
+                            setSelectedProducts(filteredProducts.map(p => p.id))
+                          } else {
+                            setSelectedProducts([])
+                          }
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className='w-56 min-w-[200px]'>Producto</TableHead>
+                    {/*
+                      A Button inside the header, not an onClick on the cell.
+
+                      A `<th>` with a click handler is invisible to the keyboard and announces
+                      nothing: there was no way to sort this table without a mouse, and a screen
+                      reader was never told the column was sortable or which way it currently
+                      runs. `aria-sort` on the header states the direction, and the button is the
+                      thing that takes focus.
+                    */}
+                    {([
+                      { field: 'name', label: 'Detalles', width: 'w-52 min-w-[180px]' },
+                      { field: 'price', label: 'Precio', width: 'w-32 min-w-[100px]' },
+                      { field: 'rating', label: 'Valoración', width: 'w-32 min-w-[100px]' },
+                    ] as const).map(column => (
+                      <TableHead
+                        key={column.field}
+                        className={column.width}
+                        aria-sort={
+                          sortBy === column.field
+                            ? sortOrder === 'asc'
+                              ? 'ascending'
+                              : 'descending'
+                            : 'none'
+                        }
+                      >
+                        <Button
+                          variant='ghost'
+                          size='sm'
+                          className='-ms-2 h-8 gap-1 px-2'
+                          onClick={() => handleSort(column.field)}
+                        >
+                          {column.label}
+                          <ArrowUpDown data-icon='inline-end' aria-hidden='true' />
+                        </Button>
+                      </TableHead>
+                    ))}
+                    <TableHead className='w-32 min-w-[100px] text-center'>Stock</TableHead>
+                    <TableHead className='w-34 min-w-[90px] pe-3 text-center'>Acciones</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredProducts.map(product => (
+                    <TableRow key={product.id}>
+                      <TableCell className='ps-4'>
+                        <CheckboxCheck
+                          checked={selectedProducts.includes(product.id)}
+                          onCheckedChange={() => toggleProductSelection(product.id)}
+                        />
+                      </TableCell>
+                      <TableCell className='w-56 min-w-[200px] break-words whitespace-normal'>
+                        <div className='flex items-center gap-3'>
+                          <img src={product.image || undefined} alt={product.name} className='size-12 rounded-md object-cover' />
+                          <div>
+                            <div className='font-medium'>{product.name}</div>
+                            <div className='text-muted-foreground text-sm'>
+                              {product.brand} • {product.category}
+                            </div>
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell className='w-52 min-w-[180px] break-words whitespace-normal'>
+                        <div>
+                          <div className='text-muted-foreground text-sm'>{product.specifications}</div>
+                        </div>
+                      </TableCell>
+                      <TableCell className='w-32 min-w-[100px]'>
+                        <div className='flex items-center gap-2'>
+                          <span className='font-semibold'>${product.price}</span>
+                        </div>
+                      </TableCell>
+                      <TableCell className='w-32 min-w-[100px]'>
+                        <div className='flex items-center gap-2'>
+                          <div className='flex'>{renderStars(product.rating)}</div>
+                          <span className='text-muted-foreground text-sm'>
+                            {product.rating} ({product.reviews})
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell className='w-32 min-w-[100px] text-center'>
+                        <Badge variant={stockVariants[product.stock] ?? 'secondary'} className='rounded-full'>
+                          {product.stock}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className='w-34 min-w-[90px] pe-4 text-center'>
+                        <div className='flex items-center justify-center gap-1'>
+                          <Button
+                            variant='ghost'
+                            size='icon-sm'
+                            aria-label={`Vista rápida de ${product.name}`}
+                            onClick={onQuickView ? () => onQuickView(product) : undefined}
+                          >
+                            <Eye />
+                          </Button>
+
+                          {/*
+                            The same reaction control the card blocks use: the heart pops with an
+                            overshoot and throws eight particles the moment it becomes active.
+                            It carries its own copy of the file rather than importing from another
+                            block, because blocks install one at a time into a flat directory — a
+                            part shared across two blocks only arrives if the buyer happens to
+                            take both. The keyframes dedupe by marker if they do.
+                          */}
+                          <Button
+                            variant='ghost'
+                            size='icon-sm'
+                            onClick={() => toggleWishlist(product)}
+                            aria-pressed={wishlisted.includes(product.id)}
+                            aria-label={
+                              wishlisted.includes(product.id)
+                                ? `Quitar ${product.name} de la lista de deseos`
+                                : `Agregar ${product.name} a la lista de deseos`
+                            }
+                          >
+                            <ProductCard5ReactionToggle
+                              active={wishlisted.includes(product.id)}
+                              icon={Heart}
+                              iconClassName={cn(
+                                'size-4',
+                                !wishlisted.includes(product.id) && 'text-muted-foreground'
+                              )}
+                              activeColorClassName='text-destructive'
+                            />
+                          </Button>
+
+                          <Button
+                            size='icon-sm'
+                            disabled={product.stock === 'Out of Stock'}
+                            aria-label={`Agregar ${product.name} al carrito`}
+                            onClick={onAddToCart ? () => onAddToCart(product) : undefined}
+                          >
+                            <ShoppingCart />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+
+            {/* Summary */}
+            <div className='text-muted-foreground mt-6 flex flex-wrap items-center justify-between gap-4 text-sm'>
+              <div>
+                Mostrando {filteredProducts.length} de {products.length} productos
+                {selectedProducts.length > 0 && (
+                  <span className='ms-2'>• {selectedProducts.length} seleccionados</span>
+                )}
+              </div>
+              <div className='flex items-center gap-4'>
+                <span>
+                  Ordenar por: {sortBy} ({sortOrder})
+                </span>
+                <Button
+                  variant='outline'
+                  size='sm'
+                  onClick={onExport ? () => onExport(filteredProducts) : undefined}
+                >
+                  Exportar lista
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  )
+}
+
+export default ProductCard5

package/src/blocks/e-commerce/product-overview/product-overview-1.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '../../../ui/button'
+import { cn } from '../../../lib/utils'
+import { Heart, Star } from 'lucide-react'
+import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../../../ui/carousel'
+import { ReactionToggle } from '../../shared/reaction-toggle'
+
+export interface ProductOverview1ProductImage {
+  id: number
+  src: string
+  alt: string
+}
+
+export interface ProductOverview1ProductColor {
+  name: string
+  value: string
+}
+
+export interface ProductOverview1Product {
+  id: string
+  brand: string
+  name: string
+  description: string
+  price: number
+  currency: string
+  rating: number
+  images: ProductOverview1ProductImage[]
+  sizes: number[]
+  colors: ProductOverview1ProductColor[]
+}
+
+export interface ProductOverview1Props {
+  product: ProductOverview1Product
+  sizesLabel?: string
+  colorLabel?: string
+  reviewsLabel?: string
+  addToCartLabel?: string
+  removeFromWishlistLabel?: string
+  addToWishlistLabel?: string
+  onAddToCart?: (product: ProductOverview1Product) => void
+  onToggleWishlist?: (product: ProductOverview1Product, isWishlisted: boolean) => void
+}
+
+export default function ProductOverview1({
+  product,
+  sizesLabel = 'Tallas',
+  colorLabel = 'Color',
+  reviewsLabel = 'Reseñas',
+  addToCartLabel = 'Agregar al carrito',
+  removeFromWishlistLabel = 'Quitar de favoritos',
+  addToWishlistLabel = 'Agregar a favoritos',
+  onAddToCart,
+  onToggleWishlist,
+}: ProductOverview1Props) {
+  const [selectedImage, setSelectedImage] = useState(0)
+  const [selectedSize, setSelectedSize] = useState<number | null>(product.sizes[0])
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+  const [isWishlisted, setIsWishlisted] = useState(false)
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
+
+  useEffect(() => {
+    if (!carouselApi) return
+
+    carouselApi.scrollTo(selectedImage)
+
+    const handleSelect = () => {
+      const currentIndex = carouselApi.selectedScrollSnap()
+      setSelectedImage(currentIndex)
+    }
+
+    carouselApi.on('select', handleSelect)
+    return () => {
+      carouselApi.off('select', handleSelect)
+    }
+  }, [carouselApi, selectedImage])
+
+  return (
+    <div>
+      <section className='@container mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='grid grid-cols-1 gap-6 py-4 lg:grid-cols-2 lg:gap-8 lg:py-6 xl:grid-cols-3 xl:gap-12 xl:py-12'>
+          <div className='flex flex-col justify-between gap-6 lg:gap-8'>
+            <div className='flex flex-col gap-2 lg:gap-4'>
+              <span className='text-sm font-semibold tracking-wide uppercase'>{product.brand} —</span>
+              <h2 className='text-xl font-bold tracking-tight text-balance lg:text-3xl'>{product.name}</h2>
+              <p className='text-muted-foreground text-balance'>{product.description}</p>
+              <p className='text-2xl font-bold tracking-tight'>
+                {product.currency}
+                {product.price}
+              </p>
+            </div>
+
+            <div className='flex flex-wrap gap-4'>
+              {product.images.map((image, index) => (
+                <div
+                  key={image.id}
+                  onMouseEnter={() => setSelectedImage(index)}
+                  className={cn(
+                    'ring-offset-background size-16 cursor-pointer overflow-hidden rounded-sm ring-offset-2 transition-all lg:size-18',
+                    selectedImage === index && 'ring-foreground ring-2',
+                  )}
+                >
+                  <img src={image.src || undefined} alt={image.alt} className='size-full object-cover' />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className='row-span-2 row-start-1 lg:col-start-2'>
+            <Carousel setApi={setCarouselApi} className='w-full'>
+              <CarouselContent>
+                {product.images.map(image => (
+                  <CarouselItem key={image.id}>
+                    <img src={image.src || undefined} alt={image.alt} className='w-full h-90 rounded-lg object-cover' />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+
+          <div className='flex flex-col gap-6 lg:gap-10'>
+            <div className='flex flex-col gap-2'>
+              <h3 className='font-bold'>{sizesLabel}</h3>
+              <div className='flex flex-wrap gap-3'>
+                {product.sizes.map(size => (
+                  <Button
+                    key={size}
+                    variant={selectedSize === size ? 'default' : 'outline'}
+                    onClick={() => setSelectedSize(size)}
+                    className='h-9 px-4 py-2 size-12 cursor-pointer rounded-full p-0'
+                  >
+                    {size}
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            <div className='flex flex-col gap-2'>
+              <h3 className='font-bold'>{colorLabel}</h3>
+              <div className='flex gap-3'>
+                {product.colors.map(color => (
+                  <Button
+                    key={color.name}
+                    onClick={() => setSelectedColor(color)}
+                    className={cn(
+                      'h-9 px-4 py-2',
+                      'ring-offset-background size-8 cursor-pointer rounded-full ring-offset-2 transition-all',
+                      selectedColor.name === color.name && 'ring-foreground ring-2',
+                      selectedColor.name !== color.name &&
+                        ['Black', 'White'].includes(color.name) &&
+                        'outline-muted outline-solid',
+                    )}
+                    style={{ backgroundColor: color.value }}
+                    aria-label={`Seleccionar color ${color.name}`}
+                  />
+                ))}
+              </div>
+            </div>
+
+            <div className='flex flex-col gap-2'>
+              <h3 className='font-bold'>{reviewsLabel}</h3>
+              <div className='flex gap-1'>
+                {[...Array(5)].map((_, i) => (
+                  <Star
+                    key={i}
+                    className='text-foreground size-5'
+                    fill={i < product.rating ? 'currentColor' : 'none'}
+                  />
+                ))}
+              </div>
+            </div>
+
+            <div className='flex gap-4'>
+              <Button
+                className='h-10 px-8 flex-1 cursor-pointer rounded-full'
+                size='lg'
+                onClick={onAddToCart ? () => onAddToCart(product) : undefined}
+              >
+                {addToCartLabel}
+              </Button>
+              <Button
+                variant='outline'
+                size='icon'
+                className='size-9 rounded-full cursor-pointer'
+                onClick={() => {
+                  const next = !isWishlisted
+                  setIsWishlisted(next)
+                  onToggleWishlist?.(product, next)
+                }}
+                aria-label={isWishlisted ? removeFromWishlistLabel : addToWishlistLabel}
+              >
+                <ReactionToggle active={isWishlisted} icon={Heart} iconClassName='size-5' activeColorClassName='text-primary' />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}