@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -0,0 +1,170 @@
+'use client'
+
+import { Search } from 'lucide-react'
+
+import { Input } from '../../../ui/input'
+import { cn } from '../../../lib/utils'
+import type {
+  CategoryGridSpecProps,
+  ProductCategoryItem,
+} from '../../../lib/contracts'
+import { CategoryCard, type CategoryCardPresentation } from './category-card'
+import { SectionCta, ViewAllButton } from './category-shared'
+
+export type CategoryGridPresentation = NonNullable<CategoryGridSpecProps['presentation']>
+
+export interface CategoryGridProps extends CategoryGridSpecProps {
+  onBrowse?: (category: ProductCategoryItem) => void
+  onViewAll?: () => void
+  onQueryChange?: (query: string) => void
+}
+
+const CONTAINER = 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'
+
+const LAYOUT: Record<CategoryGridPresentation, string> = {
+  grid: 'grid gap-6 sm:grid-cols-2 lg:grid-cols-3',
+  icons: 'mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4',
+  list: 'grid grid-cols-1 gap-4 lg:grid-cols-2',
+}
+
+const SKELETON: Record<CategoryGridPresentation, string> = {
+  grid: 'aspect-[5/4]',
+  icons: 'h-36',
+  list: 'h-28',
+}
+
+function Header({
+  presentation,
+  title,
+  description,
+  badge,
+}: {
+  presentation: CategoryGridPresentation
+  title?: string
+  description?: string
+  badge?: string
+}) {
+  if (presentation === 'icons') {
+    if (!badge && !title && !description) return null
+    return (
+      <div className="mx-auto mb-12 max-w-3xl text-center">
+        {badge ? (
+          <div className="mb-4 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}
+        {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>
+    )
+  }
+
+  if (!title && !description) return null
+  return (
+    <div className={cn('text-center', presentation === 'list' ? 'mb-8' : 'mb-12')}>
+      {title ? (
+        <h2 className={cn('text-3xl font-bold tracking-tight text-balance', presentation === 'list' && 'mb-4')}>
+          {title}
+        </h2>
+      ) : null}
+      {description ? (
+        <p className={cn('text-muted-foreground text-lg', presentation !== 'list' && 'mt-4')}>
+          {description}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export function CategoryGrid(props: CategoryGridProps) {
+  const presentation = props.presentation ?? 'grid'
+  const {
+    categories,
+    className,
+    title,
+    description,
+    badge,
+    cta,
+    query,
+    onQueryChange,
+    onBrowse,
+    onViewAll,
+    searchPlaceholder,
+    searchLabel,
+    emptyLabel,
+    noResultsLabel,
+    viewAllLabel,
+  } = props
+
+  const displayed =
+    props.maxItems !== undefined ? categories.slice(0, props.maxItems) : categories
+  const hasQuery = Boolean(query && query.trim() !== '')
+  const emptyMessage = hasQuery ? (noResultsLabel ?? emptyLabel) : emptyLabel
+  const skeletonCount = props.skeletonCount ?? 6
+  const cellPresentation = presentation as CategoryCardPresentation
+
+  return (
+    <section className={cn('py-12', className)}>
+      <div className={CONTAINER}>
+        <Header presentation={presentation} title={title} description={description} badge={badge} />
+
+        {presentation === 'list' && onQueryChange ? (
+          <div className="relative mx-auto mb-8 max-w-md">
+            <Search
+              className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2"
+              aria-hidden="true"
+            />
+            <Input
+              type="search"
+              placeholder={searchPlaceholder}
+              value={query ?? ''}
+              onChange={(event) => onQueryChange(event.target.value)}
+              className="ps-9 h-9"
+              aria-label={searchLabel ?? searchPlaceholder}
+            />
+          </div>
+        ) : null}
+
+        {props.loading ? (
+          <div className={LAYOUT[presentation]} aria-busy="true">
+            {Array.from({ length: skeletonCount }, (_, index) => (
+              <div
+                key={`skeleton-${index}`}
+                className={cn('bg-muted/50 animate-pulse rounded-xl', SKELETON[presentation])}
+              />
+            ))}
+          </div>
+        ) : displayed.length === 0 ? (
+          emptyMessage ? (
+            <p className="text-muted-foreground py-10 text-center text-sm">{emptyMessage}</p>
+          ) : null
+        ) : (
+          <div className={LAYOUT[presentation]}>
+            {displayed.map((category) => (
+              <CategoryCard
+                key={category.id}
+                category={category}
+                presentation={cellPresentation}
+                browseLabel={props.browseLabel}
+                itemsLabel={props.itemsLabel}
+                trendingLabel={props.trendingLabel}
+                featuredLabel={props.featuredLabel}
+                imageFallback={props.imageFallback}
+                onBrowse={onBrowse}
+              />
+            ))}
+          </div>
+        )}
+
+        {!props.loading && presentation !== 'list' ? <SectionCta cta={cta} /> : null}
+        {!props.loading && presentation !== 'grid' ? (
+          <ViewAllButton onViewAll={onViewAll} viewAllLabel={viewAllLabel} />
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+export default CategoryGrid

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

@@ -0,0 +1,266 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ProductCategory } from './product-category'
+import type { ProductCategoryItem } from '../../../lib/contracts'
+
+beforeAll(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+})
+
+const base: ProductCategoryItem = {
+  id: 'pcat_herramientas',
+  handle: 'herramientas',
+  name: 'Herramientas',
+  description: 'Taladros y accesorios',
+  image: '/products/drill.png',
+  trending: false,
+}
+
+const renderGrid = (category: ProductCategoryItem, extra: Record<string, unknown> = {}) =>
+  renderToStaticMarkup(<ProductCategory categories={[category]} {...extra} />)
+
+// The count is the only text node that ends in "items" (the `items-center`
+// utility lives in a class attribute and is never followed by `</span>`).
+const hasGridCount = (html: string) => html.includes('items</span>')
+
+describe('ProductCategory — optional itemCount (grid)', () => {
+  it('renders no count when itemCount is omitted (unknown projection)', () => {
+    const html = renderGrid(base, { itemsLabel: 'items' })
+    expect(hasGridCount(html)).toBe(false)
+    // The tile itself still renders.
+    expect(html).toContain('Herramientas')
+  })
+
+  it('preserves a real zero count', () => {
+    expect(renderGrid({ ...base, itemCount: 0 }, { itemsLabel: 'items' })).toContain('0 items</span>')
+  })
+
+  it('renders a positive count', () => {
+    expect(renderGrid({ ...base, itemCount: 7 }, { itemsLabel: 'items' })).toContain('7 items</span>')
+  })
+
+  it('renders the bare number when no items label is supplied', () => {
+    const html = renderGrid({ ...base, itemCount: 7 })
+    expect(html).toContain('>7<')
+    expect(html).not.toContain('items</span>')
+  })
+
+  it('omits a negative count', () => {
+    expect(hasGridCount(renderGrid({ ...base, itemCount: -1 }, { itemsLabel: 'items' }))).toBe(false)
+  })
+
+  it('omits a non-finite count', () => {
+    expect(hasGridCount(renderGrid({ ...base, itemCount: Number.NaN }, { itemsLabel: 'items' }))).toBe(false)
+    expect(hasGridCount(renderGrid({ ...base, itemCount: Number.POSITIVE_INFINITY }, { itemsLabel: 'items' }))).toBe(
+      false,
+    )
+  })
+})
+
+describe('ProductCategory — no demo defaults or hardcoded locale copy', () => {
+  it('ships no copy when the host supplies none', () => {
+    const html = renderGrid(base)
+    expect(html).toContain('Herramientas')
+    expect(html).not.toContain('Browse')
+    expect(html).not.toContain('Trending')
+    expect(html).not.toContain('items</span>')
+  })
+
+  it('renders the browse action only when a handler and label are supplied', () => {
+    expect(renderGrid({ ...base, trending: true })).not.toContain('Browse')
+    expect(renderGrid(base, { onBrowse: () => {}, browseLabel: 'Explorar' })).toContain('Explorar')
+  })
+
+  it('renders the trending badge only when a label is supplied', () => {
+    expect(renderGrid({ ...base, trending: true })).not.toContain('Trending')
+    expect(renderGrid({ ...base, trending: true }, { trendingLabel: 'Tendencia' })).toContain('Tendencia')
+  })
+})
+
+describe('ProductCategory — honest imagery', () => {
+  it('never emits src="" and falls back to a neutral placeholder', () => {
+    const html = renderGrid({ ...base, image: undefined })
+    expect(html).not.toContain('src=""')
+    expect(html).toContain('data:image/svg+xml')
+  })
+
+  it('treats a blank image as missing', () => {
+    expect(renderGrid({ ...base, image: '   ' })).toContain('data:image/svg+xml')
+  })
+})
+
+describe('ProductCategory — bounded presentations', () => {
+  it('icons presentation renders no image and a different structure than grid', () => {
+    const category: ProductCategoryItem = { id: 'pcat_x', name: 'Categoría', icon: 'shirt' }
+    const icons = renderToStaticMarkup(<ProductCategory categories={[category]} presentation='icons' />)
+    expect(icons).toContain('Categoría')
+    expect(icons).not.toContain('<img')
+    expect(icons).not.toContain('aspect-[5/4]')
+  })
+
+  it('icons presentation ignores category counts (no demo metrics)', () => {
+    const category: ProductCategoryItem = { id: 'pcat_x', name: 'Categoría', icon: 'shirt', itemCount: 42 }
+    const icons = renderToStaticMarkup(
+      <ProductCategory categories={[category]} presentation='icons' itemsLabel='items' />,
+    )
+    expect(icons).not.toContain('42')
+    expect(icons).not.toContain('items</span>')
+    expect(icons).not.toContain('items</div>')
+  })
+
+  it('falls back to a neutral icon for an unknown or absent key', () => {
+    const unknown = renderToStaticMarkup(
+      <ProductCategory categories={[{ id: 'pcat_x', name: 'X', icon: 'not-a-real-icon' }]} presentation='icons' />,
+    )
+    const absent = renderToStaticMarkup(
+      <ProductCategory categories={[{ id: 'pcat_y', name: 'Y' }]} presentation='icons' />,
+    )
+    expect(unknown).toContain('X')
+    expect(absent).toContain('Y')
+  })
+})
+
+describe('ProductCategory — icons: keyboard-operable interactive category', () => {
+  const category: ProductCategoryItem = { id: 'pcat_herramientas', name: 'Herramientas', icon: 'wrench' }
+
+  it('renders a native button whose accessible name is the category name', () => {
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={() => {}} />)
+    const control = screen.getByRole('button', { name: 'Herramientas' })
+    expect(control.tagName).toBe('BUTTON')
+    expect(control.getAttribute('type')).toBe('button')
+  })
+
+  it('is focusable and activates with the Enter key, reporting onBrowse', async () => {
+    const user = userEvent.setup()
+    const onBrowse = vi.fn()
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={onBrowse} />)
+    await user.tab()
+    const control = screen.getByRole('button', { name: 'Herramientas' })
+    expect(document.activeElement).toBe(control)
+    await user.keyboard('{Enter}')
+    expect(onBrowse).toHaveBeenCalledWith(category)
+  })
+
+  it('activates with the Space key, reporting onBrowse', async () => {
+    const user = userEvent.setup()
+    const onBrowse = vi.fn()
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={onBrowse} />)
+    await user.tab()
+    await user.keyboard(' ')
+    expect(onBrowse).toHaveBeenCalledWith(category)
+  })
+
+  it('is not a focusable control when no browse handler is supplied', async () => {
+    const user = userEvent.setup()
+    render(<ProductCategory categories={[category]} presentation='icons' />)
+    expect(screen.queryByRole('button')).toBeNull()
+    await user.tab()
+    expect(document.activeElement).toBe(document.body)
+    expect(screen.getByText('Herramientas')).toBeTruthy()
+  })
+
+  it('uses an inset focus ring so the indicator is not clipped by the card', () => {
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={() => {}} />)
+    const control = screen.getByRole('button', { name: 'Herramientas' })
+    expect(control.className).toContain('focus-visible:inset-ring-2')
+    expect(control.className).toContain('focus-visible:inset-ring-ring')
+    expect(control.className).not.toContain('focus-visible:ring-2')
+  })
+})
+
+describe('ProductCategory — grid/list browse controls expose the category name', () => {
+  const category: ProductCategoryItem = { id: 'pcat_herramientas', name: 'Herramientas', image: '/products/drill.png' }
+
+  it('names the grid browse control with the host label and the category name', () => {
+    render(
+      <ProductCategory categories={[category]} presentation='grid' onBrowse={() => {}} browseLabel='Explorar' />,
+    )
+    const control = screen.getByRole('button', { name: 'Explorar Herramientas' })
+    expect(control.textContent).toContain('Explorar')
+  })
+
+  it('names the list browse control with the host label and the category name', () => {
+    render(
+      <ProductCategory categories={[category]} presentation='list' onBrowse={() => {}} browseLabel='Explorar' />,
+    )
+    const control = screen.getByRole('button', { name: 'Explorar Herramientas' })
+    expect(control.textContent).toContain('Explorar')
+  })
+})
+
+describe('ProductCategory — list presentation owns no filtering', () => {
+  const categories: ProductCategoryItem[] = [
+    { id: 'pcat_shirts', name: 'Camisas', icon: 'shirt', subcategories: ['Manga larga', 'Manga corta'], itemCount: 12 },
+    { id: 'pcat_boots', name: 'Botas', icon: 'shirt', featured: true },
+  ]
+
+  it('renders only the categories the host supplies for the current query', () => {
+    const html = renderToStaticMarkup(
+      <ProductCategory categories={[categories[1]]} presentation='list' query='bot' onQueryChange={() => {}} />,
+    )
+    expect(html).toContain('Botas')
+    expect(html).not.toContain('Camisas')
+  })
+
+  it('renders subcategory chips and the count with the host label', () => {
+    const html = renderToStaticMarkup(
+      <ProductCategory categories={[categories[0]]} presentation='list' itemsLabel='productos' />,
+    )
+    expect(html).toContain('Manga larga')
+    expect(html).toContain('12 productos')
+  })
+
+  it('renders the featured badge only when a label is supplied', () => {
+    const without = renderToStaticMarkup(<ProductCategory categories={[categories[1]]} presentation='list' />)
+    const with_ = renderToStaticMarkup(
+      <ProductCategory categories={[categories[1]]} presentation='list' featuredLabel='Destacado' />,
+    )
+    expect(without).not.toContain('Destacado')
+    expect(with_).toContain('Destacado')
+  })
+
+  it('reflects the controlled query in the search input', () => {
+    const html = renderToStaticMarkup(
+      <ProductCategory categories={categories} presentation='list' query='cam' onQueryChange={() => {}} />,
+    )
+    expect(html).toContain('value="cam"')
+  })
+
+  it('shows the no-results copy for an empty searched list and the empty copy otherwise', () => {
+    const searched = renderToStaticMarkup(
+      <ProductCategory
+        categories={[]}
+        presentation='list'
+        query='zzz'
+        onQueryChange={() => {}}
+        noResultsLabel='Sin resultados'
+        emptyLabel='Sin categorías'
+      />,
+    )
+    const empty = renderToStaticMarkup(
+      <ProductCategory categories={[]} presentation='list' emptyLabel='Sin categorías' noResultsLabel='Sin resultados' />,
+    )
+    expect(searched).toContain('Sin resultados')
+    expect(empty).toContain('Sin categorías')
+  })
+})
+
+describe('ProductCategory — reusable across sectors without demo content', () => {
+  it('renders distinct sector datasets through the same component and contract', () => {
+    const fashion: ProductCategoryItem[] = [
+      { id: 'pcat_fashion_shirts', name: 'Camisas', icon: 'shirt' },
+    ]
+    const electronics: ProductCategoryItem[] = [
+      { id: 'pcat_electronics_laptops', name: 'Portátiles', icon: 'laptop' },
+    ]
+    const fashionHtml = renderToStaticMarkup(<ProductCategory categories={fashion} presentation='icons' />)
+    const electronicsHtml = renderToStaticMarkup(<ProductCategory categories={electronics} presentation='icons' />)
+    // Same component and contract; only the supplied data differs (no branch on sector).
+    expect(fashionHtml).toContain('Camisas')
+    expect(electronicsHtml).toContain('Portátiles')
+    expect(fashionHtml).not.toContain('Portátiles')
+  })
+})