@thorprovider/blocks 1.0.0 → 3.0.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')
-  })
-})

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

@@ -1,271 +0,0 @@
-'use client'
-
-import { ChevronRight } from 'lucide-react'
-import { useState } from 'react'
-import { z } from 'zod'
-
-import {
-  collectionItemSchema,
-  menuItemSchema,
-  type MenuItem,
-} from '../../../lib/types/menu'
-import { cn } from '../../../lib/utils'
-import { CategoryIcon, categoryIconNameSchema } from './category-icon'
-
-/**
- * Three-level category flyout: L1 categories, L2 subcategories, L3 sub-sub
- * categories, plus a right panel with a featured image and collection links.
- *
- * Framework-agnostic and prop-driven: plain anchors replace router links,
- * `loading="lazy"` images replace next/image, and Spanish copy/hrefs are
- * optional props with ES defaults. `onNavigate` lets the tenant close the
- * flyout on navigation; `collectionsHref` controls the "view all" link
- * (pass `''` to hide it).
- *
- * Ported from the legacy `@thorprovider/components` navigation library
- * (source: branch `feat/storefronts`).
- */
-
-export const megaMenuPropsSchema = z.object({
-  categories: z.array(menuItemSchema),
-  collections: z.array(collectionItemSchema),
-  onNavigate: z.custom<() => void>().optional(),
-  categoryColumnTitle: z.string().optional(),
-  collectionsTitle: z.string().optional(),
-  viewAllLabel: z.string().optional(),
-  collectionsHref: z.string().optional(),
-  ariaLabel: z.string().optional(),
-})
-
-export type MegaMenuProps = z.infer<typeof megaMenuPropsSchema>
-
-function MegaMenuColumn({
-  title,
-  items,
-  activeId,
-  onHover,
-  onNavigate,
-  level,
-  scrollable = false,
-}: {
-  title?: string
-  items: MenuItem[]
-  activeId?: string
-  onHover?: (item: MenuItem) => void
-  onNavigate?: () => void
-  level: 1 | 2 | 3
-  scrollable?: boolean
-}) {
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      {title ? (
-        <p className="shrink-0 px-3 pb-1 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-          {title}
-        </p>
-      ) : null}
-      <ul
-        className={cn('flex-1 py-1', scrollable ? 'overflow-y-auto' : '')}
-        role="list"
-      >
-        {items.map((item) => {
-          const isActive = item.id === activeId
-          const hasChildren = Boolean(item.children && item.children.length > 0)
-          const parsedIcon = categoryIconNameSchema.safeParse(item.icon)
-          const iconName = parsedIcon.success ? parsedIcon.data : undefined
-          return (
-            <li key={item.id}>
-              <a
-                href={item.href ?? '#'}
-                className={cn(
-                  'group/item flex items-center gap-2.5 px-3 py-2 text-sm transition-colors',
-                  isActive
-                    ? 'bg-secondary font-semibold text-primary'
-                    : 'text-foreground hover:bg-secondary/60',
-                )}
-                onMouseEnter={() => onHover?.(item)}
-                onClick={() => {
-                  onHover?.(item)
-                  onNavigate?.()
-                }}
-                aria-current={isActive ? 'true' : undefined}
-              >
-                {level === 1 ? (
-                  item.image ? (
-                    <img
-                      src={item.image || undefined}
-                      alt=""
-                      loading="lazy"
-                      className="size-7 shrink-0 rounded object-cover"
-                    />
-                  ) : (
-                    <CategoryIcon
-                      name={iconName}
-                      className="size-4 shrink-0 text-muted-foreground group-hover/item:text-primary"
-                    />
-                  )
-                ) : null}
-                {level === 2 && item.image ? (
-                  <img
-                    src={item.image || undefined}
-                    alt=""
-                    loading="lazy"
-                    className="size-6 shrink-0 rounded object-cover"
-                  />
-                ) : null}
-                <span className="flex-1 leading-tight">{item.label}</span>
-                {item.badge ? (
-                  <span className="rounded bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground">
-                    {item.badge}
-                  </span>
-                ) : null}
-                {hasChildren ? (
-                  <ChevronRight
-                    className={cn(
-                      'size-3.5 shrink-0 transition-transform',
-                      isActive ? 'text-primary' : 'text-muted-foreground',
-                    )}
-                  />
-                ) : null}
-              </a>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}
-
-export function MegaMenu({
-  categories,
-  collections,
-  onNavigate,
-  categoryColumnTitle = 'Comprar por categorías',
-  collectionsTitle = 'Colecciones',
-  viewAllLabel = 'Ver todas las colecciones',
-  collectionsHref = '/colecciones',
-  ariaLabel = 'Menú de categorías',
-}: MegaMenuProps) {
-  const [activeL1, setActiveL1] = useState<MenuItem>(categories[0])
-  const [activeL2, setActiveL2] = useState<MenuItem | undefined>(
-    categories[0]?.children?.[0],
-  )
-
-  const handleL1Hover = (item: MenuItem) => {
-    setActiveL1(item)
-    setActiveL2(item.children?.[0])
-  }
-
-  const l2Items = activeL1?.children ?? []
-  const l3Items = activeL2?.children ?? []
-
-  const featuredImage = activeL2?.image ?? activeL1?.image
-
-  return (
-    <div
-      className="flex h-[520px] overflow-hidden rounded-b-lg border border-t-0 bg-card shadow-xl"
-      role="dialog"
-      aria-label={ariaLabel}
-    >
-      <div className="flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r">
-        <MegaMenuColumn
-          title={categoryColumnTitle}
-          items={categories}
-          activeId={activeL1?.id}
-          onHover={handleL1Hover}
-          onNavigate={onNavigate}
-          level={1}
-          scrollable
-        />
-      </div>
-
-      {l2Items.length > 0 ? (
-        <div className="flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r">
-          <MegaMenuColumn
-            title={activeL1?.label}
-            items={l2Items}
-            activeId={activeL2?.id}
-            onHover={(item) => setActiveL2(item)}
-            onNavigate={onNavigate}
-            level={2}
-            scrollable
-          />
-        </div>
-      ) : null}
-
-      {l3Items.length > 0 ? (
-        <div className="flex w-52 min-w-0 shrink-0 flex-col overflow-hidden border-r">
-          <MegaMenuColumn
-            title={activeL2?.label}
-            items={l3Items}
-            onNavigate={onNavigate}
-            level={3}
-            scrollable
-          />
-        </div>
-      ) : null}
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        {featuredImage ? (
-          <a
-            href={activeL2?.href ?? activeL1?.href ?? '#'}
-            onClick={onNavigate}
-            className="group relative block h-44 shrink-0 overflow-hidden"
-          >
-            <img
-              src={featuredImage || undefined}
-              alt={activeL2?.label ?? activeL1?.label ?? ''}
-              loading="lazy"
-              className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
-            <p className="absolute bottom-2 left-3 right-3 text-xs font-bold leading-tight text-white">
-              {activeL2?.label ?? activeL1?.label}
-            </p>
-          </a>
-        ) : null}
-
-        <div className="flex flex-1 flex-col overflow-y-auto">
-          <p className="shrink-0 px-3 pb-2 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-            {collectionsTitle}
-          </p>
-          <div className="flex flex-col gap-1 px-3 pb-3">
-            {collections.map((col) => (
-              <a
-                key={col.id}
-                href={col.href}
-                className="group flex items-center gap-3 rounded-md p-1.5 transition-colors hover:bg-secondary/60"
-              >
-                <img
-                  src={col.image || undefined}
-                  alt=""
-                  loading="lazy"
-                  className="size-12 shrink-0 rounded-md object-cover transition-transform duration-300 group-hover:scale-105"
-                />
-                <div className="min-w-0">
-                  <p className="truncate text-xs font-semibold leading-tight text-foreground">
-                    {col.label}
-                  </p>
-                  {col.description ? (
-                    <p className="truncate text-[11px] text-muted-foreground">
-                      {col.description}
-                    </p>
-                  ) : null}
-                </div>
-              </a>
-            ))}
-          </div>
-        </div>
-        {collectionsHref ? (
-          <div className="border-t p-3">
-            <a
-              href={collectionsHref}
-              className="block rounded-md bg-secondary px-3 py-2.5 text-center text-xs font-bold text-foreground hover:bg-secondary/70"
-            >
-              {viewAllLabel}
-            </a>
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}