@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/application/verification/verify-confetti.tsx

@@ -1,192 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useImperativeHandle, useRef } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * @title Confetti burst
- * @description Canvas confetti fired once when something succeeds, with no animation library.
- *
- * Deliberately dependency-free. Every other confetti component reaches for `canvas-confetti`,
- * which means a buyer pasting one block also installs a package. This is roughly a hundred
- * lines of the same physics: throw particles from an origin, apply gravity and drag, spin them,
- * fade them out, stop the loop when the last one dies.
- *
- * The canvas is `pointer-events-none` and `aria-hidden`, so it can never sit between a person
- * and the button underneath it, and a screen reader never announces it. Success has to be
- * stated in text as well; confetti is not a message.
- *
- * Under `prefers-reduced-motion` it renders nothing at all. A burst of moving particles is the
- * exact thing that setting is asking us not to do, and dropping it costs no information.
- */
-const GRAVITY = 0.24
-const DRAG = 0.992
-const TERMINAL_VELOCITY = 7
-const DECAY = 0.0125
-
-/** Bright by default: a monochrome theme would fire grey paper, which reads as dust. */
-const DEFAULT_COLORS = ['#f43f5e', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#14b8a6']
-
-export interface ConfettiHandle {
-  /** Fire a burst now. Repeated calls stack rather than restart. */
-  fire: () => void
-}
-
-export interface ConfettiProps extends Omit<React.ComponentProps<'canvas'>, 'ref'> {
-  /** Flip to true to fire. Firing again needs a flip back to false first. */
-  fire?: boolean
-  /** Particles per burst. */
-  count?: number
-  /** Origin inside the canvas, 0 to 1 on each axis. */
-  origin?: { x: number; y: number }
-  /** How far the burst throws, in canvas pixels per frame. */
-  spread?: number
-  colors?: string[]
-  ref?: React.Ref<ConfettiHandle>
-}
-
-type Particle = {
-  x: number
-  y: number
-  vx: number
-  vy: number
-  size: number
-  tilt: number
-  spin: number
-  life: number
-  color: string
-}
-
-export function Confetti({
-  fire = false,
-  count = 90,
-  origin = { x: 0.5, y: 0.45 },
-  spread = 11,
-  colors = DEFAULT_COLORS,
-  className,
-  ref,
-  ...props
-}: ConfettiProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const particlesRef = useRef<Particle[]>([])
-  const frameRef = useRef<number | null>(null)
-
-  const draw = useCallback(() => {
-    const canvas = canvasRef.current
-    const context = canvas?.getContext('2d')
-
-    if (!canvas || !context) {
-      return
-    }
-
-    const ratio = window.devicePixelRatio || 1
-    context.clearRect(0, 0, canvas.width, canvas.height)
-
-    const alive: Particle[] = []
-
-    for (const particle of particlesRef.current) {
-      particle.vy = Math.min(particle.vy + GRAVITY, TERMINAL_VELOCITY)
-      particle.vx *= DRAG
-      particle.x += particle.vx
-      particle.y += particle.vy
-      particle.tilt += particle.spin
-      particle.life -= DECAY
-
-      if (particle.life <= 0) {
-        continue
-      }
-
-      alive.push(particle)
-
-      context.save()
-      context.translate(particle.x * ratio, particle.y * ratio)
-      context.rotate(particle.tilt)
-      context.globalAlpha = Math.min(1, particle.life)
-      context.fillStyle = particle.color
-      // Scaling the height by the tilt is what sells a flat rectangle as a tumbling
-      // piece of paper. Without it the pieces read as falling dots.
-      context.fillRect(
-        (-particle.size / 2) * ratio,
-        (-particle.size / 4) * ratio,
-        particle.size * ratio,
-        ((particle.size / 2) * Math.abs(Math.cos(particle.tilt)) + 1) * ratio,
-      )
-      context.restore()
-    }
-
-    particlesRef.current = alive
-
-    if (alive.length > 0) {
-      frameRef.current = window.requestAnimationFrame(draw)
-      return
-    }
-
-    frameRef.current = null
-    context.clearRect(0, 0, canvas.width, canvas.height)
-  }, [])
-
-  const start = useCallback(() => {
-    const canvas = canvasRef.current
-
-    if (!canvas || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-      return
-    }
-
-    const ratio = window.devicePixelRatio || 1
-    const { width, height } = canvas.getBoundingClientRect()
-
-    canvas.width = Math.round(width * ratio)
-    canvas.height = Math.round(height * ratio)
-
-    for (let index = 0; index < count; index += 1) {
-      // Biased upward: paper thrown sideways at the floor never looks celebratory.
-      const angle = Math.PI * (1.15 + Math.random() * 0.7)
-      const velocity = spread * (0.45 + Math.random() * 0.55)
-
-      particlesRef.current.push({
-        x: origin.x * width,
-        y: origin.y * height,
-        vx: Math.cos(angle) * velocity,
-        vy: Math.sin(angle) * velocity,
-        size: 6 + Math.random() * 6,
-        tilt: Math.random() * Math.PI,
-        spin: (Math.random() - 0.5) * 0.34,
-        life: 1,
-        color: colors[index % colors.length],
-      })
-    }
-
-    if (frameRef.current === null) {
-      frameRef.current = window.requestAnimationFrame(draw)
-    }
-  }, [colors, count, draw, origin.x, origin.y, spread])
-
-  useImperativeHandle(ref, () => ({ fire: start }), [start])
-
-  useEffect(() => {
-    if (fire) {
-      start()
-    }
-  }, [fire, start])
-
-  useEffect(
-    () => () => {
-      if (frameRef.current !== null) {
-        window.cancelAnimationFrame(frameRef.current)
-      }
-    },
-    [],
-  )
-
-  return (
-    <canvas
-      ref={canvasRef}
-      aria-hidden="true"
-      className={cn('pointer-events-none absolute inset-0 z-10 size-full', className)}
-      {...props}
-    />
-  )
-}
-
-export default Confetti

package/src/blocks/e-commerce/category-filters/category-filter-1.tsx

@@ -1,260 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChevronDown, Search, SlidersHorizontal, X } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../../../ui/dropdown-menu'
-import { Input } from '../../../ui/input'
-import { cn } from '../../../lib/utils'
-
-export interface CategoryFilter1Category {
-  id: string
-  name: string
-  count: number
-}
-
-export interface CategoryFilter1PriceRange {
-  id: string
-  label: string
-  min: number
-  max: number | null
-}
-
-export interface CategoryFilter1SortOption {
-  id: string
-  label: string
-}
-
-export interface CategoryFilter1Filters {
-  category: string
-  priceRange: string
-  sort: string
-  search: string
-}
-
-export interface CategoryFilter1Props {
-  title?: string
-  description?: string
-  categories: CategoryFilter1Category[]
-  priceRanges: CategoryFilter1PriceRange[]
-  sortOptions: CategoryFilter1SortOption[]
-  onFilterChange?: (filters: CategoryFilter1Filters) => void
-}
-
-export function CategoryFilter1({
-  title,
-  description,
-  categories,
-  priceRanges,
-  sortOptions,
-  onFilterChange,
-}: CategoryFilter1Props) {
-  const [selectedCategory, setSelectedCategory] = useState('all')
-  const [selectedPriceRange, setSelectedPriceRange] = useState('all')
-  const [selectedSort, setSelectedSort] = useState('featured')
-  const [searchQuery, setSearchQuery] = useState('')
-
-  const activeFilters: { type: string; label: string; value: string }[] = []
-  if (selectedCategory !== 'all') {
-    const category = categories.find(c => c.id === selectedCategory)
-    if (category) activeFilters.push({ type: 'category', label: category.name, value: selectedCategory })
-  }
-  if (selectedPriceRange !== 'all') {
-    const priceRange = priceRanges.find(p => p.id === selectedPriceRange)
-    if (priceRange) activeFilters.push({ type: 'price', label: priceRange.label, value: selectedPriceRange })
-  }
-  if (searchQuery) {
-    activeFilters.push({ type: 'search', label: `"${searchQuery}"`, value: searchQuery })
-  }
-
-  const selectedCategoryCount = categories.find(c => c.id === selectedCategory)?.count ?? 0
-
-  const clearFilter = (type: string) => {
-    let nextCategory = selectedCategory
-    let nextPrice = selectedPriceRange
-    let nextSearch = searchQuery
-    if (type === 'category') nextCategory = 'all'
-    if (type === 'price') nextPrice = 'all'
-    if (type === 'search') nextSearch = ''
-    setSelectedCategory(nextCategory)
-    setSelectedPriceRange(nextPrice)
-    setSearchQuery(nextSearch)
-    onFilterChange?.({ category: nextCategory, priceRange: nextPrice, sort: selectedSort, search: nextSearch })
-  }
-
-  const clearAllFilters = () => {
-    setSelectedCategory('all')
-    setSelectedPriceRange('all')
-    setSearchQuery('')
-    onFilterChange?.({ category: 'all', priceRange: 'all', sort: selectedSort, search: '' })
-  }
-
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const next = e.target.value
-    setSearchQuery(next)
-    onFilterChange?.({ category: selectedCategory, priceRange: selectedPriceRange, sort: selectedSort, search: next })
-  }
-
-  const handleSortSelect = (id: string) => {
-    setSelectedSort(id)
-    onFilterChange?.({ category: selectedCategory, priceRange: selectedPriceRange, sort: id, search: searchQuery })
-  }
-
-  const handleCategorySelect = (id: string) => {
-    setSelectedCategory(id)
-    onFilterChange?.({ category: id, priceRange: selectedPriceRange, sort: selectedSort, search: searchQuery })
-  }
-
-  const handlePriceRangeSelect = (id: string) => {
-    setSelectedPriceRange(id)
-    onFilterChange?.({ category: selectedCategory, priceRange: id, sort: selectedSort, search: searchQuery })
-  }
-
-  return (
-    <section className="py-8">
-      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="mb-8">
-          {title ? <h2 className="text-3xl font-bold tracking-tight text-balance">{title}</h2> : null}
-          {description ? <p className="text-muted-foreground mt-2">{description}</p> : null}
-          {!description && title ? (
-            <p className="text-muted-foreground mt-2">
-              Browse our collection of {selectedCategoryCount} products
-            </p>
-          ) : null}
-        </div>
-
-        <div className="mb-6 flex flex-col gap-4">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div className="relative max-w-md flex-1">
-              <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
-              <Input
-                placeholder="Search products..."
-                value={searchQuery}
-                onChange={handleSearchChange}
-                className="h-9 pl-10"
-              />
-            </div>
-
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="h-9 w-full cursor-pointer px-4 py-2 sm:w-auto">
-                  <SlidersHorizontal data-icon="inline-start" />
-                  Sort: {sortOptions.find(s => s.id === selectedSort)?.label}
-                  <ChevronDown data-icon="inline-end" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56">
-                {sortOptions.map(option => (
-                  <DropdownMenuItem
-                    key={option.id}
-                    onClick={() => handleSortSelect(option.id)}
-                    className={selectedSort === option.id ? 'bg-accent' : ''}
-                  >
-                    {option.label}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-
-          <div className="flex flex-wrap gap-3">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm" className="h-8 cursor-pointer px-3 text-xs">
-                  Category: {categories.find(c => c.id === selectedCategory)?.name}
-                  <ChevronDown data-icon="inline-end" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56">
-                {categories.map(category => (
-                  <DropdownMenuItem
-                    key={category.id}
-                    onClick={() => handleCategorySelect(category.id)}
-                    className={cn(selectedCategory === category.id && 'bg-accent')}
-                  >
-                    <div className="flex w-full items-center justify-between">
-                      <span>{category.name}</span>
-                      <Badge variant="secondary" className="px-2.5 py-0.5 text-xs font-semibold">
-                        {category.count}
-                      </Badge>
-                    </div>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm" className="h-8 cursor-pointer px-3 text-xs">
-                  Price: {priceRanges.find(p => p.id === selectedPriceRange)?.label}
-                  <ChevronDown data-icon="inline-end" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-48">
-                {priceRanges.map(range => (
-                  <DropdownMenuItem
-                    key={range.id}
-                    onClick={() => handlePriceRangeSelect(range.id)}
-                    className={cn(selectedPriceRange === range.id && 'bg-accent')}
-                  >
-                    {range.label}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-
-          {activeFilters.length > 0 ? (
-            <div className="flex flex-wrap items-center gap-2">
-              <span className="text-muted-foreground text-sm font-medium">Active filters:</span>
-              {activeFilters.map(filter => (
-                <Badge key={filter.type} variant="secondary" className="px-2.5 py-0.5 font-semibold">
-                  {filter.label}
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="!p-1 h-auto cursor-pointer text-inherit"
-                    onClick={() => clearFilter(filter.type)}
-                  >
-                    <X className="size-3" />
-                  </Button>
-                </Badge>
-              ))}
-              <DropdownMenuSeparator className="mx-2" />
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={clearAllFilters}
-                className="h-auto cursor-pointer p-1.5 text-xs text-muted-foreground"
-              >
-                Clear all
-              </Button>
-            </div>
-          ) : null}
-        </div>
-
-        <div className="bg-muted/50 rounded-lg border p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <span className="text-sm font-medium">Showing {selectedCategoryCount} results</span>
-              {searchQuery && <span className="text-muted-foreground text-sm">for &quot;{searchQuery}&quot;</span>}
-            </div>
-            <div className="text-muted-foreground text-xs">
-              Sorted by {sortOptions.find(s => s.id === selectedSort)?.label}
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default CategoryFilter1

package/src/blocks/e-commerce/category-filters/category-filter-2-filter-panel.tsx

@@ -1,222 +0,0 @@
-'use client'
-
-import { useId } from 'react'
-
-import { Button } from '../../../ui/button'
-import { CardTitle } from '../../../ui/card'
-import { Input } from '../../../ui/input'
-import { CheckboxCheck } from '../checkout-forms/checkbox-check'
-
-import type {
-  CategoryFilter2Category,
-  CategoryFilter2Collection,
-  CategoryFilter2Color,
-  CategoryFilter2PriceRange,
-} from './category-filter-2'
-
-interface CategoryFilter2FilterPanelProps {
-  selectedText?: string
-  clearAllLabel?: string
-  priceRangeTitle?: string
-  priceRange: number[]
-  /**
-   * Real backend-provided range only. When absent the price section is not
-   * rendered — the block never fabricates a `0..1000` range (E2 design
-   * Decision 8 / spec "Price controls require real price metadata").
-   */
-  priceRangeConfig?: CategoryFilter2PriceRange
-  minLabel?: string
-  maxLabel?: string
-  onPriceChange: (range: number[]) => void
-  categoriesTitle?: string
-  categories: CategoryFilter2Category[]
-  selectedCategories: string[]
-  onCategoryChange: (category: string, checked: boolean) => void
-  collectionsTitle?: string
-  collections: CategoryFilter2Collection[]
-  selectedCollections: string[]
-  onCollectionChange: (collection: string, checked: boolean) => void
-  sizesTitle?: string
-  sizes: string[]
-  selectedSize: string | null
-  onSizeChange: (size: string | null) => void
-  colorsTitle?: string
-  colors: CategoryFilter2Color[]
-  selectedColor: string | null
-  onColorChange: (color: string | null) => void
-  onClearAll: () => void
-}
-
-export function CategoryFilter2FilterPanel({
-  selectedText = 'Filtros',
-  clearAllLabel = 'Restablecer',
-  priceRangeTitle = 'Rango de precio',
-  priceRange,
-  priceRangeConfig,
-  minLabel = 'Mínimo',
-  maxLabel = 'Máximo',
-  onPriceChange,
-  categoriesTitle = 'Categoría',
-  categories,
-  selectedCategories,
-  onCategoryChange,
-  collectionsTitle = 'Colección',
-  collections,
-  selectedCollections,
-  onCollectionChange,
-  sizesTitle = 'Tamaño',
-  sizes,
-  selectedSize,
-  onSizeChange,
-  colorsTitle = 'Color',
-  colors,
-  selectedColor,
-  onColorChange,
-  onClearAll,
-}: CategoryFilter2FilterPanelProps) {
-  const priceInputId = useId()
-  const categoryInputId = useId()
-  const collectionInputId = useId()
-
-  return (
-    <>
-      <div className="flex flex-col gap-6">
-        <div className="mb-3 flex items-center justify-between">
-          <h1 className="font-semibold">{selectedText}</h1>
-          <Button variant="ghost" size="sm" className="h-8 cursor-pointer px-2 text-xs" onClick={onClearAll}>
-            {clearAllLabel}
-          </Button>
-        </div>
-      </div>
-
-      {priceRangeConfig ? (
-        <div className="mt-4 flex flex-col gap-4">
-          <CardTitle className="font-semibold">{priceRangeTitle}</CardTitle>
-          <div className="flex items-center gap-3">
-            <div className="flex flex-1 flex-col gap-1">
-              <label htmlFor={`${priceInputId}-min`}>{minLabel}</label>
-              <Input
-                id={`${priceInputId}-min`}
-                type="number"
-                value={priceRange[0] ?? priceRangeConfig.min}
-                onChange={e => {
-                  const value = parseInt(e.target.value)
-                  if (!isNaN(value) && value >= priceRangeConfig.min) {
-                    onPriceChange([value, priceRange[1] ?? priceRangeConfig.max])
-                  }
-                }}
-                min={priceRangeConfig.min}
-                max={priceRange[1] ?? priceRangeConfig.max}
-                step={priceRangeConfig.step}
-                className="h-9"
-              />
-            </div>
-            <div className="mt-5 flex-none">-</div>
-            <div className="flex flex-1 flex-col gap-1">
-              <label htmlFor={`${priceInputId}-max`}>{maxLabel}</label>
-              <Input
-                id={`${priceInputId}-max`}
-                type="number"
-                value={priceRange[1] ?? priceRangeConfig.max}
-                onChange={e => {
-                  const value = parseInt(e.target.value)
-                  if (!isNaN(value) && value <= priceRangeConfig.max) {
-                    onPriceChange([priceRange[0] ?? priceRangeConfig.min, value])
-                  }
-                }}
-                min={priceRange[0] ?? priceRangeConfig.min}
-                max={priceRangeConfig.max}
-                step={priceRangeConfig.step}
-                className="h-9"
-              />
-            </div>
-          </div>
-        </div>
-      ) : null}
-
-      {categories.length > 0 ? (
-        <div className="mt-4 flex flex-col gap-4">
-          <CardTitle className="font-semibold">{categoriesTitle}</CardTitle>
-          <div className="flex flex-col gap-2">
-            {categories.map(category => (
-              <div key={category.id} className="flex items-center gap-2">
-                <CheckboxCheck
-                  id={`${categoryInputId}-${category.id}`}
-                  checked={selectedCategories.includes(category.id)}
-                  onCheckedChange={checked => onCategoryChange(category.id, checked as boolean)}
-                />
-                <label htmlFor={`${categoryInputId}-${category.id}`} className="text-sm">
-                  {category.label}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : null}
-
-      {collections.length > 0 ? (
-        <div className="mt-4 flex flex-col gap-4">
-          <CardTitle className="font-semibold">{collectionsTitle}</CardTitle>
-          <div className="flex flex-col gap-2">
-            {collections.map(collection => (
-              <div key={collection.id} className="flex items-center gap-2">
-                <CheckboxCheck
-                  id={`${collectionInputId}-${collection.id}`}
-                  checked={selectedCollections.includes(collection.id)}
-                  onCheckedChange={checked => onCollectionChange(collection.id, checked as boolean)}
-                />
-                <label htmlFor={`${collectionInputId}-${collection.id}`} className="text-sm">
-                  {collection.label}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : null}
-
-      {sizes.length > 0 ? (
-        <div className="mt-4 flex flex-col gap-4">
-          <CardTitle className="font-semibold">{sizesTitle}</CardTitle>
-          <div className="flex flex-wrap gap-2">
-            {sizes.map(size => (
-              <Button
-                key={size}
-                variant={selectedSize === size ? 'default' : 'outline'}
-                size="sm"
-                className="h-8 cursor-pointer px-3 text-xs"
-                onClick={() => onSizeChange(size === selectedSize ? null : size)}
-                aria-pressed={selectedSize === size}
-              >
-                {size}
-              </Button>
-            ))}
-          </div>
-        </div>
-      ) : null}
-
-      {colors.length > 0 ? (
-        <div className="mt-4 flex flex-col gap-4">
-          <CardTitle className="font-semibold">{colorsTitle}</CardTitle>
-          <div className="flex flex-wrap gap-2">
-            {colors.map(color => (
-              <Button
-                key={color.id}
-                onClick={() => onColorChange(color.id === selectedColor ? null : color.id)}
-                className={`relative size-8 cursor-pointer rounded-sm transition-transform duration-200 ${
-                  selectedColor === color.id ? 'ring-primary scale-105 ring-2' : 'hover:ring-foreground/20 hover:ring-1'
-                } ${color.id === 'white' ? 'border-border border' : ''}`}
-                style={{ backgroundColor: color.color }}
-                aria-pressed={selectedColor === color.id}
-                aria-label={color.id}
-              >
-                {selectedColor === color.id && <div className="border-background absolute inset-0 rounded-sm border-2" />}
-              </Button>
-            ))}
-          </div>
-        </div>
-      ) : null}
-    </>
-  )
-}
-
-export default CategoryFilter2FilterPanel