@doswiftly/cli 0.1.1

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

@@ -0,0 +1,187 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export interface CollectionCardProps {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  imageUrl?: string;
+  productCount?: number;
+  isFeatured?: boolean;
+  className?: string;
+}
+
+/**
+ * CollectionCard - Display card for product collection
+ */
+export function CollectionCard({
+  id,
+  title,
+  handle,
+  description,
+  imageUrl,
+  productCount,
+  isFeatured = false,
+  className = "",
+}: CollectionCardProps) {
+  return (
+    <Link href={`/collections/${handle}`} className={`block ${className}`}>
+      <Card className="group overflow-hidden transition-all hover:shadow-lg">
+        {/* Collection Image */}
+        <div className="relative aspect-[4/3] overflow-hidden bg-muted">
+          {imageUrl ? (
+            <Image
+              src={imageUrl}
+              alt={title}
+              fill
+              className="object-cover transition-transform group-hover:scale-105"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center bg-gradient-to-br from-primary/10 to-primary/5">
+              <span className="text-4xl font-bold text-primary/20">
+                {title.charAt(0)}
+              </span>
+            </div>
+          )}
+
+          {/* Featured Badge */}
+          {isFeatured && (
+            <div className="absolute top-3 right-3">
+              <Badge variant="default">Featured</Badge>
+            </div>
+          )}
+
+          {/* Overlay on hover */}
+          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+        </div>
+
+        {/* Collection Info */}
+        <div className="p-5">
+          <h3 className="text-xl font-semibold text-foreground group-hover:text-primary transition-colors">
+            {title}
+          </h3>
+
+          {description && (
+            <p className="mt-2 text-sm text-muted-foreground line-clamp-2">
+              {description}
+            </p>
+          )}
+
+          {productCount !== undefined && (
+            <p className="mt-3 text-xs font-medium text-muted-foreground">
+              {productCount} {productCount === 1 ? "product" : "products"}
+            </p>
+          )}
+
+          <div className="mt-4 flex items-center text-sm font-medium text-primary group-hover:underline">
+            Shop Collection
+            <svg
+              className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}
+
+export interface CollectionCardGridProps {
+  collections: CollectionCardProps[];
+  className?: string;
+}
+
+/**
+ * CollectionCardGrid - Grid layout for collection cards
+ */
+export function CollectionCardGrid({
+  collections,
+  className = "",
+}: CollectionCardGridProps) {
+  if (collections.length === 0) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+        <p className="text-muted-foreground">No collections available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 ${className}`}
+    >
+      {collections.map((collection) => (
+        <CollectionCard key={collection.id} {...collection} />
+      ))}
+    </div>
+  );
+}
+
+export interface CollectionHeroProps {
+  title: string;
+  description?: string;
+  imageUrl?: string;
+  className?: string;
+}
+
+/**
+ * CollectionHero - Hero section for collection pages
+ */
+export function CollectionHero({
+  title,
+  description,
+  imageUrl,
+  className = "",
+}: CollectionHeroProps) {
+  return (
+    <div className={`relative overflow-hidden rounded-lg ${className}`}>
+      {/* Background Image */}
+      {imageUrl && (
+        <div className="absolute inset-0">
+          <Image
+            src={imageUrl}
+            alt={title}
+            fill
+            className="object-cover"
+            priority
+            sizes="100vw"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-black/30" />
+        </div>
+      )}
+
+      {/* Content */}
+      <div
+        className={`relative z-10 px-8 py-16 md:px-12 md:py-24 ${
+          imageUrl ? "text-white" : "bg-gradient-to-r from-primary/10 to-primary/5"
+        }`}
+      >
+        <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl">{title}</h1>
+        {description && (
+          <p
+            className={`mt-4 max-w-2xl text-lg md:text-xl ${
+              imageUrl ? "text-white/90" : "text-muted-foreground"
+            }`}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/common/price-display.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useCurrencyStore } from "@/stores/currency-store";
+
+export interface PriceDisplayProps {
+  amount: string | number;
+  currency?: string;
+  className?: string;
+  showCurrency?: boolean;
+  locale?: string;
+}
+
+/**
+ * PriceDisplay - Formatted price with currency
+ * Automatically uses the user's preferred currency from the currency store
+ */
+export function PriceDisplay({
+  amount,
+  currency,
+  className = "",
+  showCurrency = true,
+  locale = "pl-PL",
+}: PriceDisplayProps) {
+  const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const finalCurrency = currency || preferredCurrency || "PLN";
+
+  const formatPrice = (value: string | number, curr: string) => {
+    const numericValue = typeof value === "string" ? parseFloat(value) : value;
+
+    if (isNaN(numericValue)) {
+      return "—";
+    }
+
+    if (showCurrency) {
+      return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: curr,
+      }).format(numericValue);
+    }
+
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(numericValue);
+  };
+
+  return (
+    <span className={className} suppressHydrationWarning>
+      {formatPrice(amount, finalCurrency)}
+    </span>
+  );
+}
+
+export interface PriceRangeDisplayProps {
+  minAmount: string | number;
+  maxAmount: string | number;
+  currency?: string;
+  className?: string;
+  locale?: string;
+}
+
+/**
+ * PriceRangeDisplay - Display a price range (e.g., "$10 - $20")
+ */
+export function PriceRangeDisplay({
+  minAmount,
+  maxAmount,
+  currency,
+  className = "",
+  locale = "pl-PL",
+}: PriceRangeDisplayProps) {
+  const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const finalCurrency = currency || preferredCurrency || "PLN";
+
+  const formatPrice = (value: string | number) => {
+    const numericValue = typeof value === "string" ? parseFloat(value) : value;
+
+    if (isNaN(numericValue)) {
+      return "—";
+    }
+
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: finalCurrency,
+    }).format(numericValue);
+  };
+
+  const min = typeof minAmount === "string" ? parseFloat(minAmount) : minAmount;
+  const max = typeof maxAmount === "string" ? parseFloat(maxAmount) : maxAmount;
+
+  // If min and max are the same, just show one price
+  if (min === max) {
+    return (
+      <span className={className} suppressHydrationWarning>
+        {formatPrice(min)}
+      </span>
+    );
+  }
+
+  return (
+    <span className={className} suppressHydrationWarning>
+      {formatPrice(min)} - {formatPrice(max)}
+    </span>
+  );
+}
+
+export interface ComparePriceDisplayProps {
+  originalPrice: string | number;
+  salePrice: string | number;
+  currency?: string;
+  className?: string;
+  locale?: string;
+}
+
+/**
+ * ComparePriceDisplay - Display original and sale price with strikethrough
+ */
+export function ComparePriceDisplay({
+  originalPrice,
+  salePrice,
+  currency,
+  className = "",
+  locale = "pl-PL",
+}: ComparePriceDisplayProps) {
+  const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const finalCurrency = currency || preferredCurrency || "PLN";
+
+  const formatPrice = (value: string | number) => {
+    const numericValue = typeof value === "string" ? parseFloat(value) : value;
+
+    if (isNaN(numericValue)) {
+      return "—";
+    }
+
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: finalCurrency,
+    }).format(numericValue);
+  };
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`} suppressHydrationWarning>
+      <span className="text-lg font-semibold text-foreground">
+        {formatPrice(salePrice)}
+      </span>
+      <span className="text-sm text-muted-foreground line-through">
+        {formatPrice(originalPrice)}
+      </span>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/common/social-share.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import { Facebook, Twitter, Linkedin, Link2, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export interface SocialShareProps {
+  url: string;
+  title: string;
+  description?: string;
+  className?: string;
+}
+
+/**
+ * SocialShare - Share on social media buttons
+ */
+export function SocialShare({
+  url,
+  title,
+  description = "",
+  className = "",
+}: SocialShareProps) {
+  const [copied, setCopied] = useState(false);
+
+  const encodedUrl = encodeURIComponent(url);
+  const encodedTitle = encodeURIComponent(title);
+  const encodedDescription = encodeURIComponent(description);
+
+  const shareLinks = {
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+    twitter: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+  };
+
+  const handleShare = (platform: keyof typeof shareLinks) => {
+    const width = 600;
+    const height = 400;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
+
+    window.open(
+      shareLinks[platform],
+      "share",
+      `width=${width},height=${height},left=${left},top=${top}`
+    );
+  };
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy link:", err);
+    }
+  };
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <span className="text-sm font-medium text-muted-foreground mr-2">
+        Share:
+      </span>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => handleShare("facebook")}
+        aria-label="Share on Facebook"
+        className="h-9 w-9 p-0"
+      >
+        <Facebook className="h-4 w-4" />
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => handleShare("twitter")}
+        aria-label="Share on Twitter"
+        className="h-9 w-9 p-0"
+      >
+        <Twitter className="h-4 w-4" />
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => handleShare("linkedin")}
+        aria-label="Share on LinkedIn"
+        className="h-9 w-9 p-0"
+      >
+        <Linkedin className="h-4 w-4" />
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleCopyLink}
+        aria-label="Copy link"
+        className="h-9 w-9 p-0"
+      >
+        {copied ? (
+          <Check className="h-4 w-4 text-green-600" />
+        ) : (
+          <Link2 className="h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+export interface SocialShareButtonProps {
+  url: string;
+  title: string;
+  description?: string;
+  className?: string;
+}
+
+/**
+ * SocialShareButton - Single button that opens a share dialog
+ */
+export function SocialShareButton({
+  url,
+  title,
+  description = "",
+  className = "",
+}: SocialShareButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleNativeShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title,
+          text: description,
+          url,
+        });
+      } catch (err) {
+        if ((err as Error).name !== "AbortError") {
+          console.error("Error sharing:", err);
+        }
+      }
+    } else {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <div className={`relative ${className}`}>
+      <Button variant="outline" size="sm" onClick={handleNativeShare}>
+        <Link2 className="mr-2 h-4 w-4" />
+        Share
+      </Button>
+
+      {isOpen && !navigator.share && (
+        <div className="absolute right-0 top-full mt-2 z-10">
+          <SocialShare
+            url={url}
+            title={title}
+            description={description}
+            className="bg-background border border-border rounded-lg p-3 shadow-lg"
+          />
+        </div>
+      )}
+    </div>
+  );
+}