create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/nextjs/lib/order-status.ts

@@ -0,0 +1,14 @@
+import type { OrderStatus } from '@nymbalhq/types'
+
+const PAID: ReadonlySet<OrderStatus> = new Set(['confirmed', 'processing', 'shipped', 'delivered'])
+
+/** The order page's heading, from the order's real state: never "confirmed" before the payment is. */
+export function orderHeading(status: OrderStatus): string {
+  if (PAID.has(status)) return 'Order confirmed'
+  if (status === 'pending') return 'Awaiting payment'
+  return `Order ${status.replace(/_/g, ' ')}`
+}
+
+export function isPaid(status: OrderStatus): boolean {
+  return PAID.has(status)
+}

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

@@ -0,0 +1,73 @@
+import type { DenormalisedProduct } from '@nymbalhq/sdk'
+
+export interface BreadcrumbItem {
+  name: string
+  url: string
+}
+
+export function productJsonLd(
+  product: DenormalisedProduct,
+  baseUrl: string,
+): Record<string, unknown> {
+  const url = `${baseUrl}/products/${product.slug}`
+  const priceCurrency = product.currency ?? 'GBP'
+
+  const offers: Record<string, unknown> =
+    product.variants.length > 1 && product.priceRange
+      ? {
+          '@type': 'AggregateOffer',
+          lowPrice: (product.priceRange.minMinor / 100).toFixed(2),
+          highPrice: (product.priceRange.maxMinor / 100).toFixed(2),
+          priceCurrency,
+          offerCount: product.variants.length,
+          availability: product.inStock
+            ? 'https://schema.org/InStock'
+            : 'https://schema.org/OutOfStock',
+        }
+      : {
+          '@type': 'Offer',
+          price: ((product.priceMinor ?? 0) / 100).toFixed(2),
+          priceCurrency,
+          availability: product.inStock
+            ? 'https://schema.org/InStock'
+            : 'https://schema.org/OutOfStock',
+          url,
+        }
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: product.description,
+    url,
+    sku: product.variants[0]?.sku ?? product.id,
+    offers,
+  }
+}
+
+export function breadcrumbJsonLd(
+  items: BreadcrumbItem[],
+): Record<string, unknown> {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: items.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.name,
+      item: item.url,
+    })),
+  }
+}
+
+export function organizationJsonLd(
+  storeName: string,
+  url: string,
+): Record<string, unknown> {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: storeName,
+    url,
+  }
+}

package/scaffold/templates/nextjs/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['@nymbalhq/sdk', '@nymbalhq/react', '@nymbalhq/web-components'],
+  images: {
+    remotePatterns: [{ protocol: 'https', hostname: '**' }],
+  },
+}
+export default nextConfig

package/scaffold/templates/nextjs/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@nymbalhq/template-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A Nymbal commerce project",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "typecheck": "tsc --noEmit",
+    "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",
+    "next": "^16.4.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "@nymbalhq/sdk": "0.2.0",
+    "@nymbalhq/react": "0.2.0",
+    "@nymbalhq/web-components": "0.2.0",
+    "@nymbalhq/types": "0.2.0",
+    "@stripe/stripe-js": "^4.0.0",
+    "@stripe/react-stripe-js": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.9.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "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/nextjs/styles/pages/account.module.css

@@ -0,0 +1,377 @@
+/* ── Account Layout ────────────────────────────────────────────────── */
+
+.page {
+  padding-block: var(--nymbal-spacing-xl);
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nymbal-spacing-xl);
+}
+
+@media (min-width: 1024px) {
+  .layout {
+    flex-direction: row;
+  }
+}
+
+/* ── Sidebar ──────────────────────────────────────────────────────── */
+
+.sidebar {
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .sidebar {
+    width: 14rem;
+    flex-shrink: 0;
+  }
+}
+
+.sidebarNav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nymbal-spacing-xs);
+}
+
+.sidebarLink {
+  display: block;
+  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-md);
+  font-size: var(--nymbal-font-size-sm);
+  font-weight: var(--nymbal-font-weight-normal);
+  color: var(--nymbal-color-text-muted);
+  text-decoration: none;
+  border-radius: var(--nymbal-radius-md);
+  transition:
+    color var(--nymbal-transition-fast),
+    background-color var(--nymbal-transition-fast);
+}
+
+.sidebarLink:hover {
+  color: var(--nymbal-color-text);
+  background-color: #f4f4f5;
+  text-decoration: none;
+}
+
+.sidebarLinkActive {
+  color: var(--nymbal-color-text);
+  background-color: #f4f4f5;
+  font-weight: var(--nymbal-font-weight-medium);
+}
+
+.sidebarDivider {
+  border: 0;
+  border-top: 1px solid var(--nymbal-color-border);
+  margin: var(--nymbal-spacing-sm) 0;
+}
+
+.logoutLink {
+  color: var(--nymbal-color-error);
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  font: inherit;
+  cursor: pointer;
+}
+
+.logoutLink:hover {
+  color: var(--nymbal-color-error);
+  background-color: #fef2f2;
+}
+
+/* ── Content Area ─────────────────────────────────────────────────── */
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.pageTitle {
+  font-size: 1.5rem;
+  font-weight: var(--nymbal-font-weight-bold);
+  margin-bottom: var(--nymbal-spacing-lg);
+}
+
+/* ── Profile Form ─────────────────────────────────────────────────── */
+
+.formCard {
+  background: var(--nymbal-color-surface);
+  border: 1px solid var(--nymbal-color-border);
+  border-radius: var(--nymbal-radius-lg);
+  padding: var(--nymbal-spacing-lg);
+}
+
+.formCardTitle {
+  font-size: var(--nymbal-font-size-base);
+  font-weight: var(--nymbal-font-weight-bold);
+  margin-bottom: var(--nymbal-spacing-md);
+}
+
+.formGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--nymbal-spacing-md);
+}
+
+@media (min-width: 640px) {
+  .formGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.formGridFull {
+  grid-column: 1 / -1;
+}
+
+.formActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--nymbal-spacing-md);
+  margin-top: var(--nymbal-spacing-lg);
+}
+
+.saveButton {
+  padding: 0.625rem 1.5rem;
+  font-size: var(--nymbal-font-size-sm);
+  font-weight: var(--nymbal-font-weight-medium);
+  color: var(--nymbal-color-text-inverse);
+  background-color: var(--nymbal-color-primary);
+  border: none;
+  border-radius: var(--nymbal-radius-md);
+  cursor: pointer;
+  transition: background-color var(--nymbal-transition-fast);
+}
+
+.saveButton:hover {
+  background-color: var(--nymbal-color-primary-hover);
+}
+
+.saveButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cancelButton {
+  padding: 0.625rem 1.5rem;
+  font-size: var(--nymbal-font-size-sm);
+  font-weight: var(--nymbal-font-weight-medium);
+  color: var(--nymbal-color-text);
+  background: none;
+  border: 1px solid var(--nymbal-color-border);
+  border-radius: var(--nymbal-radius-md);
+  cursor: pointer;
+  transition: border-color var(--nymbal-transition-fast);
+}
+
+.cancelButton:hover {
+  border-color: var(--nymbal-color-primary);
+}
+
+/* ── Alert / Success Message ──────────────────────────────────────── */
+
+.alert {
+  padding: var(--nymbal-spacing-md);
+  border-radius: var(--nymbal-radius-md);
+  font-size: var(--nymbal-font-size-sm);
+  margin-bottom: var(--nymbal-spacing-md);
+}
+
+.alertSuccess {
+  background-color: #dcfce7;
+  color: var(--nymbal-color-success);
+  border: 1px solid #bbf7d0;
+}
+
+.alertError {
+  background-color: #fef2f2;
+  color: var(--nymbal-color-error);
+  border: 1px solid #fecaca;
+}
+
+/* ── Order List ───────────────────────────────────────────────────── */
+
+.orderList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nymbal-spacing-md);
+}
+
+.orderCard {
+  background: var(--nymbal-color-surface);
+  border: 1px solid var(--nymbal-color-border);
+  border-radius: var(--nymbal-radius-lg);
+  padding: var(--nymbal-spacing-md);
+  transition: box-shadow var(--nymbal-transition-fast);
+}
+
+.orderCard:hover {
+  box-shadow: var(--nymbal-shadow-sm);
+}
+
+.orderHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--nymbal-spacing-sm);
+  margin-bottom: var(--nymbal-spacing-sm);
+}
+
+.orderNumber {
+  font-size: var(--nymbal-font-size-sm);
+  font-weight: var(--nymbal-font-weight-bold);
+  color: var(--nymbal-color-text);
+  text-decoration: none;
+}
+
+.orderNumber:hover {
+  color: var(--nymbal-color-accent);
+  text-decoration: underline;
+}
+
+.orderStatus {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  font-size: var(--nymbal-font-size-xs);
+  font-weight: var(--nymbal-font-weight-medium);
+  border-radius: var(--nymbal-radius-full);
+  text-transform: capitalize;
+}
+
+.statusPending {
+  background-color: #fef3c7;
+  color: var(--nymbal-color-warning);
+}
+
+.statusConfirmed,
+.statusProcessing {
+  background-color: #dbeafe;
+  color: var(--nymbal-color-accent);
+}
+
+.statusShipped {
+  background-color: #e0e7ff;
+  color: #4f46e5;
+}
+
+.statusDelivered {
+  background-color: #dcfce7;
+  color: var(--nymbal-color-success);
+}
+
+.statusCancelled,
+.statusRefunded {
+  background-color: #fef2f2;
+  color: var(--nymbal-color-error);
+}
+
+.orderMeta {
+  display: flex;
+  gap: var(--nymbal-spacing-lg);
+  font-size: var(--nymbal-font-size-xs);
+  color: var(--nymbal-color-text-muted);
+}
+
+.orderMetaLabel {
+  font-weight: var(--nymbal-font-weight-medium);
+  color: var(--nymbal-color-text);
+}
+
+.emptyOrders {
+  text-align: center;
+  padding: 3rem var(--nymbal-spacing-lg);
+}
+
+.emptyOrdersTitle {
+  font-size: var(--nymbal-font-size-lg);
+  font-weight: var(--nymbal-font-weight-medium);
+  margin-bottom: var(--nymbal-spacing-sm);
+}
+
+.emptyOrdersText {
+  font-size: var(--nymbal-font-size-sm);
+  color: var(--nymbal-color-text-muted);
+  margin-bottom: var(--nymbal-spacing-lg);
+}
+
+/* ── Auth Forms (Login / Register) ────────────────────────────────── */
+
+.authPage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  padding: var(--nymbal-spacing-xl);
+}
+
+.authCard {
+  width: 100%;
+  max-width: 24rem;
+  background: var(--nymbal-color-surface);
+  border: 1px solid var(--nymbal-color-border);
+  border-radius: var(--nymbal-radius-lg);
+  padding: var(--nymbal-spacing-xl);
+  box-shadow: var(--nymbal-shadow-sm);
+}
+
+.authTitle {
+  font-size: 1.5rem;
+  font-weight: var(--nymbal-font-weight-bold);
+  text-align: center;
+  margin-bottom: var(--nymbal-spacing-xs);
+}
+
+.authSubtitle {
+  font-size: var(--nymbal-font-size-sm);
+  color: var(--nymbal-color-text-muted);
+  text-align: center;
+  margin-bottom: var(--nymbal-spacing-lg);
+}
+
+.authForm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nymbal-spacing-md);
+}
+
+.authSubmit {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: var(--nymbal-font-size-sm);
+  font-weight: var(--nymbal-font-weight-medium);
+  color: var(--nymbal-color-text-inverse);
+  background-color: var(--nymbal-color-primary);
+  border: none;
+  border-radius: var(--nymbal-radius-md);
+  cursor: pointer;
+  transition: background-color var(--nymbal-transition-fast);
+}
+
+.authSubmit:hover {
+  background-color: var(--nymbal-color-primary-hover);
+}
+
+.authSubmit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.authFooter {
+  text-align: center;
+  margin-top: var(--nymbal-spacing-md);
+  font-size: var(--nymbal-font-size-sm);
+  color: var(--nymbal-color-text-muted);
+}
+
+.authFooter a {
+  color: var(--nymbal-color-accent);
+  text-decoration: none;
+  font-weight: var(--nymbal-font-weight-medium);
+}
+
+.authFooter a:hover {
+  text-decoration: underline;
+}