@thorprovider/blocks 2.0.0 → 3.0.1

package/src/blocks/e-commerce/product-overview/product-overview-reviews-tab.tsx

@@ -1,105 +0,0 @@
-import { Star } from 'lucide-react'
-import { Card, CardContent } from '../../../ui/card'
-import { Progress } from '../../../ui/progress'
-
-/**
- * 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 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' : ''}`}
-    />
-  ))
-}
-
-function formatDate(dateString: string) {
-  return new Date(dateString).toLocaleDateString('es-ES', { year: 'numeric', month: 'short', day: 'numeric' })
-}
-
-/**
- * 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',
-}: 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'>{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(reviews.length))}
-              </div>
-            </div>
-            <div className='flex-1'>
-              {[5, 4, 3, 2, 1].map(stars => {
-                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>
-                    <Progress value={percentage} className='h-2 flex-1 rounded-full' />
-                    <span className='text-muted-foreground w-8 text-sm'>{count}</span>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <div className='flex flex-col gap-4'>
-        {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'>
-                <div>
-                  <div className='text-sm font-medium'>{review.author}</div>
-                  <div className='mt-2 flex items-center gap-2'>
-                    <div className='flex'>{renderStars(review.rating)}</div>
-                    <span className='text-muted-foreground text-sm'>{formatDate(review.date)}</span>
-                  </div>
-                </div>
-              </div>
-              <p className='text-muted-foreground mb-3 text-sm leading-relaxed'>{review.comment}</p>
-              {typeof review.helpful === 'number' ? (
-                <div className='text-muted-foreground text-xs'>
-                  {foundHelpfulLabel.replace('{count}', String(review.helpful))}
-                </div>
-              ) : null}
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default ProductOverviewReviewsTab

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

@@ -1,70 +0,0 @@
-import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * 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
- * content fade relies on Base UI unmounting the inactive panel - so the whole tabs area runs on
- * Base UI rather than the Radix-backed shadcn `tabs`. It lives here rather than in the shared ui
- * `tabs` so the block installs standalone: the shadcn `tabs` component you get from the registry
- * has no indicator or fading panel.
- */
-export function ProductOverviewTabs(props: TabsPrimitive.Root.Props) {
-  return <TabsPrimitive.Root data-slot='tabs' {...props} />
-}
-
-export function ProductOverviewTabsList({ className, ...props }: TabsPrimitive.List.Props) {
-  return <TabsPrimitive.List data-slot='tabs-list' className={className} {...props} />
-}
-
-/**
- * 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 ProductOverviewTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
-  return (
-    <TabsPrimitive.Tab
-      data-slot='tabs-trigger'
-      className={cn('relative inline-flex items-center justify-center whitespace-nowrap', className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Panel with a fade-in on every switch. Base UI unmounts the inactive panel by default, so each
- * activation is a fresh mount - `animate-in` plays automatically without needing a transition-state
- * data attribute to gate it.
- */
-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)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Sliding pill that tracks the active trigger. Render as the first child of TabsList, and pair
- * with `data-active:bg-transparent` on the triggers so their own active background doesn't double
- * up with the pill.
- */
-export function ProductOverviewTabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
-  return (
-    <TabsPrimitive.Indicator
-      data-slot='tabs-indicator'
-      className={cn(
-        'absolute z-0 rounded-md bg-background shadow-sm transition-[left,top,width,height] duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] dark:bg-input/30',
-        'left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)',
-        'motion-reduce:transition-none',
-        className
-      )}
-      {...props}
-    />
-  )
-}

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

@@ -1,283 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import ProductOverview, {
-  galleryImages,
-  resolveAddToCartPayload,
-  variantLabelOf,
-  type ProductDetailProduct,
-  type ProductOverviewProps,
-} from './product-overview'
-
-const formatPrice = (money: { amount: string; currencyCode: string }) =>
-  `${money.currencyCode} ${money.amount}`
-
-const product: ProductDetailProduct = {
-  id: 'p1',
-  handle: 'taladro',
-  title: 'Taladro inalámbrico',
-  description: 'Un taladro',
-  vendor: 'Acme',
-  options: [{ id: 'o1', name: 'Color', values: ['Rojo', 'Azul'] }],
-  variants: [
-    {
-      id: 'v-red',
-      title: 'Rojo',
-      availableForSale: true,
-      selectedOptions: [{ name: 'Color', value: 'Rojo' }],
-      price: { amount: '10.00', currencyCode: 'USD' },
-    },
-    {
-      id: 'v-blue',
-      title: 'Azul',
-      availableForSale: true,
-      selectedOptions: [{ name: 'Color', value: 'Azul' }],
-      price: { amount: '25.50', currencyCode: 'USD' },
-    },
-    {
-      id: 'v-sold',
-      title: 'Verde',
-      availableForSale: false,
-      selectedOptions: [{ name: 'Color', value: 'Verde' }],
-      price: { amount: '9.00', currencyCode: 'USD' },
-    },
-    {
-      id: 'v-noprice',
-      title: 'Gris',
-      availableForSale: true,
-      selectedOptions: [{ name: 'Color', value: 'Gris' }],
-      price: null,
-    },
-    {
-      id: 'v-free',
-      title: 'Blanco',
-      availableForSale: true,
-      selectedOptions: [{ name: 'Color', value: 'Blanco' }],
-      price: { amount: '0', currencyCode: 'USD' },
-    },
-  ],
-  images: [
-    { url: 'https://cdn.example/p1.jpg', altText: 'p1' },
-    { url: 'https://cdn.example/p2.jpg', altText: 'p2' },
-  ],
-}
-
-const singleImageProduct: ProductDetailProduct = {
-  ...product,
-  images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
-}
-
-const render = (props: ProductOverviewProps) => renderToStaticMarkup(<ProductOverview {...props} />)
-
-describe('ProductOverview — canonical render (task 2.1)', () => {
-  it('renders title, images, option/variant selection, and the selected price', () => {
-    const html = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
-    expect(html).toContain('Taladro inalámbrico')
-    expect(html).toContain('https://cdn.example/p1.jpg')
-    expect(html).toContain('Variantes')
-    expect(html).toContain('Azul')
-    expect(html).toContain('USD 25.50')
-  })
-})
-
-describe('ProductOverview — bounded presentations (tasks 2.2, 2.3)', () => {
-  it('renders the gallery presentation from the same canonical props with a different DOM structure', () => {
-    const standardHtml = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
-    const galleryHtml = render({
-      product,
-      presentation: 'gallery',
-      selectedVariantId: 'v-blue',
-      formatPrice,
-      onAddToCart: () => {},
-    })
-    expect(galleryHtml).not.toBe(standardHtml)
-    expect(standardHtml).toContain('@container')
-    expect(galleryHtml).not.toContain('@container')
-    expect(galleryHtml).toContain('Taladro inalámbrico')
-    expect(galleryHtml).toContain('USD 25.50')
-  })
-
-  it('omits absent rich sections without empty chrome', () => {
-    const html = render({ product: singleImageProduct, presentation: 'rich', formatPrice })
-    expect(html).not.toContain('Características clave')
-    expect(html).not.toContain('Especificaciones técnicas')
-    expect(html).not.toContain('Resumen')
-  })
-
-  it('renders the rich sections only when the optional data is supplied', () => {
-    const html = render({
-      product,
-      presentation: 'rich',
-      selectedVariantId: 'v-blue',
-      formatPrice,
-      features: ['Batería de larga duración', 'Maletín incluido'],
-      specifications: { Voltaje: '18V', Protección: 'IP54' },
-      reviews: [{ id: 1, author: 'Ana', rating: 5, comment: 'Excelente', date: '2026-01-01' }],
-      rating: { value: 4, count: 3 },
-    })
-    expect(html).toContain('Características clave')
-    expect(html).toContain('Batería de larga duración')
-    expect(html).toContain('Resumen')
-    expect(html).toContain('Especificaciones')
-    expect(html).toContain('Reseñas (1)')
-    expect(html).toContain('Galería')
-  })
-
-  it('renders the specifications section when it is the only rich data', () => {
-    const html = render({
-      product,
-      presentation: 'rich',
-      formatPrice,
-      specifications: { Voltaje: '18V', Protección: 'IP54' },
-    })
-    expect(html).toContain('Especificaciones técnicas')
-    expect(html).toContain('IP54')
-  })
-
-  it('renders the reviews section when it is the only rich data', () => {
-    const html = render({
-      product,
-      presentation: 'rich',
-      formatPrice,
-      reviews: [{ id: 1, author: 'Ana', rating: 5, comment: 'Excelente', date: '2026-01-01' }],
-    })
-    expect(html).toContain('Ana')
-    expect(html).toContain('Excelente')
-  })
-})
-
-describe('ProductOverview — controlled selection and add-to-cart identity (task 2.4)', () => {
-  it('does not default to the first variant and prompts for an explicit selection', () => {
-    const html = render({ product, formatPrice, onAddToCart: () => {} })
-    expect(html).toContain('Selecciona una variante')
-    expect(html).not.toContain('USD 10.00')
-  })
-
-  it('shows the selected non-default variant at its current price', () => {
-    const html = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
-    expect(html).toContain('USD 25.50')
-    expect(html).not.toContain('USD 10.00')
-  })
-
-  it('reports a missing price as unavailable instead of zero', () => {
-    const html = render({ product, selectedVariantId: 'v-noprice', formatPrice })
-    expect(html).toContain('Precio no disponible')
-    expect(html).not.toContain('USD 0')
-  })
-
-  it('preserves a backend-resolved valid zero', () => {
-    const html = render({ product, selectedVariantId: 'v-free', formatPrice })
-    expect(html).toContain('USD 0')
-    expect(html).not.toContain('Precio no disponible')
-  })
-
-  it('enables purchase only for an available, priced, explicitly selected variant', () => {
-    const onlyAvailable: ProductDetailProduct = { ...product, variants: [product.variants[0]] }
-    const enabled = render({
-      product: onlyAvailable,
-      selectedVariantId: 'v-red',
-      formatPrice,
-      onAddToCart: () => {},
-    })
-    expect(enabled).not.toContain('disabled=""')
-
-    const noSelection = render({ product: onlyAvailable, formatPrice, onAddToCart: () => {} })
-    expect(noSelection).toContain('disabled=""')
-  })
-})
-
-describe('ProductOverview — sector-neutral (task 2.5)', () => {
-  it('renders a non-fashion product with no size/color system and derives currency from Money', () => {
-    const electronics: ProductDetailProduct = {
-      id: 'e1',
-      title: 'Laptop Pro 14',
-      description: 'Una laptop',
-      vendor: 'Nimbus',
-      options: [{ id: 'o1', name: 'Capacidad', values: ['256 GB', '512 GB'] }],
-      variants: [
-        {
-          id: 'e-256',
-          title: '256 GB',
-          availableForSale: true,
-          selectedOptions: [{ name: 'Capacidad', value: '256 GB' }],
-          price: { amount: '256.00', currencyCode: 'EUR' },
-        },
-      ],
-      images: [{ url: 'https://cdn.example/e1.jpg', altText: 'e1' }],
-    }
-
-    const html = render({ product: electronics, selectedVariantId: 'e-256', formatPrice })
-    expect(html).toContain('Laptop Pro 14')
-    expect(html).toContain('256 GB')
-    expect(html).toContain('EUR 256.00')
-    expect(html).not.toContain('$')
-    expect(html).not.toContain('Talla')
-  })
-})
-
-describe('ProductOverview — purpose-gated wishlist affordance', () => {
-  const presentations = ['standard', 'gallery', 'rich'] as const
-
-  it('renders the wishlist button only when a toggle handler is wired', () => {
-    for (const presentation of presentations) {
-      const wired = render({
-        product,
-        presentation,
-        selectedVariantId: 'v-blue',
-        formatPrice,
-        onToggleWishlist: () => {},
-      })
-      const unwired = render({ product, presentation, selectedVariantId: 'v-blue', formatPrice })
-
-      expect(wired).toContain('Agregar a favoritos')
-      expect(unwired).not.toContain('Agregar a favoritos')
-      expect(unwired).not.toContain('Quitar de favoritos')
-    }
-  })
-
-  it('reflects the controlled wishlist state in the button label', () => {
-    const html = render({
-      product,
-      selectedVariantId: 'v-blue',
-      formatPrice,
-      isWishlisted: true,
-      onToggleWishlist: () => {},
-    })
-    expect(html).toContain('Quitar de favoritos')
-    expect(html).not.toContain('Agregar a favoritos')
-  })
-})
-
-describe('resolveAddToCartPayload', () => {
-  const variant = product.variants[1]
-
-  it('returns null when no variant is selected (no first-variant shortcut)', () => {
-    expect(resolveAddToCartPayload(null, 2)).toBeNull()
-  })
-
-  it('uses the selected backend variant id and defaults the quantity to 1', () => {
-    expect(resolveAddToCartPayload(variant, undefined)).toEqual({ variantId: 'v-blue', quantity: 1 })
-  })
-
-  it('carries the requested quantity', () => {
-    expect(resolveAddToCartPayload(variant, 3)).toEqual({ variantId: 'v-blue', quantity: 3 })
-  })
-})
-
-describe('variant helpers', () => {
-  it('prefers the variant title', () => {
-    expect(variantLabelOf(product.variants[0])).toBe('Rojo')
-  })
-
-  it('falls back to option values when a variant has no title', () => {
-    expect(variantLabelOf({ ...product.variants[0], title: '' })).toBe('Rojo')
-  })
-
-  it('uses the product images when present and never a fabricated URL', () => {
-    const withImages: ProductDetailProduct = {
-      ...product,
-      images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
-    }
-    expect(galleryImages(withImages, 'FALLBACK')).toEqual(['https://cdn.example/p1.jpg'])
-    expect(galleryImages({ ...product, images: [] }, 'FALLBACK')).toEqual(['FALLBACK'])
-  })
-})