create-nymbal-app 0.0.0 → 0.2.0

package/scaffold/templates/astro/src/styles/pages/plp.css

@@ -0,0 +1,213 @@
+/* ----------------------------------------------------------------
+   Product listing page (PLP) styles
+   ---------------------------------------------------------------- */
+
+/* ---- Page layout ---- */
+
+.plp-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--nymbal-spacing-lg, 1.5rem);
+}
+
+@media (min-width: 769px) {
+  .plp-layout {
+    grid-template-columns: 240px 1fr;
+    gap: var(--nymbal-spacing-xl, 2rem);
+  }
+}
+
+/* ---- Page header / breadcrumbs ---- */
+
+.plp-header {
+  margin-bottom: var(--nymbal-spacing-md, 1rem);
+}
+
+.plp-title {
+  font-size: 1.75rem;
+  font-weight: var(--nymbal-font-weight-bold, 700);
+  color: var(--nymbal-color-primary, #18181b);
+  margin-bottom: var(--nymbal-spacing-xs, 0.25rem);
+}
+
+.plp-count {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  color: var(--nymbal-color-text-muted, #71717a);
+}
+
+/* ---- Filter sidebar ---- */
+
+.plp-sidebar {
+  display: none;
+}
+
+@media (min-width: 769px) {
+  .plp-sidebar {
+    display: block;
+    position: sticky;
+    top: 80px;
+    align-self: start;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+  }
+}
+
+.filter-section {
+  border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+  padding-bottom: var(--nymbal-spacing-md, 1rem);
+  margin-bottom: var(--nymbal-spacing-md, 1rem);
+}
+
+.filter-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.filter-heading {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  font-weight: var(--nymbal-font-weight-bold, 700);
+  color: var(--nymbal-color-primary, #18181b);
+  margin-bottom: var(--nymbal-spacing-sm, 0.5rem);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.filter-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nymbal-spacing-xs, 0.25rem);
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: var(--nymbal-spacing-sm, 0.5rem);
+}
+
+.filter-item label {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  color: var(--nymbal-color-text, #18181b);
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.filter-item input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--nymbal-color-accent, #2563eb);
+  cursor: pointer;
+}
+
+.filter-link {
+  display: block;
+  padding: var(--nymbal-spacing-xs, 0.25rem) 0;
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  color: var(--nymbal-color-text, #18181b);
+  text-decoration: none;
+  transition: color var(--nymbal-transition-fast, 150ms) ease;
+}
+
+.filter-link:hover,
+.filter-link[aria-current="page"] {
+  color: var(--nymbal-color-accent, #2563eb);
+}
+
+.filter-link[aria-current="page"] {
+  font-weight: var(--nymbal-font-weight-bold, 700);
+}
+
+/* Mobile filter toggle */
+
+.plp-filter-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nymbal-spacing-xs, 0.25rem);
+  padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  font-weight: var(--nymbal-font-weight-medium, 500);
+  color: var(--nymbal-color-text, #18181b);
+  background: var(--nymbal-color-surface, #fff);
+  border: 1px solid var(--nymbal-color-border, #e4e4e7);
+  border-radius: var(--nymbal-radius-md, 0.5rem);
+  cursor: pointer;
+}
+
+@media (min-width: 769px) {
+  .plp-filter-toggle {
+    display: none;
+  }
+}
+
+/* ---- Sort bar ---- */
+
+.plp-sort-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--nymbal-spacing-sm, 0.5rem);
+  padding-bottom: var(--nymbal-spacing-md, 1rem);
+  border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+  margin-bottom: var(--nymbal-spacing-md, 1rem);
+  flex-wrap: wrap;
+}
+
+.plp-sort-bar label {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  font-weight: var(--nymbal-font-weight-medium, 500);
+  color: var(--nymbal-color-text-muted, #71717a);
+  margin-bottom: 0;
+}
+
+.plp-sort-bar select {
+  width: auto;
+  min-width: 160px;
+  padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-sm, 0.5rem);
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+}
+
+/* ---- Grid area ---- */
+
+.plp-grid-area {
+  min-width: 0;
+}
+
+/* ---- Pagination ---- */
+
+.plp-pagination {
+  display: flex;
+  justify-content: center;
+  gap: var(--nymbal-spacing-sm, 0.5rem);
+  margin-top: var(--nymbal-spacing-xl, 2rem);
+  padding-top: var(--nymbal-spacing-lg, 1.5rem);
+  border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+}
+
+.plp-pagination .btn {
+  min-width: 100px;
+}
+
+/* ---- Empty state ---- */
+
+.plp-empty {
+  text-align: center;
+  padding: 4rem var(--nymbal-spacing-md, 1rem);
+  color: var(--nymbal-color-text-muted, #71717a);
+}
+
+.plp-empty-title {
+  font-size: var(--nymbal-font-size-lg, 1.125rem);
+  font-weight: var(--nymbal-font-weight-medium, 500);
+  color: var(--nymbal-color-text, #18181b);
+  margin-bottom: var(--nymbal-spacing-xs, 0.25rem);
+}
+
+.plp-empty-text {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+}
+
+/* ---- nymbal-product-filter integration ---- */
+
+nymbal-product-filter {
+  display: block;
+  margin-bottom: var(--nymbal-spacing-md, 1rem);
+}

package/scaffold/templates/astro/src/styles/pages/search.css

@@ -0,0 +1,152 @@
+/* ----------------------------------------------------------------
+   Search results page styles
+   ---------------------------------------------------------------- */
+
+/* ---- Prominent search bar ---- */
+
+.search-hero {
+  text-align: center;
+  padding: var(--nymbal-spacing-xl, 2rem) var(--nymbal-spacing-md, 1rem);
+  background-color: #fafafa;
+  border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+}
+
+.search-hero-title {
+  font-size: 1.5rem;
+  font-weight: var(--nymbal-font-weight-bold, 700);
+  color: var(--nymbal-color-primary, #18181b);
+  margin-bottom: var(--nymbal-spacing-md, 1rem);
+}
+
+.search-bar-wrapper {
+  max-width: 36rem;
+  margin-inline: auto;
+}
+
+.search-bar-wrapper nymbal-search-bar {
+  display: block;
+}
+
+.search-input-large {
+  width: 100%;
+  padding: var(--nymbal-spacing-md, 1rem) var(--nymbal-spacing-lg, 1.5rem);
+  font-size: var(--nymbal-font-size-lg, 1.125rem);
+  border: 2px solid var(--nymbal-color-border, #e4e4e7);
+  border-radius: var(--nymbal-radius-lg, 0.75rem);
+  background-color: var(--nymbal-color-surface, #fff);
+  transition: border-color var(--nymbal-transition-fast, 150ms) ease,
+    box-shadow var(--nymbal-transition-fast, 150ms) ease;
+}
+
+.search-input-large:focus {
+  outline: none;
+  border-color: var(--nymbal-color-accent, #2563eb);
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
+}
+
+/* ---- Results area ---- */
+
+.search-results {
+  padding-top: var(--nymbal-spacing-lg, 1.5rem);
+}
+
+.search-results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--nymbal-spacing-md, 1rem);
+  flex-wrap: wrap;
+  gap: var(--nymbal-spacing-sm, 0.5rem);
+}
+
+.search-query-label {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  color: var(--nymbal-color-text-muted, #71717a);
+}
+
+.search-query-label strong {
+  color: var(--nymbal-color-text, #18181b);
+  font-weight: var(--nymbal-font-weight-bold, 700);
+}
+
+.search-result-count {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  color: var(--nymbal-color-text-muted, #71717a);
+}
+
+/* ---- Results grid (uses .product-grid from global) ---- */
+
+/* ---- Empty / no results ---- */
+
+.search-empty {
+  text-align: center;
+  padding: 4rem var(--nymbal-spacing-md, 1rem);
+}
+
+.search-empty-icon {
+  font-size: 3rem;
+  margin-bottom: var(--nymbal-spacing-md, 1rem);
+  opacity: 0.3;
+}
+
+.search-empty-title {
+  font-size: var(--nymbal-font-size-lg, 1.125rem);
+  font-weight: var(--nymbal-font-weight-medium, 500);
+  color: var(--nymbal-color-text, #18181b);
+  margin-bottom: var(--nymbal-spacing-xs, 0.25rem);
+}
+
+.search-empty-text {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  color: var(--nymbal-color-text-muted, #71717a);
+  max-width: 28ch;
+  margin-inline: auto;
+}
+
+/* ---- Suggestions ---- */
+
+.search-suggestions {
+  margin-top: var(--nymbal-spacing-lg, 1.5rem);
+}
+
+.search-suggestions-title {
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  font-weight: var(--nymbal-font-weight-medium, 500);
+  color: var(--nymbal-color-text, #18181b);
+  margin-bottom: var(--nymbal-spacing-sm, 0.5rem);
+}
+
+.search-suggestions-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--nymbal-spacing-sm, 0.5rem);
+}
+
+.search-suggestion {
+  display: inline-flex;
+  padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-md, 1rem);
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+  color: var(--nymbal-color-text, #18181b);
+  background-color: var(--nymbal-color-surface, #fff);
+  border: 1px solid var(--nymbal-color-border, #e4e4e7);
+  border-radius: var(--nymbal-radius-full, 9999px);
+  text-decoration: none;
+  transition: border-color var(--nymbal-transition-fast, 150ms) ease,
+    background-color var(--nymbal-transition-fast, 150ms) ease;
+}
+
+.search-suggestion:hover {
+  border-color: var(--nymbal-color-accent, #2563eb);
+  background-color: rgba(37, 99, 235, 0.04);
+}
+
+/* ---- Loading ---- */
+
+.search-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--nymbal-color-text-muted, #71717a);
+  font-size: var(--nymbal-font-size-sm, 0.875rem);
+}

package/scaffold/templates/astro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}

package/scaffold/templates/nextjs/README.md

@@ -0,0 +1,26 @@
+# Your Nymbal Store
+
+A commerce project scaffolded with [create-nymbal-app](https://github.com/nymbal/nymbal).
+
+## Scripts
+
+```
+pnpm dev         # start Next.js dev server
+pnpm build       # production build
+pnpm start       # start production server
+pnpm migrate     # run database migrations
+pnpm seed        # re-seed demo content
+```
+
+## Configuration
+
+All configuration lives in `nymbal.config.ts`. Adapters, template, security, and deployment
+settings are centralized there — the CLI and every package reads from the same source of truth.
+
+## Swapping the command store
+
+For local development you get SQLite out of the box. To move to Postgres:
+
+1. Set `DATABASE_URL=postgres://…` in `.env`.
+2. Change `infrastructure.commandStore` to `'postgres'` in `nymbal.config.ts`.
+3. Run `pnpm migrate`.

package/scaffold/templates/nextjs/_dot.env.example

@@ -0,0 +1,6 @@
+# Copy to .env and fill in as needed
+NYMBAL_API_URL=http://localhost:3001
+# DATABASE_URL=postgres://user:pass@localhost:5432/nymbal
+# STRIPE_SECRET_KEY=
+# STRIPE_WEBHOOK_SECRET=
+# ANTHROPIC_API_KEY=

package/scaffold/templates/nextjs/_dot.gitignore

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

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

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

package/scaffold/templates/nextjs/_dot.npmrc

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

package/scaffold/templates/nextjs/app/account/addresses/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from 'next'
+import { AddressManager } from '@/components/client/AddressManager'
+
+export const metadata: Metadata = {
+  title: 'Addresses',
+}
+
+export default function AddressesPage() {
+  return <AddressManager />
+}

package/scaffold/templates/nextjs/app/account/layout.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { useAuth } from '@nymbalhq/react'
+import { AuthGuard, PUBLIC_AUTH_PATHS } from '@/components/client/AuthGuard'
+import styles from '@/styles/pages/account.module.css'
+
+const NAV_LINKS = [
+  { href: '/account', label: 'Dashboard' },
+  { href: '/account/orders', label: 'Orders' },
+  { href: '/account/addresses', label: 'Addresses' },
+  { href: '/account/profile', label: 'Profile' },
+]
+
+export default function AccountLayout({ children }: { children: ReactNode }) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { logout } = useAuth()
+
+  if (PUBLIC_AUTH_PATHS.includes(pathname)) {
+    return <>{children}</>
+  }
+
+  async function signOut() {
+    await logout()
+    router.push('/account/login')
+  }
+
+  return (
+    <AuthGuard>
+      <div className={`container ${styles.page}`}>
+        <div className={styles.layout}>
+          <aside className={styles.sidebar}>
+            <nav className={styles.sidebarNav} aria-label="Account navigation">
+              {NAV_LINKS.map((link) => (
+                <Link key={link.href} href={link.href} className={styles.sidebarLink}>
+                  {link.label}
+                </Link>
+              ))}
+              <hr className={styles.sidebarDivider} />
+              <button
+                type="button"
+                onClick={signOut}
+                className={`${styles.sidebarLink} ${styles.logoutLink}`}
+              >
+                Sign Out
+              </button>
+            </nav>
+          </aside>
+          <div className={styles.content}>{children}</div>
+        </div>
+      </div>
+    </AuthGuard>
+  )
+}

package/scaffold/templates/nextjs/app/account/login/page.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import { LoginForm } from '@/components/client/LoginForm'
+
+export const metadata: Metadata = {
+  title: 'Sign In',
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="loading-center">
+          <div className="spinner spinner-lg" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      }
+    >
+      <LoginForm />
+    </Suspense>
+  )
+}