@doswiftly/cli 0.1.1

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

@@ -0,0 +1,153 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { ColorSwatchFilter } from "./color-swatch-filter";
+import { CheckboxGroupFilter } from "./checkbox-group-filter";
+import { RangeSliderFilter } from "./range-slider-filter";
+import { ToggleFilter } from "./toggle-filter";
+
+/**
+ * Types matching GraphQL schema
+ */
+export type AttributeType =
+  | "TEXT"
+  | "TEXTAREA"
+  | "SELECT"
+  | "CHECKBOX"
+  | "RADIO"
+  | "IMAGE"
+  | "FILE"
+  | "NUMBER"
+  | "CURRENCY"
+  | "DATE"
+  | "BOOLEAN"
+  | "COLOR";
+
+export interface AttributeSwatch {
+  colorHex?: string;
+  imageUrl?: string;
+}
+
+export interface Money {
+  amount: string;
+  currencyCode: string;
+}
+
+export interface AttributeFilterValue {
+  id: string;
+  value: string;
+  label: string;
+  productCount: number;
+  swatch?: AttributeSwatch;
+  priceModifier?: Money;
+  sortOrder: number;
+}
+
+export interface AttributeRangeBounds {
+  min?: number;
+  max?: number;
+  currencyCode?: string;
+}
+
+export interface AttributeDefinition {
+  id: string;
+  name: string;
+  handle: string;
+  type: AttributeType;
+  isFilterable: boolean;
+  isVisible: boolean;
+  displayOrder: number;
+  filterValues?: AttributeFilterValue[];
+  rangeBounds?: AttributeRangeBounds;
+}
+
+export interface AttributeFilterProps {
+  attribute: AttributeDefinition;
+  selectedValues: string[];
+  rangeValues?: { min?: number; max?: number };
+  onValueChange: (values: string[]) => void;
+  onRangeChange?: (range: { min?: number; max?: number }) => void;
+  className?: string;
+}
+
+/**
+ * AttributeFilter - Component switcher for different attribute types
+ *
+ * Renders the appropriate filter UI based on attribute type:
+ * - COLOR -> ColorSwatchFilter
+ * - SELECT, RADIO, CHECKBOX -> CheckboxGroupFilter
+ * - BOOLEAN -> ToggleFilter
+ * - NUMBER, CURRENCY -> RangeSliderFilter
+ *
+ * Requirements: R35.4, R35.5, R35.6, R35.7, R35.8
+ */
+export function AttributeFilter({
+  attribute,
+  selectedValues,
+  rangeValues,
+  onValueChange,
+  onRangeChange,
+  className,
+}: AttributeFilterProps) {
+  const { type, filterValues, rangeBounds } = attribute;
+
+  // COLOR type: render swatch filter
+  if (type === "COLOR" && filterValues) {
+    return (
+      <ColorSwatchFilter
+        attribute={attribute}
+        values={filterValues}
+        selectedValues={selectedValues}
+        onValueChange={onValueChange}
+        className={className}
+      />
+    );
+  }
+
+  // BOOLEAN type: render toggle filter
+  if (type === "BOOLEAN" && filterValues) {
+    return (
+      <ToggleFilter
+        attribute={attribute}
+        values={filterValues}
+        selectedValues={selectedValues}
+        onValueChange={onValueChange}
+        className={className}
+      />
+    );
+  }
+
+  // NUMBER, CURRENCY types: render range slider
+  if ((type === "NUMBER" || type === "CURRENCY") && rangeBounds && onRangeChange) {
+    return (
+      <RangeSliderFilter
+        attribute={attribute}
+        bounds={rangeBounds}
+        values={rangeValues || {}}
+        onRangeChange={onRangeChange}
+        className={className}
+      />
+    );
+  }
+
+  // SELECT, RADIO, CHECKBOX types: render checkbox group
+  if (
+    (type === "SELECT" || type === "RADIO" || type === "CHECKBOX") &&
+    filterValues
+  ) {
+    return (
+      <CheckboxGroupFilter
+        attribute={attribute}
+        values={filterValues}
+        selectedValues={selectedValues}
+        onValueChange={onValueChange}
+        className={className}
+      />
+    );
+  }
+
+  // TEXT, TEXTAREA, etc: not typically used for filtering
+  return null;
+}
+
+export default AttributeFilter;

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

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type {
+  AttributeDefinition,
+  AttributeFilterValue,
+} from "./attribute-filter";
+
+export interface CheckboxGroupFilterProps {
+  attribute: AttributeDefinition;
+  values: AttributeFilterValue[];
+  selectedValues: string[];
+  onValueChange: (values: string[]) => void;
+  className?: string;
+  /** Maximum items to show before "Show more" */
+  maxVisible?: number;
+}
+
+/**
+ * CheckboxGroupFilter - Multi-select checkbox list filter
+ *
+ * Features:
+ * - Multi-select checkbox list
+ * - Shows product count per option
+ * - Collapsible with "Show more" for long lists
+ * - Price modifier display
+ *
+ * Requirements: R35.4, R35.19
+ */
+export function CheckboxGroupFilter({
+  attribute,
+  values,
+  selectedValues,
+  onValueChange,
+  className,
+  maxVisible = 6,
+}: CheckboxGroupFilterProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleToggle = (value: string) => {
+    if (selectedValues.includes(value)) {
+      onValueChange(selectedValues.filter((v) => v !== value));
+    } else {
+      onValueChange([...selectedValues, value]);
+    }
+  };
+
+  const visibleValues = isExpanded ? values : values.slice(0, maxVisible);
+  const hasMore = values.length > maxVisible;
+  const hiddenCount = values.length - maxVisible;
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <h4 className="text-sm font-medium text-foreground">{attribute.name}</h4>
+
+      <div className="space-y-2">
+        {visibleValues.map((option) => {
+          const isSelected = selectedValues.includes(option.value);
+          const hasPriceModifier = option.priceModifier;
+
+          return (
+            <label
+              key={option.id}
+              className={cn(
+                "flex items-center gap-3 cursor-pointer group",
+                "py-1 px-2 -mx-2 rounded-md transition-colors",
+                "hover:bg-muted/50"
+              )}
+            >
+              {/* Custom checkbox */}
+              <div
+                className={cn(
+                  "h-4 w-4 rounded border-2 flex items-center justify-center transition-colors",
+                  isSelected
+                    ? "bg-primary border-primary"
+                    : "border-muted-foreground/30 group-hover:border-muted-foreground/50"
+                )}
+              >
+                {isSelected && (
+                  <svg
+                    className="h-3 w-3 text-primary-foreground"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={3}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                )}
+              </div>
+              <input
+                type="checkbox"
+                checked={isSelected}
+                onChange={() => handleToggle(option.value)}
+                className="sr-only"
+              />
+
+              {/* Label and count */}
+              <span className="flex-1 text-sm text-foreground">
+                {option.label}
+              </span>
+
+              {/* Price modifier badge */}
+              {hasPriceModifier && (
+                <span
+                  className={cn(
+                    "text-xs px-1.5 py-0.5 rounded",
+                    parseFloat(option.priceModifier!.amount) > 0
+                      ? "bg-amber-100 text-amber-700"
+                      : "bg-green-100 text-green-700"
+                  )}
+                >
+                  {parseFloat(option.priceModifier!.amount) > 0 ? "+" : ""}
+                  {option.priceModifier!.amount} {option.priceModifier!.currencyCode}
+                </span>
+              )}
+
+              {/* Product count */}
+              <span className="text-xs text-muted-foreground tabular-nums">
+                ({option.productCount})
+              </span>
+            </label>
+          );
+        })}
+      </div>
+
+      {/* Show more/less toggle */}
+      {hasMore && (
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className={cn(
+            "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
+            "transition-colors"
+          )}
+        >
+          {isExpanded ? (
+            <>
+              <ChevronUp className="h-3 w-3" />
+              Show less
+            </>
+          ) : (
+            <>
+              <ChevronDown className="h-3 w-3" />
+              Show {hiddenCount} more
+            </>
+          )}
+        </button>
+      )}
+
+      {/* Selected count */}
+      {selectedValues.length > 0 && (
+        <p className="text-xs text-muted-foreground">
+          {selectedValues.length} selected
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default CheckboxGroupFilter;

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

@@ -0,0 +1,176 @@
+"use client";
+
+import { useState } from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type {
+  AttributeDefinition,
+  AttributeFilterValue,
+} from "./attribute-filter";
+
+export interface ColorSwatchFilterProps {
+  attribute: AttributeDefinition;
+  values: AttributeFilterValue[];
+  selectedValues: string[];
+  onValueChange: (values: string[]) => void;
+  className?: string;
+}
+
+/**
+ * ColorSwatchFilter - Color swatch selection filter
+ *
+ * Features:
+ * - Displays color circles with hex colors
+ * - Supports pattern swatches (imageUrl)
+ * - Multi-select toggle on click
+ * - Shows product count on hover
+ * - Highlights selected with ring/checkmark
+ *
+ * Requirements: R35.5, R35.17, R35.19
+ */
+export function ColorSwatchFilter({
+  attribute,
+  values,
+  selectedValues,
+  onValueChange,
+  className,
+}: ColorSwatchFilterProps) {
+  const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+
+  const handleToggle = (value: string) => {
+    if (selectedValues.includes(value)) {
+      onValueChange(selectedValues.filter((v) => v !== value));
+    } else {
+      onValueChange([...selectedValues, value]);
+    }
+  };
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <h4 className="text-sm font-medium text-foreground">{attribute.name}</h4>
+
+      <div className="flex flex-wrap gap-2">
+        {values.map((option) => {
+          const isSelected = selectedValues.includes(option.value);
+          const isHovered = hoveredValue === option.value;
+          const hasColor = option.swatch?.colorHex;
+          const hasPattern = option.swatch?.imageUrl;
+
+          return (
+            <div key={option.id} className="relative">
+              <button
+                type="button"
+                onClick={() => handleToggle(option.value)}
+                onMouseEnter={() => setHoveredValue(option.value)}
+                onMouseLeave={() => setHoveredValue(null)}
+                className={cn(
+                  "relative h-8 w-8 rounded-full border-2 transition-all",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+                  isSelected
+                    ? "border-primary ring-2 ring-primary ring-offset-1"
+                    : "border-border hover:border-primary/50"
+                )}
+                style={{
+                  backgroundColor: hasColor ? option.swatch?.colorHex : undefined,
+                  backgroundImage: hasPattern
+                    ? `url(${option.swatch?.imageUrl})`
+                    : undefined,
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
+                }}
+                title={`${option.label} (${option.productCount})`}
+                aria-label={`${option.label} - ${option.productCount} products`}
+                aria-pressed={isSelected}
+              >
+                {/* Checkmark for selected */}
+                {isSelected && (
+                  <span
+                    className={cn(
+                      "absolute inset-0 flex items-center justify-center",
+                      "rounded-full",
+                      hasColor && isLightColor(option.swatch?.colorHex)
+                        ? "text-foreground"
+                        : "text-white"
+                    )}
+                  >
+                    <Check className="h-4 w-4" strokeWidth={3} />
+                  </span>
+                )}
+
+                {/* White/light color indicator */}
+                {hasColor &&
+                  isWhiteOrNearWhite(option.swatch?.colorHex) && (
+                    <span className="absolute inset-[2px] rounded-full border border-muted-foreground/20" />
+                  )}
+              </button>
+
+              {/* Tooltip on hover */}
+              {isHovered && (
+                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-10">
+                  <div className="bg-popover text-popover-foreground text-xs px-2 py-1 rounded shadow-md whitespace-nowrap">
+                    <div className="font-medium">{option.label}</div>
+                    <div className="text-muted-foreground">
+                      {option.productCount} products
+                    </div>
+                    {/* Price modifier badge - Requirements: R35.15, R35.16 */}
+                    {option.priceModifier && (
+                      <div
+                        className={cn(
+                          "mt-1 text-xs font-medium",
+                          parseFloat(option.priceModifier.amount) > 0
+                            ? "text-amber-600"
+                            : "text-green-600"
+                        )}
+                      >
+                        {parseFloat(option.priceModifier.amount) > 0 ? "+" : ""}
+                        {option.priceModifier.amount} {option.priceModifier.currencyCode}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Selected count */}
+      {selectedValues.length > 0 && (
+        <p className="text-xs text-muted-foreground">
+          {selectedValues.length} selected
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Check if a color is light (for contrast)
+ */
+function isLightColor(hex?: string): boolean {
+  if (!hex) return false;
+  const cleanHex = hex.replace("#", "");
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5;
+}
+
+/**
+ * Check if color is white or very light (needs border)
+ */
+function isWhiteOrNearWhite(hex?: string): boolean {
+  if (!hex) return false;
+  const cleanHex = hex.replace("#", "").toLowerCase();
+  // Check for white and very light colors
+  return (
+    cleanHex === "ffffff" ||
+    cleanHex === "fff" ||
+    cleanHex === "fafafa" ||
+    cleanHex === "f5f5f5" ||
+    cleanHex === "f0f0f0"
+  );
+}
+
+export default ColorSwatchFilter;