@thorprovider/blocks 0.1.3 → 2.0.0

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