@doswiftly/cli 0.1.18 → 0.1.19

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

@@ -1,191 +1,445 @@
 "use client";
 
-import { Suspense } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
+import { useCallback, useMemo, useTransition } from "react";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { keepPreviousData } from "@tanstack/react-query";
 import { ProductGrid } from "@/components/product/product-grid";
-import { ProductFilters } from "@/components/product/product-filters";
+import { ProductFilters, type FilterGroup } from "@/components/product/product-filters";
 import { ProductSort, type SortOption } from "@/components/product/product-sort";
-import { Pagination } from "@/components/ui/pagination";
+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 { useProducts, useCategories } from "@/lib/graphql/hooks";
+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();
-  
-  // Parse URL parameters (all lowercase)
+  const pathname = usePathname();
+  const [isPending, startTransition] = useTransition();
+
+  // ========== Parse URL State ==========
   const page = parseInt(searchParams.get("page") || "1", 10);
   const sort = (searchParams.get("sort") as SortOption) || "relevance";
-  const categories = searchParams.get("categories")?.split(",").filter(Boolean) || [];
+  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;
 
-  // Fetch categories for filter sidebar
-  const { data: categoriesData } = useCategories();
-  const allCategories = categoriesData?.categories ?? [];
-
-  // Build GraphQL query string for filters
-  let queryString = "";
-  if (categories.length > 0) {
-    // Use category handles in query
-    queryString = categories.map(cat => `category:${cat}`).join(" OR ");
-  }
-
-  // Fetch products using GraphQL
-  // Backend should normalize sort values (e.g., "price-asc" → PRICE + reverse: false)
-  const { data, isLoading, error } = useProducts({
-    first: limit,
-    query: queryString || undefined,
-    sortKey: sort as any, // Backend normalizes this
-  });
+  // 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;
 
-  // Build selected filters object
-  const selectedFilters: Record<string, any> = {};
-  if (categories.length > 0) {
-    selectedFilters.categories = categories;
-  }
-  if (priceMin) {
-    selectedFilters.price_min = priceMin;
-  }
-  if (priceMax) {
-    selectedFilters.price_max = priceMax;
-  }
-
-  // Update URL with new filters
-  const updateFilters = (updates: Record<string, any>) => {
-    const newParams = new URLSearchParams(searchParams.toString());
-    
-    Object.entries(updates).forEach(([key, value]) => {
-      if (value === null || value === undefined || value === "") {
-        newParams.delete(key);
-      } else if (Array.isArray(value)) {
-        if (value.length > 0) {
-          newParams.set(key, value.join(","));
-        } else {
-          newParams.delete(key);
+  // 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");
         }
-      } else {
-        newParams.set(key, value.toString());
+
+        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: "Categories",
+        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: "Price",
+          type: "range",
+          min: Math.floor(minPrice),
+          max: Math.ceil(maxPrice),
+          currency: availableFilters.priceRange.min.currencyCode,
+        });
       }
-    });
-    
-    // Reset to page 1 when filters change
-    newParams.set("page", "1");
-    router.push(`/products?${newParams.toString()}`);
-  };
+    }
 
-  // Handle filter changes
-  const handleFilterChange = (filterId: string, value: any) => {
-    if (filterId === "categories") {
-      // Toggle category in array
-      const newCategories = categories.includes(value)
-        ? categories.filter(c => c !== value)
-        : [...categories, value];
-      updateFilters({ categories: newCategories });
-    } else if (filterId === "price_min") {
-      updateFilters({ price_min: value });
-    } else if (filterId === "price_max") {
-      updateFilters({ price_max: value });
+    // 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,
+          });
+        }
+      }
     }
-  };
 
-  // Build filter options from categories
-  const filterOptions = [
-    {
-      id: "categories",
-      label: "Categories",
-      type: "checkbox" as const,
-      options: allCategories.map((category: any) => ({
-        label: category.name,
-        value: category.slug,
-        count: category.productCount || 0,
-      })),
+    return groups;
+  }, [availableFilters]);
+
+  // ========== 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: "Category",
+          value: catId,
+          displayValue: cat?.name || catId,
+        });
+      }
+    }
+
+    // Price pill
+    if (priceMin || priceMax) {
+      const currency =
+        availableFilters?.priceRange?.min.currencyCode || "PLN";
+      pills.push({
+        filterId: "price",
+        label: "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]);
+
+  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 });
+      }
     },
-    {
-      id: "price",
-      label: "Price Range",
-      type: "range" as const,
-      min: 0,
-      max: 1000,
+    [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]
+  );
 
-  return (
-    <div className="flex flex-col gap-8 lg:flex-row">
-      {/* Sidebar Filters */}
-      <aside className="w-full lg:w-64 lg:flex-shrink-0">
-        <div className="sticky top-4">
-          <h2 className="mb-4 text-lg font-semibold text-foreground">
-            Filters
-          </h2>
-          <Suspense fallback={<Skeleton className="h-96 w-full" />}>
-            <ProductFilters
-              filters={filterOptions}
-              selectedFilters={selectedFilters}
-              onFilterChange={handleFilterChange}
-              onClearAll={() => router.push("/products")}
-            />
-          </Suspense>
-        </div>
-      </aside>
+  // ========== Shared filter props ==========
+  const filterProps = {
+    filters: filterGroups,
+    selectedFilters,
+    onFilterChange: handleFilterChange,
+    onClearAll: handleClearAll,
+  };
 
-      {/* Main Content */}
-      <div className="flex-1">
-        {/* Sort & Results Count */}
-        <div className="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+  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
-              ? `Showing ${(page - 1) * limit + 1}-${Math.min(page * limit, totalCount)} of ${totalCount} products`
+              ? `${totalCount} product${totalCount !== 1 ? "s" : ""}`
               : "No products found"}
           </p>
-          <ProductSort 
-            value={sort} 
-            onChange={(newSort) => {
-              const newParams = new URLSearchParams(searchParams.toString());
-              newParams.set("sort", newSort);
-              router.push(`/products?${newParams.toString()}`);
-            }} 
-          />
         </div>
+        <ProductSort value={sort} onChange={handleSortChange} />
+      </div>
 
-        {/* Products Grid */}
-        {isLoading ? (
-          <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" />
-            ))}
+      {/* 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>
-        ) : (
-          <ProductGrid
-            products={products}
-            columns={3}
-            priorityCount={6}
-            showBadges
-            emptyMessage="No products match your filters"
-            onResetFilters={() => router.push("/products")}
-          />
-        )}
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="mt-8 flex justify-center">
-            <Pagination
-              currentPage={page}
-              totalPages={totalPages}
-              onPageChange={(newPage: number) => {
-                const newParams = new URLSearchParams(searchParams.toString());
-                newParams.set("page", newPage.toString());
-                router.push(`/products?${newParams.toString()}`);
-              }}
-            />
+        </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="No products match your filters"
+                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/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/page.tsx

@@ -7,6 +7,7 @@
  * and quick add to cart functionality.
  */
 
+import Link from 'next/link';
 import { Heart, ShoppingCart, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -14,6 +15,7 @@ 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';
 
@@ -22,8 +24,8 @@ export default function WishlistPage() {
     wishlists,
     getActiveWishlist,
     clearWishlist,
-    isHydrated,
   } = useWishlistStore();
+  const isHydrated = useHydrated();
 
   const { addToCart } = useCartActions();
 
@@ -113,10 +115,11 @@ export default function WishlistPage() {
           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',
-          }}
+          action={
+            <Link href="/products">
+              <Button>Przeglądaj produkty</Button>
+            </Link>
+          }
         />
       ) : (
         <div className="space-y-4">