@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -1,192 +0,0 @@
-"use client";
-
-import { Suspense } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
-import { ProductGrid } from "@/components/product/product-grid";
-import { ProductFilters } from "@/components/product/product-filters";
-import { ProductSort, type SortOption } from "@/components/product/product-sort";
-import { Pagination } from "@/components/ui/pagination";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useProducts, useCategories } from "@/lib/graphql/hooks";
-
-export function ProductsClient() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  
-  // Parse URL parameters (all lowercase)
-  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 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
-  });
-
-  const products = data?.products ?? [];
-  const totalCount = data?.totalCount ?? 0;
-  const totalPages = Math.ceil(totalCount / limit);
-
-  // 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);
-        }
-      } else {
-        newParams.set(key, value.toString());
-      }
-    });
-    
-    // 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 });
-    }
-  };
-
-  // 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,
-      })),
-    },
-    {
-      id: "price",
-      label: "Price Range",
-      type: "range" as const,
-      min: 0,
-      max: 1000,
-    },
-  ];
-
-  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>
-
-      {/* 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">
-          <p className="text-sm text-muted-foreground">
-            {totalCount > 0
-              ? `Showing ${(page - 1) * limit + 1}-${Math.min(page * limit, totalCount)} of ${totalCount} products`
-              : "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>
-
-        {/* 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" />
-            ))}
-          </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()}`);
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/templates/storefront-nextjs-shadcn/components/providers/currency-provider.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-/**
- * CurrencyProvider - Initializes currency store with Shop data
- *
- * This provider:
- * 1. Receives Shop data from server (via root layout)
- * 2. Initializes currency store on mount
- * 3. Handles currency detection from:
- *    - localStorage (saved preference)
- *    - Browser locale (auto-detection)
- *    - Shop base currency (fallback)
- *
- * The currency store manages:
- * - User's preferred currency
- * - Supported currencies list
- * - Base currency for the shop
- * - Persistence to localStorage
- *
- * @module storefront-nextjs/components/providers/currency-provider
- */
-
-import { useEffect, type ReactNode } from 'react';
-import { useCurrencyStore, type ShopCurrencyData } from '@/stores/currency-store';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-interface CurrencyProviderProps {
-  /**
-   * Shop data containing currency configuration
-   * Fetched from GraphQL Shop query in root layout
-   */
-  shopData: ShopCurrencyData;
-  
-  /**
-   * Child components
-   */
-  children: ReactNode;
-}
-
-// ============================================================================
-// COMPONENT
-// ============================================================================
-
-/**
- * CurrencyProvider - Initializes currency store with Shop data
- *
- * This component should be placed in the root layout after fetching Shop data.
- * It initializes the currency store once on mount, which triggers:
- * 1. Loading saved currency from localStorage (if valid)
- * 2. Auto-detecting currency from browser locale (if no saved preference)
- * 3. Falling back to shop's base currency
- *
- * The initialization only happens once per session. Subsequent currency changes
- * are handled by the currency store's setCurrency action.
- *
- * @example
- * ```tsx
- * // app/layout.tsx
- * import { fetchShop } from '@/lib/graphql/server';
- * import { CurrencyProvider } from '@/components/providers/currency-provider';
- *
- * export default async function RootLayout({ children }) {
- *   const { shop } = await fetchShop();
- *
- *   return (
- *     <html lang="en">
- *       <body>
- *         <QueryProvider>
- *           <CurrencyProvider shopData={shop}>
- *             <Header />
- *             <main>{children}</main>
- *             <Footer />
- *           </CurrencyProvider>
- *         </QueryProvider>
- *       </body>
- *     </html>
- *   );
- * }
- * ```
- *
- * @param props - Component props
- * @param props.shopData - Shop currency configuration
- * @param props.children - Child components to render
- */
-export function CurrencyProvider({ shopData, children }: CurrencyProviderProps) {
-  const initialize = useCurrencyStore((state: any) => state.initialize);
-  
-  useEffect(() => {
-    // Initialize currency store with Shop data
-    // This will:
-    // 1. Set base currency and supported currencies
-    // 2. Restore saved currency from localStorage (if valid)
-    // 3. Auto-detect from browser locale (if no saved preference)
-    // 4. Fall back to base currency
-    initialize(shopData);
-  }, [shopData, initialize]);
-  
-  // Simply render children - the store initialization happens in the background
-  return <>{children}</>;
-}

package/templates/storefront-nextjs-shadcn/graphql/collections.example.ts

@@ -1,168 +0,0 @@
-import { gql } from 'graphql-tag';
-
-/**
- * Example: Custom GraphQL query for collections
- * 
- * This file demonstrates how to write custom GraphQL queries for collections
- * that will be picked up by codegen and generate TypeScript types.
- * 
- * To use this example:
- * 1. Rename this file from collections.example.ts to collections.ts
- * 2. Run `pnpm run codegen` to generate types
- * 3. Import the generated query in your components
- */
-
-// Example 1: Get featured collections
-export const GET_FEATURED_COLLECTIONS = gql`
-  query GetFeaturedCollections($first: Int = 6) {
-    collections(first: $first, query: "featured:true") {
-      edges {
-        node {
-          id
-          handle
-          title
-          description
-          image {
-            url
-            altText
-            width
-            height
-          }
-        }
-        cursor
-      }
-      pageInfo {
-        hasNextPage
-        endCursor
-      }
-    }
-  }
-`;
-
-// Example 2: Get collection with products
-export const GET_COLLECTION_WITH_PRODUCTS = gql`
-  query GetCollectionWithProducts(
-    $handle: String!
-    $first: Int = 20
-    $after: String
-  ) {
-    collection(handle: $handle) {
-      id
-      title
-      description
-      descriptionHtml
-      image {
-        url
-        altText
-      }
-      seo {
-        title
-        description
-      }
-      products(
-        first: $first
-        after: $after
-      ) {
-        edges {
-          node {
-            id
-            handle
-            title
-            description
-            featuredImage {
-              url
-              altText
-            }
-            priceRange {
-              minVariantPrice {
-                amount
-                currencyCode
-                baseAmount
-                baseCurrencyCode
-                isConverted
-              }
-            }
-            compareAtPriceRange {
-              minVariantPrice {
-                amount
-                currencyCode
-              }
-            }
-            vendor
-            productType
-            tags
-            totalInventory
-          }
-          cursor
-        }
-        pageInfo {
-          hasNextPage
-          hasPreviousPage
-          startCursor
-          endCursor
-        }
-        totalCount
-      }
-    }
-  }
-`;
-
-// Example 3: Get all collections with product counts
-export const GET_ALL_COLLECTIONS = gql`
-  query GetAllCollections(
-    $first: Int = 50
-    $after: String
-    $sortKey: CollectionSortKeys = TITLE
-  ) {
-    collections(first: $first, after: $after, sortKey: $sortKey) {
-      edges {
-        node {
-          id
-          handle
-          title
-          description
-          image {
-            url
-            altText
-          }
-          products(first: 1) {
-            totalCount
-          }
-        }
-        cursor
-      }
-      pageInfo {
-        hasNextPage
-        hasPreviousPage
-        startCursor
-        endCursor
-      }
-      totalCount
-    }
-  }
-`;
-
-/**
- * Usage in components:
- * 
- * // Server Component
- * import { getClient } from '@/lib/graphql/server';
- * import { GetFeaturedCollectionsDocument } from '@/generated/graphql';
- * 
- * const client = getClient();
- * const { collections } = await client.request(GetFeaturedCollectionsDocument);
- * 
- * // Client Component
- * import { useQuery } from '@tanstack/react-query';
- * import { getGraphQLClient } from '@/lib/graphql/client';
- * import { GetCollectionWithProductsDocument } from '@/generated/graphql';
- * 
- * const client = getGraphQLClient();
- * const { data } = useQuery({
- *   queryKey: ['Collection', handle],
- *   queryFn: () => client.request(GetCollectionWithProductsDocument, { 
- *     handle,
- *     first: 20
- *   }),
- * });
- */

package/templates/storefront-nextjs-shadcn/graphql/products.example.ts

@@ -1,160 +0,0 @@
-import { gql } from 'graphql-tag';
-
-/**
- * Example: Custom GraphQL query for featured products
- * 
- * This file demonstrates how to write custom GraphQL queries
- * that will be picked up by codegen and generate TypeScript types.
- * 
- * To use this example:
- * 1. Rename this file from products.example.ts to products.ts
- * 2. Run `pnpm run codegen` to generate types
- * 3. Import the generated query in your components
- */
-
-// Example 1: Get featured products with specific fields
-export const GET_FEATURED_PRODUCTS = gql`
-  query GetFeaturedProducts($first: Int = 6) {
-    products(first: $first, query: "tag:featured") {
-      edges {
-        node {
-          id
-          handle
-          title
-          description
-          featuredImage {
-            url
-            altText
-            width
-            height
-          }
-          priceRange {
-            minVariantPrice {
-              amount
-              currencyCode
-            }
-          }
-        }
-        cursor
-      }
-      pageInfo {
-        hasNextPage
-        endCursor
-      }
-    }
-  }
-`;
-
-// Example 2: Get product with reviews
-export const GET_PRODUCT_WITH_REVIEWS = gql`
-  query GetProductWithReviews($handle: String!) {
-    product(handle: $handle) {
-      id
-      title
-      description
-      descriptionHtml
-      averageRating
-      reviewCount
-      featuredImage {
-        url
-        altText
-      }
-      priceRange {
-        minVariantPrice {
-          amount
-          currencyCode
-          baseAmount
-          baseCurrencyCode
-          isConverted
-        }
-      }
-      variants(first: 10) {
-        id
-        title
-        price {
-          amount
-          currencyCode
-        }
-        available
-        quantityAvailable
-      }
-    }
-  }
-`;
-
-// Example 3: Search products with filters
-export const SEARCH_PRODUCTS_WITH_FILTERS = gql`
-  query SearchProductsWithFilters(
-    $query: String!
-    $first: Int = 20
-    $after: String
-    $filters: ProductFilterInput
-  ) {
-    products(
-      query: $query
-      first: $first
-      after: $after
-      filters: $filters
-    ) {
-      edges {
-        node {
-          id
-          handle
-          title
-          vendor
-          productType
-          featuredImage {
-            url
-            altText
-          }
-          priceRange {
-            minVariantPrice {
-              amount
-              currencyCode
-            }
-            maxVariantPrice {
-              amount
-              currencyCode
-            }
-          }
-          compareAtPriceRange {
-            minVariantPrice {
-              amount
-              currencyCode
-            }
-          }
-        }
-        cursor
-      }
-      pageInfo {
-        hasNextPage
-        hasPreviousPage
-        startCursor
-        endCursor
-      }
-      totalCount
-    }
-  }
-`;
-
-/**
- * Usage in components:
- * 
- * // Server Component
- * import { getClient } from '@/lib/graphql/server';
- * import { GetFeaturedProductsDocument } from '@/generated/graphql';
- * 
- * const client = getClient();
- * const { products } = await client.request(GetFeaturedProductsDocument, { first: 6 });
- * 
- * // Client Component
- * import { useQuery } from '@tanstack/react-query';
- * import { getGraphQLClient } from '@/lib/graphql/client';
- * import { GetFeaturedProductsDocument } from '@/generated/graphql';
- * 
- * const client = getGraphQLClient();
- * const { data } = useQuery({
- *   queryKey: ['FeaturedProducts'],
- *   queryFn: () => client.request(GetFeaturedProductsDocument, { first: 6 }),
- * });
- */