@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/app/[locale]/products/products-client.tsx

@@ -0,0 +1,450 @@
+"use client";
+
+import { useCallback, useMemo, useTransition } from "react";
+import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useRouter, usePathname } from "@/i18n/navigation";
+import { keepPreviousData } from "@tanstack/react-query";
+import { ProductGrid } from "@/components/product/product-grid";
+import { ProductFilters, type FilterGroup } from "@/components/product/product-filters";
+import { ProductSort, type SortOption } from "@/components/product/product-sort";
+import {
+  FilterActivePills,
+  type ActivePill,
+} from "@/components/product/filter-active-pills";
+import { FilterMobileSheet } from "@/components/product/filter-mobile-sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Pagination } from "@/components/ui/pagination";
+import { useProducts, useAvailableFilters } from "@/lib/graphql/hooks";
+import type {
+  ProductFilterInput,
+  AttributeFilterInput,
+} from "@/generated/graphql";
+import { cn } from "@/lib/utils";
+
+/**
+ * ProductsClient — Dynamic product listing with API-driven filters.
+ *
+ * UX patterns from BigCommerce Catalyst + Saleor Storefront:
+ * - useTransition wraps all filter updates (non-blocking UI)
+ * - keepPreviousData prevents skeleton flash on filter changes
+ * - data-pending CSS opacity dimming during transitions
+ * - Active filter pills with individual removal
+ * - Mobile sheet for filters (lg:hidden)
+ * - { scroll: false } on all URL updates
+ *
+ * URL State (SEO-friendly, shareable):
+ *   ?category=id&collection=id
+ *   &price_min=100&price_max=500
+ *   &attr_color=red,blue&attr_size=xl
+ *   &sort=price-low-to-high&page=2&q=search
+ */
+export function ProductsClient() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isPending, startTransition] = useTransition();
+  const t = useTranslations("product");
+  const tFilters = useTranslations("filters");
+
+  // ========== Parse URL State ==========
+  const page = parseInt(searchParams.get("page") || "1", 10);
+  const sort = (searchParams.get("sort") as SortOption) || "relevance";
+  const searchQuery = searchParams.get("q") || undefined;
+  const categoryId = searchParams.get("category") || undefined;
+  const collectionId = searchParams.get("collection") || undefined;
+  const priceMin = searchParams.get("price_min");
+  const priceMax = searchParams.get("price_max");
+
+  const limit = 20;
+
+  // Parse dynamic attribute filters: attr_color=red,blue → { attributeId: 'color', values: ['red', 'blue'] }
+  const attributeFilters = useMemo(() => {
+    const filters: AttributeFilterInput[] = [];
+    searchParams.forEach((value: string, key: string) => {
+      if (key.startsWith("attr_")) {
+        const attributeId = key.slice(5);
+        const values = value.split(",").filter(Boolean);
+        if (values.length > 0) {
+          filters.push({ attributeId, values });
+        }
+      }
+    });
+    return filters;
+  }, [searchParams]);
+
+  // ========== Build GraphQL Filter Input ==========
+  const filters: ProductFilterInput = useMemo(() => {
+    const f: ProductFilterInput = {};
+    if (categoryId) f.categoryId = categoryId;
+    if (collectionId) f.collectionId = collectionId;
+    if (priceMin) f.minPrice = parseFloat(priceMin);
+    if (priceMax) f.maxPrice = parseFloat(priceMax);
+    if (attributeFilters.length > 0) f.attributes = attributeFilters;
+    return f;
+  }, [categoryId, collectionId, priceMin, priceMax, attributeFilters]);
+
+  // ========== Data Fetching (keepPreviousData = no flash) ==========
+  const {
+    data,
+    isLoading: isProductsLoading,
+    isFetching: isProductsFetching,
+  } = useProducts(
+    {
+      first: limit,
+      query: searchQuery,
+      sortKey: sort,
+      filters: Object.keys(filters).length > 0 ? filters : undefined,
+    },
+    { placeholderData: keepPreviousData }
+  );
+
+  const {
+    data: filtersData,
+    isLoading: isFiltersLoading,
+  } = useAvailableFilters(
+    {
+      categoryId,
+      collectionId,
+      searchQuery,
+    },
+    { placeholderData: keepPreviousData }
+  );
+
+  const products = data?.products ?? [];
+  const totalCount = data?.totalCount ?? 0;
+  const totalPages = Math.ceil(totalCount / limit);
+  const availableFilters = filtersData?.availableFilters;
+
+  // Show dimming when transition or fetch is in progress (but data exists)
+  const showDimming = (isPending || isProductsFetching) && products.length > 0;
+  // Show skeleton only on initial load (no data yet)
+  const showSkeleton = isProductsLoading && products.length === 0;
+
+  // ========== URL Update (all writes go through here) ==========
+  const updateUrl = useCallback(
+    (updates: Record<string, string | null>, resetPage = true) => {
+      startTransition(() => {
+        const newParams = new URLSearchParams(searchParams.toString());
+
+        for (const [key, value] of Object.entries(updates)) {
+          if (value === null || value === "") {
+            newParams.delete(key);
+          } else {
+            newParams.set(key, value);
+          }
+        }
+
+        // Reset to page 1 when filters change (not when paginating)
+        if (resetPage && !("page" in updates)) {
+          newParams.delete("page");
+        }
+
+        const qs = newParams.toString();
+        router.push(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+      });
+    },
+    [searchParams, router, pathname, startTransition]
+  );
+
+  // ========== Filter Groups (from API) ==========
+  const filterGroups: FilterGroup[] = useMemo(() => {
+    const groups: FilterGroup[] = [];
+
+    // Categories
+    if (availableFilters?.categories && availableFilters.categories.length > 0) {
+      groups.push({
+        id: "category",
+        label: t("category"),
+        type: "checkbox",
+        options: availableFilters.categories.map((cat) => ({
+          label: cat.name,
+          value: cat.id,
+          count: cat.productCount,
+        })),
+      });
+    }
+
+    // Price range (from API — real min/max scoped to context)
+    if (availableFilters?.priceRange) {
+      const minPrice = parseFloat(availableFilters.priceRange.min.amount);
+      const maxPrice = parseFloat(availableFilters.priceRange.max.amount);
+      if (minPrice !== maxPrice) {
+        groups.push({
+          id: "price",
+          label: t("price"),
+          type: "range",
+          min: Math.floor(minPrice),
+          max: Math.ceil(maxPrice),
+          currency: availableFilters.priceRange.min.currencyCode,
+        });
+      }
+    }
+
+    // Dynamic attribute filters
+    if (availableFilters?.attributes) {
+      for (const attr of availableFilters.attributes) {
+        if (attr.filterValues && attr.filterValues.length > 0) {
+          const isColor = attr.type === "COLOR";
+          groups.push({
+            id: `attr_${attr.handle}`,
+            label: attr.name,
+            type: isColor ? "color" : "checkbox",
+            options: attr.filterValues.map((fv) => ({
+              label: fv.label,
+              value: fv.value,
+              count: fv.productCount,
+              colorHex: fv.swatch?.colorHex || undefined,
+            })),
+          });
+        } else if (
+          attr.rangeBounds &&
+          attr.rangeBounds.min != null &&
+          attr.rangeBounds.max != null
+        ) {
+          groups.push({
+            id: `attr_${attr.handle}`,
+            label: attr.name,
+            type: "range",
+            min: attr.rangeBounds.min,
+            max: attr.rangeBounds.max,
+          });
+        }
+      }
+    }
+
+    return groups;
+  }, [availableFilters, t]);
+
+  // ========== Selected Filters (from URL) ==========
+  const selectedFilters: Record<string, string[]> = useMemo(() => {
+    const sel: Record<string, string[]> = {};
+
+    if (categoryId) {
+      sel["category"] = categoryId.split(",").filter(Boolean);
+    }
+    if (priceMin || priceMax) {
+      sel["price"] = [`${priceMin || 0}-${priceMax || 999999}`];
+    }
+    for (const af of attributeFilters) {
+      sel[`attr_${af.attributeId}`] = af.values || [];
+    }
+
+    return sel;
+  }, [categoryId, priceMin, priceMax, attributeFilters]);
+
+  // ========== Active Filter Pills ==========
+  const activePills: ActivePill[] = useMemo(() => {
+    const pills: ActivePill[] = [];
+
+    // Category pills
+    if (categoryId && availableFilters?.categories) {
+      for (const catId of categoryId.split(",").filter(Boolean)) {
+        const cat = availableFilters.categories.find((c) => c.id === catId);
+        pills.push({
+          filterId: "category",
+          label: t("category"),
+          value: catId,
+          displayValue: cat?.name || catId,
+        });
+      }
+    }
+
+    // Price pill
+    if (priceMin || priceMax) {
+      const currency =
+        availableFilters?.priceRange?.min.currencyCode || "PLN";
+      pills.push({
+        filterId: "price",
+        label: t("price"),
+        value: `${priceMin || 0}-${priceMax || "∞"}`,
+        displayValue: `${priceMin || 0} — ${priceMax || "∞"} ${currency}`,
+      });
+    }
+
+    // Attribute pills
+    for (const af of attributeFilters) {
+      const attrDef = availableFilters?.attributes?.find(
+        (a) => a.handle === af.attributeId
+      );
+      for (const val of af.values || []) {
+        const fv = attrDef?.filterValues?.find((v) => v.value === val);
+        pills.push({
+          filterId: `attr_${af.attributeId}`,
+          label: attrDef?.name || af.attributeId,
+          value: val,
+          displayValue: fv?.label || val,
+        });
+      }
+    }
+
+    return pills;
+  }, [categoryId, priceMin, priceMax, attributeFilters, availableFilters, t]);
+
+  const activeFilterCount = activePills.length;
+
+  // ========== Event Handlers ==========
+  const handleFilterChange = useCallback(
+    (filterId: string, values: string[]) => {
+      if (filterId === "category") {
+        updateUrl({ category: values.length > 0 ? values.join(",") : null });
+      } else if (filterId === "price") {
+        if (values.length > 0) {
+          const [min, max] = values[0].split("-");
+          updateUrl({
+            price_min: min && min !== "0" ? min : null,
+            price_max: max && max !== "999999" ? max : null,
+          });
+        } else {
+          updateUrl({ price_min: null, price_max: null });
+        }
+      } else if (filterId.startsWith("attr_")) {
+        updateUrl({ [filterId]: values.length > 0 ? values.join(",") : null });
+      }
+    },
+    [updateUrl]
+  );
+
+  const handleRemovePill = useCallback(
+    (filterId: string, value: string) => {
+      if (filterId === "category") {
+        const remaining = (categoryId || "")
+          .split(",")
+          .filter((id) => id !== value);
+        updateUrl({
+          category: remaining.length > 0 ? remaining.join(",") : null,
+        });
+      } else if (filterId === "price") {
+        updateUrl({ price_min: null, price_max: null });
+      } else if (filterId.startsWith("attr_")) {
+        const attrId = filterId.slice(5);
+        const current = searchParams.get(filterId)?.split(",") || [];
+        const remaining = current.filter((v) => v !== value);
+        updateUrl({
+          [filterId]: remaining.length > 0 ? remaining.join(",") : null,
+        });
+      }
+    },
+    [categoryId, searchParams, updateUrl]
+  );
+
+  const handleClearAll = useCallback(() => {
+    startTransition(() => {
+      router.push(pathname, { scroll: false });
+    });
+  }, [router, pathname, startTransition]);
+
+  const handleSortChange = useCallback(
+    (newSort: SortOption) => {
+      updateUrl({ sort: newSort !== "relevance" ? newSort : null });
+    },
+    [updateUrl]
+  );
+
+  const handlePageChange = useCallback(
+    (newPage: number) => {
+      updateUrl(
+        { page: newPage > 1 ? newPage.toString() : null },
+        false
+      );
+    },
+    [updateUrl]
+  );
+
+  // ========== Shared filter props ==========
+  const filterProps = {
+    filters: filterGroups,
+    selectedFilters,
+    onFilterChange: handleFilterChange,
+    onClearAll: handleClearAll,
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Top bar: Mobile filter trigger + Sort + Result count */}
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          {/* Mobile filter sheet trigger */}
+          <FilterMobileSheet
+            {...filterProps}
+            activeFilterCount={activeFilterCount}
+            totalProducts={availableFilters?.totalProducts}
+          />
+          <p className="text-sm text-muted-foreground">
+            {totalCount > 0
+              ? tFilters("productCount", { count: totalCount })
+              : t("noProducts")}
+          </p>
+        </div>
+        <ProductSort value={sort} onChange={handleSortChange} />
+      </div>
+
+      {/* Active filter pills */}
+      <FilterActivePills
+        pills={activePills}
+        onRemove={handleRemovePill}
+        onClearAll={handleClearAll}
+      />
+
+      {/* Main layout: Sidebar + Grid */}
+      <div className="flex gap-8">
+        {/* Desktop sidebar (hidden on mobile — sheet used instead) */}
+        <aside className="hidden w-64 flex-shrink-0 lg:block">
+          <div className="sticky top-4">
+            {isFiltersLoading && !availableFilters ? (
+              <div className="space-y-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <Skeleton key={i} className="h-24 w-full" />
+                ))}
+              </div>
+            ) : (
+              <ProductFilters {...filterProps} />
+            )}
+          </div>
+        </aside>
+
+        {/* Products grid with dimming */}
+        <div className="flex-1">
+          <div
+            className={cn(
+              "transition-opacity duration-200",
+              showDimming && "pointer-events-none opacity-50"
+            )}
+            data-pending={showDimming || undefined}
+            aria-busy={showDimming}
+            role="region"
+            aria-label="Product results"
+          >
+            {showSkeleton ? (
+              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <Skeleton key={i} className="aspect-square w-full" />
+                ))}
+              </div>
+            ) : (
+              <ProductGrid
+                products={products}
+                columns={3}
+                priorityCount={6}
+                showBadges
+                emptyMessage={t("noProductsMatch")}
+                onResetFilters={handleClearAll}
+              />
+            )}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="mt-8 flex justify-center">
+              <Pagination
+                currentPage={page}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/[locale]/search/loading.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function SearchLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-8 h-12 w-full max-w-xl" />
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+        {[...Array(8)].map((_, i) => (
+          <div key={i} className="space-y-3">
+            <Skeleton className="aspect-square w-full rounded-lg" />
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/{wishlist → [locale]/wishlist}/page.tsx

@@ -7,6 +7,8 @@
  * and quick add to cart functionality.
  */
 
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
 import { Heart, ShoppingCart, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -14,16 +16,18 @@ import { EmptyState } from '@/components/ui/empty-state';
 import { Breadcrumbs } from '@/components/layout/breadcrumbs';
 import { WishlistItem } from '@/components/wishlist/wishlist-item';
 import { useWishlistStore } from '@/stores/wishlist-store';
+import { useHydrated } from '@doswiftly/storefront-sdk/react';
 import { useCartActions } from '@/hooks/use-cart-actions';
 import { toast } from 'sonner';
 
 export default function WishlistPage() {
+  const t = useTranslations('wishlist');
   const {
     wishlists,
     getActiveWishlist,
     clearWishlist,
-    isHydrated,
   } = useWishlistStore();
+  const isHydrated = useHydrated();
 
   const { addToCart } = useCartActions();
 
@@ -33,7 +37,7 @@ export default function WishlistPage() {
   const handleClearWishlist = () => {
     if (activeWishlist) {
       clearWishlist(activeWishlist.id);
-      toast.success('Lista życzeń została wyczyszczona');
+      toast.success(t('cleared'));
     }
   };
 
@@ -42,21 +46,13 @@ export default function WishlistPage() {
 
     for (const item of items) {
       try {
-        await addToCart({
-          variantId: item.variantId || item.productId,
-          productId: item.productId,
-          productTitle: item.productTitle,
-          variantTitle: item.variantTitle || '',
-          price: item.price,
-          image: item.image,
-          available: true,
-        });
+        await addToCart(item.variantId || item.productId);
       } catch {
         // Individual item errors are handled by addToCart (shows toast)
       }
     }
 
-    toast.success(`Dodano ${items.length} produktów do koszyka`);
+    toast.success(t('addedToCart', { count: items.length }));
   };
 
   // Show loading state while hydrating from localStorage
@@ -76,8 +72,8 @@ export default function WishlistPage() {
     <div className="container max-w-4xl py-8">
       <Breadcrumbs
         items={[
-          { label: 'Strona główna', href: '/' },
-          { label: 'Lista życzeń' },
+          { label: t('home'), href: '/' },
+          { label: t('title') },
         ]}
       />
 
@@ -85,12 +81,12 @@ export default function WishlistPage() {
         <div>
           <h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
             <Heart className="h-8 w-8 text-red-500" />
-            Lista życzeń
+            {t('title')}
           </h1>
           <p className="text-muted-foreground mt-1">
             {items.length === 0
-              ? 'Twoja lista życzeń jest pusta'
-              : `${items.length} ${items.length === 1 ? 'produkt' : 'produktów'}`}
+              ? t('empty')
+              : t('itemCount', { count: items.length })}
           </p>
         </div>
 
@@ -98,11 +94,11 @@ export default function WishlistPage() {
           <div className="flex gap-2">
             <Button variant="outline" size="sm" onClick={handleClearWishlist}>
               <Trash2 className="h-4 w-4 mr-2" />
-              Wyczyść
+              {t('clearList')}
             </Button>
             <Button size="sm" onClick={handleAddAllToCart}>
               <ShoppingCart className="h-4 w-4 mr-2" />
-              Dodaj wszystko do koszyka
+              {t('addAllToCart')}
             </Button>
           </div>
         )}
@@ -111,12 +107,13 @@ export default function WishlistPage() {
       {items.length === 0 ? (
         <EmptyState
           icon={<Heart className="h-12 w-12" />}
-          title="Lista życzeń jest pusta"
-          description="Dodaj produkty do listy życzeń, aby śledzić ich ceny i szybko dodawać do koszyka."
-          action={{
-            label: 'Przeglądaj produkty',
-            href: '/products',
-          }}
+          title={t('empty')}
+          description={t('emptyDescription')}
+          action={
+            <Link href="/products">
+              <Button>{t('browseProducts')}</Button>
+            </Link>
+          }
         />
       ) : (
         <div className="space-y-4">
@@ -141,6 +138,8 @@ export default function WishlistPage() {
  * Shows summary of price changes for all items
  */
 function PriceChangeSummary({ items }: { items: Array<{ price: { amount: string }; priceAtAdd: { amount: string } }> }) {
+  const t = useTranslations('wishlist');
+
   const itemsWithPriceDrops = items.filter((item) => {
     const current = parseFloat(item.price.amount);
     const original = parseFloat(item.priceAtAdd.amount);
@@ -159,13 +158,13 @@ function PriceChangeSummary({ items }: { items: Array<{ price: { amount: string
     <Card className="border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950">
       <CardHeader className="pb-2">
         <CardTitle className="text-green-700 dark:text-green-400 text-lg flex items-center gap-2">
-          🎉 Dobre wieści!
+          {t('goodNews')}
         </CardTitle>
       </CardHeader>
       <CardContent>
         <p className="text-green-700 dark:text-green-400">
-          {itemsWithPriceDrops.length} {itemsWithPriceDrops.length === 1 ? 'produkt obniżył' : 'produktów obniżyło'} cenę!
-          Możesz zaoszczędzić łącznie{' '}
+          {t('priceDropped', { count: itemsWithPriceDrops.length })}{' '}
+          {t('totalSavings')}{' '}
           <span className="font-semibold">
             {new Intl.NumberFormat('pl-PL', {
               style: 'currency',