@doswiftly/cli 0.1.17 → 0.1.19

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

@@ -1,45 +1,62 @@
-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';
+import type { CodegenConfig } from '@graphql-codegen/cli';
 
+/**
+ * GraphQL Code Generator Configuration
+ *
+ * Uses `client-preset` with `documentMode: 'string'` (TypedDocumentString).
+ * This generates lightweight string-based documents instead of parsed AST objects,
+ * eliminating the need for the `graphql` package at runtime.
+ *
+ * Schema and operations come from @doswiftly/storefront-operations (SSOT).
+ * No running backend needed — schema is synced as a file.
+ *
+ * Architecture decision: https://github.com/dotansimha/graphql-typed-document-node
+ * Inspired by: Saleor Storefront (client-preset + TypedDocumentString)
+ *
+ * To update schema after backend changes:
+ *   cd packages/@doswiftly/storefront-operations && pnpm run sync
+ */
 const config: CodegenConfig = {
-  // Schema from live API (introspection)
-  schema: [
-    {
-      [`${apiUrl}/storefront/graphql`]: {
-        headers: {
-          'X-Shop-Slug': shopSlug,
-        },
-      },
-    },
-  ],
+  // Schema from storefront-operations package (no introspection needed!)
+  schema: 'node_modules/@doswiftly/storefront-operations/schema.graphql',
 
-  // Operations: Backend SSOT + Developer Custom Queries
+  // Operations: Backend SSOT + Developer Custom Queries + Colocated Component Fragments
   documents: [
-    'node_modules/@doswiftly/storefront-operations/**/*.graphql', // Backend operations
-    'graphql/**/*.{ts,tsx}',                                       // Custom queries in code
+    'node_modules/@doswiftly/storefront-operations/**/*.graphql',
+    'graphql/**/*.graphql',
+    'components/**/*.fragment.graphql',
   ],
 
-  // Output configuration
   generates: {
-    'generated/graphql.ts': {
-      plugins: [
-        'typescript',                    // Generate TS types
-        'typescript-operations',         // Generate operation types
-        'typed-document-node',           // Generate TypedDocumentNode
-      ],
+    'generated/': {
+      preset: 'client',
       config: {
-        skipTypename: false,
-        enumsAsTypes: true,
+        // TypedDocumentString: lightweight string wrapper instead of parsed AST
+        // Eliminates `graphql` package from runtime bundle (~40kb savings)
+        documentMode: 'string',
+
+        // Scalar mappings
         scalars: {
           DateTime: 'string',
-          JSON: 'Record<string, any>',
+          Decimal: 'string',
+          JSON: 'Record<string, unknown>',
         },
+
+        // Keep __typename for connection normalization and cache keys
+        skipTypename: false,
+
+        // Readable enum types (union of string literals)
+        enumsAsTypes: true,
+
+        // Deduplicate fragments shared across queries
+        dedupeFragments: true,
+
+        // Use `import type` for cleaner output
+        useTypeImports: true,
+      },
+      presetConfig: {
+        // Disable fragment masking — simpler DX, developer sees all fields
+        fragmentMasking: false,
       },
     },
   },

package/templates/storefront-nextjs-shadcn/components/account/customer-info.fragment.graphql

@@ -0,0 +1,36 @@
+# Fragment for CustomerInfo / AccountDashboard components.
+#
+# Customer profile data for account pages.
+# Does NOT include orders or addresses (fetch separately).
+#
+# Usage in components:
+#   import type { CustomerInfoFieldsFragment } from '@/generated/graphql';
+#   interface Props { customer: CustomerInfoFieldsFragment }
+
+fragment CustomerInfoFields on Customer {
+  id
+  email
+  firstName
+  lastName
+  displayName
+  phone
+  emailVerified
+  ordersCount
+  totalSpent {
+    amount
+    currencyCode
+  }
+  defaultAddress {
+    id
+    firstName
+    lastName
+    address1
+    address2
+    city
+    province
+    zip
+    country
+    phone
+  }
+  createdAt
+}

package/templates/storefront-nextjs-shadcn/components/account/order-details.tsx

@@ -39,7 +39,7 @@ export interface OrderDetailsData {
   tax: string;
   total: string;
   currency: string;
-  shippingAddress: OrderAddress;
+  shippingAddress?: OrderAddress;
   billingAddress?: OrderAddress;
   trackingNumber?: string;
   estimatedDelivery?: string;
@@ -237,12 +237,14 @@ export function OrderDetails({ order, className }: OrderDetailsProps) {
 
       {/* Addresses */}
       <div className="grid gap-6 md:grid-cols-2">
+        {order.shippingAddress && (
         <Card className="p-6">
           <h3 className="text-lg font-semibold text-foreground mb-4">
             Shipping Address
           </h3>
           {formatAddress(order.shippingAddress)}
         </Card>
+        )}
 
         {order.billingAddress && (
           <Card className="p-6">

package/templates/storefront-nextjs-shadcn/components/account/order-history.tsx

@@ -4,20 +4,11 @@ import Link from "next/link";
 import { Package, ChevronRight } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { formatAmount } from "@/lib/format";
-
-export interface Order {
-  id: string;
-  orderNumber: string;
-  date: string;
-  status: "delivered" | "shipped" | "processing" | "cancelled";
-  total: string;
-  currency: string;
-  itemCount: number;
-}
+import { formatAmount } from "@doswiftly/storefront-sdk";
+import type { OrderSummaryFields } from "@/lib/graphql/fragments";
 
 export interface OrderHistoryProps {
-  orders: Order[];
+  orders: OrderSummaryFields[];
   className?: string;
 }
 
@@ -25,17 +16,28 @@ export interface OrderHistoryProps {
  * OrderHistory - Display list of customer orders
  */
 export function OrderHistory({ orders, className }: OrderHistoryProps) {
-  const getStatusBadge = (status: Order["status"]) => {
-    const variants: Record<Order["status"], "default" | "secondary" | "success" | "warning"> = {
-      delivered: "success",
-      shipped: "default",
-      processing: "warning",
-      cancelled: "secondary",
+  const getStatusBadge = (status: string) => {
+    const variants: Record<string, "default" | "secondary" | "success" | "warning"> = {
+      DELIVERED: "success",
+      FULFILLED: "success",
+      IN_TRANSIT: "default",
+      PARTIALLY_FULFILLED: "warning",
+      UNFULFILLED: "warning",
+      RETURNED: "secondary",
+    };
+
+    const labels: Record<string, string> = {
+      DELIVERED: "Delivered",
+      FULFILLED: "Fulfilled",
+      IN_TRANSIT: "Shipped",
+      PARTIALLY_FULFILLED: "Partially Fulfilled",
+      UNFULFILLED: "Processing",
+      RETURNED: "Returned",
     };
 
     return (
-      <Badge variant={variants[status]}>
-        {status.charAt(0).toUpperCase() + status.slice(1)}
+      <Badge variant={variants[status] ?? "secondary"}>
+        {labels[status] ?? status}
       </Badge>
     );
   };
@@ -80,12 +82,12 @@ export function OrderHistory({ orders, className }: OrderHistoryProps) {
                   <h3 className="text-lg font-semibold text-foreground">
                     Order {order.orderNumber}
                   </h3>
-                  {getStatusBadge(order.status)}
+                  {getStatusBadge(order.fulfillmentStatus)}
                 </div>
                 <div className="space-y-1 text-sm text-muted-foreground">
-                  <p>Placed on {formatDate(order.date)}</p>
+                  <p>Placed on {formatDate(order.processedAt)}</p>
                   <p>
-                    {order.itemCount} {order.itemCount === 1 ? "item" : "items"}
+                    {order.lineItemsCount} {order.lineItemsCount === 1 ? "item" : "items"}
                   </p>
                 </div>
               </div>
@@ -93,7 +95,7 @@ export function OrderHistory({ orders, className }: OrderHistoryProps) {
                 <div className="text-right">
                   <p className="text-sm text-muted-foreground">Total</p>
                   <p className="text-lg font-semibold text-foreground">
-                    {formatAmount(order.total, order.currency)}
+                    {formatAmount(order.totalPrice.amount, order.totalPrice.currencyCode)}
                   </p>
                 </div>
                 <ChevronRight className="h-5 w-5 text-muted-foreground" />

package/templates/storefront-nextjs-shadcn/components/account/order-summary.fragment.graphql

@@ -0,0 +1,36 @@
+# Fragment for OrderCard component in account pages.
+#
+# Minimal order data for listing view. Full order details
+# require the Order fragment from storefront-operations.
+#
+# Usage in components:
+#   import type { OrderSummaryFieldsFragment } from '@/generated/graphql';
+#   interface Props { order: OrderSummaryFieldsFragment }
+
+fragment OrderSummaryFields on Order {
+  id
+  orderNumber
+  status
+  financialStatus
+  fulfillmentStatus
+  processedAt
+  lineItemsCount
+  totalPrice {
+    amount
+    currencyCode
+  }
+  subtotalPrice {
+    amount
+    currencyCode
+  }
+  totalShipping {
+    amount
+    currencyCode
+  }
+  shippingAddress {
+    firstName
+    lastName
+    city
+    country
+  }
+}

package/templates/storefront-nextjs-shadcn/components/auth/account-menu.tsx

@@ -6,25 +6,24 @@ import { useRouter } from "next/navigation";
 import { User, LogOut, Package, MapPin, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { useAuth } from "@/hooks/use-auth";
 
 export interface AccountMenuProps {
   customerName?: string;
   className?: string;
 }
 
-/**
- * AccountMenu - User account dropdown menu
- * 
- * Shows user profile and quick links to account pages
- */
 export function AccountMenu({ customerName, className }: AccountMenuProps) {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
+  const { logout, isLoggingOut } = useAuth();
 
   const handleLogout = async () => {
-    await fetch("/api/auth/clear-token", { method: "POST" });
-    router.push("/");
+    const result = await logout();
+    if (result.success) {
+      router.push("/");
+    }
     setIsOpen(false);
   };
 
@@ -119,10 +118,11 @@ export function AccountMenu({ customerName, className }: AccountMenuProps) {
           <div className="border-t border-border py-2">
             <button
               onClick={handleLogout}
-              className="flex w-full items-center gap-3 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors"
+              disabled={isLoggingOut}
+              className="flex w-full items-center gap-3 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors disabled:opacity-50"
             >
               <LogOut className="h-4 w-4" />
-              Sign Out
+              {isLoggingOut ? "Signing out..." : "Sign Out"}
             </button>
           </div>
         </div>

package/templates/storefront-nextjs-shadcn/components/auth/login-form.tsx

@@ -6,9 +6,8 @@ import Link from "next/link";
 import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useCustomerLogin } from "@/lib/graphql/hooks";
+import { useAuth } from "@/hooks/use-auth";
 
-// Zod validation schema for login form
 const loginSchema = z.object({
   email: z
     .string()
@@ -27,11 +26,6 @@ export interface LoginFormProps {
   redirectTo?: string;
 }
 
-/**
- * LoginForm - Reusable login form component with Zod validation
- * 
- * Validates user input before submission and displays field-level errors
- */
 export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -42,18 +36,16 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
   const [error, setError] = useState("");
   const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof LoginFormData, string>>>({});
 
-  const loginMutation = useCustomerLogin();
+  const { login, isLoggingIn } = useAuth();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
     setFieldErrors({});
 
-    // Validate form data with Zod
     const result = loginSchema.safeParse({ email, password });
 
     if (!result.success) {
-      // Extract field-level errors from Zod validation
       const errors: Partial<Record<keyof LoginFormData, string>> = {};
       result.error.errors.forEach((err) => {
         if (err.path[0]) {
@@ -65,37 +57,19 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
     }
 
     try {
-      const { customerAccessTokenCreate } = await loginMutation.mutateAsync({
-        input: { email, password },
-      });
+      const loginResult = await login(email, password);
 
-      // Check for user errors first
-      const userErrors = customerAccessTokenCreate?.userErrors || [];
-      
-      if (userErrors.length > 0) {
-        setError(userErrors[0].message || "Login failed");
+      if (!loginResult.success) {
+        setError(loginResult.userErrors[0]?.message || "Login failed");
         return;
       }
 
-      if (customerAccessTokenCreate?.customerAccessToken) {
-        // Store token in httpOnly cookie via API route
-        await fetch("/api/auth/set-token", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            token: customerAccessTokenCreate.customerAccessToken.accessToken,
-          }),
-        });
-
-        if (onSuccess) {
-          onSuccess();
-        } else {
-          router.push(defaultRedirect);
-        }
+      if (onSuccess) {
+        onSuccess();
       } else {
-        setError("Login failed. Please check your credentials.");
+        router.push(defaultRedirect);
       }
-    } catch (err) {
+    } catch {
       setError("An error occurred. Please try again.");
     }
   };
@@ -169,9 +143,9 @@ export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
       <Button
         type="submit"
         className="w-full"
-        disabled={loginMutation.isPending}
+        disabled={isLoggingIn}
       >
-        {loginMutation.isPending ? "Signing in..." : "Sign In"}
+        {isLoggingIn ? "Signing in..." : "Sign In"}
       </Button>
 
       <div className="text-center text-sm text-muted-foreground">

package/templates/storefront-nextjs-shadcn/components/auth/register-form.tsx

@@ -4,9 +4,13 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { z } from "zod";
-import { useMutation } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import { CustomerCreateDocument } from "@/generated/graphql";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useExecute } from "@/lib/graphql/client";
+import { CustomerCreateDocument, type CustomerCreateMutation } from "@/generated/graphql";
+import { useAuthStore } from "@doswiftly/storefront-sdk/react";
+import { createAuthTokenClient } from "@doswiftly/storefront-sdk";
+
+const { setToken: setAuthToken } = createAuthTokenClient();
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
@@ -58,7 +62,9 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
   const [error, setError] = useState("");
   const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof RegisterFormData, string>>>({});
 
-  const client = getGraphQLClient();
+  const queryClient = useQueryClient();
+  const { setAuth } = useAuthStore();
+  const execute = useExecute();
 
   const registerMutation = useMutation({
     mutationFn: async (input: {
@@ -67,7 +73,10 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
       firstName: string;
       lastName: string;
     }) => {
-      return client.request(CustomerCreateDocument, { input });
+      return execute<CustomerCreateMutation>(
+        CustomerCreateDocument.toString(),
+        { input },
+      );
     },
   });
 
@@ -105,8 +114,7 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
       });
 
       // Check for user errors first
-      const userErrors = mutationResult?.customerCreate?.userErrors || 
-                        mutationResult?.customerCreate?.customerUserErrors || [];
+      const userErrors = mutationResult?.customerCreate?.userErrors || [];
       
       if (userErrors.length > 0) {
         setError(userErrors[0].message || "Registration failed");
@@ -114,28 +122,34 @@ export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFor
       }
 
       if (mutationResult?.customerCreate?.customer) {
-        // Registration successful - token is already in the response
         const accessToken = mutationResult?.customerCreate?.customerAccessToken?.accessToken;
-        
+        const customer = mutationResult.customerCreate.customer;
+
         if (accessToken) {
-          // Store token in httpOnly cookie via API route
-          const tokenResponse = await fetch("/api/auth/set-token", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ token: accessToken }),
-          });
+          // Store token in Zustand store (for client-side GraphQL requests)
+          setAuth(
+            {
+              id: customer.id,
+              email: customer.email,
+              firstName: customer.firstName || undefined,
+              lastName: customer.lastName || undefined,
+              phone: customer.phone || undefined,
+            },
+            accessToken,
+          );
+
+          // Store token in httpOnly cookie (for SSR/middleware)
+          await setAuthToken(accessToken);
+
+          // Invalidate queries so authenticated data loads fresh
+          queryClient.invalidateQueries();
 
-          if (tokenResponse.ok) {
-            if (onSuccess) {
-              onSuccess();
-            } else {
-              router.push(redirectTo);
-            }
+          if (onSuccess) {
+            onSuccess();
           } else {
-            setError("Registration successful but session setup failed. Please try logging in.");
+            router.push(redirectTo);
           }
         } else {
-          // No token in response - redirect to login
           setError("Registration successful! Please log in with your credentials.");
           setTimeout(() => router.push("/auth/login"), 2000);
         }

package/templates/storefront-nextjs-shadcn/components/cart/cart-drawer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 import { X, ShoppingBag, Loader2 } from "lucide-react";
 import { useCartStore } from "@/stores/cart-store";
 import { useCartSync } from "@/hooks/use-cart-sync";
@@ -22,6 +23,8 @@ export interface CartDrawerProps {
  * Mutations go through useCartActions (server-only).
  */
 export function CartDrawer({ className }: CartDrawerProps) {
+  const router = useRouter();
+
   // UI state from Zustand
   const { isOpen, closeCart } = useCartStore();
 
@@ -45,9 +48,7 @@ export function CartDrawer({ className }: CartDrawerProps) {
 
   const handleCheckout = () => {
     closeCart();
-    if (typeof window !== 'undefined') {
-      window.location.href = "/checkout";
-    }
+    router.push("/checkout");
   };
 
   if (!isOpen) return null;

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

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { ShoppingCart } from "lucide-react";
 import { useCartSync } from "@/hooks/use-cart-sync";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -15,11 +16,13 @@ export interface CartIconProps {
 /**
  * CartIcon - Cart button with item count badge
  *
- * Client Component that reads cart count from server (source of truth)
+ * Client Component that reads cart count from server (source of truth).
+ * Badge is guarded by isHydrated to prevent hydration mismatch.
  */
 export function CartIcon({ className, navigateToCart = true }: CartIconProps) {
   const router = useRouter();
-  const { totalQuantity, isLoading } = useCartSync();
+  const isHydrated = useHydrated();
+  const { totalQuantity } = useCartSync();
 
   const handleClick = () => {
     if (navigateToCart) {
@@ -33,12 +36,12 @@ export function CartIcon({ className, navigateToCart = true }: CartIconProps) {
       size="sm"
       onClick={handleClick}
       className={cn("relative p-2", className)}
-      aria-label={`Shopping cart with ${totalQuantity} items`}
+      aria-label={`Shopping cart${isHydrated && totalQuantity > 0 ? ` with ${totalQuantity} items` : ""}`}
     >
       <ShoppingCart className="h-5 w-5" />
 
-      {/* Badge */}
-      {totalQuantity > 0 && (
+      {/* Badge — only rendered after hydration to prevent mismatch */}
+      {isHydrated && totalQuantity > 0 && (
         <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
           {totalQuantity > 99 ? "99+" : totalQuantity}
         </span>

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

@@ -6,7 +6,7 @@ import { ProductImage } from "@/components/product/product-image";
 import { ProductQuantitySelector } from "@/components/product/product-quantity-selector";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { formatPrice, formatAmount } from "@/lib/format";
+import { formatPrice, formatAmount } from "@doswiftly/storefront-sdk";
 import type { CartItemData } from "@/hooks/use-cart-sync";
 
 export interface CartItemProps {

package/templates/storefront-nextjs-shadcn/components/cart/cart-line.fragment.graphql

@@ -0,0 +1,53 @@
+# Fragment for CartItem / CartLine component.
+#
+# Maps to the CartItemData interface in use-cart-sync.ts.
+# Used by: CartDrawer, CartPage, MiniCart.
+#
+# Usage in components:
+#   import type { CartLineFieldsFragment } from '@/generated/graphql';
+#   interface Props { line: CartLineFieldsFragment }
+#
+# Note: This is a UI-focused subset. The full Cart fragment
+# from storefront-operations includes cost aggregates and
+# discount allocations for the cart summary.
+
+fragment CartLineFields on CartLine {
+  id
+  quantity
+  productId
+  productTitle
+  productHandle
+  productType
+  merchandise {
+    id
+    title
+    available
+    quantityAvailable
+    price {
+      amount
+      currencyCode
+    }
+    image {
+      url
+      altText
+    }
+    selectedOptions {
+      name
+      value
+    }
+  }
+  cost {
+    amountPerQuantity {
+      amount
+      currencyCode
+    }
+    totalAmount {
+      amount
+      currencyCode
+    }
+    compareAtAmountPerQuantity {
+      amount
+      currencyCode
+    }
+  }
+}

package/templates/storefront-nextjs-shadcn/components/cart/cart-summary.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { formatAmount } from "@/lib/format";
+import { formatAmount } from "@doswiftly/storefront-sdk";
 
 export interface CartSummaryProps {
   subtotal: number;