@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/product/discount-badge.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Tag, Percent, TrendingDown } from "lucide-react";
+
+export interface DiscountBadgeProps {
+  discountPercentage?: number;
+  discountAmount?: number;
+  currency?: string;
+  label?: string;
+  variant?: "percentage" | "amount" | "sale" | "new" | "custom";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+/**
+ * DiscountBadge - Display sale/discount badge on products
+ */
+export function DiscountBadge({
+  discountPercentage,
+  discountAmount,
+  currency = "PLN",
+  label,
+  variant = "percentage",
+  size = "md",
+  className = "",
+}: DiscountBadgeProps) {
+  const sizeClasses = {
+    sm: "text-xs px-2 py-0.5",
+    md: "text-sm px-2.5 py-1",
+    lg: "text-base px-3 py-1.5",
+  };
+
+  const getContent = () => {
+    switch (variant) {
+      case "percentage":
+        return discountPercentage ? `-${discountPercentage}%` : null;
+      case "amount":
+        return discountAmount
+          ? `-${new Intl.NumberFormat("pl-PL", {
+              style: "currency",
+              currency,
+            }).format(discountAmount)}`
+          : null;
+      case "sale":
+        return "SALE";
+      case "new":
+        return "NEW";
+      case "custom":
+        return label || null;
+      default:
+        return null;
+    }
+  };
+
+  const content = getContent();
+
+  if (!content) return null;
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "percentage":
+      case "amount":
+        return "bg-red-600 text-white hover:bg-red-700";
+      case "sale":
+        return "bg-red-600 text-white hover:bg-red-700";
+      case "new":
+        return "bg-green-600 text-white hover:bg-green-700";
+      case "custom":
+        return "bg-primary text-primary-foreground hover:bg-primary/90";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <Badge
+      className={`${sizeClasses[size]} ${getVariantStyles()} font-bold ${className}`}
+    >
+      {content}
+    </Badge>
+  );
+}
+
+export interface ProductDiscountBadgeProps {
+  originalPrice: number;
+  salePrice: number;
+  showPercentage?: boolean;
+  showAmount?: boolean;
+  className?: string;
+}
+
+/**
+ * ProductDiscountBadge - Automatically calculate and display discount
+ */
+export function ProductDiscountBadge({
+  originalPrice,
+  salePrice,
+  showPercentage = true,
+  showAmount = false,
+  className = "",
+}: ProductDiscountBadgeProps) {
+  if (salePrice >= originalPrice) return null;
+
+  const discountAmount = originalPrice - salePrice;
+  const discountPercentage = Math.round(
+    (discountAmount / originalPrice) * 100
+  );
+
+  if (showPercentage) {
+    return (
+      <DiscountBadge
+        discountPercentage={discountPercentage}
+        variant="percentage"
+        className={className}
+      />
+    );
+  }
+
+  if (showAmount) {
+    return (
+      <DiscountBadge
+        discountAmount={discountAmount}
+        variant="amount"
+        className={className}
+      />
+    );
+  }
+
+  return null;
+}
+
+export interface DiscountLabelProps {
+  type: "percentage" | "amount" | "bogo" | "free_shipping";
+  value?: number;
+  currency?: string;
+  className?: string;
+}
+
+/**
+ * DiscountLabel - Display discount information with icon
+ */
+export function DiscountLabel({
+  type,
+  value,
+  currency = "PLN",
+  className = "",
+}: DiscountLabelProps) {
+  const getContent = () => {
+    switch (type) {
+      case "percentage":
+        return {
+          icon: Percent,
+          text: value ? `${value}% OFF` : "DISCOUNT",
+          color: "text-red-600",
+        };
+      case "amount":
+        return {
+          icon: TrendingDown,
+          text: value
+            ? `Save ${new Intl.NumberFormat("pl-PL", {
+                style: "currency",
+                currency,
+              }).format(value)}`
+            : "SAVE",
+          color: "text-red-600",
+        };
+      case "bogo":
+        return {
+          icon: Tag,
+          text: "Buy One Get One",
+          color: "text-green-600",
+        };
+      case "free_shipping":
+        return {
+          icon: Tag,
+          text: "Free Shipping",
+          color: "text-blue-600",
+        };
+    }
+  };
+
+  const content = getContent();
+  const Icon = content.icon;
+
+  return (
+    <div
+      className={`inline-flex items-center gap-1.5 rounded-md bg-muted px-3 py-1.5 ${className}`}
+    >
+      <Icon className={`h-4 w-4 ${content.color}`} />
+      <span className={`text-sm font-semibold ${content.color}`}>
+        {content.text}
+      </span>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/index.ts

@@ -0,0 +1,41 @@
+export { ProductCard } from './product-card';
+export type { ProductCardProps, ProductCardProduct } from './product-card';
+
+export { ProductGrid } from './product-grid';
+export type { ProductGridProps } from './product-grid';
+
+export { ProductPrice } from './product-price';
+export type { ProductPriceProps, ProductPriceMoney, ProductPriceRange } from './product-price';
+
+export { ProductImage } from './product-image';
+export type { ProductImageProps, ProductImageData } from './product-image';
+
+export { ProductFilters } from './product-filters';
+export type { ProductFiltersProps, FilterGroup, FilterOption } from './product-filters';
+
+export { ProductSort } from './product-sort';
+export type { ProductSortProps, SortOption } from './product-sort';
+
+export { ProductVariantSelector } from './product-variant-selector';
+export type { ProductVariantSelectorProps, ProductVariant, VariantOption } from './product-variant-selector';
+
+export { ProductGallery } from './product-gallery';
+export type { ProductGalleryProps } from './product-gallery';
+
+export { ProductQuantitySelector } from './product-quantity-selector';
+export type { ProductQuantitySelectorProps } from './product-quantity-selector';
+
+export { AddToCartButton } from './add-to-cart-button';
+export type { AddToCartButtonProps } from './add-to-cart-button';
+
+export { StockIndicator } from './stock-indicator';
+export type { StockIndicatorProps } from './stock-indicator';
+
+export { SimilarProducts } from './similar-products';
+export type { SimilarProductsProps } from './similar-products';
+
+export { ProductReviews } from './product-reviews';
+export { ReviewCard } from './review-card';
+export { ReviewForm } from './review-form';
+export type { ReviewFormData } from './review-form';
+export { ReviewSummary, StarRating } from './review-summary';

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

@@ -0,0 +1,147 @@
+"use client";
+
+import Link from "next/link";
+import { Gift } from "lucide-react";
+import { ProductImage } from "./product-image";
+import { ProductPrice } from "./product-price";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export interface ProductCardProduct {
+  id: string;
+  handle: string;
+  title: string;
+  featuredImage?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+  priceRange: {
+    minVariantPrice: {
+      amount: string;
+      currencyCode: string;
+    };
+    maxVariantPrice: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: {
+      amount: string;
+      currencyCode: string;
+    };
+  } | null;
+  availableForSale: boolean;
+  tags?: string[];
+  type?: string;
+}
+
+export interface ProductCardProps {
+  product: ProductCardProduct;
+  className?: string;
+  priority?: boolean;
+  showBadges?: boolean;
+}
+
+/**
+ * ProductCard - Display product in grid/list
+ * 
+ * Client Component for interactive features (hover, click)
+ * 
+ * @example
+ * ```tsx
+ * <ProductCard 
+ *   product={product} 
+ *   priority={index < 4} // LCP optimization
+ *   showBadges
+ * />
+ * ```
+ */
+export function ProductCard({
+  product,
+  className,
+  priority = false,
+  showBadges = true,
+}: ProductCardProps) {
+  const isOnSale = product.compareAtPriceRange &&
+    parseFloat(product.compareAtPriceRange.minVariantPrice.amount) >
+    parseFloat(product.priceRange.minVariantPrice.amount);
+
+  const isNew = product.tags?.some(
+    (tag) => tag.toLowerCase() === "new" || tag.toLowerCase() === "nowość"
+  );
+
+  const isOutOfStock = !product.availableForSale;
+  const isGiftCard = product.type === "GIFT_CARD";
+
+  return (
+    <Link
+      href={`/products/${product.handle}`}
+      className={cn(
+        "group block overflow-hidden rounded-lg border border-border bg-background transition-shadow hover:shadow-lg",
+        className
+      )}
+    >
+      {/* Image Container */}
+      <div className="relative aspect-square overflow-hidden bg-muted">
+        <ProductImage
+          image={product.featuredImage}
+          alt={product.title}
+          fill
+          priority={priority}
+          className="object-cover transition-transform duration-300 group-hover:scale-105"
+        />
+
+        {/* Badges */}
+        {showBadges && (
+          <div className="absolute left-2 top-2 flex flex-col gap-1">
+            {isGiftCard && (
+              <Badge variant="default" className="shadow-sm">
+                <Gift className="mr-1 h-3 w-3" />
+                Karta podarunkowa
+              </Badge>
+            )}
+            {isNew && !isGiftCard && (
+              <Badge variant="default" className="shadow-sm">
+                NEW
+              </Badge>
+            )}
+            {isOnSale && (
+              <Badge variant="destructive" className="shadow-sm">
+                SALE
+              </Badge>
+            )}
+            {isOutOfStock && (
+              <Badge variant="secondary" className="shadow-sm">
+                Out of Stock
+              </Badge>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Product Info */}
+      <div className="p-4">
+        <h3 className="mb-2 line-clamp-2 text-sm font-medium text-foreground group-hover:text-primary transition-colors">
+          {product.title}
+        </h3>
+
+        <ProductPrice
+          priceRange={product.priceRange}
+          compareAtPrice={
+            isOnSale ? product.compareAtPriceRange?.minVariantPrice : undefined
+          }
+          showFromPrefix
+          showCompareAt
+          size="sm"
+        />
+
+        {isOutOfStock && (
+          <p className="mt-2 text-xs text-muted-foreground">
+            Currently unavailable
+          </p>
+        )}
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,217 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface FilterOption {
+  label: string;
+  value: string;
+  count?: number;
+}
+
+export interface FilterGroup {
+  id: string;
+  label: string;
+  type: "checkbox" | "range" | "color";
+  options?: FilterOption[];
+  min?: number;
+  max?: number;
+}
+
+export interface ProductFiltersProps {
+  filters: FilterGroup[];
+  selectedFilters: Record<string, string[]>;
+  onFilterChange: (filterId: string, values: string[]) => void;
+  onClearAll?: () => void;
+  className?: string;
+}
+
+/**
+ * ProductFilters - Filter products by price, category, attributes
+ * 
+ * @example
+ * ```tsx
+ * const [filters, setFilters] = useState({});
+ * 
+ * <ProductFilters
+ *   filters={filterGroups}
+ *   selectedFilters={filters}
+ *   onFilterChange={(id, values) => {
+ *     setFilters({ ...filters, [id]: values });
+ *   }}
+ * />
+ * ```
+ */
+export function ProductFilters({
+  filters,
+  selectedFilters,
+  onFilterChange,
+  onClearAll,
+  className,
+}: ProductFiltersProps) {
+  const [priceRange, setPriceRange] = useState<{ min: string; max: string }>({
+    min: "",
+    max: "",
+  });
+
+  const handleCheckboxChange = (filterId: string, value: string) => {
+    const current = selectedFilters[filterId] || [];
+    const updated = current.includes(value)
+      ? current.filter((v) => v !== value)
+      : [...current, value];
+    onFilterChange(filterId, updated);
+  };
+
+  const handlePriceRangeApply = (filterId: string, min: number, max: number) => {
+    onFilterChange(filterId, [`${min}-${max}`]);
+  };
+
+  const hasActiveFilters = Object.values(selectedFilters).some(
+    (values) => values.length > 0
+  );
+
+  // Memoize default open filter IDs to avoid re-creating array on every render
+  const defaultOpenFilters = useMemo(() => filters.map((f) => f.id), [filters]);
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Clear all button */}
+      {hasActiveFilters && onClearAll && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onClearAll}
+          className="w-full"
+        >
+          Clear all filters
+        </Button>
+      )}
+
+      {/* Filter groups */}
+      <Accordion type="multiple" defaultValue={defaultOpenFilters}>
+        {filters.map((filter) => (
+          <AccordionItem key={filter.id} value={filter.id}>
+            <AccordionTrigger value={filter.id}>
+              <span className="flex items-center gap-2">
+                {filter.label}
+                {selectedFilters[filter.id]?.length > 0 && (
+                  <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                    {selectedFilters[filter.id].length}
+                  </span>
+                )}
+              </span>
+            </AccordionTrigger>
+            <AccordionContent value={filter.id}>
+              {/* Checkbox filters */}
+              {filter.type === "checkbox" && filter.options && (
+                <div className="space-y-2">
+                  {filter.options.map((option) => (
+                    <label
+                      key={option.value}
+                      className="flex items-center gap-2 cursor-pointer"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedFilters[filter.id]?.includes(
+                          option.value
+                        )}
+                        onChange={() =>
+                          handleCheckboxChange(filter.id, option.value)
+                        }
+                        className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                      />
+                      <span className="flex-1 text-sm text-foreground">
+                        {option.label}
+                      </span>
+                      {option.count !== undefined && (
+                        <span className="text-xs text-muted-foreground">
+                          ({option.count})
+                        </span>
+                      )}
+                    </label>
+                  ))}
+                </div>
+              )}
+
+              {/* Price range filter */}
+              {filter.type === "range" && (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    <Input
+                      type="number"
+                      placeholder="Min"
+                      value={priceRange.min}
+                      onChange={(e) =>
+                        setPriceRange({ ...priceRange, min: e.target.value })
+                      }
+                      min={filter.min}
+                      max={filter.max}
+                      className="w-full"
+                    />
+                    <span className="text-muted-foreground">–</span>
+                    <Input
+                      type="number"
+                      placeholder="Max"
+                      value={priceRange.max}
+                      onChange={(e) =>
+                        setPriceRange({ ...priceRange, max: e.target.value })
+                      }
+                      min={filter.min}
+                      max={filter.max}
+                      className="w-full"
+                    />
+                  </div>
+                  <Button
+                    size="sm"
+                    onClick={() =>
+                      handlePriceRangeApply(
+                        filter.id,
+                        parseFloat(priceRange.min) || filter.min || 0,
+                        parseFloat(priceRange.max) || filter.max || 999999
+                      )
+                    }
+                    className="w-full"
+                  >
+                    Apply
+                  </Button>
+                </div>
+              )}
+
+              {/* Color filters */}
+              {filter.type === "color" && filter.options && (
+                <div className="flex flex-wrap gap-2">
+                  {filter.options.map((option) => {
+                    const isSelected = selectedFilters[filter.id]?.includes(
+                      option.value
+                    );
+                    return (
+                      <button
+                        key={option.value}
+                        type="button"
+                        onClick={() =>
+                          handleCheckboxChange(filter.id, option.value)
+                        }
+                        className={cn(
+                          "h-8 w-8 rounded-full border-2 transition-all",
+                          isSelected
+                            ? "border-primary ring-2 ring-ring ring-offset-2"
+                            : "border-border hover:border-primary"
+                        )}
+                        style={{ backgroundColor: option.value }}
+                        title={option.label}
+                        aria-label={option.label}
+                      />
+                    );
+                  })}
+                </div>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}