@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/filters/dynamic-attribute-filters.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Filter, X, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { AttributeFilter } from "./attribute-filter";
+import type { AttributeDefinition } from "./attribute-filter";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Price range for filtering
+ */
+export interface PriceRange {
+  min: { amount: string; currencyCode: string };
+  max: { amount: string; currencyCode: string };
+}
+
+/**
+ * Category filter option
+ */
+export interface CategoryFilterOption {
+  id: string;
+  name: string;
+  slug: string;
+  productCount: number;
+  level: number;
+  parentId?: string;
+}
+
+/**
+ * Complete filter state
+ */
+export interface AvailableFilters {
+  attributes: AttributeDefinition[];
+  priceRange?: PriceRange;
+  categories?: CategoryFilterOption[];
+  activeFilterCount: number;
+  totalProducts: number;
+}
+
+/**
+ * Applied filter values
+ */
+export interface AppliedFilters {
+  attributes: Record<string, string[]>;
+  ranges: Record<string, { min?: number; max?: number }>;
+  price?: { min?: number; max?: number };
+  categoryId?: string;
+}
+
+export interface DynamicAttributeFiltersProps {
+  filters?: AvailableFilters;
+  appliedFilters: AppliedFilters;
+  onAttributeChange: (attributeId: string, values: string[]) => void;
+  onRangeChange: (attributeId: string, range: { min?: number; max?: number }) => void;
+  onPriceChange?: (range: { min?: number; max?: number }) => void;
+  onClearAll: () => void;
+  isLoading?: boolean;
+  className?: string;
+  /** Whether to show in a collapsible panel (mobile) */
+  collapsible?: boolean;
+}
+
+/**
+ * DynamicAttributeFilters - Wrapper component for all attribute filters
+ *
+ * Features:
+ * - Fetches and displays available filters
+ * - Handles loading and empty states
+ * - Manages applied filters state
+ * - Clear all filters button
+ * - Collapsible on mobile
+ *
+ * Requirements: R35.1, R35.2, R35.3
+ */
+export function DynamicAttributeFilters({
+  filters,
+  appliedFilters,
+  onAttributeChange,
+  onRangeChange,
+  onPriceChange,
+  onClearAll,
+  isLoading,
+  className,
+  collapsible = false,
+}: DynamicAttributeFiltersProps) {
+  const [isExpanded, setIsExpanded] = useState(!collapsible);
+
+  // Calculate active filter count
+  const activeCount =
+    Object.values(appliedFilters.attributes).filter((v) => v.length > 0).length +
+    Object.values(appliedFilters.ranges).filter((r) => r.min !== undefined || r.max !== undefined).length +
+    (appliedFilters.price?.min || appliedFilters.price?.max ? 1 : 0) +
+    (appliedFilters.categoryId ? 1 : 0);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className={cn("p-4", className)}>
+        <div className="flex items-center gap-2">
+          <Spinner className="h-4 w-4" />
+          <span className="text-sm text-muted-foreground">Loading filters...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // No filters available
+  if (!filters || filters.attributes.length === 0) {
+    return null;
+  }
+
+  const header = (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        <Filter className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-medium text-foreground">Filters</h3>
+        {activeCount > 0 && (
+          <span className="flex items-center justify-center h-5 w-5 rounded-full bg-primary text-primary-foreground text-xs">
+            {activeCount}
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {activeCount > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClearAll}
+            className="h-7 text-xs text-muted-foreground hover:text-foreground"
+          >
+            <X className="h-3 w-3 mr-1" />
+            Clear all
+          </Button>
+        )}
+
+        {collapsible && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="h-7"
+          >
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+
+  const filterContent = (
+    <div className="space-y-6 mt-4">
+      {/* Price filter */}
+      {filters.priceRange && onPriceChange && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium text-foreground">Price</h4>
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              placeholder={`Min (${filters.priceRange.min.currencyCode})`}
+              value={appliedFilters.price?.min || ""}
+              onChange={(e) =>
+                onPriceChange({
+                  ...appliedFilters.price,
+                  min: e.target.value ? parseFloat(e.target.value) : undefined,
+                })
+              }
+              className="flex-1 h-8 px-2 text-sm border rounded-md"
+            />
+            <span className="text-muted-foreground">-</span>
+            <input
+              type="number"
+              placeholder={`Max (${filters.priceRange.max.currencyCode})`}
+              value={appliedFilters.price?.max || ""}
+              onChange={(e) =>
+                onPriceChange({
+                  ...appliedFilters.price,
+                  max: e.target.value ? parseFloat(e.target.value) : undefined,
+                })
+              }
+              className="flex-1 h-8 px-2 text-sm border rounded-md"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Attribute filters */}
+      {filters.attributes.map((attribute) => (
+        <AttributeFilter
+          key={attribute.id}
+          attribute={attribute}
+          selectedValues={appliedFilters.attributes[attribute.id] || []}
+          rangeValues={appliedFilters.ranges[attribute.id]}
+          onValueChange={(values) => onAttributeChange(attribute.id, values)}
+          onRangeChange={(range) => onRangeChange(attribute.id, range)}
+        />
+      ))}
+
+      {/* Product count */}
+      <p className="text-xs text-muted-foreground pt-2 border-t">
+        {filters.totalProducts} products
+      </p>
+    </div>
+  );
+
+  return (
+    <div className={cn("", className)}>
+      {header}
+      {(!collapsible || isExpanded) && filterContent}
+    </div>
+  );
+}
+
+export default DynamicAttributeFilters;

package/templates/storefront-nextjs-shadcn/components/filters/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Filter Components
+ *
+ * Dynamic attribute filters for product listings.
+ * Uses the GraphQL availableFilters query for filter options.
+ *
+ * Requirements: R35 - Dynamic Attribute Filters
+ */
+
+// Main wrapper component
+export {
+  DynamicAttributeFilters,
+  type DynamicAttributeFiltersProps,
+  type AvailableFilters,
+  type AppliedFilters,
+  type PriceRange,
+  type CategoryFilterOption,
+} from "./dynamic-attribute-filters";
+
+// Core filter switcher
+export {
+  AttributeFilter,
+  type AttributeFilterProps,
+  type AttributeDefinition,
+  type AttributeFilterValue,
+  type AttributeRangeBounds,
+  type AttributeSwatch,
+  type AttributeType,
+  type Money,
+} from "./attribute-filter";
+
+// Individual filter components
+export { ColorSwatchFilter, type ColorSwatchFilterProps } from "./color-swatch-filter";
+export { CheckboxGroupFilter, type CheckboxGroupFilterProps } from "./checkbox-group-filter";
+export { RangeSliderFilter, type RangeSliderFilterProps } from "./range-slider-filter";
+export { ToggleFilter, type ToggleFilterProps } from "./toggle-filter";

package/templates/storefront-nextjs-shadcn/components/filters/range-slider-filter.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import type {
+  AttributeDefinition,
+  AttributeRangeBounds,
+} from "./attribute-filter";
+
+export interface RangeSliderFilterProps {
+  attribute: AttributeDefinition;
+  bounds: AttributeRangeBounds;
+  values: { min?: number; max?: number };
+  onRangeChange: (range: { min?: number; max?: number }) => void;
+  className?: string;
+  /** Debounce delay in ms */
+  debounceMs?: number;
+}
+
+/**
+ * RangeSliderFilter - Numeric range filter with dual inputs
+ *
+ * Features:
+ * - Min/max input fields
+ * - Debounced value changes
+ * - Currency symbol for CURRENCY type
+ * - Visual range bar
+ *
+ * Requirements: R35.7, R35.14
+ */
+export function RangeSliderFilter({
+  attribute,
+  bounds,
+  values,
+  onRangeChange,
+  className,
+  debounceMs = 300,
+}: RangeSliderFilterProps) {
+  const [localMin, setLocalMin] = useState<string>(
+    values.min?.toString() || ""
+  );
+  const [localMax, setLocalMax] = useState<string>(
+    values.max?.toString() || ""
+  );
+
+  const isCurrency = attribute.type === "CURRENCY";
+  const currencyCode = bounds.currencyCode || "PLN";
+
+  // Update local state when props change
+  useEffect(() => {
+    setLocalMin(values.min?.toString() || "");
+    setLocalMax(values.max?.toString() || "");
+  }, [values.min, values.max]);
+
+  // Debounced change handler
+  const debouncedChange = useCallback(
+    debounce((min: string, max: string) => {
+      const minValue = min ? parseFloat(min) : undefined;
+      const maxValue = max ? parseFloat(max) : undefined;
+      onRangeChange({ min: minValue, max: maxValue });
+    }, debounceMs),
+    [onRangeChange, debounceMs]
+  );
+
+  const handleMinChange = (value: string) => {
+    setLocalMin(value);
+    debouncedChange(value, localMax);
+  };
+
+  const handleMaxChange = (value: string) => {
+    setLocalMax(value);
+    debouncedChange(localMin, value);
+  };
+
+  // Calculate visual progress
+  const boundsMin = bounds.min ?? 0;
+  const boundsMax = bounds.max ?? 1000;
+  const boundsRange = boundsMax - boundsMin;
+  const currentMin = values.min ?? boundsMin;
+  const currentMax = values.max ?? boundsMax;
+  const leftPercent = ((currentMin - boundsMin) / boundsRange) * 100;
+  const rightPercent = ((currentMax - boundsMin) / boundsRange) * 100;
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <h4 className="text-sm font-medium text-foreground">{attribute.name}</h4>
+
+      {/* Visual range bar */}
+      <div className="relative h-2 bg-muted rounded-full">
+        <div
+          className="absolute h-full bg-primary rounded-full"
+          style={{
+            left: `${leftPercent}%`,
+            width: `${rightPercent - leftPercent}%`,
+          }}
+        />
+      </div>
+
+      {/* Min/Max inputs */}
+      <div className="flex items-center gap-2">
+        <div className="flex-1 space-y-1">
+          <label className="text-xs text-muted-foreground">Min</label>
+          <div className="relative">
+            {isCurrency && (
+              <span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+                {currencyCode}
+              </span>
+            )}
+            <Input
+              type="number"
+              value={localMin}
+              onChange={(e) => handleMinChange(e.target.value)}
+              placeholder={boundsMin.toString()}
+              min={boundsMin}
+              max={boundsMax}
+              className={cn(
+                "h-8 text-sm",
+                isCurrency && "pl-10"
+              )}
+            />
+          </div>
+        </div>
+
+        <span className="text-muted-foreground mt-5">-</span>
+
+        <div className="flex-1 space-y-1">
+          <label className="text-xs text-muted-foreground">Max</label>
+          <div className="relative">
+            {isCurrency && (
+              <span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+                {currencyCode}
+              </span>
+            )}
+            <Input
+              type="number"
+              value={localMax}
+              onChange={(e) => handleMaxChange(e.target.value)}
+              placeholder={boundsMax.toString()}
+              min={boundsMin}
+              max={boundsMax}
+              className={cn(
+                "h-8 text-sm",
+                isCurrency && "pl-10"
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Bounds info */}
+      <p className="text-xs text-muted-foreground">
+        Range: {formatValue(boundsMin, isCurrency, currencyCode)} -{" "}
+        {formatValue(boundsMax, isCurrency, currencyCode)}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Format value for display
+ */
+function formatValue(
+  value: number,
+  isCurrency: boolean,
+  currencyCode: string
+): string {
+  if (isCurrency) {
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency: currencyCode,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    }).format(value);
+  }
+  return value.toString();
+}
+
+/**
+ * Simple debounce function
+ */
+function debounce<T extends (...args: any[]) => void>(
+  fn: T,
+  delay: number
+): T {
+  let timeoutId: NodeJS.Timeout;
+  return ((...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  }) as T;
+}
+
+export default RangeSliderFilter;

package/templates/storefront-nextjs-shadcn/components/filters/toggle-filter.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type {
+  AttributeDefinition,
+  AttributeFilterValue,
+} from "./attribute-filter";
+
+export interface ToggleFilterProps {
+  attribute: AttributeDefinition;
+  values: AttributeFilterValue[];
+  selectedValues: string[];
+  onValueChange: (values: string[]) => void;
+  className?: string;
+}
+
+/**
+ * ToggleFilter - Single checkbox toggle for BOOLEAN attributes
+ *
+ * Features:
+ * - Single toggle switch/checkbox
+ * - Shows label and product count
+ * - Typically used for "In Stock", "On Sale", etc.
+ *
+ * Requirements: R35.6
+ */
+export function ToggleFilter({
+  attribute,
+  values,
+  selectedValues,
+  onValueChange,
+  className,
+}: ToggleFilterProps) {
+  // For BOOLEAN attributes, we typically have one or two values: "true" or both "true"/"false"
+  const trueOption = values.find(
+    (v) => v.value === "true" || v.value === "1" || v.value === "yes"
+  );
+
+  if (!trueOption) {
+    // Fallback: use first option
+    const firstOption = values[0];
+    if (!firstOption) return null;
+
+    const isSelected = selectedValues.includes(firstOption.value);
+
+    const handleToggle = () => {
+      if (isSelected) {
+        onValueChange([]);
+      } else {
+        onValueChange([firstOption.value]);
+      }
+    };
+
+    return (
+      <div className={cn("space-y-2", className)}>
+        <label className="flex items-center gap-3 cursor-pointer group">
+          {/* Toggle switch */}
+          <button
+            type="button"
+            role="switch"
+            aria-checked={isSelected}
+            onClick={handleToggle}
+            className={cn(
+              "relative h-5 w-9 rounded-full transition-colors",
+              isSelected ? "bg-primary" : "bg-muted"
+            )}
+          >
+            <span
+              className={cn(
+                "absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform",
+                isSelected && "translate-x-4"
+              )}
+            />
+          </button>
+
+          {/* Label */}
+          <span className="text-sm text-foreground">{attribute.name}</span>
+
+          {/* Product count */}
+          <span className="text-xs text-muted-foreground tabular-nums">
+            ({firstOption.productCount})
+          </span>
+        </label>
+      </div>
+    );
+  }
+
+  const isSelected = selectedValues.includes(trueOption.value);
+
+  const handleToggle = () => {
+    if (isSelected) {
+      onValueChange([]);
+    } else {
+      onValueChange([trueOption.value]);
+    }
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <label className="flex items-center gap-3 cursor-pointer group">
+        {/* Toggle switch */}
+        <button
+          type="button"
+          role="switch"
+          aria-checked={isSelected}
+          onClick={handleToggle}
+          className={cn(
+            "relative h-5 w-9 rounded-full transition-colors",
+            isSelected ? "bg-primary" : "bg-muted"
+          )}
+        >
+          <span
+            className={cn(
+              "absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform",
+              isSelected && "translate-x-4"
+            )}
+          />
+        </button>
+
+        {/* Label */}
+        <span className="text-sm text-foreground">{attribute.name}</span>
+
+        {/* Product count */}
+        <span className="text-xs text-muted-foreground tabular-nums">
+          ({trueOption.productCount})
+        </span>
+      </label>
+    </div>
+  );
+}
+
+export default ToggleFilter;