@doswiftly/cli 0.1.18 → 0.1.19

package/templates/storefront-nextjs-shadcn/components/loyalty/referral-section.tsx

@@ -19,18 +19,10 @@ import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
-
-interface ReferralStats {
-  totalReferred: number;
-  completedReferrals: number;
-  pendingReferrals: number;
-  totalPointsEarned: number;
-}
+import type { ReferralStats } from '@/lib/graphql/fragments';
 
 interface ReferralSectionProps {
-  referralCode: string;
-  shareUrl: string;
-  stats: ReferralStats;
+  referralStats: ReferralStats;
   pointsName?: string;
   referralPoints?: number;
   bonusPoints?: number;
@@ -38,14 +30,13 @@ interface ReferralSectionProps {
 }
 
 export function ReferralSection({
-  referralCode,
-  shareUrl,
-  stats,
+  referralStats,
   pointsName = 'punktów',
   referralPoints = 0,
   bonusPoints = 0,
   className,
 }: ReferralSectionProps) {
+  const { referralCode, shareUrl } = referralStats;
   const [copied, setCopied] = useState<'code' | 'url' | null>(null);
 
   const formatNumber = (num: number) => {
@@ -199,7 +190,7 @@ export function ReferralSection({
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             <div className="p-4 bg-muted/50 rounded-lg text-center">
               <div className="text-2xl font-bold text-primary">
-                {formatNumber(stats.totalReferred)}
+                {formatNumber(referralStats.totalReferred)}
               </div>
               <div className="text-sm text-muted-foreground">Zaproszonych</div>
             </div>
@@ -207,7 +198,7 @@ export function ReferralSection({
             <div className="p-4 bg-muted/50 rounded-lg text-center">
               <div className="flex items-center justify-center gap-1">
                 <div className="text-2xl font-bold text-green-600">
-                  {formatNumber(stats.completedReferrals)}
+                  {formatNumber(referralStats.completedReferrals)}
                 </div>
                 <Check className="h-5 w-5 text-green-600" />
               </div>
@@ -217,7 +208,7 @@ export function ReferralSection({
             <div className="p-4 bg-muted/50 rounded-lg text-center">
               <div className="flex items-center justify-center gap-1">
                 <div className="text-2xl font-bold text-amber-600">
-                  {formatNumber(stats.pendingReferrals)}
+                  {formatNumber(referralStats.pendingReferrals)}
                 </div>
                 <Clock className="h-5 w-5 text-amber-600" />
               </div>
@@ -226,7 +217,7 @@ export function ReferralSection({
 
             <div className="p-4 bg-muted/50 rounded-lg text-center">
               <div className="text-2xl font-bold text-primary">
-                {formatNumber(stats.totalPointsEarned)}
+                {formatNumber(referralStats.totalPointsEarned)}
               </div>
               <div className="text-sm text-muted-foreground">
                 Zdobytych {pointsName}
@@ -234,11 +225,11 @@ export function ReferralSection({
             </div>
           </div>
 
-          {stats.pendingReferrals > 0 && (
+          {referralStats.pendingReferrals > 0 && (
             <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-950/30 rounded-lg border border-amber-200 dark:border-amber-800">
               <p className="text-sm text-amber-800 dark:text-amber-200">
                 <Clock className="h-4 w-4 inline mr-1" />
-                Masz {stats.pendingReferrals} oczekujących poleceń. Punkty zostaną
+                Masz {referralStats.pendingReferrals} oczekujących poleceń. Punkty zostaną
                 przyznane po dokonaniu pierwszego zakupu przez poleconą osobę.
               </p>
             </div>

package/templates/storefront-nextjs-shadcn/components/loyalty/rewards-catalog.tsx

@@ -15,41 +15,17 @@ import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
 import { TierBadge } from './tier-badge';
 import { toast } from 'sonner';
-
-type TierType = 'BRONZE' | 'SILVER' | 'GOLD' | 'PLATINUM' | 'DIAMOND';
-
-interface Reward {
-  id: string;
-  name: string;
-  slug: string;
-  type: string;
-  pointsCost: number;
-  discountPercent?: number;
-  discountAmount?: {
-    amount: string;
-    currencyCode: string;
-  };
-  description?: string;
-  image?: {
-    url: string;
-    altText?: string | null;
-  } | null;
-  available: boolean;
-  tierRequired?: TierType | null;
-  remainingRedemptions?: number;
-}
-
-interface RedeemResult {
-  discountCode?: string | null;
-  productDiscountCode?: string | null;
-  giftCardCode?: string | null;
-}
+import type { LoyaltyReward, LoyaltyTier } from '@/lib/graphql/fragments';
 
 interface RewardsCatalogProps {
-  rewards: Reward[];
+  rewards: LoyaltyReward[];
   currentPoints: number;
-  currentTier?: TierType | null;
-  onRedeem?: (rewardId: string) => Promise<RedeemResult>;
+  currentTier?: LoyaltyTier['type'] | null;
+  onRedeem?: (rewardId: string) => Promise<{
+    discountCode?: string | null;
+    productDiscountCode?: string | null;
+    giftCardCode?: string | null;
+  }>;
   className?: string;
 }
 
@@ -73,13 +49,13 @@ export function RewardsCatalog({
     }).format(parseFloat(amount));
   };
 
-  const tierOrder: TierType[] = ['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND'];
-  const canAccessTier = (requiredTier?: TierType | null) => {
-    if (!requiredTier || !currentTier) return true;
-    return tierOrder.indexOf(currentTier) >= tierOrder.indexOf(requiredTier);
+  const tierOrder: string[] = ['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND'];
+  const canAccessTier = (requiredTierType?: string | null) => {
+    if (!requiredTierType || !currentTier) return true;
+    return tierOrder.indexOf(currentTier) >= tierOrder.indexOf(requiredTierType);
   };
 
-  const handleRedeem = async (reward: Reward) => {
+  const handleRedeem = async (reward: LoyaltyReward) => {
     if (!onRedeem) return;
 
     setRedeemingId(reward.id);
@@ -125,7 +101,7 @@ export function RewardsCatalog({
     <div className={cn('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4', className)}>
       {rewards.map((reward) => {
         const canAfford = currentPoints >= reward.pointsCost;
-        const hasTierAccess = canAccessTier(reward.tierRequired);
+        const hasTierAccess = canAccessTier(reward.tierRequired?.type);
         const canRedeem = reward.available && canAfford && hasTierAccess;
 
         return (
@@ -144,8 +120,8 @@ export function RewardsCatalog({
             <CardContent className="p-4">
               <div className="flex items-start justify-between gap-2 mb-2">
                 <h3 className="font-semibold">{reward.name}</h3>
-                {reward.tierRequired && (
-                  <TierBadge tier={reward.tierRequired} size="sm" />
+                {reward.tierRequired?.type && (
+                  <TierBadge tier={reward.tierRequired.type} size="sm" />
                 )}
               </div>
 
@@ -183,7 +159,7 @@ export function RewardsCatalog({
               {!hasTierAccess ? (
                 <Button variant="outline" className="w-full" disabled>
                   <Lock className="h-4 w-4 mr-2" />
-                  Wymaga {reward.tierRequired}
+                  Wymaga {reward.tierRequired?.name ?? reward.tierRequired?.type}
                 </Button>
               ) : !canAfford ? (
                 <Button variant="outline" className="w-full" disabled>

package/templates/storefront-nextjs-shadcn/components/loyalty/tier-progress.tsx

@@ -11,37 +11,10 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { TierBadge } from './tier-badge';
 import { cn } from '@/lib/utils';
-
-type TierType = 'BRONZE' | 'SILVER' | 'GOLD' | 'PLATINUM' | 'DIAMOND';
-
-interface CustomBenefit {
-  name: string;
-  description?: string | null;
-  icon?: string | null;
-}
-
-interface Tier {
-  id: string;
-  name: string;
-  type?: TierType | null;
-  minPoints: number;
-  pointsMultiplier: number;
-  customBenefits?: CustomBenefit[];
-}
-
-interface TierProgressData {
-  currentTier: Tier;
-  nextTier?: Tier;
-  pointsToNextTier: number;
-  progressPercent: number;
-  spendToNextTier?: {
-    amount: string;
-    currencyCode: string;
-  };
-}
+import type { TierProgress as TierProgressType } from '@/lib/graphql/fragments';
 
 interface TierProgressProps {
-  progress: TierProgressData;
+  progress: TierProgressType;
   className?: string;
 }
 

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

@@ -7,5 +7,10 @@
 export * from "./order-tracking";
 export * from "./shipment-card";
 export * from "./tracking-timeline";
-export * from "./tracking-status";
+export {
+  TrackingStatus,
+  CompactTrackingStatus,
+  type TrackingStatusProps,
+  type CompactTrackingStatusProps,
+} from "./tracking-status";
 export * from "./delivery-estimate";

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { CURRENCY_LOCALES } from "@doswiftly/storefront-sdk";
 import { Tag, LogIn, TrendingDown } from "lucide-react";
 import Link from "next/link";
 
@@ -67,7 +68,8 @@ export function B2BPriceDisplayComponent({
 
   const formatPrice = (money: Money) => {
     const amount = parseFloat(money.amount);
-    return new Intl.NumberFormat("pl-PL", {
+    const locale = CURRENCY_LOCALES[money.currencyCode] || "en-US";
+    return new Intl.NumberFormat(locale, {
       style: "currency",
       currency: money.currencyCode,
     }).format(amount);

package/templates/storefront-nextjs-shadcn/components/product/filter-active-pills.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export interface ActivePill {
+  filterId: string;
+  label: string;
+  value: string;
+  displayValue: string;
+}
+
+interface FilterActivePillsProps {
+  pills: ActivePill[];
+  onRemove: (filterId: string, value: string) => void;
+  onClearAll: () => void;
+}
+
+/**
+ * FilterActivePills - Shows active filters as removable badges
+ *
+ * Pattern from Saleor Storefront:
+ * - Each pill shows "Label: Value" with X button
+ * - "Clear all" link at the end
+ * - Horizontally scrollable on mobile
+ */
+export function FilterActivePills({
+  pills,
+  onRemove,
+  onClearAll,
+}: FilterActivePillsProps) {
+  if (pills.length === 0) return null;
+
+  return (
+    <div
+      className="scrollbar-hide flex items-center gap-2 overflow-x-auto py-1"
+      role="region"
+      aria-label="Active filters"
+    >
+      {pills.map((pill) => (
+        <Badge
+          key={`${pill.filterId}-${pill.value}`}
+          variant="secondary"
+          className="shrink-0 gap-1.5 pr-1.5"
+        >
+          <span className="text-xs text-muted-foreground">{pill.label}:</span>
+          {pill.displayValue}
+          <button
+            type="button"
+            onClick={() => onRemove(pill.filterId, pill.value)}
+            className="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-background/50"
+            aria-label={`Remove ${pill.displayValue} filter`}
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      ))}
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 shrink-0 px-2 text-xs text-muted-foreground"
+        onClick={onClearAll}
+      >
+        Clear all
+      </Button>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/product/filter-mobile-sheet.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { SlidersHorizontal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { ProductFilters, type ProductFiltersProps } from "./product-filters";
+
+interface FilterMobileSheetProps extends ProductFiltersProps {
+  activeFilterCount: number;
+  totalProducts?: number;
+}
+
+/**
+ * FilterMobileSheet - Mobile filter panel (slides from left)
+ *
+ * Pattern from Saleor Storefront:
+ * - Trigger button visible only on mobile (lg:hidden)
+ * - Sheet slides from left with full filter panel
+ * - Footer shows "Clear all" when filters active
+ * - Auto-closes after clearing
+ */
+export function FilterMobileSheet({
+  activeFilterCount,
+  totalProducts,
+  ...filterProps
+}: FilterMobileSheetProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="shrink-0 lg:hidden"
+        >
+          <SlidersHorizontal className="mr-2 h-4 w-4" />
+          Filters
+          {activeFilterCount > 0 && (
+            <Badge variant="secondary" className="ml-2 h-5 px-1.5 py-0 text-xs">
+              {activeFilterCount}
+            </Badge>
+          )}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="flex w-[300px] flex-col overflow-hidden">
+        <SheetHeader>
+          <SheetTitle>Filters</SheetTitle>
+          <SheetDescription>
+            {totalProducts !== undefined && (
+              <span>{totalProducts} products</span>
+            )}
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex-1 overflow-y-auto px-4 pb-4">
+          <ProductFilters {...filterProps} />
+        </div>
+        {activeFilterCount > 0 && filterProps.onClearAll && (
+          <div className="border-t border-border p-4">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => {
+                filterProps.onClearAll?.();
+                setOpen(false);
+              }}
+            >
+              Clear all filters ({activeFilterCount})
+            </Button>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { Slider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
+
+interface FilterPriceRangeProps {
+  min: number;
+  max: number;
+  currentMin?: number;
+  currentMax?: number;
+  currency?: string;
+  onChange: (min: number | undefined, max: number | undefined) => void;
+}
+
+/**
+ * FilterPriceRange - Dual-thumb range slider with number inputs
+ *
+ * - Slider commits on thumb release (onValueCommit) — natural debounce
+ * - Input fields commit on blur — no Apply button needed
+ * - Shows formatted currency values
+ */
+export function FilterPriceRange({
+  min,
+  max,
+  currentMin,
+  currentMax,
+  currency = "PLN",
+  onChange,
+}: FilterPriceRangeProps) {
+  const [localMin, setLocalMin] = useState<number>(currentMin ?? min);
+  const [localMax, setLocalMax] = useState<number>(currentMax ?? max);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Sync local state when props change (e.g., URL navigation)
+  useEffect(() => {
+    setLocalMin(currentMin ?? min);
+    setLocalMax(currentMax ?? max);
+  }, [currentMin, currentMax, min, max]);
+
+  const commitChange = useCallback(
+    (newMin: number, newMax: number) => {
+      const effectiveMin = newMin <= min ? undefined : newMin;
+      const effectiveMax = newMax >= max ? undefined : newMax;
+      onChange(effectiveMin, effectiveMax);
+    },
+    [min, max, onChange]
+  );
+
+  const handleSliderChange = useCallback(
+    (values: number[]) => {
+      setLocalMin(values[0]);
+      setLocalMax(values[1]);
+    },
+    []
+  );
+
+  const handleSliderCommit = useCallback(
+    (values: number[]) => {
+      commitChange(values[0], values[1]);
+    },
+    [commitChange]
+  );
+
+  const handleInputBlur = useCallback(() => {
+    // Clamp values
+    const clampedMin = Math.max(min, Math.min(localMin, localMax));
+    const clampedMax = Math.min(max, Math.max(localMin, localMax));
+    setLocalMin(clampedMin);
+    setLocalMax(clampedMax);
+
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      commitChange(clampedMin, clampedMax);
+    }, 150);
+  }, [localMin, localMax, min, max, commitChange]);
+
+  // Cleanup timeout
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  const step = max - min > 1000 ? 10 : max - min > 100 ? 1 : 0.01;
+
+  return (
+    <div className="space-y-4 px-1">
+      {/* Slider */}
+      <Slider
+        value={[localMin, localMax]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={handleSliderChange}
+        onValueCommit={handleSliderCommit}
+        aria-label="Price range"
+      />
+
+      {/* Input fields */}
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Input
+            type="number"
+            value={localMin}
+            onChange={(e) => setLocalMin(parseFloat(e.target.value) || min)}
+            onBlur={handleInputBlur}
+            min={min}
+            max={max}
+            step={step}
+            className="pr-12 text-sm"
+            aria-label="Minimum price"
+          />
+          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+            {currency}
+          </span>
+        </div>
+        <span className="text-muted-foreground">—</span>
+        <div className="relative flex-1">
+          <Input
+            type="number"
+            value={localMax}
+            onChange={(e) => setLocalMax(parseFloat(e.target.value) || max)}
+            onBlur={handleInputBlur}
+            min={min}
+            max={max}
+            step={step}
+            className="pr-12 text-sm"
+            aria-label="Maximum price"
+          />
+          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+            {currency}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,5 @@
 export { ProductCard } from './product-card';
-export type { ProductCardProps, ProductCardProduct } from './product-card';
+export type { ProductCardProps } from './product-card';
 
 export { ProductGrid } from './product-grid';
 export type { ProductGridProps } from './product-grid';
@@ -16,8 +16,15 @@ export type { ProductFiltersProps, FilterGroup, FilterOption } from './product-f
 export { ProductSort } from './product-sort';
 export type { ProductSortProps, SortOption } from './product-sort';
 
+export { FilterActivePills } from './filter-active-pills';
+export type { ActivePill } from './filter-active-pills';
+
+export { FilterPriceRange } from './filter-price-range';
+
+export { FilterMobileSheet } from './filter-mobile-sheet';
+
 export { ProductVariantSelector } from './product-variant-selector';
-export type { ProductVariantSelectorProps, ProductVariant, VariantOption } from './product-variant-selector';
+export type { ProductVariantSelectorProps } from './product-variant-selector';
 
 export { ProductGallery } from './product-gallery';
 export type { ProductGalleryProps } from './product-gallery';

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

@@ -0,0 +1,49 @@
+# Fragment for ProductCard component.
+#
+# Defines the minimal product data needed for listing views:
+# grids, search results, collection products, recommendations.
+#
+# Usage in components:
+#   import type { ProductCardFieldsFragment } from '@/generated/graphql';
+#   interface Props { product: ProductCardFieldsFragment }
+#
+# Usage in custom queries:
+#   query FeaturedProducts {
+#     products(first: 8) {
+#       edges { node { ...ProductCardFields } }
+#     }
+#   }
+
+fragment ProductCardFields on Product {
+  id
+  handle
+  title
+  vendor
+  productType
+  availableForSale
+  averageRating
+  reviewCount
+  tags
+  featuredImage {
+    url
+    altText
+    width
+    height
+  }
+  priceRange {
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+    maxVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+  compareAtPriceRange {
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+}

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

@@ -6,38 +6,10 @@ import { ProductImage } from "./product-image";
 import { ProductPrice } from "./product-price";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
-
-export interface ProductCardProduct {
-  id: string;
-  handle: string;
-  title: string;
-  featuredImage?: {
-    url: string;
-    altText?: string | null;
-  } | null;
-  priceRange: {
-    minVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-    maxVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-  };
-  compareAtPriceRange?: {
-    minVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-  } | null;
-  availableForSale: boolean;
-  tags?: string[];
-  type?: string;
-}
+import type { ProductCardFields } from "@/lib/graphql/fragments";
 
 export interface ProductCardProps {
-  product: ProductCardProduct;
+  product: ProductCardFields;
   className?: string;
   priority?: boolean;
   showBadges?: boolean;
@@ -72,7 +44,7 @@ export function ProductCard({
   );
 
   const isOutOfStock = !product.availableForSale;
-  const isGiftCard = product.type === "GIFT_CARD";
+  const isGiftCard = product.productType === "GIFT_CARD";
 
   return (
     <Link