@doswiftly/cli 0.1.1

package/templates/storefront-nextjs/components/commerce/product-filters.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { useCallback } from "react";
+import { ProductSortKeys } from "@doswiftly/commerce-sdk/graphql";
+
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+interface ProductFiltersProps {
+  categories: Category[];
+}
+
+/**
+ * ProductFilters - URL-based filtering for products
+ *
+ * Uses Next.js router to update URL search params.
+ * Server Component re-fetches data automatically.
+ */
+export function ProductFilters({ categories }: ProductFiltersProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // Get current filter values
+  const currentCategory = searchParams.get("category") || "";
+  const currentSort = searchParams.get("sort") || ProductSortKeys.CreatedAt;
+  const currentOrder = searchParams.get("order") || "desc";
+
+  // Update URL with new params
+  const updateParams = useCallback(
+    (updates: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value === null || value === "") {
+          params.delete(key);
+        } else {
+          params.set(key, value);
+        }
+      });
+
+      // Reset pagination when filters change
+      params.delete("after");
+
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [router, pathname, searchParams]
+  );
+
+  const handleCategoryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    updateParams({ category: e.target.value || null });
+  };
+
+  const handleSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    // Parse combined sort value (e.g., "PRICE_asc" or "CREATED_AT_desc")
+    const [sortKey, order] = value.includes("_")
+      ? value.split("_")
+      : [value, "desc"];
+    updateParams({ sort: sortKey, order });
+  };
+
+  // Combined sort value for select
+  const sortValue =
+    currentSort === ProductSortKeys.Price && currentOrder === "asc"
+      ? "PRICE_asc"
+      : currentSort === ProductSortKeys.Price && currentOrder === "desc"
+      ? "PRICE_desc"
+      : currentSort;
+
+  return (
+    <div className="mb-8 flex flex-wrap items-center justify-between gap-4">
+      {/* Category Filter */}
+      <div className="flex gap-2">
+        <select
+          className="input w-auto"
+          value={currentCategory}
+          onChange={handleCategoryChange}
+        >
+          <option value="">All Categories</option>
+          {categories.map((cat) => (
+            <option key={cat.id} value={cat.slug}>
+              {cat.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Sort */}
+      <div className="flex gap-2">
+        <select
+          className="input w-auto"
+          value={sortValue}
+          onChange={handleSortChange}
+        >
+          <option value={ProductSortKeys.CreatedAt}>Newest</option>
+          <option value="PRICE_asc">Price: Low to High</option>
+          <option value="PRICE_desc">Price: High to Low</option>
+          <option value={ProductSortKeys.Title}>Name: A-Z</option>
+          <option value={ProductSortKeys.BestSelling}>Most Popular</option>
+        </select>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs/components/commerce/product-price.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useMemo } from "react";
+import { formatPrice, formatAmount } from "@/lib/currency";
+import type {
+  PriceMoney,
+  Money,
+  ConvertedPriceRange,
+  ProductPriceRange,
+} from "@doswiftly/commerce-sdk/graphql";
+
+// ============================================================================
+// TYPES - Using SDK types (SSOT)
+// ============================================================================
+
+// Re-export types that might not be directly available
+type PriceRange = ConvertedPriceRange;
+type OriginalPriceRange = ProductPriceRange;
+
+/**
+ * Product variant with price
+ */
+interface ProductVariantPrice {
+  id: string;
+  title: string;
+  price: PriceMoney;
+  originalPrice?: Money;
+  compareAtPrice?: PriceMoney;
+  originalCompareAtPrice?: Money;
+  available: boolean;
+}
+
+interface ProductPriceProps {
+  /**
+   * Price range from product (converted prices)
+   * Use for product listing/cards
+   */
+  priceRange?: PriceRange | null;
+
+  /**
+   * Original price range (shop base currency)
+   * Optional - shown as reference when showOriginal=true
+   */
+  originalPriceRange?: OriginalPriceRange | null;
+
+  /**
+   * Single variant price (converted)
+   * Use for product detail page with selected variant
+   */
+  variantPrice?: PriceMoney | null;
+
+  /**
+   * Original variant price (shop base currency)
+   */
+  originalVariantPrice?: Money | null;
+
+  /**
+   * Compare at price (for sales)
+   */
+  compareAtPrice?: PriceMoney | null;
+
+  /**
+   * Show original price in base currency
+   */
+  showOriginal?: boolean;
+
+  /**
+   * Show exchange rate info
+   */
+  showExchangeRate?: boolean;
+
+  /**
+   * Show "from" prefix for price ranges
+   */
+  showFromPrefix?: boolean;
+
+  /**
+   * Show strikethrough compare at price
+   */
+  showCompareAt?: boolean;
+
+  /**
+   * Custom className
+   */
+  className?: string;
+
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * ProductPrice - Display product/variant price with currency conversion
+ *
+ * Works with the new intuitive price API where:
+ * - `price` / `priceRange` = converted price (customer's currency)
+ * - `originalPrice` / `originalPriceRange` = original price (shop currency)
+ *
+ * @example
+ * ```tsx
+ * // Product listing - show price range
+ * <ProductPrice
+ *   priceRange={product.priceRange}
+ *   showFromPrefix
+ * />
+ *
+ * // Product detail - show selected variant price
+ * <ProductPrice
+ *   variantPrice={selectedVariant.price}
+ *   compareAtPrice={selectedVariant.compareAtPrice}
+ *   showCompareAt
+ *   showOriginal
+ *   size="lg"
+ * />
+ *
+ * // With exchange rate info
+ * <ProductPrice
+ *   variantPrice={variant.price}
+ *   showExchangeRate
+ * />
+ * ```
+ */
+export function ProductPrice({
+  priceRange,
+  originalPriceRange,
+  variantPrice,
+  originalVariantPrice,
+  compareAtPrice,
+  showOriginal = false,
+  showExchangeRate = false,
+  showFromPrefix = false,
+  showCompareAt = true,
+  className = "",
+  size = "md",
+}: ProductPriceProps) {
+  // Determine which price to display
+  const displayPrice = useMemo(() => {
+    if (variantPrice) {
+      return variantPrice;
+    }
+    if (priceRange) {
+      return priceRange.minVariantPrice;
+    }
+    return null;
+  }, [variantPrice, priceRange]);
+
+  // Determine original price
+  const originalPrice = useMemo(() => {
+    if (originalVariantPrice) {
+      return originalVariantPrice;
+    }
+    if (originalPriceRange) {
+      return originalPriceRange.minVariantPrice;
+    }
+    return null;
+  }, [originalVariantPrice, originalPriceRange]);
+
+  // Check if price range varies (min != max)
+  const hasVariedRange = useMemo(() => {
+    if (!priceRange) return false;
+    return (
+      priceRange.minVariantPrice.amount !== priceRange.maxVariantPrice.amount
+    );
+  }, [priceRange]);
+
+  // Check if it's a sale (has compare at price higher than current)
+  const isOnSale = useMemo(() => {
+    if (!compareAtPrice || !displayPrice) return false;
+    return parseFloat(compareAtPrice.amount) > parseFloat(displayPrice.amount);
+  }, [compareAtPrice, displayPrice]);
+
+  // Size styles
+  const sizeStyles = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-2xl",
+  };
+
+  const smallTextStyles = {
+    sm: "text-xs",
+    md: "text-xs",
+    lg: "text-sm",
+    xl: "text-base",
+  };
+
+  if (!displayPrice) {
+    return null;
+  }
+
+  return (
+    <div className={`flex flex-col gap-0.5 ${className}`}>
+      {/* Main price line */}
+      <div className="flex items-baseline gap-2 flex-wrap">
+        {/* Compare at price (strikethrough) */}
+        {showCompareAt && isOnSale && compareAtPrice && (
+          <span
+            className={`text-gray-400 line-through ${smallTextStyles[size]}`}
+          >
+            {formatPrice(compareAtPrice)}
+          </span>
+        )}
+
+        {/* Current price */}
+        <span
+          className={`font-semibold ${sizeStyles[size]} ${
+            isOnSale
+              ? "text-red-600 dark:text-red-400"
+              : "text-gray-900 dark:text-gray-100"
+          }`}
+        >
+          {showFromPrefix && (hasVariedRange || priceRange) && (
+            <span className="font-normal text-gray-500 dark:text-gray-400 mr-1">
+              od
+            </span>
+          )}
+          {formatPrice(displayPrice)}
+        </span>
+
+        {/* Sale badge */}
+        {isOnSale && (
+          <span className="px-1.5 py-0.5 text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 rounded">
+            Promocja
+          </span>
+        )}
+      </div>
+
+      {/* Price range (if varies) */}
+      {hasVariedRange && priceRange && (
+        <span
+          className={`text-gray-500 dark:text-gray-400 ${smallTextStyles[size]}`}
+        >
+          {formatPrice(priceRange.minVariantPrice)} –{" "}
+          {formatPrice(priceRange.maxVariantPrice)}
+        </span>
+      )}
+
+      {/* Original price (in base currency) */}
+      {showOriginal && displayPrice.isConverted && originalPrice && (
+        <span
+          className={`text-gray-400 dark:text-gray-500 ${smallTextStyles[size]}`}
+        >
+          ≈ {formatPrice(originalPrice)}
+        </span>
+      )}
+
+      {/* Exchange rate info */}
+      {showExchangeRate &&
+        displayPrice.isConverted &&
+        displayPrice.exchangeRate && (
+          <span
+            className={`text-gray-400 dark:text-gray-500 ${smallTextStyles[size]}`}
+          >
+            Kurs: 1 {displayPrice.baseCurrencyCode} ={" "}
+            {displayPrice.exchangeRate.toFixed(4)} {displayPrice.currencyCode}
+            {displayPrice.marginApplied && (
+              <span className="ml-1">
+                (+{(displayPrice.marginApplied * 100).toFixed(1)}% marża)
+              </span>
+            )}
+          </span>
+        )}
+    </div>
+  );
+}
+
+// ============================================================================
+// VARIANT PRICE SELECTOR
+// ============================================================================
+
+interface VariantPriceSelectorProps {
+  /** All variants with prices */
+  variants: ProductVariantPrice[];
+  /** Currently selected variant ID */
+  selectedVariantId: string | null;
+  /** Callback when variant is selected */
+  onSelectVariant: (variantId: string) => void;
+  /** Show original prices */
+  showOriginal?: boolean;
+  /** Layout direction */
+  layout?: "horizontal" | "vertical";
+  /** Custom className */
+  className?: string;
+}
+
+/**
+ * VariantPriceSelector - Select variant and see its price
+ *
+ * @example
+ * ```tsx
+ * const [selectedId, setSelectedId] = useState(variants[0]?.id);
+ *
+ * <VariantPriceSelector
+ *   variants={product.variants}
+ *   selectedVariantId={selectedId}
+ *   onSelectVariant={setSelectedId}
+ * />
+ * ```
+ */
+export function VariantPriceSelector({
+  variants,
+  selectedVariantId,
+  onSelectVariant,
+  showOriginal = false,
+  layout = "horizontal",
+  className = "",
+}: VariantPriceSelectorProps) {
+  const selectedVariant = useMemo(
+    () => variants.find((v) => v.id === selectedVariantId),
+    [variants, selectedVariantId]
+  );
+
+  return (
+    <div className={`flex flex-col gap-3 ${className}`}>
+      {/* Variant buttons */}
+      <div
+        className={`flex gap-2 ${
+          layout === "vertical" ? "flex-col" : "flex-wrap"
+        }`}
+      >
+        {variants.map((variant) => {
+          const isSelected = variant.id === selectedVariantId;
+          const isAvailable = variant.available;
+
+          return (
+            <button
+              key={variant.id}
+              type="button"
+              onClick={() => onSelectVariant(variant.id)}
+              disabled={!isAvailable}
+              className={`
+                px-4 py-2 rounded-lg border text-sm font-medium
+                transition-all
+                ${
+                  isSelected
+                    ? "border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
+                    : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
+                }
+                ${
+                  !isAvailable
+                    ? "opacity-50 cursor-not-allowed line-through"
+                    : "cursor-pointer"
+                }
+              `}
+            >
+              <span>{variant.title}</span>
+              <span className="ml-2 text-gray-500 dark:text-gray-400">
+                {formatPrice(variant.price)}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Selected variant price details */}
+      {selectedVariant && (
+        <ProductPrice
+          variantPrice={selectedVariant.price}
+          originalVariantPrice={selectedVariant.originalPrice}
+          compareAtPrice={selectedVariant.compareAtPrice}
+          showOriginal={showOriginal}
+          showCompareAt
+          size="lg"
+        />
+      )}
+    </div>
+  );
+}
+
+export default ProductPrice;

package/templates/storefront-nextjs/components/commerce/search-input.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Search, X, Loader2 } from "lucide-react";
+import { useProductSearch } from "@doswiftly/commerce-sdk/graphql/client";
+import { useDebouncedValue } from "@/lib/hooks";
+import Link from "next/link";
+
+interface SearchInputProps {
+  placeholder?: string;
+  className?: string;
+}
+
+/**
+ * SearchInput - Product search with autocomplete
+ *
+ * Shows instant search results as user types.
+ * Pressing Enter navigates to full search page.
+ */
+export function SearchInput({
+  placeholder = "Search products...",
+  className = "",
+}: SearchInputProps) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Debounce search query
+  const debouncedQuery = useDebouncedValue(query, 300);
+
+  // Fetch search results (client hook - now returns normalized data!)
+  const { data, isLoading } = useProductSearch(
+    { query: debouncedQuery, first: 5 },
+    { enabled: debouncedQuery.length >= 2 }
+  );
+
+  const products = data?.products ?? [];
+  const hasResults = products.length > 0;
+
+  // Handle form submit
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (query.trim()) {
+      router.push(`/search?q=${encodeURIComponent(query.trim())}`);
+      setIsOpen(false);
+      setQuery("");
+    }
+  };
+
+  // Handle click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, []);
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      <form onSubmit={handleSubmit}>
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setIsOpen(true);
+            }}
+            onFocus={() => setIsOpen(true)}
+            placeholder={placeholder}
+            className="input w-full pl-10 pr-10"
+          />
+          {query && (
+            <button
+              type="button"
+              onClick={() => {
+                setQuery("");
+                inputRef.current?.focus();
+              }}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </form>
+
+      {/* Dropdown Results */}
+      {isOpen && query.length >= 2 && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-96 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+              <span className="ml-2 text-sm text-gray-500">Searching...</span>
+            </div>
+          ) : hasResults ? (
+            <>
+              <ul className="divide-y divide-gray-100">
+                {products.slice(0, 5).map((product) => (
+                  <li key={product.id}>
+                    <Link
+                      href={`/products/${product.handle}`}
+                      onClick={() => {
+                        setIsOpen(false);
+                        setQuery("");
+                      }}
+                      className="flex items-center gap-4 p-3 hover:bg-gray-50"
+                    >
+                      {product.featuredImage?.url ? (
+                        <img
+                          src={product.featuredImage.url}
+                          alt={product.featuredImage.altText || product.title}
+                          className="h-12 w-12 rounded object-cover"
+                        />
+                      ) : (
+                        <div className="flex h-12 w-12 items-center justify-center rounded bg-gray-100 text-xs text-gray-400">
+                          No img
+                        </div>
+                      )}
+                      <div className="flex-1 overflow-hidden">
+                        <h4 className="truncate font-medium text-gray-900">
+                          {product.title}
+                        </h4>
+                        <p className="text-sm text-primary">
+                          {product.priceRange?.minVariantPrice?.amount}{" "}
+                          {product.priceRange?.minVariantPrice?.currencyCode}
+                        </p>
+                      </div>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+              <Link
+                href={`/search?q=${encodeURIComponent(query)}`}
+                onClick={() => {
+                  setIsOpen(false);
+                  setQuery("");
+                }}
+                className="block border-t border-gray-100 p-3 text-center text-sm text-primary hover:bg-gray-50"
+              >
+                View all results →
+              </Link>
+            </>
+          ) : (
+            <div className="py-8 text-center text-sm text-gray-500">
+              No products found for &quot;{query}&quot;
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}