@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/product/savings-display.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { TrendingDown, DollarSign, Percent } from "lucide-react";
+import { useCurrencyStore } from "@/stores/currency-store";
+import { formatAmount } from "@/lib/format";
+
+export interface SavingsDisplayProps {
+  originalPrice: number;
+  salePrice: number;
+  currency?: string;
+  showPercentage?: boolean;
+  showAmount?: boolean;
+  variant?: "inline" | "badge" | "card";
+  className?: string;
+}
+
+/**
+ * SavingsDisplay - Show amount saved on discounted products
+ */
+export function SavingsDisplay({
+  originalPrice,
+  salePrice,
+  currency,
+  showPercentage = true,
+  showAmount = true,
+  variant = "inline",
+  className = "",
+}: SavingsDisplayProps) {
+  const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const finalCurrency = currency || preferredCurrency || "PLN";
+
+  if (salePrice >= originalPrice) return null;
+
+  const savingsAmount = originalPrice - salePrice;
+  const savingsPercentage = Math.round(
+    (savingsAmount / originalPrice) * 100
+  );
+
+  // Use centralized formatAmount with proper locale based on currency
+  const formatPrice = (amount: number) => formatAmount(amount, finalCurrency);
+
+  if (variant === "inline") {
+    return (
+      <div
+        className={`inline-flex items-center gap-2 text-sm text-green-600 ${className}`}
+        suppressHydrationWarning
+      >
+        <TrendingDown className="h-4 w-4" />
+        <span className="font-medium">
+          You save{" "}
+          {showAmount && <span className="font-bold">{formatPrice(savingsAmount)}</span>}
+          {showAmount && showPercentage && " "}
+          {showPercentage && <span className="font-bold">({savingsPercentage}%)</span>}
+        </span>
+      </div>
+    );
+  }
+
+  if (variant === "badge") {
+    return (
+      <div
+        className={`inline-flex items-center gap-1.5 rounded-full bg-green-100 dark:bg-green-900/30 px-3 py-1 text-sm font-semibold text-green-700 dark:text-green-400 ${className}`}
+        suppressHydrationWarning
+      >
+        <TrendingDown className="h-3.5 w-3.5" />
+        <span>
+          Save{" "}
+          {showAmount && formatPrice(savingsAmount)}
+          {showAmount && showPercentage && " "}
+          {showPercentage && `(${savingsPercentage}%)`}
+        </span>
+      </div>
+    );
+  }
+
+  if (variant === "card") {
+    return (
+      <div
+        className={`rounded-lg border border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-900/20 p-4 ${className}`}
+        suppressHydrationWarning
+      >
+        <div className="flex items-start gap-3">
+          <div className="rounded-full bg-green-600 p-2">
+            <TrendingDown className="h-5 w-5 text-white" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-green-900 dark:text-green-100">
+              You're Saving
+            </h3>
+            <div className="mt-1 flex items-baseline gap-2">
+              {showAmount && (
+                <span className="text-2xl font-bold text-green-700 dark:text-green-400">
+                  {formatPrice(savingsAmount)}
+                </span>
+              )}
+              {showPercentage && (
+                <span className="text-lg font-semibold text-green-600 dark:text-green-500">
+                  ({savingsPercentage}% off)
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export interface TotalSavingsProps {
+  items: Array<{
+    originalPrice: number;
+    salePrice: number;
+    quantity: number;
+  }>;
+  currency?: string;
+  className?: string;
+}
+
+/**
+ * TotalSavings - Display total savings across multiple items (for cart)
+ */
+export function TotalSavings({
+  items,
+  currency,
+  className = "",
+}: TotalSavingsProps) {
+  const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const finalCurrency = currency || preferredCurrency || "PLN";
+
+  const totalSavings = items.reduce((sum, item) => {
+    const itemSavings = (item.originalPrice - item.salePrice) * item.quantity;
+    return sum + (itemSavings > 0 ? itemSavings : 0);
+  }, 0);
+
+  if (totalSavings <= 0) return null;
+
+  return (
+    <div
+      className={`flex items-center justify-between rounded-lg bg-green-50 dark:bg-green-900/20 px-4 py-3 ${className}`}
+      suppressHydrationWarning
+    >
+      <div className="flex items-center gap-2 text-green-700 dark:text-green-400">
+        <DollarSign className="h-5 w-5" />
+        <span className="font-medium">Total Savings</span>
+      </div>
+      <span className="text-lg font-bold text-green-700 dark:text-green-400">
+        {formatAmount(totalSavings, finalCurrency)}
+      </span>
+    </div>
+  );
+}
+
+export interface SavingsBreakdownProps {
+  originalPrice: number;
+  salePrice: number;
+  currency?: string;
+  className?: string;
+}
+
+/**
+ * SavingsBreakdown - Detailed breakdown of price and savings
+ */
+export function SavingsBreakdown({
+  originalPrice,
+  salePrice,
+  currency,
+  className = "",
+}: SavingsBreakdownProps) {
+  const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const finalCurrency = currency || preferredCurrency || "PLN";
+
+  if (salePrice >= originalPrice) return null;
+
+  const savingsAmount = originalPrice - salePrice;
+  const savingsPercentage = Math.round(
+    (savingsAmount / originalPrice) * 100
+  );
+
+  return (
+    <div
+      className={`space-y-2 rounded-lg border border-border bg-muted/50 p-4 ${className}`}
+      suppressHydrationWarning
+    >
+      <div className="flex items-center justify-between text-sm">
+        <span className="text-muted-foreground">Original Price</span>
+        <span className="font-medium text-foreground line-through">
+          {formatAmount(originalPrice, finalCurrency)}
+        </span>
+      </div>
+
+      <div className="flex items-center justify-between text-sm">
+        <span className="flex items-center gap-1.5 text-green-600">
+          <Percent className="h-3.5 w-3.5" />
+          Discount ({savingsPercentage}%)
+        </span>
+        <span className="font-medium text-green-600">
+          -{formatAmount(savingsAmount, finalCurrency)}
+        </span>
+      </div>
+
+      <div className="border-t border-border pt-2">
+        <div className="flex items-center justify-between">
+          <span className="font-semibold text-foreground">Sale Price</span>
+          <span className="text-xl font-bold text-foreground">
+            {formatAmount(salePrice, finalCurrency)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/similar-products.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ProductCard, type ProductCardProduct } from "./product-card";
+import { cn } from "@/lib/utils";
+
+export interface SimilarProductsProps {
+  products: ProductCardProduct[];
+  title?: string;
+  className?: string;
+  columns?: 2 | 3 | 4;
+}
+
+/**
+ * SimilarProducts - Display similar products based on tags/category
+ * 
+ * @example
+ * ```tsx
+ * <SimilarProducts 
+ *   products={similarProducts}
+ *   title="You might also like"
+ *   columns={4}
+ * />
+ * ```
+ */
+export function SimilarProducts({
+  products,
+  title = "Similar Products",
+  className,
+  columns = 4,
+}: SimilarProductsProps) {
+  if (!products || products.length === 0) {
+    return null;
+  }
+
+  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",
+  };
+
+  return (
+    <section className={cn("space-y-6", className)}>
+      <h2 className="text-2xl font-bold text-foreground">{title}</h2>
+      
+      <div className={cn("grid gap-4 md:gap-6", columnClasses[columns])}>
+        {products.map((product, index) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            priority={false}
+            showBadges
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/stock-indicator.tsx

@@ -0,0 +1,91 @@
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+export interface StockIndicatorProps {
+  available: boolean;
+  quantity?: number;
+  lowStockThreshold?: number;
+  className?: string;
+  variant?: "badge" | "text" | "dot";
+}
+
+/**
+ * StockIndicator - Display stock status (in stock, low stock, out of stock)
+ * 
+ * @example
+ * ```tsx
+ * <StockIndicator 
+ *   available={variant.available}
+ *   quantity={variant.quantityAvailable}
+ *   lowStockThreshold={5}
+ * />
+ * ```
+ */
+export function StockIndicator({
+  available,
+  quantity,
+  lowStockThreshold = 5,
+  className,
+  variant = "badge",
+}: StockIndicatorProps) {
+  const isLowStock = available && quantity !== undefined && quantity <= lowStockThreshold && quantity > 0;
+  const isOutOfStock = !available || (quantity !== undefined && quantity === 0);
+
+  const getStatus = () => {
+    if (isOutOfStock) {
+      return {
+        label: "Out of Stock",
+        color: "destructive" as const,
+        dotColor: "bg-red-500",
+      };
+    }
+    if (isLowStock) {
+      return {
+        label: `Only ${quantity} left`,
+        color: "warning" as const,
+        dotColor: "bg-yellow-500",
+      };
+    }
+    return {
+      label: "In Stock",
+      color: "success" as const,
+      dotColor: "bg-green-500",
+    };
+  };
+
+  const status = getStatus();
+
+  // Badge variant
+  if (variant === "badge") {
+    return (
+      <Badge variant={status.color} className={className}>
+        {status.label}
+      </Badge>
+    );
+  }
+
+  // Text variant
+  if (variant === "text") {
+    return (
+      <span
+        className={cn(
+          "text-sm font-medium",
+          isOutOfStock && "text-destructive",
+          isLowStock && "text-yellow-600 dark:text-yellow-500",
+          !isOutOfStock && !isLowStock && "text-green-600 dark:text-green-500",
+          className
+        )}
+      >
+        {status.label}
+      </span>
+    );
+  }
+
+  // Dot variant
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <span className={cn("h-2 w-2 rounded-full", status.dotColor)} />
+      <span className="text-sm text-foreground">{status.label}</span>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/providers/currency-provider.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+/**
+ * CurrencyProvider - Initializes currency store with Shop data
+ *
+ * This provider:
+ * 1. Receives Shop data from server (via root layout)
+ * 2. Initializes currency store on mount
+ * 3. Handles currency detection from:
+ *    - localStorage (saved preference)
+ *    - Browser locale (auto-detection)
+ *    - Shop base currency (fallback)
+ *
+ * The currency store manages:
+ * - User's preferred currency
+ * - Supported currencies list
+ * - Base currency for the shop
+ * - Persistence to localStorage
+ *
+ * @module storefront-nextjs/components/providers/currency-provider
+ */
+
+import { useEffect, type ReactNode } from 'react';
+import { useCurrencyStore, type ShopCurrencyData } from '@/stores/currency-store';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface CurrencyProviderProps {
+  /**
+   * Shop data containing currency configuration
+   * Fetched from GraphQL Shop query in root layout
+   */
+  shopData: ShopCurrencyData;
+  
+  /**
+   * Child components
+   */
+  children: ReactNode;
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * CurrencyProvider - Initializes currency store with Shop data
+ *
+ * This component should be placed in the root layout after fetching Shop data.
+ * It initializes the currency store once on mount, which triggers:
+ * 1. Loading saved currency from localStorage (if valid)
+ * 2. Auto-detecting currency from browser locale (if no saved preference)
+ * 3. Falling back to shop's base currency
+ *
+ * The initialization only happens once per session. Subsequent currency changes
+ * are handled by the currency store's setCurrency action.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { fetchShop } from '@/lib/graphql/server';
+ * import { CurrencyProvider } from '@/components/providers/currency-provider';
+ *
+ * export default async function RootLayout({ children }) {
+ *   const { shop } = await fetchShop();
+ *
+ *   return (
+ *     <html lang="en">
+ *       <body>
+ *         <QueryProvider>
+ *           <CurrencyProvider shopData={shop}>
+ *             <Header />
+ *             <main>{children}</main>
+ *             <Footer />
+ *           </CurrencyProvider>
+ *         </QueryProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Component props
+ * @param props.shopData - Shop currency configuration
+ * @param props.children - Child components to render
+ */
+export function CurrencyProvider({ shopData, children }: CurrencyProviderProps) {
+  const initialize = useCurrencyStore((state: any) => state.initialize);
+  
+  useEffect(() => {
+    // Initialize currency store with Shop data
+    // This will:
+    // 1. Set base currency and supported currencies
+    // 2. Restore saved currency from localStorage (if valid)
+    // 3. Auto-detect from browser locale (if no saved preference)
+    // 4. Fall back to base currency
+    initialize(shopData);
+  }, [shopData, initialize]);
+  
+  // Simply render children - the store initialization happens in the background
+  return <>{children}</>;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Providers - Re-exports for all provider components
+ *
+ * @module storefront-nextjs/components/providers
+ */
+
+export { CurrencyProvider } from './currency-provider';
+export { QueryProvider } from './query-provider';