@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/storefront-nextjs-shadcn/next.config.ts

@@ -1,10 +1,14 @@
 import type { NextConfig } from 'next';
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin();
 
 const nextConfig: NextConfig = {
   // Enable React strict mode for better development experience
   reactStrictMode: true,
 
-  // Image optimization configuration
+  // Image optimization — GraphQL API returns ready-to-use CDN URLs.
+  // Use url(transform: { maxWidth: 800 }) in queries. No client-side loader needed.
   images: {
     remotePatterns: [
       {
@@ -21,11 +25,8 @@ const nextConfig: NextConfig = {
         port: '8000',
       },
     ],
-    // Allow dangerous URLs for local development
     dangerouslyAllowSVG: true,
     contentDispositionType: 'attachment',
-    // Disable image optimization for local development if needed
-    unoptimized: process.env.NODE_ENV === 'development',
   },
 
   // Experimental features
@@ -44,4 +45,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);

package/templates/storefront-nextjs-shadcn/package.dev.json

@@ -9,9 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@doswiftly/commerce-sdk": "file:../../../commerce-sdk",
-    "graphql-request": "^7.1.2",
-    "graphql": "^16.10.0",
+    "@doswiftly/storefront-sdk": "file:../../@doswiftly/storefront-sdk",
     "next": "latest",
     "react": "^19",
     "react-dom": "^19",

package/templates/storefront-nextjs-shadcn/package.json

@@ -13,19 +13,16 @@
   },
   "dependencies": {
     "@doswiftly/storefront-operations": "{{STOREFRONT_OPS_VERSION}}",
-    "@graphql-typed-document-node/core": "^3.2.0",
+    "@doswiftly/storefront-sdk": "^4.0.0",
     "@tanstack/react-query": "^5.62.0",
-    "graphql-request": "^7.1.2",
-    "graphql": "^16.10.0",
-    "graphql-tag": "^2.12.6",
-    "js-cookie": "^3.0.5",
-    "next": "^15.1.9",
+    "next": "^16.1.7",
     "react": "^19",
     "react-dom": "^19",
     "lucide-react": "latest",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.0",
@@ -37,24 +34,27 @@
     "zustand": "^5.0.2",
     "zod": "^3.23.8",
     "sonner": "^1.7.1",
-    "next-themes": "^0.4.4"
+    "next-intl": "^4.1.0",
+    "next-themes": "^0.4.4",
+    "react-hook-form": "^7.55.0",
+    "@hookform/resolvers": "^5.2.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.3",
-    "@graphql-codegen/typescript": "^4.1.2",
-    "@graphql-codegen/typescript-operations": "^4.4.2",
-    "@graphql-codegen/typed-document-node": "^5.0.12",
-    "@next/env": "^15.1.9",
-    "@opennextjs/cloudflare": "^1.0.0",
-    "@types/js-cookie": "^3.0.6",
+    "@graphql-codegen/client-preset": "^4.5.1",
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "graphql": "^16.10.0",
+    "@next/env": "^16.0.0",
+    "@opennextjs/cloudflare": "^1.17.1",
     "@types/node": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
+    "schema-dts": "^1.1.2",
     "fast-check": "^3.15.0",
     "typescript": "latest",
     "@tailwindcss/postcss": "latest",
     "tailwindcss": "latest",
     "eslint": "latest",
-    "eslint-config-next": "^15.1.9"
+    "eslint-config-next": "^16.0.0"
   }
 }

package/templates/storefront-nextjs-shadcn/package.json.template

@@ -12,15 +12,14 @@
   },
   "dependencies": {
     "@doswiftly/storefront-operations": "{{STOREFRONT_OPS_VERSION}}",
-    "@graphql-typed-document-node/core": "^3.2.0",
+    "@doswiftly/storefront-sdk": "{{SDK_VERSION}}",
     "@tanstack/react-query": "^5.62.0",
-    "graphql-request": "^7.1.2",
-    "graphql": "^16.10.0",
-    "graphql-tag": "^2.12.6",
     "next": "latest",
     "react": "^19",
     "react-dom": "^19",
     "lucide-react": "latest",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -30,9 +29,9 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.3",
-    "@graphql-codegen/typescript": "^4.1.2",
-    "@graphql-codegen/typescript-operations": "^4.4.2",
-    "@graphql-codegen/typed-document-node": "^5.0.12",
+    "@graphql-codegen/client-preset": "^4.5.1",
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "graphql": "^16.10.0",
     "@next/env": "latest",
     "@types/node": "latest",
     "@types/react": "latest",

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

@@ -1,80 +1,148 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
+import createMiddleware from "next-intl/middleware";
+import { defaultLocale, localePrefix } from "@/i18n/routing";
+import {
+  AUTH_COOKIE_NAME,
+  LANGUAGE_COOKIE_NAME,
+  LANGUAGE_COOKIE_MAX_AGE,
+  matchesRoute,
+} from "@doswiftly/storefront-sdk";
 import {
   protectedRoutes,
   guestOnlyRoutes,
-  AUTH_COOKIE_NAME,
   redirects,
-  matchesRoute,
 } from "@/lib/auth/routes";
 
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+const shopSlug = process.env.NEXT_PUBLIC_SHOP_SLUG || "demo-shop";
+
 /**
- * Authentication Proxy Function (Next.js 15+)
- *
- * Security Model (3 layers):
- * 1. Proxy function (this file) - Fast redirect based on cookie existence (UX layer)
- * 2. AuthGuard component - Client-side validation via useAuth hook
- * 3. GraphQL Backend - Ultimate security (validates token on every request)
- *
- * IMPORTANT: This proxy checks cookie EXISTENCE, not VALIDITY.
- * Token validation happens in:
- * - AuthGuard (client-side via useAuth hook)
- * - GraphQL API (server-side, ultimate security)
+ * Fetch supported locales from backend (cached 60s).
+ * Backend is SSOT — merchant adds/removes language → immediately reflected.
  *
- * Why this approach?
- * - Proxy runs on Edge Runtime (fast, but limited capabilities)
- * - Cannot make GraphQL requests to validate token
- * - Provides instant redirect without waiting for client hydration
- * - Prevents flash of protected content for unauthenticated users
- *
- * @see lib/auth/routes.ts - SSOT for route configuration
- * @see components/auth/auth-guard.tsx - Client-side auth protection
+ * In-memory cache is acceptable in middleware context — warm instances benefit,
+ * cold starts make one extra backend call (graceful degradation).
  */
-export function proxy(request: NextRequest) {
+let cachedLocales: string[] | null = null;
+let cacheExpiry = 0;
+let cachedIntlMiddleware: ReturnType<typeof createMiddleware> | null = null;
+let cachedLocaleRegex: RegExp | null = null;
+
+async function getSupportedLocales(): Promise<string[]> {
+  const now = Date.now();
+  if (cachedLocales && now < cacheExpiry) {
+    return cachedLocales;
+  }
+
+  try {
+    const res = await fetch(`${apiUrl}/storefront/graphql`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Shop-Slug": shopSlug,
+      },
+      body: JSON.stringify({
+        query: `{ shop { supportedLanguages } }`,
+      }),
+    });
+    const json = await res.json();
+    const locales: string[] =
+      json?.data?.shop?.supportedLanguages?.filter(Boolean);
+
+    if (locales && locales.length > 0) {
+      cachedLocales = locales;
+      cacheExpiry = now + 60_000; // 60s cache
+      // Rebuild derived caches when locales change
+      cachedIntlMiddleware = createMiddleware({
+        locales,
+        defaultLocale,
+        localePrefix,
+        localeCookie: {
+          name: LANGUAGE_COOKIE_NAME,
+          maxAge: LANGUAGE_COOKIE_MAX_AGE,
+        },
+      });
+      cachedLocaleRegex = new RegExp(
+        `^\\/(${locales.join("|")})(\\\/|$)`
+      );
+      return locales;
+    }
+  } catch {
+    // Backend unreachable — use cached or fallback
+  }
+
+  return cachedLocales || [defaultLocale];
+}
+
+function getIntlMiddleware(locales: string[]) {
+  if (cachedIntlMiddleware) return cachedIntlMiddleware;
+  cachedIntlMiddleware = createMiddleware({
+    locales,
+    defaultLocale,
+    localePrefix,
+    localeCookie: {
+      name: LANGUAGE_COOKIE_NAME,
+      maxAge: LANGUAGE_COOKIE_MAX_AGE,
+    },
+  });
+  return cachedIntlMiddleware;
+}
+
+function getLocaleRegex(locales: string[]) {
+  if (cachedLocaleRegex) return cachedLocaleRegex;
+  cachedLocaleRegex = new RegExp(`^\\/(${locales.join("|")})(\\\/|$)`);
+  return cachedLocaleRegex;
+}
+
+export async function proxy(request: NextRequest) {
+  // Step 1: Get dynamic locales from backend
+  const locales = await getSupportedLocales();
+
+  // Step 2: next-intl locale detection & routing (cached middleware instance)
+  const handleI18nRouting = getIntlMiddleware(locales);
+  const response = handleI18nRouting(request);
+
+  // Step 3: Auth checks
   const { pathname } = request.nextUrl;
   const token = request.cookies.get(AUTH_COOKIE_NAME)?.value;
   const hasToken = Boolean(token);
 
-  // Protected routes - redirect to login if no token
-  if (matchesRoute(pathname, protectedRoutes)) {
+  // Strip locale prefix for route matching (cached regex)
+  const localePattern = getLocaleRegex(locales);
+  const localeMatch = pathname.match(localePattern);
+  const urlLocalePrefix = localeMatch ? `/${localeMatch[1]}` : "";
+  const pathnameWithoutLocale = pathname.replace(localePattern, "/");
+  const matchPathname =
+    pathnameWithoutLocale === "" ? "/" : pathnameWithoutLocale;
+
+  if (matchesRoute(matchPathname, protectedRoutes)) {
     if (!hasToken) {
-      const loginUrl = new URL(redirects.unauthenticated, request.url);
-      // Preserve the original URL for redirect after login
+      const loginUrl = new URL(
+        `${urlLocalePrefix}${redirects.unauthenticated}`,
+        request.url
+      );
       loginUrl.searchParams.set("redirect", pathname);
       return NextResponse.redirect(loginUrl);
     }
   }
 
-  // Guest-only routes - redirect to account if has token
-  if (matchesRoute(pathname, guestOnlyRoutes)) {
+  if (matchesRoute(matchPathname, guestOnlyRoutes)) {
     if (hasToken) {
       return NextResponse.redirect(
-        new URL(redirects.authenticated, request.url)
+        new URL(
+          `${urlLocalePrefix}${redirects.authenticated}`,
+          request.url
+        )
       );
     }
   }
 
-  return NextResponse.next();
+  return response;
 }
 
-/**
- * Matcher configuration
- *
- * Only run proxy on routes that need auth checks.
- * This improves performance by skipping static assets, API routes, etc.
- *
- * Update this when adding new protected or guest-only route groups.
- */
 export const config = {
   matcher: [
-    /*
-     * Match all request paths except:
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico (favicon file)
-     * - public folder files (images, etc.)
-     * - API routes (handled separately)
-     */
-    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+    "/((?!api|trpc|_next|_vercel|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico)$).*)",
   ],
 };

package/templates/storefront-nextjs-shadcn/stores/cart-store.ts

@@ -1,56 +1,24 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-export interface CartState {
-  // State
-  cartId: string | null;
-  isOpen: boolean;
-  isHydrated: boolean;
-
-  // Actions
-  setCartId: (cartId: string | null) => void;
-  clearCart: () => void;
-  openCart: () => void;
-  closeCart: () => void;
-  toggleCart: () => void;
-}
-
-export const useCartStore = create<CartState>()(
-  persist(
-    (set) => ({
-      cartId: null,
-      isOpen: false,
-      isHydrated: false,
-
-      setCartId: (cartId: string | null) => {
-        set({ cartId });
-      },
-
-      clearCart: () => {
-        set({ cartId: null, isOpen: false });
-      },
-
-      openCart: () => {
-        set({ isOpen: true });
-      },
-
-      closeCart: () => {
-        set({ isOpen: false });
-      },
-
-      toggleCart: () => {
-        set((state) => ({ isOpen: !state.isOpen }));
-      },
-    }),
-    {
-      name: 'cart-storage',
-      // Persist only cartId — server is the source of truth for items
-      partialize: (state) => ({ cartId: state.cartId }),
-      onRehydrateStorage: () => (state) => {
-        if (state) {
-          state.isHydrated = true;
-        }
-      },
-    }
-  )
-);
+/**
+ * Cart store — re-export facade from SDK.
+ *
+ * All cart state management is now in @doswiftly/storefront-sdk/react.
+ * This file preserves import compatibility for existing template consumers.
+ */
+export {
+  createCartStore,
+  CartProvider,
+  useCartStore,
+  useCartStoreApi,
+  selectCartId,
+  selectIsCartOpen,
+  selectCartIsLoading,
+} from '@doswiftly/storefront-sdk/react';
+
+export type {
+  CartState,
+  CartActions,
+  CartStoreConfig,
+  CartData,
+  CartLineInput,
+  CartLineUpdateInput,
+} from '@doswiftly/storefront-sdk/react';

package/templates/storefront-nextjs-shadcn/stores/checkout-store.ts

@@ -1,5 +1,6 @@
-import { create } from 'zustand';
+import { createStore } from 'zustand/vanilla';
 import { persist } from 'zustand/middleware';
+import { createStoreContext } from '@doswiftly/storefront-sdk/react';
 
 /**
  * Address form state
@@ -19,7 +20,6 @@ export interface AddressForm {
 
 /**
  * Checkout state interface
- * Requirements: 22.4
  */
 export interface CheckoutState {
   // Checkout ID from backend
@@ -48,9 +48,6 @@ export interface CheckoutState {
   acceptTerms: boolean;
   acceptMarketing: boolean;
 
-  // Hydration state
-  isHydrated: boolean;
-
   // Actions
   setCheckoutId: (id: string | null) => void;
   setEmail: (email: string) => void;
@@ -94,91 +91,83 @@ const initialState = {
   appliedDiscountCodes: [],
   acceptTerms: false,
   acceptMarketing: false,
-  isHydrated: false,
 };
 
-/**
- * Checkout Store
- *
- * Manages checkout flow state with persistence.
- * Persists payment method selection in localStorage.
- *
- * Requirements: 22.4
- */
-export const useCheckoutStore = create<CheckoutState>()(
-  persist(
-    (set) => ({
-      ...initialState,
+export function createCheckoutStore() {
+  return createStore<CheckoutState>()(
+    persist(
+      (set) => ({
+        ...initialState,
 
-      setCheckoutId: (id) => set({ checkoutId: id }),
+        setCheckoutId: (id) => set({ checkoutId: id }),
 
-      setEmail: (email) => set({ email }),
+        setEmail: (email) => set({ email }),
 
-      setPhone: (phone) => set({ phone }),
+        setPhone: (phone) => set({ phone }),
 
-      setShippingAddress: (address) =>
-        set((state) => ({
-          shippingAddress: { ...state.shippingAddress, ...address },
-        })),
+        setShippingAddress: (address) =>
+          set((state) => ({
+            shippingAddress: { ...state.shippingAddress, ...address },
+          })),
 
-      setBillingAddress: (address) =>
-        set((state) => ({
-          billingAddress: { ...state.billingAddress, ...address },
-        })),
+        setBillingAddress: (address) =>
+          set((state) => ({
+            billingAddress: { ...state.billingAddress, ...address },
+          })),
 
-      setSameAsBilling: (same) => set({ sameAsBilling: same }),
+        setSameAsBilling: (same) => set({ sameAsBilling: same }),
 
-      setSelectedShippingRateHandle: (handle) =>
-        set({ selectedShippingRateHandle: handle }),
+        setSelectedShippingRateHandle: (handle) =>
+          set({ selectedShippingRateHandle: handle }),
 
-      setSelectedPaymentMethodId: (id) =>
-        set({ selectedPaymentMethodId: id }),
+        setSelectedPaymentMethodId: (id) =>
+          set({ selectedPaymentMethodId: id }),
 
-      setDiscountCode: (code) => set({ discountCode: code }),
+        setDiscountCode: (code) => set({ discountCode: code }),
 
-      addAppliedDiscountCode: (code) =>
-        set((state) => ({
-          appliedDiscountCodes: [...state.appliedDiscountCodes, code],
-          discountCode: '',
-        })),
+        addAppliedDiscountCode: (code) =>
+          set((state) => ({
+            appliedDiscountCodes: [...state.appliedDiscountCodes, code],
+            discountCode: '',
+          })),
 
-      removeAppliedDiscountCode: (code) =>
-        set((state) => ({
-          appliedDiscountCodes: state.appliedDiscountCodes.filter(
-            (c) => c !== code
-          ),
-        })),
+        removeAppliedDiscountCode: (code) =>
+          set((state) => ({
+            appliedDiscountCodes: state.appliedDiscountCodes.filter(
+              (c) => c !== code,
+            ),
+          })),
 
-      setAcceptTerms: (accept) => set({ acceptTerms: accept }),
+        setAcceptTerms: (accept) => set({ acceptTerms: accept }),
 
-      setAcceptMarketing: (accept) => set({ acceptMarketing: accept }),
+        setAcceptMarketing: (accept) => set({ acceptMarketing: accept }),
 
-      resetCheckout: () =>
-        set({
-          ...initialState,
-          isHydrated: true, // Keep hydrated flag
-        }),
-    }),
-    {
-      name: 'checkout-storage',
-      // Persist only essential checkout state
-      partialize: (state) => ({
-        checkoutId: state.checkoutId,
-        email: state.email,
-        phone: state.phone,
-        shippingAddress: state.shippingAddress,
-        billingAddress: state.billingAddress,
-        sameAsBilling: state.sameAsBilling,
-        selectedShippingRateHandle: state.selectedShippingRateHandle,
-        selectedPaymentMethodId: state.selectedPaymentMethodId,
-        appliedDiscountCodes: state.appliedDiscountCodes,
-        acceptMarketing: state.acceptMarketing,
+        resetCheckout: () =>
+          set({
+            ...initialState,
+          }),
       }),
-      onRehydrateStorage: () => (state) => {
-        if (state) {
-          state.isHydrated = true;
-        }
+      {
+        name: 'checkout-storage',
+        partialize: (state) => ({
+          checkoutId: state.checkoutId,
+          email: state.email,
+          phone: state.phone,
+          shippingAddress: state.shippingAddress,
+          billingAddress: state.billingAddress,
+          sameAsBilling: state.sameAsBilling,
+          selectedShippingRateHandle: state.selectedShippingRateHandle,
+          selectedPaymentMethodId: state.selectedPaymentMethodId,
+          appliedDiscountCodes: state.appliedDiscountCodes,
+          acceptMarketing: state.acceptMarketing,
+        }),
       },
-    }
-  )
-);
+    ),
+  );
+}
+
+export const {
+  Provider: CheckoutProvider,
+  useStore: useCheckoutStore,
+  useApi: useCheckoutStoreApi,
+} = createStoreContext<CheckoutState>('CheckoutStore');