@snowcone-app/ui 0.1.43 → 0.2.0

package/src/composed/search/FiltersDrawer.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useRefinementList, useRange, useStats } from "react-instantsearch";
+import { X as LucideX, SlidersHorizontal as LucideSlidersHorizontal } from "lucide-react";
+import { useState, useEffect, type ComponentType } from "react";
+
+// Cast to fix React 19 type compatibility with lucide-react
+type IconProps = { className?: string; size?: number };
+const XIcon = LucideX as ComponentType<IconProps>;
+const SlidersHorizontalIcon = LucideSlidersHorizontal as ComponentType<IconProps>;
+import * as Slider from "@radix-ui/react-slider";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+
+interface FiltersDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function FiltersDrawer({ isOpen, onClose }: FiltersDrawerProps) {
+  const [showCounts, setShowCounts] = useState(false);
+  const { nbHits } = useStats();
+  const containerRef = useFocusTrap(isOpen, onClose);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  // Handle Escape key to close drawer
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={`fixed inset-0 bg-black/50 z-40 transition-opacity ${
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Drawer Panel - Right Side */}
+      <div
+        ref={containerRef}
+        className={`fixed right-0 top-0 bottom-0 w-[min(400px,90vw)] bg-background/85 backdrop-blur-xs z-50 shadow-xl flex flex-col transform transition-transform ${
+          isOpen ? "translate-x-0" : "translate-x-full"
+        }`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="filters-drawer-title"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-4">
+          <h2 id="filters-drawer-title" className="text-xl font-bold">Filters</h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-foreground/5 rounded-full transition-colors"
+            aria-label="Close filters"
+          >
+            <XIcon className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Results Count */}
+        <div className="px-4 pb-4">
+          <p className="text-sm font-caption text-foreground/60" role="status" aria-live="polite">
+            {nbHits.toLocaleString()} {nbHits === 1 ? 'result' : 'results'}
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-4 pb-4">
+          <div className="flex flex-col gap-8">
+            {/* Tags Section */}
+            <TagsSection showCounts={showCounts} setShowCounts={setShowCounts} />
+
+            {/* Price Section */}
+            <PriceSection />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function TagsSection({
+  showCounts,
+  setShowCounts,
+}: {
+  showCounts: boolean;
+  setShowCounts: (show: boolean) => void;
+}) {
+  const { items, refine } = useRefinementList({
+    attribute: "tags",
+    sortBy: ["count:desc", "name:asc"],
+    limit: 100,
+  });
+
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  return (
+    <div className="bg-foreground/5 rounded-lg p-4">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className={`flex items-center justify-between w-full text-left group ${isExpanded ? 'mb-4' : ''}`}
+        aria-expanded={isExpanded}
+        aria-controls="tags-content"
+      >
+        <h3 className="text-base font-semibold text-primary">
+          Tags
+        </h3>
+        <svg
+          className={`w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isExpanded && (
+        <div className="space-y-4" id="tags-content">
+          {/* Tags */}
+          <div className="flex flex-wrap gap-2" role="group" aria-label="Product tags filter">
+            {items.map((item) => (
+              <button
+                key={item.value}
+                onClick={() => refine(item.value)}
+                className={`
+                  inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors
+                  ${
+                    item.isRefined
+                      ? "bg-primary text-on-primary"
+                      : "bg-muted text-muted-foreground hover:bg-muted/80"
+                  }
+                `}
+                aria-label={`${item.isRefined ? 'Remove' : 'Apply'} ${item.label} filter${showCounts ? ` (${item.count} products)` : ''}`}
+                aria-pressed={item.isRefined}
+              >
+                <span aria-hidden="true">{item.label}</span>
+                {showCounts && (
+                  <span className={`text-xs font-caption ${item.isRefined ? "opacity-80" : "opacity-60"}`} aria-hidden="true">
+                    {item.count}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+
+          {/* Show Counts Toggle */}
+          <div className="flex items-center justify-between pt-2">
+            <span className="text-sm font-label text-foreground/60" id="show-counts-label">Show counts</span>
+            <button
+              onClick={() => setShowCounts(!showCounts)}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all ${
+                showCounts ? "bg-primary" : "bg-foreground/20"
+              }`}
+              role="switch"
+              aria-checked={showCounts}
+              aria-labelledby="show-counts-label"
+            >
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-background shadow-sm transition-transform ${
+                  showCounts ? "translate-x-6" : "translate-x-1"
+                }`}
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PriceSection() {
+  const { range, refine, start, canRefine } = useRange({ attribute: "price" });
+
+  const rangeMin = typeof range.min === "number" && isFinite(range.min) ? range.min : 0;
+  const rangeMax = typeof range.max === "number" && isFinite(range.max) ? range.max : 15000;
+
+  const [localRange, setLocalRange] = useState<[number, number]>([
+    typeof start?.[0] === "number" && isFinite(start[0]) ? start[0] : rangeMin,
+    typeof start?.[1] === "number" && isFinite(start[1]) ? start[1] : rangeMax,
+  ]);
+
+  useEffect(() => {
+    if (start && Array.isArray(start)) {
+      setLocalRange([
+        typeof start[0] === "number" && isFinite(start[0]) ? start[0] : rangeMin,
+        typeof start[1] === "number" && isFinite(start[1]) ? start[1] : rangeMax,
+      ]);
+    } else {
+      // Initialize with range min/max when start is not available
+      setLocalRange([rangeMin, rangeMax]);
+    }
+  }, [start, rangeMin, rangeMax]);
+
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  if (!canRefine) {
+    return null;
+  }
+
+  const formatPrice = (price: number) => {
+    if (!isFinite(price)) return "$0";
+    const priceInDollars = price / 100;
+    if (priceInDollars >= 100) {
+      return `$${(priceInDollars / 1000).toFixed(1)}k`;
+    } else if (priceInDollars >= 10) {
+      return `$${priceInDollars.toFixed(0)}`;
+    } else {
+      return `$${priceInDollars.toFixed(2)}`;
+    }
+  };
+
+  return (
+    <div className="bg-foreground/5 rounded-lg p-4">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className={`flex items-center justify-between w-full text-left group ${isExpanded ? 'mb-4' : ''}`}
+        aria-expanded={isExpanded}
+        aria-controls="price-content"
+      >
+        <h3 className="text-base font-semibold text-primary">
+          Price
+        </h3>
+        <svg
+          className={`w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isExpanded && (
+        <div className="space-y-6" id="price-content">
+          {/* Price Display */}
+          <div className="flex items-center justify-between text-sm font-display">
+            <span>{formatPrice(localRange[0])}</span>
+            <span className="text-foreground/70">{formatPrice(localRange[1])}</span>
+          </div>
+
+          {/* Histogram placeholder - simplified version - decorative only */}
+          <div className="relative h-24 flex items-end justify-between gap-0.5 px-1" aria-hidden="true" role="presentation">
+            {/* Simple bar chart representation */}
+            {[60, 40, 80, 50, 60, 30, 20, 15, 10, 5, 30, 20, 15, 10, 5, 3, 3, 60, 40].map((height, i) => {
+              // Calculate if this bar is in the selected range
+              const totalBars = 19;
+              const barPrice = rangeMin + ((rangeMax - rangeMin) / totalBars) * i;
+              const isInRange = barPrice >= localRange[0] && barPrice <= localRange[1];
+
+              return (
+                <div
+                  key={i}
+                  className={`flex-1 rounded-t-sm transition-opacity ${
+                    isInRange ? "bg-foreground" : "bg-foreground/20"
+                  }`}
+                  style={{ height: `${height}%` }}
+                />
+              );
+            })}
+          </div>
+
+          {/* Range Slider - styled like TileCount */}
+          <div style={{ touchAction: 'none' }} className="my-6">
+            <Slider.Root
+              className="relative flex w-full touch-none select-none items-center"
+              value={localRange}
+              onValueChange={(value) => {
+                setLocalRange(value as [number, number]);
+              }}
+              onValueCommit={(value) => {
+                const newRange = value as [number, number];
+                setLocalRange(newRange);
+                refine(newRange);
+              }}
+              min={rangeMin}
+              max={rangeMax}
+              step={1}
+              minStepsBetweenThumbs={1}
+            >
+              <Slider.Track className="relative h-3 w-full grow overflow-hidden rounded-full bg-foreground/20">
+                <Slider.Range className="absolute h-full bg-foreground" />
+              </Slider.Track>
+              <Slider.Thumb
+                className="block h-6 w-6 rounded-full bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:scale-105 border-2 border-primary"
+                style={{
+                  touchAction: 'none',
+                }}
+                aria-label="Minimum price"
+                aria-valuemin={rangeMin}
+                aria-valuemax={rangeMax}
+                aria-valuenow={localRange[0]}
+                aria-valuetext={formatPrice(localRange[0])}
+              />
+              <Slider.Thumb
+                className="block h-6 w-6 rounded-full bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:scale-105 border-2 border-primary"
+                style={{
+                  touchAction: 'none',
+                }}
+                aria-label="Maximum price"
+                aria-valuemin={rangeMin}
+                aria-valuemax={rangeMax}
+                aria-valuenow={localRange[1]}
+                aria-valuetext={formatPrice(localRange[1])}
+              />
+            </Slider.Root>
+          </div>
+
+          {/* Price Inputs */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label htmlFor="price-min" className="text-xs font-label text-foreground/60 mb-1.5 block">Min</label>
+              <input
+                id="price-min"
+                type="text"
+                value={formatPrice(localRange[0])}
+                onChange={(e) => {
+                  const val = parseFloat(e.target.value.replace(/[^0-9.]/g, "")) * 100;
+                  if (!isNaN(val) && val <= localRange[1]) {
+                    setLocalRange([val, localRange[1]]);
+                  }
+                }}
+                onBlur={() => refine([localRange[0], localRange[1]])}
+                className="w-full px-3 py-2 border-2 border-border/30 bg-background rounded-sm text-sm font-medium text-foreground transition-all hover:border-border/60 focus:outline-none focus:border-primary"
+                aria-label="Minimum price"
+              />
+            </div>
+            <div>
+              <label htmlFor="price-max" className="text-xs font-label text-foreground/60 mb-1.5 block">Max</label>
+              <input
+                id="price-max"
+                type="text"
+                value={formatPrice(localRange[1])}
+                onChange={(e) => {
+                  const val = parseFloat(e.target.value.replace(/[^0-9.]/g, "")) * 100;
+                  if (!isNaN(val) && val >= localRange[0]) {
+                    setLocalRange([localRange[0], val]);
+                  }
+                }}
+                onBlur={() => refine([localRange[0], localRange[1]])}
+                className="w-full px-3 py-2 border-2 border-border/30 bg-background rounded-sm text-sm font-medium text-foreground transition-all hover:border-border/60 focus:outline-none focus:border-primary"
+                aria-label="Maximum price"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/composed/search/ProductGrid.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { Hits, useStats, useInstantSearch } from "react-instantsearch";
+import { ProductHitComponent } from "./ProductHit";
+import { useState, useEffect, useCallback } from "react";
+import type { ProductHit } from "./types";
+
+export interface ProductGridProps {
+  /**
+   * Additional CSS classes for the grid container
+   */
+  className?: string;
+
+  /**
+   * Grid column classes (Tailwind responsive grid)
+   */
+  gridClassName?: string;
+
+  /**
+   * ProductCard variant to use for each product
+   */
+  variant?: "default" | "overlay" | "minimal";
+
+  /**
+   * Number of skeleton items to show while loading
+   */
+  skeletonCount?: number;
+}
+
+/**
+ * ProductGridSkeleton - Skeleton placeholder for product grid items
+ */
+function ProductGridSkeletonItem() {
+  return (
+    <div className="aspect-square bg-muted animate-pulse" />
+  );
+}
+
+/**
+ * ProductGrid - Displays search results in a responsive grid
+ *
+ * Must be used within a SearchProvider and Shop context.
+ * Gets the current artwork from useShop() context automatically.
+ * Shows skeleton placeholders while the initial search is loading.
+ *
+ * @example
+ * ```tsx
+ * <Shop>
+ *   <ArtSelector artworks={artworks} />
+ *   <SearchProvider>
+ *     <SearchBox />
+ *     <ProductGrid gridClassName="grid-cols-2 md:grid-cols-4" />
+ *   </SearchProvider>
+ * </Shop>
+ * ```
+ */
+export function ProductGrid({
+  className = "",
+  gridClassName = "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  variant = "overlay",
+  skeletonCount = 10,
+}: ProductGridProps) {
+  const { nbHits } = useStats();
+  const { status, results } = useInstantSearch();
+  const [announcement, setAnnouncement] = useState("");
+
+  // Derive skeleton state directly from results - no need for separate state
+  // Show skeleton only when we have no results yet (initial load)
+  const hitsCount = results?.hits?.length ?? 0;
+  const showSkeleton = hitsCount === 0 && status !== 'error';
+
+  // Announce search results changes to screen readers
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnnouncement(`${nbHits} ${nbHits === 1 ? 'product' : 'products'} found`);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [nbHits]);
+
+  // Memoize the hit component to prevent recreating on every render
+  // This prevents all product images from reloading when anything changes
+  const HitComponent = useCallback(({ hit }: { hit: any }) => (
+    <ProductHitComponent
+      hit={hit as unknown as ProductHit}
+      variant={variant}
+    />
+  ), [variant]);
+
+  return (
+    <div className={className}>
+      {/* Live region for screen reader announcements */}
+      <div className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        {announcement}
+      </div>
+
+      {/* Skeleton Grid - shown during initial load */}
+      {showSkeleton && (
+        <div className={`grid ${gridClassName}`}>
+          {Array.from({ length: skeletonCount }).map((_, i) => (
+            <ProductGridSkeletonItem key={i} />
+          ))}
+        </div>
+      )}
+
+      {/* Product Grid - always rendered but hidden during skeleton */}
+      <div className={showSkeleton ? "hidden" : ""}>
+        <Hits
+          hitComponent={HitComponent}
+          classNames={{
+            list: `grid ${gridClassName} [&>li]:!p-0 [&>li]:!m-0`,
+            item: "",
+            root: "",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/composed/search/ProductHit.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useUiRouter } from "../../lib/router";
+import { Product } from "../../patterns/Product";
+import { ProductCard } from "../ProductCard";
+import { useShop } from "../../patterns/ShopProvider";
+import type { ProductHit } from "./types";
+
+interface ProductHitComponentProps {
+  hit: ProductHit;
+  variant?: "default" | "overlay" | "minimal";
+}
+
+export function ProductHitComponent({
+  hit: product,
+  variant = "overlay",
+}: ProductHitComponentProps) {
+  const router = useUiRouter();
+  const { selectedArtwork: currentArtwork, addProduct } = useShop();
+  const productId = product.id || product.objectID;
+
+  const getClassName = () => {
+    if (variant === "overlay") {
+      return "rounded-none";
+    }
+    if (variant === "minimal") {
+      return ""; // Allow rounded corners for minimal variant
+    }
+    return "";
+  };
+
+  return (
+    <Product
+      productId={productId}
+      productData={product}
+    >
+      <ProductCard
+        variant={variant}
+        showCategory
+        showPrice={variant !== "overlay"}
+        className={getClassName()}
+        onClick={() => {
+          // Cache product data before navigation so PDP can use it instantly
+          addProduct(product);
+
+          const artworkParam = currentArtwork?.src
+            ? `?artwork=${encodeURIComponent(currentArtwork.src)}`
+            : "";
+          router.push(
+            `/products/${productId}${artworkParam}`
+          );
+        }}
+      />
+    </Product>
+  );
+}

package/src/composed/search/SearchBox.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useSearchBox } from "react-instantsearch";
+import { Search, X } from "lucide-react";
+import { useUiRouter, useUiSearchParams } from "../../lib/router";
+import { useEffect, useRef, useState } from "react";
+import { Input } from "../../primitives/input";
+
+export function SearchBox() {
+  const { query, refine, clear } = useSearchBox();
+  const searchParams = useUiSearchParams();
+  const router = useUiRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [showShimmer, setShowShimmer] = useState(false);
+
+  const inputId = 'search-products-input';
+  const descriptionId = 'search-description';
+
+  // Listen for spotlight event (triggered by search icon click)
+  useEffect(() => {
+    const handleSpotlight = () => {
+      inputRef.current?.focus();
+      inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      setShowShimmer(true);
+      setTimeout(() => setShowShimmer(false), 600);
+    };
+
+    window.addEventListener('search-spotlight', handleSpotlight);
+    return () => window.removeEventListener('search-spotlight', handleSpotlight);
+  }, []);
+
+  // Focus search box when navigating from product page
+  useEffect(() => {
+    const shouldFocus = searchParams.get('focus') === 'search';
+    if (shouldFocus && inputRef.current) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+        setShowShimmer(true);
+        setTimeout(() => setShowShimmer(false), 600);
+
+        // Clear the focus parameter from the URL
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete('focus');
+        const newUrl = params.toString() ? `?${params.toString()}` : '/';
+        router.replace(newUrl);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [searchParams, router]);
+
+  return (
+    <form role="search" onSubmit={(e) => e.preventDefault()}>
+      <div className="relative">
+        <Input
+          ref={inputRef}
+          id={inputId}
+          type="search"
+          value={query}
+          onChange={(e) => refine(e.target.value)}
+          placeholder="Search products..."
+          startContent={
+            <Search className="w-5 h-5" strokeWidth={1.5} aria-hidden="true" />
+          }
+          endContent={
+            query ? (
+              <button
+                type="button"
+                onClick={clear}
+                className="hover:text-foreground transition-colors"
+                aria-label="Clear search"
+              >
+                <X className="w-4 h-4" strokeWidth={2} aria-hidden="true" />
+              </button>
+            ) : undefined
+          }
+          aria-label="Search products"
+          aria-describedby={descriptionId}
+          autoComplete="off"
+          aria-autocomplete="list"
+          className="[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
+        />
+        {/* Shimmer effect - overflow-hidden only on shimmer container to not clip input shadow */}
+        {showShimmer && (
+          <div
+            className="absolute inset-0 pointer-events-none rounded-input z-20 overflow-hidden"
+          >
+            <div
+              className="absolute inset-0"
+              style={{
+                background: 'linear-gradient(90deg, transparent 0%, var(--color-primary, #3b82f6) 50%, transparent 100%)',
+                opacity: 0.3,
+                animation: 'searchShimmer 0.6s ease-out forwards',
+              }}
+            />
+          </div>
+        )}
+        <style dangerouslySetInnerHTML={{ __html: `
+          @keyframes searchShimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+          }
+        `}} />
+        <span id={descriptionId} className="sr-only">
+          Search results will update as you type
+        </span>
+      </div>
+    </form>
+  );
+}