create-nymbal-app 0.0.0 → 0.2.0

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

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import { fetchProducts, fetchCategories } from '@/lib/api'
+import { organizationJsonLd } from '@/lib/seo'
+import { HeroSection } from '@/components/server/HeroSection'
+import { CategoryNav } from '@/components/server/CategoryNav'
+import { ProductCard } from '@/components/server/ProductCard'
+import { NewsletterSignup } from '@/components/client/NewsletterSignup'
+import styles from '@/styles/pages/home.module.css'
+
+export default async function HomePage() {
+  const [{ items: products }, categories] = await Promise.all([
+    fetchProducts({ limit: 8 }),
+    fetchCategories(),
+  ])
+
+  const jsonLd = organizationJsonLd(
+    'Nymbal Store',
+    process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000',
+  )
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+
+      <HeroSection />
+
+      <CategoryNav categories={categories} />
+
+      <section className={`container ${styles.featuredSection}`}>
+        <div className={styles.featuredHeader}>
+          <h2 className={styles.featuredTitle}>Featured Products</h2>
+          <Link href="/products" className={styles.featuredViewAll}>
+            View All
+          </Link>
+        </div>
+        {products.length > 0 ? (
+          <div className="product-grid">
+            {products.map((product) => (
+              <ProductCard
+                key={product.id}
+                product={{
+                  slug: product.slug,
+                  name: product.name,
+                  priceMinor: product.priceMinor ?? null,
+                  priceRange: product.priceRange ?? null,
+                  currency: product.currency ?? null,
+                  media: product.media,
+                }}
+              />
+            ))}
+          </div>
+        ) : (
+          <p className="text-muted text-center">No products available yet. Check back soon.</p>
+        )}
+      </section>
+
+      <NewsletterSignup />
+    </>
+  )
+}

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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,40 @@
+import type { Metadata } from 'next'
+import { fetchProducts, fetchCategories, 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 sort = sortFromSearchParams(await searchParams)
+  const [{ items, nextCursor }, categories] = await Promise.all([
+    fetchProducts({ limit: 24, sort }),
+    fetchCategories(),
+  ])
+
+  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}
+        categories={categories}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,181 @@
+'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/AuthGuard.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useState, type ReactNode } from 'react'
+import { useRouter, usePathname } from 'next/navigation'
+import { useAuth } from '@nymbalhq/react'
+import { restoreSession } from '@/lib/client'
+
+export const PUBLIC_AUTH_PATHS = ['/account/login', '/account/register']
+
+export function AuthGuard({ children }: { children: ReactNode }) {
+  const { isAuthenticated, loading } = useAuth()
+  const router = useRouter()
+  const pathname = usePathname()
+  // A stored token is only known to be valid once its profile has loaded; redirecting before that would sign a
+  // reloading shopper out.
+  const [restored, setRestored] = useState(false)
+
+  const isPublicAuthPath = PUBLIC_AUTH_PATHS.includes(pathname)
+
+  useEffect(() => {
+    let active = true
+    void restoreSession().finally(() => {
+      if (active) setRestored(true)
+    })
+    return () => {
+      active = false
+    }
+  }, [])
+
+  useEffect(() => {
+    if (restored && !loading && !isAuthenticated && !isPublicAuthPath) {
+      router.replace(`/account/login?redirect=${encodeURIComponent(pathname)}`)
+    }
+  }, [restored, loading, isAuthenticated, isPublicAuthPath, pathname, router])
+
+  if (isPublicAuthPath) {
+    return <>{children}</>
+  }
+
+  if (!restored || loading) {
+    return (
+      <div className="loading-center">
+        <div className="spinner spinner-lg" role="status">
+          <span className="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  return <>{children}</>
+}

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

@@ -0,0 +1,39 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { CartDrawer } from '@nymbalhq/react'
+
+export function CartDrawerToggle() {
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+
+  const handleCheckoutClick = useCallback(() => {
+    setOpen(false)
+    router.push('/checkout')
+  }, [router])
+
+  useEffect(() => {
+    function handleOpen() {
+      setOpen(true)
+    }
+
+    function handleClose() {
+      setOpen(false)
+    }
+
+    window.addEventListener('nymbal:cart:open', handleOpen)
+    window.addEventListener('nymbal:cart:close', handleClose)
+    return () => {
+      window.removeEventListener('nymbal:cart:open', handleOpen)
+      window.removeEventListener('nymbal:cart:close', handleClose)
+    }
+  }, [])
+
+  return (
+    <CartDrawer
+      open={open}
+      onCheckoutClick={handleCheckoutClick}
+    />
+  )
+}

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

@@ -0,0 +1,120 @@
+'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)}
+                      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>
+  )
+}