create-brainerce-store 1.0.0

package/templates/nextjs/base/src/components/shared/loading-spinner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4 border-2',
+  md: 'h-8 w-8 border-2',
+  lg: 'h-12 w-12 border-3',
+};
+
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  return (
+    <div
+      className={cn(
+        'border-muted-foreground/30 border-t-primary animate-spin rounded-full',
+        sizeClasses[size],
+        className
+      )}
+      role="status"
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/shared/price-display.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface PriceDisplayProps {
+  price: string | number;
+  salePrice?: string | number | null;
+  currency?: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeClasses = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-xl font-semibold',
+};
+
+export function PriceDisplay({
+  price,
+  salePrice,
+  currency,
+  className,
+  size = 'md',
+}: PriceDisplayProps) {
+  const { storeInfo } = useStoreInfo();
+  const currencyCode = currency || storeInfo?.currency || 'USD';
+
+  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
+  const sale =
+    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
+  const isOnSale = sale !== null && sale < basePrice;
+
+  const discountPercent =
+    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
+
+  return (
+    <span className={cn('inline-flex items-center gap-2', sizeClasses[size], className)}>
+      {isOnSale ? (
+        <>
+          <span className="text-destructive font-medium">
+            {formatPrice(sale!, { currency: currencyCode }) as string}
+          </span>
+          <span className="text-muted-foreground text-[0.85em] line-through">
+            {formatPrice(basePrice, { currency: currencyCode }) as string}
+          </span>
+          {discountPercent > 0 && (
+            <span className="bg-destructive text-destructive-foreground rounded px-1.5 py-0.5 text-xs font-medium">
+              -{discountPercent}%
+            </span>
+          )}
+        </>
+      ) : (
+        <span className="text-foreground font-medium">
+          {formatPrice(basePrice, { currency: currencyCode }) as string}
+        </span>
+      )}
+    </span>
+  );
+}

package/templates/nextjs/base/src/hooks/use-search.ts

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { SearchSuggestions } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+
+const DEBOUNCE_MS = 300;
+const MIN_QUERY_LENGTH = 2;
+const SUGGESTION_LIMIT = 5;
+
+interface UseSearchResult {
+  suggestions: SearchSuggestions | null;
+  loading: boolean;
+}
+
+export function useSearch(query: string): UseSearchResult {
+  const [suggestions, setSuggestions] = useState<SearchSuggestions | null>(null);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchSuggestions = useCallback(async (searchQuery: string) => {
+    // Cancel any in-flight request
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+
+    try {
+      setLoading(true);
+      const client = getClient();
+      const result = await client.getSearchSuggestions(searchQuery, SUGGESTION_LIMIT);
+      setSuggestions(result);
+    } catch {
+      // Silently ignore errors (likely aborted or network issue)
+      setSuggestions(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Clear previous debounce
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+
+    // Clear suggestions if query is too short
+    if (!query || query.trim().length < MIN_QUERY_LENGTH) {
+      setSuggestions(null);
+      setLoading(false);
+      return;
+    }
+
+    // Debounce the search
+    debounceRef.current = setTimeout(() => {
+      fetchSuggestions(query.trim());
+    }, DEBOUNCE_MS);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [query, fetchSuggestions]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+
+  return { suggestions, loading };
+}

package/templates/nextjs/base/src/lib/brainerce.ts.ejs

@@ -0,0 +1,59 @@
+import { BrainerceClient } from 'brainerce';
+
+const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '<%= connectionId %>';
+const API_URL = process.env.NEXT_PUBLIC_BRAINERCE_API_URL || '<%= apiBaseUrl %>';
+
+// Singleton SDK client
+let clientInstance: BrainerceClient | null = null;
+
+export function getClient(): BrainerceClient {
+  if (!clientInstance) {
+    clientInstance = new BrainerceClient({
+      connectionId: CONNECTION_ID,
+      baseUrl: API_URL,
+    });
+  }
+  return clientInstance;
+}
+
+// Auth token helpers
+const TOKEN_KEY = 'brainerce_customer_token';
+const CART_ID_KEY = 'brainerce_cart_id';
+
+export function getStoredToken(): string | null {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setStoredToken(token: string | null): void {
+  if (typeof window === 'undefined') return;
+  if (token) {
+    localStorage.setItem(TOKEN_KEY, token);
+  } else {
+    localStorage.removeItem(TOKEN_KEY);
+  }
+}
+
+export function getStoredCartId(): string | null {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem(CART_ID_KEY);
+}
+
+export function setStoredCartId(cartId: string | null): void {
+  if (typeof window === 'undefined') return;
+  if (cartId) {
+    localStorage.setItem(CART_ID_KEY, cartId);
+  } else {
+    localStorage.removeItem(CART_ID_KEY);
+  }
+}
+
+// Initialize client with stored auth
+export function initClient(): BrainerceClient {
+  const client = getClient();
+  const token = getStoredToken();
+  if (token) {
+    client.setCustomerToken(token);
+  }
+  return client;
+}

package/templates/nextjs/base/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/nextjs/base/src/providers/store-provider.tsx.ejs

@@ -0,0 +1,168 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import type { StoreInfo, Cart, LocalCart } from 'brainerce';
+import { getCartTotals } from 'brainerce';
+import { getClient, initClient, getStoredToken, setStoredToken, setStoredCartId } from '@/lib/brainerce';
+
+// ---- Store Info Context ----
+interface StoreInfoContextValue {
+  storeInfo: StoreInfo | null;
+  loading: boolean;
+}
+
+const StoreInfoContext = createContext<StoreInfoContextValue>({
+  storeInfo: null,
+  loading: true,
+});
+
+export function useStoreInfo() {
+  return useContext(StoreInfoContext);
+}
+
+// ---- Auth Context ----
+interface AuthContextValue {
+  isLoggedIn: boolean;
+  token: string | null;
+  login: (token: string) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue>({
+  isLoggedIn: false,
+  token: null,
+  login: () => {},
+  logout: () => {},
+});
+
+export function useAuth() {
+  return useContext(AuthContext);
+}
+
+// ---- Cart Context ----
+interface CartContextValue {
+  cart: Cart | LocalCart | null;
+  cartLoading: boolean;
+  refreshCart: () => Promise<void>;
+  itemCount: number;
+  totals: { subtotal: number; discount: number; shipping: number; total: number };
+  isServerCart: (c: Cart | LocalCart | null) => c is Cart;
+}
+
+const CartContext = createContext<CartContextValue>({
+  cart: null,
+  cartLoading: true,
+  refreshCart: async () => {},
+  itemCount: 0,
+  totals: { subtotal: 0, discount: 0, shipping: 0, total: 0 },
+  isServerCart: (_c): _c is Cart => false,
+});
+
+export function useCart() {
+  return useContext(CartContext);
+}
+
+// ---- Provider Component ----
+export function StoreProvider({ children }: { children: React.ReactNode }) {
+  const [storeInfo, setStoreInfo] = useState<StoreInfo | null>(null);
+  const [storeLoading, setStoreLoading] = useState(true);
+  const [token, setToken] = useState<string | null>(null);
+  const [cart, setCart] = useState<Cart | LocalCart | null>(null);
+  const [cartLoading, setCartLoading] = useState(true);
+
+  // Initialize client and auth
+  useEffect(() => {
+    const client = initClient();
+    const stored = getStoredToken();
+    if (stored) {
+      setToken(stored);
+    }
+
+    client
+      .getStoreInfo()
+      .then(setStoreInfo)
+      .catch(console.error)
+      .finally(() => setStoreLoading(false));
+  }, []);
+
+  // Cart management
+  const refreshCart = useCallback(async () => {
+    try {
+      setCartLoading(true);
+      const client = getClient();
+      const c = await client.smartGetCart();
+      setCart(c);
+
+      // Persist server cart ID
+      if (c && 'id' in c) {
+        setStoredCartId(c.id);
+      }
+    } catch (err) {
+      console.error('Failed to load cart:', err);
+    } finally {
+      setCartLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshCart();
+  }, [refreshCart, token]);
+
+  const login = useCallback((newToken: string) => {
+    const client = getClient();
+    client.setCustomerToken(newToken);
+    setStoredToken(newToken);
+    setToken(newToken);
+
+    // Sync local cart to server
+    client.syncCartOnLogin().catch(console.error);
+  }, []);
+
+  const logout = useCallback(() => {
+    const client = getClient();
+    client.clearCustomerToken();
+    setStoredToken(null);
+    setToken(null);
+    setCart(null);
+    refreshCart();
+  }, [refreshCart]);
+
+  const isServerCart = (c: Cart | LocalCart | null): c is Cart => {
+    return c !== null && 'id' in c;
+  };
+
+  const itemCount = cart
+    ? cart.items.reduce((sum, item) => sum + item.quantity, 0)
+    : 0;
+
+  const totals = isServerCart(cart)
+    ? getCartTotals(cart)
+    : {
+        subtotal: cart
+          ? cart.items.reduce(
+              (sum, item) => sum + parseFloat(String(item.price || '0')) * item.quantity,
+              0
+            )
+          : 0,
+        discount: 0,
+        shipping: 0,
+        total: cart
+          ? cart.items.reduce(
+              (sum, item) => sum + parseFloat(String(item.price || '0')) * item.quantity,
+              0
+            )
+          : 0,
+      };
+
+  return (
+    <StoreInfoContext.Provider value={{ storeInfo, loading: storeLoading }}>
+      <AuthContext.Provider value={{ isLoggedIn: !!token, token, login, logout }}>
+        <CartContext.Provider
+          value={{ cart, cartLoading, refreshCart, itemCount, totals, isServerCart }}
+        >
+          {children}
+        </CartContext.Provider>
+      </AuthContext.Provider>
+    </StoreInfoContext.Provider>
+  );
+}

package/templates/nextjs/base/tailwind.config.ts

@@ -0,0 +1,30 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(var(--primary))',
+        'primary-foreground': 'hsl(var(--primary-foreground))',
+        secondary: 'hsl(var(--secondary))',
+        'secondary-foreground': 'hsl(var(--secondary-foreground))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        muted: 'hsl(var(--muted))',
+        'muted-foreground': 'hsl(var(--muted-foreground))',
+        border: 'hsl(var(--border))',
+        destructive: 'hsl(var(--destructive))',
+        'destructive-foreground': 'hsl(var(--destructive-foreground))',
+        accent: 'hsl(var(--accent))',
+        'accent-foreground': 'hsl(var(--accent-foreground))',
+      },
+      borderRadius: {
+        DEFAULT: 'var(--radius)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/templates/nextjs/base/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs/themes/minimal/globals.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 90%;
+    --radius: 0.5rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}

package/templates/nextjs/themes/minimal/theme.json

@@ -0,0 +1,23 @@
+{
+  "name": "Minimal",
+  "description": "Clean, neutral design with Inter font and medium radius",
+  "font": {
+    "family": "Inter",
+    "import": "next/font/google"
+  },
+  "colors": {
+    "background": "0 0% 100%",
+    "foreground": "0 0% 9%",
+    "primary": "0 0% 9%",
+    "primary-foreground": "0 0% 98%",
+    "secondary": "0 0% 96%",
+    "secondary-foreground": "0 0% 9%",
+    "muted": "0 0% 96%",
+    "muted-foreground": "0 0% 45%",
+    "accent": "0 0% 96%",
+    "accent-foreground": "0 0% 9%",
+    "destructive": "0 84% 60%",
+    "border": "0 0% 90%"
+  },
+  "radius": "0.5rem"
+}