create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/astro/_dot.gitignore

@@ -0,0 +1,16 @@
+node_modules/
+dist/
+build/
+.astro/
+.next/
+coverage/
+*.log
+.DS_Store
+.env
+.env.local
+.env.*.local
+*.tsbuildinfo
+nymbal.db
+nymbal.db-journal
+nymbal.db-shm
+nymbal.db-wal

package/scaffold/templates/astro/_dot.node-version

@@ -0,0 +1 @@
+22.23.3

package/scaffold/templates/astro/_dot.npmrc

@@ -0,0 +1 @@
+engine-strict=true

package/scaffold/templates/astro/astro.config.mjs

@@ -0,0 +1,14 @@
+import { defineConfig } from 'astro/config'
+import node from '@astrojs/node'
+
+// NYMBAL_STOREFRONT_PORT lets `nymbal dev` (and a developer) pick a free port
+// when the default 4321 is taken by another project. The `astro dev --port`
+// flag still overrides this, so `nymbal dev` (which passes --port explicitly)
+// always wins; this default just keeps a bare `pnpm dev` from hard-binding 4321.
+const port = Number(process.env.NYMBAL_STOREFRONT_PORT) || 4321
+
+export default defineConfig({
+  output: 'server',
+  adapter: node({ mode: 'standalone' }),
+  server: { port },
+})

package/scaffold/templates/astro/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@nymbalhq/template-astro",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A Nymbal commerce project",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "typecheck": "astro check",
+    "migrate": "nymbal migrate",
+    "seed": "nymbal seed"
+  },
+  "dependencies": {
+    "nymbal": "0.2.0",
+    "@nymbalhq/config": "0.2.0",
+    "@nymbalhq/platform": "0.2.0",
+    "@nymbalhq/stack": "0.2.0",
+    "@astrojs/node": "^11.1.8",
+    "@nymbalhq/sdk": "0.2.0",
+    "@nymbalhq/types": "0.2.0",
+    "@nymbalhq/web-components": "0.2.0",
+    "@stripe/stripe-js": "^4.0.0",
+    "astro": "^7.4.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.10",
+    "typescript": "^5.6.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "nymbal": "0.2.0",
+      "@nymbalhq/config": "0.2.0",
+      "@nymbalhq/http": "0.2.0",
+      "@nymbalhq/platform": "0.2.0",
+      "@nymbalhq/react": "0.2.0",
+      "@nymbalhq/sdk": "0.2.0",
+      "@nymbalhq/stack": "0.2.0",
+      "@nymbalhq/types": "0.2.0",
+      "@nymbalhq/web-components": "0.2.0"
+    }
+  },
+  "overrides": {
+    "nymbal": "0.2.0",
+    "@nymbalhq/config": "0.2.0",
+    "@nymbalhq/http": "0.2.0",
+    "@nymbalhq/platform": "0.2.0",
+    "@nymbalhq/react": "0.2.0",
+    "@nymbalhq/sdk": "0.2.0",
+    "@nymbalhq/stack": "0.2.0",
+    "@nymbalhq/types": "0.2.0",
+    "@nymbalhq/web-components": "0.2.0"
+  }
+}

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

@@ -0,0 +1,107 @@
+---
+import '../styles/pages/checkout.css'
+
+interface Props {
+  id: string
+}
+
+const { id } = Astro.props
+---
+
+<div class="address-grid" data-testid={`${id}-form`}>
+  <div class="form-group">
+    <label for={`${id}-firstName`}>First Name</label>
+    <input
+      type="text"
+      id={`${id}-firstName`}
+      name="firstName"
+      required
+      autocomplete="given-name"
+      data-testid={`${id}-firstName`}
+    />
+  </div>
+
+  <div class="form-group">
+    <label for={`${id}-lastName`}>Last Name</label>
+    <input
+      type="text"
+      id={`${id}-lastName`}
+      name="lastName"
+      required
+      autocomplete="family-name"
+      data-testid={`${id}-lastName`}
+    />
+  </div>
+
+  <div class="form-group full-width">
+    <label for={`${id}-addressLine1`}>Address Line 1</label>
+    <input
+      type="text"
+      id={`${id}-addressLine1`}
+      name="addressLine1"
+      required
+      autocomplete="address-line1"
+      data-testid={`${id}-addressLine1`}
+    />
+  </div>
+
+  <div class="form-group full-width">
+    <label for={`${id}-addressLine2`}>Address Line 2 (optional)</label>
+    <input
+      type="text"
+      id={`${id}-addressLine2`}
+      name="addressLine2"
+      autocomplete="address-line2"
+      data-testid={`${id}-addressLine2`}
+    />
+  </div>
+
+  <div class="form-group">
+    <label for={`${id}-city`}>City</label>
+    <input
+      type="text"
+      id={`${id}-city`}
+      name="city"
+      required
+      autocomplete="address-level2"
+      data-testid={`${id}-city`}
+    />
+  </div>
+
+  <div class="form-group">
+    <label for={`${id}-region`}>State / County</label>
+    <input
+      type="text"
+      id={`${id}-region`}
+      name="region"
+      required
+      autocomplete="address-level1"
+      data-testid={`${id}-region`}
+    />
+  </div>
+
+  <div class="form-group">
+    <label for={`${id}-postalCode`}>Postcode</label>
+    <input
+      type="text"
+      id={`${id}-postalCode`}
+      name="postalCode"
+      required
+      autocomplete="postal-code"
+      data-testid={`${id}-postalCode`}
+    />
+  </div>
+
+  <div class="form-group">
+    <label for={`${id}-country`}>Country (2-letter code)</label>
+    <input
+      type="text"
+      id={`${id}-country`}
+      name="country"
+      required
+      autocomplete="country"
+      placeholder="GB"
+      data-testid={`${id}-country`}
+    />
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+---
+interface Props {
+  items: Array<{ label: string; href?: string }>
+}
+
+const { items } = Astro.props
+---
+
+<nav class="pdp-breadcrumbs" aria-label="Breadcrumb" data-testid="breadcrumb">
+  {items.map((item, index) => (
+    <>
+      {index > 0 && <span class="separator" aria-hidden="true">/</span>}
+      {item.href && index < items.length - 1 ? (
+        <a href={item.href}>{item.label}</a>
+      ) : (
+        <span class="current" aria-current="page">{item.label}</span>
+      )}
+    </>
+  ))}
+</nav>

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

@@ -0,0 +1,27 @@
+---
+import '../styles/pages/home.css'
+import type { Category } from '@nymbalhq/types'
+
+interface Props {
+  categories: Category[]
+}
+
+const { categories } = Astro.props
+---
+
+<div class="category-grid">
+  {categories.map((cat) => (
+    <a
+      href={`/category/${cat.slug}`}
+      class="category-card"
+      data-testid={`category-${cat.slug}`}
+    >
+      <span class="category-card-name">{cat.name}</span>
+      {cat.description && (
+        <span class="category-card-description" style="font-size: var(--nymbal-font-size-xs, 0.75rem); color: var(--nymbal-color-text-muted, #71717a); margin-top: var(--nymbal-spacing-xs, 0.25rem);">
+          {cat.description}
+        </span>
+      )}
+    </a>
+  ))}
+</div>

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

@@ -0,0 +1,29 @@
+---
+import '../styles/pages/checkout.css'
+
+interface Props {
+  currentStep: 'contact' | 'shipping' | 'payment'
+}
+
+const { currentStep } = Astro.props
+const steps = ['contact', 'shipping', 'payment'] as const
+const stepLabels = { contact: 'Contact', shipping: 'Shipping', payment: 'Payment' }
+const currentIndex = steps.indexOf(currentStep)
+---
+
+<div class="checkout-steps" data-testid="checkout-steps">
+  {steps.map((step, index) => {
+    const isCompleted = index < currentIndex
+    const isActive = step === currentStep
+    const stepClass = isCompleted ? 'checkout-step completed' : isActive ? 'checkout-step active' : 'checkout-step'
+    const dividerClass = index < currentIndex ? 'checkout-step-divider completed' : 'checkout-step-divider'
+    return (
+      <>
+        {index > 0 && <div class={dividerClass} aria-hidden="true"></div>}
+        <div class={stepClass} data-testid={`checkout-step-${step}`}>
+          <span>{stepLabels[step]}</span>
+        </div>
+      </>
+    )
+  })}
+</div>

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

@@ -0,0 +1,108 @@
+---
+const currentYear = new Date().getFullYear()
+---
+<footer class="site-footer" data-testid="site-footer">
+  <div class="footer-container container">
+    <div class="footer-grid">
+      <div class="footer-column">
+        <h2 class="footer-heading">Shop</h2>
+        <ul class="footer-links">
+          <li><a href="/products">All Products</a></li>
+          <li><a href="/category/apparel">Apparel</a></li>
+          <li><a href="/category/home">Home</a></li>
+          <li><a href="/category/electronics">Electronics</a></li>
+          <li><a href="/category/books">Books</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-column">
+        <h2 class="footer-heading">Account</h2>
+        <ul class="footer-links">
+          <li><a href="/account/login">Login</a></li>
+          <li><a href="/account/register">Register</a></li>
+          <li><a href="/account/orders">Orders</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-column">
+        <h2 class="footer-heading">About</h2>
+        <p class="footer-about">
+          Nymbal is a modern headless commerce platform built for developers.
+          Fast, flexible, and fully customisable.
+        </p>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <p>&copy; {currentYear} Nymbal. All rights reserved.</p>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .site-footer {
+    background-color: var(--nymbal-color-primary, #18181b);
+    color: var(--nymbal-color-text-inverse, #fff);
+    margin-top: auto;
+  }
+
+  .footer-container {
+    padding-block: 3rem var(--nymbal-spacing-lg, 1.5rem);
+  }
+
+  .footer-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--nymbal-spacing-xl, 2rem);
+    margin-bottom: var(--nymbal-spacing-xl, 2rem);
+  }
+
+  @media (min-width: 641px) {
+    .footer-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .footer-heading {
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    font-weight: var(--nymbal-font-weight-bold, 700);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: var(--nymbal-spacing-md, 1rem);
+    color: var(--nymbal-color-text-inverse, #fff);
+  }
+
+  .footer-links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nymbal-spacing-sm, 0.5rem);
+  }
+
+  .footer-links a {
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    color: rgba(255, 255, 255, 0.7);
+    text-decoration: none;
+    transition: color var(--nymbal-transition-fast, 150ms) ease;
+  }
+
+  .footer-links a:hover {
+    color: var(--nymbal-color-text-inverse, #fff);
+  }
+
+  .footer-about {
+    font-size: var(--nymbal-font-size-sm, 0.875rem);
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.6;
+    max-width: 28ch;
+  }
+
+  .footer-bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: var(--nymbal-spacing-lg, 1.5rem);
+  }
+
+  .footer-bottom p {
+    font-size: var(--nymbal-font-size-xs, 0.75rem);
+    color: rgba(255, 255, 255, 0.5);
+  }
+</style>

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

@@ -0,0 +1,192 @@
+---
+---
+<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">
+        <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/HeroSection.astro

@@ -0,0 +1,17 @@
+---
+import '../styles/pages/home.css'
+---
+
+<section class="hero" data-testid="hero-section">
+  <div class="hero-content">
+    <h1 class="hero-title">Curated for quality. Built to last.</h1>
+    <p class="hero-subtitle">
+      Discover thoughtfully crafted products designed for everyday life.
+      Every item in our collection is selected for its quality, durability, and timeless design.
+    </p>
+    <div class="hero-actions">
+      <a href="/products" class="btn btn-primary">Shop Now</a>
+      <a href="/category/apparel" class="btn btn-secondary">Browse Categories</a>
+    </div>
+  </div>
+</section>

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

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

@@ -0,0 +1,39 @@
+---
+import '../styles/pages/home.css'
+---
+
+<section class="newsletter section" data-testid="newsletter-signup">
+  <div class="container">
+    <h2 class="newsletter-title">Stay in the loop</h2>
+    <p class="newsletter-subtitle">Subscribe for new arrivals, exclusive offers, and more.</p>
+    <form class="newsletter-form" id="newsletter-form" data-testid="newsletter-form">
+      <input
+        type="email"
+        name="email"
+        placeholder="Your email address"
+        required
+        aria-label="Email address"
+        data-testid="newsletter-email"
+      />
+      <button type="submit" class="btn btn-primary" data-testid="newsletter-submit">
+        Subscribe
+      </button>
+    </form>
+    <p class="newsletter-success" id="newsletter-success" style="display:none; margin-top: var(--nymbal-spacing-md, 1rem); font-size: var(--nymbal-font-size-sm, 0.875rem); color: rgba(255,255,255,0.8);">
+      Thank you for subscribing!
+    </p>
+  </div>
+</section>
+
+<script>
+  const form = document.getElementById('newsletter-form') as HTMLFormElement | null
+  const success = document.getElementById('newsletter-success')
+
+  form?.addEventListener('submit', (e) => {
+    e.preventDefault()
+    if (form && success) {
+      form.style.display = 'none'
+      success.style.display = 'block'
+    }
+  })
+</script>