create-nymbal-app 0.4.0 → 0.5.0

package/scaffold/templates/nextjs/app/product/[slug]/page.tsx

@@ -1,111 +0,0 @@
-import type { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import { fetchProduct, fetchProducts, fetchReviews } from '@/lib/api'
-import { productJsonLd } from '@/lib/seo'
-import { Breadcrumb } from '@/components/server/Breadcrumb'
-import { ReviewList } from '@/components/server/ReviewList'
-import { RelatedProducts } from '@/components/server/RelatedProducts'
-import { ImageGallery } from '@/components/client/ImageGallery'
-import { ProductInteractive } from '@/components/client/ProductInteractive'
-import { ReviewForm } from '@/components/client/ReviewForm'
-import styles from '@/styles/pages/pdp.module.css'
-
-interface ProductPageProps {
-  params: Promise<{ slug: string }>
-}
-
-export async function generateMetadata({
-  params,
-}: ProductPageProps): Promise<Metadata> {
-  const { slug } = await params
-  const product = await fetchProduct(slug)
-
-  if (!product) {
-    return { title: 'Product Not Found' }
-  }
-
-  return {
-    title: product.name,
-    description: product.shortDescription ?? product.description ?? `Buy ${product.name}.`,
-  }
-}
-
-export default async function ProductPage({ params }: ProductPageProps) {
-  const { slug } = await params
-  const product = await fetchProduct(slug)
-
-  if (!product) notFound()
-
-  const [{ items: reviews }, { items: relatedProducts }] = await Promise.all([
-    fetchReviews(product.id),
-    fetchProducts({ limit: 4 }),
-  ])
-
-  const related = relatedProducts.filter((p) => p.id !== product.id).slice(0, 4)
-
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000'
-  const jsonLd = productJsonLd(product, baseUrl)
-
-  const mediaArray = Array.isArray(product.media) ? product.media : []
-  const images = mediaArray.length > 0
-    ? mediaArray.map((m: Record<string, string>) => ({
-        url: m.url,
-        alt: m.alt ?? product.name,
-      }))
-    : [{ url: `https://picsum.photos/seed/${product.slug}/600/600`, alt: product.name }]
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
-
-      <div className={`container ${styles.page}`}>
-        <Breadcrumb
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Products', href: '/products' },
-            { label: product.name },
-          ]}
-        />
-
-        <div className={styles.productLayout}>
-          <ImageGallery images={images} />
-
-          <div className={styles.info}>
-            <ProductInteractive product={product} />
-
-            {product.description && (
-              <div className={styles.description}>
-                <p>{product.description}</p>
-              </div>
-            )}
-
-            <div className={styles.detailsSection}>
-              <details className={styles.detailsItem}>
-                <summary className={styles.detailsSummary}>Details</summary>
-                <div className={styles.detailsContent}>
-                  {product.description ?? 'No additional details available.'}
-                </div>
-              </details>
-              <details className={styles.detailsItem}>
-                <summary className={styles.detailsSummary}>
-                  Shipping & Returns
-                </summary>
-                <div className={styles.detailsContent}>
-                  Free standard shipping on orders over $50. Returns accepted within
-                  30 days of purchase.
-                </div>
-              </details>
-            </div>
-          </div>
-        </div>
-
-        <ReviewList reviews={reviews} />
-        <ReviewForm productId={product.id} />
-        <RelatedProducts products={related} />
-      </div>
-    </>
-  )
-}

package/scaffold/templates/nextjs/app/products/page.tsx

@@ -1,40 +0,0 @@
-import type { Metadata } from 'next'
-import { fetchProducts, fetchCapabilities, sortFromSearchParams } from '@/lib/api'
-import { Breadcrumb } from '@/components/server/Breadcrumb'
-import { ProductGrid } from '@/components/client/ProductGrid'
-import styles from '@/styles/pages/plp.module.css'
-
-export const metadata: Metadata = {
-  title: 'All Products',
-  description: 'Browse our full collection of products.',
-}
-
-interface ProductsPageProps {
-  searchParams: Promise<{ sort?: string | string[] }>
-}
-
-export default async function ProductsPage({ searchParams }: ProductsPageProps) {
-  const capabilities = await fetchCapabilities()
-  const sort = sortFromSearchParams(await searchParams, capabilities?.catalog)
-  const { items, nextCursor, facets } = await fetchProducts({ limit: 24, sort })
-
-  return (
-    <div className={`container ${styles.page}`}>
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Products' },
-        ]}
-      />
-      <h1 className={styles.pageTitle}>All Products</h1>
-      <ProductGrid
-        initialProducts={items}
-        initialCursor={nextCursor}
-        initialSort={sort}
-        initialFacets={facets ?? []}
-        sortKeys={capabilities?.catalog.sortKeys ?? []}
-        defaultSort={capabilities?.catalog.defaultSort}
-      />
-    </div>
-  )
-}

package/scaffold/templates/nextjs/app/search/page.tsx

@@ -1,24 +0,0 @@
-import type { Metadata } from 'next'
-import { Suspense } from 'react'
-import { SearchResults } from '@/components/client/SearchResults'
-
-export const metadata: Metadata = {
-  title: 'Search',
-  description: 'Search our product catalog.',
-}
-
-export default function SearchPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="loading-center">
-          <div className="spinner spinner-lg" role="status">
-            <span className="visually-hidden">Loading...</span>
-          </div>
-        </div>
-      }
-    >
-      <SearchResults />
-    </Suspense>
-  )
-}

package/scaffold/templates/nextjs/components/client/AddressManager.tsx

@@ -1,181 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useState, type FormEvent } from 'react'
-import { useNymbalClient } from '@nymbalhq/react'
-import type { Address, CustomerAddress } from '@nymbalhq/types'
-import styles from '@/styles/pages/account.module.css'
-
-// The same fields and test ids as the Astro template's AddressForm (`new-address-<name>`).
-const FIELDS: Array<{
-  name: keyof Address
-  label: string
-  autoComplete: string
-  required: boolean
-  full?: boolean
-  placeholder?: string
-}> = [
-  { name: 'firstName', label: 'First Name', autoComplete: 'given-name', required: true },
-  { name: 'lastName', label: 'Last Name', autoComplete: 'family-name', required: true },
-  {
-    name: 'addressLine1',
-    label: 'Address Line 1',
-    autoComplete: 'address-line1',
-    required: true,
-    full: true,
-  },
-  {
-    name: 'addressLine2',
-    label: 'Address Line 2 (optional)',
-    autoComplete: 'address-line2',
-    required: false,
-    full: true,
-  },
-  { name: 'city', label: 'City', autoComplete: 'address-level2', required: true },
-  { name: 'region', label: 'State / County', autoComplete: 'address-level1', required: true },
-  { name: 'postalCode', label: 'Postcode', autoComplete: 'postal-code', required: true },
-  {
-    name: 'country',
-    label: 'Country (2-letter code)',
-    autoComplete: 'country',
-    required: true,
-    placeholder: 'GB',
-  },
-]
-
-export function AddressManager() {
-  const client = useNymbalClient()
-  const [addresses, setAddresses] = useState<CustomerAddress[] | null>(null)
-  const [loadError, setLoadError] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
-
-  const load = useCallback(async () => {
-    try {
-      setAddresses(await client.customer.addresses.list())
-      setLoadError(false)
-    } catch {
-      setLoadError(true)
-    }
-  }, [client])
-
-  useEffect(() => {
-    void load()
-  }, [load])
-
-  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    const form = e.currentTarget
-    const data = new FormData(form)
-    const field = (name: string) => String(data.get(name) ?? '').trim()
-    const address: Address = {
-      firstName: field('firstName'),
-      lastName: field('lastName'),
-      addressLine1: field('addressLine1'),
-      city: field('city'),
-      region: field('region'),
-      postalCode: field('postalCode'),
-      country: field('country'),
-      ...(field('addressLine2') && { addressLine2: field('addressLine2') }),
-    }
-
-    setSaving(true)
-    setMessage(null)
-    try {
-      await client.customer.addresses.create(address)
-      form.reset()
-      setMessage({ ok: true, text: 'Address saved successfully.' })
-      await load()
-    } catch {
-      setMessage({ ok: false, text: 'Failed to save address. Please try again.' })
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <div>
-      <h2 className={styles.pageTitle}>Addresses</h2>
-
-      <div data-testid="addresses-list">
-        {addresses === null && !loadError && (
-          <p className="text-sm text-muted">Loading addresses...</p>
-        )}
-        {loadError && <p className="text-sm text-muted">Unable to load addresses.</p>}
-        {addresses !== null && addresses.length === 0 && (
-          <div className={styles.emptyOrders}>
-            <h3 className={styles.emptyOrdersTitle}>No saved addresses</h3>
-            <p className={styles.emptyOrdersText}>Add an address below to get started.</p>
-          </div>
-        )}
-        {addresses?.map((addr) => (
-          <div
-            key={addr.id}
-            data-testid={`address-${addr.id}`}
-            className={styles.formCard}
-            style={{ marginBottom: 'var(--nymbal-spacing-md)' }}
-          >
-            <p style={{ fontSize: 'var(--nymbal-font-size-sm)', lineHeight: 1.6 }}>
-              {addr.firstName} {addr.lastName}
-              <br />
-              {addr.addressLine1}
-              {addr.addressLine2 && <>, {addr.addressLine2}</>}
-              <br />
-              {addr.city}, {addr.region} {addr.postalCode}
-              <br />
-              {addr.country}
-            </p>
-            <div
-              style={{
-                display: 'flex',
-                gap: 'var(--nymbal-spacing-sm)',
-                marginTop: 'var(--nymbal-spacing-sm)',
-              }}
-            >
-              {addr.isDefaultShipping && <span className="badge">Default Shipping</span>}
-              {addr.isDefaultBilling && <span className="badge">Default Billing</span>}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className={styles.formCard} style={{ marginTop: 'var(--nymbal-spacing-xl)' }}>
-        <h3 className={styles.formCardTitle}>Add New Address</h3>
-        {message && (
-          <div
-            className={`${styles.alert} ${message.ok ? styles.alertSuccess : styles.alertError}`}
-          >
-            {message.text}
-          </div>
-        )}
-        <form onSubmit={handleSubmit} data-testid="add-address-form">
-          <div className={styles.formGrid}>
-            {FIELDS.map((f) => (
-              <div key={f.name} className={f.full ? styles.formGridFull : undefined}>
-                <label htmlFor={`new-address-${f.name}`}>{f.label}</label>
-                <input
-                  id={`new-address-${f.name}`}
-                  name={f.name}
-                  type="text"
-                  required={f.required}
-                  autoComplete={f.autoComplete}
-                  placeholder={f.placeholder}
-                  data-testid={`new-address-${f.name}`}
-                />
-              </div>
-            ))}
-          </div>
-          <div className={styles.formActions}>
-            <button
-              type="submit"
-              className={styles.saveButton}
-              disabled={saving}
-              data-testid="save-address"
-            >
-              {saving ? 'Saving...' : 'Save Address'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

package/scaffold/templates/nextjs/components/client/CartPage.tsx

@@ -1,121 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import Image from 'next/image'
-import { useCart, QuantitySelector } from '@nymbalhq/react'
-import { formatPrice } from '@/lib/format'
-import styles from '@/styles/pages/cart.module.css'
-
-export function CartPage() {
-  const { items, subtotalMinor, currency, removeItem, updateQuantity, loading } = useCart()
-
-  if (loading) {
-    return (
-      <div className="loading-center">
-        <div className="spinner spinner-lg" role="status">
-          <span className="visually-hidden">Loading cart...</span>
-        </div>
-      </div>
-    )
-  }
-
-  if (!items || items.length === 0) {
-    return (
-      <div className={`container ${styles.page}`}>
-        <h1 className={styles.pageTitle}>Shopping Cart</h1>
-        <div className={styles.empty}>
-          <h2 className={styles.emptyTitle}>Your cart is empty</h2>
-          <p className={styles.emptyText}>
-            Looks like you have not added anything to your cart yet.
-          </p>
-          <Link href="/products" className="btn btn-primary" data-testid="continue-shopping">
-            Continue Shopping
-          </Link>
-        </div>
-      </div>
-    )
-  }
-
-  const cartCurrency = currency ?? 'GBP'
-
-  return (
-    <div className={`container ${styles.page}`}>
-      <h1 className={styles.pageTitle}>Shopping Cart</h1>
-      <div className={styles.layout}>
-        <div className={styles.itemsSection}>
-          <div className={styles.itemsList}>
-            {items.map((item) => (
-              <div key={item.variantId} className={styles.item} data-testid={`cart-item-${item.variantId}`}>
-                <div className={styles.itemImage}>
-                  {item.imageUrl ? (
-                    <Image
-                      src={item.imageUrl}
-                      alt={item.productName}
-                      width={96}
-                      height={96}
-                    />
-                  ) : (
-                    <span className="visually-hidden">No image</span>
-                  )}
-                </div>
-                <div className={styles.itemDetails}>
-                  <Link href={`/product/${item.productId}`} className={styles.itemName}>
-                    {item.productName}
-                  </Link>
-                  {item.variantName && (
-                    <span className={styles.itemVariant}>{item.variantName}</span>
-                  )}
-                  <div className={styles.itemActions}>
-                    <QuantitySelector
-                      value={item.qty}
-                      min={1}
-                      max={99}
-                      onQuantityChange={(e) => updateQuantity(item.variantId, e.detail.value)}
-                    />
-                    <button
-                      type="button"
-                      className={styles.removeButton}
-                      onClick={() => removeItem(item.variantId)}
-                      data-testid={`cart-remove-${item.variantId}`}
-                      aria-label={`Remove ${item.productName} from cart`}
-                    >
-                      Remove
-                    </button>
-                  </div>
-                </div>
-                <span className={styles.itemPrice}>
-                  {formatPrice(item.priceMinor * item.qty, cartCurrency)}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className={styles.summary}>
-          <h2 className={styles.summaryTitle}>Order Summary</h2>
-          <div className={styles.summaryRow}>
-            <span className={styles.summaryLabel}>Subtotal</span>
-            <span className={styles.summaryValue}>
-              {formatPrice(subtotalMinor ?? 0, cartCurrency)}
-            </span>
-          </div>
-          <div className={styles.summaryRow}>
-            <span className={styles.summaryLabel}>Shipping</span>
-            <span className={styles.summaryValue}>Calculated at checkout</span>
-          </div>
-          <hr className={styles.summaryDivider} />
-          <div className={`${styles.summaryRow} ${styles.summaryTotal}`}>
-            <span>Estimated Total</span>
-            <span>{formatPrice(subtotalMinor ?? 0, cartCurrency)}</span>
-          </div>
-          <Link href="/checkout" className={styles.checkoutButton}>
-            Proceed to Checkout
-          </Link>
-          <Link href="/products" className={styles.continueShoppingLink}>
-            Continue Shopping
-          </Link>
-        </div>
-      </div>
-    </div>
-  )
-}