@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/app/search/page.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Spinner } from "@/components/ui/spinner";
+import { SearchClient } from "./search-client";
+
+export default function SearchPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      <Suspense fallback={<Spinner />}>
+        <SearchClient />
+      </Suspense>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { SearchResults } from "@/components/search/search-results";
+import { SearchBar } from "@/components/search/search-bar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useProducts } from "@/lib/graphql/hooks";
+
+export function SearchClient() {
+  const searchParams = useSearchParams();
+  const query = searchParams.get("q") || "";
+
+  // Fetch search results using GraphQL
+  const { data, isLoading, error } = useProducts({
+    first: 20,
+    query: query || undefined,
+  });
+
+  const results = data?.products ?? [];
+
+  return (
+    <>
+      {/* Search Header */}
+      <div className="mb-8">
+        <h1 className="mb-4 text-3xl font-bold text-foreground">
+          {query ? `Search results for "${query}"` : "Search Products"}
+        </h1>
+        
+        {/* Search Bar */}
+        <div className="mx-auto max-w-2xl">
+          <SearchBar defaultValue={query} />
+        </div>
+      </div>
+
+      {/* Results */}
+      {isLoading ? (
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} className="aspect-square w-full" />
+          ))}
+        </div>
+      ) : (
+        <SearchResults query={query} results={results} />
+      )}
+    </>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/shipping/page.tsx

@@ -0,0 +1,62 @@
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Truck, Package, Clock } from "lucide-react";
+
+export default function ShippingPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+      
+      <div className="mx-auto max-w-3xl">
+        <h1 className="mb-6 text-4xl font-bold text-foreground">Shipping Information</h1>
+        
+        <div className="space-y-8">
+          <div>
+            <div className="mb-4 flex items-center gap-3">
+              <Truck className="h-6 w-6 text-primary" />
+              <h2 className="text-2xl font-semibold text-foreground">Shipping Methods</h2>
+            </div>
+            <div className="space-y-4 text-muted-foreground">
+              <div className="rounded-lg border border-border p-4">
+                <h3 className="font-semibold text-foreground">Standard Shipping</h3>
+                <p className="mt-1 text-sm">Delivery in 3-5 business days</p>
+                <p className="mt-1 text-sm font-medium">Free on orders over $50</p>
+              </div>
+              <div className="rounded-lg border border-border p-4">
+                <h3 className="font-semibold text-foreground">Express Shipping</h3>
+                <p className="mt-1 text-sm">Delivery in 1-2 business days</p>
+                <p className="mt-1 text-sm font-medium">$15.00</p>
+              </div>
+            </div>
+          </div>
+          
+          <div>
+            <div className="mb-4 flex items-center gap-3">
+              <Package className="h-6 w-6 text-primary" />
+              <h2 className="text-2xl font-semibold text-foreground">Order Processing</h2>
+            </div>
+            <p className="text-muted-foreground">
+              Orders are processed within 1-2 business days. You will receive a confirmation email with tracking information once your order ships.
+            </p>
+          </div>
+          
+          <div>
+            <div className="mb-4 flex items-center gap-3">
+              <Clock className="h-6 w-6 text-primary" />
+              <h2 className="text-2xl font-semibold text-foreground">Delivery Times</h2>
+            </div>
+            <p className="text-muted-foreground">
+              Delivery times are estimates and may vary based on your location and shipping method selected. International orders may take longer and are subject to customs processing.
+            </p>
+          </div>
+          
+          <div>
+            <h2 className="mb-4 text-2xl font-semibold text-foreground">International Shipping</h2>
+            <p className="text-muted-foreground">
+              We ship to most countries worldwide. International shipping rates and delivery times vary by destination. Customs duties and taxes may apply and are the responsibility of the customer.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/sitemap.ts

@@ -0,0 +1,144 @@
+/**
+ * Dynamic Sitemap Generator
+ *
+ * Generates a sitemap.xml with all products and collections for SEO.
+ * Uses ISR to regenerate hourly.
+ *
+ * Requirements: 13.4
+ */
+
+import type { MetadataRoute } from "next";
+
+// ISR revalidation - regenerate sitemap every hour
+export const revalidate = 3600;
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://example.com";
+
+/**
+ * Generate sitemap entries for the site
+ *
+ * Includes:
+ * - Homepage (priority 1.0)
+ * - Product pages (priority 0.8, daily changes)
+ * - Collection pages (priority 0.7, weekly changes)
+ * - Category pages (priority 0.6, weekly changes)
+ * - Static pages (priority 0.5, monthly changes)
+ */
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const entries: MetadataRoute.Sitemap = [];
+
+  // Homepage
+  entries.push({
+    url: SITE_URL,
+    lastModified: new Date(),
+    changeFrequency: "daily",
+    priority: 1.0,
+  });
+
+  // Static pages
+  const staticPages = [
+    "/products",
+    "/collections",
+    "/about",
+    "/contact",
+    "/terms",
+    "/privacy",
+  ];
+
+  for (const page of staticPages) {
+    entries.push({
+      url: `${SITE_URL}${page}`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.5,
+    });
+  }
+
+  // Fetch products for sitemap
+  try {
+    const products = await fetchProductsForSitemap();
+    for (const product of products) {
+      entries.push({
+        url: `${SITE_URL}/products/${product.handle}`,
+        lastModified: product.updatedAt ? new Date(product.updatedAt) : new Date(),
+        changeFrequency: "daily",
+        priority: 0.8,
+      });
+    }
+  } catch (error) {
+    console.error("Failed to fetch products for sitemap:", error);
+  }
+
+  // Fetch collections for sitemap
+  try {
+    const collections = await fetchCollectionsForSitemap();
+    for (const collection of collections) {
+      entries.push({
+        url: `${SITE_URL}/collections/${collection.handle}`,
+        lastModified: collection.updatedAt ? new Date(collection.updatedAt) : new Date(),
+        changeFrequency: "weekly",
+        priority: 0.7,
+      });
+    }
+  } catch (error) {
+    console.error("Failed to fetch collections for sitemap:", error);
+  }
+
+  // Fetch categories for sitemap
+  try {
+    const categories = await fetchCategoriesForSitemap();
+    for (const category of categories) {
+      entries.push({
+        url: `${SITE_URL}/categories/${category.handle}`,
+        lastModified: category.updatedAt ? new Date(category.updatedAt) : new Date(),
+        changeFrequency: "weekly",
+        priority: 0.6,
+      });
+    }
+  } catch (error) {
+    console.error("Failed to fetch categories for sitemap:", error);
+  }
+
+  return entries;
+}
+
+/**
+ * Fetch all products with pagination
+ * Limits to 10000 products to avoid timeout
+ */
+async function fetchProductsForSitemap(): Promise<Array<{ handle: string; updatedAt?: string }>> {
+  // TODO: Replace with actual GraphQL fetch using server client
+  // This is a placeholder that should be connected to the actual GraphQL API
+  //
+  // Example implementation:
+  // const { products } = await fetchProducts({ first: 250 });
+  // return products.map(p => ({ handle: p.handle, updatedAt: p.updatedAt }));
+
+  return [];
+}
+
+/**
+ * Fetch all collections
+ */
+async function fetchCollectionsForSitemap(): Promise<Array<{ handle: string; updatedAt?: string }>> {
+  // TODO: Replace with actual GraphQL fetch using server client
+  //
+  // Example implementation:
+  // const { collections } = await fetchCollections({ first: 100 });
+  // return collections.map(c => ({ handle: c.handle, updatedAt: c.updatedAt }));
+
+  return [];
+}
+
+/**
+ * Fetch all categories
+ */
+async function fetchCategoriesForSitemap(): Promise<Array<{ handle: string; updatedAt?: string }>> {
+  // TODO: Replace with actual GraphQL fetch using server client
+  //
+  // Example implementation:
+  // const { categories } = await fetchCategories({ first: 100 });
+  // return categories.map(c => ({ handle: c.handle, updatedAt: c.updatedAt }));
+
+  return [];
+}

package/templates/storefront-nextjs-shadcn/app/wishlist/page.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+/**
+ * Wishlist Page
+ *
+ * Displays customer's saved products with price tracking
+ * and quick add to cart functionality.
+ */
+
+import { Heart, ShoppingCart, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+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 { useCartActions } from '@/hooks/use-cart-actions';
+import { toast } from 'sonner';
+
+export default function WishlistPage() {
+  const {
+    wishlists,
+    getActiveWishlist,
+    clearWishlist,
+    isHydrated,
+  } = useWishlistStore();
+
+  const { addToCart } = useCartActions();
+
+  const activeWishlist = getActiveWishlist();
+  const items = activeWishlist?.items || [];
+
+  const handleClearWishlist = () => {
+    if (activeWishlist) {
+      clearWishlist(activeWishlist.id);
+      toast.success('Lista życzeń została wyczyszczona');
+    }
+  };
+
+  const handleAddAllToCart = async () => {
+    if (!activeWishlist) return;
+
+    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,
+        });
+      } catch {
+        // Individual item errors are handled by addToCart (shows toast)
+      }
+    }
+
+    toast.success(`Dodano ${items.length} produktów do koszyka`);
+  };
+
+  // Show loading state while hydrating from localStorage
+  if (!isHydrated) {
+    return (
+      <div className="container max-w-4xl py-8">
+        <div className="animate-pulse space-y-4">
+          <div className="h-8 w-48 bg-muted rounded" />
+          <div className="h-32 bg-muted rounded" />
+          <div className="h-32 bg-muted rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container max-w-4xl py-8">
+      <Breadcrumbs
+        items={[
+          { label: 'Strona główna', href: '/' },
+          { label: 'Lista życzeń' },
+        ]}
+      />
+
+      <div className="mt-6 mb-8 flex items-center justify-between">
+        <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ń
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            {items.length === 0
+              ? 'Twoja lista życzeń jest pusta'
+              : `${items.length} ${items.length === 1 ? 'produkt' : 'produktów'}`}
+          </p>
+        </div>
+
+        {items.length > 0 && (
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={handleClearWishlist}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              Wyczyść
+            </Button>
+            <Button size="sm" onClick={handleAddAllToCart}>
+              <ShoppingCart className="h-4 w-4 mr-2" />
+              Dodaj wszystko do koszyka
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {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',
+          }}
+        />
+      ) : (
+        <div className="space-y-4">
+          {/* Price change summary */}
+          <PriceChangeSummary items={items} />
+
+          {/* Wishlist items */}
+          {activeWishlist && items.map((item) => (
+            <WishlistItem
+              key={item.id}
+              item={item}
+              wishlistId={activeWishlist.id}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Shows summary of price changes for all items
+ */
+function PriceChangeSummary({ items }: { items: Array<{ price: { amount: string }; priceAtAdd: { amount: string } }> }) {
+  const itemsWithPriceDrops = items.filter((item) => {
+    const current = parseFloat(item.price.amount);
+    const original = parseFloat(item.priceAtAdd.amount);
+    return current < original;
+  });
+
+  const totalSavings = itemsWithPriceDrops.reduce((sum, item) => {
+    const current = parseFloat(item.price.amount);
+    const original = parseFloat(item.priceAtAdd.amount);
+    return sum + (original - current);
+  }, 0);
+
+  if (itemsWithPriceDrops.length === 0) return null;
+
+  return (
+    <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!
+        </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{' '}
+          <span className="font-semibold">
+            {new Intl.NumberFormat('pl-PL', {
+              style: 'currency',
+              currency: 'PLN',
+            }).format(totalSavings)}
+          </span>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/storefront-nextjs-shadcn/codegen.ts

@@ -0,0 +1,51 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+import { loadEnvConfig } from '@next/env';
+
+// Load environment variables from .env.local
+loadEnvConfig(process.cwd());
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+const shopSlug = process.env.NEXT_PUBLIC_SHOP_SLUG || 'test-shop';
+
+const config: CodegenConfig = {
+  // Schema from live API (introspection)
+  schema: [
+    {
+      [`${apiUrl}/storefront/graphql`]: {
+        headers: {
+          'X-Shop-Slug': shopSlug,
+        },
+      },
+    },
+  ],
+
+  // Operations: Backend SSOT + Developer Custom Queries
+  documents: [
+    'node_modules/@doswiftly/storefront-operations/**/*.graphql', // Backend operations
+    'graphql/**/*.{ts,tsx}',                                       // Custom queries in code
+  ],
+
+  // Output configuration
+  generates: {
+    'generated/graphql.ts': {
+      plugins: [
+        'typescript',                    // Generate TS types
+        'typescript-operations',         // Generate operation types
+        'typed-document-node',           // Generate TypedDocumentNode
+      ],
+      config: {
+        skipTypename: false,
+        enumsAsTypes: true,
+        scalars: {
+          DateTime: 'string',
+          JSON: 'Record<string, any>',
+        },
+      },
+    },
+  },
+
+  // Watch mode for development
+  watch: process.env.NODE_ENV === 'development',
+};
+
+export default config;