npm - @forgecart/cli - Versions diffs - 2.202610052310.0 → 2.202610071755.0 - Mend

@forgecart/cli 2.202610052310.0 → 2.202610071755.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/templates/storefront-shadcn/src/components/Header.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+'use client';
+import { useEffect, useState } from 'react';
+import type { LocaleBinding } from '../lib/locale/localized-path';
+import { useCart } from '../lib/cart-context';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { LocaleLink } from './LocaleLink';
+import { Badge } from './ui/badge';
+import { buttonVariants } from './ui/button';
+export interface HeaderProps {
+  /**
+   * The request's locale, threaded down from the layout. A client component
+   * cannot read it: `usePathname()` returns the REWRITTEN path under the
+   * locale rewrite, so deriving it here would emit English links on every
+   * German page.
+   */
+  locale: LocaleBinding;
+  /** The channel's languages, for the switcher. */
+  languageCodes: readonly string[];
+}
+/** Top navigation: Home / Products / Cart, with a live cart item count. */
+export function Header({ locale, languageCodes }: HeaderProps) {
+  const { itemCount } = useCart();
+  // The count is seeded from the server's `initialCart`, but a cookie set after
+  // that render can leave the client with a different count — rendering the
+  // badge on the server would then hydration-mismatch. Gate it on a
+  // post-hydration mount flag so the server emits no badge; it appears with the
+  // live count only once the client takes over.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return (
+    <header className="sticky top-0 z-30 border-b bg-card">
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
+        <LocaleLink href="/" locale={locale} className="text-lg font-bold tracking-tight">
+          Storefront
+        </LocaleLink>
+        <nav aria-label="Store" className="flex items-center gap-1 text-sm font-medium">
+          <LocaleLink
+            href="/"
+            locale={locale}
+            className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+          >
+            Home
+          </LocaleLink>
+          <LocaleLink
+            href="/products"
+            locale={locale}
+            className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+          >
+            Products
+          </LocaleLink>
+          <LocaleLink
+            href="/cart"
+            locale={locale}
+            data-fc-track="header-cart"
+            className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+          >
+            Cart
+            {mounted && itemCount > 0 && <Badge className="font-semibold">{itemCount}</Badge>}
+          </LocaleLink>
+          <LanguageSwitcher locale={locale} languageCodes={languageCodes} />
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/storefront-shadcn/src/components/LanguageSwitcher.tsx ADDED Viewed

@@ -0,0 +1,96 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { switchedLocalePath } from '../lib/locale/localized-path';
+import type { LocaleBinding } from '../lib/locale/localized-path';
+import { buttonVariants } from './ui/button';
+import { cn } from './ui/utils';
+/**
+ * The language switcher (#1346, W1-8 / S2).
+ *
+ * Deliberately plain `<a>` elements rather than `<LocaleLink>` / `next/link`,
+ * for two reasons that point the same way:
+ *
+ *  1. **A locale switch must produce a NEW DOCUMENT.** Under the middleware
+ *     rewrite `/products` and `/de/products` render the SAME route, so a
+ *     client-side navigation between them changes no route segment and the
+ *     shared root layout is not re-run — `<html lang>` would keep the language
+ *     the shopper just left. A document load re-enters the middleware and
+ *     re-resolves the locale from the URL, which makes the new `lang`, the new
+ *     `Content-Language` and the new session language unconditional.
+ *  2. **These anchors are the discovery bridge between clusters.** Every other
+ *     link stays inside its own locale by construction, so without a real
+ *     crawlable `<a>` here nothing on the English site would ever point at the
+ *     German one. (The head-level `<link rel="alternate" hreflang>` annotation
+ *     that formalises the relationship is #1347's; `hrefLang` on the anchor is
+ *     just the honest description of where this particular link goes.)
+ *
+ * **Why `usePathname()` here, when `LocaleLink` forbids it.** What that hook
+ * cannot give you is the LOCALE: the rewrite strips the prefix, so the path it
+ * returns names the route, not the language — which is why the binding arrives
+ * as a prop. The PATH is the one thing it reports correctly, and it does so on
+ * both branches: on a prefixed URL it returns the rewritten (unprefixed) route,
+ * and on an unprefixed URL it returns the path itself. Either form is safe
+ * input, because the grammar strips any prefix before applying the target's —
+ * `de → fr` yields `/fr/...`, never `/fr/de/...`, whichever form it saw.
+ *
+ * The alternative — carrying the path in a middleware request header — was
+ * rejected: the header is only authored on the REWRITE branch, so it is absent
+ * on exactly the unprefixed pages this switcher must work on, and populating it
+ * there would force `NextResponse.next({request})` (a full copy of the inbound
+ * header block) onto every request that currently takes the fast path.
+ */
+export interface LanguageSwitcherProps {
+  /** The request's locale binding, from the layout. Never derived here. */
+  locale: LocaleBinding;
+  /** The channel's languages, from `getRequestLocale()`. */
+  languageCodes: readonly string[];
+}
+export function LanguageSwitcher({ locale, languageCodes }: LanguageSwitcherProps) {
+  const pathname = usePathname();
+  // A one-language channel has nothing to switch between, and the grammar
+  // never serves it a prefix — a single dead entry would be noise.
+  if (languageCodes.length < 2) return null;
+  return (
+    <nav aria-label="Language" className="flex items-center gap-1">
+      {languageCodes.map((code) => {
+        // The current language is not a link to itself: a self-link is a crawl
+        // trap and reads as an available action when it is not one.
+        if (code === locale.locale) {
+          return (
+            <span
+              key={code}
+              aria-current="true"
+              className={cn(
+                buttonVariants({ variant: 'ghost', size: 'sm' }),
+                'h-7 bg-accent px-2 text-xs font-semibold text-accent-foreground uppercase',
+              )}
+            >
+              {code}
+            </span>
+          );
+        }
+        return (
+          <a
+            key={code}
+            href={switchedLocalePath(code, pathname, locale)}
+            hrefLang={code}
+            data-fc-track="language-switch"
+            className={cn(
+              buttonVariants({ variant: 'ghost', size: 'sm' }),
+              'h-7 px-2 text-xs uppercase',
+            )}
+          >
+            {code}
+          </a>
+        );
+      })}
+    </nav>
+  );
+}

package/templates/storefront-shadcn/src/components/LocaleLink.tsx ADDED Viewed

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import type { ComponentProps, ReactNode } from 'react';
+import { localizedPath } from '../lib/locale/localized-path';
+import type { LocaleBinding } from '../lib/locale/localized-path';
+/**
+ * An internal link that stays inside the request's locale cluster (#1346,
+ * W1-8 / S2).
+ *
+ * Every internal navigation goes through this instead of `next/link` directly.
+ * A German page whose links all point at the English cluster leaves every
+ * German page but the entry point unreachable by following links, so a crawler
+ * never discovers them and the locale is effectively unindexed.
+ *
+ * The locale arrives as a PROP and is never derived here. Under the middleware
+ * rewrite the browser's URL and the rendered route differ — `/de/products`
+ * renders the `/products` route — so `usePathname()` returns the REWRITTEN
+ * path, and a component that read the locale from it would emit English links
+ * on every German page while looking correct in review. Server components take
+ * the binding from `getRequestLocale()`; client components receive it from
+ * whichever server component renders them.
+ *
+ * `href` is the UNPREFIXED route path, always — the same string you would have
+ * written before the locale layer existed. Prefixing is this component's job.
+ */
+// `locale` is omitted because `next/link` HAS a prop by that name — the Pages
+// Router i18n feature, typed `string | false`. This storefront does its own
+// locale routing (App Router, middleware rewrite), so that prop is never the
+// one we want, and forwarding it would collide with the binding below: the
+// production build fails with TS2430, which `next dev` never reports.
+type ForwardedLinkProps = Omit<ComponentProps<typeof Link>, 'href' | 'children' | 'locale'>;
+export interface LocaleLinkProps extends ForwardedLinkProps {
+  /** The unprefixed route path, e.g. `/products`. */
+  href: string;
+  /** The request's locale binding, from `getRequestLocale()`. */
+  locale: LocaleBinding;
+  children: ReactNode;
+}
+export function LocaleLink({ href, locale, children, ...rest }: LocaleLinkProps): ReactNode {
+  return (
+    <Link href={localizedPath(href, locale)} {...rest}>
+      {children}
+    </Link>
+  );
+}

package/templates/storefront-shadcn/src/components/ProductCard.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import type { LocaleBinding } from '../lib/locale/localized-path';
+import { LocaleLink } from './LocaleLink';
+import { Card, CardContent } from './ui/card';
+import { getAssetAlt } from '../lib/asset-alt';
+import type { Product } from '../lib/forgecart';
+import { formatPrice, getStartingPrice } from '../lib/format';
+/**
+ * A product tile linking to its detail page — a shadcn/ui card (media, then
+ * the card's content) inside one link. Used by the home and grid pages;
+ * `emphasis` renders the home grid's large lead tile with a bigger title.
+ */
+export function ProductCard({
+  product,
+  locale,
+  emphasis = false,
+}: {
+  product: Product;
+  /** The request's locale binding — a card's link must stay in its cluster. */
+  locale: LocaleBinding;
+  emphasis?: boolean;
+}) {
+  const startingPrice = getStartingPrice(product);
+  return (
+    <LocaleLink
+      href={`/products/${product.slug}`}
+      locale={locale}
+      data-fc-track="product-card"
+      className="group block h-full rounded-xl"
+    >
+      <Card className="h-full gap-0 overflow-hidden py-0 transition-shadow group-hover:shadow-md">
+        <figure className="aspect-square overflow-hidden bg-muted">
+          {product.featuredAsset ? (
+            // Plain <img> keeps the template dependency-free of next/image config.
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={product.featuredAsset.preview}
+              alt={getAssetAlt(product.featuredAsset)}
+              loading="lazy"
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
+              No image
+            </div>
+          )}
+        </figure>
+        <CardContent className="space-y-1 p-4">
+          <h3 className={`font-medium ${emphasis ? 'text-lg' : 'text-base'}`}>{product.name}</h3>
+          {startingPrice !== null && (
+            <p className="text-sm text-muted-foreground">From {formatPrice(startingPrice)}</p>
+          )}
+        </CardContent>
+      </Card>
+    </LocaleLink>
+  );
+}

package/templates/storefront-shadcn/src/components/ProductPurchase.tsx ADDED Viewed

@@ -0,0 +1,235 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from './ui/button';
+import { cn } from './ui/utils';
+import { useCart } from '../lib/cart-context';
+import type { Product, ProductVariant, SellingPlan, SellingPlanGroup } from '../lib/forgecart';
+import {
+  formatPrice,
+  getPlanCadenceLabel,
+  getPlanPreviewPrice,
+  getPlanSavingsLabel,
+} from '../lib/format';
+/**
+ * Variant picker + purchase-options + add-to-cart for the product detail page.
+ *
+ * The customer picks one value per option group (Size, Color, …); the matching
+ * variant drives the displayed price and what gets added to the cart — you add a
+ * **variant**, never the product. Single-variant products skip the selectors.
+ *
+ * When the selected variant has subscription selling plans (passed in as
+ * `planGroupsByVariant`, fetched server-side by the page), a "Purchase options"
+ * control appears above Add-to-cart: a one-time purchase plus one option per
+ * plan, each with a price preview and a savings/trial hint. The chosen plan id
+ * (or `undefined` for one-time) flows into the cart on Add. Variants with no
+ * plans keep the plain one-time add-to-cart path unchanged.
+ */
+export function ProductPurchase({
+  product,
+  planGroupsByVariant = {},
+}: {
+  product: Product;
+  planGroupsByVariant?: Record<string, SellingPlanGroup[]>;
+}) {
+  const { add, pending } = useCart();
+  const [added, setAdded] = useState(false);
+  // Default selection = the first variant's option values, so a price shows
+  // immediately. Keyed by option group id -> selected option id.
+  const [selected, setSelected] = useState<Record<string, string>>(() => {
+    const sel: Record<string, string> = {};
+    for (const option of product.variants[0]?.options ?? []) {
+      sel[option.groupId] = option.id;
+    }
+    return sel;
+  });
+  const variant: ProductVariant | undefined = useMemo(() => {
+    if (product.variants.length <= 1) {
+      return product.variants[0];
+    }
+    return product.variants.find(
+      (v) => v.options.length > 0 && v.options.every((o) => selected[o.groupId] === o.id),
+    );
+  }, [product.variants, selected]);
+  // The selling-plan groups the *selected* variant is eligible for.
+  const groups: SellingPlanGroup[] = useMemo(
+    () => (variant ? (planGroupsByVariant[variant.id] ?? []) : []),
+    [planGroupsByVariant, variant],
+  );
+  // The selectable plans (enabled only), flattened across applicable groups.
+  const plans: SellingPlan[] = useMemo(
+    () => groups.flatMap((g) => g.plans).filter((p) => p.enabled),
+    [groups],
+  );
+  // One-time is offered unless EVERY applicable group forbids it (subscription-only).
+  const oneTimeAllowed = groups.length === 0 || groups.some((g) => g.oneTimePurchaseAllowed);
+  const hasPurchaseOptions = plans.length > 0;
+  // `null` = one-time purchase; otherwise the chosen plan id.
+  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
+  // The set of valid choices changes with the variant (and thus its plans). Re-
+  // normalize the selection whenever that signature changes: keep a still-valid
+  // choice, otherwise default to one-time when allowed, else the first plan —
+  // never leave a stale id that is no longer offered for the current variant.
+  // `planIds` is a stable, primitive signature of the current plan set, so the
+  // effect re-runs exactly when the options (or the one-time gate) change and
+  // closes over no array identities.
+  const planIds = plans.map((p) => p.id).join(',');
+  useEffect(() => {
+    const ids = planIds ? planIds.split(',') : [];
+    const validIds = new Set(ids);
+    setSelectedPlanId((current) => {
+      if (current !== null && validIds.has(current)) {
+        return current;
+      }
+      if (oneTimeAllowed) {
+        return null;
+      }
+      return ids[0] ?? null;
+    });
+  }, [planIds, oneTimeAllowed]);
+  const selectedPlan: SellingPlan | undefined = useMemo(
+    () => plans.find((p) => p.id === selectedPlanId),
+    [plans, selectedPlanId],
+  );
+  // Price preview for the chosen option: one-time shows the variant price; a
+  // plan shows its policy-adjusted per-unit price.
+  const previewPrice = useMemo(() => {
+    if (!variant) {
+      return null;
+    }
+    if (!selectedPlan) {
+      return variant.priceWithTax;
+    }
+    return getPlanPreviewPrice(variant.priceWithTax, selectedPlan);
+  }, [variant, selectedPlan]);
+  const onAdd = () => {
+    if (!variant) {
+      return;
+    }
+    add(variant.id, 1, selectedPlanId ?? undefined);
+    setAdded(true);
+    window.setTimeout(() => setAdded(false), 1500);
+  };
+  return (
+    <div className="space-y-4">
+      {variant && previewPrice !== null ? (
+        <p className="text-xl font-semibold text-foreground">{formatPrice(previewPrice)}</p>
+      ) : (
+        <p className="text-sm text-muted-foreground">Select options to see the price.</p>
+      )}
+      {product.optionGroups.map((group) => (
+        <div key={group.id}>
+          <h3 className="mb-1 text-sm font-medium text-foreground/80">{group.name}</h3>
+          <div className="flex flex-wrap gap-2">
+            {group.options.map((opt) => {
+              const active = selected[group.id] === opt.id;
+              return (
+                <button
+                  key={opt.id}
+                  type="button"
+                  onClick={() => setSelected((s) => ({ ...s, [group.id]: opt.id }))}
+                  className={cn(
+                    'rounded-md border px-3 py-1.5 text-sm transition',
+                    active
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : 'text-foreground/80 hover:border-primary',
+                  )}
+                >
+                  {opt.name}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      {variant && hasPurchaseOptions && (
+        <div>
+          <h3 className="mb-1 text-sm font-medium text-foreground/80">Purchase options</h3>
+          <div className="flex flex-col gap-2">
+            {oneTimeAllowed && (
+              <PurchaseOption
+                label="One-time purchase"
+                priceLabel={formatPrice(variant.priceWithTax)}
+                active={selectedPlanId === null}
+                onSelect={() => setSelectedPlanId(null)}
+              />
+            )}
+            {plans.map((plan) => {
+              const savings = getPlanSavingsLabel(plan);
+              const hint = [savings, plan.trialDays > 0 ? `${plan.trialDays}-day free trial` : null]
+                .filter(Boolean)
+                .join(' · ');
+              return (
+                <PurchaseOption
+                  key={plan.id}
+                  label={`Subscribe — ${getPlanCadenceLabel(plan)}`}
+                  hint={hint || undefined}
+                  priceLabel={formatPrice(getPlanPreviewPrice(variant.priceWithTax, plan))}
+                  active={selectedPlanId === plan.id}
+                  onSelect={() => setSelectedPlanId(plan.id)}
+                />
+              );
+            })}
+          </div>
+        </div>
+      )}
+      <Button
+        type="button"
+        onClick={onAdd}
+        disabled={!variant || pending}
+        data-fc-track="add-to-cart"
+      >
+        {pending ? 'Adding…' : added ? 'Added!' : variant ? 'Add to cart' : 'Unavailable'}
+      </Button>
+    </div>
+  );
+}
+/** A single selectable purchase option (one-time or a subscription plan). */
+function PurchaseOption({
+  label,
+  hint,
+  priceLabel,
+  active,
+  onSelect,
+}: {
+  label: string;
+  hint?: string;
+  priceLabel: string;
+  active: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      aria-pressed={active}
+      className={cn(
+        'flex items-center justify-between gap-3 rounded-md border px-3 py-2 text-left text-sm transition',
+        active ? 'border-primary ring-1 ring-primary' : 'hover:border-primary',
+      )}
+    >
+      <span className="min-w-0">
+        <span className="block font-medium text-foreground">{label}</span>
+        {hint && <span className="block text-xs text-muted-foreground">{hint}</span>}
+      </span>
+      <span className="shrink-0 font-medium text-foreground">{priceLabel}</span>
+    </button>
+  );
+}

package/templates/storefront-shadcn/src/components/account/AccountMessage.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
+/**
+ * The one block every account-link state renders through (#1472).
+ *
+ * `/verify` and `/reset-password` are pages whose whole content IS an outcome:
+ * a shopper arrives holding a one-shot token and leaves knowing what happened
+ * to it. Routing all of those through one component is what keeps the
+ * vocabulary consistent — the same shape says "verified" and "this link has
+ * expired" — and keeps each page a table of copy rather than a pile of markup
+ * variants.
+ *
+ * Semantic tokens only, through the shadcn/ui Alert's variants (`success`,
+ * `warning`, …), per the theme contract in `globals.css`: a brand lives in its
+ * `:root` block alone, so no component here names a color.
+ *
+ * No `'use client'` and no hooks, so it renders on the server for the verify
+ * page and rides into the bundle when a client form renders it.
+ */
+export type AccountMessageTone = 'success' | 'info' | 'warning' | 'error';
+/**
+ * The Alert variant AND the live-region role per tone.
+ *
+ * `alert` is for something that has gone wrong and interrupts; `status` is a
+ * polite announcement. A success message that arrives with the first paint is
+ * not an interruption, and announcing it as one is how a screen reader ends up
+ * shouting "Your e-mail is verified".
+ */
+const TONES: Readonly<
+  Record<
+    AccountMessageTone,
+    { variant: 'success' | 'info' | 'warning' | 'destructive'; role: 'alert' | 'status' }
+  >
+> = {
+  success: { variant: 'success', role: 'status' },
+  info: { variant: 'info', role: 'status' },
+  warning: { variant: 'warning', role: 'alert' },
+  error: { variant: 'destructive', role: 'alert' },
+};
+export function AccountMessage({
+  tone,
+  title,
+  children,
+}: {
+  tone: AccountMessageTone;
+  /** The outcome in one line — what happened, not what to do about it. */
+  title: string;
+  /** What the shopper can do next. */
+  children: ReactNode;
+}): ReactNode {
+  const { variant, role } = TONES[tone];
+  return (
+    <Alert role={role} variant={variant}>
+      <AlertTitle className="font-semibold">{title}</AlertTitle>
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  );
+}