@thorprovider/blocks 1.0.0 → 2.0.0

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

@@ -0,0 +1,218 @@
+'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