@thorprovider/blocks 2.0.0 → 3.0.1

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/application/viewport-ownership.test.tsx

@@ -1,41 +0,0 @@
-// @vitest-environment jsdom
-//
-// Invariant: an auth composition renders into the host page and never owns it.
-// A page (route shell, or a template the host owns) supplies the canvas: height,
-// backdrop, centring. Keeping this assertion next to the blocks means a new auth
-// surface cannot quietly reintroduce a second viewport owner.
-import { beforeAll, describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { LoginPage } from './login-forms/login-page';
-import { SignUpPage1 } from './signup-forms/signup-page-1';
-import { ForgotPasswordPage1 } from './password-recovery/forgot-password-page-1';
-import { Verify1 } from './verification/verify-1';
-
-beforeAll(() => {
-  Object.assign(SVGElement.prototype, { getTotalLength: () => 15 });
-});
-
-const PAGE_SHELL = /min-h-dvh|min-h-screen|h-dvh|h-screen|bg-linear-to-br/;
-
-const surfaces = [
-  ['LoginPage (card)', () => <LoginPage presentation="card" />],
-  ['LoginPage (social)', () => <LoginPage presentation="social" />],
-  ['SignUpPage1', () => <SignUpPage1 />],
-  ['ForgotPasswordPage1', () => <ForgotPasswordPage1 />],
-  ['Verify1', () => <Verify1 />],
-] as const;
-
-describe.each(surfaces)('%s', (_name, renderBlock) => {
-  it('does not declare a page landmark', () => {
-    render(renderBlock());
-    expect(screen.queryByRole('main')).toBeNull();
-  });
-
-  it('renders into a neutral content-sized root', () => {
-    const { container } = render(renderBlock());
-    const root = container.firstElementChild;
-    expect(root?.tagName).toBe('DIV');
-    expect(root?.className).not.toMatch(PAGE_SHELL);
-    expect(container.innerHTML).not.toMatch(PAGE_SHELL);
-  });
-});

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

@@ -1,218 +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 {
-  CategoryListingFacetGroup,
-  CategoryListingOption,
-  CategoryListingPriceRange,
-} from './category-listing'
-
-export interface CategoryListingFilterFieldsProps {
-  selectedText?: string
-  clearAllLabel?: string
-  priceRangeTitle?: string
-  priceRange: [number, number]
-  /**
-   * Real provider range only. When absent the price section is not rendered —
-   * the block never fabricates a `0..1000` range.
-   */
-  priceRangeConfig?: CategoryListingPriceRange
-  minLabel?: string
-  maxLabel?: string
-  onPriceChange: (range: [number, number]) => void
-  categoriesTitle?: string
-  categories: CategoryListingOption[]
-  selectedCategories: string[]
-  onCategoryChange: (category: string, checked: boolean) => void
-  collectionsTitle?: string
-  collections: CategoryListingOption[]
-  selectedCollections: string[]
-  onCollectionChange: (collection: string, checked: boolean) => void
-  /**
-   * Generic provider-backed facet groups. A group renders only when it carries
-   * at least one option; the block never invents groups, options or counts.
-   */
-  facets?: CategoryListingFacetGroup[]
-  selectedFacets: Record<string, string[]>
-  onFacetChange: (group: CategoryListingFacetGroup, value: string, checked: boolean) => void
-  onClearAll: () => void
-}
-
-/** Render a count only when it is a real, non-negative, finite number. */
-function readableCount(count: number | undefined): number | undefined {
-  return typeof count === 'number' && Number.isFinite(count) && count >= 0 ? count : undefined
-}
-
-/**
- * The control set shared by both presentations. The presentation only decides
- * where these fields live (persistent sidebar, mobile sheet, or drawer); the
- * fields, their semantics and the emitted values are identical.
- */
-export function CategoryListingFilterFields({
-  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,
-  facets = [],
-  selectedFacets,
-  onFacetChange,
-  onClearAll,
-}: CategoryListingFilterFieldsProps) {
-  const priceInputId = useId()
-  const categoryInputId = useId()
-  const collectionInputId = useId()
-  const facetInputId = useId()
-  const visibleFacets = facets.filter(group => group.options.length > 0)
-
-  return (
-    <>
-      <div className='flex flex-col gap-6'>
-        <div className='mb-3 flex items-center justify-between'>
-          <h2 className='font-semibold'>{selectedText}</h2>
-          <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]}
-                onChange={event => {
-                  const value = parseInt(event.target.value)
-                  if (!Number.isNaN(value) && value >= priceRangeConfig.min && value <= priceRange[1]) {
-                    onPriceChange([value, priceRange[1]])
-                  }
-                }}
-                min={priceRangeConfig.min}
-                max={priceRange[1]}
-                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]}
-                onChange={event => {
-                  const value = parseInt(event.target.value)
-                  if (!Number.isNaN(value) && value >= priceRange[0] && value <= priceRangeConfig.max) {
-                    onPriceChange([priceRange[0], value])
-                  }
-                }}
-                min={priceRange[0]}
-                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}
-
-      {visibleFacets.map(group => {
-        const selected = selectedFacets[group.id] ?? []
-        return (
-          <div key={group.id} className='mt-4 flex flex-col gap-4' data-slot='facet-group' data-facet-id={group.id}>
-            <CardTitle className='font-semibold'>{group.label}</CardTitle>
-            <div className='flex flex-col gap-2'>
-              {group.options.map(option => {
-                const count = readableCount(option.count)
-                return (
-                  <div key={option.value} className='flex items-center gap-2'>
-                    <CheckboxCheck
-                      id={`${facetInputId}-${group.id}-${option.value}`}
-                      checked={selected.includes(option.value)}
-                      onCheckedChange={checked => onFacetChange(group, option.value, checked as boolean)}
-                    />
-                    <label
-                      htmlFor={`${facetInputId}-${group.id}-${option.value}`}
-                      className='flex flex-1 items-center justify-between gap-2 text-sm'
-                    >
-                      <span>{option.label}</span>
-                      {count === undefined ? null : (
-                        <span data-slot='facet-count' className='text-muted-foreground text-xs'>
-                          {count}
-                        </span>
-                      )}
-                    </label>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        )
-      })}
-    </>
-  )
-}
-
-export default CategoryListingFilterFields