@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/product-list/product-grid.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { Skeleton } from '../../../ui/skeleton'
+import type { ProductGridSpecProps, ProductPresentation } from '../../../lib/contracts'
+import { ProductCard } from './product-card'
+
+/**
+ * Props for the canonical `ProductGrid` listing. The serializable spec props
+ * (`ProductGridSpecProps`) plus the runtime-only action callbacks and label
+ * strings, which the grid forwards to each cell.
+ */
+export interface ProductGridProps extends ProductGridSpecProps {
+  onAddToCart?: (item: ProductPresentation) => void
+  onProductClick?: (item: ProductPresentation) => void
+  /** Host-owned wishlist toggle; reports the item and the next state. */
+  onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void
+  onViewSimilar?: (item: ProductPresentation) => void
+  addToCartLabel?: string
+  /** Shown when a price is present but unavailable (never a zero amount). */
+  unavailablePriceLabel?: string
+  addToWishlistLabel?: string
+  removeFromWishlistLabel?: string
+  viewSimilarLabel?: string
+}
+
+const GRID_CLASSES = 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'
+
+function SkeletonCell() {
+  return (
+    <div className='flex flex-col gap-3'>
+      <Skeleton className='aspect-square w-full rounded-md' />
+      <Skeleton className='h-4 w-3/4' />
+      <Skeleton className='h-4 w-1/3' />
+    </div>
+  )
+}
+
+/**
+ * Canonical product grid — the listing that renders a collection of product
+ * items as a grid of `ProductCard` item cells. It owns the section chrome
+ * (heading), the responsive layout, the item cap, wishlist membership
+ * resolution, and the loading/empty/ready states; the host owns data errors.
+ */
+export function ProductGrid({
+  items,
+  presentation,
+  heading,
+  maxItems,
+  wishlistedIds,
+  loading = false,
+  skeletonCount = 6,
+  emptyLabel = 'No hay productos para mostrar.',
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel,
+  unavailablePriceLabel,
+  addToWishlistLabel,
+  removeFromWishlistLabel,
+  viewSimilarLabel,
+}: ProductGridProps) {
+  const displayedItems = maxItems !== undefined ? items.slice(0, maxItems) : items
+
+  let body: ReactNode
+  if (loading) {
+    body = (
+      <div role='status' aria-busy='true' className={GRID_CLASSES}>
+        {Array.from({ length: skeletonCount }, (_, index) => (
+          <SkeletonCell key={index} />
+        ))}
+      </div>
+    )
+  } else if (displayedItems.length === 0) {
+    body = <p className='text-muted-foreground text-center'>{emptyLabel}</p>
+  } else {
+    body = (
+      <div className={GRID_CLASSES}>
+        {displayedItems.map((item) => (
+          <ProductCard
+            key={item.id}
+            item={item}
+            presentation={presentation}
+            wishlisted={wishlistedIds ? wishlistedIds.includes(item.id) : undefined}
+            onAddToCart={onAddToCart}
+            onProductClick={onProductClick}
+            onToggleWishlist={onToggleWishlist}
+            onViewSimilar={onViewSimilar}
+            addToCartLabel={addToCartLabel}
+            unavailablePriceLabel={unavailablePriceLabel}
+            addToWishlistLabel={addToWishlistLabel}
+            removeFromWishlistLabel={removeFromWishlistLabel}
+            viewSimilarLabel={viewSimilarLabel}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <section className='py-12'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {heading && (
+          <h2 className='mb-8 text-center text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>
+        )}
+        {body}
+      </div>
+    </section>
+  )
+}
+
+export default ProductGrid

package/src/blocks/e-commerce/product-overview/product-overview-gallery.tsx

@@ -0,0 +1,71 @@
+import { Camera } from 'lucide-react'
+import { Badge } from '../../../ui/badge'
+import { cn } from '../../../lib/utils'
+
+export interface ProductOverviewGalleryProps {
+  /** Resolved image URLs for the product (never empty strings; a fallback is allowed). */
+  images: string[]
+  /** Product title, used for alt text. */
+  title: string
+  /** Optional badge label; omitted when absent. */
+  badgeLabel?: string
+  selectedImage: number
+  onSelectImage: (index: number) => void
+  photosLabel?: string
+}
+
+/**
+ * Image-forward gallery used by the canonical ProductOverview `rich` presentation: a large
+ * primary image with an optional badge and a photo count, plus a thumbnail strip. Operates on
+ * already-resolved URLs so it carries no product-shape assumption (no `mainImages`/`galleryImages`
+ * split, no sector fields).
+ */
+export function ProductOverviewGallery({
+  images,
+  title,
+  badgeLabel,
+  selectedImage,
+  onSelectImage,
+  photosLabel = 'fotos',
+}: ProductOverviewGalleryProps) {
+  const activeImage = images[Math.min(selectedImage, images.length - 1)]
+
+  return (
+    <div>
+      <div className='bg-muted relative aspect-square overflow-hidden rounded-xl'>
+        <img src={activeImage || undefined} alt={title} className='size-full object-cover' />
+        {badgeLabel ? (
+          <Badge className='absolute top-4 left-4 px-2.5 py-0.5 font-semibold'>{badgeLabel}</Badge>
+        ) : null}
+        <div className='absolute right-4 bottom-4 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur-sm'>
+          <Camera className='mr-1 inline size-4' />
+          {images.length} {photosLabel}
+        </div>
+      </div>
+
+      {images.length > 1 ? (
+        <div className='mt-4 flex gap-3 overflow-x-auto pb-2'>
+          {images.map((image, index) => (
+            <button
+              type='button'
+              key={`${title}:gallery:${index}`}
+              onClick={() => onSelectImage(index)}
+              className={cn(
+                'relative aspect-square size-20 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 transition-all',
+                selectedImage === index
+                  ? 'border-primary ring-primary/20 shadow-md ring-2'
+                  : 'border-muted hover:border-muted-foreground/50',
+              )}
+              aria-label={`Mostrar imagen ${index + 1} de ${title}`}
+              aria-pressed={selectedImage === index}
+            >
+              <img src={image || undefined} alt={`${title} ${index + 1}`} className='size-full object-cover' />
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default ProductOverviewGallery

package/src/blocks/e-commerce/product-overview/{product-overview-5-lightbox-tab.tsx → product-overview-lightbox-tab.tsx}

@@ -7,80 +7,92 @@ import { Card, CardContent } from '../../../ui/card'
 import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '../../../ui/dialog'
 import { cn } from '../../../lib/utils'
 
-import type { ProductOverview5Product } from './product-overview-5'
-
-export interface ProductOverview5LightboxTabProps {
-  product: ProductOverview5Product
+export interface ProductOverviewLightboxTabProps {
+  /** Resolved image URLs for the product. */
+  images: string[]
+  /** Product title, used for alt text. */
+  title: string
   galleryLabel?: string
   ofCounterLabel?: string
 }
 
-export function ProductOverview5LightboxTab({
-  product,
+/**
+ * Gallery panel for the `rich` presentation: a thumbnail grid that opens a lightbox with
+ * prev/next navigation. Operates on already-resolved URLs so it carries no sector assumption.
+ */
+export function ProductOverviewLightboxTab({
+  images,
+  title,
   galleryLabel = 'Galería',
   ofCounterLabel = '{current} de {total}',
-}: ProductOverview5LightboxTabProps) {
+}: ProductOverviewLightboxTabProps) {
   const [modalImageIndex, setModalImageIndex] = useState(0)
 
-  const nextImage = () => setModalImageIndex(prev => (prev + 1) % product.galleryImages.length)
-  const prevImage = () => setModalImageIndex(prev => (prev - 1 + product.galleryImages.length) % product.galleryImages.length)
+  const nextImage = () => setModalImageIndex(prev => (prev + 1) % images.length)
+  const prevImage = () => setModalImageIndex(prev => (prev - 1 + images.length) % images.length)
 
   return (
     <Card className='border shadow-none'>
       <CardContent className='p-8 py-0'>
         <h3 className='mb-6 text-xl font-semibold text-balance'>{galleryLabel}</h3>
         <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
-          {product.galleryImages.map((image, index) => (
-            <Dialog key={index}>
+          {images.map((image, index) => (
+            <Dialog key={`${title}:lightbox:${index}`}>
               <DialogTrigger asChild>
                 <button
                   type='button'
                   className='block aspect-square cursor-pointer overflow-hidden rounded-xl'
                   onClick={() => setModalImageIndex(index)}
+                  aria-label={`Abrir imagen ${index + 1} de ${title}`}
                 >
-                  <img src={image || undefined} alt={`${product.name} ${index + 1}`} className='size-full object-cover' />
+                  <img src={image || undefined} alt={`${title} ${index + 1}`} className='size-full object-cover' />
                 </button>
               </DialogTrigger>
               <DialogContent className='max-w-4xl border-0 bg-transparent p-0' showCloseButton={false}>
                 <DialogTitle className='sr-only'>Imagen de galería {modalImageIndex + 1}</DialogTitle>
                 <div className='relative'>
                   <img
-                    src={product.galleryImages[modalImageIndex] || undefined}
-                    alt={`${product.name} ${modalImageIndex + 1}`}
+                    src={images[modalImageIndex] || undefined}
+                    alt={`${title} ${modalImageIndex + 1}`}
                     className='max-h-[80vh] w-full object-contain'
                   />
                   <DialogClose className='absolute top-4 right-4 rounded-full bg-black/20 p-2 text-white transition-colors hover:bg-black/30'>
                     <X className='size-4' />
                   </DialogClose>
 
-                  {product.galleryImages.length > 1 && (
+                  {images.length > 1 ? (
                     <>
                       <Button
                         variant='ghost'
                         size='icon'
-                        className='size-9 absolute top-1/2 left-4 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
+                        className='absolute top-1/2 left-4 size-9 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
                         onClick={prevImage}
+                        aria-label='Imagen anterior'
                       >
                         <ChevronLeft className='size-4' />
                       </Button>
                       <Button
                         variant='ghost'
                         size='icon'
-                        className='size-9 absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
+                        className='absolute top-1/2 right-4 size-9 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
                         onClick={nextImage}
+                        aria-label='Imagen siguiente'
                       >
                         <ChevronRight className='size-4' />
                       </Button>
                     </>
-                  )}
+                  ) : null}
 
                   <div className='absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2'>
-                    {product.galleryImages.map((_, idx) => (
+                    {images.map((_, idx) => (
                       <button
                         type='button'
-                        key={idx}
+                        key={`${title}:dot:${idx}`}
                         aria-label={`Mostrar imagen ${idx + 1}`}
-                        className={cn('size-2 rounded-full transition-colors', idx === modalImageIndex ? 'bg-white' : 'bg-white/50')}
+                        className={cn(
+                          'size-2 rounded-full transition-colors',
+                          idx === modalImageIndex ? 'bg-white' : 'bg-white/50',
+                        )}
                         onClick={() => setModalImageIndex(idx)}
                       />
                     ))}
@@ -89,7 +101,7 @@ export function ProductOverview5LightboxTab({
                   <div className='absolute right-4 bottom-4 rounded-full bg-black/20 px-3 py-1 text-sm text-white'>
                     {ofCounterLabel
                       .replace('{current}', String(modalImageIndex + 1))
-                      .replace('{total}', String(product.galleryImages.length))}
+                      .replace('{total}', String(images.length))}
                   </div>
                 </div>
               </DialogContent>
@@ -101,4 +113,4 @@ export function ProductOverview5LightboxTab({
   )
 }
 
-export default ProductOverview5LightboxTab
+export default ProductOverviewLightboxTab

package/src/blocks/e-commerce/product-overview/{product-overview-5-reviews-tab.tsx → product-overview-reviews-tab.tsx}

@@ -2,17 +2,33 @@ import { Star } from 'lucide-react'
 import { Card, CardContent } from '../../../ui/card'
 import { Progress } from '../../../ui/progress'
 
-import type { ProductOverview5Product } from './product-overview-5'
+/**
+ * Canonical review entry for the ProductOverview `rich` presentation. Reviews are supplied by the
+ * host (optional block data), never seeded by the block.
+ */
+export interface ProductOverviewReview {
+  id: number
+  author: string
+  rating: number
+  comment: string
+  date: string
+  helpful?: number
+}
 
-export interface ProductOverview5ReviewsTabProps {
-  product: ProductOverview5Product
+export interface ProductOverviewReviewsTabProps {
+  /** Aggregate rating (0–5); rendered only when the host supplies reviews. */
+  rating: number
+  reviews: ProductOverviewReview[]
   basedOnReviewsLabel?: string
   foundHelpfulLabel?: string
 }
 
 function renderStars(rating: number) {
   return Array.from({ length: 5 }, (_, i) => (
-    <Star key={i} className={`size-4 ${i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''}`} />
+    <Star
+      key={i}
+      className={`size-4 ${i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''}`}
+    />
   ))
 }
 
@@ -20,27 +36,32 @@ function formatDate(dateString: string) {
   return new Date(dateString).toLocaleDateString('es-ES', { year: 'numeric', month: 'short', day: 'numeric' })
 }
 
-export function ProductOverview5ReviewsTab({
-  product,
+/**
+ * Reviews panel for the `rich` presentation: an aggregate summary plus the review list. Rendered
+ * only when the host supplies reviews, so it never fabricates an empty review surface.
+ */
+export function ProductOverviewReviewsTab({
+  rating,
+  reviews,
   basedOnReviewsLabel = 'Basado en {count} reseñas',
   foundHelpfulLabel = '{count} personas encontraron esto útil',
-}: ProductOverview5ReviewsTabProps) {
+}: ProductOverviewReviewsTabProps) {
   return (
     <div className='flex flex-col gap-6'>
       <Card className='border shadow-none'>
         <CardContent className='p-8 py-0'>
           <div className='flex flex-col items-start gap-8 md:flex-row md:items-center'>
             <div className='text-center'>
-              <div className='text-4xl font-bold'>{product.rating}</div>
-              <div className='mt-2 flex justify-center'>{renderStars(product.rating)}</div>
+              <div className='text-4xl font-bold'>{rating}</div>
+              <div className='mt-2 flex justify-center'>{renderStars(rating)}</div>
               <div className='text-muted-foreground mt-2 text-sm'>
-                {basedOnReviewsLabel.replace('{count}', String(product.userReviews.length))}
+                {basedOnReviewsLabel.replace('{count}', String(reviews.length))}
               </div>
             </div>
             <div className='flex-1'>
               {[5, 4, 3, 2, 1].map(stars => {
-                const count = product.userReviews.filter(review => Math.floor(review.rating) === stars).length
-                const percentage = (count / product.userReviews.length) * 100
+                const count = reviews.filter(review => Math.floor(review.rating) === stars).length
+                const percentage = reviews.length > 0 ? (count / reviews.length) * 100 : 0
                 return (
                   <div key={stars} className='mb-3 flex items-center gap-3'>
                     <span className='w-8 text-sm font-medium'>{stars}★</span>
@@ -55,7 +76,7 @@ export function ProductOverview5ReviewsTab({
       </Card>
 
       <div className='flex flex-col gap-4'>
-        {product.userReviews.map(review => (
+        {reviews.map(review => (
           <Card key={review.id} className='border shadow-none'>
             <CardContent className='p-6 py-0'>
               <div className='mb-4 flex items-start justify-between'>
@@ -68,9 +89,11 @@ export function ProductOverview5ReviewsTab({
                 </div>
               </div>
               <p className='text-muted-foreground mb-3 text-sm leading-relaxed'>{review.comment}</p>
-              <div className='text-muted-foreground text-xs'>
-                {foundHelpfulLabel.replace('{count}', String(review.helpful))}
-              </div>
+              {typeof review.helpful === 'number' ? (
+                <div className='text-muted-foreground text-xs'>
+                  {foundHelpfulLabel.replace('{count}', String(review.helpful))}
+                </div>
+              ) : null}
             </CardContent>
           </Card>
         ))}
@@ -79,4 +102,4 @@ export function ProductOverview5ReviewsTab({
   )
 }
 
-export default ProductOverview5ReviewsTab
+export default ProductOverviewReviewsTab

package/src/blocks/e-commerce/product-overview/{product-overview-5-tabs.tsx → product-overview-tabs.tsx}

@@ -3,7 +3,8 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
 import { cn } from '../../../lib/utils'
 
 /**
- * The full tab set this block renders on.
+ * The full tab set the canonical ProductOverview renders on for its `rich`
+ * presentation.
  *
  * The block's classes target Base UI state attributes (`data-active:bg-transparent` on the
  * triggers), the indicator reads Base UI positioning CSS variables (`--active-tab-*`), and the
@@ -12,11 +13,11 @@ import { cn } from '../../../lib/utils'
  * `tabs` so the block installs standalone: the shadcn `tabs` component you get from the registry
  * has no indicator or fading panel.
  */
-export function ProductOverview5Tabs(props: TabsPrimitive.Root.Props) {
+export function ProductOverviewTabs(props: TabsPrimitive.Root.Props) {
   return <TabsPrimitive.Root data-slot='tabs' {...props} />
 }
 
-export function ProductOverview5TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+export function ProductOverviewTabsList({ className, ...props }: TabsPrimitive.List.Props) {
   return <TabsPrimitive.List data-slot='tabs-list' className={className} {...props} />
 }
 
@@ -24,7 +25,7 @@ export function ProductOverview5TabsList({ className, ...props }: TabsPrimitive.
  * Base UI's tab button carries no layout of its own, so the inline-flex centring that the
  * Radix-backed shadcn trigger used to supply is re-stated here.
  */
-export function ProductOverview5TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+export function ProductOverviewTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   return (
     <TabsPrimitive.Tab
       data-slot='tabs-trigger'
@@ -39,7 +40,7 @@ export function ProductOverview5TabsTrigger({ className, ...props }: TabsPrimiti
  * activation is a fresh mount - `animate-in` plays automatically without needing a transition-state
  * data attribute to gate it.
  */
-export function ProductOverview5TabsContentFade({ className, ...props }: TabsPrimitive.Panel.Props) {
+export function ProductOverviewTabsContentFade({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
       className={cn('animate-in fade-in-0 duration-200 motion-reduce:animate-none', className)}
@@ -53,7 +54,7 @@ export function ProductOverview5TabsContentFade({ className, ...props }: TabsPri
  * with `data-active:bg-transparent` on the triggers so their own active background doesn't double
  * up with the pill.
  */
-export function ProductOverview5TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
+export function ProductOverviewTabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
   return (
     <TabsPrimitive.Indicator
       data-slot='tabs-indicator'
@@ -66,4 +67,4 @@ export function ProductOverview5TabsIndicator({ className, ...props }: TabsPrimi
       {...props}
     />
   )
-}
+}