@doswiftly/cli 0.1.18 → 0.1.19

package/templates/storefront-nextjs-shadcn/app/api/auth/set-token/route.ts

@@ -1,125 +1,3 @@
-/**
- * API Route: Set Authentication Token
- *
- * Sets the customer access token in an httpOnly cookie.
- * This provides security by preventing client-side JavaScript from accessing the token.
- *
- * Security Features:
- * 1. httpOnly cookie - Cannot be accessed via JavaScript (XSS protection)
- * 2. Secure flag - Only sent over HTTPS in production
- * 3. SameSite=Lax - CSRF protection
- * 4. Origin validation - Only accepts requests from same origin
- * 5. Content-Type validation - Only accepts JSON
- *
- * @see lib/auth/cookies.ts - Cookie configuration
- * @see hooks/use-auth.ts - Client-side usage
- *
- * @example
- * ```tsx
- * // Client-side usage (via setAuthToken helper)
- * await setAuthToken(customerAccessToken.accessToken);
- * ```
- */
+import { createSetTokenHandler } from '@doswiftly/storefront-sdk';
 
-import { NextRequest, NextResponse } from "next/server";
-import { AUTH_COOKIE_CONFIG } from "@/lib/auth/cookies";
-
-/**
- * Request body schema
- */
-interface SetTokenRequest {
-  token: string;
-}
-
-/**
- * POST /api/auth/set-token
- *
- * Sets the authentication token in an httpOnly cookie.
- *
- * @param request - Next.js request object
- * @returns Response with Set-Cookie header
- */
-export async function POST(request: NextRequest) {
-  try {
-    // 1. CSRF Protection: Validate origin
-    const origin = request.headers.get("origin");
-    const host = request.headers.get("host");
-
-    // Only allow requests from same origin
-    if (origin && !origin.includes(host || "")) {
-      return NextResponse.json(
-        { error: "Invalid origin" },
-        { status: 403 }
-      );
-    }
-
-    // 2. Validate Content-Type
-    const contentType = request.headers.get("content-type");
-    if (!contentType?.includes("application/json")) {
-      return NextResponse.json(
-        { error: "Content-Type must be application/json" },
-        { status: 400 }
-      );
-    }
-
-    // 3. Parse and validate request body
-    let body: SetTokenRequest;
-    try {
-      body = await request.json();
-    } catch {
-      return NextResponse.json(
-        { error: "Invalid JSON body" },
-        { status: 400 }
-      );
-    }
-
-    const { token } = body;
-
-    if (!token || typeof token !== "string" || token.trim() === "") {
-      return NextResponse.json(
-        { error: "Token is required and must be a non-empty string" },
-        { status: 400 }
-      );
-    }
-
-    // 4. Create response with Set-Cookie header
-    const response = NextResponse.json(
-      { success: true, message: "Token set successfully" },
-      { status: 200 }
-    );
-
-    // 5. Set httpOnly cookie
-    response.cookies.set({
-      name: AUTH_COOKIE_CONFIG.name,
-      value: token,
-      maxAge: AUTH_COOKIE_CONFIG.maxAge,
-      path: AUTH_COOKIE_CONFIG.path,
-      sameSite: AUTH_COOKIE_CONFIG.sameSite,
-      secure: AUTH_COOKIE_CONFIG.secure,
-      httpOnly: AUTH_COOKIE_CONFIG.httpOnly,
-    });
-
-    return response;
-  } catch (error) {
-    console.error("Error setting auth token:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
-
-/**
- * OPTIONS /api/auth/set-token
- *
- * Handle preflight requests for CORS.
- */
-export async function OPTIONS() {
-  return new NextResponse(null, {
-    status: 204,
-    headers: {
-      "Access-Control-Allow-Methods": "POST, OPTIONS",
-      "Access-Control-Allow-Headers": "Content-Type",
-    },
-  });
-}
+export const POST = createSetTokenHandler();

package/templates/storefront-nextjs-shadcn/app/auth/forgot-password/page.tsx

@@ -3,22 +3,27 @@
 import { useState } from "react";
 import Link from "next/link";
 import { useMutation } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import { CustomerPasswordRecoverDocument } from "@/generated/graphql";
+import { useExecute } from "@/lib/graphql/client";
+import {
+  CustomerPasswordRecoverDocument,
+  type CustomerPasswordRecoverMutation,
+} from "@/generated/graphql";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ArrowLeft } from "lucide-react";
 
 export default function ForgotPasswordPage() {
+  const execute = useExecute();
   const [email, setEmail] = useState("");
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [error, setError] = useState("");
 
-  const client = getGraphQLClient();
-
   const recoverMutation = useMutation({
     mutationFn: async (email: string) => {
-      return client.request(CustomerPasswordRecoverDocument, { email });
+      return execute<CustomerPasswordRecoverMutation>(
+        CustomerPasswordRecoverDocument.toString(),
+        { email },
+      );
     },
     onSuccess: () => {
       setIsSubmitted(true);

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

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function BlogPostLoading() {
+  return (
+    <div className="container mx-auto max-w-3xl px-4 py-8">
+      <Skeleton className="mb-4 h-5 w-64" />
+      <Skeleton className="mb-2 h-10 w-full" />
+      <Skeleton className="mb-8 h-5 w-48" />
+      <Skeleton className="mb-8 aspect-video w-full rounded-lg" />
+      <div className="space-y-4">
+        {[...Array(8)].map((_, i) => (
+          <Skeleton key={i} className="h-4 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -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/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/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/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/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useCartStore } from "@/stores/cart-store";
+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";
@@ -26,6 +26,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();
 
@@ -49,7 +52,7 @@ export default function CartPage() {
 
   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" };
       }
@@ -86,7 +89,7 @@ export default function CartPage() {
 
   const handleRemovePromo = async () => {
     try {
-      const cartId = useCartStore.getState().cartId;
+      const cartId = cartStoreApi.getState().cartId;
       if (!cartId) return;
 
       await discountMutation.mutateAsync({

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

@@ -0,0 +1,56 @@
+"use client";
+
+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 { 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">
+          Failed to load products. Please try again.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <ProductGrid
+      products={products}
+      columns={4}
+      priorityCount={8}
+      showBadges
+      emptyMessage="No products in this category"
+    />
+  );
+}

package/templates/storefront-nextjs-shadcn/app/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/categories/[slug]/page.tsx

@@ -1,78 +1,95 @@
-"use client";
-
-import { useParams } from "next/navigation";
-import { ProductGrid } from "@/components/product/product-grid";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useProducts } from "@/lib/graphql/hooks";
+import { fetchCategory } from "@/lib/graphql/server";
+import { CategoryProductsClient } from "./category-products-client";
 
-export default function CategoryPage() {
-  const params = useParams();
-  const slug = params.slug as string;
+/**
+ * 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;
 
-  // Fetch products for this category using GraphQL query
-  const { data, isLoading, error } = useProducts({
-    first: 20,
-    query: `category:${slug}`,
-  });
+    if (!category) {
+      return { title: "Category Not Found" };
+    }
 
-  const products = data?.products ?? [];
+    return {
+      title: category.name,
+      description:
+        category.description || `Browse ${category.name} products`,
+    };
+  } catch {
+    return { title: "Category" };
+  }
+}
 
-  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>
-    );
+/**
+ * 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 (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>
-    );
+  if (!category) {
+    notFound();
   }
 
   return (
     <div className="container mx-auto px-4 py-8">
       <Breadcrumbs className="mb-6" />
 
-      {/* Category Header */}
+      {/* Category Header — SSR, SEO-friendly */}
       <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>
+        <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>
 
-      {/* Products Grid */}
-      <ProductGrid
-        products={products}
-        columns={4}
-        priorityCount={8}
-        showBadges
-        emptyMessage="No products in this category"
-      />
+      {/* Client component for product listing with filters */}
+      <CategoryProductsClient categoryId={category.id} />
     </div>
   );
 }
+
+export const revalidate = 60;

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

@@ -2,6 +2,7 @@ import { Metadata } from "next";
 import Link from "next/link";
 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",
@@ -12,11 +13,14 @@ export const metadata: Metadata = {
 export const revalidate = 60;
 
 export default async function CategoriesPage() {
-  // Fetch categories from GraphQL API
-  // Response structure: { categories: { roots: [...], totalCount } }
-  const data = await fetchCategories();
+  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">

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

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+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>
+  );
+}