create-nymbal-app 0.3.0 → 0.4.0

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

@@ -1,6 +1,7 @@
+import { unstable_rethrow } from 'next/navigation'
 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'
+import type { Category, Order, ProductSortKey, StoreCapabilities } from '@nymbalhq/types'
 
 const API_URL = process.env.NYMBAL_API_URL ?? 'http://localhost:3001'
 
@@ -27,10 +28,29 @@ export async function fetchProducts(params?: {
   }
 }
 
-/** The sort a listing URL asks for; a missing or unknown `?sort=` is the default. */
-export function sortFromSearchParams(params: { sort?: string | string[] }): ProductSortKey {
+/** What the store can do, which decides what the page renders; null when the API did not answer. */
+export async function fetchCapabilities(): Promise<StoreCapabilities | null> {
+  try {
+    const res = await fetch(`${API_URL}/api/capabilities`, { cache: 'no-store' })
+    if (!res.ok) return null
+    const envelope = (await res.json()) as { data: StoreCapabilities }
+    return envelope.data ?? null
+  } catch (err) {
+    // Next signals a request-time render by throwing from fetch at build; that must reach Next, not become null.
+    unstable_rethrow(err)
+    console.error('[api] fetchCapabilities failed', err)
+    return null
+  }
+}
+
+/** The sort a listing URL asks for, among the store's keys; a missing or unknown `?sort=` is the store's default. */
+export function sortFromSearchParams(
+  params: { sort?: string | string[] },
+  catalog?: StoreCapabilities['catalog'],
+): ProductSortKey {
   const sort = Array.isArray(params.sort) ? params.sort[0] : params.sort
-  return PRODUCT_SORT_KEYS.find((key) => key === sort) ?? DEFAULT_PRODUCT_SORT
+  const keys = catalog?.sortKeys ?? PRODUCT_SORT_KEYS
+  return keys.find((key) => key === sort) ?? catalog?.defaultSort ?? DEFAULT_PRODUCT_SORT
 }
 
 export async function fetchProduct(slug: string): Promise<DenormalisedProduct | null> {

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

@@ -1,5 +1,8 @@
 import { createNymbalClient, type NymbalClient } from '@nymbalhq/sdk'
 
+// A payment driver of the project's own is registered here, at module load, before any checkout renders:
+// registerPaymentDriver(name, driver) from @nymbalhq/sdk, named by the driver of the payments adapter's client half.
+
 let instance: NymbalClient | null = null
 let restoring: Promise<void> | null = null
 

package/scaffold/templates/nextjs/package.json

@@ -17,19 +17,17 @@
     "seed": "nymbal seed"
   },
   "dependencies": {
-    "nymbal": "1.0.0",
-    "@nymbalhq/config": "1.0.0",
-    "@nymbalhq/platform": "1.0.0",
-    "@nymbalhq/stack": "1.0.0",
+    "nymbal": "1.1.0",
+    "@nymbalhq/config": "1.1.0",
+    "@nymbalhq/platform": "1.1.0",
+    "@nymbalhq/stack": "1.1.0",
     "next": "^16.4.2",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "@nymbalhq/sdk": "1.0.0",
-    "@nymbalhq/react": "1.0.0",
-    "@nymbalhq/web-components": "1.0.0",
-    "@nymbalhq/types": "1.0.0",
-    "@stripe/stripe-js": "^4.0.0",
-    "@stripe/react-stripe-js": "^3.0.0"
+    "@nymbalhq/sdk": "1.1.0",
+    "@nymbalhq/react": "1.1.0",
+    "@nymbalhq/web-components": "1.1.0",
+    "@nymbalhq/types": "1.1.0"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",
@@ -39,26 +37,26 @@
   },
   "pnpm": {
     "overrides": {
-      "nymbal": "1.0.0",
-      "@nymbalhq/config": "1.0.0",
-      "@nymbalhq/http": "1.0.0",
-      "@nymbalhq/platform": "1.0.0",
-      "@nymbalhq/react": "1.0.0",
-      "@nymbalhq/sdk": "1.0.0",
-      "@nymbalhq/stack": "1.0.0",
-      "@nymbalhq/types": "1.0.0",
-      "@nymbalhq/web-components": "1.0.0"
+      "nymbal": "1.1.0",
+      "@nymbalhq/config": "1.1.0",
+      "@nymbalhq/http": "1.1.0",
+      "@nymbalhq/platform": "1.1.0",
+      "@nymbalhq/react": "1.1.0",
+      "@nymbalhq/sdk": "1.1.0",
+      "@nymbalhq/stack": "1.1.0",
+      "@nymbalhq/types": "1.1.0",
+      "@nymbalhq/web-components": "1.1.0"
     }
   },
   "overrides": {
-    "nymbal": "1.0.0",
-    "@nymbalhq/config": "1.0.0",
-    "@nymbalhq/http": "1.0.0",
-    "@nymbalhq/platform": "1.0.0",
-    "@nymbalhq/react": "1.0.0",
-    "@nymbalhq/sdk": "1.0.0",
-    "@nymbalhq/stack": "1.0.0",
-    "@nymbalhq/types": "1.0.0",
-    "@nymbalhq/web-components": "1.0.0"
+    "nymbal": "1.1.0",
+    "@nymbalhq/config": "1.1.0",
+    "@nymbalhq/http": "1.1.0",
+    "@nymbalhq/platform": "1.1.0",
+    "@nymbalhq/react": "1.1.0",
+    "@nymbalhq/sdk": "1.1.0",
+    "@nymbalhq/stack": "1.1.0",
+    "@nymbalhq/types": "1.1.0",
+    "@nymbalhq/web-components": "1.1.0"
   }
 }

package/scaffold/templates/nextjs/styles/pages/pdp.module.css

@@ -148,12 +148,16 @@
   margin-bottom: var(--nymbal-spacing-md);
 }
 
-.inStock {
+.stockBadge[data-level='in'] {
   background-color: #dcfce7;
   color: var(--nymbal-color-success);
 }
 
-.outOfStock {
+.stockBadge[data-level='low'] {
+  color: var(--nymbal-color-warning);
+}
+
+.stockBadge[data-level='out'] {
   background-color: #fef2f2;
   color: var(--nymbal-color-error);
 }

package/scaffold/templates/nextjs/styles/pages/plp.module.css

@@ -118,7 +118,8 @@
   color: var(--nymbal-color-text-muted);
 }
 
-.sortSelect {
+/* The sort element renders the select. */
+.sortSelect select {
   padding: 0.5rem 0.75rem;
   font-size: var(--nymbal-font-size-sm);
   border: 1px solid var(--nymbal-color-border);
@@ -129,7 +130,7 @@
   min-width: 10rem;
 }
 
-.sortSelect:focus {
+.sortSelect select:focus {
   outline: none;
   border-color: var(--nymbal-color-accent);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

package/scaffold/templates/nextjs/styles/pages/search.module.css

@@ -143,6 +143,30 @@
   margin-inline: auto;
 }
 
+/* ── Category filter and load more ───────────────────────────────── */
+
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--nymbal-spacing-lg);
+}
+
+@media (min-width: 769px) {
+  .layout {
+    grid-template-columns: 240px minmax(0, 1fr);
+  }
+}
+
+.sidebar {
+  align-self: start;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--nymbal-spacing-xl);
+}
+
 /* ── Loading ──────────────────────────────────────────────────────── */
 
 .loading {

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

@@ -1,26 +0,0 @@
----
-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/nextjs/components/client/SortDropdown.tsx

@@ -1,35 +0,0 @@
-'use client'
-
-import type { ProductSortKey } from '@nymbalhq/types'
-import styles from '@/styles/pages/plp.module.css'
-
-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' },
-]
-
-interface SortDropdownProps {
-  value: ProductSortKey
-  onChange: (sort: ProductSortKey) => void
-}
-
-export function SortDropdown({ value, onChange }: SortDropdownProps) {
-  return (
-    <select
-      className={styles.sortSelect}
-      value={value}
-      onChange={(e) => onChange(e.target.value as ProductSortKey)}
-      data-testid="sort-dropdown"
-      aria-label="Sort products"
-    >
-      {OPTIONS.map((option) => (
-        <option key={option.value} value={option.value}>
-          {option.label}
-        </option>
-      ))}
-    </select>
-  )
-}

package/scaffold/templates/nextjs/components/server/StockBadge.tsx

@@ -1,19 +0,0 @@
-import styles from '@/styles/pages/pdp.module.css'
-
-interface StockBadgeProps {
-  stock: number
-}
-
-export function StockBadge({ stock }: StockBadgeProps) {
-  const inStock = stock > 0
-
-  return (
-    <span
-      className={`${styles.stockBadge} ${inStock ? styles.inStock : styles.outOfStock}`}
-      data-testid="stock-badge"
-    >
-      <span className={styles.stockDot} aria-hidden="true" />
-      {inStock ? (stock <= 5 ? `Only ${stock} left` : 'In Stock') : 'Out of Stock'}
-    </span>
-  )
-}