@forgecart/cli 1.0.0 → 1.1.0

package/dist/templates/storefront-additions/.forgecartignore

@@ -1,8 +1,8 @@
-# ForgéCart deployment ignore file
+# ForgeCart deployment ignore file
 # Files and directories listed here will not be uploaded during deployment
 
-# Dependencies (will be installed during build)
-node_modules/
+# Dependencies - only exclude root node_modules (standalone has its own)
+/node_modules/
 
 # Development files
 .git/
@@ -18,9 +18,17 @@ node_modules/
 *.swp
 *.swo
 
-# Build artifacts (we build on the server)
-.next/
-out/
+# Build artifacts - exclude root level only (standalone has nested .next that must be kept)
+/.next/cache/
+/.next/server/
+/.next/types/
+/.next/trace
+/.next/trace-build
+/.next/dev/
+/.next/build/
+/.next/diagnostics/
+# Keep .next/standalone/ and everything inside it
+/out/
 
 # Test files
 __tests__/
@@ -29,6 +37,22 @@ __tests__/
 *.spec.ts
 *.spec.tsx
 coverage/
+specs/
+
+# Source files - not needed for runtime
+src/
+
+# Config files not needed at runtime
+tsconfig.json
+tsconfig.spec.json
+project.json
+jest.config.cts
+eslint.config.mjs
+postcss.config.js
+tailwind.config.js
+.swcrc
+index.d.ts
+next-env.d.ts
 
 # Documentation
 README.md

package/dist/templates/storefront-additions/Procfile

@@ -1 +1 @@
-web: npm run start
+web: node .next/standalone/apps/storefront/server.js

package/dist/templates/storefront-additions/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "storefront",
+  "version": "1.0.0",
+  "private": true,
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "start": "node .next/standalone/apps/storefront/server.js"
+  }
+}

package/dist/templates/storefront-additions/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/dist/templates/storefront-additions/src/app/cart/page.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import Link from 'next/link'
+import { useCart } from '../../context/CartContext'
+import { CartItem } from '../../components/CartItem'
+
+export default function CartPage() {
+  const { cart, loading, itemCount } = useCart()
+
+  if (loading && !cart) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-8 text-gray-900">Your Cart</h1>
+        <p className="text-gray-600">Loading cart...</p>
+      </div>
+    )
+  }
+
+  if (!cart || cart.lines.length === 0) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-8 text-gray-900">Your Cart</h1>
+        <p className="text-gray-600 mb-4">Your cart is empty.</p>
+        <Link
+          href="/"
+          className="inline-block bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
+        >
+          Continue Shopping
+        </Link>
+      </div>
+    )
+  }
+
+  const subtotal = (cart.subTotalWithTax / 100).toFixed(2)
+  const total = (cart.totalWithTax / 100).toFixed(2)
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8 text-gray-900">Your Cart</h1>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        {cart.lines
+          .filter((line) => line.productVariant)
+          .map((line) => (
+            <CartItem key={line.id} line={line as never} />
+          ))}
+
+        <div className="mt-6 pt-4 border-t">
+          <div className="flex justify-between text-lg mb-2">
+            <span className="text-gray-600">Subtotal ({itemCount} items)</span>
+            <span className="font-semibold">
+              {subtotal} {cart.currencyCode}
+            </span>
+          </div>
+          <div className="flex justify-between text-xl font-bold">
+            <span>Total</span>
+            <span>
+              {total} {cart.currencyCode}
+            </span>
+          </div>
+        </div>
+
+        <div className="mt-6 flex gap-4">
+          <Link
+            href="/"
+            className="flex-1 text-center border border-gray-300 py-3 rounded-lg hover:bg-gray-50"
+          >
+            Continue Shopping
+          </Link>
+          <button className="flex-1 bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700">
+            Checkout
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/app/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/dist/templates/storefront-additions/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import './global.css'
+import { CartProvider } from '../context/CartContext'
+import { Header } from '../components/Header'
+
+export const metadata = {
+  title: 'Store',
+  description: 'Your ecommerce store',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-gray-50 min-h-screen">
+        <CartProvider>
+          <Header />
+          <main>{children}</main>
+        </CartProvider>
+      </body>
+    </html>
+  )
+}

package/dist/templates/storefront-additions/src/app/page.tsx

@@ -0,0 +1,43 @@
+import { ProductList, Product } from '@forgecart/sdk/shop'
+import forgecart from '../lib/forgecart'
+import { ProductCard } from '../components/ProductCard'
+
+async function getProducts(): Promise<ProductList> {
+  try {
+    const result = await forgecart.shop.products.products({
+      options: {
+        take: 20,
+      },
+    })
+    return (result.products as ProductList) || { items: [], totalItems: 0 }
+  } catch (error) {
+    console.error('Failed to fetch products:', error)
+    return {
+      items: [] as Product[],
+      totalItems: 0,
+    }
+  }
+}
+
+export default async function HomePage() {
+  const products = await getProducts()
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8 text-gray-900">Our Products</h1>
+
+      {products.items.length === 0 ? (
+        <p className="text-gray-600">
+          No products found. Make sure your ForgeCart channel is configured
+          correctly.
+        </p>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          {products.items.map((product: Product) => (
+            <ProductCard key={product.id} product={product as never} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/components/AddToCartButton.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useState } from 'react'
+import { useCart } from '../context/CartContext'
+
+interface AddToCartButtonProps {
+  productVariantId: string
+}
+
+export function AddToCartButton({ productVariantId }: AddToCartButtonProps) {
+  const { addToCart } = useCart()
+  const [isAdding, setIsAdding] = useState(false)
+
+  const handleClick = async () => {
+    setIsAdding(true)
+    await addToCart(productVariantId, 1)
+    setIsAdding(false)
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={isAdding}
+      className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed transition-colors"
+    >
+      {isAdding ? 'Adding...' : 'Add to Cart'}
+    </button>
+  )
+}

package/dist/templates/storefront-additions/src/components/CartItem.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { useCart } from '../context/CartContext'
+import { QuantitySelector } from './QuantitySelector'
+
+interface CartLine {
+  id: string
+  quantity: number
+  productVariant: {
+    id: string
+    name: string
+    price: number
+    priceWithTax: number
+    currencyCode: string
+  }
+  featuredAsset?: {
+    preview: string
+  }
+  unitPriceWithTax: number
+  linePriceWithTax: number
+}
+
+interface CartItemProps {
+  line: CartLine
+}
+
+export function CartItem({ line }: CartItemProps) {
+  const { updateQuantity, removeItem, loading } = useCart()
+
+  // Defensive check for incomplete line data
+  if (!line.productVariant) {
+    return null
+  }
+
+  const unitPrice = (line.unitPriceWithTax / 100).toFixed(2)
+  const lineTotal = (line.linePriceWithTax / 100).toFixed(2)
+
+  return (
+    <div className="flex gap-4 py-4 border-b">
+      {line.featuredAsset && (
+        <img
+          src={line.featuredAsset.preview}
+          alt={line.productVariant.name}
+          className="w-20 h-20 object-cover rounded"
+        />
+      )}
+      {!line.featuredAsset && (
+        <div className="w-20 h-20 bg-gray-200 rounded flex items-center justify-center">
+          <span className="text-gray-400 text-xs">No img</span>
+        </div>
+      )}
+      <div className="flex-1">
+        <h3 className="font-semibold text-gray-900">
+          {line.productVariant.name}
+        </h3>
+        <p className="text-gray-600 text-sm">
+          {unitPrice} {line.productVariant.currencyCode} each
+        </p>
+        <div className="flex items-center justify-between mt-2">
+          <QuantitySelector
+            quantity={line.quantity}
+            onIncrease={() => updateQuantity(line.id, line.quantity + 1)}
+            onDecrease={() => updateQuantity(line.id, line.quantity - 1)}
+            disabled={loading}
+          />
+          <button
+            onClick={() => removeItem(line.id)}
+            disabled={loading}
+            className="text-red-600 hover:text-red-800 text-sm disabled:opacity-50"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+      <div className="text-right">
+        <p className="font-bold text-gray-900">
+          {lineTotal} {line.productVariant.currencyCode}
+        </p>
+      </div>
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/components/Header.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import Link from 'next/link'
+import { useCart } from '../context/CartContext'
+
+export function Header() {
+  const { itemCount, loading } = useCart()
+
+  return (
+    <header className="bg-white shadow-sm border-b">
+      <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+        <Link href="/" className="text-xl font-bold text-gray-900">
+          Store
+        </Link>
+        <Link
+          href="/cart"
+          className="relative flex items-center gap-2 text-gray-700 hover:text-gray-900"
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+            />
+          </svg>
+          <span>Cart</span>
+          {itemCount > 0 && (
+            <span className="absolute -top-2 -right-2 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+              {loading ? '...' : itemCount}
+            </span>
+          )}
+        </Link>
+      </div>
+    </header>
+  )
+}

package/dist/templates/storefront-additions/src/components/ProductCard.tsx

@@ -0,0 +1,57 @@
+import { AddToCartButton } from './AddToCartButton'
+
+interface ProductVariant {
+  id: string
+  price: number
+  priceWithTax: number
+  currencyCode: string
+}
+
+interface Product {
+  id: string
+  name: string
+  description: string
+  featuredAsset?: {
+    preview: string
+  }
+  variants: ProductVariant[]
+}
+
+interface ProductCardProps {
+  product: Product
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  const variant = product.variants[0]
+  const price = variant ? (variant.priceWithTax / 100).toFixed(2) : '0.00'
+  const currencyCode = variant?.currencyCode ?? 'USD'
+
+  return (
+    <div className="bg-white border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+      {product.featuredAsset && (
+        <img
+          src={product.featuredAsset.preview}
+          alt={product.name}
+          className="w-full h-48 object-cover"
+        />
+      )}
+      {!product.featuredAsset && (
+        <div className="w-full h-48 bg-gray-200 flex items-center justify-center">
+          <span className="text-gray-400">No image</span>
+        </div>
+      )}
+      <div className="p-4">
+        <h2 className="text-lg font-semibold mb-2 text-gray-900">
+          {product.name}
+        </h2>
+        <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+          {product.description}
+        </p>
+        <p className="text-lg font-bold text-blue-600 mb-4">
+          {price} {currencyCode}
+        </p>
+        {variant && <AddToCartButton productVariantId={variant.id} />}
+      </div>
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/components/QuantitySelector.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+interface QuantitySelectorProps {
+  quantity: number
+  onIncrease: () => void
+  onDecrease: () => void
+  disabled?: boolean
+}
+
+export function QuantitySelector({
+  quantity,
+  onIncrease,
+  onDecrease,
+  disabled,
+}: QuantitySelectorProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        onClick={onDecrease}
+        disabled={disabled || quantity <= 1}
+        className="w-8 h-8 flex items-center justify-center border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        -
+      </button>
+      <span className="w-8 text-center">{quantity}</span>
+      <button
+        onClick={onIncrease}
+        disabled={disabled}
+        className="w-8 h-8 flex items-center justify-center border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        +
+      </button>
+    </div>
+  )
+}

package/dist/templates/storefront-additions/src/context/CartContext.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+} from 'react'
+import forgecart from '../lib/forgecart'
+
+interface CartLine {
+  id: string
+  quantity: number
+  productVariant: {
+    id: string
+    name: string
+    price: number
+    priceWithTax: number
+    currencyCode: string
+  }
+  featuredAsset?: {
+    preview: string
+  }
+  unitPriceWithTax: number
+  linePriceWithTax: number
+}
+
+interface Cart {
+  id: string
+  lines: CartLine[]
+  totalQuantity: number
+  subTotalWithTax: number
+  totalWithTax: number
+  currencyCode: string
+}
+
+interface CartContextType {
+  cart: Cart | null
+  loading: boolean
+  itemCount: number
+  addToCart: (productVariantId: string, quantity: number) => Promise<void>
+  updateQuantity: (orderLineId: string, quantity: number) => Promise<void>
+  removeItem: (orderLineId: string) => Promise<void>
+  refreshCart: () => Promise<void>
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined)
+
+export function CartProvider({ children }: { children: ReactNode }) {
+  const [cart, setCart] = useState<Cart | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const refreshCart = useCallback(async () => {
+    try {
+      const result = await forgecart.shop.order.activeOrder()
+      if (result.activeOrder) {
+        setCart(result.activeOrder as unknown as Cart)
+      } else {
+        setCart(null)
+      }
+    } catch (error) {
+      console.error('Failed to fetch cart:', error)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    refreshCart()
+  }, [refreshCart])
+
+  const addToCart = async (productVariantId: string, quantity: number) => {
+    setLoading(true)
+    try {
+      const result = await forgecart.shop.order.addItemToOrder({
+        productVariantId,
+        quantity,
+      })
+      if (
+        result.addItemToOrder &&
+        result.addItemToOrder.__typename === 'Order'
+      ) {
+        setCart(result.addItemToOrder as unknown as Cart)
+      }
+    } catch (error) {
+      console.error('Failed to add item:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const updateQuantity = async (orderLineId: string, quantity: number) => {
+    setLoading(true)
+    try {
+      const result = await forgecart.shop.order.adjustOrderLine({
+        orderLineId,
+        quantity,
+      })
+      if (
+        result.adjustOrderLine &&
+        result.adjustOrderLine.__typename === 'Order'
+      ) {
+        setCart(result.adjustOrderLine as unknown as Cart)
+      }
+    } catch (error) {
+      console.error('Failed to update quantity:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const removeItem = async (orderLineId: string) => {
+    setLoading(true)
+    try {
+      const result = await forgecart.shop.order.removeOrderLine({
+        orderLineId,
+      })
+      if (
+        result.removeOrderLine &&
+        result.removeOrderLine.__typename === 'Order'
+      ) {
+        setCart(result.removeOrderLine as unknown as Cart)
+      }
+    } catch (error) {
+      console.error('Failed to remove item:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const itemCount = cart?.totalQuantity ?? 0
+
+  return (
+    <CartContext.Provider
+      value={{
+        cart,
+        loading,
+        itemCount,
+        addToCart,
+        updateQuantity,
+        removeItem,
+        refreshCart,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  )
+}
+
+export function useCart() {
+  const context = useContext(CartContext)
+  if (!context) {
+    throw new Error('useCart must be used within CartProvider')
+  }
+  return context
+}

package/dist/templates/storefront-additions/src/lib/forgecart.ts

@@ -1,11 +1,22 @@
-import { ForgecartClient } from '@forgecart/sdk'
+import { ForgeCartSDK } from '@forgecart/sdk'
 
-// Initialize the ForgéCart SDK client
-// The channel token is read from environment variables
-export const forgecart = new ForgecartClient({
-  channelToken: process.env.FORGECART_CHANNEL_TOKEN || '',
-  apiUrl: process.env.FORGECART_API_URL || 'https://api.forgecart.com',
-})
+// Singleton instance of the ForgeCart SDK
+// Initialized once to maintain socket connection
+let sdkInstance: ForgeCartSDK | null = null
+
+export function getForgeCartSDK(): ForgeCartSDK {
+  if (!sdkInstance) {
+    sdkInstance = new ForgeCartSDK({
+      endpoint:
+        process.env.NEXT_PUBLIC_FORGECART_API_URL ||
+        'https://api.forgecart.com',
+      token: process.env.NEXT_PUBLIC_FORGECART_CHANNEL_TOKEN || '',
+    })
+  }
+  return sdkInstance
+}
+
+// Export singleton instance for convenience
+export const forgecart = getForgeCartSDK()
 
-// Export for use in server components
 export default forgecart

package/dist/templates/storefront-additions/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}