create-nymbal-app 0.4.0 → 0.5.0

package/scaffold/templates/astro/src/styles/pages/cart.css

@@ -1,215 +0,0 @@
-/* ----------------------------------------------------------------
-   Cart page styles
-   ---------------------------------------------------------------- */
-
-/* ---- Layout ---- */
-
-.cart-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-xl, 2rem);
-}
-
-@media (min-width: 769px) {
-  .cart-layout {
-    grid-template-columns: 1fr 360px;
-    align-items: start;
-  }
-}
-
-/* ---- Cart header ---- */
-
-.cart-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--nymbal-spacing-lg, 1.5rem);
-}
-
-.cart-title {
-  font-size: 1.5rem;
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  color: var(--nymbal-color-primary, #18181b);
-}
-
-.cart-item-count {
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-  font-weight: var(--nymbal-font-weight-normal, 400);
-}
-
-/* ---- Cart items list ---- */
-
-.cart-items {
-  display: flex;
-  flex-direction: column;
-}
-
-/* ---- Line item ---- */
-
-.cart-line-item {
-  display: grid;
-  grid-template-columns: 80px 1fr auto;
-  gap: var(--nymbal-spacing-md, 1rem);
-  padding: var(--nymbal-spacing-md, 1rem) 0;
-  border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
-  align-items: start;
-}
-
-@media (min-width: 641px) {
-  .cart-line-item {
-    grid-template-columns: 100px 1fr auto auto;
-    gap: var(--nymbal-spacing-lg, 1.5rem);
-    align-items: center;
-  }
-}
-
-.cart-line-item:first-child {
-  border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
-}
-
-.cart-line-image {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
-  border-radius: var(--nymbal-radius-md, 0.5rem);
-  background-color: #f4f4f5;
-}
-
-.cart-line-info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-xs, 0.25rem);
-  min-width: 0;
-}
-
-.cart-line-name {
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-  font-weight: var(--nymbal-font-weight-medium, 500);
-  color: var(--nymbal-color-text, #18181b);
-  text-decoration: none;
-}
-
-.cart-line-name:hover {
-  color: var(--nymbal-color-accent, #2563eb);
-}
-
-.cart-line-variant {
-  font-size: var(--nymbal-font-size-xs, 0.75rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-}
-
-.cart-line-price-each {
-  font-size: var(--nymbal-font-size-xs, 0.75rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-}
-
-.cart-line-quantity {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm, 0.5rem);
-}
-
-.cart-line-total {
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  color: var(--nymbal-color-primary, #18181b);
-  text-align: right;
-  white-space: nowrap;
-}
-
-.cart-line-remove {
-  font-size: var(--nymbal-font-size-xs, 0.75rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-decoration: underline;
-  padding: 0;
-  transition: color var(--nymbal-transition-fast, 150ms) ease;
-}
-
-.cart-line-remove:hover {
-  color: var(--nymbal-color-error, #dc2626);
-}
-
-/* ---- Order summary sidebar ---- */
-
-.cart-summary {
-  background-color: #fafafa;
-  border: 1px solid var(--nymbal-color-border, #e4e4e7);
-  border-radius: var(--nymbal-radius-lg, 0.75rem);
-  padding: var(--nymbal-spacing-lg, 1.5rem);
-  position: sticky;
-  top: 80px;
-}
-
-.cart-summary-title {
-  font-size: var(--nymbal-font-size-lg, 1.125rem);
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  color: var(--nymbal-color-primary, #18181b);
-  margin-bottom: var(--nymbal-spacing-md, 1rem);
-  padding-bottom: var(--nymbal-spacing-md, 1rem);
-  border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
-}
-
-.cart-summary-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--nymbal-spacing-xs, 0.25rem) 0;
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-}
-
-.cart-summary-row dt {
-  color: var(--nymbal-color-text-muted, #71717a);
-}
-
-.cart-summary-row dd {
-  font-weight: var(--nymbal-font-weight-medium, 500);
-  color: var(--nymbal-color-text, #18181b);
-}
-
-.cart-summary-total {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: var(--nymbal-spacing-md, 1rem);
-  margin-top: var(--nymbal-spacing-md, 1rem);
-  border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
-  font-size: var(--nymbal-font-size-lg, 1.125rem);
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  color: var(--nymbal-color-primary, #18181b);
-}
-
-.cart-summary-actions {
-  margin-top: var(--nymbal-spacing-lg, 1.5rem);
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-sm, 0.5rem);
-}
-
-.cart-summary-actions .btn {
-  width: 100%;
-  justify-content: center;
-}
-
-/* ---- Empty cart ---- */
-
-.cart-empty {
-  text-align: center;
-  padding: 4rem var(--nymbal-spacing-md, 1rem);
-}
-
-.cart-empty-title {
-  font-size: var(--nymbal-font-size-lg, 1.125rem);
-  font-weight: var(--nymbal-font-weight-medium, 500);
-  color: var(--nymbal-color-text, #18181b);
-  margin-bottom: var(--nymbal-spacing-xs, 0.25rem);
-}
-
-.cart-empty-text {
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-  margin-bottom: var(--nymbal-spacing-lg, 1.5rem);
-}

package/scaffold/templates/astro/src/styles/pages/checkout.css

@@ -1,270 +0,0 @@
-/* ----------------------------------------------------------------
-   Checkout page styles
-   ---------------------------------------------------------------- */
-
-/* ---- Layout ---- */
-
-.checkout-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-xl, 2rem);
-}
-
-@media (min-width: 769px) {
-  .checkout-layout {
-    grid-template-columns: 1fr 380px;
-    align-items: start;
-  }
-}
-
-/* ---- Step indicator ---- */
-
-.checkout-steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  margin-bottom: var(--nymbal-spacing-xl, 2rem);
-  padding: var(--nymbal-spacing-md, 1rem) 0;
-  counter-reset: step;
-}
-
-.checkout-step {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm, 0.5rem);
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-  white-space: nowrap;
-}
-
-.checkout-step::before {
-  counter-increment: step;
-  content: counter(step);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--nymbal-radius-full, 9999px);
-  border: 2px solid var(--nymbal-color-border, #e4e4e7);
-  font-size: var(--nymbal-font-size-xs, 0.75rem);
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  flex-shrink: 0;
-}
-
-.checkout-step.active {
-  color: var(--nymbal-color-primary, #18181b);
-  font-weight: var(--nymbal-font-weight-medium, 500);
-}
-
-.checkout-step.active::before {
-  background-color: var(--nymbal-color-primary, #18181b);
-  color: var(--nymbal-color-text-inverse, #fff);
-  border-color: var(--nymbal-color-primary, #18181b);
-}
-
-.checkout-step.completed::before {
-  background-color: var(--nymbal-color-success, #16a34a);
-  color: var(--nymbal-color-text-inverse, #fff);
-  border-color: var(--nymbal-color-success, #16a34a);
-  content: '\2713';
-}
-
-.checkout-step-divider {
-  width: 40px;
-  height: 2px;
-  background-color: var(--nymbal-color-border, #e4e4e7);
-  margin: 0 var(--nymbal-spacing-sm, 0.5rem);
-  flex-shrink: 0;
-}
-
-.checkout-step-divider.completed {
-  background-color: var(--nymbal-color-success, #16a34a);
-}
-
-@media (max-width: 640px) {
-  .checkout-step span {
-    display: none;
-  }
-
-  .checkout-step-divider {
-    width: 24px;
-  }
-}
-
-/* ---- Form sections ---- */
-
-.checkout-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-xl, 2rem);
-}
-
-.checkout-section {
-  padding-bottom: var(--nymbal-spacing-xl, 2rem);
-  border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
-}
-
-.checkout-section:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.checkout-section-title {
-  font-size: var(--nymbal-font-size-lg, 1.125rem);
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  color: var(--nymbal-color-primary, #18181b);
-  margin-bottom: var(--nymbal-spacing-md, 1rem);
-}
-
-/* ---- Address form grid ---- */
-
-.address-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-md, 1rem);
-}
-
-@media (min-width: 641px) {
-  .address-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.address-grid .full-width {
-  grid-column: 1 / -1;
-}
-
-/* ---- Payment section ---- */
-
-.payment-section {
-  background-color: #fafafa;
-  border: 1px solid var(--nymbal-color-border, #e4e4e7);
-  border-radius: var(--nymbal-radius-lg, 0.75rem);
-  padding: var(--nymbal-spacing-lg, 1.5rem);
-}
-
-.payment-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--nymbal-spacing-md, 1rem);
-}
-
-@media (min-width: 641px) {
-  .payment-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.payment-grid .card-number {
-  grid-column: 1 / -1;
-}
-
-/* ---- Order summary sidebar (checkout variant) ---- */
-
-.checkout-summary {
-  background-color: #fafafa;
-  border: 1px solid var(--nymbal-color-border, #e4e4e7);
-  border-radius: var(--nymbal-radius-lg, 0.75rem);
-  padding: var(--nymbal-spacing-lg, 1.5rem);
-  position: sticky;
-  top: 80px;
-}
-
-.checkout-summary-title {
-  font-size: var(--nymbal-font-size-lg, 1.125rem);
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  color: var(--nymbal-color-primary, #18181b);
-  margin-bottom: var(--nymbal-spacing-md, 1rem);
-  padding-bottom: var(--nymbal-spacing-md, 1rem);
-  border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
-}
-
-.checkout-summary-items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-sm, 0.5rem);
-  margin-bottom: var(--nymbal-spacing-md, 1rem);
-}
-
-.checkout-summary-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  gap: var(--nymbal-spacing-sm, 0.5rem);
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-}
-
-.checkout-summary-item-name {
-  color: var(--nymbal-color-text, #18181b);
-  flex: 1;
-  min-width: 0;
-}
-
-.checkout-summary-item-qty {
-  color: var(--nymbal-color-text-muted, #71717a);
-  flex-shrink: 0;
-}
-
-.checkout-summary-item-price {
-  font-weight: var(--nymbal-font-weight-medium, 500);
-  flex-shrink: 0;
-}
-
-.checkout-summary-row {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--nymbal-spacing-xs, 0.25rem) 0;
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-}
-
-.checkout-summary-row dt {
-  color: var(--nymbal-color-text-muted, #71717a);
-}
-
-.checkout-summary-row dd {
-  font-weight: var(--nymbal-font-weight-medium, 500);
-}
-
-.checkout-summary-total {
-  display: flex;
-  justify-content: space-between;
-  padding-top: var(--nymbal-spacing-md, 1rem);
-  margin-top: var(--nymbal-spacing-sm, 0.5rem);
-  border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
-  font-size: var(--nymbal-font-size-lg, 1.125rem);
-  font-weight: var(--nymbal-font-weight-bold, 700);
-  color: var(--nymbal-color-primary, #18181b);
-}
-
-/* ---- Submit area ---- */
-
-.checkout-submit {
-  margin-top: var(--nymbal-spacing-lg, 1.5rem);
-}
-
-.checkout-submit .btn {
-  width: 100%;
-  justify-content: center;
-  padding: var(--nymbal-spacing-md, 1rem);
-  font-size: var(--nymbal-font-size-base, 1rem);
-}
-
-.checkout-terms {
-  font-size: var(--nymbal-font-size-xs, 0.75rem);
-  color: var(--nymbal-color-text-muted, #71717a);
-  text-align: center;
-  margin-top: var(--nymbal-spacing-sm, 0.5rem);
-}
-
-/* ---- Error message ---- */
-
-.checkout-error {
-  padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
-  background-color: rgba(220, 38, 38, 0.06);
-  border: 1px solid rgba(220, 38, 38, 0.2);
-  border-radius: var(--nymbal-radius-md, 0.5rem);
-  color: var(--nymbal-color-error, #dc2626);
-  font-size: var(--nymbal-font-size-sm, 0.875rem);
-}

package/scaffold/templates/nextjs/app/account/addresses/page.tsx

@@ -1,10 +0,0 @@
-import type { Metadata } from 'next'
-import { AddressManager } from '@/components/client/AddressManager'
-
-export const metadata: Metadata = {
-  title: 'Addresses',
-}
-
-export default function AddressesPage() {
-  return <AddressManager />
-}

package/scaffold/templates/nextjs/app/account/login/page.tsx

@@ -1,23 +0,0 @@
-import type { Metadata } from 'next'
-import { Suspense } from 'react'
-import { LoginForm } from '@/components/client/LoginForm'
-
-export const metadata: Metadata = {
-  title: 'Sign In',
-}
-
-export default function LoginPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="loading-center">
-          <div className="spinner spinner-lg" role="status">
-            <span className="visually-hidden">Loading...</span>
-          </div>
-        </div>
-      }
-    >
-      <LoginForm />
-    </Suspense>
-  )
-}

package/scaffold/templates/nextjs/app/account/profile/page.tsx

@@ -1,10 +0,0 @@
-import type { Metadata } from 'next'
-import { ProfileForm } from '@/components/client/ProfileForm'
-
-export const metadata: Metadata = {
-  title: 'Profile',
-}
-
-export default function ProfilePage() {
-  return <ProfileForm />
-}

package/scaffold/templates/nextjs/app/account/register/page.tsx

@@ -1,10 +0,0 @@
-import type { Metadata } from 'next'
-import { RegisterForm } from '@/components/client/RegisterForm'
-
-export const metadata: Metadata = {
-  title: 'Create Account',
-}
-
-export default function RegisterPage() {
-  return <RegisterForm />
-}

package/scaffold/templates/nextjs/app/cart/page.tsx

@@ -1,10 +0,0 @@
-import type { Metadata } from 'next'
-import { CartPage } from '@/components/client/CartPage'
-
-export const metadata: Metadata = {
-  title: 'Shopping Cart',
-}
-
-export default function CartRoute() {
-  return <CartPage />
-}

package/scaffold/templates/nextjs/app/category/[slug]/page.tsx

@@ -1,61 +0,0 @@
-import type { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import { fetchProducts, fetchCategories, fetchCapabilities, sortFromSearchParams } from '@/lib/api'
-import { Breadcrumb } from '@/components/server/Breadcrumb'
-import { ProductGrid } from '@/components/client/ProductGrid'
-import styles from '@/styles/pages/plp.module.css'
-
-interface CategoryPageProps {
-  params: Promise<{ slug: string }>
-  searchParams: Promise<{ sort?: string | string[] }>
-}
-
-export async function generateMetadata({
-  params,
-}: CategoryPageProps): Promise<Metadata> {
-  const { slug } = await params
-  const categories = await fetchCategories()
-  const category = categories.find((c) => c.slug === slug)
-
-  return {
-    title: category?.name ?? slug,
-    description: category?.description ?? `Browse products in ${slug}.`,
-  }
-}
-
-export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
-  const { slug } = await params
-  const capabilities = await fetchCapabilities()
-  const sort = sortFromSearchParams(await searchParams, capabilities?.catalog)
-  const [{ items, nextCursor, facets }, categories] = await Promise.all([
-    fetchProducts({ limit: 24, category: slug, sort }),
-    fetchCategories(),
-  ])
-
-  const category = categories.find((c) => c.slug === slug)
-  if (!category) notFound()
-
-  return (
-    <div className={`container ${styles.page}`}>
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: category.name },
-        ]}
-      />
-      <h1 className={styles.pageTitle}>{category.name}</h1>
-      {category.description && (
-        <p className="text-muted mb-lg">{category.description}</p>
-      )}
-      <ProductGrid
-        initialProducts={items}
-        initialCursor={nextCursor}
-        initialSort={sort}
-        initialFacets={facets ?? []}
-        sortKeys={capabilities?.catalog.sortKeys ?? []}
-        defaultSort={capabilities?.catalog.defaultSort}
-        categorySlug={slug}
-      />
-    </div>
-  )
-}

package/scaffold/templates/nextjs/app/checkout/page.tsx

@@ -1,17 +0,0 @@
-import type { Metadata } from 'next'
-import { CheckoutForm } from '@/components/client/CheckoutForm'
-import { fetchCapabilities } from '@/lib/api'
-
-export const metadata: Metadata = {
-  title: 'Checkout',
-}
-
-export default async function CheckoutRoute() {
-  const capabilities = await fetchCapabilities()
-  if (capabilities === null) {
-    throw new Error(
-      'The store did not answer GET /api/capabilities, so checkout cannot tell how to take a payment.',
-    )
-  }
-  return <CheckoutForm capabilities={capabilities} />
-}

package/scaffold/templates/nextjs/app/page.tsx

@@ -1,63 +0,0 @@
-import Link from 'next/link'
-import { fetchProducts, fetchCategories } from '@/lib/api'
-import { organizationJsonLd } from '@/lib/seo'
-import { HeroSection } from '@/components/server/HeroSection'
-import { CategoryNav } from '@/components/server/CategoryNav'
-import { ProductCard } from '@/components/server/ProductCard'
-import { NewsletterSignup } from '@/components/client/NewsletterSignup'
-import styles from '@/styles/pages/home.module.css'
-
-export default async function HomePage() {
-  const [{ items: products }, categories] = await Promise.all([
-    fetchProducts({ limit: 8 }),
-    fetchCategories(),
-  ])
-
-  const jsonLd = organizationJsonLd(
-    'Nymbal Store',
-    process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000',
-  )
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
-
-      <HeroSection />
-
-      <CategoryNav categories={categories} />
-
-      <section className={`container ${styles.featuredSection}`}>
-        <div className={styles.featuredHeader}>
-          <h2 className={styles.featuredTitle}>Featured Products</h2>
-          <Link href="/products" className={styles.featuredViewAll}>
-            View All
-          </Link>
-        </div>
-        {products.length > 0 ? (
-          <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>
-        ) : (
-          <p className="text-muted text-center">No products available yet. Check back soon.</p>
-        )}
-      </section>
-
-      <NewsletterSignup />
-    </>
-  )
-}