@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/app/{blog → [locale]/blog}/[slug]/page.tsx

@@ -6,7 +6,7 @@
 
 import { Metadata } from 'next';
 import Image from 'next/image';
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import { notFound } from 'next/navigation';
 import { Calendar, Clock, Eye, User, ChevronLeft, Share2 } from 'lucide-react';
 import { Breadcrumbs } from '@/components/layout/breadcrumbs';
@@ -16,9 +16,50 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { BlogCard } from '@/components/blog/blog-card';
 import { BlogSidebar } from '@/components/blog/blog-sidebar';
+import { sanitizeHtml } from '@doswiftly/storefront-sdk';
+
+interface BlogImage {
+  url: string;
+  altText?: string;
+}
+
+interface BlogPost {
+  id: string;
+  title: string;
+  slug: string;
+  excerpt: string;
+  content: string;
+  contentType: string;
+  featuredImage: BlogImage | null;
+  author: {
+    id: string;
+    name: string;
+    bio: string;
+    avatar: BlogImage | null;
+  };
+  category: {
+    id: string;
+    name: string;
+    slug: string;
+  } | null;
+  tags: { id: string; name: string; slug: string; postCount: number }[];
+  status: string;
+  publishedAt: string;
+  readingTime: number;
+  viewCount: number;
+  commentCount: number;
+  allowComments: boolean;
+  isFeatured: boolean;
+  seo: {
+    title: string;
+    description: string;
+  } | null;
+  createdAt: string;
+  updatedAt: string;
+}
 
 // Mock data - replace with actual GraphQL fetch
-const mockPost = {
+const mockPost: BlogPost = {
   id: '1',
   title: 'Jak wybrać idealny produkt dla siebie',
   slug: 'jak-wybrac-idealny-produkt',
@@ -234,7 +275,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
           {/* Content */}
           <div
             className="prose prose-lg max-w-none dark:prose-invert mb-8"
-            dangerouslySetInnerHTML={{ __html: post.content }}
+            dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.content) }}
           />
 
           {/* Tags */}

package/templates/storefront-nextjs-shadcn/app/[locale]/blog/loading.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function BlogLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-8 h-10 w-32" />
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="space-y-3">
+            <Skeleton className="aspect-video w-full rounded-lg" />
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-6 w-full" />
+            <Skeleton className="h-4 w-5/6" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/{brands → [locale]/brands}/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
-import { BrandGrid, type BrandCardProps } from "@/components/brand/brand-grid";
+import { BrandGrid } from "@/components/brand/brand-grid";
+import type { BrandCardProps } from "@/components/brand/brand-card";
 
 export default function BrandsPage() {
   // TODO: Fetch brands from backend using GraphQL

package/templates/storefront-nextjs-shadcn/app/[locale]/cart/loading.tsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CartLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-8 h-10 w-48" />
+      <div className="grid gap-8 lg:grid-cols-3">
+        <div className="space-y-4 lg:col-span-2">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="flex gap-4 rounded-lg border p-4">
+              <Skeleton className="h-24 w-24 shrink-0 rounded-md" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-5 w-3/4" />
+                <Skeleton className="h-4 w-1/3" />
+                <Skeleton className="h-8 w-24" />
+              </div>
+            </div>
+          ))}
+        </div>
+        <div>
+          <Skeleton className="h-64 w-full rounded-lg" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/{cart → [locale]/cart}/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import Link from "next/link";
-import { useCartStore } from "@/stores/cart-store";
+import { Link, useRouter } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+import { useCartStoreApi } from "@/stores/cart-store";
 import { useCartSync } from "@/hooks/use-cart-sync";
 import { useCartActions } from "@/hooks/use-cart-actions";
 import { useCartDiscountCodesUpdate } from "@/lib/graphql/hooks";
@@ -14,6 +15,9 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft, Loader2 } from "lucide-react";
 
 export default function CartPage() {
+  const t = useTranslations("cart");
+  const router = useRouter();
+
   // Server cart data (source of truth)
   const {
     items,
@@ -26,6 +30,9 @@ export default function CartPage() {
     isLoading,
   } = useCartSync();
 
+  // Cart store API for getState() in callbacks
+  const cartStoreApi = useCartStoreApi();
+
   // Actions that mutate via GraphQL
   const { updateQuantity, removeFromCart } = useCartActions();
 
@@ -44,14 +51,14 @@ export default function CartPage() {
   }
 
   const handleCheckout = () => {
-    window.location.href = "/checkout";
+    router.push("/checkout");
   };
 
   const handleApplyPromo = async (code: string) => {
     try {
-      const cartId = useCartStore.getState().cartId;
+      const cartId = cartStoreApi.getState().cartId;
       if (!cartId) {
-        return { success: false, message: "Your cart is empty" };
+        return { success: false, message: t("empty") };
       }
 
       const result = await discountMutation.mutateAsync({
@@ -71,22 +78,22 @@ export default function CartPage() {
       if (!payload?.cart) {
         return {
           success: false,
-          message: "Failed to apply promo code",
+          message: t("promoError"),
         };
       }
 
-      return { success: true, message: "Promo code applied!" };
+      return { success: true, message: t("promoApplied") };
     } catch (error) {
       return {
         success: false,
-        message: "Failed to apply promo code",
+        message: t("promoError"),
       };
     }
   };
 
   const handleRemovePromo = async () => {
     try {
-      const cartId = useCartStore.getState().cartId;
+      const cartId = cartStoreApi.getState().cartId;
       if (!cartId) return;
 
       await discountMutation.mutateAsync({
@@ -101,7 +108,7 @@ export default function CartPage() {
   if (items.length === 0) {
     return (
       <div className="container mx-auto px-4 py-16">
-        <EmptyCart onContinueShopping={() => (window.location.href = "/products")} />
+        <EmptyCart onContinueShopping={() => router.push("/products")} />
       </div>
     );
   }
@@ -113,11 +120,11 @@ export default function CartPage() {
       <Breadcrumbs className="mb-6" />
 
       <div className="mb-8 flex items-center justify-between">
-        <h1 className="text-3xl font-bold text-foreground">Shopping Cart</h1>
+        <h1 className="text-3xl font-bold text-foreground">{t("title")}</h1>
         <Button variant="ghost" asChild>
           <Link href="/products">
             <ArrowLeft className="mr-2 h-4 w-4" />
-            Continue Shopping
+            {t("continueShopping")}
           </Link>
         </Button>
       </div>
@@ -141,7 +148,7 @@ export default function CartPage() {
         {/* 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>
+            <h2 className="text-lg font-semibold text-foreground">{t("yourOrder")}</h2>
 
             <PromoCodeInput
               onApply={handleApplyPromo}

package/templates/storefront-nextjs-shadcn/app/[locale]/categories/[slug]/category-products-client.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ProductGrid } from "@/components/product/product-grid";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useProducts } from "@/lib/graphql/hooks";
+
+interface CategoryProductsClientProps {
+  categoryId: string;
+}
+
+/**
+ * Client component for category product listing.
+ *
+ * Receives categoryId from server and uses filters.categoryId
+ * for correct backend filtering.
+ */
+export function CategoryProductsClient({
+  categoryId,
+}: CategoryProductsClientProps) {
+  const t = useTranslations("product");
+  const { data, isLoading, error } = useProducts({
+    first: 20,
+    filters: { categoryId },
+  });
+
+  const products = data?.products ?? [];
+
+  if (isLoading) {
+    return (
+      <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 rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+        <p className="text-muted-foreground">
+          {t("failedLoadProducts")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <ProductGrid
+      products={products}
+      columns={4}
+      priorityCount={8}
+      showBadges
+      emptyMessage={t("noProductsInCategory")}
+    />
+  );
+}

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

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CategoryLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Breadcrumbs */}
+      <Skeleton className="mb-6 h-5 w-64" />
+
+      {/* Category title */}
+      <Skeleton className="mb-2 h-9 w-48" />
+      <Skeleton className="mb-6 h-5 w-96" />
+
+      {/* Subcategory chips */}
+      <div className="mb-8 flex gap-2">
+        {[...Array(4)].map((_, i) => (
+          <Skeleton key={i} className="h-8 w-24 rounded-full" />
+        ))}
+      </div>
+
+      {/* Product grid 2x4 */}
+      <div className="grid grid-cols-2 gap-4 sm: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/[locale]/categories/[slug]/page.tsx

@@ -0,0 +1,95 @@
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { fetchCategory } from "@/lib/graphql/server";
+import { CategoryProductsClient } from "./category-products-client";
+
+/**
+ * Generate metadata for category pages (SEO)
+ */
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  try {
+    const { slug } = await params;
+    const data = await fetchCategory(slug);
+    const category = data?.category;
+
+    if (!category) {
+      return { title: "Category Not Found" };
+    }
+
+    return {
+      title: category.name,
+      description:
+        category.description || `Browse ${category.name} products`,
+    };
+  } catch {
+    return { title: "Category" };
+  }
+}
+
+/**
+ * Category detail page — Server Component
+ *
+ * Fetches category metadata on the server for SEO,
+ * passes category ID to client component for product filtering.
+ */
+export default async function CategoryPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  let category;
+  try {
+    const data = await fetchCategory(slug);
+    category = data?.category;
+  } catch (error) {
+    console.error('[CategoryPage] Failed to fetch category:', error instanceof Error ? error.message : error);
+  }
+
+  if (!category) {
+    notFound();
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      {/* Category Header — SSR, SEO-friendly */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">{category.name}</h1>
+        {category.description && (
+          <p className="mt-2 text-muted-foreground">{category.description}</p>
+        )}
+        {category.children.length > 0 && (
+          <div className="mt-4 flex flex-wrap gap-2">
+            {category.children.map((child) => (
+              <a
+                key={child.id}
+                href={`/categories/${child.slug}`}
+                className="rounded-full border border-border bg-muted px-3 py-1 text-sm text-foreground hover:bg-accent transition-colors"
+              >
+                {child.name}
+                {child.productCount > 0 && (
+                  <span className="ml-1 text-muted-foreground">
+                    ({child.productCount})
+                  </span>
+                )}
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Client component for product listing with filters */}
+      <CategoryProductsClient categoryId={category.id} />
+    </div>
+  );
+}
+
+export const revalidate = 60;

package/templates/storefront-nextjs-shadcn/app/{categories → [locale]/categories}/page.tsx

@@ -1,35 +1,44 @@
 import { Metadata } from "next";
-import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
 import { Card } from "@/components/ui/card";
 import { fetchCategories } from "@/lib/graphql/server";
+import type { CategoryNodeFields } from "@/lib/graphql/fragments";
 
-export const metadata: Metadata = {
-  title: "Categories",
-  description: "Browse products by category",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("categories");
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
 
 // Enable ISR with 60 second revalidation
 export const revalidate = 60;
 
 export default async function CategoriesPage() {
-  // Fetch categories from GraphQL API
-  // Response structure: { categories: { roots: [...], totalCount } }
-  const data = await fetchCategories();
+  const t = await getTranslations("categories");
+  let categoryList: CategoryNodeFields[] = [];
 
-  const categoryList = data?.categories?.roots || [];
+  try {
+    const data = await fetchCategories();
+    categoryList = data?.categories?.roots || [];
+  } catch (error) {
+    console.error('[CategoriesPage] Failed to fetch categories:', error instanceof Error ? error.message : error);
+  }
 
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Categories</h1>
+        <h1 className="text-3xl font-bold text-foreground">{t("title")}</h1>
         <p className="mt-2 text-muted-foreground">
-          Browse products by category
+          {t("description")}
         </p>
       </div>
 
       {categoryList.length === 0 ? (
         <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
-          <p className="text-muted-foreground">No categories available yet</p>
+          <p className="text-muted-foreground">{t("noCategories")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">

package/templates/storefront-nextjs-shadcn/app/[locale]/checkout/error.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+import { Link } from "@/i18n/navigation";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function CheckoutError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[Checkout Error]", error);
+  }, [error]);
+
+  return (
+    <div className="container mx-auto flex min-h-[400px] items-center justify-center px-4 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Checkout error
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Something went wrong during checkout. Your cart items are safe.
+          </p>
+          <div className="flex gap-3">
+            <Button onClick={reset}>Try again</Button>
+            <Button variant="outline" asChild>
+              <Link href="/cart">Back to cart</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/[locale]/checkout/loading.tsx

@@ -0,0 +1,31 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CheckoutLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-8 h-10 w-40" />
+      <div className="grid gap-8 lg:grid-cols-5">
+        {/* Checkout form */}
+        <div className="space-y-6 lg:col-span-3">
+          <Skeleton className="h-6 w-48" />
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          </div>
+        </div>
+        {/* Order summary */}
+        <div className="lg:col-span-2">
+          <Skeleton className="h-80 w-full rounded-lg" />
+        </div>
+      </div>
+    </div>
+  );
+}