@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/e-commerce/navigation/breadcrumb.test.tsx

@@ -1,174 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import { Breadcrumb, breadcrumbItemSchema, breadcrumbPropsSchema } from './breadcrumb'
-
-function countNestedListItems(html: string): number {
-  const tokens = html.match(/<\/?li\b[^>]*>/g) ?? []
-  let depth = 0
-  let nested = 0
-  for (const token of tokens) {
-    if (token.startsWith('</')) {
-      depth = Math.max(0, depth - 1)
-    } else {
-      if (depth > 0) nested += 1
-      depth += 1
-    }
-  }
-  return nested
-}
-
-describe('Breadcrumb', () => {
-  it('parses a valid props object', () => {
-    const result = breadcrumbPropsSchema.parse({
-      items: [{ label: 'Home', href: '/' }, { label: 'Current' }],
-    })
-    expect(result.items).toHaveLength(2)
-  })
-
-  it('rejects a maxItems below 2', () => {
-    expect(() =>
-      breadcrumbPropsSchema.parse({ items: [], maxItems: 1 }),
-    ).toThrow()
-  })
-
-  it('requires a label on each item', () => {
-    expect(() => breadcrumbItemSchema.parse({ href: '/' })).toThrow()
-  })
-
-  it('renders nothing when there are no items', () => {
-    expect(renderToStaticMarkup(<Breadcrumb items={[]} />)).toBe('')
-  })
-
-  it('renders nothing when every label is blank', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb items={[{ label: '  ' }, { label: '' }]} />,
-    )
-    expect(html).toBe('')
-  })
-
-  it('renders a labelled landmark with the current item as a non-link', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Tools', href: '/categories/tools' },
-          { label: 'Drill' },
-        ]}
-      />,
-    )
-    expect(html).toContain('aria-label="Breadcrumb"')
-    expect(html).toContain('aria-current="page"')
-    expect(html).toContain('href="/categories/tools"')
-    expect(html).not.toContain('href="Drill"')
-    expect(html).toContain('Drill')
-  })
-
-  it('honours a custom landmark label', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        ariaLabel="You are here"
-        items={[{ label: 'Home', href: '/' }, { label: 'Current' }]}
-      />,
-    )
-    expect(html).toContain('aria-label="You are here"')
-  })
-
-  it('wraps the trail in the shared page container', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Current' }]} />,
-    )
-    expect(html).toContain('mx-auto')
-    expect(html).toContain('max-w-7xl')
-    expect(html).toContain('px-4')
-  })
-
-  it('merges a custom className onto the container', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        className="bg-primary text-primary-foreground"
-        items={[{ label: 'Home', href: '/' }, { label: 'Current' }]}
-      />,
-    )
-    expect(html).toContain('bg-primary')
-    expect(html).toContain('max-w-7xl')
-  })
-
-  it('lets a custom className override the container utility', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        className="px-0"
-        items={[{ label: 'Home', href: '/' }, { label: 'Current' }]}
-      />,
-    )
-    expect(html).toContain('px-0')
-    expect(html).not.toContain('px-4')
-  })
-
-  it('collapses intermediate levels behind an ellipsis past maxItems', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        maxItems={3}
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'A', href: '/a' },
-          { label: 'B', href: '/b' },
-          { label: 'C', href: '/c' },
-          { label: 'Current' },
-        ]}
-      />,
-    )
-    expect(html).toContain('data-slot="breadcrumb-ellipsis"')
-    expect(html).toContain('Current')
-    expect(html).not.toContain('>A<')
-  })
-
-  it('truncates long labels', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'A very long category name that would overflow the trail' },
-        ]}
-      />,
-    )
-    expect(html).toContain('max-w-[24ch]')
-    expect(html).toContain('truncate')
-  })
-
-  it('renders a mobile back link to the parent and hides the full list at base', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Tools', href: '/categories/tools' },
-          { label: 'Drill' },
-        ]}
-      />,
-    )
-    expect(html).toContain('md:hidden')
-    expect(html).toContain('href="/categories/tools"')
-    expect(html).toContain('hidden md:flex')
-  })
-
-  it('renders no back link for a single-level trail', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb items={[{ label: 'Only' }]} />,
-    )
-    expect(html).not.toContain('md:hidden')
-  })
-
-  it('renders separators as siblings of items, never nesting list items', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Tools', href: '/categories/tools' },
-          { label: 'Drill' },
-        ]}
-      />,
-    )
-    expect(html).toContain('data-slot="breadcrumb-separator"')
-    expect(countNestedListItems(html)).toBe(0)
-  })
-})

package/src/blocks/e-commerce/navigation/breadcrumb.tsx

@@ -1,130 +0,0 @@
-import { Fragment } from 'react'
-import { ChevronLeft } from 'lucide-react'
-import { z } from 'zod'
-
-import { cn } from '../../../lib/utils'
-import {
-  Breadcrumb as BreadcrumbRoot,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '../../../ui/breadcrumb'
-
-export const breadcrumbItemSchema = z.object({
-  label: z.string(),
-  href: z.string().optional(),
-})
-
-export type BreadcrumbItemData = z.infer<typeof breadcrumbItemSchema>
-
-export const breadcrumbPropsSchema = z.object({
-  items: z.array(breadcrumbItemSchema),
-  maxItems: z.number().int().min(2).optional(),
-  ariaLabel: z.string().optional(),
-  backLabel: z.string().optional(),
-  className: z.string().optional(),
-})
-
-export type BreadcrumbProps = z.infer<typeof breadcrumbPropsSchema>
-
-const DEFAULT_MAX_ITEMS = 4
-const ELLIPSIS = Symbol('breadcrumb-ellipsis')
-
-// Shared horizontal rhythm: the same max-width and responsive gutters the
-// sibling blocks (category listing, product overview) use, so the trail aligns
-// with the page content instead of sitting flush against the viewport edge.
-const CONTAINER = 'mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8'
-
-type DisplayEntry = BreadcrumbItemData | typeof ELLIPSIS
-
-function collapseItems(
-  items: BreadcrumbItemData[],
-  maxItems: number,
-): DisplayEntry[] {
-  if (items.length <= maxItems) return items
-  return [items[0], ELLIPSIS, ...items.slice(items.length - (maxItems - 1))]
-}
-
-/**
- * Breadcrumb trail for a real navigation path (Home → … → current).
- *
- * Framework-agnostic and prop-driven: plain anchors (no router) and the shared
- * shadcn breadcrumb primitives. The last item is the current page and is never
- * a link (`aria-current="page"`); earlier items link only when an `href` is
- * given. Long labels truncate, and trails longer than `maxItems` collapse the
- * intermediate levels behind an ellipsis. On mobile the full list is replaced
- * by a single back link to the parent, so a wide trail never overflows.
- *
- * Renders nothing when there are no labelled items.
- */
-export function Breadcrumb({
-  items,
-  maxItems = DEFAULT_MAX_ITEMS,
-  ariaLabel = 'Breadcrumb',
-  backLabel,
-  className,
-}: BreadcrumbProps) {
-  const clean = items.filter((item) => item.label.trim().length > 0)
-  if (clean.length === 0) return null
-
-  const parent = clean.length > 1 ? clean[clean.length - 2] : undefined
-  const entries = collapseItems(clean, maxItems)
-
-  return (
-    <BreadcrumbRoot aria-label={ariaLabel} className={cn(CONTAINER, className)}>
-      {parent ? (
-        <a
-          href={parent.href ?? '#'}
-          className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground md:hidden"
-        >
-          <ChevronLeft className="size-4" aria-hidden="true" />
-          <span className="truncate">{backLabel ?? parent.label}</span>
-        </a>
-      ) : null}
-      <BreadcrumbList className="hidden md:flex">
-        {entries.map((entry, index) => {
-          const isLast = index === entries.length - 1
-          const key =
-            entry === ELLIPSIS
-              ? 'ellipsis'
-              : `${index}:${entry.href ?? ''}:${entry.label}`
-          return (
-            <Fragment key={key}>
-              <BreadcrumbItem>
-                {entry === ELLIPSIS ? (
-                  <BreadcrumbEllipsis />
-                ) : isLast ? (
-                  <BreadcrumbPage
-                    className="max-w-[24ch] truncate"
-                    title={entry.label}
-                  >
-                    {entry.label}
-                  </BreadcrumbPage>
-                ) : entry.href ? (
-                  <BreadcrumbLink
-                    href={entry.href}
-                    className="max-w-[24ch] truncate"
-                    title={entry.label}
-                  >
-                    {entry.label}
-                  </BreadcrumbLink>
-                ) : (
-                  <span
-                    className="max-w-[24ch] truncate"
-                    title={entry.label}
-                  >
-                    {entry.label}
-                  </span>
-                )}
-              </BreadcrumbItem>
-              {!isLast ? <BreadcrumbSeparator /> : null}
-            </Fragment>
-          )
-        })}
-      </BreadcrumbList>
-    </BreadcrumbRoot>
-  )
-}

package/src/blocks/e-commerce/navigation/category-icon.test.tsx

@@ -1,54 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import {
-  CategoryIcon,
-  categoryIconNameSchema,
-  categoryIconPropsSchema,
-  type CategoryIconName,
-} from './category-icon'
-
-describe('CategoryIcon', () => {
-  it('parses a valid props object', () => {
-    const result = categoryIconPropsSchema.parse({ name: 'wrench' })
-    expect(result.name).toBe('wrench')
-  })
-
-  it('accepts every known icon name', () => {
-    const names = categoryIconNameSchema.options
-    expect(names).toHaveLength(18)
-    for (const name of names) {
-      expect(() => categoryIconPropsSchema.parse({ name })).not.toThrow()
-    }
-  })
-
-  it('rejects an unknown name at the schema boundary', () => {
-    expect(() => categoryIconNameSchema.parse('nope')).toThrow()
-  })
-
-  it('renders an svg with aria-hidden for a known name', () => {
-    const html = renderToStaticMarkup(<CategoryIcon name="wrench" />)
-    expect(html).toContain('<svg')
-    expect(html).toContain('aria-hidden="true"')
-  })
-
-  it('renders null for an unknown name', () => {
-    const html = renderToStaticMarkup(
-      <CategoryIcon name={'not-a-category' as CategoryIconName} />,
-    )
-    expect(html).toBe('')
-  })
-
-  it('renders null when no name is given', () => {
-    const html = renderToStaticMarkup(<CategoryIcon />)
-    expect(html).toBe('')
-  })
-
-  it('merges className', () => {
-    const html = renderToStaticMarkup(
-      <CategoryIcon name="home" className="size-8" />,
-    )
-    expect(html).toContain('size-8')
-    expect(html).not.toContain('size-4')
-  })
-})

package/src/blocks/e-commerce/navigation/category-icon.tsx

@@ -1,94 +0,0 @@
-import {
-  Bolt,
-  Boxes,
-  Car,
-  ChefHat,
-  Droplet,
-  HardHat,
-  Home,
-  Refrigerator,
-  Shield,
-  Sofa,
-  Store,
-  Sun,
-  Tractor,
-  Trees,
-  Utensils,
-  Wind,
-  Wrench,
-  Zap,
-  type LucideIcon,
-} from 'lucide-react'
-import { z } from 'zod'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * The explicit vocabulary of known category icon names. Kept as a Zod enum so
- * the union type derives from the schema and never drifts.
- */
-export const categoryIconNameSchema = z.enum([
-  'wrench',
-  'bolt',
-  'tree',
-  'refrigerator',
-  'wind',
-  'droplet',
-  'zap',
-  'hard-hat',
-  'car',
-  'utensils',
-  'boxes',
-  'sofa',
-  'shield',
-  'sun',
-  'chef-hat',
-  'tractor',
-  'store',
-  'home',
-])
-
-export type CategoryIconName = z.infer<typeof categoryIconNameSchema>
-
-export const categoryIconPropsSchema = z.object({
-  name: categoryIconNameSchema.optional(),
-  className: z.string().optional(),
-})
-
-export type CategoryIconProps = z.infer<typeof categoryIconPropsSchema>
-
-const iconMap: Record<CategoryIconName, LucideIcon> = {
-  wrench: Wrench,
-  bolt: Bolt,
-  tree: Trees,
-  refrigerator: Refrigerator,
-  wind: Wind,
-  droplet: Droplet,
-  zap: Zap,
-  'hard-hat': HardHat,
-  car: Car,
-  utensils: Utensils,
-  boxes: Boxes,
-  sofa: Sofa,
-  shield: Shield,
-  sun: Sun,
-  'chef-hat': ChefHat,
-  tractor: Tractor,
-  store: Store,
-  home: Home,
-}
-
-/**
- * Category icon by name: maps a string icon-name to a Lucide icon.
- *
- * Framework-agnostic and prop-driven. Unknown or absent names render null
- * (graceful fallback); the schema validates names at the boundary, so a
- * non-vocabulary value fails `parse` but the component still renders null
- * instead of throwing.
- */
-export function CategoryIcon({ name, className }: CategoryIconProps) {
-  if (!name) return null
-  const Icon = iconMap[name]
-  if (!Icon) return null
-  return <Icon className={cn('size-4', className)} aria-hidden="true" />
-}

package/src/blocks/e-commerce/navigation/mega-menu.test.tsx

@@ -1,139 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import type { CollectionItem, MenuItem } from '../../../lib/types/menu'
-import { MegaMenu, megaMenuPropsSchema } from './mega-menu'
-
-const categories: MenuItem[] = [
-  {
-    id: 'hogar',
-    label: 'Hogar',
-    icon: 'home',
-    href: '/hogar',
-    children: [
-      {
-        id: 'hogar-decoracion',
-        label: 'Decoración',
-        href: '/hogar/decoracion',
-        children: [
-          {
-            id: 'hogar-decoracion-cortinas',
-            label: 'Cortinas',
-            href: '/hogar/decoracion/cortinas',
-          },
-        ],
-      },
-    ],
-  },
-  { id: 'cocina', label: 'Cocina', icon: 'utensils', href: '/cocina' },
-]
-
-const collections: CollectionItem[] = [
-  {
-    id: 'ofertas',
-    label: 'Ofertas',
-    description: 'Precios bajos',
-    image: '/img/ofertas.jpg',
-    href: '/colecciones/ofertas',
-  },
-]
-
-describe('MegaMenu', () => {
-  it('parses a valid props object', () => {
-    const result = megaMenuPropsSchema.parse({ categories, collections })
-    expect(result.categories).toHaveLength(2)
-    expect(result.collections).toHaveLength(1)
-  })
-
-  it('rejects missing categories', () => {
-    expect(() => megaMenuPropsSchema.parse({ collections })).toThrow()
-  })
-
-  it('rejects missing collections', () => {
-    expect(() => megaMenuPropsSchema.parse({ categories })).toThrow()
-  })
-
-  it('renders category columns from the categories prop', () => {
-    const html = renderToStaticMarkup(
-      <MegaMenu categories={categories} collections={collections} />,
-    )
-    expect(html).toContain('Comprar por categorías')
-    expect(html).toContain('Hogar')
-    expect(html).toContain('href="/hogar"')
-    expect(html).toContain('Decoración')
-    expect(html).toContain('href="/hogar/decoracion"')
-    expect(html).toContain('Cortinas')
-    expect(html).toContain('href="/hogar/decoracion/cortinas"')
-  })
-
-  it('renders the collections grid', () => {
-    const html = renderToStaticMarkup(
-      <MegaMenu categories={categories} collections={collections} />,
-    )
-    expect(html).toContain('Colecciones')
-    expect(html).toContain('Ofertas')
-    expect(html).toContain('Precios bajos')
-    expect(html).toContain('href="/colecciones/ofertas"')
-  })
-
-  it('uses CategoryIcon for icon items', () => {
-    const html = renderToStaticMarkup(
-      <MegaMenu categories={categories} collections={collections} />,
-    )
-    expect(html).toContain('<svg')
-    expect(html).toContain('aria-hidden="true"')
-  })
-
-  it('renders the view-all link only when collectionsHref is set', () => {
-    const withHref = renderToStaticMarkup(
-      <MegaMenu
-        categories={categories}
-        collections={collections}
-        collectionsHref="/tienda/colecciones"
-        viewAllLabel="Ver todas"
-      />,
-    )
-    expect(withHref).toContain('href="/tienda/colecciones"')
-    expect(withHref).toContain('Ver todas')
-
-    const withoutHref = renderToStaticMarkup(
-      <MegaMenu
-        categories={categories}
-        collections={collections}
-        collectionsHref=""
-      />,
-    )
-    expect(withoutHref).not.toContain('Ver todas')
-  })
-
-  it('uses ES defaults for copy, hrefs and aria-label', () => {
-    const html = renderToStaticMarkup(
-      <MegaMenu categories={categories} collections={collections} />,
-    )
-    expect(html).toContain('Comprar por categorías')
-    expect(html).toContain('Colecciones')
-    expect(html).toContain('Ver todas las colecciones')
-    expect(html).toContain('href="/colecciones"')
-    expect(html).toContain('aria-label="Menú de categorías"')
-  })
-
-  it('applies copy overrides', () => {
-    const html = renderToStaticMarkup(
-      <MegaMenu
-        categories={categories}
-        collections={collections}
-        categoryColumnTitle="Shop by category"
-        collectionsTitle="Collections"
-        viewAllLabel="View all collections"
-        collectionsHref="/collections"
-        ariaLabel="Category menu"
-      />,
-    )
-    expect(html).toContain('Shop by category')
-    expect(html).toContain('Collections')
-    expect(html).toContain('View all collections')
-    expect(html).toContain('href="/collections"')
-    expect(html).toContain('aria-label="Category menu"')
-    expect(html).not.toContain('Comprar por categorías')
-  })
-})