create-nymbal-app 0.3.0 → 0.5.0

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

@@ -1,148 +0,0 @@
-'use client'
-
-import { useEffect, useState, useCallback } from 'react'
-import type { DenormalisedProduct } from '@nymbalhq/sdk'
-import type { Category, Facet, ProductSortKey } from '@nymbalhq/types'
-import { useProductList } from '@nymbalhq/react'
-import { ProductFilter } from '@nymbalhq/react'
-import { ProductCard } from '@/components/server/ProductCard'
-import { SortDropdown } from './SortDropdown'
-import styles from '@/styles/pages/plp.module.css'
-
-interface ProductGridProps {
-  initialProducts: DenormalisedProduct[]
-  initialCursor: string | null
-  initialSort: ProductSortKey
-  categorySlug?: string
-  categories: Category[]
-}
-
-export function ProductGrid({
-  initialProducts,
-  initialCursor,
-  initialSort,
-  categorySlug,
-  categories,
-}: ProductGridProps) {
-  const { products, facets, pagination, loading, sort, load, loadMore, setSort } = useProductList()
-  const [initialized, setInitialized] = useState(false)
-  const [showMobileFilters, setShowMobileFilters] = useState(false)
-  // Preserve the widest facet list seen so filter options never disappear during a
-  // filtered query (the API always returns full facets, but this guards against regressions).
-  const [stableFacets, setStableFacets] = useState<Facet[]>(
-    categories.length > 0
-      ? [
-          {
-            field: 'category',
-            label: 'Category',
-            values: categories.map((c) => ({ value: c.slug, label: c.name })),
-          },
-        ]
-      : [],
-  )
-
-  useEffect(() => {
-    load({ limit: 24, category: categorySlug, sort: initialSort })
-    setInitialized(true)
-  }, [categorySlug, initialSort, load])
-
-  // The URL carries the sort, so a reload or a shared link renders the same order server-side.
-  const handleSort = useCallback(
-    (key: ProductSortKey) => {
-      const url = new URL(window.location.href)
-      url.searchParams.set('sort', key)
-      window.history.replaceState(window.history.state, '', url)
-      void setSort(key)
-    },
-    [setSort],
-  )
-
-  // Keep stableFacets updated whenever the store returns a wider facet list.
-  useEffect(() => {
-    if (facets.length > 0) {
-      const incomingValues = facets.reduce((acc, f) => acc + f.values.length, 0)
-      const stableValues = stableFacets.reduce((acc, f) => acc + f.values.length, 0)
-      if (incomingValues >= stableValues) {
-        setStableFacets(facets)
-      }
-    }
-  }, [facets, stableFacets])
-
-  const displayProducts = initialized && products.length > 0 ? products : initialProducts
-  const hasMore = initialized ? pagination.hasMore : !!initialCursor
-
-  const handleLoadMore = useCallback(() => {
-    if (hasMore && !loading) {
-      loadMore()
-    }
-  }, [hasMore, loading, loadMore])
-
-  // Use stableFacets (which always contains the full category list) so all filter
-  // options remain visible after a category filter is applied.
-  const displayFacets = stableFacets
-
-  return (
-    <div className={styles.layout}>
-      <aside className={styles.sidebar}>
-        <button
-          className={styles.mobileFilterToggle}
-          onClick={() => setShowMobileFilters((v) => !v)}
-          type="button"
-        >
-          {showMobileFilters ? 'Hide Filters' : 'Show Filters'}
-        </button>
-        <div
-          className={styles.filterSection}
-          style={{ display: showMobileFilters ? 'block' : undefined }}
-        >
-          <ProductFilter facets={displayFacets} />
-        </div>
-      </aside>
-
-      <div className={styles.content}>
-        <div className={styles.sortBar}>
-          <span className={styles.resultCount}>
-            {displayProducts.length} product{displayProducts.length !== 1 ? 's' : ''}
-          </span>
-          <SortDropdown value={initialized ? sort : initialSort} onChange={handleSort} />
-        </div>
-
-        {displayProducts.length > 0 ? (
-          <div className="product-grid">
-            {displayProducts.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>
-        ) : (
-          <div className={styles.empty}>
-            <p>No products found.</p>
-          </div>
-        )}
-
-        {hasMore && (
-          <div className={styles.pagination}>
-            <button
-              type="button"
-              className="btn btn-secondary"
-              onClick={handleLoadMore}
-              disabled={loading}
-              data-testid="load-more"
-            >
-              {loading ? 'Loading...' : 'Load More'}
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,112 +0,0 @@
-'use client'
-
-import { useState, useEffect, useCallback, type FormEvent } from 'react'
-import { useAuth } from '@nymbalhq/react'
-import styles from '@/styles/pages/account.module.css'
-
-export function ProfileForm() {
-  const { customer, updateProfile } = useAuth()
-
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [phone, setPhone] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [success, setSuccess] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (customer) {
-      setFirstName(customer.firstName ?? '')
-      setLastName(customer.lastName ?? '')
-      setPhone(customer.phone ?? '')
-    }
-  }, [customer])
-
-  const handleSubmit = useCallback(
-    async (e: FormEvent) => {
-      e.preventDefault()
-      setSaving(true)
-      setError(null)
-      setSuccess(false)
-
-      try {
-        await updateProfile({ firstName, lastName, phone })
-        setSuccess(true)
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to update profile.')
-      } finally {
-        setSaving(false)
-      }
-    },
-    [firstName, lastName, phone, updateProfile],
-  )
-
-  return (
-    <div>
-      <h2 className={styles.pageTitle}>Profile</h2>
-
-      {success && (
-        <div className={`${styles.alert} ${styles.alertSuccess}`}>
-          Profile updated successfully.
-        </div>
-      )}
-      {error && <div className={`${styles.alert} ${styles.alertError}`}>{error}</div>}
-
-      <div className={styles.formCard}>
-        <h3 className={styles.formCardTitle}>Personal Information</h3>
-        <form onSubmit={handleSubmit}>
-          <div className={styles.formGrid}>
-            <div>
-              <label htmlFor="profile-first-name">First Name</label>
-              <input
-                id="profile-first-name"
-                data-testid="profile-firstName"
-                type="text"
-                value={firstName}
-                onChange={(e) => setFirstName(e.target.value)}
-                autoComplete="given-name"
-              />
-            </div>
-            <div>
-              <label htmlFor="profile-last-name">Last Name</label>
-              <input
-                id="profile-last-name"
-                data-testid="profile-lastName"
-                type="text"
-                value={lastName}
-                onChange={(e) => setLastName(e.target.value)}
-                autoComplete="family-name"
-              />
-            </div>
-            <div className={styles.formGridFull}>
-              <label htmlFor="profile-email">Email</label>
-              <input
-                id="profile-email"
-                type="email"
-                value={customer?.email ?? ''}
-                disabled
-                autoComplete="email"
-              />
-            </div>
-            <div className={styles.formGridFull}>
-              <label htmlFor="profile-phone">Phone</label>
-              <input
-                id="profile-phone"
-                type="tel"
-                value={phone}
-                onChange={(e) => setPhone(e.target.value)}
-                placeholder="Your phone number"
-                autoComplete="tel"
-              />
-            </div>
-          </div>
-          <div className={styles.formActions}>
-            <button type="submit" className={styles.saveButton} disabled={saving}>
-              {saving ? 'Saving...' : 'Save Changes'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

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

@@ -1,131 +0,0 @@
-'use client'
-
-import { useState, useCallback, type FormEvent } from 'react'
-import { useRouter } from 'next/navigation'
-import Link from 'next/link'
-import { useAuth } from '@nymbalhq/react'
-import styles from '@/styles/pages/account.module.css'
-
-export function RegisterForm() {
-  const router = useRouter()
-  const { register } = useAuth()
-
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  const handleSubmit = useCallback(
-    async (e: FormEvent) => {
-      e.preventDefault()
-      setError(null)
-
-      if (password !== confirmPassword) {
-        setError('Passwords do not match.')
-        return
-      }
-
-      setLoading(true)
-
-      try {
-        await register({ firstName, lastName, email, password })
-        router.push('/account')
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Registration failed. Please try again.')
-        setLoading(false)
-      }
-    },
-    [firstName, lastName, email, password, confirmPassword, register, router],
-  )
-
-  return (
-    <div className={styles.authPage}>
-      <div className={styles.authCard} data-testid="register-form">
-        <h1 className={styles.authTitle}>Create Account</h1>
-        <p className={styles.authSubtitle}>Join us and start shopping.</p>
-
-        {error && <div className={styles.alertError + ' ' + styles.alert}>{error}</div>}
-
-        <form onSubmit={handleSubmit} className={styles.authForm}>
-          <div className="form-group">
-            <label htmlFor="register-first-name">First Name</label>
-            <input
-              id="register-first-name"
-              type="text"
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-              required
-              placeholder="First name"
-              autoComplete="given-name"
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="register-last-name">Last Name</label>
-            <input
-              id="register-last-name"
-              type="text"
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-              required
-              placeholder="Last name"
-              autoComplete="family-name"
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="register-email">Email</label>
-            <input
-              id="register-email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              data-testid="register-email"
-              placeholder="you@example.com"
-              autoComplete="email"
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="register-password">Password</label>
-            <input
-              id="register-password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              placeholder="Create a password"
-              autoComplete="new-password"
-              minLength={8}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="register-confirm-password">Confirm Password</label>
-            <input
-              id="register-confirm-password"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              required
-              placeholder="Confirm your password"
-              autoComplete="new-password"
-            />
-          </div>
-          <button
-            type="submit"
-            className={styles.authSubmit}
-            disabled={loading}
-          >
-            {loading ? 'Creating account...' : 'Create Account'}
-          </button>
-        </form>
-
-        <p className={styles.authFooter}>
-          Already have an account?{' '}
-          <Link href="/account/login">Sign in</Link>
-        </p>
-      </div>
-    </div>
-  )
-}

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

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

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

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