create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/base/src/{components/reviews → ui/product}/review-form.tsx

@@ -1,8 +1,14 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { getClient } from '@/lib/brainerce';
-import { checkAuthStatus } from '@/lib/auth';
+import { Star } from 'lucide-react';
+import { getClient } from '@/core/lib/brainerce';
+import { checkAuthStatus } from '@/core/lib/auth';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import type { MyProductReview, ProductReview } from 'brainerce';
 
 interface ReviewFormProps {
@@ -26,6 +32,7 @@ type Stage =
  */
 export function ReviewForm({ productId }: ReviewFormProps) {
   const [stage, setStage] = useState<Stage>({ kind: 'loading' });
+  const t = useTranslations('reviews');
 
   useEffect(() => {
     let cancelled = false;
@@ -59,17 +66,17 @@ export function ReviewForm({ productId }: ReviewFormProps) {
   }, [productId]);
 
   if (stage.kind === 'loading') {
-    return <div className="text-muted-foreground text-sm">Loading…</div>;
+    return <div className="text-muted-foreground text-sm">{t('loading')}</div>;
   }
 
   if (stage.kind === 'signed_out') {
     return (
       <div className="rounded-md border p-4">
         <p className="text-sm">
-          <a href="/account/login" className="font-medium underline">
-            Sign in
-          </a>{' '}
-          to leave a review for this product.
+          <Link href="/account/login" className="font-medium underline">
+            {t('signIn')}
+          </Link>{' '}
+          {t('signInSuffix')}
         </p>
       </div>
     );
@@ -93,16 +100,17 @@ export function ReviewForm({ productId }: ReviewFormProps) {
 }
 
 function NotEligibleMessage({ reason }: { reason: MyProductReview['reason'] }) {
+  const t = useTranslations('reviews');
   let message: string;
   switch (reason) {
     case 'no_eligible_order':
-      message = 'Only customers who purchased this product can leave a review.';
+      message = t('onlyPurchasers');
       break;
     case 'reviews_disabled':
-      message = 'Reviews are not enabled for this store.';
+      message = t('reviewsDisabled');
       break;
     default:
-      message = 'You cannot review this product right now.';
+      message = t('cannotReview');
   }
   return (
     <div className="bg-muted/30 rounded-md border p-4">
@@ -125,10 +133,11 @@ function EditReviewBlock({
   onDeleted: () => void;
 }) {
   const [deleting, setDeleting] = useState(false);
+  const t = useTranslations('reviews');
   const [deleteError, setDeleteError] = useState<string | null>(null);
 
   async function handleDelete() {
-    if (!window.confirm('Delete your review for this product?')) return;
+    if (!window.confirm(t('confirmDelete'))) return;
     setDeleting(true);
     setDeleteError(null);
     try {
@@ -136,7 +145,7 @@ function EditReviewBlock({
       onDeleted();
       window.location.reload();
     } catch {
-      setDeleteError('Could not delete your review. Please try again.');
+      setDeleteError(t('deleteFailed'));
     } finally {
       setDeleting(false);
     }
@@ -151,14 +160,14 @@ function EditReviewBlock({
         initialBody={initial.body ?? ''}
       />
       <div className="flex items-center justify-between rounded-md border border-red-100 bg-red-50/50 p-3">
-        <p className="text-xs text-red-700">Want to start over? You can delete your review.</p>
+        <p className="text-xs text-red-700">{t('startOver')}</p>
         <button
           type="button"
           onClick={handleDelete}
           disabled={deleting}
           className="text-xs font-medium text-red-700 underline disabled:opacity-50"
         >
-          {deleting ? 'Deleting…' : 'Delete review'}
+          {deleting ? t('deleting') : t('deleteReview')}
         </button>
       </div>
       {deleteError && (
@@ -187,6 +196,7 @@ function ReviewEditor({
   initialBody: string;
 }) {
   const [rating, setRating] = useState(initialRating);
+  const t = useTranslations('reviews');
   const [body, setBody] = useState(initialBody);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -209,17 +219,13 @@ function ReviewEditor({
     } catch (err) {
       const status = (err as { status?: number })?.status;
       if (status === 409) {
-        setError("You've already submitted a review for this product.");
+        setError(t('alreadySubmitted'));
       } else if (status === 403) {
-        setError('Only customers who purchased this product can leave a review.');
+        setError(t('onlyPurchasers'));
       } else if (status === 429) {
-        setError('Too many submissions. Please try again in a few minutes.');
+        setError(t('tooMany'));
       } else {
-        setError(
-          mode === 'edit'
-            ? 'Could not update your review. Please try again.'
-            : 'Could not submit your review. Please try again.'
-        );
+        setError(mode === 'edit' ? t('updateFailed') : t('submitFailed'));
       }
     } finally {
       setSubmitting(false);
@@ -229,20 +235,18 @@ function ReviewEditor({
   if (success) {
     return (
       <p className="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700">
-        {mode === 'edit'
-          ? 'Thanks! Your review has been updated.'
-          : 'Thanks! Your review has been submitted.'}
+        {mode === 'edit' ? t('thanksUpdated') : t('thanksSubmitted')}
       </p>
     );
   }
 
   return (
     <form onSubmit={handleSubmit} className="space-y-3 rounded-md border p-4">
-      <h3 className="font-medium">{mode === 'edit' ? 'Edit your review' : 'Write a review'}</h3>
+      <h3 className="font-medium">{mode === 'edit' ? t('editYourReview') : t('writeReview')}</h3>
 
       <fieldset>
-        <legend className="mb-1 text-sm">Your rating</legend>
-        <div className="inline-flex gap-1" role="radiogroup" aria-label="Star rating">
+        <legend className="mb-1 text-sm">{t('yourRating')}</legend>
+        <div className="inline-flex gap-1" role="radiogroup" aria-label={t('starRating')}>
           {[1, 2, 3, 4, 5].map((n) => (
             <button
               key={n}
@@ -250,24 +254,25 @@ function ReviewEditor({
               role="radio"
               aria-checked={rating === n}
               onClick={() => setRating(n)}
-              className={`text-2xl leading-none ${n <= rating ? 'text-yellow-500' : 'text-gray-300'}`}
+              className={n <= rating ? 'text-yellow-500' : 'text-gray-300'}
             >
-              ★
+              <Star className="h-6 w-6 fill-current" aria-hidden="true" />
             </button>
           ))}
         </div>
       </fieldset>
 
-      <label className="block text-sm">
-        Your review <span className="text-muted-foreground text-xs">(optional)</span>
-        <textarea
+      <Label className="block text-sm font-normal">
+        {t('yourReview')}{' '}
+        <span className="text-muted-foreground text-xs">({t('optionalField')})</span>
+        <Textarea
           value={body}
           onChange={(event) => setBody(event.target.value)}
           maxLength={5000}
           rows={4}
-          className="mt-1 block w-full rounded border px-2 py-1.5 text-sm"
+          className="mt-1 rounded"
         />
-      </label>
+      </Label>
 
       {error && (
         <p role="alert" className="text-sm text-red-700">
@@ -275,19 +280,15 @@ function ReviewEditor({
         </p>
       )}
 
-      <button
-        type="submit"
-        disabled={submitting}
-        className="inline-flex items-center rounded bg-black px-4 py-2 text-sm text-white disabled:opacity-50"
-      >
+      <Button type="submit" disabled={submitting}>
         {submitting
           ? mode === 'edit'
-            ? 'Saving…'
-            : 'Submitting…'
+            ? t('saving')
+            : t('submittingBtn')
           : mode === 'edit'
-            ? 'Save changes'
-            : 'Submit review'}
-      </button>
+            ? t('saveChanges')
+            : t('submitReview')}
+      </Button>
     </form>
   );
 }

package/templates/nextjs/base/src/{components/reviews/reviews-section.tsx → ui/product/reviews-section.tsx.ejs}

@@ -1,10 +1,25 @@
+import { Star } from 'lucide-react';
 import type { ProductReview } from 'brainerce';
-import { getServerClient } from '@/lib/brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
+import { Badge } from '@/components/ui/badge';
+<% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
 import { ReviewForm } from './review-form';
 
+// Server component — it renders before any client i18n context exists, so the
+// wrapper strings (title / empty state / verified badge) are read straight
+// from the `reviews` namespace in messages/, keyed by the store locale.
+type ReviewStrings = Record<string, string>;
+
+<% if (i18nEnabled) { %>async function getReviewStrings(locale: string): Promise<ReviewStrings> {
+  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
+}<% } else { %>async function getReviewStrings(_locale: string): Promise<ReviewStrings> {
+  return messages.reviews as ReviewStrings;
+}<% } %>
+
 interface ReviewsSectionProps {
   productId: string;
   initialReviews?: ProductReview[];
+  locale?: string;
   /** Where to send users back to after submit (defaults to the current product URL). */
   returnUrl?: string;
 }
@@ -16,7 +31,12 @@ interface ReviewsSectionProps {
  * the initial HTML payload (good for SEO; JSON-LD on the same page already
  * carries `aggregateRating` when reviewCount > 0).
  */
-export async function ReviewsSection({ productId, initialReviews }: ReviewsSectionProps) {
+export async function ReviewsSection({
+  productId,
+  initialReviews,
+  locale = defaultLocale,
+}: ReviewsSectionProps) {
+  const t = await getReviewStrings(locale);
   let reviews: ProductReview[] = initialReviews ?? [];
 
   if (!initialReviews) {
@@ -24,7 +44,7 @@ export async function ReviewsSection({ productId, initialReviews }: ReviewsSecti
       const result = await getServerClient().listProductReviews(productId, { page: 1, limit: 20 });
       reviews = result.data;
     } catch {
-      // Reviews disabled at store level or network error — render the form anyway.
+      // Review listing disabled at store level or network error — render the form anyway.
       reviews = [];
     }
   }
@@ -32,17 +52,15 @@ export async function ReviewsSection({ productId, initialReviews }: ReviewsSecti
   return (
     <section className="mt-8" aria-labelledby="reviews-heading">
       <h2 id="reviews-heading" className="mb-4 text-xl font-semibold">
-        Reviews
+        {t.title}
       </h2>
 
       {reviews.length === 0 ? (
-        <p className="text-muted-foreground mb-6 text-sm">
-          No reviews yet — be the first to share your experience.
-        </p>
+        <p className="text-muted-foreground mb-6 text-sm">{t.noReviews}</p>
       ) : (
         <ul className="mb-6 space-y-4">
           {reviews.map((review) => (
-            <ReviewCard key={review.id} review={review} />
+            <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
           ))}
         </ul>
       )}
@@ -52,16 +70,19 @@ export async function ReviewsSection({ productId, initialReviews }: ReviewsSecti
   );
 }
 
-function ReviewCard({ review }: { review: ProductReview }) {
+function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
   return (
     <li className="rounded-md border p-4">
       <header className="flex flex-wrap items-center gap-2">
         <Stars rating={review.rating} />
         <span className="text-sm font-medium">{review.authorName}</span>
         {review.verifiedPurchase && (
-          <span className="rounded bg-emerald-50 px-2 py-0.5 text-xs text-emerald-700">
-            Verified purchase
-          </span>
+          <Badge
+            variant="outline"
+            className="rounded border-transparent bg-emerald-50 px-2 py-0.5 font-normal text-emerald-700"
+          >
+            {verifiedLabel}
+          </Badge>
         )}
         <time className="text-muted-foreground ms-auto text-xs">
           {new Date(review.createdAt).toLocaleDateString()}
@@ -76,9 +97,11 @@ function Stars({ rating }: { rating: number }) {
   return (
     <span aria-label={`${rating} of 5 stars`} className="inline-flex">
       {[1, 2, 3, 4, 5].map((n) => (
-        <span key={n} className={n <= rating ? 'text-yellow-500' : 'text-gray-300'}>
-          ★
-        </span>
+        <Star
+          key={n}
+          className={`h-4 w-4 fill-current ${n <= rating ? 'text-yellow-500' : 'text-gray-300'}`}
+          aria-hidden="true"
+        />
       ))}
     </span>
   );

package/templates/nextjs/base/src/{components/products → ui/product}/stock-badge.tsx

@@ -1,63 +1,61 @@
-'use client';
-
-import type { InventoryInfo } from 'brainerce';
-import { cn } from '@/lib/utils';
-import { useTranslations } from '@/lib/translations';
-
-interface StockBadgeProps {
-  inventory: InventoryInfo | null | undefined;
-  lowStockThreshold?: number;
-  className?: string;
-}
-
-export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const t = useTranslations('productDetail');
-  const label = getStockLabel(inventory, lowStockThreshold, t);
-  const color = getStockColor(inventory, lowStockThreshold);
-
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-        color,
-        className
-      )}
-    >
-      {label}
-    </span>
-  );
-}
-
-function getStockLabel(
-  inventory: InventoryInfo | null | undefined,
-  lowStockThreshold: number,
-  t: (key: string) => string
-): string {
-  if (!inventory) return t('outOfStock');
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED') return t('unavailable');
-  if (!inStock) return t('outOfStock');
-  if (trackingMode === 'UNLIMITED') return t('inStock');
-
-  // TRACKED — show actual quantity
-  if (available <= lowStockThreshold) {
-    return t('onlyLeft').replace('{available}', String(available));
-  }
-  return t('availableInStock').replace('{available}', String(available));
-}
-
-function getStockColor(
-  inventory: InventoryInfo | null | undefined,
-  lowStockThreshold: number
-): string {
-  if (!inventory) return 'bg-red-100 text-red-800';
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
-  if (trackingMode === 'TRACKED' && available <= lowStockThreshold)
-    return 'bg-yellow-100 text-yellow-800';
-  return 'bg-green-100 text-green-800';
-}
+'use client';
+
+import type { InventoryInfo } from 'brainerce';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/core/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+
+interface StockBadgeProps {
+  inventory: InventoryInfo | null | undefined;
+  lowStockThreshold?: number;
+  className?: string;
+}
+
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const t = useTranslations('productDetail');
+  const label = getStockLabel(inventory, lowStockThreshold, t);
+  const color = getStockColor(inventory, lowStockThreshold);
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn('border-transparent px-2 py-0.5 font-medium', color, className)}
+    >
+      {label}
+    </Badge>
+  );
+}
+
+function getStockLabel(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number,
+  t: (key: string) => string
+): string {
+  if (!inventory) return t('outOfStock');
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
+
+  // TRACKED — show actual quantity
+  if (available <= lowStockThreshold) {
+    return t('onlyLeft').replace('{available}', String(available));
+  }
+  return t('availableInStock').replace('{available}', String(available));
+}
+
+function getStockColor(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number
+): string {
+  if (!inventory) return 'bg-red-100 text-red-800';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
+  if (trackingMode === 'TRACKED' && available <= lowStockThreshold)
+    return 'bg-yellow-100 text-yellow-800';
+  return 'bg-green-100 text-green-800';
+}

package/templates/nextjs/base/src/{components/products → ui/product}/variant-selector.tsx

@@ -4,9 +4,9 @@ import { useMemo } from 'react';
 import type { Product, ProductVariant } from 'brainerce';
 import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
 import type { InventoryInfo } from 'brainerce';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface VariantSelectorProps {
   product: Product;

package/templates/nextjs/base/src/{components → ui}/shared/cdn-image.tsx

@@ -1,5 +1,5 @@
 import Image, { type ImageProps } from 'next/image';
-import { OPTIMIZED_IMAGE_HOSTS } from '@/lib/image-hosts';
+import { OPTIMIZED_IMAGE_HOSTS } from '@/core/lib/image-hosts';
 
 const OPTIMIZED_HOSTS = new Set(OPTIMIZED_IMAGE_HOSTS);
 

package/templates/nextjs/base/src/{components → ui}/shared/loading-spinner.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface LoadingSpinnerProps {
   size?: 'sm' | 'md' | 'lg';

package/templates/nextjs/base/tailwind.config.ts

@@ -1,30 +1,69 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      colors: {
-        primary: 'hsl(var(--primary))',
-        'primary-foreground': 'hsl(var(--primary-foreground))',
-        secondary: 'hsl(var(--secondary))',
-        'secondary-foreground': 'hsl(var(--secondary-foreground))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        muted: 'hsl(var(--muted))',
-        'muted-foreground': 'hsl(var(--muted-foreground))',
-        border: 'hsl(var(--border))',
-        destructive: 'hsl(var(--destructive))',
-        'destructive-foreground': 'hsl(var(--destructive-foreground))',
-        accent: 'hsl(var(--accent))',
-        'accent-foreground': 'hsl(var(--accent-foreground))',
-      },
-      borderRadius: {
-        DEFAULT: 'var(--radius)',
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default config;
+import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(var(--primary))',
+        'primary-foreground': 'hsl(var(--primary-foreground))',
+        secondary: 'hsl(var(--secondary))',
+        'secondary-foreground': 'hsl(var(--secondary-foreground))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        muted: 'hsl(var(--muted))',
+        'muted-foreground': 'hsl(var(--muted-foreground))',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        destructive: 'hsl(var(--destructive))',
+        'destructive-foreground': 'hsl(var(--destructive-foreground))',
+        accent: 'hsl(var(--accent))',
+        'accent-foreground': 'hsl(var(--accent-foreground))',
+        card: 'hsl(var(--card))',
+        'card-foreground': 'hsl(var(--card-foreground))',
+        popover: 'hsl(var(--popover))',
+        'popover-foreground': 'hsl(var(--popover-foreground))',
+        // Extended tokens used by design packs (defined in their globals.css).
+        // Harmless when a design doesn't set the CSS variables — the classes
+        // simply aren't used by the base ui.
+        surface: 'hsl(var(--surface))',
+        plinth: 'hsl(var(--plinth))',
+      },
+      fontFamily: {
+        // Design packs set --font-sans / --font-serif via next/font variables
+        // in app/layout.tsx; the fallbacks keep font-sans/font-serif usable
+        // even when a layout doesn't define them.
+        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-serif)', 'ui-serif', 'Georgia', 'serif'],
+      },
+      borderRadius: {
+        // shadcn/ui convention: every radius derives from the --radius token,
+        // so `rounded`, `rounded-md`, `rounded-lg` all follow the theme.
+        DEFAULT: 'var(--radius)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+};
+
+export default config;