create-nymbal-app 0.4.0 → 0.5.0

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

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

@@ -1,62 +0,0 @@
-import { formatDate } from '@/lib/format'
-import styles from '@/styles/pages/pdp.module.css'
-
-interface Review {
-  id: string
-  productId: string
-  rating: number
-  title: string
-  body: string
-  submittedAt: string
-}
-
-interface ReviewListProps {
-  reviews: Review[]
-}
-
-function StarRating({ rating }: { rating: number }) {
-  return (
-    <div className={styles.reviewStars} aria-label={`${rating} out of 5 stars`}>
-      {Array.from({ length: 5 }, (_, i) => (
-        <span
-          key={i}
-          className={i < rating ? styles.starFilled : styles.starEmpty}
-          aria-hidden="true"
-        >
-          ★
-        </span>
-      ))}
-    </div>
-  )
-}
-
-export function ReviewList({ reviews }: ReviewListProps) {
-  if (reviews.length === 0) {
-    return (
-      <div className={styles.reviewsSection}>
-        <h2 className={styles.reviewsTitle}>Reviews</h2>
-        <p className={styles.noReviews}>No reviews yet. Be the first to leave a review.</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className={styles.reviewsSection}>
-      <h2 className={styles.reviewsTitle}>Reviews ({reviews.length})</h2>
-      <div className={styles.reviewsList}>
-        {reviews.map((review) => (
-          <article key={review.id} className={styles.reviewCard}>
-            <div className={styles.reviewHeader}>
-              <StarRating rating={review.rating} />
-              <time className={styles.reviewDate} dateTime={review.submittedAt}>
-                {formatDate(review.submittedAt)}
-              </time>
-            </div>
-            {review.title && <h3 className={styles.reviewTitle}>{review.title}</h3>}
-            <p className={styles.reviewBody}>{review.body}</p>
-          </article>
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,240 +0,0 @@
-/* ── Cart Page ─────────────────────────────────────────────────────── */
-
-.page {
-  padding-block: var(--nymbal-spacing-xl);
-}
-
-.pageTitle {
-  font-size: 2rem;
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-bottom: var(--nymbal-spacing-lg);
-}
-
-.layout {
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-xl);
-}
-
-@media (min-width: 1024px) {
-  .layout {
-    flex-direction: row;
-    align-items: flex-start;
-  }
-}
-
-/* ── Cart Items ───────────────────────────────────────────────────── */
-
-.itemsSection {
-  flex: 1;
-  min-width: 0;
-}
-
-.itemsList {
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  display: flex;
-  gap: var(--nymbal-spacing-md);
-  padding: var(--nymbal-spacing-md) 0;
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-
-.item:first-child {
-  padding-top: 0;
-}
-
-.itemImage {
-  width: 5rem;
-  height: 5rem;
-  flex-shrink: 0;
-  border-radius: var(--nymbal-radius-md);
-  background-color: #f4f4f5;
-  overflow: hidden;
-}
-
-.itemImage img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.itemDetails {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-xs);
-}
-
-.itemName {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  text-decoration: none;
-  color: var(--nymbal-color-text);
-}
-
-.itemName:hover {
-  text-decoration: underline;
-}
-
-.itemVariant {
-  font-size: var(--nymbal-font-size-xs);
-  color: var(--nymbal-color-text-muted);
-}
-
-.itemActions {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-md);
-  margin-top: auto;
-}
-
-.itemPrice {
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-left: auto;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-.removeButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--nymbal-spacing-xs);
-  font-size: var(--nymbal-font-size-xs);
-  color: var(--nymbal-color-text-muted);
-  background: none;
-  border: none;
-  cursor: pointer;
-  border-radius: var(--nymbal-radius-sm);
-  transition: color var(--nymbal-transition-fast),
-    background-color var(--nymbal-transition-fast);
-}
-
-.removeButton:hover {
-  color: var(--nymbal-color-error);
-  background-color: #fef2f2;
-}
-
-@media (min-width: 640px) {
-  .itemImage {
-    width: 6rem;
-    height: 6rem;
-  }
-}
-
-/* ── Summary Sidebar ──────────────────────────────────────────────── */
-
-.summary {
-  background: var(--nymbal-color-surface);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-lg);
-  padding: var(--nymbal-spacing-lg);
-  width: 100%;
-}
-
-@media (min-width: 1024px) {
-  .summary {
-    width: 22rem;
-    flex-shrink: 0;
-    position: sticky;
-    top: 5.5rem;
-  }
-}
-
-.summaryTitle {
-  font-size: var(--nymbal-font-size-lg);
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-
-.summaryRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--nymbal-spacing-sm) 0;
-  font-size: var(--nymbal-font-size-sm);
-}
-
-.summaryLabel {
-  color: var(--nymbal-color-text-muted);
-}
-
-.summaryValue {
-  font-weight: var(--nymbal-font-weight-medium);
-}
-
-.summaryDivider {
-  border: 0;
-  border-top: 1px solid var(--nymbal-color-border);
-  margin: var(--nymbal-spacing-sm) 0;
-}
-
-.summaryTotal {
-  font-size: var(--nymbal-font-size-base);
-  font-weight: var(--nymbal-font-weight-bold);
-}
-
-.checkoutButton {
-  display: block;
-  width: 100%;
-  padding: 0.75rem;
-  margin-top: var(--nymbal-spacing-md);
-  font-size: var(--nymbal-font-size-base);
-  font-weight: var(--nymbal-font-weight-medium);
-  text-align: center;
-  color: var(--nymbal-color-text-inverse);
-  background-color: var(--nymbal-color-primary);
-  border: none;
-  border-radius: var(--nymbal-radius-md);
-  cursor: pointer;
-  text-decoration: none;
-  transition: background-color var(--nymbal-transition-fast);
-}
-
-.checkoutButton:hover {
-  background-color: var(--nymbal-color-primary-hover);
-  text-decoration: none;
-  color: var(--nymbal-color-text-inverse);
-}
-
-.checkoutButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.continueShoppingLink {
-  display: block;
-  text-align: center;
-  margin-top: var(--nymbal-spacing-md);
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-accent);
-  text-decoration: none;
-}
-
-.continueShoppingLink:hover {
-  text-decoration: underline;
-}
-
-/* ── Empty Cart ───────────────────────────────────────────────────── */
-
-.empty {
-  text-align: center;
-  padding: 4rem var(--nymbal-spacing-lg);
-}
-
-.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);
-  margin-bottom: var(--nymbal-spacing-lg);
-}