@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/category-filters/category-filter-4-chip-rail.tsx

@@ -1,57 +0,0 @@
-'use client'
-
-import { X } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import type { CategoryFilter4FilterState } from './category-filter-4'
-
-interface CategoryFilter4ChipRailProps {
-  filters: CategoryFilter4FilterState
-  onChange: (next: CategoryFilter4FilterState) => void
-  empty: CategoryFilter4FilterState
-  clearAllLabel?: string
-}
-
-export function CategoryFilter4ChipRail({
-  filters,
-  onChange,
-  empty,
-  clearAllLabel = 'Borrar todos',
-}: CategoryFilter4ChipRailProps) {
-  type Chip = { label: string; clear: () => void }
-  const chips: Chip[] = [
-    ...filters.modelTypes.map(v => ({ label: v, clear: () => onChange({ ...filters, modelTypes: filters.modelTypes.filter(x => x !== v) }) })),
-    ...filters.rangeBands.map(v => ({ label: v, clear: () => onChange({ ...filters, rangeBands: filters.rangeBands.filter(x => x !== v) }) })),
-    ...filters.frameSizes.map(v => ({ label: `Talla ${v}`, clear: () => onChange({ ...filters, frameSizes: filters.frameSizes.filter(x => x !== v) }) })),
-    ...filters.colourways.map(v => ({ label: v, clear: () => onChange({ ...filters, colourways: filters.colourways.filter(x => x !== v) }) })),
-    ...filters.features.map(v => ({ label: v, clear: () => onChange({ ...filters, features: filters.features.filter(x => x !== v) }) })),
-  ]
-
-  if (filters.priceMax < empty.priceMax) {
-    chips.push({
-      label: `Menos de $${filters.priceMax.toLocaleString()}`,
-      clear: () => onChange({ ...filters, priceMax: empty.priceMax }),
-    })
-  }
-
-  if (chips.length === 0) return null
-
-  return (
-    <div className="flex items-center gap-1.5 overflow-x-auto pb-1" role="group" aria-label="Filtros aplicados">
-      {chips.map(chip => (
-        <Badge key={chip.label} variant="secondary" className="shrink-0 gap-1">
-          {chip.label}
-          <button type="button" aria-label={`Eliminar filtro: ${chip.label}`} onClick={chip.clear}>
-            <X className="size-3" />
-          </button>
-        </Badge>
-      ))}
-      <Button variant="ghost" size="sm" className="shrink-0" onClick={() => onChange(empty)}>
-        {clearAllLabel}
-      </Button>
-    </div>
-  )
-}
-
-export default CategoryFilter4ChipRail

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

@@ -1,124 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { animate, useReducedMotion } from 'motion/react'
-
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../../ui/drawer'
-import { Button } from '../../../ui/button'
-import type {
-  CategoryFilter4Facets,
-  CategoryFilter4FilterState,
-} from './category-filter-4'
-import { CategoryFilter4Fields } from './category-filter-4-fields'
-
-interface CategoryFilter4DrawerProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  filters: CategoryFilter4FilterState
-  onChange: (next: CategoryFilter4FilterState) => void
-  countWith: (partial: Partial<CategoryFilter4FilterState>) => number
-  resultCount: number
-  empty: CategoryFilter4FilterState
-  facets: CategoryFilter4Facets
-  colourNames: Record<string, string>
-  filtersLabel?: string
-  modelTypeLabel?: string
-  rangeLabel?: string
-  frameSizeLabel?: string
-  colourLabel?: string
-  featuresLabel?: string
-  clearAllLabel?: string
-  showResultsLabel?: (count: number) => string
-  noResultsLabel?: string
-  noResultsDescription?: string
-}
-
-export function CategoryFilter4Drawer({
-  open,
-  onOpenChange,
-  filters,
-  onChange,
-  countWith,
-  resultCount,
-  empty,
-  facets,
-  colourNames,
-  filtersLabel = 'Filtros',
-  modelTypeLabel,
-  rangeLabel,
-  frameSizeLabel,
-  colourLabel,
-  featuresLabel,
-  clearAllLabel = 'Borrar todos',
-  showResultsLabel = count => `Mostrar ${count} ${count === 1 ? 'producto' : 'productos'}`,
-  noResultsLabel = 'Sin coincidencias',
-  noResultsDescription = 'Prueba a relajar alguno de los filtros aplicados.',
-}: CategoryFilter4DrawerProps) {
-  const reduceMotion = useReducedMotion()
-  const [displayCount, setDisplayCount] = useState(resultCount)
-  const prevRef = useRef(resultCount)
-
-  useEffect(() => {
-    if (reduceMotion) {
-      setDisplayCount(resultCount)
-      return
-    }
-    const controls = animate(prevRef.current, resultCount, { duration: 0.3, onUpdate: v => setDisplayCount(Math.round(v)) })
-    prevRef.current = resultCount
-    return () => controls.stop()
-  }, [resultCount, reduceMotion])
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      {/*
-        No height override. `DrawerContent` already ships `h-auto` with a `max-h-[80vh]` cap for
-        a bottom drawer, which is exactly the behaviour wanted: grow to the filters, stop before
-        swallowing the screen. Forcing `h-[88vh]` made it that tall whatever it held, so a short
-        filter set left a half-screen of blank between the last checkbox and the footer.
-
-        `min-h-0` on the scroller because a flex child defaults to `min-height: auto` — it
-        refuses to shrink below its content, so without it a tall filter set pushes the footer
-        off the bottom instead of scrolling inside.
-      */}
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>{filtersLabel}</DrawerTitle>
-        </DrawerHeader>
-        <div className="min-h-0 flex-1 overflow-y-auto px-4">
-          <CategoryFilter4Fields
-            filters={filters}
-            onChange={onChange}
-            countWith={countWith}
-            facets={facets}
-            colourNames={colourNames}
-            modelTypeLabel={modelTypeLabel}
-            rangeLabel={rangeLabel}
-            frameSizeLabel={frameSizeLabel}
-            colourLabel={colourLabel}
-            featuresLabel={featuresLabel}
-          />
-        </div>
-        <div className="flex items-center gap-2 border-t p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
-          <Button variant="ghost" onClick={() => onChange(empty)}>
-            {clearAllLabel}
-          </Button>
-          <Button
-            className="flex-1"
-            disabled={resultCount === 0}
-            aria-describedby={resultCount === 0 ? 'category-filter-4-zero-reason' : undefined}
-            onClick={() => onOpenChange(false)}
-          >
-            {resultCount === 0 ? noResultsLabel : showResultsLabel(displayCount)}
-          </Button>
-        </div>
-        {resultCount === 0 ? (
-          <p id="category-filter-4-zero-reason" className="text-destructive px-4 pb-2 text-xs">
-            {noResultsDescription}
-          </p>
-        ) : null}
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-export default CategoryFilter4Drawer

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

@@ -1,170 +0,0 @@
-'use client'
-
-import { Label } from '../../../ui/label'
-import { CheckboxCheck } from '../checkout-forms/checkbox-check'
-import type {
-  CategoryFilter4Facets,
-  CategoryFilter4FilterState,
-} from './category-filter-4'
-
-interface CategoryFilter4FieldsProps {
-  filters: CategoryFilter4FilterState
-  onChange: (next: CategoryFilter4FilterState) => void
-  countWith: (partial: Partial<CategoryFilter4FilterState>) => number
-  facets: CategoryFilter4Facets
-  colourNames: Record<string, string>
-  modelTypeLabel?: string
-  rangeLabel?: string
-  frameSizeLabel?: string
-  colourLabel?: string
-  featuresLabel?: string
-}
-
-export function CategoryFilter4Fields({
-  filters,
-  onChange,
-  countWith,
-  facets,
-  colourNames,
-  modelTypeLabel = 'Tipo de modelo',
-  rangeLabel = 'Autonomía',
-  frameSizeLabel = 'Talla de cuadro',
-  colourLabel = 'Color',
-  featuresLabel = 'Características',
-}: CategoryFilter4FieldsProps) {
-  function toggle<K extends 'modelTypes' | 'rangeBands' | 'frameSizes' | 'colourways' | 'features'>(
-    key: K,
-    value: string
-  ) {
-    const list = filters[key] as string[]
-    const next = list.includes(value) ? list.filter(v => v !== value) : [...list, value]
-    onChange({ ...filters, [key]: next })
-  }
-
-  const colourways = Object.keys(colourNames)
-
-  return (
-    <div className="flex flex-col gap-6">
-      <fieldset>
-        <legend className="mb-2 text-sm font-medium">{modelTypeLabel}</legend>
-        <div className="flex flex-col gap-2">
-          {facets.modelTypes.map(option => {
-            const count = countWith({
-              modelTypes: filters.modelTypes.includes(option.value)
-                ? filters.modelTypes
-                : [...filters.modelTypes, option.value],
-            })
-            const zero = count === 0 && !filters.modelTypes.includes(option.value)
-            return (
-              <div key={option.value} className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <CheckboxCheck
-                    id={`model-${option.value}`}
-                    checked={filters.modelTypes.includes(option.value)}
-                    disabled={zero}
-                    onCheckedChange={() => toggle('modelTypes', option.value)}
-                  />
-                  <Label htmlFor={`model-${option.value}`} className="font-normal">
-                    {option.label}
-                  </Label>
-                </div>
-                <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
-              </div>
-            )
-          })}
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend className="mb-2 text-sm font-medium">{rangeLabel}</legend>
-        <div className="flex flex-col gap-2">
-          {facets.rangeBands.map(band => {
-            const count = countWith({
-              rangeBands: filters.rangeBands.includes(band.value)
-                ? filters.rangeBands
-                : [...filters.rangeBands, band.value],
-            })
-            const zero = count === 0 && !filters.rangeBands.includes(band.value)
-            return (
-              <div key={band.value} className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <CheckboxCheck
-                    id={`range-${band.value}`}
-                    checked={filters.rangeBands.includes(band.value)}
-                    disabled={zero}
-                    onCheckedChange={() => toggle('rangeBands', band.value)}
-                  />
-                  <Label htmlFor={`range-${band.value}`} className="font-normal">
-                    {band.label}
-                  </Label>
-                </div>
-                <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
-              </div>
-            )
-          })}
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend className="mb-2 text-sm font-medium">{frameSizeLabel}</legend>
-        <div className="flex flex-wrap gap-2">
-          {facets.frameSizes.map(size => {
-            const active = filters.frameSizes.includes(size)
-            return (
-              <button
-                key={size}
-                type="button"
-                aria-pressed={active}
-                onClick={() => toggle('frameSizes', size)}
-                className="focus-visible:ring-ring/50 min-h-11 min-w-11 rounded-full border px-3 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground border-input hover:bg-accent/50"
-              >
-                {size}
-              </button>
-            )
-          })}
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend className="mb-2 text-sm font-medium">{colourLabel}</legend>
-        <div className="flex flex-wrap gap-2">
-          {colourways.map(colour => {
-            const active = filters.colourways.includes(colour)
-            return (
-              <button
-                key={colour}
-                type="button"
-                aria-pressed={active}
-                onClick={() => toggle('colourways', colour)}
-                className="focus-visible:ring-ring/50 flex min-h-11 items-center gap-1.5 rounded-full border px-3 text-sm transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none aria-pressed:border-primary aria-pressed:bg-primary/10 border-input hover:bg-accent/50"
-              >
-                <span aria-hidden="true" className="bg-muted-foreground/30 size-3 rounded-full" />
-                {colourNames[colour]}
-              </button>
-            )
-          })}
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend className="mb-2 text-sm font-medium">{featuresLabel}</legend>
-        <div className="flex flex-col gap-2">
-          {facets.featureOptions.map(option => (
-            <div key={option.value} className="flex items-center gap-2">
-              <CheckboxCheck
-                id={`feature-${option.value}`}
-                checked={filters.features.includes(option.value)}
-                onCheckedChange={() => toggle('features', option.value)}
-              />
-              <Label htmlFor={`feature-${option.value}`} className="font-normal">
-                {option.label}
-              </Label>
-            </div>
-          ))}
-        </div>
-      </fieldset>
-    </div>
-  )
-}
-
-export default CategoryFilter4Fields

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

@@ -1,52 +0,0 @@
-'use client'
-
-import type {
-  CategoryFilter4Facets,
-  CategoryFilter4FilterState,
-} from './category-filter-4'
-import { CategoryFilter4Fields } from './category-filter-4-fields'
-
-interface CategoryFilter4SidebarProps {
-  filters: CategoryFilter4FilterState
-  onChange: (next: CategoryFilter4FilterState) => void
-  countWith: (partial: Partial<CategoryFilter4FilterState>) => number
-  facets: CategoryFilter4Facets
-  colourNames: Record<string, string>
-  modelTypeLabel?: string
-  rangeLabel?: string
-  frameSizeLabel?: string
-  colourLabel?: string
-  featuresLabel?: string
-}
-
-export function CategoryFilter4Sidebar({
-  filters,
-  onChange,
-  countWith,
-  facets,
-  colourNames,
-  modelTypeLabel,
-  rangeLabel,
-  frameSizeLabel,
-  colourLabel,
-  featuresLabel,
-}: CategoryFilter4SidebarProps) {
-  return (
-    <aside className="w-70 shrink-0">
-      <CategoryFilter4Fields
-        filters={filters}
-        onChange={onChange}
-        countWith={countWith}
-        facets={facets}
-        colourNames={colourNames}
-        modelTypeLabel={modelTypeLabel}
-        rangeLabel={rangeLabel}
-        frameSizeLabel={frameSizeLabel}
-        colourLabel={colourLabel}
-        featuresLabel={featuresLabel}
-      />
-    </aside>
-  )
-}
-
-export default CategoryFilter4Sidebar

package/src/blocks/e-commerce/category-filters/category-filter-4-sort-sheet.tsx

@@ -1,57 +0,0 @@
-'use client'
-
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../../ui/drawer'
-import { Label } from '../../../ui/label'
-import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
-import type { CategoryFilter4SortOption } from './category-filter-4'
-
-interface CategoryFilter4SortSheetProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  sort: string
-  onSortChange: (value: string) => void
-  sortOptions: CategoryFilter4SortOption[]
-  sortByLabel?: string
-}
-
-export function CategoryFilter4SortSheet({
-  open,
-  onOpenChange,
-  sort,
-  onSortChange,
-  sortOptions,
-  sortByLabel = 'Ordenar por',
-}: CategoryFilter4SortSheetProps) {
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>{sortByLabel}</DrawerTitle>
-        </DrawerHeader>
-        <div className="px-4 pb-6">
-          <RadioGroup
-            value={sort}
-            onValueChange={value => {
-              if (typeof value === 'string') {
-                onSortChange(value)
-                onOpenChange(false)
-              }
-            }}
-            className="gap-3"
-          >
-            {sortOptions.map(option => (
-              <div key={option.value} className="flex items-center gap-2">
-                <RadioGroupItem value={option.value} id={`sort-${option.value}`} />
-                <Label htmlFor={`sort-${option.value}`} className="min-h-11 font-normal">
-                  {option.label}
-                </Label>
-              </div>
-            ))}
-          </RadioGroup>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-export default CategoryFilter4SortSheet

package/src/blocks/e-commerce/category-filters/category-filter-4-state.ts

@@ -1,68 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-import type {
-  CategoryFilter4Facets,
-  CategoryFilter4FilterState,
-  CategoryFilter4Product,
-  CategoryFilter4RangeBand,
-} from './category-filter-4'
-
-export function emptyFilters(maxPrice: number): CategoryFilter4FilterState {
-  return {
-    modelTypes: [],
-    priceMax: maxPrice,
-    rangeBands: [],
-    frameSizes: [],
-    colourways: [],
-    features: [],
-  }
-}
-
-function matchesFilters(
-  product: CategoryFilter4Product,
-  filters: CategoryFilter4FilterState,
-  rangeBands: CategoryFilter4RangeBand[]
-): boolean {
-  if (filters.modelTypes.length > 0 && !filters.modelTypes.includes(product.modelType)) return false
-  if (product.price > filters.priceMax) return false
-  if (filters.rangeBands.length > 0) {
-    const inBand = filters.rangeBands.some(value => {
-      const band = rangeBands.find(b => b.value === value)
-      return band && product.rangeKm >= band.min && product.rangeKm < band.max
-    })
-    if (!inBand) return false
-  }
-  if (filters.frameSizes.length > 0 && !filters.frameSizes.includes(product.frameSize)) return false
-  if (filters.colourways.length > 0 && !filters.colourways.includes(product.colourway)) return false
-  if (filters.features.length > 0 && !filters.features.every(f => product.features.includes(f))) return false
-  return true
-}
-
-/** The shared filter hook — counts are derived from the catalogue by this
- * predicate, never typed, so an option count can never disagree with the grid. */
-export function useCategoryFilter4State(
-  products: CategoryFilter4Product[],
-  facets: CategoryFilter4Facets,
-  maxPrice: number
-) {
-  const [filters, setFilters] = useState<CategoryFilter4FilterState>(() => emptyFilters(maxPrice))
-  const [sort, setSort] = useState(() => facets.sortOptions[0]?.value ?? 'newest')
-
-  const filtered = useMemo(() => {
-    const matches = products.filter(product => matchesFilters(product, filters, facets.rangeBands))
-    const sorted = [...matches]
-    if (sort === 'price-asc') sorted.sort((a, b) => a.price - b.price)
-    if (sort === 'price-desc') sorted.sort((a, b) => b.price - a.price)
-    if (sort === 'range') sorted.sort((a, b) => b.rangeKm - a.rangeKm)
-    if (sort === 'rating') sorted.sort((a, b) => b.rating - a.rating)
-    return sorted
-  }, [products, filters, sort, facets.rangeBands])
-
-  function countWith(partial: Partial<CategoryFilter4FilterState>): number {
-    const next = { ...filters, ...partial }
-    return products.filter(product => matchesFilters(product, next, facets.rangeBands)).length
-  }
-
-  return { filters, setFilters, sort, setSort, filtered, countWith }
-}