create-nymbal-app 0.0.0 → 0.2.0

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

@@ -0,0 +1,116 @@
+'use client'
+
+import { useState, useCallback, type FormEvent } from 'react'
+import styles from '@/styles/pages/pdp.module.css'
+import { getNymbalClient } from '@/lib/client'
+
+interface ReviewFormProps {
+  productId: string
+}
+
+export function ReviewForm({ productId }: ReviewFormProps) {
+  const [rating, setRating] = useState(5)
+  const [title, setTitle] = useState('')
+  const [body, setBody] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setSubmitting(true)
+      setError(null)
+
+      try {
+        await getNymbalClient().adapter.reviews.submit({ productId, rating, title, body })
+        setSuccess(true)
+        setTitle('')
+        setBody('')
+        setRating(5)
+      } catch {
+        setError('Failed to submit review.')
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [productId, rating, title, body],
+  )
+
+  if (success) {
+    return (
+      <div className={styles.reviewsSection}>
+        <h3 className={styles.reviewsTitle}>Write a Review</h3>
+        <p style={{ fontSize: 'var(--nymbal-font-size-sm)', color: 'var(--nymbal-color-success)' }}>
+          Thank you for your review! It has been submitted successfully.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.reviewsSection}>
+      <h3 className={styles.reviewsTitle}>Write a Review</h3>
+
+      {error && (
+        <p
+          style={{
+            fontSize: 'var(--nymbal-font-size-sm)',
+            color: 'var(--nymbal-color-error)',
+            marginBottom: 'var(--nymbal-spacing-md)',
+          }}
+        >
+          {error}
+        </p>
+      )}
+
+      <form onSubmit={handleSubmit} data-testid="review-form">
+        <div className="form-group">
+          <label htmlFor="review-rating">Rating</label>
+          <div className={styles.reviewStars} style={{ cursor: 'pointer', fontSize: '1.5rem' }}>
+            {Array.from({ length: 5 }, (_, i) => (
+              <span
+                key={i}
+                onClick={() => setRating(i + 1)}
+                className={i < rating ? styles.starFilled : styles.starEmpty}
+                role="button"
+                tabIndex={0}
+                aria-label={`Rate ${i + 1} star${i === 0 ? '' : 's'}`}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') setRating(i + 1)
+                }}
+              >
+                ★
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className="form-group">
+          <label htmlFor="review-title">Title</label>
+          <input
+            id="review-title"
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            placeholder="Summarise your experience"
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="review-body">Review</label>
+          <textarea
+            id="review-body"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            required
+            rows={4}
+            placeholder="Tell us what you thought..."
+          />
+        </div>
+        <button type="submit" className="btn btn-primary" disabled={submitting}>
+          {submitting ? 'Submitting...' : 'Submit Review'}
+        </button>
+      </form>
+    </div>
+  )
+}

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

@@ -0,0 +1,27 @@
+'use client'
+
+import { useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { SearchBar } from '@nymbalhq/react'
+
+interface SearchProduct {
+  slug: string
+}
+
+export function SearchBarWrapper() {
+  const router = useRouter()
+
+  const handleSelect = useCallback(
+    (event: CustomEvent<{ product: unknown }>) => {
+      const product = event.detail.product as SearchProduct
+      if (product?.slug) {
+        router.push(`/product/${encodeURIComponent(product.slug)}`)
+      }
+    },
+    [router],
+  )
+
+  return (
+    <SearchBar placeholder="Search products..." debounceMs={300} onSearchSelect={handleSelect} />
+  )
+}

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

@@ -0,0 +1,141 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useSearchParams } from 'next/navigation'
+import Link from 'next/link'
+import Image from 'next/image'
+import { 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 { results, loading, search } = useSearch()
+
+  useEffect(() => {
+    if (query) {
+      search(query)
+    }
+  }, [query, search])
+
+  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 ? (
+        <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 && results.length > 0 ? (
+        <>
+          <p className={styles.resultCount}>
+            {results.length} result{results.length !== 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>
+        </>
+      ) : (
+        <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/client/SortDropdown.tsx

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

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

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

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

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

@@ -0,0 +1,79 @@
+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>
+  )
+}