create-nymbal-app 0.4.0 → 0.5.0

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

@@ -0,0 +1,39 @@
+import { fetchCapabilities } from '@/lib/api'
+import { HEADER } from '@/lib/chrome'
+import { renderElement } from '@/lib/render'
+
+/**
+ * The store's nymbal-site-header as the server renders it: its attributes, and the search bar (when the store searches)
+ * and the mini-cart as its light-DOM children, each with the slot it fills. React cannot give children beside the
+ * header's server HTML, so they go in that HTML. The mini-cart has a count only on a shopper's own page; a shared,
+ * cached header has none.
+ */
+export function siteHeader(
+  search: boolean,
+  cartCount?: number,
+): { attributes: Record<string, string>; children: string } {
+  const miniCart: Record<string, string> = { slot: 'cart' }
+  if (cartCount !== undefined) miniCart['count'] = String(cartCount)
+  const children = [
+    search
+      ? renderElement('nymbal-search-bar', {
+          attributes: { slot: 'search', placeholder: 'Search products...', 'debounce-ms': '300' },
+        })
+      : '',
+    renderElement('nymbal-mini-cart', { attributes: miniCart }),
+  ].join('')
+  return {
+    attributes: {
+      links: JSON.stringify(HEADER.links),
+      logo: HEADER.logo,
+      'account-href': HEADER.accountHref,
+    },
+    children,
+  }
+}
+
+/** Whether the store searches, which puts the search bar in the header. */
+export async function canSearch(): Promise<boolean> {
+  const capabilities = await fetchCapabilities()
+  return capabilities?.search.capabilities.includes('search') ?? false
+}

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

@@ -0,0 +1,14 @@
+import { renderNymbal } from '@nymbalhq/react/server'
+import {
+  cardImageOf,
+  cardProductOf,
+  registerServerElements,
+  renderElement,
+} from '@nymbalhq/web-components/ssr'
+import { serverElements } from '@/elements'
+
+// Server components only: this loads Lit SSR. The store's own elements render on the server under their tags, as the
+// browser defines them there.
+registerServerElements(serverElements)
+
+export { cardImageOf, cardProductOf, renderElement, renderNymbal }

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

@@ -1,9 +1,41 @@
+import { relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// NYMBAL_ELEMENTS_ENTRY (an absolute path) is the store's elements entry in place of elements/index.ts, on the server
+// and in the browser (the E2E override fixture).
+const elementsEntry = process.env.NYMBAL_ELEMENTS_ENTRY
+const elementsAlias =
+  elementsEntry === undefined
+    ? {}
+    : { '@/elements': `./${relative(fileURLToPath(new URL('.', import.meta.url)), elementsEntry)}` }
+
+// NYMBAL_NEXT_DIST_DIR builds beside the usual `.next`, so a second build cannot overwrite one being served.
+const distDir = process.env.NYMBAL_NEXT_DIST_DIR || '.next'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  distDir,
+  ...(distDir !== '.next' && { typescript: { tsconfigPath: 'tsconfig.dist.json' } }),
+  // Cached pages live in memory, bounded by cacheMaxMemorySize: on disk, every distinct product URL a crawler asks for
+  // would keep an entry.
+  experimental: { isrFlushToDisk: false },
+  // `/` and the header and nav fragments are dynamic segments with no params, so the build prerenders none of them
+  // (the API may be down then) and Next caches each on its first request.
+  async rewrites() {
+    return {
+      beforeFiles: [
+        { source: '/', destination: '/home/index' },
+        { source: '/fragments/header', destination: '/fragments/header/index' },
+        { source: '/fragments/nav', destination: '/fragments/nav/index' },
+      ],
+    }
+  },
   transpilePackages: ['@nymbalhq/sdk', '@nymbalhq/react', '@nymbalhq/web-components'],
   images: {
     remotePatterns: [{ protocol: 'https', hostname: '**' }],
   },
+  turbopack: { resolveAlias: elementsAlias },
 }
+
 export default nextConfig

package/scaffold/templates/nextjs/package.json

@@ -17,46 +17,47 @@
     "seed": "nymbal seed"
   },
   "dependencies": {
-    "nymbal": "1.1.0",
-    "@nymbalhq/config": "1.1.0",
-    "@nymbalhq/platform": "1.1.0",
-    "@nymbalhq/stack": "1.1.0",
+    "nymbal": "1.2.0",
+    "@nymbalhq/config": "1.2.0",
+    "@nymbalhq/platform": "1.2.0",
+    "@nymbalhq/stack": "1.2.0",
     "next": "^16.4.2",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "@nymbalhq/sdk": "1.1.0",
-    "@nymbalhq/react": "1.1.0",
-    "@nymbalhq/web-components": "1.1.0",
-    "@nymbalhq/types": "1.1.0"
+    "@nymbalhq/sdk": "1.2.0",
+    "@nymbalhq/react": "1.2.0",
+    "@nymbalhq/web-components": "1.2.0",
+    "@nymbalhq/types": "1.2.0"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "typescript": "^5.6.3"
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2"
   },
   "pnpm": {
     "overrides": {
-      "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"
+      "nymbal": "1.2.0",
+      "@nymbalhq/config": "1.2.0",
+      "@nymbalhq/http": "1.2.0",
+      "@nymbalhq/platform": "1.2.0",
+      "@nymbalhq/react": "1.2.0",
+      "@nymbalhq/sdk": "1.2.0",
+      "@nymbalhq/stack": "1.2.0",
+      "@nymbalhq/types": "1.2.0",
+      "@nymbalhq/web-components": "1.2.0"
     }
   },
   "overrides": {
-    "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"
+    "nymbal": "1.2.0",
+    "@nymbalhq/config": "1.2.0",
+    "@nymbalhq/http": "1.2.0",
+    "@nymbalhq/platform": "1.2.0",
+    "@nymbalhq/react": "1.2.0",
+    "@nymbalhq/sdk": "1.2.0",
+    "@nymbalhq/stack": "1.2.0",
+    "@nymbalhq/types": "1.2.0",
+    "@nymbalhq/web-components": "1.2.0"
   }
 }

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

@@ -132,27 +132,6 @@
   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);
@@ -169,27 +148,6 @@
   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 {
@@ -331,34 +289,6 @@
   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);

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

@@ -65,91 +65,11 @@
   margin-bottom: var(--nymbal-spacing-md);
 }
 
-/* ── Line Items ───────────────────────────────────────────────────── */
+/* ── Order Summary ──────────────────────────────────────────────── */
 
-.lineItems {
-  display: flex;
-  flex-direction: column;
-}
-
-.lineItem {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-md);
-  padding: var(--nymbal-spacing-sm) 0;
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-
-.lineItem:last-child {
-  border-bottom: none;
-}
-
-.lineItemImage {
-  width: 3.5rem;
-  height: 3.5rem;
-  flex-shrink: 0;
-  border-radius: var(--nymbal-radius-md);
-  background-color: #f4f4f5;
-  overflow: hidden;
-}
-
-.lineItemImage img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.lineItemInfo {
-  flex: 1;
-  min-width: 0;
-}
-
-.lineItemName {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-}
-
-.lineItemVariant {
-  font-size: var(--nymbal-font-size-xs);
-  color: var(--nymbal-color-text-muted);
-}
-
-.lineItemQty {
-  font-size: var(--nymbal-font-size-xs);
-  color: var(--nymbal-color-text-muted);
-}
-
-.lineItemPrice {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  flex-shrink: 0;
-}
-
-/* ── Totals ───────────────────────────────────────────────────────── */
-
-.totals {
-  margin-top: var(--nymbal-spacing-md);
-  padding-top: var(--nymbal-spacing-md);
-  border-top: 1px solid var(--nymbal-color-border);
-}
-
-.totalRow {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--nymbal-spacing-xs) 0;
-  font-size: var(--nymbal-font-size-sm);
-}
-
-.totalLabel {
-  color: var(--nymbal-color-text-muted);
-}
-
-.totalGrand {
-  font-weight: var(--nymbal-font-weight-bold);
-  font-size: var(--nymbal-font-size-base);
-  padding-top: var(--nymbal-spacing-sm);
-  border-top: 1px solid var(--nymbal-color-border);
-  margin-top: var(--nymbal-spacing-xs);
+.summary {
+  display: block;
+  margin-bottom: var(--nymbal-spacing-lg);
 }
 
 /* ── Address Cards ────────────────────────────────────────────────── */
@@ -225,7 +145,8 @@
   border: 1px solid var(--nymbal-color-border);
   border-radius: var(--nymbal-radius-md);
   text-decoration: none;
-  transition: border-color var(--nymbal-transition-fast),
+  transition:
+    border-color var(--nymbal-transition-fast),
     background-color var(--nymbal-transition-fast);
 }
 

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

@@ -46,7 +46,8 @@
   border-radius: var(--nymbal-radius-md);
   cursor: pointer;
   text-decoration: none;
-  transition: background-color var(--nymbal-transition-fast),
+  transition:
+    background-color var(--nymbal-transition-fast),
     transform var(--nymbal-transition-fast);
 }
 
@@ -87,52 +88,6 @@
   padding-block: var(--nymbal-spacing-xl);
 }
 
-.categoriesGrid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-md);
-}
-
-@media (min-width: 640px) {
-  .categoriesGrid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .categoriesGrid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.categoryCard {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 10rem;
-  padding: var(--nymbal-spacing-lg);
-  background-color: #f9fafb;
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-lg);
-  text-decoration: none;
-  color: var(--nymbal-color-text);
-  font-size: var(--nymbal-font-size-lg);
-  font-weight: var(--nymbal-font-weight-medium);
-  transition: border-color var(--nymbal-transition-fast),
-    box-shadow var(--nymbal-transition-fast),
-    transform var(--nymbal-transition-fast);
-}
-
-.categoryCard:hover {
-  border-color: var(--nymbal-color-accent);
-  box-shadow: var(--nymbal-shadow-md);
-  transform: translateY(-2px);
-  text-decoration: none;
-  color: var(--nymbal-color-text);
-}
-
-/* ── Featured Products ────────────────────────────────────────────── */
-
 .featuredSection {
   padding-block: var(--nymbal-spacing-xl);
   background-color: #fafafa;
@@ -163,62 +118,6 @@
   text-decoration: underline;
 }
 
-.productCard {
-  display: flex;
-  flex-direction: column;
-  background: var(--nymbal-color-surface);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-lg);
-  overflow: hidden;
-  text-decoration: none;
-  color: var(--nymbal-color-text);
-  transition: box-shadow var(--nymbal-transition-fast),
-    transform var(--nymbal-transition-fast);
-}
-
-.productCard:hover {
-  box-shadow: var(--nymbal-shadow-md);
-  transform: translateY(-2px);
-  text-decoration: none;
-  color: var(--nymbal-color-text);
-}
-
-.productImage {
-  aspect-ratio: 1;
-  background-color: #f4f4f5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.productImage img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.productInfo {
-  padding: var(--nymbal-spacing-md);
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-xs);
-}
-
-.productName {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  line-height: 1.3;
-}
-
-.productPrice {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-bold);
-  color: var(--nymbal-color-text);
-}
-
-/* ── Newsletter ───────────────────────────────────────────────────── */
-
 .newsletter {
   padding-block: var(--nymbal-spacing-xl);
   text-align: center;

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

@@ -20,63 +20,11 @@
 /* ── Gallery ──────────────────────────────────────────────────────── */
 
 .gallery {
+  display: block;
   flex: 1;
   min-width: 0;
 }
 
-.mainImage {
-  aspect-ratio: 1;
-  background-color: #f4f4f5;
-  border-radius: var(--nymbal-radius-lg);
-  overflow: hidden;
-  margin-bottom: var(--nymbal-spacing-md);
-}
-
-.mainImage img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumbnails {
-  display: flex;
-  gap: var(--nymbal-spacing-sm);
-  overflow-x: auto;
-}
-
-.thumbnail {
-  width: 4rem;
-  height: 4rem;
-  flex-shrink: 0;
-  border-radius: var(--nymbal-radius-md);
-  overflow: hidden;
-  border: 2px solid transparent;
-  cursor: pointer;
-  background-color: #f4f4f5;
-  transition: border-color var(--nymbal-transition-fast);
-}
-
-.thumbnail:hover {
-  border-color: var(--nymbal-color-text-muted);
-}
-
-.thumbnailActive {
-  border-color: var(--nymbal-color-primary);
-}
-
-.thumbnail img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-@media (min-width: 1024px) {
-  .thumbnail {
-    width: 5rem;
-    height: 5rem;
-  }
-}
-
 /* ── Product Info ─────────────────────────────────────────────────── */
 
 .info {
@@ -93,30 +41,6 @@
   }
 }
 
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-xs);
-  font-size: var(--nymbal-font-size-xs);
-  color: var(--nymbal-color-text-muted);
-  margin-bottom: var(--nymbal-spacing-md);
-  flex-wrap: wrap;
-}
-
-.breadcrumbLink {
-  color: var(--nymbal-color-text-muted);
-  text-decoration: none;
-}
-
-.breadcrumbLink:hover {
-  color: var(--nymbal-color-accent);
-  text-decoration: underline;
-}
-
-.breadcrumbSeparator {
-  color: var(--nymbal-color-border);
-}
-
 .productTitle {
   font-size: 1.75rem;
   font-weight: var(--nymbal-font-weight-bold);
@@ -124,51 +48,6 @@
   margin-bottom: var(--nymbal-spacing-sm);
 }
 
-.price {
-  font-size: 1.5rem;
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-
-.priceRange {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-  font-weight: var(--nymbal-font-weight-normal);
-  margin-left: var(--nymbal-spacing-xs);
-}
-
-.stockBadge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-xs);
-  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);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-
-.stockBadge[data-level='in'] {
-  background-color: #dcfce7;
-  color: var(--nymbal-color-success);
-}
-
-.stockBadge[data-level='low'] {
-  color: var(--nymbal-color-warning);
-}
-
-.stockBadge[data-level='out'] {
-  background-color: #fef2f2;
-  color: var(--nymbal-color-error);
-}
-
-.stockDot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: currentColor;
-}
-
 .description {
   font-size: var(--nymbal-font-size-sm);
   color: var(--nymbal-color-text-muted);
@@ -259,65 +138,6 @@
   margin-bottom: var(--nymbal-spacing-lg);
 }
 
-.reviewsList {
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-lg);
-}
-
-.reviewCard {
-  padding-bottom: var(--nymbal-spacing-lg);
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-
-.reviewCard:last-child {
-  border-bottom: none;
-}
-
-.reviewHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--nymbal-spacing-sm);
-  gap: var(--nymbal-spacing-sm);
-  flex-wrap: wrap;
-}
-
-.reviewStars {
-  display: flex;
-  gap: 2px;
-  color: #f59e0b;
-  font-size: var(--nymbal-font-size-sm);
-}
-
-.starFilled {
-  color: #f59e0b;
-}
-
-.starEmpty {
-  color: var(--nymbal-color-border);
-}
-
-.reviewDate {
-  font-size: var(--nymbal-font-size-xs);
-  color: var(--nymbal-color-text-muted);
-}
-
-.reviewTitle {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  margin-bottom: var(--nymbal-spacing-xs);
-}
-
-.reviewBody {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-  line-height: 1.6;
-}
-
-.noReviews {
-  text-align: center;
-  padding: var(--nymbal-spacing-xl);
-  color: var(--nymbal-color-text-muted);
-  font-size: var(--nymbal-font-size-sm);
+.reviewForm {
+  margin-top: var(--nymbal-spacing-xl);
 }