@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/product/review-form.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+/**
+ * ReviewForm Component
+ *
+ * Form for submitting product reviews with rating, pros/cons, and images.
+ */
+
+import { useState } from 'react';
+import { Star, Plus, X, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+// Ensure Textarea exists or create a simple version
+const TextareaComponent = typeof Textarea === 'undefined'
+  ? ({ className, ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => (
+      <textarea className={cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className)} {...props} />
+    )
+  : Textarea;
+
+interface ReviewFormProps {
+  productId: string;
+  productTitle: string;
+  onSubmit: (data: ReviewFormData) => Promise<void>;
+  orderId?: string;
+  className?: string;
+}
+
+export interface ReviewFormData {
+  productId: string;
+  rating: number;
+  title?: string;
+  content: string;
+  pros?: string[];
+  cons?: string[];
+  images?: string[];
+  authorName: string;
+  authorEmail?: string;
+  orderId?: string;
+}
+
+export function ReviewForm({
+  productId,
+  productTitle,
+  onSubmit,
+  orderId,
+  className,
+}: ReviewFormProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [rating, setRating] = useState(0);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [pros, setPros] = useState<string[]>([]);
+  const [cons, setCons] = useState<string[]>([]);
+  const [newPro, setNewPro] = useState('');
+  const [newCon, setNewCon] = useState('');
+  const [authorName, setAuthorName] = useState('');
+  const [authorEmail, setAuthorEmail] = useState('');
+
+  const handleAddPro = () => {
+    if (newPro.trim() && pros.length < 5) {
+      setPros([...pros, newPro.trim()]);
+      setNewPro('');
+    }
+  };
+
+  const handleAddCon = () => {
+    if (newCon.trim() && cons.length < 5) {
+      setCons([...cons, newCon.trim()]);
+      setNewCon('');
+    }
+  };
+
+  const handleRemovePro = (index: number) => {
+    setPros(pros.filter((_, i) => i !== index));
+  };
+
+  const handleRemoveCon = (index: number) => {
+    setCons(cons.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (rating === 0) {
+      toast.error('Wybierz ocenę');
+      return;
+    }
+
+    if (!content.trim()) {
+      toast.error('Napisz treść opinii');
+      return;
+    }
+
+    if (!authorName.trim()) {
+      toast.error('Podaj swoje imię');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await onSubmit({
+        productId,
+        rating,
+        title: title.trim() || undefined,
+        content: content.trim(),
+        pros: pros.length > 0 ? pros : undefined,
+        cons: cons.length > 0 ? cons : undefined,
+        authorName: authorName.trim(),
+        authorEmail: authorEmail.trim() || undefined,
+        orderId,
+      });
+
+      // Reset form
+      setRating(0);
+      setTitle('');
+      setContent('');
+      setPros([]);
+      setCons([]);
+      setAuthorName('');
+      setAuthorEmail('');
+
+      toast.success('Dziękujemy za opinię!');
+    } catch (error) {
+      toast.error('Nie udało się dodać opinii. Spróbuj ponownie.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle>Dodaj opinię</CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Podziel się swoją opinią o produkcie: {productTitle}
+        </p>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Rating */}
+          <div>
+            <Label className="mb-2 block">Ocena *</Label>
+            <div className="flex items-center gap-1">
+              {[1, 2, 3, 4, 5].map((star) => (
+                <button
+                  key={star}
+                  type="button"
+                  onClick={() => setRating(star)}
+                  onMouseEnter={() => setHoverRating(star)}
+                  onMouseLeave={() => setHoverRating(0)}
+                  className="focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+                >
+                  <Star
+                    className={cn(
+                      'h-8 w-8 transition-colors',
+                      (hoverRating || rating) >= star
+                        ? 'fill-yellow-400 text-yellow-400'
+                        : 'text-muted-foreground'
+                    )}
+                  />
+                </button>
+              ))}
+              {rating > 0 && (
+                <span className="ml-2 text-sm text-muted-foreground">
+                  {rating === 1 && 'Bardzo słabo'}
+                  {rating === 2 && 'Słabo'}
+                  {rating === 3 && 'Średnio'}
+                  {rating === 4 && 'Dobrze'}
+                  {rating === 5 && 'Doskonale'}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Title */}
+          <div>
+            <Label htmlFor="title">Tytuł opinii</Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Krótkie podsumowanie..."
+              maxLength={100}
+              className="mt-1.5"
+            />
+          </div>
+
+          {/* Content */}
+          <div>
+            <Label htmlFor="content">Treść opinii *</Label>
+            <TextareaComponent
+              id="content"
+              value={content}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value)}
+              placeholder="Opisz swoje doświadczenia z produktem..."
+              rows={4}
+              className="mt-1.5"
+              required
+            />
+          </div>
+
+          {/* Pros */}
+          <div>
+            <Label>Zalety</Label>
+            <div className="flex gap-2 mt-1.5">
+              <Input
+                value={newPro}
+                onChange={(e) => setNewPro(e.target.value)}
+                placeholder="Dodaj zaletę..."
+                maxLength={50}
+                onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddPro())}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={handleAddPro}
+                disabled={!newPro.trim() || pros.length >= 5}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+            {pros.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-2">
+                {pros.map((pro, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-700 rounded-md text-sm"
+                  >
+                    + {pro}
+                    <button
+                      type="button"
+                      onClick={() => handleRemovePro(i)}
+                      className="hover:text-green-900"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Cons */}
+          <div>
+            <Label>Wady</Label>
+            <div className="flex gap-2 mt-1.5">
+              <Input
+                value={newCon}
+                onChange={(e) => setNewCon(e.target.value)}
+                placeholder="Dodaj wadę..."
+                maxLength={50}
+                onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddCon())}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={handleAddCon}
+                disabled={!newCon.trim() || cons.length >= 5}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+            {cons.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-2">
+                {cons.map((con, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center gap-1 px-2 py-1 bg-red-100 text-red-700 rounded-md text-sm"
+                  >
+                    - {con}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveCon(i)}
+                      className="hover:text-red-900"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Author Info */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="authorName">Twoje imię *</Label>
+              <Input
+                id="authorName"
+                value={authorName}
+                onChange={(e) => setAuthorName(e.target.value)}
+                placeholder="Jan"
+                className="mt-1.5"
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="authorEmail">Email (opcjonalnie)</Label>
+              <Input
+                id="authorEmail"
+                type="email"
+                value={authorEmail}
+                onChange={(e) => setAuthorEmail(e.target.value)}
+                placeholder="jan@email.com"
+                className="mt-1.5"
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                Nie będzie widoczny publicznie
+              </p>
+            </div>
+          </div>
+
+          {/* Submit */}
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Wysyłanie...
+              </>
+            ) : (
+              'Dodaj opinię'
+            )}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/review-summary.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+/**
+ * ReviewSummary Component
+ *
+ * Displays product review statistics with rating breakdown.
+ */
+
+import { Star } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ReviewStats {
+  totalCount: number;
+  averageRating: number;
+  fiveStarCount: number;
+  fourStarCount: number;
+  threeStarCount: number;
+  twoStarCount: number;
+  oneStarCount: number;
+}
+
+interface ReviewSummaryProps {
+  stats: ReviewStats;
+  className?: string;
+}
+
+export function ReviewSummary({ stats, className }: ReviewSummaryProps) {
+  const {
+    totalCount,
+    averageRating,
+    fiveStarCount,
+    fourStarCount,
+    threeStarCount,
+    twoStarCount,
+    oneStarCount,
+  } = stats;
+
+  const ratingBars = [
+    { stars: 5, count: fiveStarCount },
+    { stars: 4, count: fourStarCount },
+    { stars: 3, count: threeStarCount },
+    { stars: 2, count: twoStarCount },
+    { stars: 1, count: oneStarCount },
+  ];
+
+  return (
+    <div className={cn('flex flex-col sm:flex-row gap-6', className)}>
+      {/* Average Rating */}
+      <div className="flex flex-col items-center justify-center text-center min-w-32">
+        <div className="text-5xl font-bold">{averageRating.toFixed(1)}</div>
+        <StarRating rating={averageRating} size="lg" className="mt-2" />
+        <p className="text-sm text-muted-foreground mt-1">
+          {totalCount} {totalCount === 1 ? 'opinia' : totalCount < 5 ? 'opinie' : 'opinii'}
+        </p>
+      </div>
+
+      {/* Rating Distribution */}
+      <div className="flex-1 space-y-2">
+        {ratingBars.map(({ stars, count }) => {
+          const percentage = totalCount > 0 ? (count / totalCount) * 100 : 0;
+          return (
+            <div key={stars} className="flex items-center gap-2">
+              <span className="text-sm w-4 text-muted-foreground">{stars}</span>
+              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+              <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-yellow-400 transition-all duration-300"
+                  style={{ width: `${percentage}%` }}
+                />
+              </div>
+              <span className="text-sm w-8 text-muted-foreground text-right">
+                {count}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StarRating Component - Displays star rating
+ */
+interface StarRatingProps {
+  rating: number;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  showValue?: boolean;
+}
+
+export function StarRating({
+  rating,
+  size = 'md',
+  className,
+  showValue = false,
+}: StarRatingProps) {
+  const sizeClasses = {
+    sm: 'h-3 w-3',
+    md: 'h-4 w-4',
+    lg: 'h-5 w-5',
+  };
+
+  const stars = [];
+  for (let i = 1; i <= 5; i++) {
+    const filled = i <= Math.floor(rating);
+    const partial = !filled && i === Math.ceil(rating) && rating % 1 !== 0;
+
+    stars.push(
+      <span key={i} className="relative">
+        <Star
+          className={cn(
+            sizeClasses[size],
+            'text-yellow-400',
+            filled ? 'fill-yellow-400' : 'fill-muted'
+          )}
+        />
+        {partial && (
+          <Star
+            className={cn(
+              sizeClasses[size],
+              'absolute inset-0 fill-yellow-400 text-yellow-400'
+            )}
+            style={{
+              clipPath: `inset(0 ${100 - (rating % 1) * 100}% 0 0)`,
+            }}
+          />
+        )}
+      </span>
+    );
+  }
+
+  return (
+    <div className={cn('flex items-center gap-0.5', className)}>
+      {stars}
+      {showValue && (
+        <span className="ml-1 text-sm text-muted-foreground">
+          {rating.toFixed(1)}
+        </span>
+      )}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/sale-countdown.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Clock, Flame } from "lucide-react";
+
+export interface SaleCountdownProps {
+  endDate: string;
+  onExpire?: () => void;
+  showIcon?: boolean;
+  compact?: boolean;
+  className?: string;
+}
+
+/**
+ * SaleCountdown - Countdown timer for sales and limited offers
+ */
+export function SaleCountdown({
+  endDate,
+  onExpire,
+  showIcon = true,
+  compact = false,
+  className = "",
+}: SaleCountdownProps) {
+  const [timeLeft, setTimeLeft] = useState<{
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+  } | null>(null);
+  const [isExpired, setIsExpired] = useState(false);
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const difference = new Date(endDate).getTime() - new Date().getTime();
+
+      if (difference <= 0) {
+        setIsExpired(true);
+        onExpire?.();
+        return null;
+      }
+
+      return {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    };
+
+    // Initial calculation
+    setTimeLeft(calculateTimeLeft());
+
+    // Update every second
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [endDate, onExpire]);
+
+  if (isExpired) {
+    return (
+      <div
+        className={`inline-flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-sm text-muted-foreground ${className}`}
+      >
+        <Clock className="h-4 w-4" />
+        <span>Sale Ended</span>
+      </div>
+    );
+  }
+
+  if (!timeLeft) {
+    return null;
+  }
+
+  if (compact) {
+    return (
+      <div
+        className={`inline-flex items-center gap-2 rounded-md bg-red-100 dark:bg-red-900/30 px-3 py-1.5 text-sm font-semibold text-red-600 ${className}`}
+      >
+        {showIcon && <Flame className="h-4 w-4" />}
+        <span>
+          {timeLeft.days > 0 && `${timeLeft.days}d `}
+          {String(timeLeft.hours).padStart(2, "0")}:
+          {String(timeLeft.minutes).padStart(2, "0")}:
+          {String(timeLeft.seconds).padStart(2, "0")}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`rounded-lg border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900/20 p-4 ${className}`}
+    >
+      <div className="mb-3 flex items-center gap-2 text-red-600">
+        {showIcon && <Flame className="h-5 w-5" />}
+        <span className="font-semibold">Sale Ends In:</span>
+      </div>
+
+      <div className="grid grid-cols-4 gap-2">
+        <TimeUnit value={timeLeft.days} label="Days" />
+        <TimeUnit value={timeLeft.hours} label="Hours" />
+        <TimeUnit value={timeLeft.minutes} label="Mins" />
+        <TimeUnit value={timeLeft.seconds} label="Secs" />
+      </div>
+    </div>
+  );
+}
+
+interface TimeUnitProps {
+  value: number;
+  label: string;
+}
+
+function TimeUnit({ value, label }: TimeUnitProps) {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="flex h-12 w-full items-center justify-center rounded-md bg-white dark:bg-gray-800 text-2xl font-bold text-foreground">
+        {String(value).padStart(2, "0")}
+      </div>
+      <span className="mt-1 text-xs font-medium text-muted-foreground">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+export interface FlashSaleBannerProps {
+  endDate: string;
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+/**
+ * FlashSaleBanner - Prominent banner for flash sales
+ */
+export function FlashSaleBanner({
+  endDate,
+  title = "Flash Sale",
+  description = "Limited time offer - Don't miss out!",
+  className = "",
+}: FlashSaleBannerProps) {
+  return (
+    <div
+      className={`relative overflow-hidden rounded-lg bg-gradient-to-r from-red-600 to-orange-600 p-6 text-white ${className}`}
+    >
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==')]" />
+      </div>
+
+      <div className="relative z-10">
+        <div className="mb-4 flex items-center gap-2">
+          <Flame className="h-6 w-6" />
+          <h2 className="text-2xl font-bold">{title}</h2>
+        </div>
+
+        <p className="mb-6 text-white/90">{description}</p>
+
+        <SaleCountdown endDate={endDate} showIcon={false} />
+      </div>
+    </div>
+  );
+}