@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -1,15 +1,24 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
-import { Input } from "@/components/ui/input";
+import { useMemo } from "react";
+import { useTranslations } from "next-intl";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
+import { FilterPriceRange } from "./filter-price-range";
 import { cn } from "@/lib/utils";
 
 export interface FilterOption {
   label: string;
   value: string;
   count?: number;
+  colorHex?: string;
 }
 
 export interface FilterGroup {
@@ -19,6 +28,7 @@ export interface FilterGroup {
   options?: FilterOption[];
   min?: number;
   max?: number;
+  currency?: string;
 }
 
 export interface ProductFiltersProps {
@@ -30,20 +40,14 @@ export interface ProductFiltersProps {
 }
 
 /**
- * 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 });
- *   }}
- * />
- * ```
+ * ProductFilters - Accordion-based filter panel
+ *
+ * Supports:
+ * - Checkbox groups (categories, attributes) with Radix Checkbox
+ * - Color swatches with visual selection
+ * - Price range with dual-thumb Radix Slider
+ * - Filter count badges in accordion triggers
+ * - Clear all button
  */
 export function ProductFilters({
   filters,
@@ -52,11 +56,7 @@ export function ProductFilters({
   onClearAll,
   className,
 }: ProductFiltersProps) {
-  const [priceRange, setPriceRange] = useState<{ min: string; max: string }>({
-    min: "",
-    max: "",
-  });
-
+  const t = useTranslations("product");
   const handleCheckboxChange = (filterId: string, value: string) => {
     const current = selectedFilters[filterId] || [];
     const updated = current.includes(value)
@@ -65,20 +65,31 @@ export function ProductFilters({
     onFilterChange(filterId, updated);
   };
 
-  const handlePriceRangeApply = (filterId: string, min: number, max: number) => {
-    onFilterChange(filterId, [`${min}-${max}`]);
+  const handlePriceRangeChange = (
+    filterId: string,
+    min: number | undefined,
+    max: number | undefined
+  ) => {
+    if (min === undefined && max === undefined) {
+      onFilterChange(filterId, []);
+    } else {
+      onFilterChange(filterId, [`${min ?? 0}-${max ?? 999999}`]);
+    }
   };
 
   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]);
+  const defaultOpenFilters = useMemo(
+    () => filters.slice(0, 5).map((f) => f.id),
+    [filters]
+  );
+
+  if (filters.length === 0) return null;
 
   return (
     <div className={cn("space-y-4", className)}>
-      {/* Clear all button */}
       {hasActiveFilters && onClearAll && (
         <Button
           variant="outline"
@@ -86,11 +97,10 @@ export function ProductFilters({
           onClick={onClearAll}
           className="w-full"
         >
-          Clear all filters
+          {t("clearAllFilters")}
         </Button>
       )}
 
-      {/* Filter groups */}
       <Accordion type="multiple" defaultValue={defaultOpenFilters}>
         {filters.map((filter) => (
           <AccordionItem key={filter.id} value={filter.id}>
@@ -107,106 +117,44 @@ export function ProductFilters({
             <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>
+                <CheckboxFilterGroup
+                  filterId={filter.id}
+                  options={filter.options}
+                  selected={selectedFilters[filter.id] || []}
+                  onToggle={handleCheckboxChange}
+                />
               )}
 
-              {/* 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
-                      )
+              {/* Price / numeric range filter */}
+              {filter.type === "range" &&
+                filter.min != null &&
+                filter.max != null && (
+                  <FilterPriceRange
+                    min={filter.min}
+                    max={filter.max}
+                    currentMin={parseRangeValue(
+                      selectedFilters[filter.id],
+                      "min"
+                    )}
+                    currentMax={parseRangeValue(
+                      selectedFilters[filter.id],
+                      "max"
+                    )}
+                    currency={filter.currency}
+                    onChange={(min, max) =>
+                      handlePriceRangeChange(filter.id, min, max)
                     }
-                    className="w-full"
-                  >
-                    Apply
-                  </Button>
-                </div>
-              )}
+                  />
+                )}
 
-              {/* Color filters */}
+              {/* Color swatch 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>
+                <ColorSwatchGroup
+                  filterId={filter.id}
+                  options={filter.options}
+                  selected={selectedFilters[filter.id] || []}
+                  onToggle={handleCheckboxChange}
+                />
               )}
             </AccordionContent>
           </AccordionItem>
@@ -215,3 +163,110 @@ export function ProductFilters({
     </div>
   );
 }
+
+// ============================================================================
+// SUB-COMPONENTS
+// ============================================================================
+
+function CheckboxFilterGroup({
+  filterId,
+  options,
+  selected,
+  onToggle,
+}: {
+  filterId: string;
+  options: FilterOption[];
+  selected: string[];
+  onToggle: (filterId: string, value: string) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      {options.map((option) => {
+        const isChecked = selected.includes(option.value);
+        const checkboxId = `${filterId}-${option.value}`;
+
+        return (
+          <div key={option.value} className="flex items-center gap-2">
+            <Checkbox
+              id={checkboxId}
+              checked={isChecked}
+              onCheckedChange={() => onToggle(filterId, option.value)}
+            />
+            <Label
+              htmlFor={checkboxId}
+              className="flex flex-1 cursor-pointer items-center justify-between text-sm"
+            >
+              <span>{option.label}</span>
+              {option.count !== undefined && (
+                <span className="text-xs text-muted-foreground">
+                  ({option.count})
+                </span>
+              )}
+            </Label>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ColorSwatchGroup({
+  filterId,
+  options,
+  selected,
+  onToggle,
+}: {
+  filterId: string;
+  options: FilterOption[];
+  selected: string[];
+  onToggle: (filterId: string, value: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-3">
+      {options.map((option) => {
+        const isSelected = selected.includes(option.value);
+        const bgColor = option.colorHex || option.value;
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => onToggle(filterId, option.value)}
+            className="group flex flex-col items-center gap-1"
+            title={option.label}
+            aria-label={`${option.label}${option.count !== undefined ? ` (${option.count})` : ""}`}
+            aria-pressed={isSelected}
+          >
+            <span
+              className={cn(
+                "block h-8 w-8 rounded-full border-2 transition-all",
+                isSelected
+                  ? "border-primary ring-2 ring-ring ring-offset-2"
+                  : "border-border group-hover:border-primary"
+              )}
+              style={{ backgroundColor: bgColor }}
+            />
+            <span className="text-[10px] text-muted-foreground">
+              {option.label}
+              {option.count !== undefined && ` (${option.count})`}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+function parseRangeValue(
+  values: string[] | undefined,
+  part: "min" | "max"
+): number | undefined {
+  if (!values || values.length === 0) return undefined;
+  const [minStr, maxStr] = values[0].split("-");
+  const val = parseFloat(part === "min" ? minStr : maxStr);
+  return isNaN(val) ? undefined : val;
+}

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

@@ -1,14 +1,12 @@
 "use client";
 
-import { ProductCard, type ProductCardProduct } from "./product-card";
+import { ProductCard } from "./product-card";
 import { EmptyProducts } from "@/components/ui/empty-state";
 import { cn } from "@/lib/utils";
-
-// Re-export for external use
-export type { ProductCardProduct };
+import type { ProductCardFields } from "@/lib/graphql/fragments";
 
 export interface ProductGridProps {
-  products: ProductCardProduct[];
+  products: ProductCardFields[];
   className?: string;
   columns?: 2 | 3 | 4 | 5;
   gap?: "sm" | "md" | "lg";

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

@@ -3,13 +3,9 @@
 import { useState } from "react";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
+import type { ImageData } from "@doswiftly/storefront-sdk";
 
-export interface ProductImageData {
-  url: string;
-  altText?: string | null;
-  width?: number;
-  height?: number;
-}
+export type ProductImageData = ImageData;
 
 export interface ProductImageProps {
   image?: ProductImageData | null;
@@ -115,7 +111,7 @@ export function ProductImage({
 
   const imageAlt = alt || image.altText || "Product image";
 
-  // Common image props
+  // Global loaderFile (next.config.ts) handles imgproxy resize — no per-component loader needed
   const commonProps = {
     src: image.url,
     alt: imageAlt,

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { formatPrice } from "@/lib/format";
-import type { PriceMoney } from "@/lib/format";
+import { formatPrice } from "@doswiftly/storefront-sdk";
+import type { PriceMoney } from "@doswiftly/storefront-sdk";
 
 export interface ProductPriceMoney {
   amount: string;

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

@@ -199,10 +199,11 @@ export function ProductReviews({
           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}
+          action={onSubmitReview ? (
+            <Button onClick={() => setShowForm(true)}>
+              Napisz opinię
+            </Button>
+          ) : undefined}
         />
       ) : (
         <div className="space-y-4">

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

@@ -1,6 +1,14 @@
 "use client";
 
-import { Select } from "@/components/ui/select";
+import { useMemo } from "react";
+import { useTranslations } from "next-intl";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 // Sort options that match backend expectations
 // Backend should normalize these to ProductSortKeys + reverse flag
@@ -20,39 +28,56 @@ export interface ProductSortProps {
   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" },
+const SORT_OPTION_KEYS: { value: SortOption; labelKey: string }[] = [
+  { value: "relevance", labelKey: "sortOptions.relevance" },
+  { value: "best-selling", labelKey: "sortOptions.bestSelling" },
+  { value: "price-low-to-high", labelKey: "sortOptions.priceLowToHigh" },
+  { value: "price-high-to-low", labelKey: "sortOptions.priceHighToLow" },
+  { value: "title-asc", labelKey: "sortOptions.titleAsc" },
+  { value: "title-desc", labelKey: "sortOptions.titleDesc" },
+  { value: "created-desc", labelKey: "sortOptions.newestFirst" },
+  { value: "created-asc", labelKey: "sortOptions.oldestFirst" },
 ];
 
 /**
  * ProductSort - Sorting dropdown for product listings
- * 
+ *
  * @example
  * ```tsx
  * const [sort, setSort] = useState<SortOption>("featured");
- * 
- * <ProductSort 
+ *
+ * <ProductSort
  *   value={sort}
  *   onChange={setSort}
  * />
  * ```
  */
 export function ProductSort({ value, onChange, className }: ProductSortProps) {
+  const t = useTranslations("product");
+
+  const sortOptions = useMemo(
+    () =>
+      SORT_OPTION_KEYS.map((opt) => ({
+        value: opt.value,
+        label: t(opt.labelKey),
+      })),
+    [t]
+  );
+
   return (
     <div className={className}>
-      <Select
-        value={value}
-        onChange={(e) => onChange(e.target.value as SortOption)}
-        label="Sort by"
-        options={sortOptions}
-      />
+      <Select value={value} onValueChange={(val) => onChange(val as SortOption)}>
+        <SelectTrigger>
+          <SelectValue placeholder={t("sortBy")} />
+        </SelectTrigger>
+        <SelectContent>
+          {sortOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
 }

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

@@ -2,36 +2,21 @@
 
 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;
-  };
-}
+import type { ProductVariantFields } from "@/lib/graphql/fragments";
 
 export interface ProductVariantSelectorProps {
-  variants: ProductVariant[];
+  variants: ProductVariantFields[];
   selectedVariantId?: string;
-  onVariantChange: (variant: ProductVariant) => void;
+  onVariantChange: (variant: ProductVariantFields) => 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
@@ -78,12 +63,12 @@ export function ProductVariantSelector({
         ...acc,
         [opt.name]: opt.value,
       }),
-      {}
+      {} as Record<string, string>
     );
   });
 
   // Find variant matching current selection
-  const findMatchingVariant = (opts: Record<string, string>): ProductVariant | undefined => {
+  const findMatchingVariant = (opts: Record<string, string>): ProductVariantFields | undefined => {
     return variants.find((variant) =>
       variant.selectedOptions.every((opt) => opts[opt.name] === opt.value)
     );
@@ -114,7 +99,7 @@ export function ProductVariantSelector({
       if (variant) {
         const opts = variant.selectedOptions.reduce(
           (acc, opt) => ({ ...acc, [opt.name]: opt.value }),
-          {}
+          {} as Record<string, string>
         );
         setSelectedOptions(opts);
       }

package/templates/storefront-nextjs-shadcn/components/product/product-variant.fragment.graphql

@@ -0,0 +1,51 @@
+# Fragment for ProductVariant data.
+#
+# Used within ProductDetailFields and any component that renders
+# variant selectors (size, color), pricing, and availability.
+#
+# Usage in components:
+#   import type { ProductVariantFieldsFragment } from '@/generated/graphql';
+#   interface Props { variant: ProductVariantFieldsFragment }
+
+fragment ProductVariantFields on ProductVariant {
+  id
+  title
+  sku
+  available
+  quantityAvailable
+  barcode
+  weight
+  position
+  price {
+    amount
+    currencyCode
+    baseAmount
+    baseCurrencyCode
+    isConverted
+  }
+  originalPrice {
+    amount
+    currencyCode
+  }
+  compareAtPrice {
+    amount
+    currencyCode
+    baseAmount
+    baseCurrencyCode
+    isConverted
+  }
+  originalCompareAtPrice {
+    amount
+    currencyCode
+  }
+  image {
+    url
+    altText
+    width
+    height
+  }
+  selectedOptions {
+    name
+    value
+  }
+}

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

@@ -110,7 +110,7 @@ export function ReviewCard({ review, onVoteHelpful, className }: ReviewCardProps
           <p className="text-foreground whitespace-pre-line">{displayContent}</p>
           {shouldTruncate && (
             <Button
-              variant="link"
+              variant="ghost"
               size="sm"
               className="p-0 h-auto mt-1"
               onClick={() => setExpanded(!expanded)}