create-nymbal-app 0.0.0 → 0.3.0

package/scaffold/templates/astro/src/pages/account/register.astro

@@ -0,0 +1,94 @@
+---
+import '../../styles/pages/account.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Create Account | Nymbal" description="Create a new Nymbal account.">
+  <div class="auth-page">
+    <div class="auth-card">
+      <h1 class="auth-card-title">Create Account</h1>
+      <p class="auth-card-subtitle">Join us and start shopping.</p>
+
+      <div class="checkout-error" id="register-error" style="display:none; margin-bottom: var(--nymbal-spacing-md, 1rem);" role="alert"></div>
+
+      <form id="register-form" data-testid="register-form">
+        <div class="account-form-row">
+          <div class="form-group">
+            <label for="register-firstName">First Name</label>
+            <input
+              type="text"
+              id="register-firstName"
+              name="firstName"
+              autocomplete="given-name"
+              placeholder="First name"
+              data-testid="register-firstName"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="register-lastName">Last Name</label>
+            <input
+              type="text"
+              id="register-lastName"
+              name="lastName"
+              autocomplete="family-name"
+              placeholder="Last name"
+              data-testid="register-lastName"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="register-email">Email</label>
+          <input
+            type="email"
+            id="register-email"
+            name="email"
+            required
+            autocomplete="email"
+            placeholder="you@example.com"
+            data-testid="register-email"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="register-password">Password</label>
+          <input
+            type="password"
+            id="register-password"
+            name="password"
+            required
+            autocomplete="new-password"
+            placeholder="Choose a password"
+            minlength="8"
+            data-testid="register-password"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="register-phone">Phone (optional)</label>
+          <input
+            type="tel"
+            id="register-phone"
+            name="phone"
+            autocomplete="tel"
+            placeholder="+44 7700 900000"
+            data-testid="register-phone"
+          />
+        </div>
+
+        <button type="submit" class="btn btn-primary" data-testid="register-submit">
+          Create Account
+        </button>
+      </form>
+
+      <p class="auth-footer">
+        Already have an account? <a href="/account/login">Sign in</a>
+      </p>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/auth-forms.js'
+</script>

package/scaffold/templates/astro/src/pages/cart.astro

@@ -0,0 +1,16 @@
+---
+import '../styles/pages/cart.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Your Cart | Nymbal" description="Review the items in your cart.">
+  <div class="container section" id="cart-content" data-testid="cart-page">
+    <div class="cart-empty">
+      <h1 class="cart-empty-title">Loading your cart...</h1>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../scripts/cart-page.js'
+</script>

package/scaffold/templates/astro/src/pages/category/[slug].astro

@@ -0,0 +1,73 @@
+---
+import '../../styles/pages/plp.css'
+import '../../styles/pages/home.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import Breadcrumb from '../../components/Breadcrumb.astro'
+import ProductCard from '../../components/ProductCard.astro'
+import SortDropdown from '../../components/SortDropdown.astro'
+import Pagination from '../../components/Pagination.astro'
+import { fetchProducts, fetchCategories, sortFromUrl } from '../../lib/api'
+
+const { slug } = Astro.params
+const sort = sortFromUrl(Astro.url)
+
+const [productResult, categories] = await Promise.all([
+  fetchProducts({ limit: 24, category: slug, sort }),
+  fetchCategories(),
+])
+
+const products = productResult.items
+const category = categories.find((c) => c.slug === slug)
+const categoryName = category?.name ?? slug ?? 'Category'
+const facets = productResult.facets ?? []
+---
+
+<BaseLayout
+  title={`${categoryName} | Nymbal`}
+  description={category?.description ?? `Browse ${categoryName} products.`}
+>
+  <div class="container section">
+    <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: categoryName }]} />
+
+    <div class="plp-header">
+      <h1 class="plp-title">{categoryName}</h1>
+      {category?.description && (
+        <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a); margin-bottom: var(--nymbal-spacing-sm, 0.5rem);">
+          {category.description}
+        </p>
+      )}
+      <p class="plp-count" id="product-count">{products.length} products</p>
+    </div>
+
+    <div class="plp-layout">
+      <aside class="plp-sidebar">
+        <nymbal-product-filter
+          facets={JSON.stringify(facets)}
+        ></nymbal-product-filter>
+      </aside>
+
+      <div class="plp-grid-area">
+        <SortDropdown sort={sort} />
+
+        <div class="product-grid" id="product-grid" data-category={slug}>
+          {products.map((product) => (
+            <ProductCard product={product} />
+          ))}
+        </div>
+
+        {products.length === 0 && (
+          <div class="plp-empty">
+            <h2 class="plp-empty-title">No products found</h2>
+            <p class="plp-empty-text">Check back soon for new arrivals.</p>
+          </div>
+        )}
+
+        <Pagination />
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/plp.js'
+</script>

package/scaffold/templates/astro/src/pages/checkout.astro

@@ -0,0 +1,100 @@
+---
+import '../styles/pages/checkout.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+import CheckoutSteps from '../components/CheckoutSteps.astro'
+import AddressForm from '../components/AddressForm.astro'
+---
+
+<BaseLayout title="Checkout | Nymbal" description="Complete your purchase.">
+  <div class="container section">
+    <h1 style="font-size: 1.75rem; font-weight: var(--nymbal-font-weight-bold, 700); margin-bottom: var(--nymbal-spacing-md, 1rem);">Checkout</h1>
+
+    <div id="checkout-steps-container">
+      <CheckoutSteps currentStep="contact" />
+    </div>
+
+    <div class="checkout-error" id="checkout-error" style="display:none;" data-testid="checkout-error" role="alert"></div>
+
+    <div class="checkout-layout">
+      <div class="checkout-form">
+        <!-- Contact Section -->
+        <section class="checkout-section" id="checkout-contact" data-testid="checkout-contact">
+          <h2 class="checkout-section-title">Contact Information</h2>
+          <form id="contact-form">
+            <div class="form-group">
+              <label for="contact-email">Email Address</label>
+              <input
+                type="email"
+                id="contact-email"
+                name="email"
+                required
+                autocomplete="email"
+                placeholder="you@example.com"
+                data-testid="contact-email"
+              />
+            </div>
+            <button type="submit" class="btn btn-primary" data-testid="contact-continue">
+              Continue to Shipping
+            </button>
+          </form>
+        </section>
+
+        <!-- Shipping Section -->
+        <section class="checkout-section" id="checkout-shipping" style="display:none;" data-testid="checkout-shipping">
+          <h2 class="checkout-section-title">Shipping Address</h2>
+          <form id="shipping-form">
+            <AddressForm id="shipping" />
+            <button type="submit" class="btn btn-primary" style="margin-top: var(--nymbal-spacing-md, 1rem);" data-testid="shipping-continue">
+              Continue to Payment
+            </button>
+          </form>
+        </section>
+
+        <!-- Payment Section -->
+        <section class="checkout-section" id="checkout-payment" style="display:none;" data-testid="checkout-payment">
+          <h2 class="checkout-section-title">Payment</h2>
+          <form id="payment-form" novalidate>
+            <div class="form-group">
+              <label>
+                <input type="checkbox" id="billing-same" checked />
+                Billing address same as shipping
+              </label>
+            </div>
+
+            <div id="billing-fields" style="display:none;">
+              <h3 class="checkout-section-title" style="font-size: 1rem; margin-top: var(--nymbal-spacing-md, 1rem);">Billing Address</h3>
+              <div id="billing-form">
+                <AddressForm id="billing" />
+              </div>
+            </div>
+
+            <div class="payment-section" style="margin-top: var(--nymbal-spacing-md, 1rem);">
+              <label style="margin-bottom: var(--nymbal-spacing-sm, 0.5rem);">Card Details</label>
+              <div id="stripe-card-element" style="padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem); border: 1px solid var(--nymbal-color-border, #e4e4e7); border-radius: var(--nymbal-radius-md, 0.5rem); background: var(--nymbal-color-surface, #fff); min-height: 40px;" data-testid="stripe-card-element">
+                <!-- Stripe CardElement mounts here -->
+              </div>
+            </div>
+
+            <div class="checkout-submit">
+              <button type="submit" class="btn btn-primary" data-testid="place-order">
+                Place Order
+              </button>
+              <p class="checkout-terms">
+                By placing your order, you agree to our terms and conditions.
+              </p>
+            </div>
+          </form>
+        </section>
+      </div>
+
+      <aside class="checkout-summary" id="checkout-summary" data-testid="checkout-summary">
+        <h2 class="checkout-summary-title">Order Summary</h2>
+        <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a);">Loading cart...</p>
+      </aside>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../scripts/checkout.js'
+</script>

package/scaffold/templates/astro/src/pages/fragments/footer.astro

@@ -0,0 +1,5 @@
+---
+import Footer from '../../components/Footer.astro'
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=86400, stale-while-revalidate=300')
+---
+<Footer />

package/scaffold/templates/astro/src/pages/fragments/header.astro

@@ -0,0 +1,5 @@
+---
+import Header from '../../components/Header.astro'
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=3600, stale-while-revalidate=300')
+---
+<Header />

package/scaffold/templates/astro/src/pages/fragments/nav.astro

@@ -0,0 +1,9 @@
+---
+import CategoryNav from '../../components/CategoryNav.astro'
+import { fetchCategories } from '../../lib/api'
+
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=21600, stale-while-revalidate=300')
+
+const categories = await fetchCategories()
+---
+<CategoryNav categories={categories} />

package/scaffold/templates/astro/src/pages/fragments/product/[slug].astro

@@ -0,0 +1,14 @@
+---
+import ProductCard from '../../../components/ProductCard.astro'
+import { fetchProduct } from '../../../lib/api'
+
+Astro.response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=60')
+
+const { slug } = Astro.params
+const product = await fetchProduct(slug!)
+
+if (!product) {
+  return new Response('Not found', { status: 404 })
+}
+---
+<ProductCard product={product} />

package/scaffold/templates/astro/src/pages/index.astro

@@ -0,0 +1,49 @@
+---
+import '../styles/pages/home.css'
+import BaseLayout from '../layouts/BaseLayout.astro'
+import HeroSection from '../components/HeroSection.astro'
+import CategoryNav from '../components/CategoryNav.astro'
+import ProductCard from '../components/ProductCard.astro'
+import NewsletterSignup from '../components/NewsletterSignup.astro'
+import { fetchProducts, fetchCategories } from '../lib/api'
+import { organizationJsonLd } from '../lib/seo'
+
+const [productResult, categories] = await Promise.all([
+  fetchProducts({ limit: 8 }),
+  fetchCategories(),
+])
+
+const products = productResult.items
+const jsonLd = organizationJsonLd('Nymbal', Astro.url.origin)
+---
+
+<BaseLayout title="Nymbal — Modern Storefront" jsonLd={jsonLd}>
+  <HeroSection />
+
+  <section class="section container">
+    <h2 class="section-title">Shop by Category</h2>
+    <CategoryNav categories={categories} />
+  </section>
+
+  <section class="featured-section section">
+    <div class="container">
+      <div class="featured-header">
+        <h2 class="section-title" style="margin-bottom: 0;">Featured Products</h2>
+        <a href="/products" class="featured-link">View all</a>
+      </div>
+      {products.length > 0 ? (
+        <div class="product-grid">
+          {products.map((product) => (
+            <ProductCard product={product} />
+          ))}
+        </div>
+      ) : (
+        <p style="text-align: center; color: var(--nymbal-color-text-muted, #71717a);">
+          Products coming soon.
+        </p>
+      )}
+    </div>
+  </section>
+
+  <NewsletterSignup />
+</BaseLayout>

package/scaffold/templates/astro/src/pages/order/[orderNumber].astro

@@ -0,0 +1,127 @@
+---
+import '../../styles/pages/confirmation.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import OrderSummary from '../../components/OrderSummary.astro'
+import { fetchOrder } from '../../lib/api'
+import { formatPrice } from '../../lib/format'
+import { isPaid, orderHeading } from '../../lib/order-status'
+
+const { orderNumber } = Astro.params
+const order = await fetchOrder(orderNumber!)
+
+if (!order) return Astro.redirect('/404')
+
+const lineItems = (order.lineItems ?? []).map((item) => ({
+  name: `${item.productName}${item.variantName ? ` - ${item.variantName}` : ''}`,
+  qty: item.qty,
+  priceMinor: item.unitPriceMinor,
+}))
+
+const shippingAddress = order.shippingAddress
+const heading = orderHeading(order.status)
+const paid = isPaid(order.status)
+---
+
+<BaseLayout title={`${heading} | Nymbal`} description="Your order with Nymbal.">
+  <div class="container section">
+    <div class="confirmation-page" data-order-number={order.orderNumber} data-order-status={order.status}>
+      {paid && (
+        <div class="confirmation-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </div>
+      )}
+
+      <h1 class="confirmation-title" data-testid="order-heading">{heading}</h1>
+      {paid ? (
+        <p class="confirmation-subtitle">
+          Thank you. Your order <strong data-testid="order-number">{order.orderNumber}</strong> is paid.
+          We'll send a confirmation to <strong>{order.email}</strong>.
+        </p>
+      ) : order.status === 'pending' ? (
+        <p class="confirmation-subtitle">
+          Your order <strong data-testid="order-number">{order.orderNumber}</strong> is waiting for its payment.
+          We'll email <strong>{order.email}</strong> once it arrives.
+        </p>
+      ) : (
+        <p class="confirmation-subtitle">
+          Your order <strong data-testid="order-number">{order.orderNumber}</strong> is {order.status.replace(/_/g, ' ')}.
+        </p>
+      )}
+
+      <div class="confirmation-card">
+        <h2 class="confirmation-card-title">Order Details</h2>
+
+        <dl>
+          <div class="confirmation-detail-row">
+            <dt>Order Number</dt>
+            <dd>{order.orderNumber}</dd>
+          </div>
+          <div class="confirmation-detail-row">
+            <dt>Status</dt>
+            <dd style="text-transform: capitalize;" data-testid="order-status">{order.status}</dd>
+          </div>
+        </dl>
+
+        <div class="confirmation-items">
+          {lineItems.map((item) => (
+            <div class="confirmation-item">
+              <span>
+                <span class="confirmation-item-name">{item.name}</span>
+                <span class="confirmation-item-qty"> x{item.qty}</span>
+              </span>
+              <span class="confirmation-item-price">
+                {formatPrice(item.priceMinor * item.qty, order.currency)}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div class="confirmation-totals">
+          <div class="confirmation-total-row">
+            <span>Subtotal</span>
+            <span>{formatPrice(order.subtotalMinor, order.currency)}</span>
+          </div>
+          {order.shippingTotalMinor != null && (
+            <div class="confirmation-total-row">
+              <span>Shipping</span>
+              <span>{order.shippingTotalMinor === 0 ? 'Free' : formatPrice(order.shippingTotalMinor, order.currency)}</span>
+            </div>
+          )}
+          {order.taxTotalMinor != null && (
+            <div class="confirmation-total-row">
+              <span>Tax</span>
+              <span>{formatPrice(order.taxTotalMinor, order.currency)}</span>
+            </div>
+          )}
+          <div class="confirmation-total-row grand-total">
+            <span>Total</span>
+            <span>{formatPrice(order.totalMinor, order.currency)}</span>
+          </div>
+        </div>
+      </div>
+
+      {shippingAddress && (
+        <div class="confirmation-card">
+          <h2 class="confirmation-card-title">Shipping Address</h2>
+          <p style="font-size: var(--nymbal-font-size-sm, 0.875rem); color: var(--nymbal-color-text-muted, #71717a); line-height: 1.6;">
+            {shippingAddress.addressLine1}<br />
+            {shippingAddress.addressLine2 && <>{shippingAddress.addressLine2}<br /></>}
+            {shippingAddress.city}, {shippingAddress.region} {shippingAddress.postalCode}<br />
+            {shippingAddress.country}
+          </p>
+        </div>
+      )}
+
+      <div class="confirmation-actions">
+        <a href="/account/register" class="btn btn-primary">Create an Account</a>
+        <a href="/products" class="btn btn-secondary">Continue Shopping</a>
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/order-status.js'
+</script>

package/scaffold/templates/astro/src/pages/product/[slug].astro

@@ -0,0 +1,107 @@
+---
+import '../../styles/pages/pdp.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import Breadcrumb from '../../components/Breadcrumb.astro'
+import ImageGallery from '../../components/ImageGallery.astro'
+import PriceDisplay from '../../components/PriceDisplay.astro'
+import StockBadge from '../../components/StockBadge.astro'
+import ReviewList from '../../components/ReviewList.astro'
+import ReviewForm from '../../components/ReviewForm.astro'
+import RelatedProducts from '../../components/RelatedProducts.astro'
+import { fetchProduct, fetchReviews, fetchProducts } from '../../lib/api'
+import { productJsonLd, breadcrumbJsonLd } from '../../lib/seo'
+
+const { slug } = Astro.params
+
+const product = await fetchProduct(slug!)
+if (!product) return Astro.redirect('/404')
+
+const [reviewsResult, relatedResult] = await Promise.all([
+  fetchReviews(product.id),
+  fetchProducts({
+    limit: 4,
+    category: product.categoryIds?.[0] ?? undefined,
+  }),
+])
+
+const reviews = reviewsResult.items ?? []
+const relatedProducts = (relatedResult.items ?? []).filter((p) => p.id !== product.id).slice(0, 4)
+
+const images = Array.isArray(product.media) && product.media.length > 0
+  ? product.media.map((m: any) => ({
+      url: typeof m === 'string' ? m : m.url,
+      alt: typeof m === 'string' ? product.name : (m.alt ?? product.name),
+    }))
+  : [{ url: `https://picsum.photos/seed/${product.slug}/600/600`, alt: product.name }]
+
+const defaultVariant = product.variants?.[0]
+const stock = defaultVariant?.stock ?? (product.inStock ? 10 : 0)
+
+const jsonLd = productJsonLd(product, Astro.url.origin)
+const breadcrumb = breadcrumbJsonLd([
+  { name: 'Home', url: Astro.url.origin },
+  { name: 'Products', url: `${Astro.url.origin}/products` },
+  { name: product.name, url: `${Astro.url.origin}/product/${product.slug}` },
+])
+
+// The selector derives its option groups from the product's variants.
+const hasVariantChoice = (product.variants?.length ?? 0) > 1
+---
+
+<BaseLayout title={`${product.name} | Nymbal`} description={product.shortDescription ?? product.description ?? ''} jsonLd={jsonLd}>
+  <div class="container section" data-product-slug={product.slug}>
+    <Breadcrumb
+      items={[
+        { label: 'Home', href: '/' },
+        { label: 'Products', href: '/products' },
+        { label: product.name },
+      ]}
+    />
+
+    <div class="pdp-layout">
+      <ImageGallery images={images} />
+
+      <div class="pdp-info">
+        <h1 class="pdp-title" data-testid="product-title">{product.name}</h1>
+
+        <PriceDisplay
+          priceMinor={defaultVariant?.priceMinor ?? product.priceMinor}
+          currency={product.currency ?? 'GBP'}
+        />
+
+        <StockBadge stock={stock} />
+
+        <div class="pdp-actions">
+          {hasVariantChoice && (
+            <nymbal-variant-selector></nymbal-variant-selector>
+          )}
+
+          <div class="pdp-add-row">
+            <nymbal-quantity-selector value="1" min="1" max="99"></nymbal-quantity-selector>
+            <nymbal-add-to-cart
+              variant-id={defaultVariant?.id ?? product.id}
+            ></nymbal-add-to-cart>
+          </div>
+        </div>
+
+        {product.description && (
+          <div class="pdp-description" data-testid="product-description">
+            <Fragment set:html={product.description} />
+          </div>
+        )}
+      </div>
+    </div>
+
+    <section class="pdp-reviews">
+      <h2 class="pdp-reviews-title">Customer Reviews</h2>
+      <ReviewList reviews={reviews} />
+      <ReviewForm productId={product.id} />
+    </section>
+
+    <RelatedProducts products={relatedProducts} />
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/pdp.js'
+</script>

package/scaffold/templates/astro/src/pages/products/index.astro

@@ -0,0 +1,62 @@
+---
+import '../../styles/pages/plp.css'
+import '../../styles/pages/home.css'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import Breadcrumb from '../../components/Breadcrumb.astro'
+import ProductCard from '../../components/ProductCard.astro'
+import SortDropdown from '../../components/SortDropdown.astro'
+import Pagination from '../../components/Pagination.astro'
+import { fetchProducts, fetchCategories, sortFromUrl } from '../../lib/api'
+
+const sort = sortFromUrl(Astro.url)
+
+const [productResult, categories] = await Promise.all([
+  fetchProducts({ limit: 24, sort }),
+  fetchCategories(),
+])
+
+const products = productResult.items
+const facets = productResult.facets ?? []
+---
+
+<BaseLayout title="All Products | Nymbal" description="Browse our full product collection.">
+  <div class="container section">
+    <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Products' }]} />
+
+    <div class="plp-header">
+      <h1 class="plp-title">All Products</h1>
+      <p class="plp-count" id="product-count">{products.length} products</p>
+    </div>
+
+    <div class="plp-layout">
+      <aside class="plp-sidebar">
+        <nymbal-product-filter
+          facets={JSON.stringify(facets)}
+        ></nymbal-product-filter>
+      </aside>
+
+      <div class="plp-grid-area">
+        <SortDropdown sort={sort} />
+
+        <div class="product-grid" id="product-grid">
+          {products.map((product) => (
+            <ProductCard product={product} />
+          ))}
+        </div>
+
+        {products.length === 0 && (
+          <div class="plp-empty">
+            <h2 class="plp-empty-title">No products found</h2>
+            <p class="plp-empty-text">Try adjusting your filters.</p>
+          </div>
+        )}
+
+        <Pagination />
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script>
+  import '../../scripts/plp.js'
+</script>