@doswiftly/cli 0.1.1

package/templates/storefront-nextjs/components/commerce/sort-select.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { useCallback } from "react";
+import { ProductSortKeys } from "@doswiftly/commerce-sdk/graphql";
+
+interface SortSelectProps {
+  currentSort?: string;
+  currentOrder?: string;
+}
+
+/**
+ * SortSelect - Client Component for sorting products
+ *
+ * Uses URL params for sort state (Server Component compatible).
+ */
+export function SortSelect({ currentSort, currentOrder }: SortSelectProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // Build combined value for select
+  const sortValue =
+    currentSort === ProductSortKeys.Price && currentOrder === "asc"
+      ? "PRICE_asc"
+      : currentSort === ProductSortKeys.Price && currentOrder === "desc"
+      ? "PRICE_desc"
+      : "RELEVANCE";
+
+  const handleSortChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const value = e.target.value;
+      const params = new URLSearchParams(searchParams.toString());
+
+      if (value === ProductSortKeys.Relevance) {
+        params.delete("sort");
+        params.delete("order");
+      } else {
+        // Parse combined sort value (e.g., "PRICE_asc")
+        const [sortKey, order] = value.split("_");
+        params.set("sort", sortKey);
+        params.set("order", order);
+      }
+
+      // Reset pagination when sort changes
+      params.delete("after");
+
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [router, pathname, searchParams]
+  );
+
+  return (
+    <select
+      value={sortValue}
+      onChange={handleSortChange}
+      className="rounded border border-gray-200 px-3 py-2 text-sm focus:border-gray-900 focus:outline-none"
+    >
+      <option value={ProductSortKeys.Relevance}>Relevance</option>
+      <option value="PRICE_asc">Price: Low to High</option>
+      <option value="PRICE_desc">Price: High to Low</option>
+    </select>
+  );
+}

package/templates/storefront-nextjs/components/commerce/variant-selector.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useState, useMemo, useEffect } from "react";
+
+interface VariantOption {
+  name: string;
+  value: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  available: boolean;
+  selectedOptions: VariantOption[];
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  compareAtPrice?: {
+    amount: string;
+    currencyCode: string;
+  } | null;
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+}
+
+interface VariantSelectorProps {
+  variants: ProductVariant[];
+  selectedVariantId?: string;
+  onVariantChange: (variant: ProductVariant) => void;
+}
+
+/**
+ * VariantSelector - Select product options (size, color, etc.)
+ *
+ * Extracts unique options from variants and allows selection.
+ * Automatically finds matching variant when options change.
+ *
+ * @example
+ * ```tsx
+ * <VariantSelector
+ *   variants={product.variants}
+ *   selectedVariantId={selectedVariant?.id}
+ *   onVariantChange={setSelectedVariant}
+ * />
+ * ```
+ */
+export function VariantSelector({
+  variants,
+  selectedVariantId,
+  onVariantChange,
+}: VariantSelectorProps) {
+  // Extract unique option names and their values
+  const options = useMemo(() => {
+    const optionMap = new Map<string, Set<string>>();
+
+    variants.forEach((variant) => {
+      variant.selectedOptions.forEach((opt) => {
+        if (!optionMap.has(opt.name)) {
+          optionMap.set(opt.name, new Set());
+        }
+        optionMap.get(opt.name)!.add(opt.value);
+      });
+    });
+
+    return Array.from(optionMap.entries()).map(([name, values]) => ({
+      name,
+      values: Array.from(values),
+    }));
+  }, [variants]);
+
+  // Currently selected values for each option
+  const [selectedOptions, setSelectedOptions] = useState<
+    Record<string, string>
+  >(() => {
+    // Initialize from selected variant or first variant
+    const initialVariant = selectedVariantId
+      ? variants.find((v) => v.id === selectedVariantId)
+      : variants[0];
+
+    if (!initialVariant) return {};
+
+    return initialVariant.selectedOptions.reduce(
+      (acc, opt) => ({
+        ...acc,
+        [opt.name]: opt.value,
+      }),
+      {}
+    );
+  });
+
+  // Find variant matching current selection
+  const findMatchingVariant = (
+    opts: Record<string, string>
+  ): ProductVariant | undefined => {
+    return variants.find((variant) =>
+      variant.selectedOptions.every((opt) => opts[opt.name] === opt.value)
+    );
+  };
+
+  // Check if a specific option value is available
+  const isOptionAvailable = (
+    optionName: string,
+    optionValue: string
+  ): boolean => {
+    const testOptions = { ...selectedOptions, [optionName]: optionValue };
+    const matchingVariant = findMatchingVariant(testOptions);
+    return !!matchingVariant;
+  };
+
+  // Check if option value leads to in-stock variant
+  const isOptionInStock = (
+    optionName: string,
+    optionValue: string
+  ): boolean => {
+    const testOptions = { ...selectedOptions, [optionName]: optionValue };
+    const matchingVariant = findMatchingVariant(testOptions);
+    return matchingVariant?.available ?? false;
+  };
+
+  // Handle option selection
+  const handleOptionChange = (optionName: string, optionValue: string) => {
+    const newOptions = { ...selectedOptions, [optionName]: optionValue };
+    setSelectedOptions(newOptions);
+
+    const matchingVariant = findMatchingVariant(newOptions);
+    if (matchingVariant) {
+      onVariantChange(matchingVariant);
+    }
+  };
+
+  // Sync when selectedVariantId changes externally
+  useEffect(() => {
+    if (selectedVariantId) {
+      const variant = variants.find((v) => v.id === selectedVariantId);
+      if (variant) {
+        const opts = variant.selectedOptions.reduce(
+          (acc, opt) => ({ ...acc, [opt.name]: opt.value }),
+          {}
+        );
+        setSelectedOptions(opts);
+      }
+    }
+  }, [selectedVariantId, variants]);
+
+  // Sync parent when variants prop changes (e.g., after currency change)
+  // This ensures parent gets the updated variant object with new prices
+  useEffect(() => {
+    if (selectedVariantId && variants.length > 0) {
+      const updatedVariant = variants.find((v) => v.id === selectedVariantId);
+      if (updatedVariant) {
+        // Notify parent with updated variant (containing new prices)
+        onVariantChange(updatedVariant);
+      }
+    }
+  }, [variants]); // Only trigger when variants change, not on every render
+
+  // Don't render if only one variant with no meaningful options
+  if (variants.length <= 1 && options.every((o) => o.values.length <= 1)) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {options.map((option) => (
+        <div key={option.name}>
+          <label className="mb-2 block text-sm font-medium text-gray-700">
+            {option.name}
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {option.values.map((value) => {
+              const isSelected = selectedOptions[option.name] === value;
+              const available = isOptionAvailable(option.name, value);
+              const inStock = isOptionInStock(option.name, value);
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => handleOptionChange(option.name, value)}
+                  disabled={!available}
+                  className={`
+                    relative min-w-[3rem] rounded-lg border px-4 py-2 text-sm font-medium
+                    transition-all
+                    ${
+                      isSelected
+                        ? "border-primary bg-primary text-white"
+                        : available
+                        ? "border-gray-300 bg-white text-gray-900 hover:border-primary"
+                        : "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-400"
+                    }
+                    ${!inStock && available ? "text-gray-500" : ""}
+                  `}
+                >
+                  {value}
+                  {/* Out of stock indicator */}
+                  {!inStock && available && (
+                    <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-white bg-gray-400" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/storefront-nextjs/components/layout/footer.tsx

@@ -0,0 +1,107 @@
+import Link from "next/link";
+
+export function Footer() {
+  return (
+    <footer className="border-t border-gray-200 bg-gray-50">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
+          {/* Brand */}
+          <div>
+            <Link href="/" className="text-xl font-bold text-primary">
+              {process.env.NEXT_PUBLIC_SITE_NAME || "My Store"}
+            </Link>
+            <p className="mt-4 text-sm text-gray-600">
+              Quality products at affordable prices. Powered by DoSwiftly
+              Commerce.
+            </p>
+          </div>
+
+          {/* Shop */}
+          <div>
+            <h3 className="mb-4 font-semibold text-gray-900">Shop</h3>
+            <ul className="space-y-2 text-sm text-gray-600">
+              <li>
+                <Link href="/products" className="hover:text-primary">
+                  All Products
+                </Link>
+              </li>
+              <li>
+                <Link href="/collections" className="hover:text-primary">
+                  Collections
+                </Link>
+              </li>
+              <li>
+                <Link href="/products?sale=true" className="hover:text-primary">
+                  Sale
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Account */}
+          <div>
+            <h3 className="mb-4 font-semibold text-gray-900">Account</h3>
+            <ul className="space-y-2 text-sm text-gray-600">
+              <li>
+                <Link href="/account" className="hover:text-primary">
+                  My Account
+                </Link>
+              </li>
+              <li>
+                <Link href="/account/orders" className="hover:text-primary">
+                  Order History
+                </Link>
+              </li>
+              <li>
+                <Link href="/cart" className="hover:text-primary">
+                  Cart
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Support */}
+          <div>
+            <h3 className="mb-4 font-semibold text-gray-900">Support</h3>
+            <ul className="space-y-2 text-sm text-gray-600">
+              <li>
+                <Link href="/contact" className="hover:text-primary">
+                  Contact Us
+                </Link>
+              </li>
+              <li>
+                <Link href="/shipping" className="hover:text-primary">
+                  Shipping Info
+                </Link>
+              </li>
+              <li>
+                <Link href="/returns" className="hover:text-primary">
+                  Returns & Refunds
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-12 border-t border-gray-200 pt-8 text-center text-sm text-gray-600">
+          <p>
+            © {new Date().getFullYear()}{" "}
+            {process.env.NEXT_PUBLIC_SITE_NAME || "My Store"}. All rights
+            reserved.
+          </p>
+          <p className="mt-2">
+            Powered by{" "}
+            <a
+              href="https://doswiftly.pl"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              DoSwiftly Commerce
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/storefront-nextjs/components/layout/header.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { User, Menu, X } from "lucide-react";
+import CurrencySelector from "@/components/commerce/currency-selector";
+import { CartIcon } from "@/components/commerce/cart-icon";
+import { SearchInput } from "@/components/commerce/search-input";
+
+export function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-gray-200 bg-white">
+      <div className="container mx-auto px-4">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="text-xl font-bold text-primary">
+            {process.env.NEXT_PUBLIC_SITE_NAME || "My Store"}
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden items-center gap-6 md:flex">
+            <Link href="/products" className="text-gray-600 hover:text-primary">
+              Products
+            </Link>
+            <Link
+              href="/collections"
+              className="text-gray-600 hover:text-primary"
+            >
+              Collections
+            </Link>
+            <Link href="/about" className="text-gray-600 hover:text-primary">
+              About
+            </Link>
+          </nav>
+
+          {/* Search & Actions */}
+          <div className="flex items-center gap-4">
+            {/* Search */}
+            <div className="hidden w-64 lg:block">
+              <SearchInput placeholder="Search..." />
+            </div>
+            {/* Currency Selector */}
+            <div className="hidden md:block">
+              <CurrencySelector variant="compact" />
+            </div>
+            <Link
+              href="/account"
+              className="p-2 text-gray-600 hover:text-primary"
+            >
+              <User className="h-5 w-5" />
+            </Link>
+            <CartIcon />
+            <button
+              className="p-2 text-gray-600 md:hidden"
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            >
+              {isMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <nav className="border-t border-gray-200 py-4 md:hidden">
+            <div className="flex flex-col gap-4">
+              {/* Mobile Currency Selector */}
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-500">Currency</span>
+                <CurrencySelector variant="compact" />
+              </div>
+              <Link
+                href="/products"
+                className="text-gray-600 hover:text-primary"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Products
+              </Link>
+              <Link
+                href="/collections"
+                className="text-gray-600 hover:text-primary"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Collections
+              </Link>
+              <Link
+                href="/about"
+                className="text-gray-600 hover:text-primary"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                About
+              </Link>
+            </div>
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+}

package/templates/storefront-nextjs/components/providers.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+/**
+ * Providers - Client-side providers wrapper
+ *
+ * Uses StorefrontProvider from commerce-sdk which handles:
+ * - Currency management with persistence
+ * - Authentication state
+ * - React Query for data fetching
+ * - Dynamic SDK headers (currency changes trigger automatic data refetch)
+ *
+ * @module storefront-nextjs/components/providers
+ */
+
+import { ReactNode } from "react";
+import { StorefrontProvider } from "@doswiftly/commerce-sdk/graphql/react";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * Providers - Wraps the app with StorefrontProvider
+ *
+ * The StorefrontProvider handles:
+ * 1. Fetching shop configuration (currencies, etc.)
+ * 2. Managing currency state with cookie persistence
+ * 3. Managing auth token state
+ * 4. Providing React Query client for data caching
+ * 5. Dynamic SDK headers - when currency changes, all data refetches automatically
+ *
+ * NOTE: We must pass apiUrl and shopSlug explicitly because NEXT_PUBLIC_* env vars
+ * are only inlined in Next.js app code, not in external packages like commerce-sdk.
+ *
+ * @example
+ * ```tsx
+ * // In layout.tsx
+ * <Providers>
+ *   <Header />
+ *   <main>{children}</main>
+ *   <Footer />
+ * </Providers>
+ * ```
+ */
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <StorefrontProvider
+      apiUrl={process.env.NEXT_PUBLIC_API_URL!}
+      shopSlug={process.env.NEXT_PUBLIC_SHOP_SLUG!}
+    >
+      {children}
+    </StorefrontProvider>
+  );
+}

package/templates/storefront-nextjs/lib/auth/routes.ts

@@ -0,0 +1,52 @@
+/**
+ * Auth Routes Configuration (SSOT)
+ *
+ * This file is the single source of truth for authentication routes.
+ * Used by middleware.ts and can be imported by components if needed.
+ *
+ * @example
+ * // Add new protected route
+ * export const protectedRoutes = ['/account', '/checkout', '/wishlist'];
+ *
+ * @example
+ * // Add new guest-only route
+ * export const guestOnlyRoutes = ['/auth/login', '/auth/register', '/auth/forgot-password'];
+ */
+
+/**
+ * Routes that require authentication.
+ * Unauthenticated users will be redirected to login.
+ */
+export const protectedRoutes = ["/account", "/checkout"];
+
+/**
+ * Routes only accessible to guests (unauthenticated users).
+ * Authenticated users will be redirected to account.
+ */
+export const guestOnlyRoutes = ["/auth/login", "/auth/register"];
+
+/**
+ * Cookie name for customer access token.
+ * Must match the cookie name used by commerce-sdk.
+ */
+export const AUTH_COOKIE_NAME = "customerAccessToken";
+
+/**
+ * Default redirect paths
+ */
+export const redirects = {
+  /** Where to redirect unauthenticated users trying to access protected routes */
+  unauthenticated: "/auth/login",
+  /** Where to redirect authenticated users trying to access guest-only routes */
+  authenticated: "/account",
+} as const;
+
+/**
+ * Check if a pathname matches any route in the list.
+ * Supports both exact matches and prefix matches (e.g., /account matches /account/orders).
+ */
+export function matchesRoute(pathname: string, routes: string[]): boolean {
+  return routes.some(
+    (route) => pathname === route || pathname.startsWith(`${route}/`)
+  );
+}