@thorprovider/blocks 0.1.2 → 1.0.0

package/src/blocks/e-commerce/product-categories/avatar-group.tsx

@@ -1,86 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useState } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * @title Avatar group
- * @description Overlapping avatar stack whose neighbours lift with a distance falloff on hover.
- *
- * Adapted from Transitions.dev "Avatar group hover".
- *
- * A dock, not a switch. Lifting only the hovered item makes the row twitch — one element jumps
- * while the rest sit rigid — so the response falls off with distance: the neighbour rises about
- * half as far, the next barely at all. The falloff is what makes the row read as one soft object.
- *
- * The return is deliberately springier than the approach: a strong overshoot curve on the way back
- * reads as elastic rather than mechanical.
- */
-const LIFT = -4
-const FALLOFF = 0.45
-const ACTIVE_SCALE = 1.05
-const DURATION = 320
-const EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)'
-const EASE_OUT = 'cubic-bezier(0.34, 3.85, 0.64, 1)'
-
-export function AvatarGroup({
-  children,
-  className,
-  overlap = '-ml-2',
-}: {
-  children: React.ReactNode
-  className?: string
-  /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */
-  overlap?: string
-}) {
-  const items = React.Children.toArray(children)
-  const [activeIndex, setActiveIndex] = useState<number | null>(null)
-  const [reducedMotion, setReducedMotion] = useState(false)
-
-  useEffect(() => {
-    const query = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const sync = () => setReducedMotion(query.matches)
-
-    sync()
-    query.addEventListener('change', sync)
-    return () => query.removeEventListener('change', sync)
-  }, [])
-
-  const itemStyle = (index: number): React.CSSProperties | undefined => {
-    if (reducedMotion) {
-      return undefined
-    }
-
-    const isActive = index === activeIndex
-    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex)
-
-    return {
-      // translateY before scale, so scaling never amplifies the lift distance.
-      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
-      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
-      willChange: 'transform',
-      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.
-      zIndex: isActive ? 1 : undefined,
-    }
-  }
-
-  return (
-    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>
-      {items.map((child, index) => (
-        <div
-          // eslint-disable-next-line react/no-array-index-key -- position is the identity here
-          key={index}
-          className={cn('relative', index > 0 && overlap)}
-          style={itemStyle(index)}
-          onMouseEnter={() => setActiveIndex(index)}
-        >
-          {child}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default AvatarGroup

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

@@ -1,126 +0,0 @@
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-import {
-  ArrowRight,
-  BatteryCharging,
-  Cable,
-  Camera,
-  Lightbulb,
-  ShieldCheck,
-  Smartphone,
-  Sparkles,
-  Wrench,
-  X,
-} from 'lucide-react'
-import type { CTA } from '../../../lib/types'
-
-const categoryIcons = {
-  Smartphone,
-  BatteryCharging,
-  Wrench,
-  Camera,
-  Cable,
-  ShieldCheck,
-  Sparkles,
-  Lightbulb,
-} as const
-
-export type ProductCategory1CategoryIcon =
-  | 'Smartphone'
-  | 'BatteryCharging'
-  | 'Wrench'
-  | 'Camera'
-  | 'Cable'
-  | 'ShieldCheck'
-  | 'Sparkles'
-  | 'Lightbulb'
-
-export interface ProductCategory1Category {
-  id: string
-  name: string
-  subtitle: string
-  icon: ProductCategory1CategoryIcon
-}
-
-export interface ProductCategory1Props {
-  badge?: string
-  title: string
-  description?: string
-  cta?: CTA
-  categories: ProductCategory1Category[]
-  className?: string
-}
-
-export function ProductCategory1({
-  badge,
-  title,
-  description,
-  cta,
-  categories,
-  className,
-}: ProductCategory1Props) {
-  return (
-    <section className={cn('relative w-full py-12 md:py-16 lg:py-20', className)}>
-      <div className='relative z-10 mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <header className='mx-auto mb-12 max-w-5xl'>
-          <div className='flex flex-col items-center justify-between gap-6 md:flex-row md:items-start md:text-start'>
-            <div className='flex flex-col items-center gap-4 text-center md:items-start md:text-start'>
-              {badge ? (
-                <div className='inline-flex'>
-                  <span className='bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium'>
-                    {badge}
-                  </span>
-                </div>
-              ) : null}
-              <div className='flex flex-col gap-2'>
-                <h2 className='text-foreground text-3xl font-bold tracking-tight md:text-4xl'>{title}</h2>
-                {description ? (
-                  <p className='text-muted-foreground max-w-2xl'>{description}</p>
-                ) : null}
-              </div>
-            </div>
-            {cta ? (
-              <Button
-                className='h-10 cursor-pointer whitespace-nowrap px-4'
-                size='lg'
-                asChild
-              >
-                <a href={cta.href}>
-                  {cta.label}
-                  <ArrowRight />
-                </a>
-              </Button>
-            ) : null}
-          </div>
-        </header>
-
-        <div className='mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
-          {categories.map(category => {
-            const Icon = categoryIcons[category.icon] ?? X
-            return (
-              <Card
-                key={category.id}
-                className='group relative overflow-hidden py-6 px-2 shadow-xs transition-all hover:shadow-md'
-              >
-                <CardContent>
-                  <div className='flex flex-col gap-4'>
-                    <div className='bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg'>
-                      <Icon className='size-5' strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className='text-foreground text-lg font-semibold'>{category.name}</h3>
-                      <p className='text-muted-foreground text-sm'>{category.subtitle}</p>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCategory1

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

@@ -1,51 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import {
-  ProductCategory2,
-  type ProductCategory2Category,
-} from './product-category-2'
-
-const base: ProductCategory2Category = {
-  id: 'cat-1',
-  name: 'Herramientas',
-  description: 'Taladros y accesorios',
-  image: '/products/drill.png',
-  trending: false,
-}
-
-const render = (category: ProductCategory2Category) =>
-  renderToStaticMarkup(<ProductCategory2 categories={[category]} />)
-
-// The count is the only text node that ends in "items" inside a span (the
-// `items-center` utility lives in a class attribute and is never followed by
-// `</span>`).
-const hasItemCount = (html: string) => html.includes('items</span>')
-
-describe('ProductCategory2 — optional itemCount', () => {
-  it('renders no count when itemCount is omitted (unknown projection)', () => {
-    const html = render(base)
-    expect(hasItemCount(html)).toBe(false)
-    // The tile itself still renders.
-    expect(html).toContain('Herramientas')
-    expect(html).toContain('Browse')
-  })
-
-  it('preserves a real zero count', () => {
-    const html = render({ ...base, itemCount: 0 })
-    expect(html).toContain('0 items</span>')
-  })
-
-  it('renders a positive count', () => {
-    const html = render({ ...base, itemCount: 7 })
-    expect(html).toContain('7 items</span>')
-  })
-
-  it('omits a negative count', () => {
-    expect(hasItemCount(render({ ...base, itemCount: -1 }))).toBe(false)
-  })
-
-  it('omits a non-finite count', () => {
-    expect(hasItemCount(render({ ...base, itemCount: Number.NaN }))).toBe(false)
-    expect(hasItemCount(render({ ...base, itemCount: Number.POSITIVE_INFINITY }))).toBe(false)
-  })
-})

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