@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/e-commerce/order-history/order-history-1.tsx

@@ -1,159 +0,0 @@
-import { Button } from '../../../ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '../../../ui/card'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '../../../ui/table'
-
-export interface OrderHistory1Order {
-  name: string
-  image: string
-  color: string
-  size: string
-  quantity: number
-  price: number
-  orderDate: string
-}
-
-export interface OrderHistory1Props {
-  orders: OrderHistory1Order[]
-  title?: string
-  description?: string
-  totalOrdersLabel?: string
-  lastOrderLabel?: string
-  itemLabel?: string
-  orderDateLabel?: string
-  quantityLabel?: string
-  priceLabel?: string
-  colorLabel?: string
-  sizeLabel?: string
-  viewDetailsLabel?: string
-  downloadInvoiceLabel?: string
-  onViewDetails?: () => void
-  onDownloadInvoice?: () => void
-}
-
-function getLastOrder(orders: OrderHistory1Order[]): string {
-  if (orders.length === 0) return ''
-  return orders.reduce((latest, order) => {
-    const current = new Date(order.orderDate)
-    const previous = new Date(latest)
-    if (Number.isNaN(current.getTime())) return latest
-    if (Number.isNaN(previous.getTime())) return order.orderDate
-    return current > previous ? order.orderDate : latest
-  }, orders[0].orderDate)
-}
-
-export function OrderHistory1({
-  orders,
-  title,
-  description,
-  totalOrdersLabel = 'Total de pedidos',
-  lastOrderLabel = 'Último pedido',
-  itemLabel = 'Artículo',
-  orderDateLabel = 'Fecha',
-  quantityLabel = 'Cantidad',
-  priceLabel = 'Precio',
-  colorLabel = 'Color',
-  sizeLabel = 'Talla',
-  viewDetailsLabel = 'Ver detalles del pedido',
-  downloadInvoiceLabel = 'Descargar factura',
-  onViewDetails,
-  onDownloadInvoice,
-}: OrderHistory1Props) {
-  const totalAmount = orders.reduce((sum, order) => sum + order.price, 0)
-  const lastOrder = getLastOrder(orders)
-
-  return (
-    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <Card>
-        <CardHeader className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between md:gap-x-6">
-          <div>
-            <CardTitle className="text-2xl">{title ?? 'Historial de pedidos'}</CardTitle>
-            <CardDescription className="text-balance">
-              {description ?? 'Ver tus pedidos anteriores y su estado'}
-            </CardDescription>
-          </div>
-          <div className="text-end text-sm text-muted-foreground max-sm:text-start">
-            <p>{totalOrdersLabel}: {orders.length}</p>
-            <p>{lastOrderLabel}: {lastOrder}</p>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow className="hover:bg-transparent">
-                <TableHead className="font-semibold">{itemLabel}</TableHead>
-                <TableHead className="hidden text-end font-semibold sm:table-cell">{orderDateLabel}</TableHead>
-                <TableHead className="hidden text-end font-semibold md:table-cell">{quantityLabel}</TableHead>
-                <TableHead className="text-end font-semibold">{priceLabel}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {orders.map((order) => (
-                <TableRow key={order.name}>
-                  <TableCell className="flex flex-col gap-3 py-3 sm:flex-row sm:items-center">
-                    <img
-                      src={order.image || undefined}
-                      alt={order.name}
-                      className="h-16 w-16 shrink-0 rounded-md object-cover"
-                    />
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate font-medium">{order.name}</p>
-                      <p className="truncate text-sm text-muted-foreground">
-                        {colorLabel}: {order.color} • {sizeLabel}: {order.size}
-                      </p>
-                      <p className="mt-1 text-xs text-muted-foreground sm:hidden">{order.orderDate}</p>
-                    </div>
-                  </TableCell>
-                  <TableCell className="hidden text-end sm:table-cell">{order.orderDate}</TableCell>
-                  <TableCell className="hidden text-end md:table-cell">{order.quantity}</TableCell>
-                  <TableCell className="text-end">${order.price.toFixed(2)}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-            <TableFooter className="bg-transparent">
-              <TableRow className="font-semibold hover:bg-transparent md:hidden">
-                <TableCell colSpan={1} />
-                <TableCell className="text-end">${totalAmount.toFixed(2)}</TableCell>
-              </TableRow>
-              <TableRow className="hidden font-semibold hover:bg-transparent md:table-row">
-                <TableCell colSpan={2} />
-                <TableCell className="text-end">${totalAmount.toFixed(2)}</TableCell>
-              </TableRow>
-            </TableFooter>
-          </Table>
-        </CardContent>
-        <CardFooter className="flex flex-wrap gap-4 border-t-0 bg-transparent pt-0">
-          <Button
-            className="h-9 cursor-pointer px-4 py-2"
-            onClick={onViewDetails}
-          >
-            {viewDetailsLabel}
-          </Button>
-          <Button
-            className="h-9 cursor-pointer px-4 py-2"
-            variant="secondary"
-            onClick={onDownloadInvoice}
-          >
-            {downloadInvoiceLabel}
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}
-
-export default OrderHistory1

package/src/blocks/e-commerce/order-history/order-history-2.tsx

@@ -1,222 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../../ui/card"
-import { Badge } from "../../../ui/badge"
-import { Button } from "../../../ui/button"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "../../../ui/carousel"
-
-export interface OrderItem {
-  id: string
-  name: string
-  image: string
-  details: string
-  price: string
-  quantity: number
-}
-
-export interface Order {
-  id: string
-  date: string
-  status: string
-  total: string
-  items: OrderItem[]
-}
-
-export interface OrderHistory2Props {
-  orders: Order[]
-  titleLabel?: string
-  descriptionLabel?: string
-  totalOrdersLabel?: string
-  lastOrderLabel?: string
-  orderLabel?: string
-  placedOnLabel?: string
-  trackOrderLabel?: string
-  viewDetailsLabel?: string
-  qtyLabel?: string
-  orderTotalLabel?: string
-  onTrackOrder?: (order: Order) => void
-  onViewDetails?: (order: Order) => void
-}
-
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: typeof window !== "undefined" ? window.innerWidth : 0,
-  })
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-      })
-    }
-
-    window.addEventListener("resize", handleResize)
-    handleResize()
-
-    return () => window.removeEventListener("resize", handleResize)
-  }, [])
-
-  return windowSize
-}
-
-function getVisibleItemsCount(width: number) {
-  if (width >= 1024) return 4
-  if (width >= 640) return 2
-  return 1
-}
-
-function formatLabel(label: string, values: Record<string, string | number>): string {
-  return label.replace(/\{(\w+)\}/g, (match, key) => {
-    return key in values ? String(values[key]) : match
-  })
-}
-
-export function OrderHistory2({
-  orders,
-  titleLabel = "Tus pedidos",
-  descriptionLabel = "Consulta y gestiona tus pedidos recientes",
-  totalOrdersLabel = "Total de pedidos: {n}",
-  lastOrderLabel = "Último pedido realizado el {date}",
-  orderLabel = "Pedido {id}",
-  placedOnLabel = "Realizado el {date}",
-  trackOrderLabel = "Seguir pedido",
-  viewDetailsLabel = "Ver detalles",
-  qtyLabel = "Cantidad: {n}",
-  orderTotalLabel = "Total del pedido",
-  onTrackOrder,
-  onViewDetails,
-}: OrderHistory2Props) {
-  const { width } = useWindowSize()
-  const visibleItemsCount = getVisibleItemsCount(width)
-  const hasOrders = orders.length > 0
-
-  const shouldShowArrows = (items: OrderItem[]) => {
-    return items.length > visibleItemsCount
-  }
-
-  return (
-    <div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-      <Card className="overflow-visible border-0 bg-transparent shadow-none ring-0">
-        <CardHeader className="flex flex-col gap-4 px-0 sm:flex-row sm:items-center sm:justify-between">
-          <div>
-            <CardTitle className="text-2xl text-balance">{titleLabel}</CardTitle>
-            <CardDescription className="text-balance">
-              {descriptionLabel}
-            </CardDescription>
-          </div>
-          <div className="flex flex-col items-start gap-1 sm:items-end">
-            <p className="text-sm font-medium">{formatLabel(totalOrdersLabel, { n: orders.length })}</p>
-            {hasOrders ? (
-              <p className="text-sm text-muted-foreground">
-                {formatLabel(lastOrderLabel, { date: orders[0].date })}
-              </p>
-            ) : null}
-          </div>
-        </CardHeader>
-        <CardContent className="grid gap-6 p-0">
-          {orders.map((order) => (
-            <Card key={order.id} className="overflow-hidden pt-0">
-              <CardHeader className="flex flex-col gap-4 bg-muted/50 p-6 md:flex-row md:items-center md:justify-between">
-                <div className="flex flex-col gap-1.5">
-                  <div className="flex items-center gap-3">
-                    <CardTitle className="text-lg text-balance">
-                      {formatLabel(orderLabel, { id: order.id })}
-                    </CardTitle>
-                    <Badge
-                      variant={order.status === "Delivered" ? "default" : "secondary"}
-                      className="px-2.5 py-0.5 font-semibold"
-                    >
-                      {order.status}
-                    </Badge>
-                  </div>
-                  <CardDescription className="text-sm text-balance">
-                    {formatLabel(placedOnLabel, { date: order.date })}
-                  </CardDescription>
-                </div>
-                <div className="flex flex-wrap items-center gap-3">
-                  {order.status === "Processing" ? (
-                    <Button
-                      size="sm"
-                      className="h-8 cursor-pointer px-3 text-xs"
-                      onClick={onTrackOrder ? () => onTrackOrder(order) : undefined}
-                    >
-                      {trackOrderLabel}
-                    </Button>
-                  ) : null}
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-8 cursor-pointer px-3 text-xs"
-                    onClick={onViewDetails ? () => onViewDetails(order) : undefined}
-                  >
-                    {viewDetailsLabel}
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent className="px-16">
-                <Carousel opts={{ align: "start", loop: false }} className="w-full [&>div]:p-4">
-                  <CarouselContent className="-ml-5" id={`carousel-${order.id}`}>
-                    {order.items.map((item) => (
-                      <CarouselItem
-                        key={item.id}
-                        className="basis-full pl-5.5 sm:basis-1/2 lg:basis-1/4"
-                      >
-                        <Card className="py-0">
-                          <CardContent className="p-4">
-                            <div className="aspect-square w-full overflow-hidden rounded-lg">
-                              <img
-                                src={item.image || undefined}
-                                alt={item.name}
-                                className="size-full object-contain"
-                              />
-                            </div>
-                            <div className="mt-4 flex flex-col gap-2">
-                              <h4 className="font-medium">{item.name}</h4>
-                              <p className="text-sm text-muted-foreground">{item.details}</p>
-                              <div className="flex items-center justify-between">
-                                <p className="font-medium">{item.price}</p>
-                                <p className="text-sm text-muted-foreground">
-                                  {formatLabel(qtyLabel, { n: item.quantity })}
-                                </p>
-                              </div>
-                            </div>
-                          </CardContent>
-                        </Card>
-                      </CarouselItem>
-                    ))}
-                  </CarouselContent>
-
-                  {shouldShowArrows(order.items) ? (
-                    <>
-                      <CarouselPrevious className="-inset-inline-start-10" />
-                      <CarouselNext className="-inset-inline-end-10" />
-                    </>
-                  ) : null}
-                </Carousel>
-                <div className="mt-6 flex items-center justify-between border-t pt-4">
-                  <p className="text-sm text-muted-foreground">{orderTotalLabel}</p>
-                  <p className="text-lg font-semibold">{order.total}</p>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-export default OrderHistory2

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

@@ -1,122 +0,0 @@
-// @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 { CategoryCard } from './category-card'
-import { CategoryGrid } from './product-category-grid'
-import type { ProductCategoryItem } from '../../../lib/contracts'
-
-beforeAll(() => {
-  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
-})
-
-const category: ProductCategoryItem = {
-  id: 'pcat_herramientas',
-  handle: 'herramientas',
-  name: 'Herramientas',
-  description: 'Taladros y accesorios',
-  image: '/products/drill.png',
-  itemCount: 12,
-  trending: true,
-  featured: true,
-  subcategories: ['Taladros', 'Accesorios'],
-}
-
-const categories: ProductCategoryItem[] = [
-  category,
-  { ...category, id: 'pcat_pintura', handle: 'pintura', name: 'Pintura', image: undefined },
-  { ...category, id: 'pcat_jardin', handle: 'jardin', name: 'Jardín' },
-]
-
-const card = (extra: Record<string, unknown> = {}) =>
-  renderToStaticMarkup(<CategoryCard category={category} {...extra} />)
-
-const grid = (extra: Record<string, unknown> = {}) =>
-  renderToStaticMarkup(<CategoryGrid categories={categories} {...extra} />)
-
-describe('CategoryCard — item cell', () => {
-  it('renders a single category without section chrome', () => {
-    const html = card()
-    expect(html).toContain('Herramientas')
-    expect(html).not.toContain('<section')
-    expect(html).not.toContain('<h2')
-  })
-
-  it('renders the image for the grid presentation and omits it for icons', () => {
-    expect(card()).toContain('/products/drill.png')
-    expect(card({ presentation: 'icons' })).not.toContain('<img')
-  })
-
-  it('keeps counts honest (zero and unknown are not invented)', () => {
-    expect(card()).toContain('12')
-    expect(renderToStaticMarkup(<CategoryCard category={{ ...category, itemCount: undefined }} />)).not.toContain('items</span>')
-    expect(renderToStaticMarkup(<CategoryCard category={{ ...category, itemCount: 0 }} />)).not.toContain('items</span>')
-  })
-
-  it('only exposes browse when a handler exists', () => {
-    expect(card({ browseLabel: 'Ver' })).not.toContain('Ver Herramientas')
-    const html = card({ browseLabel: 'Ver', onBrowse: vi.fn() })
-    expect(html).toContain('aria-label="Ver Herramientas"')
-  })
-
-  it('renders the list cell with description, chips and featured badge', () => {
-    const html = card({ presentation: 'list', featuredLabel: 'Destacada', itemsLabel: 'productos' })
-    expect(html).toContain('Taladros y accesorios')
-    expect(html).toContain('Taladros')
-    expect(html).toContain('Destacada')
-    expect(html).toContain('productos')
-  })
-})
-
-describe('CategoryGrid — listing', () => {
-  it('renders one cell per category', () => {
-    const html = grid()
-    expect(html).toContain('Herramientas')
-    expect(html).toContain('Pintura')
-    expect(html).toContain('Jardín')
-    expect(html.match(/data-slot="card"/g) ?? []).toHaveLength(3)
-  })
-
-  it('caps the rendered collection with maxItems', () => {
-    const html = grid({ maxItems: 2 })
-    expect(html).toContain('Herramientas')
-    expect(html).toContain('Pintura')
-    expect(html).not.toContain('Jardín')
-  })
-
-  it('owns its loading state with skeletons and no cells', () => {
-    const html = grid({ loading: true, skeletonCount: 3 })
-    expect(html).toContain('aria-busy="true"')
-    expect(html).not.toContain('data-slot="card"')
-  })
-
-  it('owns its empty state', () => {
-    expect(renderToStaticMarkup(<CategoryGrid categories={[]} emptyLabel="Sin categorías" />)).toContain('Sin categorías')
-  })
-
-  it('renders the search control only in the list presentation', () => {
-    expect(grid({ presentation: 'grid', onQueryChange: vi.fn() })).not.toContain('type="search"')
-    expect(grid({ presentation: 'list', onQueryChange: vi.fn(), searchPlaceholder: 'Buscar' })).toContain('type="search"')
-  })
-
-  it('renders view-all only outside the grid and the section cta only outside the list', () => {
-    const withBoth = { cta: { label: 'Comprar', href: '/tienda' }, onViewAll: vi.fn(), viewAllLabel: 'Ver todo' }
-    const gridHtml = grid({ presentation: 'grid', ...withBoth })
-    expect(gridHtml).toContain('Comprar')
-    expect(gridHtml).not.toContain('Ver todo')
-    const listHtml = grid({ presentation: 'list', ...withBoth })
-    expect(listHtml).toContain('Ver todo')
-    expect(listHtml).not.toContain('Comprar')
-  })
-
-  it('forwards the controlled query to the search input', async () => {
-    const user = userEvent.setup()
-    const onQueryChange = vi.fn()
-    render(<CategoryGrid categories={categories} presentation="list" query="tal" onQueryChange={onQueryChange} searchLabel="Buscar categorías" />)
-    const input = screen.getByLabelText('Buscar categorías') as HTMLInputElement
-    expect(input.value).toBe('tal')
-    await user.type(input, 'a')
-    expect(onQueryChange).toHaveBeenCalled()
-  })
-})

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

@@ -1,68 +0,0 @@
-// @vitest-environment jsdom
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { CategoryCard } from './category-card'
-import type { ProductCategoryItem } from '../../../lib/contracts'
-
-const category: ProductCategoryItem = {
-  id: 'pcat_herramientas',
-  name: 'Herramientas',
-  description: 'Taladros y accesorios',
-  image: '/products/drill.png',
-  itemCount: 12,
-  trending: true,
-  featured: true,
-  subcategories: ['Taladros', 'Accesorios'],
-}
-
-describe('CategoryCard', () => {
-  it('renders one item without section-level chrome', () => {
-    const html = renderToStaticMarkup(<CategoryCard category={category} />)
-    expect(html).toContain('Herramientas')
-    expect(html).not.toContain('<section')
-    expect(html).not.toContain('<h2')
-  })
-
-  it('renders the selected presentation and forwards presentation-specific copy', () => {
-    expect(renderToStaticMarkup(<CategoryCard category={category} />)).toContain('/products/drill.png')
-    expect(renderToStaticMarkup(<CategoryCard category={category} presentation="icons" />)).not.toContain('<img')
-    const list = renderToStaticMarkup(
-      <CategoryCard category={category} presentation="list" itemsLabel="productos" featuredLabel="Destacada" />,
-    )
-    expect(list).toContain('Taladros y accesorios')
-    expect(list).toContain('Destacada')
-    expect(list).toContain('productos')
-  })
-
-  it('exposes an accessible browse name and invokes the category action by keyboard', async () => {
-    const user = userEvent.setup()
-    const onBrowse = vi.fn()
-    render(<CategoryCard category={category} presentation="icons" onBrowse={onBrowse} />)
-    const button = screen.getByRole('button', { name: 'Herramientas' })
-
-    button.focus()
-    await user.keyboard('{Enter}')
-    await user.keyboard(' ')
-
-    expect(onBrowse).toHaveBeenCalledTimes(2)
-    expect(onBrowse).toHaveBeenLastCalledWith(category)
-  })
-
-  it('does not add an inert focus target when browsing is unavailable', () => {
-    render(<CategoryCard category={category} presentation="icons" />)
-    expect(screen.queryByRole('button')).toBeNull()
-  })
-
-  it('gives grid and list browse buttons an accessible name containing the category', () => {
-    const grid = renderToStaticMarkup(
-      <CategoryCard category={category} onBrowse={() => undefined} browseLabel="Explorar" />,
-    )
-    const list = renderToStaticMarkup(
-      <CategoryCard category={category} presentation="list" onBrowse={() => undefined} browseLabel="Explorar" />,
-    )
-    expect(grid).toContain('aria-label="Explorar Herramientas"')
-    expect(list).toContain('aria-label="Explorar Herramientas"')
-  })
-})