@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/product/product-gallery.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useState } from "react";
+import { ProductImage, type ProductImageData } from "./product-image";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight, ZoomIn } from "lucide-react";
+
+export interface ProductGalleryProps {
+  images: ProductImageData[];
+  productTitle: string;
+  className?: string;
+}
+
+/**
+ * ProductGallery - Image gallery with zoom and navigation
+ * 
+ * @example
+ * ```tsx
+ * <ProductGallery 
+ *   images={product.images}
+ *   productTitle={product.title}
+ * />
+ * ```
+ */
+export function ProductGallery({
+  images,
+  productTitle,
+  className,
+}: ProductGalleryProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  const selectedImage = images[selectedIndex];
+
+  const handlePrevious = () => {
+    setSelectedIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  const handleNext = () => {
+    setSelectedIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+  };
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Main image */}
+      <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
+        <ProductImage
+          image={selectedImage}
+          alt={`${productTitle} - Image ${selectedIndex + 1}`}
+          fill
+          priority={selectedIndex === 0}
+          sizes="(max-width: 768px) 100vw, 50vw"
+          className="object-cover"
+        />
+
+        {/* Zoom button */}
+        <button
+          onClick={() => setIsZoomed(true)}
+          className="absolute right-4 top-4 rounded-full bg-background/80 p-2 text-foreground shadow-lg backdrop-blur-sm transition-colors hover:bg-background"
+          aria-label="Zoom image"
+        >
+          <ZoomIn className="h-5 w-5" />
+        </button>
+
+        {/* Navigation arrows (if multiple images) */}
+        {images.length > 1 && (
+          <>
+            <button
+              onClick={handlePrevious}
+              className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-background/80 p-2 text-foreground shadow-lg backdrop-blur-sm transition-colors hover:bg-background"
+              aria-label="Previous image"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+            <button
+              onClick={handleNext}
+              className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-background/80 p-2 text-foreground shadow-lg backdrop-blur-sm transition-colors hover:bg-background"
+              aria-label="Next image"
+            >
+              <ChevronRight className="h-5 w-5" />
+            </button>
+          </>
+        )}
+
+        {/* Image counter */}
+        {images.length > 1 && (
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-background/80 px-3 py-1 text-sm font-medium text-foreground backdrop-blur-sm">
+            {selectedIndex + 1} / {images.length}
+          </div>
+        )}
+      </div>
+
+      {/* Thumbnail grid */}
+      {images.length > 1 && (
+        <div className="grid grid-cols-4 gap-2 sm:grid-cols-6 md:grid-cols-4 lg:grid-cols-6">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              onClick={() => setSelectedIndex(index)}
+              className={cn(
+                "relative aspect-square overflow-hidden rounded-lg border-2 transition-all",
+                selectedIndex === index
+                  ? "border-primary ring-2 ring-ring ring-offset-2"
+                  : "border-border hover:border-primary"
+              )}
+            >
+              <ProductImage
+                image={image}
+                alt={`${productTitle} - Thumbnail ${index + 1}`}
+                fill
+                sizes="(max-width: 640px) 25vw, (max-width: 1024px) 16vw, 12vw"
+                className="object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Zoom modal */}
+      <Dialog open={isZoomed} onOpenChange={setIsZoomed}>
+        <DialogContent
+          className="max-w-7xl p-0"
+          onClose={() => setIsZoomed(false)}
+        >
+          <div className="relative aspect-square w-full overflow-hidden">
+            <ProductImage
+              image={selectedImage}
+              alt={`${productTitle} - Zoomed`}
+              fill
+              sizes="100vw"
+              className="object-contain"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/product-grid.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ProductCard, type ProductCardProduct } from "./product-card";
+import { EmptyProducts } from "@/components/ui/empty-state";
+import { cn } from "@/lib/utils";
+
+// Re-export for external use
+export type { ProductCardProduct };
+
+export interface ProductGridProps {
+  products: ProductCardProduct[];
+  className?: string;
+  columns?: 2 | 3 | 4 | 5;
+  gap?: "sm" | "md" | "lg";
+  priorityCount?: number;
+  showBadges?: boolean;
+  emptyMessage?: string;
+  onResetFilters?: () => void;
+}
+
+/**
+ * ProductGrid - Display products in responsive grid
+ * 
+ * Client Component for interactive grid features
+ * 
+ * @example
+ * ```tsx
+ * <ProductGrid 
+ *   products={products}
+ *   columns={4}
+ *   priorityCount={4} // First 4 images load with priority
+ *   showBadges
+ * />
+ * ```
+ */
+export function ProductGrid({
+  products,
+  className,
+  columns = 4,
+  gap = "md",
+  priorityCount = 4,
+  showBadges = true,
+  emptyMessage,
+  onResetFilters,
+}: ProductGridProps) {
+  // Empty state
+  if (products.length === 0) {
+    return <EmptyProducts onReset={onResetFilters} />;
+  }
+
+  const columnClasses = {
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+    5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  };
+
+  const gapClasses = {
+    sm: "gap-3",
+    md: "gap-4 md:gap-6",
+    lg: "gap-6 md:gap-8",
+  };
+
+  return (
+    <div
+      className={cn(
+        "grid",
+        columnClasses[columns],
+        gapClasses[gap],
+        className
+      )}
+    >
+      {products.map((product, index) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          priority={index < priorityCount}
+          showBadges={showBadges}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/product-image.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+export interface ProductImageData {
+  url: string;
+  altText?: string | null;
+  width?: number;
+  height?: number;
+}
+
+export interface ProductImageProps {
+  image?: ProductImageData | null;
+  alt?: string;
+  fill?: boolean;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  sizes?: string;
+  className?: string;
+  objectFit?: "contain" | "cover";
+}
+
+/**
+ * ProductImage - Optimized product image with Next.js Image
+ * 
+ * Handles missing images with placeholder
+ * Optimizes loading with priority and sizes props
+ * 
+ * @example
+ * ```tsx
+ * // Fill container (for cards)
+ * <ProductImage 
+ *   image={product.featuredImage}
+ *   alt={product.title}
+ *   fill
+ *   priority={index < 4}
+ *   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+ * />
+ * 
+ * // Fixed size (for thumbnails)
+ * <ProductImage 
+ *   image={variant.image}
+ *   alt={variant.title}
+ *   width={80}
+ *   height={80}
+ * />
+ * ```
+ */
+// Placeholder component for missing/failed images
+function ImagePlaceholder({
+  fill,
+  width,
+  height,
+  className,
+}: {
+  fill: boolean;
+  width?: number;
+  height?: number;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center bg-muted text-muted-foreground",
+        fill ? "absolute inset-0" : "",
+        className
+      )}
+      style={!fill && width && height ? { width, height } : undefined}
+    >
+      <svg
+        className="h-12 w-12"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+        />
+      </svg>
+    </div>
+  );
+}
+
+export function ProductImage({
+  image,
+  alt,
+  fill = false,
+  width,
+  height,
+  priority = false,
+  sizes,
+  className,
+  objectFit = "cover",
+}: ProductImageProps) {
+  const [hasError, setHasError] = useState(false);
+
+  // Placeholder for missing images or failed loads
+  if (!image?.url || hasError) {
+    return (
+      <ImagePlaceholder
+        fill={fill}
+        width={width}
+        height={height}
+        className={className}
+      />
+    );
+  }
+
+  const imageAlt = alt || image.altText || "Product image";
+
+  // Common image props
+  const commonProps = {
+    src: image.url,
+    alt: imageAlt,
+    priority,
+    className: cn(
+      objectFit === "cover" ? "object-cover" : "object-contain",
+      className
+    ),
+    onError: () => setHasError(true),
+  };
+
+  if (fill) {
+    return (
+      <Image
+        {...commonProps}
+        fill
+        sizes={
+          sizes ||
+          "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+        }
+      />
+    );
+  }
+
+  // Use provided dimensions or image dimensions or defaults
+  const imgWidth = width || image.width || 800;
+  const imgHeight = height || image.height || 800;
+
+  return (
+    <Image
+      {...commonProps}
+      width={imgWidth}
+      height={imgHeight}
+      sizes={sizes}
+    />
+  );
+}

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

@@ -0,0 +1,158 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { formatPrice } from "@/lib/format";
+import type { PriceMoney } from "@/lib/format";
+
+export interface ProductPriceMoney {
+  amount: string;
+  currencyCode: string;
+}
+
+export interface ProductPriceRange {
+  minVariantPrice: ProductPriceMoney;
+  maxVariantPrice: ProductPriceMoney;
+}
+
+export interface ProductPriceProps {
+  /** Single price (for selected variant) */
+  price?: ProductPriceMoney;
+  /** Price range (for product with multiple variants) */
+  priceRange?: ProductPriceRange;
+  /** Compare at price (original price before discount) */
+  compareAtPrice?: ProductPriceMoney;
+  /** Show "from" prefix for price ranges */
+  showFromPrefix?: boolean;
+  /** Show compare at price with strikethrough */
+  showCompareAt?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg" | "xl";
+  /** Custom className */
+  className?: string;
+}
+
+/**
+ * ProductPrice - Display product price with currency formatting
+ *
+ * Uses centralized formatPrice from lib/format.ts for consistent
+ * formatting with proper locale based on currency code.
+ *
+ * Uses suppressHydrationWarning to prevent hydration mismatches
+ * when currency is changed client-side
+ *
+ * @example
+ * ```tsx
+ * // Single price
+ * <ProductPrice price={variant.price} />
+ *
+ * // Price range
+ * <ProductPrice
+ *   priceRange={product.priceRange}
+ *   showFromPrefix
+ * />
+ *
+ * // With sale price
+ * <ProductPrice
+ *   price={variant.price}
+ *   compareAtPrice={variant.compareAtPrice}
+ *   showCompareAt
+ * />
+ * ```
+ */
+export function ProductPrice({
+  price,
+  priceRange,
+  compareAtPrice,
+  showFromPrefix = false,
+  showCompareAt = true,
+  size = "md",
+  className,
+}: ProductPriceProps) {
+  // Use centralized formatPrice from lib/format.ts
+
+  const displayPrice = price || priceRange?.minVariantPrice;
+  
+  if (!displayPrice) {
+    return null;
+  }
+
+  const hasVariedRange =
+    priceRange &&
+    priceRange.minVariantPrice.amount !== priceRange.maxVariantPrice.amount;
+
+  const isOnSale =
+    compareAtPrice &&
+    parseFloat(compareAtPrice.amount) > parseFloat(displayPrice.amount);
+
+  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",
+  };
+
+  return (
+    <div
+      className={cn("flex flex-col gap-0.5", className)}
+      suppressHydrationWarning
+    >
+      {/* Main price line */}
+      <div className="flex items-baseline gap-2 flex-wrap">
+        {/* Compare at price (strikethrough) */}
+        {showCompareAt && isOnSale && compareAtPrice && (
+          <span
+            className={cn(
+              "text-muted-foreground line-through",
+              smallTextStyles[size]
+            )}
+            suppressHydrationWarning
+          >
+            {formatPrice(compareAtPrice)}
+          </span>
+        )}
+
+        {/* Current price */}
+        <span
+          className={cn(
+            "font-semibold",
+            sizeStyles[size],
+            isOnSale ? "text-destructive" : "text-foreground"
+          )}
+          suppressHydrationWarning
+        >
+          {showFromPrefix && hasVariedRange && (
+            <span className="font-normal text-muted-foreground mr-1">
+              from
+            </span>
+          )}
+          {formatPrice(displayPrice)}
+        </span>
+
+        {/* Sale badge */}
+        {isOnSale && (
+          <span className="px-1.5 py-0.5 text-xs font-medium bg-destructive/10 text-destructive rounded">
+            Sale
+          </span>
+        )}
+      </div>
+
+      {/* Price range (if varies) */}
+      {hasVariedRange && priceRange && (
+        <span
+          className={cn("text-muted-foreground", smallTextStyles[size])}
+          suppressHydrationWarning
+        >
+          {formatPrice(priceRange.minVariantPrice)} –{" "}
+          {formatPrice(priceRange.maxVariantPrice)}
+        </span>
+      )}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/product-quantity-selector.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { Minus, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+export interface ProductQuantitySelectorProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * ProductQuantitySelector - Quantity input with +/- buttons
+ * 
+ * @example
+ * ```tsx
+ * const [quantity, setQuantity] = useState(1);
+ * 
+ * <ProductQuantitySelector
+ *   value={quantity}
+ *   onChange={setQuantity}
+ *   min={1}
+ *   max={10}
+ * />
+ * ```
+ */
+export function ProductQuantitySelector({
+  value,
+  onChange,
+  min = 1,
+  max = 99,
+  disabled = false,
+  className,
+}: ProductQuantitySelectorProps) {
+  const [inputValue, setInputValue] = useState((value ?? 1).toString());
+
+  const handleDecrement = () => {
+    const newValue = Math.max(min, value - 1);
+    onChange(newValue);
+    setInputValue(newValue.toString());
+  };
+
+  const handleIncrement = () => {
+    const newValue = Math.min(max, value + 1);
+    onChange(newValue);
+    setInputValue(newValue.toString());
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+
+    // Parse and validate
+    const parsed = parseInt(newValue, 10);
+    if (!isNaN(parsed)) {
+      const clamped = Math.max(min, Math.min(max, parsed));
+      onChange(clamped);
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Ensure input shows valid value on blur
+    setInputValue(value.toString());
+  };
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleDecrement}
+        disabled={disabled || value <= min}
+        aria-label="Decrease quantity"
+        className="h-10 w-10 p-0"
+      >
+        <Minus className="h-4 w-4" />
+      </Button>
+
+      <Input
+        type="number"
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleInputBlur}
+        disabled={disabled}
+        min={min}
+        max={max}
+        className="h-10 w-16 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        aria-label="Quantity"
+      />
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleIncrement}
+        disabled={disabled || value >= max}
+        aria-label="Increase quantity"
+        className="h-10 w-10 p-0"
+      >
+        <Plus className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}