create-nymbal-app 0.3.0 → 0.5.0

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/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>
-  )
-}

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

@@ -1,31 +0,0 @@
-import { formatPrice } from '@/lib/format'
-import styles from '@/styles/pages/pdp.module.css'
-
-interface PriceDisplayProps {
-  priceMinor: number
-  currency: string
-  compareAtMinor?: number
-}
-
-export function PriceDisplay({ priceMinor, currency, compareAtMinor }: PriceDisplayProps) {
-  const hasDiscount = compareAtMinor != null && compareAtMinor > priceMinor
-
-  return (
-    <div className={styles.price} data-testid="product-price">
-      <span>{formatPrice(priceMinor, currency)}</span>
-      {hasDiscount && (
-        <span
-          style={{
-            textDecoration: 'line-through',
-            fontSize: '0.875em',
-            color: 'var(--nymbal-color-text-muted)',
-            marginLeft: 'var(--nymbal-spacing-sm)',
-            fontWeight: 'var(--nymbal-font-weight-normal)',
-          }}
-        >
-          {formatPrice(compareAtMinor, currency)}
-        </span>
-      )}
-    </div>
-  )
-}

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

@@ -1,59 +0,0 @@
-import Link from 'next/link'
-import Image from 'next/image'
-import { formatPrice } from '@/lib/format'
-import styles from '@/styles/pages/home.module.css'
-
-interface ProductCardProps {
-  product: {
-    slug: string
-    name: string
-    priceMinor: number | null
-    priceRange?: { minMinor: number } | null
-    currency: string | null
-    media?: unknown
-    imageUrl?: string
-  }
-}
-
-function getImageUrl(product: ProductCardProps['product']): string | null {
-  if (product.imageUrl) return product.imageUrl
-  if (Array.isArray(product.media) && product.media.length > 0) {
-    const first = product.media[0] as Record<string, unknown>
-    if (typeof first?.url === 'string') return first.url
-  }
-  return null
-}
-
-export function ProductCard({ product }: ProductCardProps) {
-  const imageUrl = getImageUrl(product)
-  // The "from" price, which the price sorts order by.
-  const fromMinor = product.priceRange?.minMinor ?? product.priceMinor
-
-  return (
-    <Link
-      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"
-          />
-        ) : (
-          <span className="visually-hidden">No image available</span>
-        )}
-      </div>
-      <div className={styles.productInfo}>
-        <p className={styles.productName}>{product.name}</p>
-        {fromMinor != null && product.currency && (
-          <p className={styles.productPrice}>{formatPrice(fromMinor, product.currency)}</p>
-        )}
-      </div>
-    </Link>
-  )
-}

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

@@ -1,31 +0,0 @@
-import { ProductCard } from './ProductCard'
-import type { DenormalisedProduct } from '@nymbalhq/sdk'
-
-interface RelatedProductsProps {
-  products: DenormalisedProduct[]
-}
-
-export function RelatedProducts({ products }: RelatedProductsProps) {
-  if (products.length === 0) return null
-
-  return (
-    <section className="section">
-      <h2 className="section-title">You may also like</h2>
-      <div className="product-grid">
-        {products.map((product) => (
-          <ProductCard
-            key={product.id}
-            product={{
-              slug: product.slug,
-              name: product.name,
-              priceMinor: product.priceMinor ?? null,
-              priceRange: product.priceRange ?? null,
-              currency: product.currency ?? null,
-              media: product.media,
-            }}
-          />
-        ))}
-      </div>
-    </section>
-  )
-}