create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/astro/src/components/OrderSummary.astro

@@ -0,0 +1,53 @@
+---
+import { formatPrice } from '../lib/format'
+
+interface Props {
+  items: Array<{ name: string; qty: number; priceMinor: number }>
+  subtotalMinor: number
+  currency: string
+  shippingMinor?: number
+  taxMinor?: number
+  totalMinor?: number
+}
+
+const { items, subtotalMinor, currency, shippingMinor, taxMinor, totalMinor } = Astro.props
+const computedTotal = totalMinor ?? subtotalMinor + (shippingMinor ?? 0) + (taxMinor ?? 0)
+---
+
+<div class="order-summary" data-testid="order-summary">
+  <div class="checkout-summary-items">
+    {items.map((item) => (
+      <div class="checkout-summary-item">
+        <span class="checkout-summary-item-name">{item.name}</span>
+        <span class="checkout-summary-item-qty">x{item.qty}</span>
+        <span class="checkout-summary-item-price">
+          {formatPrice(item.priceMinor * item.qty, currency)}
+        </span>
+      </div>
+    ))}
+  </div>
+
+  <dl>
+    <div class="checkout-summary-row">
+      <dt>Subtotal</dt>
+      <dd>{formatPrice(subtotalMinor, currency)}</dd>
+    </div>
+    {shippingMinor != null && (
+      <div class="checkout-summary-row">
+        <dt>Shipping</dt>
+        <dd>{shippingMinor === 0 ? 'Free' : formatPrice(shippingMinor, currency)}</dd>
+      </div>
+    )}
+    {taxMinor != null && (
+      <div class="checkout-summary-row">
+        <dt>Tax</dt>
+        <dd>{formatPrice(taxMinor, currency)}</dd>
+      </div>
+    )}
+  </dl>
+
+  <div class="checkout-summary-total">
+    <span>Total</span>
+    <span>{formatPrice(computedTotal, currency)}</span>
+  </div>
+</div>

package/scaffold/templates/astro/src/components/Pagination.astro

@@ -0,0 +1,13 @@
+---
+---
+
+<div class="plp-pagination">
+  <button
+    type="button"
+    class="btn btn-secondary"
+    id="load-more-btn"
+    data-testid="load-more"
+  >
+    Load More
+  </button>
+</div>

package/scaffold/templates/astro/src/components/PriceDisplay.astro

@@ -0,0 +1,25 @@
+---
+import { formatPrice } from '../lib/format'
+
+interface Props {
+  priceMinor: number
+  currency: string
+  compareAtMinor?: number
+}
+
+const { priceMinor, currency, compareAtMinor } = Astro.props
+const price = formatPrice(priceMinor, currency)
+const comparePrice = compareAtMinor ? formatPrice(compareAtMinor, currency) : null
+const isOnSale = compareAtMinor != null && compareAtMinor > priceMinor
+---
+
+<div class="pdp-price" data-testid="product-price">
+  {isOnSale && comparePrice && (
+    <span
+      style="text-decoration: line-through; color: var(--nymbal-color-text-muted, #71717a); font-weight: var(--nymbal-font-weight-normal, 400); margin-right: var(--nymbal-spacing-sm, 0.5rem);"
+    >
+      {comparePrice}
+    </span>
+  )}
+  <span>{price}</span>
+</div>

package/scaffold/templates/astro/src/components/ProductCard.astro

@@ -0,0 +1,44 @@
+---
+import { formatPrice } from '../lib/format'
+
+interface Props {
+  product: {
+    slug: string
+    name: string
+    priceMinor: number | null
+    priceRange?: { minMinor: number } | null
+    currency: string | null
+    media: any
+    imageUrl?: string
+  }
+}
+
+const { product } = Astro.props
+const imageUrl =
+  product.imageUrl ??
+  (Array.isArray(product.media) && product.media[0]?.url) ??
+  `https://picsum.photos/seed/${product.slug}/600/600`
+// The "from" price, which the price sorts order by.
+const fromMinor = product.priceRange?.minMinor ?? product.priceMinor
+const price =
+  fromMinor != null ? formatPrice(fromMinor, product.currency ?? 'GBP') : ''
+---
+
+<a
+  href={`/product/${product.slug}`}
+  class="product-card"
+  data-testid={`product-card-${product.slug}`}
+>
+  <img
+    src={imageUrl}
+    alt={product.name}
+    class="product-card-image"
+    loading="lazy"
+    width="600"
+    height="600"
+  />
+  <div class="product-card-body">
+    <span class="product-card-name">{product.name}</span>
+    {price && <span class="product-card-price">{price}</span>}
+  </div>
+</a>

package/scaffold/templates/astro/src/components/RelatedProducts.astro

@@ -0,0 +1,28 @@
+---
+import ProductCard from './ProductCard.astro'
+
+interface Props {
+  products: Array<{
+    slug: string
+    name: string
+    priceMinor: number | null
+    currency: string | null
+    media: any
+    imageUrl?: string
+  }>
+}
+
+const { products } = Astro.props
+const displayProducts = products.slice(0, 4)
+---
+
+{displayProducts.length > 0 && (
+  <section class="section" data-testid="related-products">
+    <h2 class="section-title">You may also like</h2>
+    <div class="product-grid">
+      {displayProducts.map((product) => (
+        <ProductCard product={product} />
+      ))}
+    </div>
+  </section>
+)}

package/scaffold/templates/astro/src/components/ReviewForm.astro

@@ -0,0 +1,100 @@
+---
+interface Props {
+  productId: string
+}
+
+const { productId } = Astro.props
+---
+
+<form
+  class="review-form"
+  id="review-form"
+  data-product-id={productId}
+  data-testid="review-form"
+>
+  <h3 style="font-size: 1.125rem; font-weight: var(--nymbal-font-weight-bold, 700); margin-bottom: var(--nymbal-spacing-md, 1rem);">
+    Write a Review
+  </h3>
+
+  <div class="form-group">
+    <label for="review-rating">Rating</label>
+    <select id="review-rating" name="rating" required data-testid="review-rating">
+      <option value="">Select a rating</option>
+      <option value="5">5 - Excellent</option>
+      <option value="4">4 - Very Good</option>
+      <option value="3">3 - Good</option>
+      <option value="2">2 - Fair</option>
+      <option value="1">1 - Poor</option>
+    </select>
+  </div>
+
+  <div class="form-group">
+    <label for="review-title">Title</label>
+    <input
+      type="text"
+      id="review-title"
+      name="title"
+      placeholder="Summarise your experience"
+      required
+      data-testid="review-title"
+    />
+  </div>
+
+  <div class="form-group">
+    <label for="review-body">Review</label>
+    <textarea
+      id="review-body"
+      name="body"
+      rows="4"
+      placeholder="Tell us what you think..."
+      required
+      data-testid="review-body"
+      style="resize: vertical;"
+    ></textarea>
+  </div>
+
+  <button type="submit" class="btn btn-primary" data-testid="review-submit">
+    Submit Review
+  </button>
+
+  <p class="review-form-message" id="review-form-message" style="display:none; margin-top: var(--nymbal-spacing-md, 1rem); font-size: var(--nymbal-font-size-sm, 0.875rem);"></p>
+</form>
+
+<script>
+  import { client } from '../lib/client.js'
+
+  const form = document.getElementById('review-form') as HTMLFormElement | null
+  const messageEl = document.getElementById('review-form-message')
+
+  form?.addEventListener('submit', async (e) => {
+    e.preventDefault()
+    if (!form || !messageEl) return
+
+    const productId = form.dataset.productId ?? ''
+    const formData = new FormData(form)
+    const rating = Number(formData.get('rating'))
+    const title = String(formData.get('title'))
+    const body = String(formData.get('body'))
+
+    try {
+      await client.adapter.reviews.submit({ productId, rating, title, body })
+      messageEl.textContent = 'Thank you for your review!'
+      messageEl.style.display = 'block'
+      messageEl.style.color = 'var(--nymbal-color-success, #16a34a)'
+      form.reset()
+    } catch {
+      messageEl.textContent = 'Something went wrong. Please try again.'
+      messageEl.style.display = 'block'
+      messageEl.style.color = 'var(--nymbal-color-error, #dc2626)'
+    }
+  })
+</script>
+
+<style>
+  .review-form {
+    margin-top: var(--nymbal-spacing-xl, 2rem);
+    padding-top: var(--nymbal-spacing-xl, 2rem);
+    border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+    max-width: 32rem;
+  }
+</style>

package/scaffold/templates/astro/src/components/ReviewList.astro

@@ -0,0 +1,41 @@
+---
+import '../styles/pages/pdp.css'
+import { formatDate } from '../lib/format'
+
+interface Props {
+  reviews: Array<{
+    id: string
+    rating: number
+    title: string
+    body: string
+    submittedAt: string
+  }>
+}
+
+const { reviews } = Astro.props
+
+function renderStars(rating: number): string {
+  const filled = '★'
+  const empty = '☆'
+  return filled.repeat(rating) + empty.repeat(5 - rating)
+}
+---
+
+{reviews.length > 0 ? (
+  <div class="review-list" data-testid="review-list">
+    {reviews.map((review) => (
+      <div class="review-item" data-testid={`review-${review.id}`}>
+        <div class="review-header">
+          <span class="review-rating" aria-label={`${review.rating} out of 5 stars`}>
+            {renderStars(review.rating)}
+          </span>
+          <span class="review-date">{formatDate(review.submittedAt)}</span>
+        </div>
+        <h4 class="review-title">{review.title}</h4>
+        <p class="review-body">{review.body}</p>
+      </div>
+    ))}
+  </div>
+) : (
+  <p class="reviews-empty">No reviews yet. Be the first to review this product.</p>
+)}

package/scaffold/templates/astro/src/components/SkipNav.astro

@@ -0,0 +1,3 @@
+---
+---
+<a href="#main" class="skip-nav">Skip to main content</a>

package/scaffold/templates/astro/src/components/SortDropdown.astro

@@ -0,0 +1,26 @@
+---
+import type { ProductSortKey } from '@nymbalhq/types'
+
+interface Props {
+  sort: ProductSortKey
+}
+
+const { sort } = Astro.props
+
+const OPTIONS: Array<{ value: ProductSortKey; label: string }> = [
+  { value: 'newest', label: 'Newest' },
+  { value: 'price-asc', label: 'Price: Low to High' },
+  { value: 'price-desc', label: 'Price: High to Low' },
+  { value: 'name-asc', label: 'Name: A to Z' },
+  { value: 'name-desc', label: 'Name: Z to A' },
+]
+---
+
+<div class="plp-sort-bar">
+  <label for="sort-select">Sort by</label>
+  <select id="sort-select" data-testid="sort-dropdown">
+    {OPTIONS.map((option) => (
+      <option value={option.value} selected={option.value === sort}>{option.label}</option>
+    ))}
+  </select>
+</div>

package/scaffold/templates/astro/src/components/StockBadge.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+  stock: number
+}
+
+const { stock } = Astro.props
+
+let statusClass: string
+let label: string
+
+if (stock <= 0) {
+  statusClass = 'out-of-stock'
+  label = 'Out of Stock'
+} else if (stock < 5) {
+  statusClass = 'low-stock'
+  label = 'Low Stock'
+} else {
+  statusClass = 'in-stock'
+  label = 'In Stock'
+}
+---
+
+<span class={`pdp-stock ${statusClass}`} data-testid="stock-badge">
+  <span class="pdp-stock-dot" aria-hidden="true"></span>
+  {label}
+</span>
+
+<style>
+  .low-stock {
+    color: var(--nymbal-color-warning, #d97706);
+  }
+</style>

package/scaffold/templates/astro/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

package/scaffold/templates/astro/src/layouts/AccountLayout.astro

@@ -0,0 +1,168 @@
+---
+import BaseLayout from './BaseLayout.astro'
+
+interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+<BaseLayout title={`${title} | Nymbal`} description="Manage your Nymbal account">
+  <div class="account-layout container section">
+    <!-- Loading state shown while auth check runs -->
+    <div class="account-loading" id="account-loading">
+      <p>Checking authentication...</p>
+    </div>
+
+    <!-- Actual content, hidden until auth check passes -->
+    <div class="account-content" id="account-content" style="display:none;">
+      <aside class="account-sidebar">
+        <nav class="account-nav" aria-label="Account navigation">
+          <a href="/account" class="account-nav-link">Dashboard</a>
+          <a href="/account/orders" class="account-nav-link">Orders</a>
+          <a href="/account/addresses" class="account-nav-link">Addresses</a>
+          <a href="/account/profile" class="account-nav-link">Profile</a>
+          <button type="button" class="account-nav-link account-logout-btn" id="logout-btn">
+            Logout
+          </button>
+        </nav>
+      </aside>
+
+      <div class="account-main">
+        <slot />
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import { client } from '../lib/client.js'
+
+  async function guardAuth() {
+    const loadingEl = document.getElementById('account-loading')
+    const contentEl = document.getElementById('account-content')
+
+    let state = client.auth.getState()
+
+    if (!state.isAuthenticated) {
+      try {
+        await client.auth.loadProfile()
+        state = client.auth.getState()
+      } catch {
+        // ignore — will redirect below
+      }
+    }
+
+    if (!state.isAuthenticated) {
+      const redirect = encodeURIComponent(window.location.pathname + window.location.search)
+      window.location.href = `/account/login?redirect=${redirect}`
+      return
+    }
+
+    if (loadingEl) loadingEl.style.display = 'none'
+    if (contentEl) contentEl.style.display = ''
+  }
+
+  guardAuth()
+
+  // Logout handler
+  const logoutBtn = document.getElementById('logout-btn')
+  if (logoutBtn) {
+    logoutBtn.addEventListener('click', async () => {
+      await client.auth.logout()
+      window.location.href = '/account/login'
+    })
+  }
+</script>
+
+<style>
+  .account-layout {
+    min-height: 60vh;
+  }
+
+  .account-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 40vh;
+    color: var(--nymbal-color-text-muted, #71717a);
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+  }
+
+  .account-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--nymbal-spacing-xl, 2rem);
+  }
+
+  @media (min-width: 769px) {
+    .account-content {
+      grid-template-columns: 220px 1fr;
+    }
+  }
+
+  .account-sidebar {
+    border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+    padding-bottom: var(--nymbal-spacing-md, 1rem);
+  }
+
+  @media (min-width: 769px) {
+    .account-sidebar {
+      border-bottom: none;
+      border-right: 1px solid var(--nymbal-color-border, #e4e4e7);
+      padding-bottom: 0;
+      padding-right: var(--nymbal-spacing-xl, 2rem);
+    }
+  }
+
+  .account-nav {
+    display: flex;
+    gap: var(--nymbal-spacing-xs, 0.25rem);
+    overflow-x: auto;
+  }
+
+  @media (min-width: 769px) {
+    .account-nav {
+      flex-direction: column;
+      overflow-x: visible;
+    }
+  }
+
+  .account-nav-link {
+    display: block;
+    padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    font-weight: var(--nymbal-font-weight-medium, 500);
+    color: var(--nymbal-color-text, #18181b);
+    text-decoration: none;
+    border-radius: var(--nymbal-radius-md, 0.5rem);
+    white-space: nowrap;
+    transition: background-color var(--nymbal-transition-fast, 150ms) ease,
+      color var(--nymbal-transition-fast, 150ms) ease;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+    width: 100%;
+  }
+
+  .account-nav-link:hover {
+    background-color: var(--nymbal-color-border, #e4e4e7);
+    color: var(--nymbal-color-accent, #2563eb);
+  }
+
+  .account-logout-btn {
+    color: var(--nymbal-color-error, #dc2626);
+    margin-top: var(--nymbal-spacing-sm, 0.5rem);
+  }
+
+  .account-logout-btn:hover {
+    background-color: rgba(220, 38, 38, 0.08);
+    color: var(--nymbal-color-error, #dc2626);
+  }
+
+  .account-main {
+    min-width: 0;
+  }
+</style>

package/scaffold/templates/astro/src/layouts/BaseLayout.astro

@@ -0,0 +1,55 @@
+---
+import '../styles/global.css'
+import SkipNav from '../components/SkipNav.astro'
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
+
+interface Props {
+  title: string
+  description?: string
+  ogImage?: string
+  jsonLd?: Record<string, unknown>
+}
+
+const { title, description = 'Shop the Nymbal store', ogImage, jsonLd } = Astro.props
+const canonicalUrl = Astro.url.href
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonicalUrl} />
+
+    <!-- Open Graph -->
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalUrl} />
+    {ogImage && <meta property="og:image" content={ogImage} />}
+
+    <!-- JSON-LD structured data -->
+    {jsonLd && (
+      <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+    )}
+  </head>
+  <body>
+    <SkipNav />
+    <Header />
+    <main id="main">
+      <slot />
+    </main>
+    <Footer />
+
+    <!-- Web component overlays (rendered outside main flow) -->
+    <nymbal-cart-drawer></nymbal-cart-drawer>
+    <nymbal-toast></nymbal-toast>
+
+    <!-- Initialise SDK + web components on the client -->
+    <script>
+      import '../scripts/init-client.js'
+    </script>
+  </body>
+</html>

package/scaffold/templates/astro/src/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 = import.meta.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())
+    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 sortFromUrl(url: URL): ProductSortKey {
+  const sort = url.searchParams.get('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)}`)
+    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`)
+    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)}`)
+    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`)
+    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 }
+  }
+}