create-nymbal-app 0.4.0 → 0.5.0

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

@@ -1,137 +0,0 @@
-'use client'
-
-import { useEffect, useState, useCallback } from 'react'
-import type { DenormalisedProduct } from '@nymbalhq/sdk'
-import type { Facet, ProductSortKey } from '@nymbalhq/types'
-import { ProductFilter, SortDropdown, useProductList } from '@nymbalhq/react'
-import { ProductCard } from '@/components/server/ProductCard'
-import styles from '@/styles/pages/plp.module.css'
-
-interface ProductGridProps {
-  initialProducts: DenormalisedProduct[]
-  initialCursor: string | null
-  initialSort: ProductSortKey
-  /** The server-rendered listing's facets: none when the store's search cannot facet, and then no filter. */
-  initialFacets: Facet[]
-  /** The sort keys the store reports, in order, and the one it lists by when none is asked. */
-  sortKeys: ProductSortKey[]
-  defaultSort?: ProductSortKey | undefined
-  categorySlug?: string
-}
-
-export function ProductGrid({
-  initialProducts,
-  initialCursor,
-  initialSort,
-  initialFacets,
-  sortKeys,
-  defaultSort,
-  categorySlug,
-}: ProductGridProps) {
-  const { products, pagination, loading, sort, load, loadMore, setSort } = useProductList()
-  const [initialized, setInitialized] = useState(false)
-  const [showMobileFilters, setShowMobileFilters] = useState(false)
-
-  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(
-    (event: CustomEvent<{ sort: string }>) => {
-      const key = event.detail.sort as ProductSortKey
-      const url = new URL(window.location.href)
-      url.searchParams.set('sort', key)
-      window.history.replaceState(window.history.state, '', url)
-      void setSort(key)
-    },
-    [setSort],
-  )
-
-  const displayProducts = initialized && products.length > 0 ? products : initialProducts
-  const hasMore = initialized ? pagination.hasMore : !!initialCursor
-
-  const handleLoadMore = useCallback(() => {
-    if (hasMore && !loading) {
-      loadMore()
-    }
-  }, [hasMore, loading, loadMore])
-
-  return (
-    <div className={styles.layout}>
-      <aside className={styles.sidebar}>
-        {initialFacets.length > 0 && (
-          <>
-            <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={initialFacets} />
-            </div>
-          </>
-        )}
-      </aside>
-
-      <div className={styles.content}>
-        <div className={styles.sortBar}>
-          <span className={styles.resultCount}>
-            {displayProducts.length} product{displayProducts.length !== 1 ? 's' : ''}
-          </span>
-          {sortKeys.length > 0 && (
-            <SortDropdown
-              className={styles.sortSelect}
-              sortKeys={sortKeys}
-              value={initialized ? sort : initialSort}
-              defaultSort={defaultSort}
-              onSortChange={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} />
-  )
-}