create-nymbal-app 0.3.0 → 0.5.0

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

@@ -45,6 +45,14 @@
   border-radius: var(--nymbal-radius-lg);
 }
 
+/* Below the sidebar's breakpoint the filters wait behind the toggle: open by default, they sat above the grid and
+   pushed it down when the filter element rendered its facets after hydration. */
+@media (max-width: 1023px) {
+  .filterSection {
+    display: none;
+  }
+}
+
 .filterTitle {
   font-size: var(--nymbal-font-size-sm);
   font-weight: var(--nymbal-font-weight-bold);
@@ -113,151 +121,10 @@
   flex-wrap: wrap;
 }
 
-.resultCount {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-}
-
 .sortSelect {
-  padding: 0.5rem 0.75rem;
-  font-size: var(--nymbal-font-size-sm);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-md);
-  background: var(--nymbal-color-surface);
-  color: var(--nymbal-color-text);
-  cursor: pointer;
-  min-width: 10rem;
-}
-
-.sortSelect:focus {
-  outline: none;
-  border-color: var(--nymbal-color-accent);
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
-}
-
-/* ── Product Grid ─────────────────────────────────────────────────── */
-
-.grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-md);
-}
-
-@media (min-width: 640px) {
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.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;
-  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);
-}
-
-.productPrice {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-bold);
-}
-
-/* ── Pagination ───────────────────────────────────────────────────── */
-
-.pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--nymbal-spacing-sm);
-  margin-top: var(--nymbal-spacing-xl);
-}
-
-.loadMore {
-  padding: 0.625rem 2rem;
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  color: var(--nymbal-color-primary);
-  background: var(--nymbal-color-surface);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-md);
-  cursor: pointer;
-  transition: background-color var(--nymbal-transition-fast),
-    border-color var(--nymbal-transition-fast);
-}
-
-.loadMore:hover {
-  background-color: #f4f4f5;
-  border-color: var(--nymbal-color-primary);
-}
-
-.loadMore:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ── Empty State ──────────────────────────────────────────────────── */
-
-.empty {
-  text-align: center;
-  padding: var(--nymbal-spacing-xl);
-  color: var(--nymbal-color-text-muted);
-}
-
-.emptyTitle {
-  font-size: var(--nymbal-font-size-lg);
-  font-weight: var(--nymbal-font-weight-medium);
-  margin-bottom: var(--nymbal-spacing-sm);
-  color: var(--nymbal-color-text);
-}
-
-.emptyText {
-  font-size: var(--nymbal-font-size-sm);
-}
-
-/* ── Mobile filter toggle ─────────────────────────────────────────── */
-
 .mobileFilterToggle {
   display: block;
   width: 100%;

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

@@ -14,142 +14,22 @@
   margin-bottom: var(--nymbal-spacing-sm);
 }
 
-.queryText {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-}
-
-.queryTerm {
-  font-weight: var(--nymbal-font-weight-medium);
-  color: var(--nymbal-color-text);
-}
+/* ── Category filter beside the results ──────────────────────────── */
 
-.resultCount {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-
-/* ── Search Input ─────────────────────────────────────────────────── */
-
-.searchInputWrapper {
-  max-width: 32rem;
-  margin-bottom: var(--nymbal-spacing-xl);
-}
-
-/* ── Results Grid ─────────────────────────────────────────────────── */
-
-.grid {
+.layout {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-md);
+  gap: var(--nymbal-spacing-lg);
 }
 
-@media (min-width: 640px) {
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
+@media (min-width: 769px) {
+  .layout {
+    grid-template-columns: 240px minmax(0, 1fr);
   }
 }
 
-@media (min-width: 1024px) {
-  .grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.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;
-  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);
-}
-
-.productPrice {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-bold);
-}
-
-/* ── Empty State ──────────────────────────────────────────────────── */
-
-.empty {
-  text-align: center;
-  padding: 4rem var(--nymbal-spacing-lg);
-}
-
-.emptyIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 4rem;
-  height: 4rem;
-  border-radius: 50%;
-  background-color: #f4f4f5;
-  color: var(--nymbal-color-text-muted);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-
-.emptyIcon svg {
-  width: 2rem;
-  height: 2rem;
-}
-
-.emptyTitle {
-  font-size: var(--nymbal-font-size-lg);
-  font-weight: var(--nymbal-font-weight-medium);
-  margin-bottom: var(--nymbal-spacing-sm);
-}
-
-.emptyText {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-  max-width: 24rem;
-  margin-inline: auto;
-}
-
-/* ── Loading ──────────────────────────────────────────────────────── */
-
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 16rem;
+.sidebar {
+  align-self: start;
 }
 
 /* ── Suggestions ──────────────────────────────────────────────────── */

package/scaffold/templates/nextjs/tsconfig.dist.json

@@ -0,0 +1,5 @@
+{
+  // The tsconfig of a build into NYMBAL_NEXT_DIST_DIR (next.config.mjs). Next adds a build's dist directory to the
+  // tsconfig it type-checks with, unless that one extends another; so tsconfig.json keeps only `.next`.
+  "extends": "./tsconfig.json"
+}

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

@@ -1,107 +0,0 @@
----
-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

@@ -1,20 +0,0 @@
----
-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

@@ -1,27 +0,0 @@
----
-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

@@ -1,29 +0,0 @@
----
-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

@@ -1,108 +0,0 @@
----
-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>