@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/wishlist/wishlist-icon.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+/**
+ * WishlistIcon Component
+ *
+ * Header icon showing wishlist with item count badge.
+ * Links to wishlist page.
+ */
+
+import Link from 'next/link';
+import { Heart } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { useWishlistStore } from '@/stores/wishlist-store';
+
+interface WishlistIconProps {
+  className?: string;
+  showCount?: boolean;
+}
+
+export function WishlistIcon({ className, showCount = true }: WishlistIconProps) {
+  const { getTotalItems, isHydrated } = useWishlistStore();
+
+  const totalItems = getTotalItems();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn('relative', className)}
+      asChild
+    >
+      <Link href="/wishlist" aria-label={`Lista życzeń (${totalItems} produktów)`}>
+        <Heart className="h-5 w-5" />
+        {showCount && isHydrated && totalItems > 0 && (
+          <Badge
+            variant="destructive"
+            className="absolute -top-1 -right-1 h-5 min-w-5 px-1 flex items-center justify-center text-xs"
+          >
+            {totalItems > 99 ? '99+' : totalItems}
+          </Badge>
+        )}
+      </Link>
+    </Button>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/wishlist/wishlist-item.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+/**
+ * WishlistItem Component
+ *
+ * Single item card in wishlist page.
+ * Shows product info, price comparison, and actions.
+ */
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { ShoppingCart, Trash2, TrendingDown, TrendingUp } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { useWishlistStore, type WishlistItem as WishlistItemType } from '@/stores/wishlist-store';
+import { useCartActions } from '@/hooks/use-cart-actions';
+import { toast } from 'sonner';
+
+interface WishlistItemProps {
+  item: WishlistItemType;
+  wishlistId: string;
+}
+
+export function WishlistItem({ item, wishlistId }: WishlistItemProps) {
+  const { removeItem } = useWishlistStore();
+  const { addToCart } = useCartActions();
+
+  const handleRemove = () => {
+    removeItem(wishlistId, item.id);
+    toast.success('Usunięto z listy życzeń');
+  };
+
+  const handleAddToCart = async () => {
+    await addToCart({
+      variantId: item.variantId || item.productId,
+      productId: item.productId,
+      productTitle: item.productTitle,
+      variantTitle: item.variantTitle || '',
+      price: item.price,
+      image: item.image,
+      available: true,
+    });
+  };
+
+  // Calculate price change since added
+  const currentPrice = parseFloat(item.price.amount);
+  const originalPrice = parseFloat(item.priceAtAdd.amount);
+  const priceChange = currentPrice - originalPrice;
+  const priceChangePercent = originalPrice > 0
+    ? ((priceChange / originalPrice) * 100).toFixed(0)
+    : 0;
+
+  const formatPrice = (amount: string, currency: string) => {
+    return new Intl.NumberFormat('pl-PL', {
+      style: 'currency',
+      currency,
+    }).format(parseFloat(amount));
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('pl-PL', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    }).format(new Date(date));
+  };
+
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="p-0">
+        <div className="flex gap-4 p-4">
+          {/* Product Image */}
+          <Link
+            href={`/products/${item.productId}`}
+            className="relative w-24 h-24 flex-shrink-0 bg-muted rounded-md overflow-hidden"
+          >
+            {item.image ? (
+              <Image
+                src={item.image.url}
+                alt={item.image.altText || item.productTitle}
+                fill
+                className="object-cover"
+                sizes="96px"
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                <ShoppingCart className="h-8 w-8" />
+              </div>
+            )}
+          </Link>
+
+          {/* Product Info */}
+          <div className="flex-1 min-w-0">
+            <Link
+              href={`/products/${item.productId}`}
+              className="block hover:underline"
+            >
+              <h3 className="font-medium text-foreground truncate">
+                {item.productTitle}
+              </h3>
+            </Link>
+            {item.variantTitle && (
+              <p className="text-sm text-muted-foreground truncate">
+                {item.variantTitle}
+              </p>
+            )}
+
+            {/* Price */}
+            <div className="mt-2 flex items-center gap-2 flex-wrap">
+              <span className="font-semibold text-lg">
+                {formatPrice(item.price.amount, item.price.currencyCode)}
+              </span>
+
+              {/* Price change indicator */}
+              {priceChange !== 0 && (
+                <Badge
+                  variant={priceChange < 0 ? 'success' : 'destructive'}
+                  className={cn(
+                    'text-xs gap-0.5',
+                    priceChange < 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
+                  )}
+                >
+                  {priceChange < 0 ? (
+                    <TrendingDown className="h-3 w-3" />
+                  ) : (
+                    <TrendingUp className="h-3 w-3" />
+                  )}
+                  {priceChangePercent}%
+                </Badge>
+              )}
+            </div>
+
+            {/* Added date */}
+            <p className="text-xs text-muted-foreground mt-1">
+              Dodano: {formatDate(item.addedAt)}
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-col gap-2">
+            <Button
+              size="sm"
+              onClick={handleAddToCart}
+              className="gap-1.5"
+            >
+              <ShoppingCart className="h-4 w-4" />
+              <span className="hidden sm:inline">Do koszyka</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRemove}
+              className="text-muted-foreground hover:text-destructive"
+            >
+              <Trash2 className="h-4 w-4" />
+              <span className="hidden sm:inline ml-1.5">Usuń</span>
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/storefront-nextjs-shadcn/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/templates/storefront-nextjs-shadcn/generated/.gitkeep

@@ -0,0 +1,2 @@
+# This directory will contain auto-generated GraphQL types
+# Run `pnpm run codegen` to generate graphql.ts

package/templates/storefront-nextjs-shadcn/graphql/.gitkeep

@@ -0,0 +1,31 @@
+# Custom GraphQL Queries
+
+Place your custom GraphQL queries here. These will be picked up by codegen and generate TypeScript types.
+
+## Examples
+
+See `products.example.ts` and `collections.example.ts` for examples of custom queries.
+
+To use the examples:
+1. Rename `products.example.ts` to `products.ts`
+2. Rename `collections.example.ts` to `collections.ts`
+3. Run `pnpm run codegen` to generate types
+
+## When to use custom queries vs backend operations
+
+**Use backend operations** (from `@doswiftly/storefront-operations`):
+- For standard CRUD operations (Shop, Product, Cart, Customer)
+- When you need the full object with all fields
+- For consistency across all storefronts
+
+**Use custom queries** (in this directory):
+- When you need specific fields only (performance optimization)
+- For custom filtering or sorting logic
+- For combining multiple queries
+- For storefront-specific features
+
+## File naming
+
+- Use descriptive names: `products.ts`, `collections.ts`, `cart.ts`
+- Use `.ts` or `.tsx` extension
+- Export queries using `gql` tag from `graphql-tag`

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

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,160 @@
+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 }),
+ * });
+ */

package/templates/storefront-nextjs-shadcn/hooks/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Hooks - Custom React hooks for storefront functionality
+ */
+
+export { useAuth } from "./use-auth";
+export { useCartSync } from "./use-cart-sync";
+export { useCartActions } from "./use-cart-actions";
+export { useFilterParams } from "./use-filter-params";
+export type { UseFilterParamsReturn, UseFilterParamsOptions } from "./use-filter-params";