create-nymbal-app 0.4.0 → 0.5.0

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

@@ -1,198 +0,0 @@
----
-import { fetchCapabilities } from '../lib/api'
-
-const capabilities = await fetchCapabilities()
-const canSearch = capabilities?.search.capabilities.includes('search') ?? false
----
-<header class="site-header" data-testid="site-header">
-  <div class="header-container container">
-    <a href="/" class="header-logo">Nymbal</a>
-
-    <label class="hamburger" for="nav-toggle" aria-label="Toggle navigation">
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-      <span class="hamburger-line"></span>
-    </label>
-    <input type="checkbox" id="nav-toggle" class="nav-toggle visually-hidden" aria-label="Toggle navigation" />
-
-    <div class="header-nav-wrapper">
-      <nav class="header-nav" aria-label="Main navigation">
-        <a href="/category/apparel" class="nav-link">Apparel</a>
-        <a href="/category/home" class="nav-link">Home</a>
-        <a href="/category/electronics" class="nav-link">Electronics</a>
-        <a href="/category/books" class="nav-link">Books</a>
-        <a href="/products" class="nav-link">All Products</a>
-      </nav>
-
-      <div class="header-actions">
-        {canSearch && (
-          <nymbal-search-bar placeholder="Search products..." debounce-ms="300"></nymbal-search-bar>
-        )}
-        <a href="/account" class="header-account-link" aria-label="Account">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
-        </a>
-        <nymbal-mini-cart></nymbal-mini-cart>
-      </div>
-    </div>
-  </div>
-</header>
-
-<style>
-  .site-header {
-    position: sticky;
-    top: 0;
-    z-index: var(--nymbal-z-index-sticky, 100);
-    background-color: var(--nymbal-color-surface, #fff);
-    border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
-  }
-
-  .header-container {
-    display: flex;
-    align-items: center;
-    gap: var(--nymbal-spacing-md, 1rem);
-    padding-block: var(--nymbal-spacing-sm, 0.5rem);
-    flex-wrap: wrap;
-  }
-
-  .header-logo {
-    font-size: var(--nymbal-font-size-lg, 1.125rem);
-    font-weight: var(--nymbal-font-weight-bold, 700);
-    color: var(--nymbal-color-primary, #18181b);
-    text-decoration: none;
-    letter-spacing: -0.02em;
-    flex-shrink: 0;
-  }
-
-  .header-logo:hover {
-    color: var(--nymbal-color-accent, #2563eb);
-  }
-
-  /* Hamburger toggle */
-  .hamburger {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    width: 28px;
-    height: 28px;
-    cursor: pointer;
-    margin-left: auto;
-    padding: 2px;
-  }
-
-  .hamburger-line {
-    display: block;
-    width: 100%;
-    height: 2px;
-    background-color: var(--nymbal-color-primary, #18181b);
-    border-radius: 1px;
-    transition: transform var(--nymbal-transition-fast, 150ms) ease,
-      opacity var(--nymbal-transition-fast, 150ms) ease;
-  }
-
-  .nav-toggle:checked ~ .header-nav-wrapper {
-    display: flex;
-  }
-
-  .nav-toggle:checked ~ .hamburger .hamburger-line:nth-child(1) {
-    transform: translateY(6px) rotate(45deg);
-  }
-
-  .nav-toggle:checked ~ .hamburger .hamburger-line:nth-child(2) {
-    opacity: 0;
-  }
-
-  .nav-toggle:checked ~ .hamburger .hamburger-line:nth-child(3) {
-    transform: translateY(-6px) rotate(-45deg);
-  }
-
-  .header-nav-wrapper {
-    display: none;
-    flex-direction: column;
-    width: 100%;
-    gap: var(--nymbal-spacing-md, 1rem);
-    padding-block: var(--nymbal-spacing-sm, 0.5rem);
-  }
-
-  .header-nav {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nymbal-spacing-xs, 0.25rem);
-  }
-
-  .nav-link {
-    display: block;
-    padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-sm, 0.5rem);
-    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-sm, 0.25rem);
-    transition: background-color var(--nymbal-transition-fast, 150ms) ease,
-      color var(--nymbal-transition-fast, 150ms) ease;
-  }
-
-  .nav-link:hover {
-    background-color: var(--nymbal-color-border, #e4e4e7);
-    color: var(--nymbal-color-accent, #2563eb);
-  }
-
-  .header-actions {
-    display: flex;
-    align-items: center;
-    gap: var(--nymbal-spacing-sm, 0.5rem);
-  }
-
-  .header-account-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    color: var(--nymbal-color-text, #18181b);
-    text-decoration: none;
-    border-radius: var(--nymbal-radius-full, 9999px);
-    transition: background-color var(--nymbal-transition-fast, 150ms) ease,
-      color var(--nymbal-transition-fast, 150ms) ease;
-  }
-
-  .header-account-link:hover {
-    background-color: var(--nymbal-color-border, #e4e4e7);
-    color: var(--nymbal-color-accent, #2563eb);
-  }
-
-  /* Desktop layout */
-  @media (min-width: 769px) {
-    .hamburger {
-      display: none;
-    }
-
-    .header-container {
-      flex-wrap: nowrap;
-      padding-block: var(--nymbal-spacing-md, 1rem);
-    }
-
-    .header-nav-wrapper {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      width: auto;
-      flex: 1;
-      padding-block: 0;
-      gap: var(--nymbal-spacing-lg, 1.5rem);
-    }
-
-    .header-nav {
-      flex-direction: row;
-      gap: var(--nymbal-spacing-xs, 0.25rem);
-    }
-
-    .nav-link {
-      padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-sm, 0.5rem);
-    }
-  }
-</style>

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

@@ -1,42 +0,0 @@
----
-import '../styles/pages/pdp.css'
-
-interface Props {
-  images: Array<{ url: string; alt: string }>
-}
-
-const { images } = Astro.props
-const mainImage = images[0] ?? { url: 'https://picsum.photos/seed/placeholder/600/600', alt: 'Product image' }
----
-
-<div class="pdp-gallery" data-testid="product-gallery">
-  <img
-    src={mainImage.url}
-    alt={mainImage.alt}
-    class="pdp-main-image"
-    id="gallery-main-image"
-    width="600"
-    height="600"
-  />
-  {images.length > 1 && (
-    <div class="pdp-thumbnails" id="gallery-thumbnails">
-      {images.map((img, i) => (
-        <img
-          src={img.url}
-          alt={img.alt}
-          class={`pdp-thumbnail ${i === 0 ? 'active' : ''}`}
-          data-index={i}
-          data-url={img.url}
-          data-alt={img.alt}
-          width="80"
-          height="80"
-          loading="lazy"
-        />
-      ))}
-    </div>
-  )}
-</div>
-
-<script>
-  import '../scripts/image-gallery.js'
-</script>

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

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

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

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

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

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

@@ -1,74 +0,0 @@
----
-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 '../scripts/review-form.js'
-</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

@@ -1,41 +0,0 @@
----
-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/StockBadge.astro

@@ -1,15 +0,0 @@
----
-import { STOCK_LABELS, stockLevel } from '@nymbalhq/types'
-
-interface Props {
-  stock: number
-}
-
-const { stock } = Astro.props
-const level = stockLevel(stock)
----
-
-<span class="pdp-stock" data-testid="stock-badge" data-level={level}>
-  <span class="pdp-stock-dot" aria-hidden="true"></span>
-  <span data-stock-label>{STOCK_LABELS[level]}</span>
-</span>

package/scaffold/templates/astro/src/scripts/auth-forms.ts

@@ -1,82 +0,0 @@
-import { client } from '../lib/client.js'
-import { submitOnce } from '../lib/submit-once.js'
-
-function getRedirectUrl(): string {
-  const params = new URLSearchParams(window.location.search)
-  return params.get('redirect') ?? '/account'
-}
-
-function showFormError(formId: string, message: string) {
-  const errorEl = document.getElementById(`${formId}-error`)
-  if (errorEl) {
-    errorEl.textContent = message
-    errorEl.style.display = 'block'
-  }
-}
-
-function hideFormError(formId: string) {
-  const errorEl = document.getElementById(`${formId}-error`)
-  if (errorEl) {
-    errorEl.style.display = 'none'
-    errorEl.textContent = ''
-  }
-}
-
-// Login form handler
-const loginForm = document.getElementById('login-form') as HTMLFormElement | null
-submitOnce(loginForm, async () => {
-  hideFormError('login')
-
-  const email = (document.getElementById('login-email') as HTMLInputElement)?.value
-  const password = (document.getElementById('login-password') as HTMLInputElement)?.value
-
-  if (!email || !password) {
-    showFormError('login', 'Please enter your email and password.')
-    return
-  }
-
-  const submitBtn = loginForm?.querySelector(
-    '[data-testid="login-submit"]',
-  ) as HTMLButtonElement | null
-  if (submitBtn) submitBtn.textContent = 'Signing in...'
-
-  try {
-    await client.auth.login(email, password)
-    window.location.href = getRedirectUrl()
-    return 'leaving'
-  } catch (err: any) {
-    showFormError('login', err.message ?? 'Invalid email or password.')
-    if (submitBtn) submitBtn.textContent = 'Sign In'
-  }
-})
-
-// Register form handler
-const registerForm = document.getElementById('register-form') as HTMLFormElement | null
-submitOnce(registerForm, async () => {
-  hideFormError('register')
-
-  const email = (document.getElementById('register-email') as HTMLInputElement)?.value
-  const password = (document.getElementById('register-password') as HTMLInputElement)?.value
-  const firstName = (document.getElementById('register-firstName') as HTMLInputElement)?.value
-  const lastName = (document.getElementById('register-lastName') as HTMLInputElement)?.value
-  const phone = (document.getElementById('register-phone') as HTMLInputElement)?.value
-
-  if (!email || !password) {
-    showFormError('register', 'Please enter your email and password.')
-    return
-  }
-
-  const submitBtn = registerForm?.querySelector(
-    '[data-testid="register-submit"]',
-  ) as HTMLButtonElement | null
-  if (submitBtn) submitBtn.textContent = 'Creating account...'
-
-  try {
-    await client.auth.register({ email, password, firstName, lastName, phone })
-    window.location.href = getRedirectUrl()
-    return 'leaving'
-  } catch (err: any) {
-    showFormError('register', err.message ?? 'Registration failed. Please try again.')
-    if (submitBtn) submitBtn.textContent = 'Create Account'
-  }
-})