@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/e-commerce/reviews/review-rating-1-review-form.tsx

@@ -1,133 +0,0 @@
-'use client'
-
-import { useState, type FormEvent } from 'react'
-import { Send, Star } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'
-import { Input } from '../../../ui/input'
-import { Label } from '../../../ui/label'
-import { Textarea } from '../../../ui/textarea'
-import { cn } from '../../../lib/utils'
-
-export interface ReviewRating1ReviewFormProps {
-  title: string
-  description?: string
-  nameLabel: string
-  emailLabel: string
-  reviewLabel: string
-  namePlaceholder: string
-  emailPlaceholder: string
-  reviewPlaceholder: string
-  submitButtonText: string
-  submittingButtonText: string
-}
-
-export interface ReviewRating1ReviewFormData {
-  name: string
-  email: string
-  review: string
-  rating: number
-}
-
-interface ReviewRating1ReviewFormPropsInput {
-  form: ReviewRating1ReviewFormProps
-  onSubmitReview?: (data: ReviewRating1ReviewFormData) => void
-}
-
-export function ReviewRating1ReviewForm({ form, onSubmitReview }: ReviewRating1ReviewFormPropsInput) {
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [rating, setRating] = useState<number>(0)
-  const [hoveredStar, setHoveredStar] = useState<number>(0)
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    review: '',
-  })
-
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-    onSubmitReview?.({ ...formData, rating })
-    setRating(0)
-    setFormData({ name: '', email: '', review: '' })
-    setIsSubmitting(false)
-  }
-
-  return (
-    <div className='lg:sticky lg:top-8 lg:h-fit'>
-      <Card>
-        <CardHeader>
-          <CardTitle id='review-form-heading'>{form.title}</CardTitle>
-          {form.description ? <CardDescription>{form.description}</CardDescription> : null}
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className='flex flex-col gap-6'>
-            <div className='flex flex-col gap-2'>
-              <div className='flex gap-1' role='radiogroup' aria-label='Rating'>
-                {[1, 2, 3, 4, 5].map(star => (
-                  <Button
-                    variant='ghost'
-                    key={star}
-                    type='button'
-                    onClick={() => setRating(star)}
-                    onMouseEnter={() => setHoveredStar(star)}
-                    onMouseLeave={() => setHoveredStar(0)}
-                    className='h-9 px-4 py-2 focus-visible:ring-ring cursor-pointer rounded-full !p-1 hover:bg-transparent focus:outline-hidden focus-visible:ring-2'
-                    aria-pressed={rating === star}
-                    aria-label={`Rate ${star} ${star === 1 ? 'star' : 'stars'}`}
-                  >
-                    <Star className={cn('size-6', (hoveredStar || rating) >= star ? 'fill-foreground' : '')} />
-                  </Button>
-                ))}
-              </div>
-            </div>
-
-            <div className='flex flex-col gap-2'>
-              <Label htmlFor='name'>{form.nameLabel}</Label>
-              <Input
-                id='name'
-                value={formData.name}
-                onChange={e => setFormData({ ...formData, name: e.target.value })}
-                placeholder={form.namePlaceholder}
-                required
-                aria-required='true'
-                className='h-9'
-              />
-            </div>
-
-            <div className='flex flex-col gap-2'>
-              <Label htmlFor='email'>{form.emailLabel}</Label>
-              <Input
-                id='email'
-                type='email'
-                value={formData.email}
-                onChange={e => setFormData({ ...formData, email: e.target.value })}
-                placeholder={form.emailPlaceholder}
-                required
-                aria-required='true'
-                className='h-9'
-              />
-            </div>
-
-            <div className='flex flex-col gap-2'>
-              <Label htmlFor='review'>{form.reviewLabel}</Label>
-              <Textarea
-                id='review'
-                value={formData.review}
-                onChange={e => setFormData({ ...formData, review: e.target.value })}
-                placeholder={form.reviewPlaceholder}
-                required
-                aria-required='true'
-              />
-            </div>
-
-            <Button type='submit' className='h-9 px-4 py-2 w-full cursor-pointer' disabled={isSubmitting}>
-              {isSubmitting ? form.submittingButtonText : form.submitButtonText}
-              {!isSubmitting && <Send className='size-4' />}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

package/src/blocks/e-commerce/reviews/review-rating-1.tsx

@@ -1,178 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-import { Star, ThumbsUp, MessageCircle, Calendar } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { ReactionToggle } from '../../shared/reaction-toggle'
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-import { Card, CardContent } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '../../../ui/pagination'
-import {
-  ReviewRating1ReviewForm,
-  type ReviewRating1ReviewFormData,
-  type ReviewRating1ReviewFormProps,
-} from './review-rating-1-review-form'
-
-export interface ReviewRating1Review {
-  id: number
-  userName: string
-  userAvatar?: string
-  date: string
-  rating: number
-  content: string
-  likes?: number
-  comments?: number
-}
-
-export interface ReviewRating1Props {
-  pageTitle: string
-  pageDescription?: string
-  reviews: ReviewRating1Review[]
-  form?: ReviewRating1ReviewFormProps
-  reviewsPerPage?: number
-  onToggleReviewLike?: (review: ReviewRating1Review, liked: boolean) => void
-  onSubmitReview?: (data: ReviewRating1ReviewFormData) => void
-}
-
-export default function ReviewRating1({
-  pageTitle,
-  pageDescription,
-  reviews,
-  form,
-  reviewsPerPage = 2,
-  onToggleReviewLike,
-  onSubmitReview,
-}: ReviewRating1Props) {
-  const [currentPage, setCurrentPage] = useState(1)
-  const [isLiked, setIsLiked] = useState<Record<number, boolean>>({})
-
-  const totalPages = Math.ceil(reviews.length / reviewsPerPage)
-  const currentReviews = useMemo(() => {
-    const startIndex = (currentPage - 1) * reviewsPerPage
-    const endIndex = startIndex + reviewsPerPage
-    return reviews.slice(startIndex, endIndex)
-  }, [currentPage, reviews, reviewsPerPage])
-
-  return (
-    <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8'>
-      <div className='mb-12 text-center'>
-        <h1 className='text-3xl font-bold'>{pageTitle}</h1>
-        {pageDescription ? (
-          <p className='text-muted-foreground mx-auto mt-2 max-w-2xl'>{pageDescription}</p>
-        ) : null}
-      </div>
-
-      <div className='grid grid-cols-1 gap-8 lg:grid-cols-3'>
-        <div className='flex flex-col gap-6 lg:col-span-2'>
-          {currentReviews.map(review => (
-            <Card key={review.id} className='transition-all hover:shadow-md'>
-              <CardContent>
-                <div className='flex items-start justify-between gap-4'>
-                  <div className='flex items-start gap-4'>
-                    <Avatar className='bg-muted size-12'>
-                      <AvatarImage src={review.userAvatar || undefined} alt={`${review.userName}'s avatar`} />
-                      <AvatarFallback>{review.userName.substring(0, 2)}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <h3 className='font-medium'>{review.userName}</h3>
-                      <div className='text-muted-foreground mt-1 flex items-center gap-2 text-sm'>
-                        <div className='flex' aria-label={`Rated ${review.rating} out of 5`}>
-                          {Array(5)
-                            .fill(0)
-                            .map((_, i) => (
-                              <Star
-                                key={i}
-                                className={cn(
-                                  'size-4',
-                                  i < review.rating
-                                    ? 'fill-foreground text-foreground'
-                                    : 'text-foreground fill-transparent'
-                                )}
-                              />
-                            ))}
-                        </div>
-                        <span>•</span>
-                        <time
-                          dateTime={new Date(review.date).toISOString().split('T')[0]}
-                          className='flex items-center'
-                        >
-                          <Calendar className='me-1 size-3' />
-                          {review.date}
-                        </time>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <p className='text-muted-foreground mt-4'>{review.content}</p>
-                <div className='mt-4 flex gap-4'>
-                  <Button
-                    variant='ghost'
-                    size='sm'
-                    onClick={() => {
-                      const next = !isLiked[review.id]
-                      setIsLiked(prev => ({ ...prev, [review.id]: next }))
-                      onToggleReviewLike?.(review, next)
-                    }}
-                    className='h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer'
-                    aria-label={`${isLiked[review.id] ? 'Unlike' : 'Like'} this review`}
-                  >
-                    <ReactionToggle active={!!isLiked[review.id]} icon={ThumbsUp} iconClassName='size-4' activeColorClassName='text-primary' />
-                    <span>{(review.likes ?? 0) + (isLiked[review.id] ? 1 : 0)}</span>
-                  </Button>
-                  <Button
-                    variant='ghost'
-                    size='sm'
-                    className='h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer'
-                    aria-label='View comments'
-                  >
-                    <MessageCircle className='size-4' />
-                    <span>{review.comments}</span>
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-          {totalPages > 1 ? (
-            <Pagination className='mt-6'>
-              <PaginationContent>
-                <PaginationItem>
-                  <PaginationPrevious
-                    onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-                    className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
-                  />
-                </PaginationItem>
-                {Array.from({ length: totalPages }).map((_, i) => (
-                  <PaginationItem key={i}>
-                    <PaginationLink
-                      onClick={() => setCurrentPage(i + 1)}
-                      isActive={currentPage === i + 1}
-                      className='cursor-pointer'
-                    >
-                      {i + 1}
-                    </PaginationLink>
-                  </PaginationItem>
-                ))}
-                <PaginationItem>
-                  <PaginationNext
-                    onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
-                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
-                  />
-                </PaginationItem>
-              </PaginationContent>
-            </Pagination>
-          ) : null}
-        </div>
-
-        {form ? <ReviewRating1ReviewForm form={form} onSubmitReview={onSubmitReview} /> : null}
-      </div>
-    </div>
-  )
-}

package/src/blocks/e-commerce/reviews/review-rating-2.tsx

@@ -1,245 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { Calendar, MessageCircle, Star, ThumbsUp } from 'lucide-react'
-
-import { cn } from '../../../lib/utils'
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-import { Button } from '../../../ui/button'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  type CarouselApi,
-} from '../../../ui/carousel'
-import { Progress } from '../../../ui/progress'
-
-export interface Review {
-  id: string
-  userName: string
-  userAvatar?: string
-  date: string
-  rating: number
-  content: string
-  likes?: number
-  comments?: number
-}
-
-export interface ReviewRating2Props {
-  reviews: Review[]
-  pageTitle?: string
-  pageDescription?: string
-  averageRating?: number
-  totalReviews?: number
-  ratingDistribution?: Record<string, number>
-  basedOnLabel?: string
-  likesLabel?: string
-  commentsLabel?: string
-  onLike?: (review: Review) => void
-  onComment?: (review: Review) => void
-}
-
-/**
- * ReviewRating2 — resumen de valoración (media, estrellas y distribución de
- * notas) junto a un carrusel de reseñas con acciones de "me gusta" y
- * comentarios. 100% prop-driven: ningún contenido demo embebido.
- */
-export function ReviewRating2({
-  reviews,
-  pageTitle,
-  pageDescription,
-  averageRating,
-  totalReviews,
-  ratingDistribution,
-  basedOnLabel = 'Basado en {n} reseñas',
-  likesLabel = 'Me gusta',
-  commentsLabel = 'Comentarios',
-  onLike,
-  onComment,
-}: ReviewRating2Props) {
-  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
-  const [current, setCurrent] = useState<number>(0)
-  const [isLiked, setIsLiked] = useState<Record<string, boolean>>({})
-
-  useEffect(() => {
-    if (!carouselApi) return
-
-    const updateCurrent = () => setCurrent(carouselApi.selectedScrollSnap())
-
-    carouselApi.on('select', updateCurrent)
-    return () => {
-      carouselApi.off('select', updateCurrent)
-    }
-  }, [carouselApi])
-
-  const scrollTo = (index: number) => {
-    if (carouselApi) {
-      carouselApi.scrollTo(index)
-    }
-  }
-
-  const handleLike = (review: Review) => {
-    setIsLiked(prev => ({ ...prev, [review.id]: !prev[review.id] }))
-    onLike?.(review)
-  }
-
-  const formatNumber = (num: number): string => {
-    return num >= 1000 ? `${(num / 1000).toFixed(1)}k` : num.toString()
-  }
-
-  const distributionEntries = Object.entries(ratingDistribution ?? {})
-  const maxCount = Math.max(0, ...distributionEntries.map(([, count]) => count))
-
-  return (
-    <div className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
-      {pageTitle ? (
-        <div className='mb-12 text-center'>
-          <h2 className='mb-3 text-4xl font-bold'>{pageTitle}</h2>
-          {pageDescription ? (
-            <p className='text-muted-foreground mx-auto max-w-2xl'>{pageDescription}</p>
-          ) : null}
-        </div>
-      ) : null}
-
-      {averageRating !== undefined || distributionEntries.length > 0 ? (
-        <div className='mb-12 mt-8 flex flex-col items-center justify-center gap-8 md:flex-row'>
-          {averageRating !== undefined ? (
-            <div className='text-center'>
-              <div className='mb-2 text-6xl font-bold'>{averageRating}</div>
-              <div className='flex justify-center gap-1' aria-label={`${averageRating} de 5 estrellas`}>
-                {Array.from({ length: 5 }).map((_, i) => (
-                  <Star key={i} className={cn('size-5', 'fill-current')} />
-                ))}
-              </div>
-              {totalReviews !== undefined ? (
-                <p className='text-muted-foreground mt-1 text-sm'>
-                  {basedOnLabel.replace('{n}', formatNumber(totalReviews))}
-                </p>
-              ) : null}
-            </div>
-          ) : null}
-
-          {averageRating !== undefined && distributionEntries.length > 0 ? (
-            <div className='bg-border mx-4 hidden h-16 w-px md:block' />
-          ) : null}
-
-          {distributionEntries.length > 0 ? (
-            <div className='flex flex-col gap-1'>
-              {distributionEntries.map(([rating, count]) => {
-                const percentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0
-                return (
-                  <div key={rating} className='flex items-center gap-2'>
-                    <div className='flex flex-1 justify-end gap-1' aria-hidden='true'>
-                      {Array.from({ length: Number(rating) }).map((_, i) => (
-                        <Star key={i} className='size-3 fill-current' />
-                      ))}
-                    </div>
-                    <Progress value={percentage} className='h-2 w-32' />
-                    <span className='text-muted-foreground w-8 text-sm'>{percentage}%</span>
-                  </div>
-                )
-              })}
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-
-      {reviews.length > 0 ? (
-        <div className='relative mx-auto max-w-4xl'>
-          <Carousel
-            setApi={setCarouselApi}
-            className='w-full'
-            opts={{
-              align: 'start',
-              loop: true,
-            }}
-          >
-            <CarouselContent>
-              {reviews.map(review => (
-                <CarouselItem key={review.id}>
-                  <div className='p-6 sm:p-8'>
-                    <div className='flex flex-col gap-4'>
-                      <div className='flex items-start gap-4'>
-                        <Avatar className='bg-muted size-12'>
-                          <AvatarImage src={review.userAvatar || undefined} alt={review.userName} />
-                          <AvatarFallback>{review.userName.substring(0, 2)}</AvatarFallback>
-                        </Avatar>
-                        <div className='flex-1'>
-                          <h3 className='text-lg font-semibold'>{review.userName}</h3>
-                          <div className='mt-1 flex items-center gap-2'>
-                            <div className='flex gap-0.5' aria-label={`${review.rating} de 5 estrellas`}>
-                              {Array.from({ length: review.rating }).map((_, i) => (
-                                <Star key={i} className='size-4 fill-current' />
-                              ))}
-                            </div>
-                            <span className='text-muted-foreground text-sm'>•</span>
-                            <time className='text-muted-foreground flex items-center text-sm'>
-                              <Calendar className='me-1 size-3.5' />
-                              {review.date}
-                            </time>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div>
-                        <p className='text-muted-foreground'>{review.content}</p>
-                        <div className='mt-4 flex gap-4'>
-                          <Button
-                            variant='ghost'
-                            size='sm'
-                            onClick={onLike ? () => handleLike(review) : undefined}
-                            className="h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer"
-                            aria-label={likesLabel}
-                          >
-                            <ThumbsUp
-                              className={cn(
-                                'size-4',
-                                isLiked[review.id] && 'text-primary',
-                              )}
-                            />
-                            {formatNumber((review.likes ?? 0) + (isLiked[review.id] ? 1 : 0))}
-                          </Button>
-                          <Button
-                            variant='ghost'
-                            size='sm'
-                            onClick={onComment ? () => onComment(review) : undefined}
-                            className="h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer"
-                            aria-label={commentsLabel}
-                          >
-                            <MessageCircle className='size-4' />
-                            {formatNumber(review.comments ?? 0)}
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-            <CarouselPrevious />
-            <CarouselNext />
-          </Carousel>
-
-          <div className='flex justify-center gap-2'>
-            {reviews.map((_, i) => (
-              <Button
-                key={i}
-                onClick={() => scrollTo(i)}
-                className={cn(
-                  'mx-1 size-2 cursor-pointer rounded-full p-1 transition-all',
-                  current === i ? 'bg-foreground w-6' : 'bg-muted'
-                )}
-                aria-label={`Ir a la reseña ${i + 1}`}
-                aria-current={current === i ? 'step' : undefined}
-              />
-            ))}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-export default ReviewRating2