@doswiftly/cli 0.1.23 → 0.2.0

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

@@ -1,109 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { useCallback } from "react";
-import { ProductSortKeys } from "@doswiftly/storefront-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

@@ -1,375 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { formatPrice, formatAmount } from "@/lib/currency";
-import type {
-  PriceMoney,
-  Money,
-  ConvertedPriceRange,
-  ProductPriceRange,
-} from "@doswiftly/storefront-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

@@ -1,178 +0,0 @@
-"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/storefront-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>
-  );
-}