@doswiftly/cli 0.1.1

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

@@ -0,0 +1,238 @@
+'use client';
+
+/**
+ * ProductReviews Component
+ *
+ * Complete reviews section with summary, list, and form.
+ */
+
+import { useState } from 'react';
+import { MessageSquare, SlidersHorizontal, ChevronDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Spinner } from '@/components/ui/spinner';
+import { ReviewSummary } from './review-summary';
+import { ReviewCard } from './review-card';
+import { ReviewForm, type ReviewFormData } from './review-form';
+import { cn } from '@/lib/utils';
+
+interface ProductReview {
+  id: string;
+  productId: string;
+  rating: number;
+  title?: string;
+  content: string;
+  pros: string[];
+  cons: string[];
+  images: string[];
+  authorName: string;
+  isVerifiedPurchase: boolean;
+  helpfulCount: number;
+  response?: string;
+  responseAt?: Date;
+  createdAt: Date;
+}
+
+interface ReviewStats {
+  totalCount: number;
+  averageRating: number;
+  fiveStarCount: number;
+  fourStarCount: number;
+  threeStarCount: number;
+  twoStarCount: number;
+  oneStarCount: number;
+}
+
+type SortKey = 'CREATED_AT' | 'RATING' | 'HELPFUL_COUNT';
+
+interface ProductReviewsProps {
+  productId: string;
+  productTitle: string;
+  reviews: ProductReview[];
+  stats: ReviewStats;
+  isLoading?: boolean;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  onSortChange?: (sortKey: SortKey, reverse: boolean) => void;
+  onFilterChange?: (filters: { verifiedOnly?: boolean; withPhotosOnly?: boolean }) => void;
+  onSubmitReview?: (data: ReviewFormData) => Promise<void>;
+  onVoteHelpful?: (reviewId: string) => void;
+  className?: string;
+}
+
+export function ProductReviews({
+  productId,
+  productTitle,
+  reviews,
+  stats,
+  isLoading = false,
+  hasMore = false,
+  onLoadMore,
+  onSortChange,
+  onFilterChange,
+  onSubmitReview,
+  onVoteHelpful,
+  className,
+}: ProductReviewsProps) {
+  const [sortKey, setSortKey] = useState<SortKey>('CREATED_AT');
+  const [sortReverse, setSortReverse] = useState(true);
+  const [verifiedOnly, setVerifiedOnly] = useState(false);
+  const [withPhotosOnly, setWithPhotosOnly] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+
+  const handleSortChange = (value: string) => {
+    const [key, direction] = value.split(':') as [SortKey, 'asc' | 'desc'];
+    setSortKey(key);
+    setSortReverse(direction === 'desc');
+    onSortChange?.(key, direction === 'desc');
+  };
+
+  const handleFilterChange = (type: 'verified' | 'photos', checked: boolean) => {
+    const newVerified = type === 'verified' ? checked : verifiedOnly;
+    const newPhotos = type === 'photos' ? checked : withPhotosOnly;
+
+    if (type === 'verified') setVerifiedOnly(checked);
+    if (type === 'photos') setWithPhotosOnly(checked);
+
+    onFilterChange?.({
+      verifiedOnly: newVerified || undefined,
+      withPhotosOnly: newPhotos || undefined,
+    });
+  };
+
+  const handleSubmitReview = async (data: ReviewFormData) => {
+    await onSubmitReview?.(data);
+    setShowForm(false);
+  };
+
+  return (
+    <section className={cn('space-y-8', className)} id="reviews">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold tracking-tight flex items-center gap-2">
+          <MessageSquare className="h-6 w-6" />
+          Opinie klientów
+        </h2>
+        {onSubmitReview && (
+          <Button onClick={() => setShowForm(!showForm)}>
+            {showForm ? 'Anuluj' : 'Napisz opinię'}
+          </Button>
+        )}
+      </div>
+
+      {/* Review Form */}
+      {showForm && onSubmitReview && (
+        <ReviewForm
+          productId={productId}
+          productTitle={productTitle}
+          onSubmit={handleSubmitReview}
+        />
+      )}
+
+      {/* Summary */}
+      {stats.totalCount > 0 && (
+        <ReviewSummary stats={stats} />
+      )}
+
+      {/* Filters & Sort */}
+      {reviews.length > 0 && (
+        <div className="flex flex-col sm:flex-row justify-between gap-4 pb-4 border-b">
+          <div className="flex items-center gap-4 flex-wrap">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="verified"
+                checked={verifiedOnly}
+                onCheckedChange={(checked) => handleFilterChange('verified', checked as boolean)}
+              />
+              <Label htmlFor="verified" className="text-sm cursor-pointer">
+                Tylko zweryfikowane zakupy
+              </Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="photos"
+                checked={withPhotosOnly}
+                onCheckedChange={(checked) => handleFilterChange('photos', checked as boolean)}
+              />
+              <Label htmlFor="photos" className="text-sm cursor-pointer">
+                Ze zdjęciami
+              </Label>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <SlidersHorizontal className="h-4 w-4 text-muted-foreground" />
+            <Select
+              value={`${sortKey}:${sortReverse ? 'desc' : 'asc'}`}
+              onValueChange={handleSortChange}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Sortuj" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="CREATED_AT:desc">Najnowsze</SelectItem>
+                <SelectItem value="CREATED_AT:asc">Najstarsze</SelectItem>
+                <SelectItem value="RATING:desc">Najwyższa ocena</SelectItem>
+                <SelectItem value="RATING:asc">Najniższa ocena</SelectItem>
+                <SelectItem value="HELPFUL_COUNT:desc">Najbardziej pomocne</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      )}
+
+      {/* Reviews List */}
+      {isLoading && reviews.length === 0 ? (
+        <div className="flex justify-center py-12">
+          <Spinner size="lg" />
+        </div>
+      ) : reviews.length === 0 ? (
+        <EmptyState
+          icon={<MessageSquare className="h-12 w-12" />}
+          title="Brak opinii"
+          description="Bądź pierwszą osobą, która podzieli się opinią o tym produkcie."
+          action={onSubmitReview ? {
+            label: 'Napisz opinię',
+            onClick: () => setShowForm(true),
+          } : undefined}
+        />
+      ) : (
+        <div className="space-y-4">
+          {reviews.map((review) => (
+            <ReviewCard
+              key={review.id}
+              review={review}
+              onVoteHelpful={onVoteHelpful}
+            />
+          ))}
+
+          {/* Load More */}
+          {hasMore && onLoadMore && (
+            <div className="flex justify-center pt-4">
+              <Button
+                variant="outline"
+                onClick={onLoadMore}
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <Spinner size="sm" className="mr-2" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 mr-2" />
+                )}
+                Załaduj więcej opinii
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,58 @@
+"use client";
+
+import { Select } from "@/components/ui/select";
+
+// Sort options that match backend expectations
+// Backend should normalize these to ProductSortKeys + reverse flag
+export type SortOption =
+  | "relevance"
+  | "best-selling"
+  | "price-low-to-high"
+  | "price-high-to-low"
+  | "title-asc"
+  | "title-desc"
+  | "created-desc"
+  | "created-asc";
+
+export interface ProductSortProps {
+  value: SortOption;
+  onChange: (value: SortOption) => void;
+  className?: string;
+}
+
+const sortOptions: { value: SortOption; label: string }[] = [
+  { value: "relevance", label: "Featured" },
+  { value: "best-selling", label: "Best Selling" },
+  { value: "price-low-to-high", label: "Price: Low to High" },
+  { value: "price-high-to-low", label: "Price: High to Low" },
+  { value: "title-asc", label: "Name: A to Z" },
+  { value: "title-desc", label: "Name: Z to A" },
+  { value: "created-desc", label: "Newest First" },
+  { value: "created-asc", label: "Oldest First" },
+];
+
+/**
+ * ProductSort - Sorting dropdown for product listings
+ * 
+ * @example
+ * ```tsx
+ * const [sort, setSort] = useState<SortOption>("featured");
+ * 
+ * <ProductSort 
+ *   value={sort}
+ *   onChange={setSort}
+ * />
+ * ```
+ */
+export function ProductSort({ value, onChange, className }: ProductSortProps) {
+  return (
+    <div className={className}>
+      <Select
+        value={value}
+        onChange={(e) => onChange(e.target.value as SortOption)}
+        label="Sort by"
+        options={sortOptions}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,169 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { cn } from "@/lib/utils";
+
+export interface VariantOption {
+  name: string;
+  value: string;
+}
+
+export interface ProductVariant {
+  id: string;
+  title: string;
+  available: boolean;
+  selectedOptions: VariantOption[];
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+}
+
+export interface ProductVariantSelectorProps {
+  variants: ProductVariant[];
+  selectedVariantId?: string;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+/**
+ * ProductVariantSelector - Select product options (size, color, etc.)
+ * 
+ * Extracts unique options from variants and allows selection.
+ * Automatically finds matching variant when options change.
+ * 
+ * @example
+ * ```tsx
+ * <ProductVariantSelector
+ *   variants={product.variants}
+ *   selectedVariantId={selectedVariant?.id}
+ *   onVariantChange={setSelectedVariant}
+ * />
+ * ```
+ */
+export function ProductVariantSelector({
+  variants,
+  selectedVariantId,
+  onVariantChange,
+  className,
+}: ProductVariantSelectorProps) {
+  // Extract unique option names and their values
+  const options = variants.reduce((acc, variant) => {
+    variant.selectedOptions.forEach((opt) => {
+      if (!acc[opt.name]) {
+        acc[opt.name] = new Set<string>();
+      }
+      acc[opt.name].add(opt.value);
+    });
+    return acc;
+  }, {} as Record<string, Set<string>>);
+
+  const optionGroups = Object.entries(options).map(([name, values]) => ({
+    name,
+    values: Array.from(values),
+  }));
+
+  // Currently selected values for each option
+  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>(() => {
+    // Try to find the specified variant, or fall back to first variant
+    const initialVariant = selectedVariantId
+      ? variants.find((v) => v.id === selectedVariantId) ?? variants[0]
+      : variants[0];
+
+    // If no variants available at all, return empty object
+    if (!initialVariant?.selectedOptions) return {};
+
+    return initialVariant.selectedOptions.reduce(
+      (acc, opt) => ({
+        ...acc,
+        [opt.name]: opt.value,
+      }),
+      {}
+    );
+  });
+
+  // Find variant matching current selection
+  const findMatchingVariant = (opts: Record<string, string>): ProductVariant | undefined => {
+    return variants.find((variant) =>
+      variant.selectedOptions.every((opt) => opts[opt.name] === opt.value)
+    );
+  };
+
+  // Check if option value leads to available variant
+  const isOptionAvailable = (optionName: string, optionValue: string): boolean => {
+    const testOptions = { ...selectedOptions, [optionName]: optionValue };
+    const matchingVariant = findMatchingVariant(testOptions);
+    return matchingVariant?.available ?? false;
+  };
+
+  // Handle option selection
+  const handleOptionChange = (optionName: string, optionValue: string) => {
+    const newOptions = { ...selectedOptions, [optionName]: optionValue };
+    setSelectedOptions(newOptions);
+
+    const matchingVariant = findMatchingVariant(newOptions);
+    if (matchingVariant) {
+      onVariantChange(matchingVariant);
+    }
+  };
+
+  // Sync when selectedVariantId changes externally
+  useEffect(() => {
+    if (selectedVariantId) {
+      const variant = variants.find((v) => v.id === selectedVariantId);
+      if (variant) {
+        const opts = variant.selectedOptions.reduce(
+          (acc, opt) => ({ ...acc, [opt.name]: opt.value }),
+          {}
+        );
+        setSelectedOptions(opts);
+      }
+    }
+  }, [selectedVariantId, variants]);
+
+  // Don't render if only one variant with no meaningful options
+  if (variants.length <= 1 && optionGroups.every((o) => o.values.length <= 1)) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {optionGroups.map((option) => (
+        <div key={option.name}>
+          <label className="mb-2 block text-sm font-medium text-foreground">
+            {option.name}
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {option.values.map((value) => {
+              const isSelected = selectedOptions[option.name] === value;
+              const available = isOptionAvailable(option.name, value);
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => handleOptionChange(option.name, value)}
+                  disabled={!available}
+                  className={cn(
+                    "relative min-w-[3rem] rounded-lg border px-4 py-2 text-sm font-medium transition-all",
+                    isSelected
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : available
+                      ? "border-border bg-background text-foreground hover:border-primary"
+                      : "cursor-not-allowed border-border bg-muted text-muted-foreground opacity-50"
+                  )}
+                >
+                  {value}
+                  {/* Out of stock indicator */}
+                  {!available && (
+                    <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-background bg-muted-foreground" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,220 @@
+'use client';
+
+/**
+ * ReviewCard Component
+ *
+ * Displays a single product review with author info, rating, and content.
+ */
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { Check, ThumbsUp, ChevronDown, ChevronUp, Store } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { StarRating } from './review-summary';
+
+interface ProductReview {
+  id: string;
+  productId: string;
+  rating: number;
+  title?: string;
+  content: string;
+  pros: string[];
+  cons: string[];
+  images: string[];
+  authorName: string;
+  isVerifiedPurchase: boolean;
+  helpfulCount: number;
+  response?: string;
+  responseAt?: Date;
+  createdAt: Date;
+}
+
+interface ReviewCardProps {
+  review: ProductReview;
+  onVoteHelpful?: (reviewId: string) => void;
+  className?: string;
+}
+
+export function ReviewCard({ review, onVoteHelpful, className }: ReviewCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [voted, setVoted] = useState(false);
+
+  const {
+    id,
+    rating,
+    title,
+    content,
+    pros,
+    cons,
+    images,
+    authorName,
+    isVerifiedPurchase,
+    helpfulCount,
+    response,
+    responseAt,
+    createdAt,
+  } = review;
+
+  const shouldTruncate = content.length > 300;
+  const displayContent = expanded || !shouldTruncate
+    ? content
+    : content.slice(0, 300) + '...';
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('pl-PL', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(new Date(date));
+  };
+
+  const handleVote = () => {
+    if (!voted && onVoteHelpful) {
+      setVoted(true);
+      onVoteHelpful(id);
+    }
+  };
+
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      <CardContent className="p-4">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <div className="flex items-center gap-2">
+              <StarRating rating={rating} size="sm" />
+              {title && (
+                <span className="font-semibold text-foreground">{title}</span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground">
+              <span className="font-medium">{authorName}</span>
+              {isVerifiedPurchase && (
+                <Badge variant="secondary" className="text-xs gap-1">
+                  <Check className="h-3 w-3" />
+                  Zweryfikowany zakup
+                </Badge>
+              )}
+            </div>
+          </div>
+          <time className="text-sm text-muted-foreground whitespace-nowrap">
+            {formatDate(createdAt)}
+          </time>
+        </div>
+
+        {/* Content */}
+        <div className="mt-4">
+          <p className="text-foreground whitespace-pre-line">{displayContent}</p>
+          {shouldTruncate && (
+            <Button
+              variant="link"
+              size="sm"
+              className="p-0 h-auto mt-1"
+              onClick={() => setExpanded(!expanded)}
+            >
+              {expanded ? (
+                <>
+                  <ChevronUp className="h-4 w-4 mr-1" />
+                  Zwiń
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="h-4 w-4 mr-1" />
+                  Czytaj więcej
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+
+        {/* Pros & Cons */}
+        {(pros.length > 0 || cons.length > 0) && (
+          <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {pros.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-green-600 mb-1">Zalety</h4>
+                <ul className="text-sm space-y-0.5">
+                  {pros.map((pro, i) => (
+                    <li key={i} className="flex items-start gap-1">
+                      <span className="text-green-600">+</span>
+                      <span>{pro}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {cons.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-red-600 mb-1">Wady</h4>
+                <ul className="text-sm space-y-0.5">
+                  {cons.map((con, i) => (
+                    <li key={i} className="flex items-start gap-1">
+                      <span className="text-red-600">-</span>
+                      <span>{con}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Images */}
+        {images.length > 0 && (
+          <div className="mt-4 flex gap-2 flex-wrap">
+            {images.map((image, i) => (
+              <button
+                key={i}
+                className="relative w-16 h-16 rounded-md overflow-hidden bg-muted hover:opacity-80 transition-opacity"
+              >
+                <Image
+                  src={image}
+                  alt={`Zdjęcie recenzji ${i + 1}`}
+                  fill
+                  className="object-cover"
+                  sizes="64px"
+                />
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Store Response */}
+        {response && (
+          <div className="mt-4 p-3 bg-muted/50 rounded-lg border-l-4 border-primary">
+            <div className="flex items-center gap-2 text-sm font-medium mb-1">
+              <Store className="h-4 w-4" />
+              Odpowiedź sklepu
+              {responseAt && (
+                <span className="text-muted-foreground font-normal">
+                  · {formatDate(responseAt)}
+                </span>
+              )}
+            </div>
+            <p className="text-sm text-foreground">{response}</p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="mt-4 flex items-center justify-between">
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'text-muted-foreground',
+              voted && 'text-primary'
+            )}
+            onClick={handleVote}
+            disabled={voted}
+          >
+            <ThumbsUp className={cn('h-4 w-4 mr-1.5', voted && 'fill-current')} />
+            Pomocna ({helpfulCount + (voted ? 1 : 0)})
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}