create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/nextjs/components/server/Header.module.css

@@ -0,0 +1,147 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: var(--nymbal-z-dropdown);
+  background-color: var(--nymbal-color-surface);
+  border-bottom: 1px solid var(--nymbal-color-border);
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  gap: var(--nymbal-spacing-lg);
+  height: 4rem;
+  position: relative;
+}
+
+.logo {
+  font-size: var(--nymbal-font-size-xl);
+  font-weight: var(--nymbal-font-weight-bold);
+  color: var(--nymbal-color-primary);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  flex-shrink: 0;
+}
+
+.logo:hover {
+  color: var(--nymbal-color-primary);
+  text-decoration: none;
+}
+
+.nav {
+  display: none;
+}
+
+.navList {
+  display: flex;
+  gap: var(--nymbal-spacing-lg);
+  list-style: none;
+}
+
+.navLink {
+  font-size: var(--nymbal-font-size-sm);
+  font-weight: var(--nymbal-font-weight-medium);
+  color: var(--nymbal-color-text);
+  text-decoration: none;
+  transition: color var(--nymbal-transition-fast);
+}
+
+.navLink:hover {
+  color: var(--nymbal-color-accent);
+  text-decoration: none;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--nymbal-spacing-md);
+  margin-left: auto;
+}
+
+.search {
+  display: none;
+}
+
+.iconLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--nymbal-color-text);
+  transition: color var(--nymbal-transition-fast);
+}
+
+.iconLink:hover {
+  color: var(--nymbal-color-accent);
+}
+
+/* ── Mobile menu (CSS-only) ───────────────────────────────────────── */
+
+.menuCheckbox {
+  display: none;
+}
+
+.menuButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--nymbal-color-text);
+  order: 10;
+}
+
+.mobileNav {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--nymbal-color-surface);
+  border-bottom: 1px solid var(--nymbal-color-border);
+  box-shadow: var(--nymbal-shadow-md);
+  z-index: var(--nymbal-z-dropdown);
+}
+
+.menuCheckbox:checked ~ .mobileNav {
+  display: block;
+}
+
+.mobileNavList {
+  list-style: none;
+  padding: var(--nymbal-spacing-md);
+}
+
+.mobileNavLink {
+  display: block;
+  padding: var(--nymbal-spacing-sm) 0;
+  font-size: var(--nymbal-font-size-base);
+  font-weight: var(--nymbal-font-weight-medium);
+  color: var(--nymbal-color-text);
+  text-decoration: none;
+  border-bottom: 1px solid var(--nymbal-color-border);
+}
+
+.mobileNavLink:hover {
+  color: var(--nymbal-color-accent);
+  text-decoration: none;
+}
+
+/* ── Desktop ──────────────────────────────────────────────────────── */
+
+@media (min-width: 1024px) {
+  .nav {
+    display: block;
+  }
+
+  .search {
+    display: block;
+    width: 16rem;
+  }
+
+  .menuButton {
+    display: none;
+  }
+
+  .mobileNav {
+    display: none !important;
+  }
+}

package/scaffold/templates/nextjs/components/server/Header.tsx

@@ -0,0 +1,102 @@
+import Link from 'next/link'
+import { SearchBarWrapper } from '@/components/client/SearchBarWrapper'
+import { MiniCartWrapper } from '@/components/client/MiniCartWrapper'
+import styles from './Header.module.css'
+
+const NAV_LINKS = [
+  { href: '/products', label: 'Shop' },
+  { href: '/products?category=new', label: 'New Arrivals' },
+  { href: '/products?category=sale', label: 'Sale' },
+]
+
+export function Header() {
+  return (
+    <header className={styles.header} data-testid="site-header">
+      <div className={`container ${styles.inner}`}>
+        <Link href="/" className={styles.logo}>
+          Nymbal
+        </Link>
+
+        <nav className={styles.nav} aria-label="Main navigation">
+          <ul className={styles.navList}>
+            {NAV_LINKS.map((link) => (
+              <li key={link.href}>
+                <Link href={link.href} className={styles.navLink}>
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        <div className={styles.actions}>
+          <div className={styles.search}>
+            <SearchBarWrapper />
+          </div>
+          <Link href="/account" className={styles.iconLink} aria-label="Account">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+          </Link>
+          <MiniCartWrapper />
+        </div>
+
+        <input
+          type="checkbox"
+          id="mobile-menu-toggle"
+          className={styles.menuCheckbox}
+          aria-hidden="true"
+        />
+        <label
+          htmlFor="mobile-menu-toggle"
+          className={styles.menuButton}
+          aria-label="Toggle menu"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+        </label>
+
+        <nav className={styles.mobileNav} aria-label="Mobile navigation">
+          <ul className={styles.mobileNavList}>
+            {NAV_LINKS.map((link) => (
+              <li key={link.href}>
+                <Link href={link.href} className={styles.mobileNavLink}>
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+            <li>
+              <Link href="/account" className={styles.mobileNavLink}>
+                Account
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  )
+}

package/scaffold/templates/nextjs/components/server/HeroSection.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import styles from '@/styles/pages/home.module.css'
+
+export function HeroSection() {
+  return (
+    <section className={styles.hero} data-testid="hero-section">
+      <div className={styles.heroContent}>
+        <h1 className={styles.heroTitle}>Curated for quality. Built to last.</h1>
+        <p className={styles.heroSubtitle}>
+          Discover thoughtfully designed products that stand the test of time.
+        </p>
+        <Link href="/products" className={styles.heroCta}>
+          Shop Now
+        </Link>
+      </div>
+    </section>
+  )
+}

package/scaffold/templates/nextjs/components/server/OrderSummary.tsx

@@ -0,0 +1,79 @@
+import { formatPrice } from '@/lib/format'
+import styles from '@/styles/pages/confirmation.module.css'
+
+interface OrderLineItem {
+  variantId: string
+  productId: string
+  productName: string
+  variantName: string
+  sku: string
+  qty: number
+  unitPriceMinor: number
+  lineTotalMinor: number
+  imageUrl?: string
+}
+
+interface OrderSummaryProps {
+  items: OrderLineItem[]
+  subtotalMinor: number
+  currency: string
+  shippingTotalMinor: number
+  taxTotalMinor: number
+  totalMinor: number
+}
+
+export function OrderSummary({
+  items,
+  subtotalMinor,
+  currency,
+  shippingTotalMinor,
+  taxTotalMinor,
+  totalMinor,
+}: OrderSummaryProps) {
+  return (
+    <div className={styles.orderCard}>
+      <h3 className={styles.orderCardTitle}>Order Items</h3>
+      <div className={styles.lineItems}>
+        {items.map((item) => (
+          <div key={item.variantId} className={styles.lineItem}>
+            {item.imageUrl && (
+              <div className={styles.lineItemImage}>
+                <img src={item.imageUrl} alt={item.productName} />
+              </div>
+            )}
+            <div className={styles.lineItemInfo}>
+              <p className={styles.lineItemName}>{item.productName}</p>
+              {item.variantName && (
+                <p className={styles.lineItemVariant}>{item.variantName}</p>
+              )}
+              <p className={styles.lineItemQty}>Qty: {item.qty}</p>
+            </div>
+            <span className={styles.lineItemPrice}>
+              {formatPrice(item.lineTotalMinor, currency)}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className={styles.totals}>
+        <div className={styles.totalRow}>
+          <span className={styles.totalLabel}>Subtotal</span>
+          <span>{formatPrice(subtotalMinor, currency)}</span>
+        </div>
+        <div className={styles.totalRow}>
+          <span className={styles.totalLabel}>Shipping</span>
+          <span>
+            {shippingTotalMinor === 0 ? 'Free' : formatPrice(shippingTotalMinor, currency)}
+          </span>
+        </div>
+        <div className={styles.totalRow}>
+          <span className={styles.totalLabel}>Tax</span>
+          <span>{formatPrice(taxTotalMinor, currency)}</span>
+        </div>
+        <div className={`${styles.totalRow} ${styles.totalGrand}`}>
+          <span>Total</span>
+          <span>{formatPrice(totalMinor, currency)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/server/PriceDisplay.tsx

@@ -0,0 +1,31 @@
+import { formatPrice } from '@/lib/format'
+import styles from '@/styles/pages/pdp.module.css'
+
+interface PriceDisplayProps {
+  priceMinor: number
+  currency: string
+  compareAtMinor?: number
+}
+
+export function PriceDisplay({ priceMinor, currency, compareAtMinor }: PriceDisplayProps) {
+  const hasDiscount = compareAtMinor != null && compareAtMinor > priceMinor
+
+  return (
+    <div className={styles.price} data-testid="product-price">
+      <span>{formatPrice(priceMinor, currency)}</span>
+      {hasDiscount && (
+        <span
+          style={{
+            textDecoration: 'line-through',
+            fontSize: '0.875em',
+            color: 'var(--nymbal-color-text-muted)',
+            marginLeft: 'var(--nymbal-spacing-sm)',
+            fontWeight: 'var(--nymbal-font-weight-normal)',
+          }}
+        >
+          {formatPrice(compareAtMinor, currency)}
+        </span>
+      )}
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/server/ProductCard.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { formatPrice } from '@/lib/format'
+import styles from '@/styles/pages/home.module.css'
+
+interface ProductCardProps {
+  product: {
+    slug: string
+    name: string
+    priceMinor: number | null
+    priceRange?: { minMinor: number } | null
+    currency: string | null
+    media?: unknown
+    imageUrl?: string
+  }
+}
+
+function getImageUrl(product: ProductCardProps['product']): string | null {
+  if (product.imageUrl) return product.imageUrl
+  if (Array.isArray(product.media) && product.media.length > 0) {
+    const first = product.media[0] as Record<string, unknown>
+    if (typeof first?.url === 'string') return first.url
+  }
+  return null
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  const imageUrl = getImageUrl(product)
+  // The "from" price, which the price sorts order by.
+  const fromMinor = product.priceRange?.minMinor ?? product.priceMinor
+
+  return (
+    <Link
+      href={`/product/${product.slug}`}
+      className={styles.productCard}
+      data-testid={`product-card-${product.slug}`}
+    >
+      <div className={styles.productImage}>
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={product.name}
+            width={400}
+            height={400}
+            sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 25vw"
+          />
+        ) : (
+          <span className="visually-hidden">No image available</span>
+        )}
+      </div>
+      <div className={styles.productInfo}>
+        <p className={styles.productName}>{product.name}</p>
+        {fromMinor != null && product.currency && (
+          <p className={styles.productPrice}>{formatPrice(fromMinor, product.currency)}</p>
+        )}
+      </div>
+    </Link>
+  )
+}

package/scaffold/templates/nextjs/components/server/RelatedProducts.tsx

@@ -0,0 +1,31 @@
+import { ProductCard } from './ProductCard'
+import type { DenormalisedProduct } from '@nymbalhq/sdk'
+
+interface RelatedProductsProps {
+  products: DenormalisedProduct[]
+}
+
+export function RelatedProducts({ products }: RelatedProductsProps) {
+  if (products.length === 0) return null
+
+  return (
+    <section className="section">
+      <h2 className="section-title">You may also like</h2>
+      <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>
+    </section>
+  )
+}

package/scaffold/templates/nextjs/components/server/ReviewList.tsx

@@ -0,0 +1,62 @@
+import { formatDate } from '@/lib/format'
+import styles from '@/styles/pages/pdp.module.css'
+
+interface Review {
+  id: string
+  productId: string
+  rating: number
+  title: string
+  body: string
+  submittedAt: string
+}
+
+interface ReviewListProps {
+  reviews: Review[]
+}
+
+function StarRating({ rating }: { rating: number }) {
+  return (
+    <div className={styles.reviewStars} aria-label={`${rating} out of 5 stars`}>
+      {Array.from({ length: 5 }, (_, i) => (
+        <span
+          key={i}
+          className={i < rating ? styles.starFilled : styles.starEmpty}
+          aria-hidden="true"
+        >
+          ★
+        </span>
+      ))}
+    </div>
+  )
+}
+
+export function ReviewList({ reviews }: ReviewListProps) {
+  if (reviews.length === 0) {
+    return (
+      <div className={styles.reviewsSection}>
+        <h2 className={styles.reviewsTitle}>Reviews</h2>
+        <p className={styles.noReviews}>No reviews yet. Be the first to leave a review.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.reviewsSection}>
+      <h2 className={styles.reviewsTitle}>Reviews ({reviews.length})</h2>
+      <div className={styles.reviewsList}>
+        {reviews.map((review) => (
+          <article key={review.id} className={styles.reviewCard}>
+            <div className={styles.reviewHeader}>
+              <StarRating rating={review.rating} />
+              <time className={styles.reviewDate} dateTime={review.submittedAt}>
+                {formatDate(review.submittedAt)}
+              </time>
+            </div>
+            {review.title && <h3 className={styles.reviewTitle}>{review.title}</h3>}
+            <p className={styles.reviewBody}>{review.body}</p>
+          </article>
+        ))}
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/server/SkipNav.tsx

@@ -0,0 +1,7 @@
+export function SkipNav() {
+  return (
+    <a href="#main" className="skip-nav">
+      Skip to content
+    </a>
+  )
+}

package/scaffold/templates/nextjs/components/server/StockBadge.tsx

@@ -0,0 +1,19 @@
+import styles from '@/styles/pages/pdp.module.css'
+
+interface StockBadgeProps {
+  stock: number
+}
+
+export function StockBadge({ stock }: StockBadgeProps) {
+  const inStock = stock > 0
+
+  return (
+    <span
+      className={`${styles.stockBadge} ${inStock ? styles.inStock : styles.outOfStock}`}
+      data-testid="stock-badge"
+    >
+      <span className={styles.stockDot} aria-hidden="true" />
+      {inStock ? (stock <= 5 ? `Only ${stock} left` : 'In Stock') : 'Out of Stock'}
+    </span>
+  )
+}

package/scaffold/templates/nextjs/lib/api.ts

@@ -0,0 +1,89 @@
+import type { DenormalisedProduct, ProductListResult, ReviewsListResult } from '@nymbalhq/sdk'
+import { DEFAULT_PRODUCT_SORT, PRODUCT_SORT_KEYS } from '@nymbalhq/types'
+import type { Category, Order, ProductSortKey } from '@nymbalhq/types'
+
+const API_URL = process.env.NYMBAL_API_URL ?? 'http://localhost:3001'
+
+export async function fetchProducts(params?: {
+  limit?: number
+  cursor?: string
+  category?: string
+  sort?: ProductSortKey
+}): Promise<ProductListResult> {
+  const url = new URL('/api/products', API_URL)
+  if (params?.limit) url.searchParams.set('limit', String(params.limit))
+  if (params?.cursor) url.searchParams.set('cursor', params.cursor)
+  if (params?.category) url.searchParams.set('category', params.category)
+  if (params?.sort) url.searchParams.set('sort', params.sort)
+
+  try {
+    const res = await fetch(url.toString(), { cache: 'no-store' })
+    if (!res.ok) return { items: [], nextCursor: null }
+    const envelope = (await res.json()) as { data: ProductListResult }
+    return envelope.data ?? { items: [], nextCursor: null }
+  } catch (err) {
+    console.error('[api] fetchProducts failed', err)
+    return { items: [], nextCursor: null }
+  }
+}
+
+/** The sort a listing URL asks for; a missing or unknown `?sort=` is the default. */
+export function sortFromSearchParams(params: { sort?: string | string[] }): ProductSortKey {
+  const sort = Array.isArray(params.sort) ? params.sort[0] : params.sort
+  return PRODUCT_SORT_KEYS.find((key) => key === sort) ?? DEFAULT_PRODUCT_SORT
+}
+
+export async function fetchProduct(slug: string): Promise<DenormalisedProduct | null> {
+  try {
+    const res = await fetch(`${API_URL}/api/products/${encodeURIComponent(slug)}`, { cache: 'no-store' })
+    if (!res.ok) return null
+    const envelope = (await res.json()) as { data: DenormalisedProduct }
+    return envelope.data ?? null
+  } catch (err) {
+    console.error('[api] fetchProduct failed', err)
+    return null
+  }
+}
+
+const SEED_CATEGORIES: Category[] = [
+  { id: 'cat_apparel', parentId: null, name: 'Apparel', slug: 'apparel', description: 'Clothing and accessories', position: 0, createdAt: '2024-01-01T00:00:00Z' },
+  { id: 'cat_home', parentId: null, name: 'Home', slug: 'home', description: 'Home goods and decor', position: 1, createdAt: '2024-01-01T00:00:00Z' },
+  { id: 'cat_electronics', parentId: null, name: 'Electronics', slug: 'electronics', description: 'Gadgets and devices', position: 2, createdAt: '2024-01-01T00:00:00Z' },
+  { id: 'cat_books', parentId: null, name: 'Books', slug: 'books', description: 'Books and reading', position: 3, createdAt: '2024-01-01T00:00:00Z' },
+]
+
+export async function fetchCategories(): Promise<Category[]> {
+  try {
+    const res = await fetch(`${API_URL}/api/categories`, { cache: 'no-store' })
+    if (!res.ok) return SEED_CATEGORIES
+    const envelope = (await res.json()) as { data: Category[] }
+    return envelope.data ?? SEED_CATEGORIES
+  } catch (err) {
+    console.error('[api] fetchCategories failed', err)
+    return SEED_CATEGORIES
+  }
+}
+
+export async function fetchOrder(orderNumber: string): Promise<Order | null> {
+  try {
+    const res = await fetch(`${API_URL}/api/orders/${encodeURIComponent(orderNumber)}`, { cache: 'no-store' })
+    if (!res.ok) return null
+    const envelope = (await res.json()) as { data: Order }
+    return envelope.data ?? null
+  } catch (err) {
+    console.error('[api] fetchOrder failed', err)
+    return null
+  }
+}
+
+export async function fetchReviews(productId: string): Promise<ReviewsListResult> {
+  try {
+    const res = await fetch(`${API_URL}/api/products/${encodeURIComponent(productId)}/reviews`, { cache: 'no-store' })
+    if (!res.ok) return { items: [], nextCursor: null }
+    const envelope = (await res.json()) as { data: ReviewsListResult }
+    return envelope.data ?? { items: [], nextCursor: null }
+  } catch (err) {
+    console.error('[api] fetchReviews failed', err)
+    return { items: [], nextCursor: null }
+  }
+}

package/scaffold/templates/nextjs/lib/client.ts

@@ -0,0 +1,23 @@
+import { createNymbalClient, type NymbalClient } from '@nymbalhq/sdk'
+
+let instance: NymbalClient | null = null
+let restoring: Promise<void> | null = null
+
+export function getNymbalClient(): NymbalClient {
+  if (!instance) {
+    instance = createNymbalClient({
+      baseUrl: process.env.NEXT_PUBLIC_NYMBAL_API_URL ?? 'http://localhost:3001',
+      tokenStorage: 'localStorage',
+    })
+  }
+  return instance
+}
+
+/**
+ * Loads the profile for a stored token once per page load, so a reload keeps a signed-in shopper signed in.
+ * The account guard awaits the same promise before deciding to redirect.
+ */
+export function restoreSession(): Promise<void> {
+  restoring ??= getNymbalClient().auth.loadProfile()
+  return restoring
+}

package/scaffold/templates/nextjs/lib/format.ts

@@ -0,0 +1,7 @@
+export function formatPrice(minor: number, currency: string): string {
+  return new Intl.NumberFormat('en-GB', { style: 'currency', currency }).format(minor / 100)
+}
+
+export function formatDate(iso: string): string {
+  return new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium' }).format(new Date(iso))
+}