@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -1,298 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { SlidersHorizontal } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from '../../../ui/empty'
-
-import { CategoryFilter4ChipRail } from './category-filter-4-chip-rail'
-import { CategoryFilter4Drawer } from './category-filter-4-drawer'
-import { CategoryFilter4Sidebar } from './category-filter-4-sidebar'
-import { CategoryFilter4SortSheet } from './category-filter-4-sort-sheet'
-import { emptyFilters, useCategoryFilter4State } from './category-filter-4-state'
-
-export interface CategoryFilter4SortOption {
-  value: string
-  label: string
-}
-
-export interface CategoryFilter4FacetOption {
-  value: string
-  label: string
-}
-
-export interface CategoryFilter4RangeBand {
-  value: string
-  label: string
-  min: number
-  max: number
-}
-
-export interface CategoryFilter4Facets {
-  sortOptions: CategoryFilter4SortOption[]
-  frameSizes: string[]
-  modelTypes: CategoryFilter4FacetOption[]
-  rangeBands: CategoryFilter4RangeBand[]
-  featureOptions: CategoryFilter4FacetOption[]
-}
-
-export interface CategoryFilter4FilterState {
-  modelTypes: string[]
-  priceMax: number
-  rangeBands: string[]
-  frameSizes: string[]
-  colourways: string[]
-  features: string[]
-}
-
-export interface CategoryFilter4Product {
-  id: string
-  name: string
-  modelType: string
-  price: number
-  rangeKm: number
-  frameSize: string
-  colourway: string
-  features: string[]
-  rating: number
-}
-
-export interface CategoryFilter4Props {
-  products: CategoryFilter4Product[]
-  facets: CategoryFilter4Facets
-  colourNames: Record<string, string>
-  fallbackImage: string
-  maxPrice: number
-  filtersLabel?: string
-  sortLabel?: string
-  sortByLabel?: string
-  modelTypeLabel?: string
-  rangeLabel?: string
-  frameSizeLabel?: string
-  colourLabel?: string
-  featuresLabel?: string
-  resultsCountLabel?: (count: number) => string
-  clearAllLabel?: string
-  showResultsLabel?: (count: number) => string
-  noResultsLabel?: string
-  noResultsTitle?: string
-  noResultsDescription?: string
-  noResultsCtaLabel?: string
-  onFiltersChange?: (filters: CategoryFilter4FilterState) => void
-  onSortChange?: (sort: string) => void
-  onProductSelect?: (product: CategoryFilter4Product) => void
-}
-
-function activeFilterCount(
-  filters: CategoryFilter4FilterState,
-  empty: CategoryFilter4FilterState
-): number {
-  return (
-    filters.modelTypes.length +
-    filters.rangeBands.length +
-    filters.frameSizes.length +
-    filters.colourways.length +
-    filters.features.length +
-    (filters.priceMax < empty.priceMax ? 1 : 0)
-  )
-}
-
-export function CategoryFilter4({
-  products,
-  facets,
-  colourNames,
-  fallbackImage,
-  maxPrice,
-  filtersLabel = 'Filtros',
-  sortLabel = 'Ordenar',
-  sortByLabel = 'Ordenar por',
-  modelTypeLabel = 'Tipo de modelo',
-  rangeLabel = 'Autonomía',
-  frameSizeLabel = 'Talla de cuadro',
-  colourLabel = 'Color',
-  featuresLabel = 'Características',
-  resultsCountLabel = count => `${count} ${count === 1 ? 'producto' : 'productos'}`,
-  clearAllLabel = 'Borrar todos',
-  showResultsLabel = count => `Mostrar ${count} ${count === 1 ? 'producto' : 'productos'}`,
-  noResultsLabel = 'Sin coincidencias',
-  noResultsTitle = 'No hay productos que coincidan con estos filtros',
-  noResultsDescription = 'Prueba a relajar alguno de los filtros aplicados.',
-  noResultsCtaLabel = 'Borrar todos los filtros',
-  onFiltersChange,
-  onSortChange,
-  onProductSelect,
-}: CategoryFilter4Props) {
-  const empty = emptyFilters(maxPrice)
-  const { filters, setFilters, sort, setSort, filtered, countWith } = useCategoryFilter4State(
-    products,
-    facets,
-    maxPrice
-  )
-  const [drawerOpen, setDrawerOpen] = useState(false)
-  const [sortOpen, setSortOpen] = useState(false)
-
-  const handleFiltersChange = (next: CategoryFilter4FilterState) => {
-    setFilters(next)
-    onFiltersChange?.(next)
-  }
-
-  const handleSortChange = (next: string) => {
-    setSort(next)
-    onSortChange?.(next)
-  }
-
-  const count = activeFilterCount(filters, empty)
-  const selectedSortLabel = facets.sortOptions.find(option => option.value === sort)?.label ?? sortByLabel
-
-  return (
-    <div className="w-full">
-      <div className="bg-background/95 sticky top-0 z-10 flex items-center justify-between gap-2 border-b px-4 py-2 backdrop-blur sm:px-6 lg:hidden">
-        <Button variant="outline" size="sm" onClick={() => setDrawerOpen(true)}>
-          <SlidersHorizontal className="size-3.5" />
-          {filtersLabel}
-          {count > 0 ? <Badge className="ml-1 size-4 justify-center rounded-full p-0 text-[10px]">{count}</Badge> : null}
-        </Button>
-        <Button variant="ghost" size="sm" onClick={() => setSortOpen(true)}>
-          {sortLabel}: {selectedSortLabel}
-        </Button>
-        <span aria-live="polite" className="text-muted-foreground text-xs tabular-nums">
-          {resultsCountLabel(filtered.length)}
-        </span>
-      </div>
-
-      <div className="px-4 py-2 sm:px-6 lg:hidden">
-        <CategoryFilter4ChipRail
-          filters={filters}
-          onChange={handleFiltersChange}
-          empty={empty}
-          clearAllLabel={clearAllLabel}
-        />
-      </div>
-
-      <div className="flex gap-8 px-4 py-6 sm:px-6">
-        <div className="hidden lg:block">
-          <CategoryFilter4Sidebar
-            filters={filters}
-            onChange={handleFiltersChange}
-            countWith={countWith}
-            facets={facets}
-            colourNames={colourNames}
-            modelTypeLabel={modelTypeLabel}
-            rangeLabel={rangeLabel}
-            frameSizeLabel={frameSizeLabel}
-            colourLabel={colourLabel}
-            featuresLabel={featuresLabel}
-          />
-        </div>
-
-        <div className="flex-1">
-          <div className="hidden items-center justify-between gap-2 lg:flex">
-            <CategoryFilter4ChipRail
-              filters={filters}
-              onChange={setFilters}
-              empty={empty}
-              clearAllLabel={clearAllLabel}
-            />
-            <span aria-live="polite" className="text-muted-foreground text-xs tabular-nums">
-              {resultsCountLabel(filtered.length)}
-            </span>
-          </div>
-
-          {filtered.length === 0 ? (
-            <Empty className="mt-6">
-              <EmptyHeader>
-                <EmptyTitle>{noResultsTitle}</EmptyTitle>
-                <EmptyDescription>{noResultsDescription}</EmptyDescription>
-              </EmptyHeader>
-              <EmptyContent>
-                <Button size="sm" onClick={() => handleFiltersChange(empty)}>
-                  {noResultsCtaLabel}
-                </Button>
-              </EmptyContent>
-            </Empty>
-          ) : (
-            <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3">
-              {filtered.map(product => {
-                const card = (
-                  <>
-                    {/*
-                      An empty grey square told the reader nothing and made a filtered grid look
-                      broken rather than filtered. The alt is empty on purpose: the name and price
-                      directly beneath already carry everything the picture would say.
-                    */}
-                    <img
-                      src={fallbackImage || undefined}
-                      alt=""
-                      loading="lazy"
-                      decoding="async"
-                      className="bg-muted aspect-square w-full rounded-lg object-cover"
-                    />
-                    <p className="text-sm font-medium">{product.name}</p>
-                    <p className="text-muted-foreground text-xs tabular-nums">
-                      ${product.price.toLocaleString()} · {product.rangeKm} km
-                    </p>
-                  </>
-                )
-
-                return onProductSelect ? (
-                  <button
-                    key={product.id}
-                    type="button"
-                    onClick={() => onProductSelect(product)}
-                    className="flex cursor-pointer flex-col gap-1.5 text-left"
-                  >
-                    {card}
-                  </button>
-                ) : (
-                  <div key={product.id} className="flex flex-col gap-1.5">
-                    {card}
-                  </div>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <CategoryFilter4Drawer
-        open={drawerOpen}
-        onOpenChange={setDrawerOpen}
-        filters={filters}
-        onChange={handleFiltersChange}
-        countWith={countWith}
-        resultCount={filtered.length}
-        empty={empty}
-        facets={facets}
-        colourNames={colourNames}
-        filtersLabel={filtersLabel}
-        modelTypeLabel={modelTypeLabel}
-        rangeLabel={rangeLabel}
-        frameSizeLabel={frameSizeLabel}
-        colourLabel={colourLabel}
-        featuresLabel={featuresLabel}
-        clearAllLabel={clearAllLabel}
-        showResultsLabel={showResultsLabel}
-        noResultsLabel={noResultsLabel}
-        noResultsDescription={noResultsDescription}
-      />
-      <CategoryFilter4SortSheet
-        open={sortOpen}
-        onOpenChange={setSortOpen}
-        sort={sort}
-        onSortChange={handleSortChange}
-        sortOptions={facets.sortOptions}
-        sortByLabel={sortByLabel}
-      />
-    </div>
-  )
-}
-
-export default CategoryFilter4

package/src/blocks/e-commerce/checkout-forms/card-formatting.test.ts

@@ -1,47 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { formatCardNumber, formatExpiryDate } from './card-formatting'
-
-describe('formatCardNumber', () => {
-  it('strips non-digit characters', () => {
-    expect(formatCardNumber('4242 4242 4242 4242')).toBe('4242 4242 4242 4242')
-  })
-
-  it('groups digits in blocks of four', () => {
-    expect(formatCardNumber('4242424242424242')).toBe('4242 4242 4242 4242')
-  })
-
-  it('caps at sixteen digits', () => {
-    expect(formatCardNumber('42424242424242421234')).toBe('4242 4242 4242 4242')
-  })
-
-  it('does not add a trailing group separator', () => {
-    expect(formatCardNumber('42424242')).toBe('4242 4242')
-  })
-
-  it('returns an empty string for no input', () => {
-    expect(formatCardNumber('')).toBe('')
-  })
-})
-
-describe('formatExpiryDate', () => {
-  it('masks two-digit months without a slash', () => {
-    expect(formatExpiryDate('12')).toBe('12')
-  })
-
-  it('masks MM/YY once a third digit is typed', () => {
-    expect(formatExpiryDate('122')).toBe('12/2')
-    expect(formatExpiryDate('1226')).toBe('12/26')
-  })
-
-  it('strips non-digit characters', () => {
-    expect(formatExpiryDate('12/26')).toBe('12/26')
-  })
-
-  it('caps at four digits', () => {
-    expect(formatExpiryDate('12261234')).toBe('12/26')
-  })
-
-  it('returns an empty string for no input', () => {
-    expect(formatExpiryDate('')).toBe('')
-  })
-})

package/src/blocks/e-commerce/checkout-forms/card-formatting.ts

@@ -1,9 +0,0 @@
-export function formatCardNumber(value: string, maxDigits = 16): string {
-  const digits = value.replace(/\D/g, '').slice(0, maxDigits)
-  return digits.replace(/(\d{4})(?=\d)/g, '$1 ')
-}
-
-export function formatExpiryDate(value: string, maxDigits = 4): string {
-  const digits = value.replace(/\D/g, '').slice(0, maxDigits)
-  return digits.length > 2 ? `${digits.slice(0, 2)}/${digits.slice(2)}` : digits
-}

package/src/blocks/e-commerce/checkout-forms/checkout-form-1-contact-step.tsx

@@ -1,96 +0,0 @@
-'use client'
-
-import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type {
-  CheckoutForm1ChangeHandler,
-  CheckoutForm1FieldDescriptions,
-  CheckoutForm1FieldErrors,
-  CheckoutForm1FormData,
-} from './checkout-form-1'
-
-export interface CheckoutForm1ContactStepProps {
-  formData: CheckoutForm1FormData
-  onChange: CheckoutForm1ChangeHandler
-  fieldErrors?: CheckoutForm1FieldErrors
-  fieldDescriptions?: CheckoutForm1FieldDescriptions
-}
-
-export function CheckoutForm1ContactStep({
-  formData,
-  onChange,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutForm1ContactStepProps) {
-  return (
-    <FieldGroup className="grid gap-4">
-      <Field data-invalid={!!fieldErrors?.email?.length}>
-        <FieldLabel htmlFor="checkout-email">Email</FieldLabel>
-        <Input
-          id="checkout-email"
-          type="text"
-          inputMode="email"
-          placeholder="john@example.com"
-          value={formData.email}
-          onChange={(e) => onChange('email', e.target.value)}
-          {...checkoutFieldAria('checkout-email', fieldErrors?.email)}
-        />
-        <CheckoutFieldFeedback
-          id="checkout-email"
-          errors={fieldErrors?.email}
-          description={fieldDescriptions?.email}
-        />
-      </Field>
-      <div className="grid gap-4 md:grid-cols-2">
-        <Field data-invalid={!!fieldErrors?.firstName?.length}>
-          <FieldLabel htmlFor="checkout-first-name">First name</FieldLabel>
-          <Input
-            id="checkout-first-name"
-            placeholder="John"
-            value={formData.firstName}
-            onChange={(e) => onChange('firstName', e.target.value)}
-            {...checkoutFieldAria('checkout-first-name', fieldErrors?.firstName)}
-          />
-          <CheckoutFieldFeedback
-            id="checkout-first-name"
-            errors={fieldErrors?.firstName}
-            description={fieldDescriptions?.firstName}
-          />
-        </Field>
-        <Field data-invalid={!!fieldErrors?.lastName?.length}>
-          <FieldLabel htmlFor="checkout-last-name">Last name</FieldLabel>
-          <Input
-            id="checkout-last-name"
-            placeholder="Doe"
-            value={formData.lastName}
-            onChange={(e) => onChange('lastName', e.target.value)}
-            {...checkoutFieldAria('checkout-last-name', fieldErrors?.lastName)}
-          />
-          <CheckoutFieldFeedback
-            id="checkout-last-name"
-            errors={fieldErrors?.lastName}
-            description={fieldDescriptions?.lastName}
-          />
-        </Field>
-      </div>
-      <Field data-invalid={!!fieldErrors?.phone?.length}>
-        <FieldLabel htmlFor="checkout-phone">Phone (optional)</FieldLabel>
-        <Input
-          id="checkout-phone"
-          type="text"
-          inputMode="tel"
-          placeholder="+1 (555) 000-0000"
-          value={formData.phone}
-          onChange={(e) => onChange('phone', e.target.value)}
-          {...checkoutFieldAria('checkout-phone', fieldErrors?.phone)}
-        />
-        <CheckoutFieldFeedback
-          id="checkout-phone"
-          errors={fieldErrors?.phone}
-          description={fieldDescriptions?.phone}
-        />
-      </Field>
-    </FieldGroup>
-  )
-}