@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/product-categories/product-category-2.tsx

@@ -1,120 +0,0 @@
-import { Card } from '../../../ui/card'
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { ArrowRight, ShoppingBag } from 'lucide-react'
-import type { CTA } from '../../../lib/types'
-
-export interface ProductCategory2Category {
-  id: string
-  handle?: string
-  name: string
-  description: string
-  /**
-   * Number of items in the category. Optional: when omitted, or when it is not
-   * a finite non-negative number, no count is rendered — an unknown projection
-   * must not be shown as a fabricated `0`. A real `0` is preserved.
-   */
-  itemCount?: number
-  image: string
-  trending: boolean
-}
-
-export interface ProductCategory2Props {
-  title?: string
-  description?: string
-  categories: ProductCategory2Category[]
-  cta?: CTA
-  onBrowse?: (category: ProductCategory2Category) => void
-}
-
-/**
- * Formats a category item count only when it is a supplied, finite,
- * non-negative number. Returns `undefined` for unknown or invalid values so the
- * caller omits the count entirely (a real `0` is preserved).
- */
-function formatItemCount(itemCount: number | undefined): string | undefined {
-  if (itemCount === undefined || !Number.isFinite(itemCount) || itemCount < 0) {
-    return undefined
-  }
-  return `${itemCount.toLocaleString()} items`
-}
-
-export function ProductCategory2({
-  title,
-  description,
-  categories,
-  cta,
-  onBrowse,
-}: ProductCategory2Props) {
-  return (
-    <section className='py-12'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        {(title || description) && (
-          <div className='mb-12 text-center'>
-            {title ? <h2 className='text-3xl font-bold tracking-tight text-balance'>{title}</h2> : null}
-            {description ? (
-              <p className='text-muted-foreground mt-4 text-lg'>{description}</p>
-            ) : null}
-          </div>
-        )}
-
-        <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>
-          {categories.map(category => {
-            const itemCountLabel = formatItemCount(category.itemCount)
-            return (
-              <Card
-                key={category.id}
-                className='group cursor-pointer overflow-hidden py-0 transition-all duration-500 hover:shadow-lg'
-              >
-                <div className='relative aspect-[5/4] overflow-hidden'>
-                  <img
-                    src={category.image || undefined}
-                    alt={category.name}
-                    className='size-full object-cover transition-transform duration-500 group-hover:scale-105'
-                  />
-                  <div className='absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent' />
-
-                  {category.trending ? (
-                    <Badge className='absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold'>
-                      Trending
-                    </Badge>
-                  ) : null}
-
-                  <div className='absolute right-0 bottom-0 left-0 p-6 text-white'>
-                    <h3 className='mb-1 text-xl font-bold'>{category.name}</h3>
-                    <p className='mb-3 text-sm text-white/90'>{category.description}</p>
-                    <div className='flex items-center justify-between'>
-                      {itemCountLabel ? <span className='text-sm'>{itemCountLabel}</span> : null}
-                      <Button
-                        size='sm'
-                        variant='secondary'
-                        className='ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30'
-                        onClick={onBrowse ? () => onBrowse(category) : undefined}
-                      >
-                        Browse
-                        <ArrowRight />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </Card>
-            )
-          })}
-        </div>
-
-        {cta ? (
-          <div className='mt-12 text-center'>
-            <Button size='lg' className='h-10 cursor-pointer gap-2 px-4' asChild>
-              <a href={cta.href}>
-                <ShoppingBag className='size-5' />
-                {cta.label}
-              </a>
-            </Button>
-          </div>
-        ) : null}
-      </div>
-    </section>
-  )
-}
-
-export default ProductCategory2

package/src/blocks/e-commerce/product-categories/product-category-4.tsx

@@ -1,129 +0,0 @@
-'use client'
-
-import type { LucideIcon } from 'lucide-react'
-import { Users, ShoppingBag } from 'lucide-react'
-
-import { Card, CardContent } from '../../../ui/card'
-import { Badge } from '../../../ui/badge'
-import { Avatar, AvatarImage, AvatarFallback } from '../../../ui/avatar'
-import { AvatarGroup } from './avatar-group'
-
-export interface ProductCategory4Category {
-  id: string
-  title: string
-  description: string
-  icon: LucideIcon
-  customers: string
-  products: number
-  avatarImages?: string[]
-}
-
-export interface ProductCategory4Props {
-  title?: string
-  description?: string
-  categories: ProductCategory4Category[]
-  productsLabel?: string
-  customersLabel?: string
-  onCategoryClick?: (category: ProductCategory4Category) => void
-}
-
-function getInitials(title: string): string {
-  return title
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map(word => word.charAt(0).toUpperCase())
-    .join('')
-}
-
-export function ProductCategory4({
-  title = 'Compra por categoría',
-  description = 'Explora nuestra selección de repuestos y accesorios',
-  categories,
-  productsLabel = 'productos',
-  customersLabel = 'clientes',
-  onCategoryClick,
-}: ProductCategory4Props) {
-  return (
-    <section className='bg-background w-full py-12 md:py-16'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='mx-auto mb-12 max-w-3xl text-center'>
-          <h2 className='text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl'>
-            {title}
-          </h2>
-          <p className='text-muted-foreground text-lg md:text-xl'>{description}</p>
-        </div>
-
-        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3'>
-          {categories.map(category => {
-            const Icon = category.icon
-            const clickable = Boolean(onCategoryClick)
-            return (
-              <Card
-                key={category.id}
-                className={`group relative overflow-hidden transition-all hover:shadow-md ${
-                  clickable ? 'cursor-pointer' : ''
-                }`}
-                onClick={onCategoryClick ? () => onCategoryClick(category) : undefined}
-                aria-label={clickable ? category.title : undefined}
-              >
-                <CardContent>
-                  <div className='mb-4 flex items-center justify-between'>
-                    <div className='bg-accent text-primary rounded-lg p-2.5' aria-hidden='true'>
-                      <Icon className='size-5' />
-                    </div>
-                    <Badge
-                      variant='secondary'
-                      className='bg-muted/50 rounded-sm px-2 py-1 font-semibold'
-                      aria-label={`${category.products} ${productsLabel}`}
-                    >
-                      <ShoppingBag className='me-1 size-3' />
-                      {category.products} {productsLabel}
-                    </Badge>
-                  </div>
-
-                  <h3 className='text-foreground mb-2 text-lg font-semibold'>{category.title}</h3>
-                  <p className='text-muted-foreground mb-4 text-sm'>{category.description}</p>
-
-                  <div className='flex items-center justify-between'>
-                    <div className='flex items-center gap-2'>
-                      {category.avatarImages?.length ? (
-                        <>
-                          <AvatarGroup>
-                            {category.avatarImages.slice(0, 3).map((src, i) => (
-                              <Avatar key={i} className='bg-muted size-6 border'>
-                                <AvatarImage src={src || undefined} alt='' />
-                                <AvatarFallback>{getInitials(category.title)}</AvatarFallback>
-                              </Avatar>
-                            ))}
-                          </AvatarGroup>
-                          <span
-                            className='text-muted-foreground flex items-center gap-1 text-sm'
-                            aria-label={`${category.customers} ${customersLabel}`}
-                          >
-                            <Users className='h-3.5 w-3.5' aria-hidden='true' />
-                            {category.customers} {customersLabel}
-                          </span>
-                        </>
-                      ) : (
-                        <span
-                          className='text-muted-foreground flex items-center gap-1 text-sm'
-                          aria-label={`${category.customers} ${customersLabel}`}
-                        >
-                          <Users className='h-3.5 w-3.5' aria-hidden='true' />
-                          {category.customers} {customersLabel}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCategory4

package/src/blocks/e-commerce/product-categories/product-category-5.tsx

@@ -1,218 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Card, CardContent } from '../../../ui/card'
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Input } from '../../../ui/input'
-import {
-  ArrowRight,
-  Search,
-  Laptop,
-  Shirt,
-  Home,
-  Dumbbell,
-  BookOpen,
-  Heart,
-  Car,
-  Utensils,
-  Gamepad2,
-  Baby,
-  Gift,
-  Wrench,
-} from 'lucide-react'
-import { cn } from '../../../lib/utils'
-
-export type CategoryIcon =
-  | 'electronics'
-  | 'fashion'
-  | 'home'
-  | 'sports'
-  | 'books'
-  | 'beauty'
-  | 'automotive'
-  | 'food'
-  | 'gaming'
-  | 'baby'
-  | 'gifts'
-  | 'tools'
-
-export interface ProductCategory5Category {
-  id: string
-  name: string
-  icon: CategoryIcon
-  description: string
-  itemCount: number
-  subcategories: string[]
-  featured?: boolean
-}
-
-export interface ProductCategory5Props {
-  title?: string
-  description?: string
-  categories: ProductCategory5Category[]
-  searchPlaceholder?: string
-  productsLabel?: string
-  featuredLabel?: string
-  browseLabel?: string
-  viewAllLabel?: string
-  notFoundLabel?: string
-  onBrowse?: (category: ProductCategory5Category) => void
-  onViewAll?: () => void
-}
-
-const categoryIcons: Record<CategoryIcon, typeof Laptop> = {
-  electronics: Laptop,
-  fashion: Shirt,
-  home: Home,
-  sports: Dumbbell,
-  books: BookOpen,
-  beauty: Heart,
-  automotive: Car,
-  food: Utensils,
-  gaming: Gamepad2,
-  baby: Baby,
-  gifts: Gift,
-  tools: Wrench,
-}
-
-export function ProductCategory5({
-  title = 'Explora categorías',
-  description = 'Encuentra lo que necesitas en nuestras categorías organizadas',
-  categories,
-  searchPlaceholder = 'Buscar categorías...',
-  productsLabel = 'productos disponibles',
-  featuredLabel = 'Destacado',
-  browseLabel = 'Explorar',
-  viewAllLabel = 'Ver todos los productos',
-  notFoundLabel = '¿No encuentras lo que buscas?',
-  onBrowse,
-  onViewAll,
-}: ProductCategory5Props) {
-  const [query, setQuery] = useState('')
-
-  const filteredCategories = categories.filter(category => {
-    const q = query.trim().toLowerCase()
-    if (!q) return true
-    return (
-      category.name.toLowerCase().includes(q) ||
-      category.subcategories.some(sub => sub.toLowerCase().includes(q))
-    )
-  })
-
-  const totalCount = categories.reduce((sum, category) => sum + category.itemCount, 0)
-
-  return (
-    <section className='py-12'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='mb-8 text-center'>
-          <h2 className='mb-4 text-3xl font-bold tracking-tight text-balance'>{title}</h2>
-          <p className='text-muted-foreground mb-6 text-lg'>{description}</p>
-
-          <div className='relative mx-auto max-w-md'>
-            <Search
-              className='text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2'
-              aria-hidden='true'
-            />
-            <Input
-              placeholder={searchPlaceholder}
-              value={query}
-              onChange={e => setQuery(e.target.value)}
-              className='ps-9 h-9'
-              aria-label='Buscar categorías'
-            />
-          </div>
-        </div>
-
-        {filteredCategories.length === 0 ? (
-          <p className='text-muted-foreground py-10 text-center text-sm'>
-            Sin resultados para &quot;{query.trim()}&quot;
-          </p>
-        ) : (
-          <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
-            {filteredCategories.map(category => {
-              const Icon = categoryIcons[category.icon]
-
-              return (
-                <Card
-                  key={category.id}
-                  className={cn(
-                    'group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md'
-                  )}
-                >
-                  <CardContent className='p-6'>
-                    <div className='flex items-start gap-4'>
-                      <div className='flex-shrink-0'>
-                        <div className='bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors'>
-                          <Icon className='text-primary size-6' aria-hidden='true' />
-                        </div>
-                      </div>
-
-                      <div className='min-w-0 flex-1'>
-                        <div className='flex items-start justify-between'>
-                          <div className='flex-1'>
-                            <div className='mb-2 flex items-center gap-2'>
-                              <h3 className='text-lg font-semibold transition-colors'>{category.name}</h3>
-                              {category.featured ? (
-                                <Badge
-                                  variant='secondary'
-                                  className='rounded-sm px-2 py-0.5 font-semibold'
-                                >
-                                  {featuredLabel}
-                                </Badge>
-                              ) : null}
-                            </div>
-                            <p className='text-muted-foreground mb-3 line-clamp-2 text-sm'>
-                              {category.description}
-                            </p>
-
-                            <div className='mb-3 flex flex-wrap gap-2'>
-                              {category.subcategories.map((sub, index) => (
-                                <span
-                                  key={index}
-                                  className='bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs'
-                                >
-                                  {sub}
-                                </span>
-                              ))}
-                            </div>
-
-                            <div className='text-muted-foreground text-sm'>
-                              {category.itemCount.toLocaleString()} {productsLabel}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      className='absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100'
-                      onClick={onBrowse ? () => onBrowse(category) : undefined}
-                    >
-                      {browseLabel}
-                      <ArrowRight />
-                    </Button>
-                  </CardContent>
-                </Card>
-              )
-            })}
-          </div>
-        )}
-
-        <div className='mt-8 text-center'>
-          <p className='text-muted-foreground mb-4 text-sm'>{notFoundLabel}</p>
-          <Button
-            variant='outline'
-            className='h-9 cursor-pointer px-4 py-2'
-            onClick={onViewAll}
-          >
-            {viewAllLabel} {totalCount.toLocaleString()}
-          </Button>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCategory5

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

@@ -1,88 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { ProductCard1, type ProductCard1Product } from './product-card-1'
-
-const legacy: ProductCard1Product = {
-  id: 'legacy-1',
-  title: 'Taladro percutor',
-  price: 49.99,
-  originalPrice: 69.99,
-  image: '/demo/drill.svg',
-}
-
-const canonical: ProductCard1Product = {
-  id: 'sku-1',
-  title: 'Llave de impacto',
-  price: { amount: '129.50', currencyCode: 'EUR' },
-  compareAtPrice: { amount: '159.00', currencyCode: 'EUR' },
-  image: '/demo/impact.svg',
-  imageAlt: 'Llave de impacto inalámbrica',
-  rating: 4.5,
-  badge: 'Nuevo',
-}
-
-const render = (products: ProductCard1Product[], extra: Record<string, unknown> = {}) =>
-  renderToStaticMarkup(<ProductCard1 products={products} {...extra} />)
-
-describe('ProductCard1 — legacy numeric path unchanged', () => {
-  it('keeps the legacy dollar output and originalPrice', () => {
-    const html = render([legacy])
-    expect(html).toContain('$49.99')
-    expect(html).toContain('$69.99')
-  })
-})
-
-describe('ProductCard1 — canonical Money path', () => {
-  it('formats the canonical price in its own currency (no dollars)', () => {
-    const html = render([canonical])
-    expect(html).not.toContain('$')
-    expect(html).toContain('129')
-  })
-
-  it('renders a comparison price only when it is strictly higher', () => {
-    expect(render([canonical])).toContain('159')
-    const equal = render([
-      { ...canonical, compareAtPrice: { amount: '129.50', currencyCode: 'EUR' } },
-    ])
-    const lower = render([
-      { ...canonical, compareAtPrice: { amount: '99.00', currencyCode: 'EUR' } },
-    ])
-    expect(equal).not.toContain('159')
-    expect(lower).not.toContain('99')
-  })
-
-  it('treats a valid zero as a real price', () => {
-    const html = render([
-      { ...canonical, price: { amount: '0.00', currencyCode: 'USD' }, compareAtPrice: undefined },
-    ])
-    expect(html).toContain('$0.00')
-    expect(html).not.toContain('Precio no disponible')
-  })
-
-  it('shows the unavailable label for an unresolved price (never $0)', () => {
-    const html = render([
-      { ...canonical, price: { amount: '', currencyCode: '' }, compareAtPrice: undefined },
-    ])
-    expect(html).toContain('Precio no disponible')
-    expect(html).not.toContain('$0')
-  })
-
-  it('renders the rating and badge only from real data', () => {
-    expect(render([canonical])).toContain('4.5')
-    expect(render([canonical])).toContain('Nuevo')
-    const withoutRating = render([{ ...canonical, rating: undefined, badge: undefined }])
-    expect(withoutRating).not.toContain('4.5')
-    expect(withoutRating).not.toContain('Nuevo')
-  })
-
-  it('omits the image source entirely when there is no image (no empty src)', () => {
-    const html = render([{ ...canonical, image: undefined }])
-    expect(html).not.toContain('src=""')
-    expect(html).toContain('Llave de impacto inalámbrica')
-  })
-
-  it('falls back to the title when no image alt is provided', () => {
-    const html = render([{ ...canonical, imageAlt: undefined }])
-    expect(html).toContain('alt="Llave de impacto"')
-  })
-})