create-nymbal-app 0.4.0 → 0.5.0

package/scaffold/templates/nextjs/components/client/SearchResults.tsx

@@ -1,181 +0,0 @@
-'use client'
-
-import { useCallback, useEffect } from 'react'
-import { useSearchParams } from 'next/navigation'
-import Link from 'next/link'
-import Image from 'next/image'
-import { ProductFilter, useSearch } from '@nymbalhq/react'
-import { formatPrice } from '@/lib/format'
-import styles from '@/styles/pages/search.module.css'
-
-export function SearchResults() {
-  const searchParams = useSearchParams()
-  const query = searchParams.get('q') ?? ''
-  const category = searchParams.get('category')
-  const {
-    results,
-    total,
-    nextCursor,
-    facets,
-    loading,
-    query: searched,
-    category: searchedCategory,
-    search,
-    loadMore,
-  } = useSearch()
-
-  useEffect(() => {
-    // Runs when the URL changes; the filter has already searched the category it writes there.
-    if (query && (query !== searched || category !== searchedCategory)) {
-      void search(query, { category })
-    }
-  }, [query, category, search])
-
-  const onFilterChange = useCallback((event: CustomEvent<{ name: string; value: string }>) => {
-    const url = new URL(window.location.href)
-    if (event.detail.value) url.searchParams.set('category', event.detail.value)
-    else url.searchParams.delete('category')
-    window.history.replaceState(null, '', url.toString())
-  }, [])
-
-  return (
-    <div className={`container ${styles.page}`}>
-      <div className={styles.header}>
-        <h1 className={styles.pageTitle}>Search Results</h1>
-        {query && (
-          <p className={styles.queryText}>
-            Showing results for <span className={styles.queryTerm}>&ldquo;{query}&rdquo;</span>
-          </p>
-        )}
-      </div>
-
-      {loading && results.length === 0 ? (
-        <div className={styles.loading}>
-          <div className="spinner spinner-lg" role="status">
-            <span className="visually-hidden">Searching...</span>
-          </div>
-        </div>
-      ) : !query ? (
-        <div className={styles.empty}>
-          <div className={styles.emptyIcon}>
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
-          </div>
-          <h2 className={styles.emptyTitle}>Search our store</h2>
-          <p className={styles.emptyText}>
-            Use the search bar above to find what you are looking for.
-          </p>
-        </div>
-      ) : results.length > 0 ? (
-        <div className={facets.length > 0 ? styles.layout : undefined}>
-          {facets.length > 0 && (
-            <aside className={styles.sidebar}>
-              <ProductFilter source="search" onFilterChange={onFilterChange} />
-            </aside>
-          )}
-          <div>
-            <p className={styles.resultCount} data-testid="search-total">
-              {total} result{total !== 1 ? 's' : ''} found
-            </p>
-            <div className={styles.grid}>
-              {results.map((product) => {
-                const media = Array.isArray(product.media) ? product.media : []
-                const imageUrl =
-                  media.length > 0 && typeof (media[0] as Record<string, unknown>)?.url === 'string'
-                    ? (media[0] as Record<string, string>).url
-                    : null
-                return (
-                  <Link
-                    key={product.id}
-                    href={`/product/${product.slug}`}
-                    className={styles.productCard}
-                    data-testid={`product-card-${product.slug}`}
-                  >
-                    <div className={styles.productImage}>
-                      {imageUrl && (
-                        <Image
-                          src={imageUrl}
-                          alt={product.name}
-                          width={400}
-                          height={400}
-                          sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 25vw"
-                        />
-                      )}
-                    </div>
-                    <div className={styles.productInfo}>
-                      <p className={styles.productName}>{product.name}</p>
-                      {product.priceMinor != null && product.currency && (
-                        <p className={styles.productPrice}>
-                          {formatPrice(product.priceMinor, product.currency)}
-                        </p>
-                      )}
-                    </div>
-                  </Link>
-                )
-              })}
-            </div>
-            {nextCursor !== null && (
-              <div className={styles.pagination}>
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  onClick={() => void loadMore()}
-                  disabled={loading}
-                  data-testid="search-load-more"
-                >
-                  {loading ? 'Loading...' : 'Load more'}
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      ) : (
-        <div className={styles.empty}>
-          <div className={styles.emptyIcon}>
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
-          </div>
-          <h2 className={styles.emptyTitle}>No results found</h2>
-          <p className={styles.emptyText}>
-            We could not find anything matching &ldquo;{query}&rdquo;. Try a different search term.
-          </p>
-        </div>
-      )}
-
-      <div className={styles.suggestions}>
-        <h3 className={styles.suggestionsTitle}>Popular searches</h3>
-        <div className={styles.suggestionTags}>
-          {['Shirts', 'Shoes', 'Jackets', 'Accessories', 'New Arrivals'].map((term) => (
-            <Link
-              key={term}
-              href={`/search?q=${encodeURIComponent(term)}`}
-              className={styles.suggestionTag}
-            >
-              {term}
-            </Link>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,36 +0,0 @@
-import Link from 'next/link'
-import styles from '@/styles/pages/pdp.module.css'
-
-interface BreadcrumbItem {
-  label: string
-  href?: string
-}
-
-interface BreadcrumbProps {
-  items: BreadcrumbItem[]
-}
-
-export function Breadcrumb({ items }: BreadcrumbProps) {
-  return (
-    <nav aria-label="Breadcrumb" data-testid="breadcrumb">
-      <ol className={styles.breadcrumb}>
-        {items.map((item, index) => (
-          <li key={index} style={{ display: 'inline-flex', alignItems: 'center', gap: 'inherit' }}>
-            {index > 0 && (
-              <span className={styles.breadcrumbSeparator} aria-hidden="true">
-                /
-              </span>
-            )}
-            {item.href ? (
-              <Link href={item.href} className={styles.breadcrumbLink}>
-                {item.label}
-              </Link>
-            ) : (
-              <span aria-current="page">{item.label}</span>
-            )}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  )
-}

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

@@ -1,29 +0,0 @@
-import Link from 'next/link'
-import type { Category } from '@nymbalhq/types'
-import styles from '@/styles/pages/home.module.css'
-
-interface CategoryNavProps {
-  categories: Category[]
-}
-
-export function CategoryNav({ categories }: CategoryNavProps) {
-  if (categories.length === 0) return null
-
-  return (
-    <section className={`container ${styles.categoriesSection}`}>
-      <h2 className="section-title">Shop by Category</h2>
-      <div className={styles.categoriesGrid}>
-        {categories.map((category) => (
-          <Link
-            key={category.id}
-            href={`/category/${category.slug}`}
-            className={styles.categoryCard}
-            data-testid={`category-${category.slug}`}
-          >
-            {category.name}
-          </Link>
-        ))}
-      </div>
-    </section>
-  )
-}

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

@@ -1,60 +0,0 @@
-import styles from '@/styles/pages/checkout.module.css'
-
-const STEPS = [
-  { label: 'Contact' },
-  { label: 'Shipping' },
-  { label: 'Payment' },
-]
-
-interface CheckoutStepsProps {
-  currentStep: number
-}
-
-export function CheckoutSteps({ currentStep }: CheckoutStepsProps) {
-  return (
-    <div className={styles.steps} data-testid="checkout-steps">
-      {STEPS.map((step, index) => {
-        const isCompleted = index < currentStep
-        const isActive = index === currentStep
-
-        return (
-          <div key={step.label} style={{ display: 'contents' }}>
-            {index > 0 && (
-              <div
-                className={`${styles.stepConnector} ${
-                  isCompleted ? styles.stepConnectorCompleted : ''
-                }`}
-              />
-            )}
-            <div
-              className={`${styles.step} ${isActive ? styles.stepActive : ''} ${
-                isCompleted ? styles.stepCompleted : ''
-              }`}
-            >
-              <span className={styles.stepNumber}>
-                {isCompleted ? (
-                  <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="3"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                  >
-                    <polyline points="20 6 9 17 4 12" />
-                  </svg>
-                ) : (
-                  index + 1
-                )}
-              </span>
-              <span className={styles.stepLabel}>{step.label}</span>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/scaffold/templates/nextjs/components/server/Footer.module.css

@@ -1,64 +0,0 @@
-.footer {
-  background-color: #fafafa;
-  border-top: 1px solid var(--nymbal-color-border);
-  margin-top: var(--nymbal-spacing-xl);
-}
-
-.inner {
-  padding-block: var(--nymbal-spacing-xl);
-}
-
-.columns {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-xl);
-}
-
-@media (min-width: 640px) {
-  .columns {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.column {
-  min-width: 0;
-}
-
-.heading {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--nymbal-color-text);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-
-.list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-sm);
-}
-
-.link {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-  text-decoration: none;
-  transition: color var(--nymbal-transition-fast);
-}
-
-.link:hover {
-  color: var(--nymbal-color-text);
-  text-decoration: none;
-}
-
-.bottom {
-  margin-top: var(--nymbal-spacing-xl);
-  padding-top: var(--nymbal-spacing-lg);
-  border-top: 1px solid var(--nymbal-color-border);
-}
-
-.copyright {
-  font-size: var(--nymbal-font-size-xs);
-  color: var(--nymbal-color-text-muted);
-}

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

@@ -1,79 +0,0 @@
-import Link from 'next/link'
-import styles from './Footer.module.css'
-
-const SHOP_LINKS = [
-  { href: '/products', label: 'All Products' },
-  { href: '/products?category=new', label: 'New Arrivals' },
-  { href: '/products?category=sale', label: 'Sale' },
-]
-
-const ACCOUNT_LINKS = [
-  { href: '/account', label: 'My Account' },
-  { href: '/account/orders', label: 'Order History' },
-  { href: '/account/login', label: 'Sign In' },
-  { href: '/account/register', label: 'Create Account' },
-]
-
-const ABOUT_LINKS = [
-  { href: '/about', label: 'About Us' },
-  { href: '/contact', label: 'Contact' },
-  { href: '/shipping', label: 'Shipping & Returns' },
-  { href: '/privacy', label: 'Privacy Policy' },
-]
-
-export function Footer() {
-  const year = new Date().getFullYear()
-
-  return (
-    <footer className={styles.footer} data-testid="site-footer">
-      <div className={`container ${styles.inner}`}>
-        <div className={styles.columns}>
-          <div className={styles.column}>
-            <h2 className={styles.heading}>Shop</h2>
-            <ul className={styles.list}>
-              {SHOP_LINKS.map((link) => (
-                <li key={link.href}>
-                  <Link href={link.href} className={styles.link}>
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className={styles.column}>
-            <h2 className={styles.heading}>Account</h2>
-            <ul className={styles.list}>
-              {ACCOUNT_LINKS.map((link) => (
-                <li key={link.href}>
-                  <Link href={link.href} className={styles.link}>
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className={styles.column}>
-            <h2 className={styles.heading}>About</h2>
-            <ul className={styles.list}>
-              {ABOUT_LINKS.map((link) => (
-                <li key={link.href}>
-                  <Link href={link.href} className={styles.link}>
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-
-        <div className={styles.bottom}>
-          <p className={styles.copyright}>
-            &copy; {year} Nymbal. All rights reserved.
-          </p>
-        </div>
-      </div>
-    </footer>
-  )
-}

package/scaffold/templates/nextjs/components/server/Header.module.css

@@ -1,147 +0,0 @@
-.header {
-  position: sticky;
-  top: 0;
-  z-index: var(--nymbal-z-dropdown);
-  background-color: var(--nymbal-color-surface);
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-
-.inner {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-lg);
-  height: 4rem;
-  position: relative;
-}
-
-.logo {
-  font-size: var(--nymbal-font-size-xl);
-  font-weight: var(--nymbal-font-weight-bold);
-  color: var(--nymbal-color-primary);
-  text-decoration: none;
-  letter-spacing: -0.02em;
-  flex-shrink: 0;
-}
-
-.logo:hover {
-  color: var(--nymbal-color-primary);
-  text-decoration: none;
-}
-
-.nav {
-  display: none;
-}
-
-.navList {
-  display: flex;
-  gap: var(--nymbal-spacing-lg);
-  list-style: none;
-}
-
-.navLink {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  color: var(--nymbal-color-text);
-  text-decoration: none;
-  transition: color var(--nymbal-transition-fast);
-}
-
-.navLink:hover {
-  color: var(--nymbal-color-accent);
-  text-decoration: none;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-md);
-  margin-left: auto;
-}
-
-.search {
-  display: none;
-}
-
-.iconLink {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--nymbal-color-text);
-  transition: color var(--nymbal-transition-fast);
-}
-
-.iconLink:hover {
-  color: var(--nymbal-color-accent);
-}
-
-/* ── Mobile menu (CSS-only) ───────────────────────────────────────── */
-
-.menuCheckbox {
-  display: none;
-}
-
-.menuButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--nymbal-color-text);
-  order: 10;
-}
-
-.mobileNav {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--nymbal-color-surface);
-  border-bottom: 1px solid var(--nymbal-color-border);
-  box-shadow: var(--nymbal-shadow-md);
-  z-index: var(--nymbal-z-dropdown);
-}
-
-.menuCheckbox:checked ~ .mobileNav {
-  display: block;
-}
-
-.mobileNavList {
-  list-style: none;
-  padding: var(--nymbal-spacing-md);
-}
-
-.mobileNavLink {
-  display: block;
-  padding: var(--nymbal-spacing-sm) 0;
-  font-size: var(--nymbal-font-size-base);
-  font-weight: var(--nymbal-font-weight-medium);
-  color: var(--nymbal-color-text);
-  text-decoration: none;
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-
-.mobileNavLink:hover {
-  color: var(--nymbal-color-accent);
-  text-decoration: none;
-}
-
-/* ── Desktop ──────────────────────────────────────────────────────── */
-
-@media (min-width: 1024px) {
-  .nav {
-    display: block;
-  }
-
-  .search {
-    display: block;
-    width: 16rem;
-  }
-
-  .menuButton {
-    display: none;
-  }
-
-  .mobileNav {
-    display: none !important;
-  }
-}

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

@@ -1,79 +0,0 @@
-import { formatPrice } from '@/lib/format'
-import styles from '@/styles/pages/confirmation.module.css'
-
-interface OrderLineItem {
-  variantId: string
-  productId: string
-  productName: string
-  variantName: string
-  sku: string
-  qty: number
-  unitPriceMinor: number
-  lineTotalMinor: number
-  imageUrl?: string
-}
-
-interface OrderSummaryProps {
-  items: OrderLineItem[]
-  subtotalMinor: number
-  currency: string
-  shippingTotalMinor: number
-  taxTotalMinor: number
-  totalMinor: number
-}
-
-export function OrderSummary({
-  items,
-  subtotalMinor,
-  currency,
-  shippingTotalMinor,
-  taxTotalMinor,
-  totalMinor,
-}: OrderSummaryProps) {
-  return (
-    <div className={styles.orderCard}>
-      <h3 className={styles.orderCardTitle}>Order Items</h3>
-      <div className={styles.lineItems}>
-        {items.map((item) => (
-          <div key={item.variantId} className={styles.lineItem}>
-            {item.imageUrl && (
-              <div className={styles.lineItemImage}>
-                <img src={item.imageUrl} alt={item.productName} />
-              </div>
-            )}
-            <div className={styles.lineItemInfo}>
-              <p className={styles.lineItemName}>{item.productName}</p>
-              {item.variantName && (
-                <p className={styles.lineItemVariant}>{item.variantName}</p>
-              )}
-              <p className={styles.lineItemQty}>Qty: {item.qty}</p>
-            </div>
-            <span className={styles.lineItemPrice}>
-              {formatPrice(item.lineTotalMinor, currency)}
-            </span>
-          </div>
-        ))}
-      </div>
-      <div className={styles.totals}>
-        <div className={styles.totalRow}>
-          <span className={styles.totalLabel}>Subtotal</span>
-          <span>{formatPrice(subtotalMinor, currency)}</span>
-        </div>
-        <div className={styles.totalRow}>
-          <span className={styles.totalLabel}>Shipping</span>
-          <span>
-            {shippingTotalMinor === 0 ? 'Free' : formatPrice(shippingTotalMinor, currency)}
-          </span>
-        </div>
-        <div className={styles.totalRow}>
-          <span className={styles.totalLabel}>Tax</span>
-          <span>{formatPrice(taxTotalMinor, currency)}</span>
-        </div>
-        <div className={`${styles.totalRow} ${styles.totalGrand}`}>
-          <span>Total</span>
-          <span>{formatPrice(totalMinor, currency)}</span>
-        </div>
-      </div>
-    </div>
-  )
-}