@forgecart/cli 1.0.1 → 1.1.0

package/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/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/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/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/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/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: [],
+}

package/templates/storefront-e2e-additions/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+import { nxE2EPreset } from '@nx/playwright/preset'
+
+import { workspaceRoot } from '@nx/devkit'
+
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200'
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npx nx run storefront:dev',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

package/templates/storefront-e2e-additions/src/example.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('has title', async ({ page }) => {
+  await page.goto('/')
+  expect(await page.locator('h1').innerText()).toContain('Our Products')
+})
+
+test('has cart link', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.locator('a[href="/cart"]')).toBeVisible()
+})

package/dist/templates/application-additions/env.example

@@ -1,7 +0,0 @@
-# Server Configuration
-PORT=3030
-NODE_ENV=development
-
-# ForgeCart API Configuration
-FORGECART_API_URL=http://localhost:3000
-FORGECART_CHANNEL_TOKEN=your-channel-token-here

package/dist/templates/application-additions/src/services/price-fetcher.service.ts

@@ -1,71 +0,0 @@
-import { Injectable } from '@nestjs/common'
-import { ForgeCartService } from './forgecart.service'
-
-/**
- * Example service demonstrating ForgeCart SDK integration
- *
- * This can be used for custom backend tasks like:
- * - Scheduled price updates
- * - Inventory synchronization
- * - Custom order processing
- * - Third-party integrations
- */
-@Injectable()
-export class PriceFetcherService {
-  constructor(private readonly forgeCart: ForgeCartService) {}
-
-  async getProductPrices(productIds: string[]): Promise<
-    Array<{
-      productId: string
-      name: string
-      price: number
-    }>
-  > {
-    const prices = []
-
-    for (const productId of productIds) {
-      try {
-        const result = await this.forgeCart.shop.products.product({
-          id: productId,
-        })
-        const product = result.product
-        if (product && product.variants?.[0]) {
-          prices.push({
-            productId,
-            name: product.name,
-            price: product.variants[0].price,
-          })
-        }
-      } catch (error) {
-        console.error(`Failed to fetch price for product ${productId}:`, error)
-      }
-    }
-
-    return prices
-  }
-
-  async syncInventory(): Promise<{ synced: number; errors: number }> {
-    // Example: Sync inventory with external system
-    // This is a placeholder for custom business logic
-    let synced = 0
-    let errors = 0
-
-    try {
-      const result = await this.forgeCart.shop.products.products({
-        options: { take: 100 },
-      })
-
-      for (const product of result.products.items || []) {
-        // Here you would implement your custom sync logic
-        // e.g., update external ERP, sync with warehouse system, etc.
-        console.log(`Syncing product: ${product.name}`)
-        synced++
-      }
-    } catch (error) {
-      console.error('Inventory sync failed:', error)
-      errors++
-    }
-
-    return { synced, errors }
-  }
-}

package/dist/templates/storefront-additions/env.example

@@ -1,3 +0,0 @@
-# ForgeCart API Configuration
-NEXT_PUBLIC_FORGECART_API_URL=http://localhost:3000
-NEXT_PUBLIC_FORGECART_CHANNEL_TOKEN=your-channel-token-here

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

@@ -1,66 +0,0 @@
-import { ProductList, Product } from '@forgecart/sdk/shop'
-import forgecart from '../../lib/forgecart'
-
-async function getProducts(): Promise<ProductList> {
-  try {
-    // Fetch products from ForgeCart API
-    const result = await forgecart.shop.products.products({
-      options: {
-        take: 10,
-      },
-    })
-    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 ProductsPage() {
-  const products = await getProducts()
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-8">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 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-          {products.items.map((product: Product) => (
-            <div
-              key={product.id}
-              className="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"
-                />
-              )}
-              <div className="p-4">
-                <h2 className="text-lg font-semibold mb-2">{product.name}</h2>
-                <p className="text-gray-600 text-sm mb-3 line-clamp-2">
-                  {product.description}
-                </p>
-                {product.variants[0] && (
-                  <p className="text-lg font-bold text-blue-600">
-                    {(product.variants[0].price / 100).toFixed(2)}{' '}
-                    {product.variants[0].currencyCode}
-                  </p>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/templates/application-additions/env.example

@@ -1,7 +0,0 @@
-# Server Configuration
-PORT=3030
-NODE_ENV=development
-
-# ForgeCart API Configuration
-FORGECART_API_URL=http://localhost:3000
-FORGECART_CHANNEL_TOKEN=your-channel-token-here

package/templates/application-additions/src/services/price-fetcher.service.ts

@@ -1,71 +0,0 @@
-import { Injectable } from '@nestjs/common'
-import { ForgeCartService } from './forgecart.service'
-
-/**
- * Example service demonstrating ForgeCart SDK integration
- *
- * This can be used for custom backend tasks like:
- * - Scheduled price updates
- * - Inventory synchronization
- * - Custom order processing
- * - Third-party integrations
- */
-@Injectable()
-export class PriceFetcherService {
-  constructor(private readonly forgeCart: ForgeCartService) {}
-
-  async getProductPrices(productIds: string[]): Promise<
-    Array<{
-      productId: string
-      name: string
-      price: number
-    }>
-  > {
-    const prices = []
-
-    for (const productId of productIds) {
-      try {
-        const result = await this.forgeCart.shop.products.product({
-          id: productId,
-        })
-        const product = result.product
-        if (product && product.variants?.[0]) {
-          prices.push({
-            productId,
-            name: product.name,
-            price: product.variants[0].price,
-          })
-        }
-      } catch (error) {
-        console.error(`Failed to fetch price for product ${productId}:`, error)
-      }
-    }
-
-    return prices
-  }
-
-  async syncInventory(): Promise<{ synced: number; errors: number }> {
-    // Example: Sync inventory with external system
-    // This is a placeholder for custom business logic
-    let synced = 0
-    let errors = 0
-
-    try {
-      const result = await this.forgeCart.shop.products.products({
-        options: { take: 100 },
-      })
-
-      for (const product of result.products.items || []) {
-        // Here you would implement your custom sync logic
-        // e.g., update external ERP, sync with warehouse system, etc.
-        console.log(`Syncing product: ${product.name}`)
-        synced++
-      }
-    } catch (error) {
-      console.error('Inventory sync failed:', error)
-      errors++
-    }
-
-    return { synced, errors }
-  }
-}

package/templates/storefront-additions/env.example

@@ -1,3 +0,0 @@
-# ForgeCart API Configuration
-NEXT_PUBLIC_FORGECART_API_URL=http://localhost:3000
-NEXT_PUBLIC_FORGECART_CHANNEL_TOKEN=your-channel-token-here