@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/commerce/product-actions.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { VariantSelector } from "@/components/commerce/variant-selector";
+import { AddToCartButton } from "@/components/product/add-to-cart-button";
+import { formatPrice } from "@/lib/format";
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  available: boolean;
+  selectedOptions: Array<{ name: string; value: string }>;
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  compareAtPrice?: {
+    amount: string;
+    currencyCode: string;
+  } | null;
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+}
+
+interface ProductActionsProps {
+  variants: ProductVariant[];
+  productId: string;
+  productHandle?: string;
+  productTitle: string;
+  productImages?: Array<{
+    url: string;
+    altText?: string | null;
+  }>;
+}
+
+/**
+ * ProductActions - Client-side product interactions
+ *
+ * Handles variant selection, quantity, and add to cart.
+ * Server Component renders the rest of the page.
+ */
+export function ProductActions({ 
+  variants, 
+  productId, 
+  productHandle,
+  productTitle,
+  productImages = []
+}: ProductActionsProps) {
+  // Store only variant ID - derive variant object from props (SSOT)
+  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
+    () => variants[0]?.id ?? null
+  );
+  const [quantity, setQuantity] = useState(1);
+
+  // Derived state: automatically updates when variants prop changes (e.g., after currency change)
+  const selectedVariant = useMemo(() => {
+    if (!variants || variants.length === 0) return null;
+    const found = variants.find((v) => v.id === selectedVariantId);
+    // Fallback to first variant if selected ID not found in new variants
+    return found ?? variants[0];
+  }, [variants, selectedVariantId]);
+
+  // Handler for VariantSelector - extracts ID from variant object
+  const handleVariantChange = (variant: ProductVariant) => {
+    setSelectedVariantId(variant.id);
+  };
+
+  const inStock = selectedVariant?.available ?? true;
+  const price = selectedVariant?.price;
+  const compareAtPrice = selectedVariant?.compareAtPrice;
+
+  return (
+    <div className="space-y-6">
+      {/* Price */}
+      <div className="flex items-baseline gap-4">
+        <span className="text-2xl font-bold text-primary">
+          {formatPrice(price)}
+        </span>
+        {compareAtPrice && (
+          <span className="text-lg text-gray-400 line-through">
+            {formatPrice(compareAtPrice)}
+          </span>
+        )}
+      </div>
+
+      {/* Variant Selector */}
+      {variants.length > 1 && (
+        <VariantSelector
+          variants={variants}
+          selectedVariantId={selectedVariant?.id}
+          onVariantChange={handleVariantChange}
+        />
+      )}
+
+      {/* Stock Status */}
+      <div>
+        {inStock ? (
+          <span className="inline-flex items-center gap-2 text-green-600">
+            <span className="h-2 w-2 rounded-full bg-green-600" />
+            In Stock
+          </span>
+        ) : (
+          <span className="inline-flex items-center gap-2 text-red-600">
+            <span className="h-2 w-2 rounded-full bg-red-600" />
+            Out of Stock
+          </span>
+        )}
+      </div>
+
+      {/* Quantity & Add to Cart */}
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <label className="text-sm font-medium text-gray-700">Quantity:</label>
+          <div className="flex items-center rounded-lg border border-gray-300">
+            <button
+              type="button"
+              onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+              className="px-3 py-2 text-gray-600 hover:text-primary"
+            >
+              -
+            </button>
+            <input
+              type="number"
+              min="1"
+              value={quantity}
+              onChange={(e) =>
+                setQuantity(Math.max(1, parseInt(e.target.value) || 1))
+              }
+              className="w-16 border-x border-gray-300 py-2 text-center"
+            />
+            <button
+              type="button"
+              onClick={() => setQuantity((q) => q + 1)}
+              className="px-3 py-2 text-gray-600 hover:text-primary"
+            >
+              +
+            </button>
+          </div>
+        </div>
+
+        <AddToCartButton
+          variantId={selectedVariant?.id || productId}
+          productId={productId}
+          productHandle={productHandle}
+          productTitle={productTitle}
+          variantTitle={selectedVariant?.title || "Default"}
+          price={selectedVariant?.price || { amount: "0", currencyCode: "USD" }}
+          image={selectedVariant?.image || productImages[0]}
+          available={inStock}
+          quantity={quantity}
+          disabled={!inStock}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,174 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { Search, X, Loader2 } from "lucide-react";
+import { useGraphQLQuery } from "@/lib/graphql/hooks";
+import { ProductSearchDocument } from "@/generated/graphql";
+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 using GraphQL Codegen
+  const { data, isLoading } = useGraphQLQuery(
+    ProductSearchDocument,
+    { query: debouncedQuery, first: 5 },
+    { enabled: debouncedQuery.length >= 2 }
+  );
+
+  const products = data?.products?.edges?.map((edge) => edge.node) ?? [];
+  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("");
+    }
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Close dropdown on Escape
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.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} className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <input
+          ref={inputRef}
+          type="search"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => query.length >= 2 && setIsOpen(true)}
+          placeholder={placeholder}
+          className="h-10 w-full rounded-md border border-border bg-background pl-9 pr-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+        {query && (
+          <button
+            type="button"
+            onClick={() => {
+              setQuery("");
+              setIsOpen(false);
+              inputRef.current?.focus();
+            }}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </form>
+
+      {/* Dropdown */}
+      {isOpen && debouncedQuery.length >= 2 && (
+        <div className="absolute top-full z-50 mt-2 w-full rounded-md border border-border bg-background shadow-lg">
+          {isLoading ? (
+            <div className="flex items-center justify-center p-4">
+              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              <span className="ml-2 text-sm text-muted-foreground">
+                Searching...
+              </span>
+            </div>
+          ) : hasResults ? (
+            <div className="max-h-96 overflow-y-auto">
+              {products.slice(0, 5).map((product: any) => (
+                <Link
+                  key={product.id}
+                  href={`/products/${product.handle}`}
+                  onClick={() => {
+                    setIsOpen(false);
+                    setQuery("");
+                  }}
+                  className="flex items-center gap-3 border-b border-border p-3 last:border-0 hover:bg-muted"
+                >
+                  {product.featuredImage && (
+                    <img
+                      src={product.featuredImage.url}
+                      alt={product.featuredImage.altText || product.title}
+                      className="h-12 w-12 rounded object-cover"
+                    />
+                  )}
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-foreground">
+                      {product.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {product.priceRange.minVariantPrice.amount}{" "}
+                      {product.priceRange.minVariantPrice.currencyCode}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+              <Link
+                href={`/search?q=${encodeURIComponent(query)}`}
+                onClick={() => {
+                  setIsOpen(false);
+                  setQuery("");
+                }}
+                className="block border-t border-border p-3 text-center text-sm text-primary hover:bg-muted"
+              >
+                View all results for "{query}"
+              </Link>
+            </div>
+          ) : (
+            <div className="p-4 text-center text-sm text-muted-foreground">
+              No products found for "{debouncedQuery}"
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/commerce/variant-selector.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useState, useMemo, useEffect } from "react";
+
+interface VariantOption {
+  name: string;
+  value: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  available: boolean;
+  selectedOptions: VariantOption[];
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  compareAtPrice?: {
+    amount: string;
+    currencyCode: string;
+  } | null;
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+}
+
+interface VariantSelectorProps {
+  variants: ProductVariant[];
+  selectedVariantId?: string;
+  onVariantChange: (variant: ProductVariant) => void;
+}
+
+/**
+ * VariantSelector - Select product options (size, color, etc.)
+ *
+ * Extracts unique options from variants and allows selection.
+ * Automatically finds matching variant when options change.
+ *
+ * @example
+ * ```tsx
+ * <VariantSelector
+ *   variants={product.variants}
+ *   selectedVariantId={selectedVariant?.id}
+ *   onVariantChange={setSelectedVariant}
+ * />
+ * ```
+ */
+export function VariantSelector({
+  variants,
+  selectedVariantId,
+  onVariantChange,
+}: VariantSelectorProps) {
+  // Extract unique option names and their values
+  const options = useMemo(() => {
+    const optionMap = new Map<string, Set<string>>();
+
+    variants.forEach((variant) => {
+      variant.selectedOptions.forEach((opt) => {
+        if (!optionMap.has(opt.name)) {
+          optionMap.set(opt.name, new Set());
+        }
+        optionMap.get(opt.name)!.add(opt.value);
+      });
+    });
+
+    return Array.from(optionMap.entries()).map(([name, values]) => ({
+      name,
+      values: Array.from(values),
+    }));
+  }, [variants]);
+
+  // Currently selected values for each option
+  const [selectedOptions, setSelectedOptions] = useState<
+    Record<string, string>
+  >(() => {
+    // Initialize from selected variant or first variant
+    const initialVariant = selectedVariantId
+      ? variants.find((v) => v.id === selectedVariantId)
+      : variants[0];
+
+    if (!initialVariant) return {};
+
+    return initialVariant.selectedOptions.reduce(
+      (acc, opt) => ({
+        ...acc,
+        [opt.name]: opt.value,
+      }),
+      {}
+    );
+  });
+
+  // Find variant matching current selection
+  const findMatchingVariant = (
+    opts: Record<string, string>
+  ): ProductVariant | undefined => {
+    return variants.find((variant) =>
+      variant.selectedOptions.every((opt) => opts[opt.name] === opt.value)
+    );
+  };
+
+  // Check if a specific option value is available
+  const isOptionAvailable = (
+    optionName: string,
+    optionValue: string
+  ): boolean => {
+    const testOptions = { ...selectedOptions, [optionName]: optionValue };
+    const matchingVariant = findMatchingVariant(testOptions);
+    return !!matchingVariant;
+  };
+
+  // Check if option value leads to in-stock variant
+  const isOptionInStock = (
+    optionName: string,
+    optionValue: string
+  ): boolean => {
+    const testOptions = { ...selectedOptions, [optionName]: optionValue };
+    const matchingVariant = findMatchingVariant(testOptions);
+    return matchingVariant?.available ?? false;
+  };
+
+  // Handle option selection
+  const handleOptionChange = (optionName: string, optionValue: string) => {
+    const newOptions = { ...selectedOptions, [optionName]: optionValue };
+    setSelectedOptions(newOptions);
+
+    const matchingVariant = findMatchingVariant(newOptions);
+    if (matchingVariant) {
+      onVariantChange(matchingVariant);
+    }
+  };
+
+  // Sync when selectedVariantId changes externally
+  useEffect(() => {
+    if (selectedVariantId) {
+      const variant = variants.find((v) => v.id === selectedVariantId);
+      if (variant) {
+        const opts = variant.selectedOptions.reduce(
+          (acc, opt) => ({ ...acc, [opt.name]: opt.value }),
+          {}
+        );
+        setSelectedOptions(opts);
+      }
+    }
+  }, [selectedVariantId, variants]);
+
+  // Sync parent when variants prop changes (e.g., after currency change)
+  // This ensures parent gets the updated variant object with new prices
+  useEffect(() => {
+    if (selectedVariantId && variants.length > 0) {
+      const updatedVariant = variants.find((v) => v.id === selectedVariantId);
+      if (updatedVariant) {
+        // Notify parent with updated variant (containing new prices)
+        onVariantChange(updatedVariant);
+      }
+    }
+  }, [variants]); // Only trigger when variants change, not on every render
+
+  // Don't render if only one variant with no meaningful options
+  if (variants.length <= 1 && options.every((o) => o.values.length <= 1)) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {options.map((option) => (
+        <div key={option.name}>
+          <label className="mb-2 block text-sm font-medium text-gray-700">
+            {option.name}
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {option.values.map((value) => {
+              const isSelected = selectedOptions[option.name] === value;
+              const available = isOptionAvailable(option.name, value);
+              const inStock = isOptionInStock(option.name, value);
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => handleOptionChange(option.name, value)}
+                  disabled={!available}
+                  className={`
+                    relative min-w-[3rem] rounded-lg border px-4 py-2 text-sm font-medium
+                    transition-all
+                    ${
+                      isSelected
+                        ? "border-primary bg-primary text-white"
+                        : available
+                        ? "border-gray-300 bg-white text-gray-900 hover:border-primary"
+                        : "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-400"
+                    }
+                    ${!inStock && available ? "text-gray-500" : ""}
+                  `}
+                >
+                  {value}
+                  {/* Out of stock indicator */}
+                  {!inStock && available && (
+                    <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-white bg-gray-400" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/common/category-card.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { Card } from "@/components/ui/card";
+
+export interface CategoryCardProps {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string;
+  imageUrl?: string;
+  productCount?: number;
+  className?: string;
+}
+
+/**
+ * CategoryCard - Display card for product category
+ */
+export function CategoryCard({
+  id,
+  name,
+  slug,
+  description,
+  imageUrl,
+  productCount,
+  className = "",
+}: CategoryCardProps) {
+  return (
+    <Link href={`/categories/${slug}`} className={`block ${className}`}>
+      <Card className="group overflow-hidden transition-all hover:shadow-lg">
+        {/* Category Image */}
+        {imageUrl && (
+          <div className="relative aspect-square overflow-hidden bg-muted">
+            <Image
+              src={imageUrl}
+              alt={name}
+              fill
+              className="object-cover transition-transform group-hover:scale-105"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            />
+          </div>
+        )}
+
+        {/* Category Info */}
+        <div className="p-4">
+          <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
+            {name}
+          </h3>
+
+          {description && (
+            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+              {description}
+            </p>
+          )}
+
+          {productCount !== undefined && (
+            <p className="mt-2 text-xs text-muted-foreground">
+              {productCount} {productCount === 1 ? "product" : "products"}
+            </p>
+          )}
+        </div>
+      </Card>
+    </Link>
+  );
+}
+
+export interface CategoryCardGridProps {
+  categories: CategoryCardProps[];
+  className?: string;
+}
+
+/**
+ * CategoryCardGrid - Grid layout for category cards
+ */
+export function CategoryCardGrid({
+  categories,
+  className = "",
+}: CategoryCardGridProps) {
+  if (categories.length === 0) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+        <p className="text-muted-foreground">No categories available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 ${className}`}
+    >
+      {categories.map((category) => (
+        <CategoryCard key={category.id} {...category} />
+      ))}
+    </div>
+  );
+}