@doswiftly/cli 0.1.1

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

@@ -0,0 +1,159 @@
+/**
+ * Blog Listing Page
+ *
+ * Lists all published blog posts with filtering and pagination.
+ */
+
+import { Suspense } from 'react';
+import { Metadata } from 'next';
+import { BookOpen } from 'lucide-react';
+import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { Skeleton } from '@/components/ui/skeleton';
+import { BlogCard } from '@/components/blog/blog-card';
+import { BlogSidebar } from '@/components/blog/blog-sidebar';
+
+export const metadata: Metadata = {
+  title: 'Blog',
+  description: 'Przeczytaj nasze najnowsze artykuły i poradniki.',
+};
+
+// Mock data - replace with actual GraphQL fetch
+const mockPosts = [
+  {
+    id: '1',
+    title: 'Jak wybrać idealny produkt dla siebie',
+    slug: 'jak-wybrac-idealny-produkt',
+    excerpt: 'Praktyczny poradnik, który pomoże Ci podjąć najlepszą decyzję zakupową.',
+    featuredImage: null,
+    author: {
+      id: '1',
+      name: 'Jan Kowalski',
+      avatar: null,
+    },
+    category: {
+      id: '1',
+      name: 'Poradniki',
+      slug: 'poradniki',
+    },
+    publishedAt: '2024-01-15T10:00:00Z',
+    readingTime: 5,
+    viewCount: 120,
+    isFeatured: true,
+  },
+  {
+    id: '2',
+    title: 'Trendy na rok 2024',
+    slug: 'trendy-2024',
+    excerpt: 'Odkryj, co będzie modne w nadchodzącym roku.',
+    featuredImage: null,
+    author: {
+      id: '1',
+      name: 'Jan Kowalski',
+      avatar: null,
+    },
+    category: {
+      id: '2',
+      name: 'Trendy',
+      slug: 'trendy',
+    },
+    publishedAt: '2024-01-10T10:00:00Z',
+    readingTime: 8,
+    viewCount: 250,
+    isFeatured: false,
+  },
+];
+
+const mockCategories = [
+  { id: '1', name: 'Poradniki', slug: 'poradniki', postCount: 12 },
+  { id: '2', name: 'Trendy', slug: 'trendy', postCount: 8 },
+  { id: '3', name: 'Nowości', slug: 'nowosci', postCount: 15 },
+];
+
+const mockTags = [
+  { id: '1', name: 'Tips', slug: 'tips', postCount: 5 },
+  { id: '2', name: 'Tutorial', slug: 'tutorial', postCount: 3 },
+  { id: '3', name: 'News', slug: 'news', postCount: 7 },
+];
+
+export default function BlogPage() {
+  const posts = mockPosts;
+  const categories = mockCategories;
+  const tags = mockTags;
+  const featuredPost = posts.find((p) => p.isFeatured);
+  const regularPosts = posts.filter((p) => !p.isFeatured);
+
+  return (
+    <div className="container py-8">
+      <Breadcrumbs
+        items={[
+          { label: 'Strona główna', href: '/' },
+          { label: 'Blog' },
+        ]}
+      />
+
+      <div className="mt-6 mb-8">
+        <h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
+          <BookOpen className="h-8 w-8" />
+          Blog
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Najnowsze artykuły, poradniki i aktualności
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+        {/* Main Content */}
+        <div className="lg:col-span-3 space-y-8">
+          {/* Featured Post */}
+          {featuredPost && (
+            <section>
+              <h2 className="text-lg font-semibold mb-4">Wyróżniony artykuł</h2>
+              <BlogCard post={featuredPost} variant="featured" />
+            </section>
+          )}
+
+          {/* Recent Posts Grid */}
+          <section>
+            <h2 className="text-lg font-semibold mb-4">Ostatnie wpisy</h2>
+            {posts.length > 0 ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {regularPosts.map((post) => (
+                  <BlogCard key={post.id} post={post} />
+                ))}
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-center py-12">
+                Brak wpisów do wyświetlenia.
+              </p>
+            )}
+          </section>
+        </div>
+
+        {/* Sidebar */}
+        <div className="lg:col-span-1">
+          <BlogSidebar
+            categories={categories}
+            tags={tags}
+            recentPosts={posts.slice(0, 3)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BlogPostsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="space-y-4">
+          <Skeleton className="aspect-[16/10] w-full" />
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-6 w-full" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/brands/[slug]/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { BrandLogo } from "@/components/brand/brand-card";
+
+export default function BrandDetailPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+
+  // TODO: Fetch brand and products from backend using GraphQL
+  const brand = {
+    id: "1",
+    name: "Nike",
+    slug: "nike",
+    description:
+      "Nike, Inc. is an American multinational corporation that is engaged in the design, development, manufacturing, and worldwide marketing and sales of footwear, apparel, equipment, accessories, and services.",
+    logoUrl: "https://via.placeholder.com/400x200?text=Nike+Logo",
+    website: "https://www.nike.com",
+    founded: "1964",
+    headquarters: "Beaverton, Oregon, USA",
+  };
+
+  // TODO: Fetch products for this brand
+  const products = [
+    {
+      id: "1",
+      title: "Air Max 90",
+      handle: "air-max-90",
+      price: "499.99",
+      currency: "PLN",
+      imageUrl: "https://via.placeholder.com/300x300?text=Product+1",
+    },
+    {
+      id: "2",
+      title: "Air Force 1",
+      handle: "air-force-1",
+      price: "399.99",
+      currency: "PLN",
+      imageUrl: "https://via.placeholder.com/300x300?text=Product+2",
+    },
+    {
+      id: "3",
+      title: "React Infinity",
+      handle: "react-infinity",
+      price: "599.99",
+      currency: "PLN",
+      imageUrl: "https://via.placeholder.com/300x300?text=Product+3",
+    },
+  ];
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      {/* Brand Header */}
+      <div className="mb-12 rounded-lg border border-border bg-background p-8">
+        <div className="flex flex-col items-center gap-8 md:flex-row">
+          {/* Brand Logo */}
+          <div className="flex-shrink-0">
+            <div className="relative h-32 w-64 rounded-lg bg-muted p-4">
+              {brand.logoUrl ? (
+                <Image
+                  src={brand.logoUrl}
+                  alt={`${brand.name} logo`}
+                  fill
+                  className="object-contain"
+                  sizes="256px"
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <span className="text-4xl font-bold text-muted-foreground">
+                    {brand.name}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Brand Info */}
+          <div className="flex-1">
+            <h1 className="text-4xl font-bold text-foreground mb-4">
+              {brand.name}
+            </h1>
+            <p className="text-lg text-muted-foreground mb-6">
+              {brand.description}
+            </p>
+
+            <div className="grid gap-4 text-sm md:grid-cols-3">
+              {brand.founded && (
+                <div>
+                  <span className="font-medium text-foreground">Founded:</span>
+                  <p className="text-muted-foreground">{brand.founded}</p>
+                </div>
+              )}
+              {brand.headquarters && (
+                <div>
+                  <span className="font-medium text-foreground">
+                    Headquarters:
+                  </span>
+                  <p className="text-muted-foreground">{brand.headquarters}</p>
+                </div>
+              )}
+              {brand.website && (
+                <div>
+                  <span className="font-medium text-foreground">Website:</span>
+                  <a
+                    href={brand.website}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline"
+                  >
+                    Visit Website
+                  </a>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Products Section */}
+      <div>
+        <h2 className="text-3xl font-bold text-foreground mb-6">
+          Products by {brand.name}
+        </h2>
+
+        {products.length === 0 ? (
+          <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+            <p className="text-muted-foreground">
+              No products available from this brand
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {products.map((product) => (
+              <a
+                key={product.id}
+                href={`/products/${product.handle}`}
+                className="group rounded-lg border border-border bg-background overflow-hidden transition-shadow hover:shadow-lg"
+              >
+                <div className="relative aspect-square overflow-hidden bg-muted">
+                  <Image
+                    src={product.imageUrl}
+                    alt={product.title}
+                    fill
+                    className="object-cover transition-transform group-hover:scale-105"
+                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
+                  />
+                </div>
+                <div className="p-4">
+                  <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
+                    {product.title}
+                  </h3>
+                  <p className="mt-2 text-lg font-bold text-foreground">
+                    {new Intl.NumberFormat("pl-PL", {
+                      style: "currency",
+                      currency: product.currency,
+                    }).format(parseFloat(product.price))}
+                  </p>
+                </div>
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+"use client";
+
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { BrandGrid, type BrandCardProps } from "@/components/brand/brand-grid";
+
+export default function BrandsPage() {
+  // TODO: Fetch brands from backend using GraphQL
+  const brands: BrandCardProps[] = [
+    {
+      id: "1",
+      name: "Nike",
+      slug: "nike",
+      description: "Just Do It - Athletic footwear and apparel",
+      logoUrl: "https://via.placeholder.com/200x200?text=Nike",
+      productCount: 156,
+    },
+    {
+      id: "2",
+      name: "Adidas",
+      slug: "adidas",
+      description: "Impossible is Nothing - Sports equipment and clothing",
+      logoUrl: "https://via.placeholder.com/200x200?text=Adidas",
+      productCount: 142,
+    },
+    {
+      id: "3",
+      name: "Apple",
+      slug: "apple",
+      description: "Think Different - Consumer electronics and software",
+      logoUrl: "https://via.placeholder.com/200x200?text=Apple",
+      productCount: 89,
+    },
+    {
+      id: "4",
+      name: "Samsung",
+      slug: "samsung",
+      description: "Inspire the World, Create the Future",
+      logoUrl: "https://via.placeholder.com/200x200?text=Samsung",
+      productCount: 124,
+    },
+    {
+      id: "5",
+      name: "Sony",
+      slug: "sony",
+      description: "Be Moved - Electronics and entertainment",
+      logoUrl: "https://via.placeholder.com/200x200?text=Sony",
+      productCount: 98,
+    },
+    {
+      id: "6",
+      name: "Microsoft",
+      slug: "microsoft",
+      description: "Empowering us all - Software and hardware",
+      logoUrl: "https://via.placeholder.com/200x200?text=Microsoft",
+      productCount: 67,
+    },
+  ];
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold text-foreground">All Brands</h1>
+        <p className="mt-2 text-lg text-muted-foreground">
+          Shop by your favorite brands
+        </p>
+      </div>
+
+      <BrandGrid brands={brands} />
+    </div>
+  );
+}

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

@@ -0,0 +1,165 @@
+"use client";
+
+import Link from "next/link";
+import { useCartStore } from "@/stores/cart-store";
+import { useCartSync } from "@/hooks/use-cart-sync";
+import { useCartActions } from "@/hooks/use-cart-actions";
+import { useCartDiscountCodesUpdate } from "@/lib/graphql/hooks";
+import { CartItem } from "@/components/cart/cart-item";
+import { CartSummary } from "@/components/cart/cart-summary";
+import { PromoCodeInput } from "@/components/cart/promo-code-input";
+import { EmptyCart } from "@/components/ui/empty-state";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Loader2 } from "lucide-react";
+
+export default function CartPage() {
+  // Server cart data (source of truth)
+  const {
+    items,
+    totalQuantity,
+    subtotal,
+    total,
+    currency,
+    discountCodes,
+    totalDiscount,
+    isLoading,
+  } = useCartSync();
+
+  // Actions that mutate via GraphQL
+  const { updateQuantity, removeFromCart } = useCartActions();
+
+  // Discount mutation (with React Query cache invalidation)
+  const discountMutation = useCartDiscountCodesUpdate();
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-16">
+        <div className="flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  const handleCheckout = () => {
+    window.location.href = "/checkout";
+  };
+
+  const handleApplyPromo = async (code: string) => {
+    try {
+      const cartId = useCartStore.getState().cartId;
+      if (!cartId) {
+        return { success: false, message: "Your cart is empty" };
+      }
+
+      const result = await discountMutation.mutateAsync({
+        cartId,
+        discountCodes: [...discountCodes, code],
+      });
+
+      const payload = result.cartDiscountCodesUpdate;
+
+      if (payload?.userErrors?.length > 0) {
+        return {
+          success: false,
+          message: payload.userErrors[0].message,
+        };
+      }
+
+      if (!payload?.cart) {
+        return {
+          success: false,
+          message: "Failed to apply promo code",
+        };
+      }
+
+      return { success: true, message: "Promo code applied!" };
+    } catch (error) {
+      return {
+        success: false,
+        message: "Failed to apply promo code",
+      };
+    }
+  };
+
+  const handleRemovePromo = async () => {
+    try {
+      const cartId = useCartStore.getState().cartId;
+      if (!cartId) return;
+
+      await discountMutation.mutateAsync({
+        cartId,
+        discountCodes: [],
+      });
+    } catch (error) {
+      // Silently handle — cart query will refetch and show correct state
+    }
+  };
+
+  if (items.length === 0) {
+    return (
+      <div className="container mx-auto px-4 py-16">
+        <EmptyCart onContinueShopping={() => (window.location.href = "/products")} />
+      </div>
+    );
+  }
+
+  const appliedCode = discountCodes.length > 0 ? discountCodes[0] : undefined;
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      <div className="mb-8 flex items-center justify-between">
+        <h1 className="text-3xl font-bold text-foreground">Shopping Cart</h1>
+        <Button variant="ghost" asChild>
+          <Link href="/products">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Continue Shopping
+          </Link>
+        </Button>
+      </div>
+
+      <div className="grid gap-8 lg:grid-cols-3">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          <div className="divide-y divide-border rounded-lg border border-border">
+            {items.map((item) => (
+              <div key={item.lineId} className="p-4">
+                <CartItem
+                  item={item}
+                  onUpdateQuantity={updateQuantity}
+                  onRemove={removeFromCart}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Summary */}
+        <div className="lg:col-span-1">
+          <div className="sticky top-4 space-y-4 rounded-lg border border-border bg-muted/50 p-6">
+            <h2 className="text-lg font-semibold text-foreground">Order Summary</h2>
+
+            <PromoCodeInput
+              onApply={handleApplyPromo}
+              appliedCode={appliedCode}
+              onRemove={handleRemovePromo}
+            />
+
+            <CartSummary
+              subtotal={subtotal}
+              total={total}
+              totalDiscount={totalDiscount}
+              currencyCode={currency}
+              itemCount={totalQuantity}
+              onCheckout={handleCheckout}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/categories/[slug]/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { ProductGrid } from "@/components/product/product-grid";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useProducts } from "@/lib/graphql/hooks";
+
+export default function CategoryPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+
+  // Fetch products for this category using GraphQL query
+  const { data, isLoading, error } = useProducts({
+    first: 20,
+    query: `category:${slug}`,
+  });
+
+  const products = data?.products ?? [];
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="mb-8">
+          <Skeleton className="h-10 w-64 mb-4" />
+          <Skeleton className="h-6 w-96" />
+        </div>
+        <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>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+          <h1 className="text-2xl font-bold text-foreground mb-2">
+            Category Not Found
+          </h1>
+          <p className="text-muted-foreground">
+            The category you're looking for doesn't exist.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      {/* Category Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground capitalize">
+          {slug.replace(/-/g, " ")}
+        </h1>
+        <p className="mt-2 text-muted-foreground">
+          Browse products in this category
+        </p>
+      </div>
+
+      {/* Products Grid */}
+      <ProductGrid
+        products={products}
+        columns={4}
+        priorityCount={8}
+        showBadges
+        emptyMessage="No products in this category"
+      />
+    </div>
+  );
+}