@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/marketing/pricing/pricing-section-1.tsx

@@ -1,94 +0,0 @@
-import { ArrowRight, Check } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-import { Badge } from '../../../ui/badge'
-
-export interface PricingTier {
-  id: string
-  name: string
-  description: string
-  /** Precio sin símbolo de moneda; el símbolo se pasa aparte en `currencySymbol`. */
-  price: string
-  /** Frecuencia de facturación, p. ej. '/mes'. */
-  frequency: string
-  features: string[]
-  popular?: boolean
-}
-
-export interface PricingSection1Props {
-  tiers: PricingTier[]
-  currencySymbol?: string
-  sectionTitle?: string
-  sectionLabel?: string
-  popularBadgeLabel?: string
-  getStartedLabel?: string
-  onSelectTier?: (tier: PricingTier) => void
-}
-
-export function PricingSection1({
-  tiers,
-  currencySymbol = '$',
-  sectionTitle = 'El plan perfecto para tu negocio',
-  sectionLabel = 'Nuestros precios',
-  popularBadgeLabel = 'Popular',
-  getStartedLabel = 'Empezar',
-  onSelectTier,
-}: PricingSection1Props) {
-  return (
-    <section className='py-16' id='pricing'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <header className='mb-12 text-center'>
-          <p className='text-muted-foreground mb-2 text-sm font-medium'>{sectionLabel}</p>
-          <h2 className='text-3xl font-bold text-balance lg:text-5xl'>{sectionTitle}</h2>
-        </header>
-
-        <div className='grid gap-6 lg:grid-cols-3 lg:gap-8'>
-          {tiers.map(tier => (
-            <Card key={tier.id} className={cn('overflow-hidden py-6', { 'shadow-lg': tier.popular })}>
-              <CardHeader className='px-6'>
-                <div className='flex items-center justify-between gap-4'>
-                  <CardTitle className='text-xl font-bold lg:text-2xl'>{tier.name}</CardTitle>
-                  {tier.popular && (
-                    <Badge className='px-2.5 py-0.5 font-semibold rounded-full'>{popularBadgeLabel}</Badge>
-                  )}
-                </div>
-                <p className='text-muted-foreground text-sm'>{tier.description}</p>
-              </CardHeader>
-              <CardContent className='flex flex-col flex-1 px-6'>
-                <div className='mb-6 flex items-baseline gap-2'>
-                  <span className='text-3xl font-bold lg:text-5xl'>
-                    {currencySymbol}
-                    {tier.price}
-                  </span>
-                  <span className='text-muted-foreground text-sm'>{tier.frequency}</span>
-                </div>
-                <ul className='flex flex-col gap-3'>
-                  {tier.features.map(feature => (
-                    <li key={feature} className='flex items-center gap-2'>
-                      <Check className='size-4 shrink-0' />
-                      <span className='text-muted-foreground text-sm'>{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-              </CardContent>
-              <CardFooter className='border-0 bg-transparent px-6 pb-6'>
-                <Button
-                  className='h-10 px-8 w-full cursor-pointer gap-2'
-                  size='lg'
-                  variant={tier.popular ? 'default' : 'outline'}
-                  aria-label={`${getStartedLabel} con ${tier.name}`}
-                  onClick={onSelectTier ? () => onSelectTier(tier) : undefined}
-                >
-                  {getStartedLabel} <ArrowRight />
-                </Button>
-              </CardFooter>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default PricingSection1

package/src/blocks/marketing/statistics/statistic-1.tsx

@@ -1,93 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Badge } from '../../../ui/badge'
-import { Progress } from '../../../ui/progress'
-import { BarChart3 } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-export interface StatisticItem {
-  id: string
-  title: string
-  value: string
-  description: string
-  progress: number
-  progressLabel: string
-  icon: LucideIcon
-}
-
-export interface Statistic1Props {
-  items: StatisticItem[]
-  badge?: string
-  title?: string
-  description?: string
-}
-
-export function Statistic1({ items, badge, title, description }: Statistic1Props) {
-  return (
-    <section className='py-16 md:py-20'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='flex flex-col gap-16'>
-          {(badge || title || description) && (
-            <div className='flex flex-col gap-6 text-center'>
-              {badge && (
-                <Badge
-                  variant='outline'
-                  className='h-auto [&>svg]:size-4! rounded-md inline-flex items-center gap-2 px-4 py-2 text-sm font-medium self-center'
-                >
-                  <BarChart3 />
-                  {badge}
-                </Badge>
-              )}
-              {title && (
-                <h2 className='text-4xl font-bold tracking-tight text-balance lg:text-5xl'>
-                  {title}
-                </h2>
-              )}
-              {description && (
-                <p className='text-muted-foreground mx-auto max-w-2xl text-lg leading-relaxed'>
-                  {description}
-                </p>
-              )}
-            </div>
-          )}
-
-          <div className='grid gap-6 sm:grid-cols-2 md:grid-cols-3'>
-            {items.map(item => (
-              <Card
-                key={item.id}
-                className='group relative gap-2 overflow-hidden py-6 transition-all duration-300 hover:shadow-lg'
-              >
-                <CardHeader className='px-6'>
-                  <div className='flex items-start justify-between'>
-                    <div className='flex-1'>
-                      <CardTitle className='text-muted-foreground text-sm font-medium text-balance'>
-                        {item.title}
-                      </CardTitle>
-                      <div className='mt-2'>
-                        <div className='text-2xl font-bold'>{item.value}</div>
-                      </div>
-                    </div>
-                    <div className='bg-muted rounded-xl p-3'>
-                      <item.icon className='text-muted-foreground size-6' />
-                    </div>
-                  </div>
-                  <p className='text-muted-foreground mt-1 text-xs'>{item.description}</p>
-                </CardHeader>
-                <CardContent className='pt-0 px-6'>
-                  <div className='flex flex-col gap-2'>
-                    <div className='flex items-center justify-between text-xs'>
-                      <span className='text-muted-foreground'>{item.progressLabel}</span>
-                      <span className='font-medium'>{item.progress}%</span>
-                    </div>
-                    <Progress value={item.progress} className='h-2' />
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default Statistic1

package/src/blocks/marketing/testimonials/testimonial-section.test.tsx

@@ -1,171 +0,0 @@
-// @vitest-environment jsdom
-import { renderToStaticMarkup } from 'react-dom/server'
-import { beforeAll, describe, expect, it } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import * as blockExports from '../../../index'
-import { TestimonialSection, type TestimonialSectionProps } from './testimonial-section'
-
-beforeAll(() => {
-  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
-
-  window.matchMedia = (query: string) =>
-    ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: () => {},
-      removeListener: () => {},
-      addEventListener: () => {},
-      removeEventListener: () => {},
-      dispatchEvent: () => true,
-    }) as MediaQueryList
-
-  window.IntersectionObserver = class {
-    disconnect() {}
-
-    observe() {}
-
-    takeRecords() {
-      return []
-    }
-
-    unobserve() {}
-  } as unknown as typeof IntersectionObserver
-
-  window.ResizeObserver = class {
-    disconnect() {}
-
-    observe() {}
-
-    unobserve() {}
-  } as unknown as typeof ResizeObserver
-})
-
-const renderToHtml = (props: TestimonialSectionProps) =>
-  renderToStaticMarkup(<TestimonialSection {...props} />)
-
-describe('TestimonialSection — shared content', () => {
-  it('is the only public testimonial component export', () => {
-    expect(blockExports.TestimonialSection).toBe(TestimonialSection)
-    expect('Testimonial1' in blockExports).toBe(false)
-    expect('Testimonial2' in blockExports).toBe(false)
-  })
-
-  it('renders supplied testimonial identity, quote, and optional attribution', () => {
-    const html = renderToHtml({
-      presentation: 'bento',
-      items: [
-        {
-          id: 't-1',
-          name: 'Rosa Díaz',
-          role: 'Propietaria de taller',
-          avatar: '/rosa.png',
-          content: 'El servicio es excelente.',
-          rating: 4,
-        },
-      ],
-    })
-
-    expect(html).toContain('Rosa Díaz')
-    expect(html).toContain('Propietaria de taller')
-    expect(html).toContain('El servicio es excelente.')
-    expect(html).toContain('aria-label="4 out of 5 stars"')
-    expect(html).not.toContain('src=""')
-  })
-
-  it('does not invent absent attribution or emit an empty image source', () => {
-    const html = renderToHtml({
-      presentation: 'bento',
-      items: [{ id: 't-1', name: 'Rosa Díaz', content: 'El servicio es excelente.' }],
-    })
-
-    expect(html).toContain('Rosa Díaz')
-    expect(html).toContain('El servicio es excelente.')
-    expect(html).not.toContain('src=""')
-    expect(html).not.toContain('rating')
-    expect(html).not.toContain('Propietaria')
-  })
-
-  it('renders no section or controls when the collection is empty', () => {
-    expect(
-      renderToHtml({
-        presentation: 'carousel',
-        items: [],
-        carouselLabels: { previous: 'Prev', next: 'Next', slide: 'Slide {n}' },
-      }),
-    ).toBe('')
-  })
-
-  it('supports host-provided carousel labels', () => {
-    const html = renderToHtml({
-      presentation: 'carousel',
-      items: [{ id: 't-1', name: 'Rosa Díaz', content: 'El servicio es excelente.' }],
-      carouselLabels: {
-        previous: 'Testimonio anterior',
-        next: 'Testimonio siguiente',
-        slide: 'Ir al testimonio {n}',
-      },
-    })
-
-    expect(html).toContain('aria-label="Testimonio anterior"')
-    expect(html).toContain('aria-label="Testimonio siguiente"')
-    expect(html).toContain('aria-label="Ir al testimonio 1"')
-  })
-
-  it.each([1, 2, 3])('renders every bento entry when the collection has %i items', count => {
-    const items = Array.from({ length: count }, (_, index) => ({
-      id: `t-${index + 1}`,
-      name: `Cliente ${index + 1}`,
-      content: `Cita ${index + 1}`,
-    }))
-
-    render(<TestimonialSection presentation='bento' items={items} />)
-
-    for (const item of items) {
-      expect(screen.getByText(item.content)).toBeTruthy()
-    }
-  })
-
-  it('renders every bento entry when the collection has more than four items', () => {
-    const items = Array.from({ length: 6 }, (_, index) => ({
-      id: `t-${index + 1}`,
-      name: `Cliente ${index + 1}`,
-      content: `Cita ${index + 1}`,
-    }))
-
-    render(<TestimonialSection presentation='bento' items={items} />)
-
-    for (const item of items) {
-      expect(screen.getByText(item.content)).toBeTruthy()
-    }
-  })
-
-  it('lets keyboard users select carousel entries with localized controls', async () => {
-    const user = userEvent.setup()
-    render(
-      <TestimonialSection
-        presentation='carousel'
-        items={[
-          { id: 't-1', name: 'Cliente 1', content: 'Cita 1' },
-          { id: 't-2', name: 'Cliente 2', content: 'Cita 2' },
-          { id: 't-3', name: 'Cliente 3', content: 'Cita 3' },
-        ]}
-        carouselLabels={{
-          previous: 'Testimonio anterior',
-          next: 'Testimonio siguiente',
-          slide: 'Ir al testimonio {n}',
-        }}
-      />,
-    )
-
-    const lastSlide = screen.getByRole('button', { name: 'Ir al testimonio 3' })
-    while (document.activeElement !== lastSlide) {
-      await user.tab()
-    }
-    await user.keyboard('{Enter}')
-
-    expect(lastSlide.getAttribute('aria-current')).toBe('true')
-    expect(screen.getByText('Cita 3')).toBeTruthy()
-  })
-})

package/src/blocks/marketing/testimonials/testimonial-section.tsx

@@ -1,237 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { Quote, Star } from 'lucide-react'
-import { cn } from '../../../lib/utils'
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '../../../ui/carousel'
-
-export interface TestimonialItem {
-  id: string
-  name: string
-  content: string
-  role?: string
-  avatar?: string
-  rating?: number
-}
-
-export interface TestimonialCarouselLabels {
-  previous: string
-  next: string
-  slide: string
-}
-
-interface TestimonialSectionBaseProps {
-  items: TestimonialItem[]
-  title?: string
-  description?: string
-  className?: string
-}
-
-export type TestimonialSectionProps = TestimonialSectionBaseProps &
-  (
-    | {
-        presentation: 'carousel'
-        carouselLabels: TestimonialCarouselLabels
-      }
-    | {
-        presentation: 'bento'
-        carouselLabels?: never
-      }
-  )
-
-const bentoGridClasses = [
-  'grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm',
-  'ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm',
-  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
-  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
-]
-
-const contentClasses = ['', 'h-full px-6', 'h-full pt-6 px-6', 'h-full pt-6 px-6']
-const textClasses = ['text-xl text-balance', 'text-base text-balance', 'text-base text-balance', 'text-base text-balance']
-
-function initials(name: string) {
-  return name
-    .split(' ')
-    .map(part => part[0])
-    .join('')
-}
-
-function Rating({ value }: { value: number }) {
-  return (
-    <div className='flex items-center gap-1' aria-label={`${value} out of 5 stars`}>
-      {Array.from({ length: 5 }, (_, index) => (
-        <Star
-          key={index}
-          aria-hidden='true'
-          className={cn('size-4', index < Math.floor(value) ? 'fill-foreground' : 'fill-none')}
-        />
-      ))}
-      <span className='text-muted-foreground ms-2 text-sm'>{value}</span>
-    </div>
-  )
-}
-
-function TestimonialAttribution({ item }: { item: TestimonialItem }) {
-  return (
-    <div className='grid grid-cols-[auto_1fr] items-center gap-3'>
-      <Avatar className='bg-muted size-12'>
-        {item.avatar && <AvatarImage src={item.avatar || undefined} alt={item.name} loading='lazy' />}
-        <AvatarFallback>{initials(item.name)}</AvatarFallback>
-      </Avatar>
-      <div>
-        <cite className='text-sm font-medium not-italic'>{item.name}</cite>
-        {item.role && <span className='text-muted-foreground block text-sm'>{item.role}</span>}
-      </div>
-    </div>
-  )
-}
-
-function BentoPresentation({
-  items,
-  title,
-  description,
-  className,
-}: TestimonialSectionBaseProps) {
-  return (
-    <section className={cn('py-12 md:py-16', className)}>
-      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 md:gap-16 lg:px-8'>
-        {(title || description) && (
-          <header className='relative z-10 mx-auto flex w-full max-w-4xl flex-col gap-6 text-center md:gap-12'>
-            {title && <h2 className='text-4xl font-medium max-lg:text-balance lg:text-5xl'>{title}</h2>}
-            {description && (
-              <p className='text-muted-foreground mx-auto max-w-2xl max-lg:text-balance'>
-                {description}
-              </p>
-            )}
-          </header>
-        )}
-
-        <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2'>
-          {items.map((item, index) => {
-            const tileIndex = index % bentoGridClasses.length
-
-            return (
-              <Card key={item.id} className={bentoGridClasses[tileIndex]}>
-                {tileIndex === 0 && (
-                  <CardHeader className='pb-6'>
-                    <div className='flex items-center justify-start'>
-                      <Quote className='text-muted-foreground/30 size-16 rotate-180' aria-hidden='true' />
-                    </div>
-                  </CardHeader>
-                )}
-                <CardContent className={contentClasses[tileIndex]}>
-                  <blockquote className='grid h-full grid-rows-[1fr_auto] gap-6'>
-                    <p className={textClasses[tileIndex]}>{item.content}</p>
-                    <TestimonialAttribution item={item} />
-                    {item.rating !== undefined && <Rating value={item.rating} />}
-                  </blockquote>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function CarouselPresentation({
-  items,
-  title,
-  description,
-  className,
-  carouselLabels,
-}: TestimonialSectionBaseProps & {
-  carouselLabels: TestimonialCarouselLabels
-}) {
-  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
-  const [selectedSlide, setSelectedSlide] = useState(0)
-
-  useEffect(() => {
-    if (!carouselApi) return
-
-    const updateSelectedSlide = () => setSelectedSlide(carouselApi.selectedScrollSnap())
-    updateSelectedSlide()
-    carouselApi.on('select', updateSelectedSlide)
-    carouselApi.on('reInit', updateSelectedSlide)
-
-    return () => {
-      carouselApi.off('select', updateSelectedSlide)
-      carouselApi.off('reInit', updateSelectedSlide)
-    }
-  }, [carouselApi])
-
-  return (
-    <section className={cn('py-12 lg:py-20', className)}>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        {(title || description) && (
-          <header className='mb-12 text-center md:mb-16'>
-            {title && <h2 className='text-3xl font-bold text-balance md:text-4xl'>{title}</h2>}
-            {description && <p className='text-muted-foreground mx-auto mt-4 max-w-2xl'>{description}</p>}
-          </header>
-        )}
-
-        <Carousel
-          className='w-full'
-          opts={{ align: 'start', loop: true }}
-          setApi={setCarouselApi}
-          aria-label={title}
-        >
-          <CarouselContent className='-ml-1'>
-            {items.map(item => (
-              <CarouselItem key={item.id} className='basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3'>
-                <Card className='h-full overflow-hidden border border-border py-6'>
-                  <CardHeader className='gap-0 px-6'>
-                    <TestimonialAttribution item={item} />
-                  </CardHeader>
-                  <CardContent className='px-6'>
-                    <blockquote className='text-muted-foreground text-base'>{item.content}</blockquote>
-                    {item.rating !== undefined && <Rating value={item.rating} />}
-                  </CardContent>
-                </Card>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious className='cursor-pointer' aria-label={carouselLabels.previous} />
-          <CarouselNext className='cursor-pointer' aria-label={carouselLabels.next} />
-        </Carousel>
-        <div className='mt-6 flex justify-center gap-2'>
-          {items.map((item, index) => (
-            <button
-              key={item.id}
-              type='button'
-              className={cn(
-                'size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-                selectedSlide === index ? 'bg-foreground' : 'bg-muted-foreground/40',
-              )}
-              aria-label={carouselLabels.slide.replace('{n}', String(index + 1))}
-              aria-current={selectedSlide === index ? 'true' : undefined}
-              onClick={() => carouselApi?.scrollTo(index)}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export function TestimonialSection(props: TestimonialSectionProps) {
-  if (props.items.length === 0) return null
-
-  if (props.presentation === 'carousel') {
-    return <CarouselPresentation {...props} />
-  }
-
-  return <BentoPresentation {...props} />
-}
-
-export default TestimonialSection