@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/e-commerce/navigation/mobile-bottom-nav.test.tsx

@@ -1,74 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import {
-  MobileBottomNav,
-  mobileBottomNavItemSchema,
-  mobileBottomNavPropsSchema,
-} from './mobile-bottom-nav'
-
-describe('MobileBottomNav', () => {
-  it('parses a valid props object', () => {
-    const result = mobileBottomNavPropsSchema.parse({
-      items: [{ label: 'Home', href: '/', icon: 'home' }],
-    })
-    expect(result.items).toHaveLength(1)
-  })
-
-  it('requires a label and href on each item', () => {
-    expect(() => mobileBottomNavItemSchema.parse({ label: 'Home' })).toThrow()
-  })
-
-  it('rejects an unknown icon name at the boundary', () => {
-    expect(() =>
-      mobileBottomNavItemSchema.parse({
-        label: 'Home',
-        href: '/',
-        icon: 'not-an-icon',
-      }),
-    ).toThrow()
-  })
-
-  it('renders nothing when there are no destinations', () => {
-    expect(renderToStaticMarkup(<MobileBottomNav items={[]} />)).toBe('')
-  })
-
-  it('renders a labelled, mobile-only landmark offset by the safe area', () => {
-    const html = renderToStaticMarkup(
-      <MobileBottomNav
-        items={[
-          { label: 'Home', href: '/', icon: 'home' },
-          { label: 'Store', href: '/categories/all', icon: 'store' },
-        ]}
-      />,
-    )
-    expect(html).toContain('aria-label="Primary"')
-    expect(html).toContain('md:hidden')
-    expect(html).toContain('env(safe-area-inset-bottom)')
-    expect(html).toContain('h-14')
-  })
-
-  it('marks the current destination accessibly and with a non-colour cue', () => {
-    const html = renderToStaticMarkup(
-      <MobileBottomNav
-        currentHref="/categories/all"
-        items={[
-          { label: 'Home', href: '/', icon: 'home' },
-          { label: 'Store', href: '/categories/all', icon: 'store' },
-        ]}
-      />,
-    )
-    expect(html).toContain('aria-current="page"')
-    expect(html).toContain('font-semibold')
-  })
-
-  it('marks no destination when the current href matches none', () => {
-    const html = renderToStaticMarkup(
-      <MobileBottomNav
-        currentHref="/unknown"
-        items={[{ label: 'Home', href: '/', icon: 'home' }]}
-      />,
-    )
-    expect(html).not.toContain('aria-current')
-  })
-})

package/src/blocks/e-commerce/navigation/mobile-bottom-nav.tsx

@@ -1,78 +0,0 @@
-import { z } from 'zod'
-
-import { cn } from '../../../lib/utils'
-import { type CategoryIconName, CategoryIcon, categoryIconNameSchema } from './category-icon'
-
-export const mobileBottomNavItemSchema = z.object({
-  id: z.string().optional(),
-  label: z.string(),
-  href: z.string(),
-  icon: categoryIconNameSchema.optional(),
-})
-
-export type MobileBottomNavItem = z.infer<typeof mobileBottomNavItemSchema>
-
-export const mobileBottomNavPropsSchema = z.object({
-  items: z.array(mobileBottomNavItemSchema),
-  currentHref: z.string().optional(),
-  ariaLabel: z.string().optional(),
-  className: z.string().optional(),
-})
-
-export type MobileBottomNavProps = z.infer<typeof mobileBottomNavPropsSchema>
-
-/**
- * Mobile-only bottom navigation offering the primary destinations.
- *
- * Framework-agnostic and prop-driven: plain anchors (no router). Hidden at
- * `md` and up; offsets the iOS home indicator via `env(safe-area-inset-bottom)`;
- * each destination meets the 44px minimum touch target. The current
- * destination is marked with `aria-current="page"` and a non-colour cue (weight
- * + indicator bar), never colour alone.
- */
-export function MobileBottomNav({
-  items,
-  currentHref,
-  ariaLabel = 'Primary',
-  className,
-}: MobileBottomNavProps) {
-  if (items.length === 0) return null
-
-  return (
-    <nav
-      aria-label={ariaLabel}
-      className={cn(
-        'fixed inset-x-0 bottom-0 z-40 border-t bg-card text-foreground md:hidden',
-        className,
-      )}
-      style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
-    >
-      <ul className="flex">
-        {items.map((item) => {
-          const active = currentHref !== undefined && item.href === currentHref
-          return (
-            <li key={item.id ?? item.href} className="relative flex-1">
-              {active ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute inset-x-0 top-0 mx-auto h-0.5 w-8 rounded-full bg-primary"
-                />
-              ) : null}
-              <a
-                href={item.href}
-                aria-current={active ? 'page' : undefined}
-                className={cn(
-                  'flex h-14 flex-col items-center justify-center gap-0.5 text-xs text-muted-foreground',
-                  active && 'font-semibold text-primary',
-                )}
-              >
-                <CategoryIcon name={item.icon} className="size-5" />
-                <span className="truncate">{item.label}</span>
-              </a>
-            </li>
-          )
-        })}
-      </ul>
-    </nav>
-  )
-}

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

@@ -1,192 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import type { CollectionItem, MenuItem } from '../../../lib/types/menu'
-import {
-  MobileCategoryDrawer,
-  mobileCategoryDrawerPropsSchema,
-} from './mobile-category-drawer'
-
-const categories: MenuItem[] = [
-  {
-    id: 'cat-1',
-    label: 'Electrodomésticos',
-    icon: 'refrigerator',
-    children: [
-      { id: 'sub-1', label: 'Neveras', href: '/neveras' },
-      { id: 'sub-2', label: 'Lavadoras', href: '/lavadoras' },
-    ],
-  },
-  { id: 'cat-2', label: 'Herramientas', icon: 'wrench', href: '/herramientas' },
-]
-
-const collections: CollectionItem[] = [
-  {
-    id: 'col-1',
-    label: 'Ofertas',
-    image: '/ofertas.jpg',
-    href: '/colecciones/ofertas',
-  },
-  {
-    id: 'col-2',
-    label: 'Novedades',
-    image: '/novedades.jpg',
-    href: '/colecciones/novedades',
-  },
-]
-
-describe('MobileCategoryDrawer', () => {
-  it('keeps the drawer mounted off-screen with aria-hidden when closed', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open={false}
-        onClose={() => {}}
-      />,
-    )
-    // Drawer stays mounted so it can slide in; hidden + translated off-screen.
-    expect(html).toContain('role="dialog"')
-    expect(html).toContain('aria-hidden="true"')
-    expect(html).toContain('-translate-x-full')
-    // No backdrop when closed.
-    expect(html).not.toContain('backdrop-blur-sm')
-  })
-
-  it('renders the category drill-down when open=true', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-      />,
-    )
-    expect(html).toContain('role="dialog"')
-    expect(html).toContain('aria-modal="true"')
-    expect(html).toContain('aria-label="Menú de categorías"')
-    expect(html).toContain('translate-x-0')
-    expect(html).toContain('Electrodomésticos')
-    expect(html).toContain('Herramientas')
-    expect(html).toContain('role="list"')
-    expect(html).toContain('href="/herramientas"')
-    // Category with children renders as a push button (drill-down affordance)
-    expect(html).toContain('<button')
-  })
-
-  it('renders close control with aria-label and no back control at root level', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-      />,
-    )
-    expect(html).toContain('aria-label="Cerrar menú"')
-    // Back control only appears after drilling in (stack.length > 1), which
-    // requires interaction not reachable via renderToStaticMarkup.
-    expect(html).not.toContain('aria-label="Volver"')
-  })
-
-  it('renders the collections grid', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-      />,
-    )
-    expect(html).toContain('Colecciones')
-    expect(html).toContain('Ofertas')
-    expect(html).toContain('Novedades')
-    expect(html).toContain('href="/colecciones/ofertas"')
-    expect(html).toContain('grid grid-cols-2')
-  })
-
-  it('applies copy overrides', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-        rootTitle="Mis Categorías"
-        collectionsTitle="Mis Colecciones"
-        viewAllLabel="Explorar todo"
-        viewAllHref="/tienda/todas"
-        closeAriaLabel="Cerrar"
-        menuAriaLabel="Navegación"
-      />,
-    )
-    expect(html).toContain('Mis Categorías')
-    expect(html).toContain('Mis Colecciones')
-    expect(html).toContain('Explorar todo')
-    expect(html).toContain('href="/tienda/todas"')
-    expect(html).toContain('aria-label="Cerrar"')
-    expect(html).toContain('aria-label="Navegación"')
-  })
-
-  it('parses a valid props object', () => {
-    const result = mobileCategoryDrawerPropsSchema.parse({
-      categories,
-      collections,
-      open: true,
-      onClose: () => {},
-    })
-    expect(result.categories).toHaveLength(2)
-  })
-
-  it('rejects props missing categories at the schema boundary', () => {
-    expect(() =>
-      mobileCategoryDrawerPropsSchema.parse({
-        collections,
-        open: true,
-        onClose: () => {},
-      }),
-    ).toThrow()
-  })
-})
-
-describe('MobileCategoryDrawer — view-all link requires a served href', () => {
-  const base = { categories, collections, open: true, onClose: () => {} }
-
-  it('omits the link and never emits an empty href when viewAllHref is omitted', () => {
-    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} />)
-    expect(html).not.toContain('Ver todas')
-    expect(html).not.toContain('href=""')
-  })
-
-  it('omits the link when viewAllHref is an empty string', () => {
-    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} viewAllHref="" />)
-    expect(html).not.toContain('Ver todas')
-    expect(html).not.toContain('href=""')
-  })
-
-  it('omits the link when viewAllHref is whitespace only', () => {
-    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} viewAllHref="   " />)
-    expect(html).not.toContain('Ver todas')
-    expect(html).not.toContain('href=""')
-  })
-
-  it('renders the link when a served path is supplied', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer {...base} viewAllHref="/tienda/todas" />,
-    )
-    expect(html).toContain('href="/tienda/todas"')
-    expect(html).toContain('Ver todas')
-  })
-
-  it('renders a custom label with the served path', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        {...base}
-        viewAllHref="/tienda/todas"
-        viewAllLabel="Explorar todo"
-      />,
-    )
-    expect(html).toContain('href="/tienda/todas"')
-    expect(html).toContain('Explorar todo')
-  })
-})

package/src/blocks/e-commerce/navigation/mobile-category-drawer.tsx

@@ -1,278 +0,0 @@
-'use client'
-
-import { ChevronLeft, ChevronRight, X } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { z } from 'zod'
-
-import {
-  collectionItemSchema,
-  menuItemSchema,
-  type CollectionItem,
-  type MenuItem,
-} from '../../../lib/types/menu'
-import { cn } from '../../../lib/utils'
-import { type CategoryIconName, CategoryIcon } from './category-icon'
-
-type Level = {
-  items: MenuItem[]
-  title: string
-  image?: string
-  href?: string
-}
-
-/**
- * Slide-in drill-down category drawer: a stack-based menu where selecting a
- * category with children pushes a new level, and a back control pops it.
- *
- * Framework-agnostic: plain anchors (no router), `<img>` (no image
- * optimization), copy + hrefs as optional props with ES defaults. The drawer
- * stays MOUNTED while closed and slides in/out with a 200ms transform
- * (reproducing the original behavior); the backdrop renders only while open.
- * Locks body scroll while open. No focus trap (out of scope).
- *
- * Ported from the legacy `@thorprovider/components` navigation library
- * (source: branch `feat/storefronts`).
- */
-export const mobileCategoryDrawerPropsSchema = z.object({
-  categories: z.array(menuItemSchema),
-  collections: z.array(collectionItemSchema),
-  open: z.boolean(),
-  onClose: z.function().returns(z.void()),
-  rootTitle: z.string().optional(),
-  collectionsTitle: z.string().optional(),
-  viewAllLabel: z.string().optional(),
-  viewAllHref: z.string().optional(),
-  closeAriaLabel: z.string().optional(),
-  backAriaLabel: z.string().optional(),
-  menuAriaLabel: z.string().optional(),
-})
-
-export type MobileCategoryDrawerProps = z.infer<
-  typeof mobileCategoryDrawerPropsSchema
->
-
-export function MobileCategoryDrawer({
-  categories,
-  collections,
-  open,
-  onClose,
-  rootTitle = 'Categorías',
-  collectionsTitle = 'Colecciones',
-  viewAllLabel = 'Ver todas',
-  viewAllHref,
-  closeAriaLabel = 'Cerrar menú',
-  backAriaLabel = 'Volver',
-  menuAriaLabel = 'Menú de categorías',
-}: MobileCategoryDrawerProps) {
-  const root: Level = { items: categories, title: rootTitle }
-  const [stack, setStack] = useState<Level[]>([root])
-  const current = stack[stack.length - 1]
-
-  useEffect(() => {
-    if (!open) return
-    const previous = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-    return () => {
-      document.body.style.overflow = previous
-    }
-  }, [open])
-
-  const push = (item: MenuItem) => {
-    if (item.children?.length) {
-      setStack((levels) => [
-        ...levels,
-        {
-          items: item.children!,
-          title: item.label,
-          image: item.image ?? current.image,
-          href: item.href,
-        },
-      ])
-    }
-  }
-
-  const handleClose = () => {
-    setStack([root])
-    onClose()
-  }
-
-  return (
-    <>
-      {open ? (
-        <button
-          type="button"
-          className="fixed inset-0 z-40 bg-foreground/50 backdrop-blur-sm"
-          aria-label={closeAriaLabel}
-          onClick={handleClose}
-        />
-      ) : null}
-      <div
-        role="dialog"
-        aria-label={menuAriaLabel}
-        aria-modal="true"
-        aria-hidden={!open}
-        className={cn(
-          'fixed inset-y-0 left-0 z-50 flex w-full max-w-sm flex-col overflow-hidden bg-card text-foreground shadow-2xl transition-transform duration-200',
-          open ? 'translate-x-0' : '-translate-x-full',
-        )}
-      >
-        <div className="flex min-h-14 shrink-0 items-center gap-2 border-b bg-primary px-3 text-primary-foreground">
-          {stack.length > 1 && (
-            <button
-              onClick={() => setStack((levels) => levels.slice(0, -1))}
-              aria-label={backAriaLabel}
-              className="rounded-md p-2 hover:bg-primary-foreground/10"
-            >
-              <ChevronLeft className="size-5" />
-            </button>
-          )}
-          <span className="flex-1 truncate text-sm font-bold">
-            {current.title}
-          </span>
-          <button
-            onClick={handleClose}
-            aria-label={closeAriaLabel}
-            className="rounded-md p-2 hover:bg-primary-foreground/10"
-          >
-            <X className="size-5" />
-          </button>
-        </div>
-
-        {current.image && (
-          <div className="relative h-28 shrink-0">
-            <img
-              src={current.image || undefined}
-              alt=""
-              loading="lazy"
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 bg-foreground/35" />
-            <p className="absolute inset-x-4 bottom-3 text-base font-black text-primary-foreground">
-              {current.title}
-            </p>
-          </div>
-        )}
-
-        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-          {current.href && (
-            <a
-              href={current.href}
-              onClick={handleClose}
-              className="mx-4 mt-3 flex h-11 items-center justify-between rounded-md bg-primary px-4 text-sm font-bold text-primary-foreground"
-            >
-              Ver todos en {current.title}
-              <ChevronRight className="size-4" aria-hidden="true" />
-            </a>
-          )}
-          <ul className="py-2" role="list">
-            {current.items.map((item) => {
-              const hasChildren = Boolean(item.children?.length)
-              const image = item.image ?? current.image
-              const content = (
-                <>
-                  {image ? (
-                    <span className="relative size-12 shrink-0 overflow-hidden rounded-md">
-                      <img
-                        src={image || undefined}
-                        alt=""
-                        loading="lazy"
-                        className="absolute inset-0 h-full w-full object-cover"
-                      />
-                    </span>
-                  ) : (
-                    <span className="flex size-12 shrink-0 items-center justify-center rounded-md bg-secondary">
-                      <CategoryIcon
-                        name={item.icon as CategoryIconName}
-                        className="size-5 text-muted-foreground"
-                      />
-                    </span>
-                  )}
-                  <span className="min-w-0 flex-1 text-pretty font-semibold leading-snug">
-                    {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>
-                  )}
-                  {hasChildren && (
-                    <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
-                  )}
-                </>
-              )
-              return (
-                <li key={`${item.id}:${item.label}`}>
-                  {hasChildren ? (
-                    <button
-                      onClick={() => push(item)}
-                      className="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-secondary"
-                    >
-                      {content}
-                    </button>
-                  ) : (
-                    <a
-                      href={item.href ?? '#'}
-                      onClick={handleClose}
-                      className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-secondary"
-                    >
-                      {content}
-                    </a>
-                  )}
-                </li>
-              )
-            })}
-          </ul>
-
-          {stack.length === 1 && (
-            <section
-              className="border-t px-4 py-4"
-              aria-labelledby="mobile-collections-title"
-            >
-              <div className="mb-3 flex items-center justify-between gap-3">
-                <h2
-                  id="mobile-collections-title"
-                  className="text-xs font-black uppercase tracking-wider text-muted-foreground"
-                >
-                  {collectionsTitle}
-                </h2>
-                {viewAllHref && viewAllHref.trim() ? (
-                  <a
-                    href={viewAllHref}
-                    onClick={handleClose}
-                    className="text-xs font-bold text-primary"
-                  >
-                    {viewAllLabel}
-                  </a>
-                ) : null}
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                {collections.map((collection) => (
-                  <a
-                    key={`${collection.id}:${collection.label}`}
-                    href={collection.href}
-                    onClick={handleClose}
-                    className="group overflow-hidden rounded-lg border bg-background"
-                  >
-                    <div className="relative aspect-square">
-                      <img
-                        src={collection.image || undefined}
-                        alt=""
-                        loading="lazy"
-                        className="absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105"
-                      />
-                    </div>
-                    <div className="p-2">
-                      <p className="text-pretty text-xs font-bold leading-snug">
-                        {collection.label}
-                      </p>
-                    </div>
-                  </a>
-                ))}
-              </div>
-            </section>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}

package/src/blocks/e-commerce/navigation/skip-to-content.test.tsx

@@ -1,35 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import { SkipToContent, skipToContentPropsSchema } from './skip-to-content'
-
-describe('SkipToContent', () => {
-  it('parses a valid props object', () => {
-    const result = skipToContentPropsSchema.parse({ targetId: 'main' })
-    expect(result.targetId).toBe('main')
-  })
-
-  it('requires a targetId', () => {
-    expect(() => skipToContentPropsSchema.parse({})).toThrow()
-  })
-
-  it('renders a hidden anchor targeting the content id', () => {
-    const html = renderToStaticMarkup(<SkipToContent targetId="main" />)
-    expect(html).toContain('href="#main"')
-    expect(html).toContain('sr-only')
-    expect(html).toContain('Skip to content')
-  })
-
-  it('honours a custom label', () => {
-    const html = renderToStaticMarkup(
-      <SkipToContent targetId="content" label="Saltar al contenido" />,
-    )
-    expect(html).toContain('Saltar al contenido')
-    expect(html).toContain('href="#content"')
-  })
-
-  it('becomes visible on focus', () => {
-    const html = renderToStaticMarkup(<SkipToContent targetId="main" />)
-    expect(html).toContain('focus:not-sr-only')
-  })
-})

package/src/blocks/e-commerce/navigation/skip-to-content.tsx

@@ -1,37 +0,0 @@
-import { z } from 'zod'
-
-import { cn } from '../../../lib/utils'
-
-export const skipToContentPropsSchema = z.object({
-  targetId: z.string(),
-  label: z.string().optional(),
-  className: z.string().optional(),
-})
-
-export type SkipToContentProps = z.infer<typeof skipToContentPropsSchema>
-
-/**
- * Skip-to-content link (WCAG 2.4.1 Bypass Blocks).
- *
- * Framework-agnostic and prop-driven: a plain anchor to the main content id,
- * visually hidden until it receives focus, then pinned at the top-left with
- * visible contrast. The target element is responsible for carrying the id (and
- * being focusable); this block only renders the bypass affordance.
- */
-export function SkipToContent({
-  targetId,
-  label = 'Skip to content',
-  className,
-}: SkipToContentProps) {
-  return (
-    <a
-      href={`#${targetId}`}
-      className={cn(
-        'sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-primary-foreground focus:shadow-lg',
-        className,
-      )}
-    >
-      {label}
-    </a>
-  )
-}