@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -1,87 +1,3 @@
-/**
- * API Route: Clear Authentication Token
- *
- * Clears the customer access token cookie by setting it to expire immediately.
- * This is used during logout to ensure the user is fully signed out.
- *
- * Security Features:
- * 1. Origin validation - Only accepts requests from same origin (CSRF protection)
- * 2. Immediate expiration - Sets maxAge to 0 to delete cookie
- * 3. Same cookie attributes - Ensures proper deletion across all contexts
- *
- * @see lib/auth/cookies.ts - Cookie configuration
- * @see hooks/use-auth.ts - Client-side usage
- *
- * @example
- * ```tsx
- * // Client-side usage (via clearAuthToken helper)
- * await clearAuthToken();
- * ```
- */
+import { createClearTokenHandler } from '@doswiftly/storefront-sdk';
 
-import { NextRequest, NextResponse } from "next/server";
-import { AUTH_COOKIE_CONFIG } from "@/lib/auth/cookies";
-
-/**
- * POST /api/auth/clear-token
- *
- * Clears the authentication token cookie.
- *
- * @param request - Next.js request object
- * @returns Response confirming token was cleared
- */
-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. Create response
-    const response = NextResponse.json(
-      { success: true, message: "Token cleared successfully" },
-      { status: 200 }
-    );
-
-    // 3. Clear cookie by setting maxAge to 0
-    response.cookies.set({
-      name: AUTH_COOKIE_CONFIG.name,
-      value: "",
-      maxAge: 0, // Expire immediately
-      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 clearing auth token:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
-
-/**
- * OPTIONS /api/auth/clear-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 = createClearTokenHandler();

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/global-error.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+/**
+ * GlobalError — catches errors from root layout (where error.tsx cannot reach).
+ *
+ * This replaces the entire <html> document, so it must include its own
+ * <html> and <body> tags. No providers, no Header/Footer — just a
+ * self-contained error page.
+ *
+ * Next.js docs: https://nextjs.org/docs/app/api-reference/file-conventions/error#global-errorjs
+ */
+
+import { useEffect } from 'react';
+
+interface GlobalErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function GlobalError({ error, reset }: GlobalErrorProps) {
+  useEffect(() => {
+    console.error('[GlobalError]', error);
+  }, [error]);
+
+  return (
+    <html lang="pl">
+      <body
+        style={{
+          margin: 0,
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          backgroundColor: '#fafafa',
+          color: '#1e293b',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '100vh',
+        }}
+      >
+        <div
+          style={{
+            maxWidth: '28rem',
+            width: '100%',
+            padding: '2rem',
+            textAlign: 'center',
+          }}
+        >
+          <div
+            style={{
+              width: '4rem',
+              height: '4rem',
+              margin: '0 auto 1.5rem',
+              borderRadius: '50%',
+              backgroundColor: '#fef2f2',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '1.5rem',
+            }}
+          >
+            !
+          </div>
+
+          <h1 style={{ fontSize: '1.5rem', fontWeight: 600, margin: '0 0 0.5rem' }}>
+            Serwer tymczasowo niedostępny
+          </h1>
+
+          <p style={{ color: '#64748b', margin: '0 0 2rem', lineHeight: 1.6 }}>
+            Nie udało się załadować strony. Serwer może być tymczasowo niedostępny.
+            Spróbuj odświeżyć stronę za chwilę.
+          </p>
+
+          {process.env.NODE_ENV === 'development' && (
+            <div
+              style={{
+                backgroundColor: '#f1f5f9',
+                borderRadius: '0.5rem',
+                padding: '0.75rem 1rem',
+                marginBottom: '1.5rem',
+                textAlign: 'left',
+                fontSize: '0.75rem',
+                wordBreak: 'break-word',
+              }}
+            >
+              <strong style={{ color: '#ef4444' }}>{error.message}</strong>
+              {error.digest && (
+                <p style={{ color: '#64748b', margin: '0.25rem 0 0' }}>
+                  Digest: {error.digest}
+                </p>
+              )}
+            </div>
+          )}
+
+          <button
+            onClick={reset}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '100%',
+              padding: '0.625rem 1.25rem',
+              fontSize: '0.875rem',
+              fontWeight: 500,
+              color: '#fff',
+              backgroundColor: '#3b82f6',
+              border: 'none',
+              borderRadius: '0.5rem',
+              cursor: 'pointer',
+            }}
+          >
+            Spróbuj ponownie
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/globals.css

@@ -122,4 +122,12 @@
   .text-balance {
     text-wrap: balance;
   }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }

package/templates/storefront-nextjs-shadcn/app/layout.tsx

@@ -1,57 +1,30 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { Header } from "@/components/layout/header";
-import { Footer } from "@/components/layout/footer";
-import { QueryProvider } from "@/components/providers/query-provider";
-import { CurrencyProvider } from "@/components/providers/currency-provider";
-import { ThemeProvider } from "@/components/providers/theme-provider";
-import { Toaster } from "sonner";
-import { fetchShop } from "@/lib/graphql/server";
-import { themeConfig } from "@/lib/theme/theme-config";
+import { defaultLocale } from "@/i18n/routing";
 
 const inter = Inter({ subsets: ["latin"] });
 
 const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "My Store";
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3001";
 
 export const metadata: Metadata = {
+  metadataBase: new URL(siteUrl),
   title: `${siteName} - E-commerce Store`,
   description: "Welcome to our online store powered by DoSwiftly Commerce",
 };
 
-// Enable ISR with 60 second revalidation for shop data (currencies)
-export const revalidate = 60;
-
 export default async function RootLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: Promise<{ locale?: string }>;
 }) {
-  // Fetch shop data (includes currencies) for CurrencyProvider
-  const shopData = await fetchShop();
-
+  const { locale } = await params;
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <ThemeProvider
-          attribute={themeConfig.attribute}
-          defaultTheme={themeConfig.defaultTheme}
-          enableSystem={themeConfig.enableSystem}
-          disableTransitionOnChange={themeConfig.disableTransitionOnChange}
-          storageKey={themeConfig.storageKey}
-        >
-          <QueryProvider>
-            <CurrencyProvider shopData={shopData.shop}>
-              <div className="flex min-h-screen flex-col">
-                <Header />
-                <main className="flex-1">{children}</main>
-                <Footer />
-              </div>
-              <Toaster position="bottom-right" richColors />
-            </CurrencyProvider>
-          </QueryProvider>
-        </ThemeProvider>
-      </body>
+    <html lang={locale || defaultLocale} suppressHydrationWarning>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }

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/address-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
@@ -38,6 +39,10 @@ export function AddressForm({
   isLoading = false,
   className,
 }: AddressFormProps) {
+  const t = useTranslations("checkout");
+  const tc = useTranslations("common");
+  const tAccount = useTranslations("account");
+
   const [formData, setFormData] = useState<AddressFormData>(
     address || {
       firstName: "",
@@ -68,25 +73,25 @@ export function AddressForm({
     const newErrors: Partial<Record<keyof AddressFormData, string>> = {};
 
     if (!formData.firstName.trim()) {
-      newErrors.firstName = "First name is required";
+      newErrors.firstName = t("validation.firstNameRequired");
     }
     if (!formData.lastName.trim()) {
-      newErrors.lastName = "Last name is required";
+      newErrors.lastName = t("validation.lastNameRequired");
     }
     if (!formData.address1.trim()) {
-      newErrors.address1 = "Address is required";
+      newErrors.address1 = t("validation.addressRequired");
     }
     if (!formData.city.trim()) {
-      newErrors.city = "City is required";
+      newErrors.city = t("validation.cityRequired");
     }
     if (!formData.province.trim()) {
-      newErrors.province = "Province/State is required";
+      newErrors.province = t("validation.provinceRequired");
     }
     if (!formData.zip.trim()) {
-      newErrors.zip = "Postal code is required";
+      newErrors.zip = t("validation.zipRequired");
     }
     if (!formData.country.trim()) {
-      newErrors.country = "Country is required";
+      newErrors.country = t("validation.countryRequired");
     }
 
     setErrors(newErrors);
@@ -113,7 +118,7 @@ export function AddressForm({
               htmlFor="firstName"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              First Name *
+              {t("address.firstName")} *
             </label>
             <Input
               id="firstName"
@@ -134,7 +139,7 @@ export function AddressForm({
               htmlFor="lastName"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              Last Name *
+              {t("address.lastName")} *
             </label>
             <Input
               id="lastName"
@@ -156,7 +161,7 @@ export function AddressForm({
             htmlFor="company"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Company (optional)
+            {`${t("address.company")} (${tc("optional")})`}
           </label>
           <Input
             id="company"
@@ -173,7 +178,7 @@ export function AddressForm({
             htmlFor="address1"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Address *
+            {t("address.address1")} *
           </label>
           <Input
             id="address1"
@@ -194,7 +199,7 @@ export function AddressForm({
             htmlFor="address2"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Apartment, suite, etc. (optional)
+            {`${t("address.address2")} (${tc("optional")})`}
           </label>
           <Input
             id="address2"
@@ -212,7 +217,7 @@ export function AddressForm({
               htmlFor="city"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              City *
+              {t("address.city")} *
             </label>
             <Input
               id="city"
@@ -233,7 +238,7 @@ export function AddressForm({
               htmlFor="province"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              Province/State *
+              {t("address.province")} *
             </label>
             <Input
               id="province"
@@ -254,7 +259,7 @@ export function AddressForm({
               htmlFor="zip"
               className="block text-sm font-medium text-foreground mb-1"
             >
-              Postal Code *
+              {t("address.zip")} *
             </label>
             <Input
               id="zip"
@@ -276,7 +281,7 @@ export function AddressForm({
             htmlFor="country"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Country *
+            {t("address.country")} *
           </label>
           <Input
             id="country"
@@ -297,7 +302,7 @@ export function AddressForm({
             htmlFor="phone"
             className="block text-sm font-medium text-foreground mb-1"
           >
-            Phone (optional)
+            {`${t("address.phone")} (${tc("optional")})`}
           </label>
           <Input
             id="phone"
@@ -322,14 +327,14 @@ export function AddressForm({
             htmlFor="isDefault"
             className="text-sm font-medium text-foreground"
           >
-            Set as default address
+            {tAccount("setAsDefault")}
           </label>
         </div>
 
         {/* Form Actions */}
         <div className="flex gap-3 pt-4">
           <Button type="submit" disabled={isLoading} className="flex-1">
-            {isLoading ? "Saving..." : address ? "Update Address" : "Add Address"}
+            {isLoading ? tc("saving") : address ? tAccount("editAddress") : tAccount("addAddress")}
           </Button>
           {onCancel && (
             <Button
@@ -338,7 +343,7 @@ export function AddressForm({
               onClick={onCancel}
               disabled={isLoading}
             >
-              Cancel
+              {tc("cancel")}
             </Button>
           )}
         </div>