create-brainerce-store 1.62.0 → 1.64.0

package/templates/nextjs/ui-canvas/product/variant-selector.tsx

@@ -1,212 +1,212 @@
-'use client';
-
-import { useMemo } from 'react';
-import type { Product, ProductVariant } from 'brainerce';
-import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
-import type { InventoryInfo } from 'brainerce';
-import { useCurrency } from '@/core/lib/use-currency';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface VariantSelectorProps {
-  product: Product;
-  selectedVariant: ProductVariant | null;
-  onVariantChange: (variant: ProductVariant) => void;
-  className?: string;
-}
-
-interface AttributeGroup {
-  name: string;
-  displayType: string;
-  values: Array<{
-    value: string;
-    swatchColor?: string | null;
-    swatchColor2?: string | null;
-    swatchImageUrl?: string | null;
-    variants: ProductVariant[];
-  }>;
-}
-
-/**
- * DESIGN ME — variant selector on the product page: one group per attribute
- * (Size, Color, …) with selectable values. Selection state and the matching
- * logic below are the contract; the merchant's swatch metadata
- * (`displayType`, `swatchColor`, `swatchColor2`, `swatchImageUrl`) is
- * computed per value — the skeleton renders plain buttons, use the swatch
- * data to build color/image swatches in your design.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function VariantSelector({
-  product,
-  selectedVariant,
-  onVariantChange,
-  className,
-}: VariantSelectorProps) {
-  const t = useTranslations('productDetail');
-  const currency = useCurrency();
-  const variants = useMemo(() => product.variants || [], [product.variants]);
-
-  // Get swatch metadata from product attribute options
-  const swatchData = useMemo(() => getProductSwatches(product), [product]);
-  const swatchMap = useMemo(() => {
-    const map = new Map<
-      string,
-      {
-        displayType: string;
-        options: Map<
-          string,
-          {
-            swatchColor?: string | null;
-            swatchColor2?: string | null;
-            swatchImageUrl?: string | null;
-          }
-        >;
-      }
-    >();
-    for (const attr of swatchData) {
-      const optMap = new Map<
-        string,
-        {
-          swatchColor?: string | null;
-          swatchColor2?: string | null;
-          swatchImageUrl?: string | null;
-        }
-      >();
-      for (const opt of attr.options) {
-        optMap.set(opt.name, {
-          swatchColor: opt.swatchColor,
-          swatchColor2: opt.swatchColor2,
-          swatchImageUrl: opt.swatchImageUrl,
-        });
-      }
-      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
-    }
-    return map;
-  }, [swatchData]);
-
-  // Build attribute groups from variant data, enriched with swatch info
-  const attributeGroups = useMemo<AttributeGroup[]>(() => {
-    const groups = new Map<string, Map<string, ProductVariant[]>>();
-
-    for (const variant of variants) {
-      const options = getVariantOptions(variant);
-      for (const { name, value } of options) {
-        if (!groups.has(name)) {
-          groups.set(name, new Map());
-        }
-        const valuesMap = groups.get(name)!;
-        if (!valuesMap.has(value)) {
-          valuesMap.set(value, []);
-        }
-        valuesMap.get(value)!.push(variant);
-      }
-    }
-
-    return Array.from(groups.entries()).map(([name, valuesMap]) => {
-      const attrSwatch = swatchMap.get(name);
-      return {
-        name,
-        displayType: attrSwatch?.displayType || 'DROPDOWN',
-        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
-          const optSwatch = attrSwatch?.options.get(value);
-          return {
-            value,
-            swatchColor: optSwatch?.swatchColor,
-            swatchColor2: optSwatch?.swatchColor2,
-            swatchImageUrl: optSwatch?.swatchImageUrl,
-            variants: variantList,
-          };
-        }),
-      };
-    });
-  }, [variants, swatchMap]);
-
-  // Get currently selected attribute values
-  const selectedOptions = useMemo(() => {
-    if (!selectedVariant) return new Map<string, string>();
-    const opts = getVariantOptions(selectedVariant);
-    return new Map(opts.map(({ name, value }) => [name, value]));
-  }, [selectedVariant]);
-
-  // Find the variant that matches all selected attributes
-  function findMatchingVariant(
-    attributeName: string,
-    newValue: string
-  ): ProductVariant | undefined {
-    const nextSelection = new Map(selectedOptions);
-    nextSelection.set(attributeName, newValue);
-
-    return variants.find((v) => {
-      const opts = getVariantOptions(v);
-      return Array.from(nextSelection.entries()).every(([name, value]) =>
-        opts.some((o) => o.name === name && o.value === value)
-      );
-    });
-  }
-
-  if (attributeGroups.length === 0) return null;
-
-  return (
-    <div className={cn(className)}>
-      {attributeGroups.map((group) => (
-        <fieldset key={group.name} data-display-type={group.displayType}>
-          <legend>
-            {group.name}
-            {selectedOptions.get(group.name) && <span>: {selectedOptions.get(group.name)}</span>}
-          </legend>
-          <div className="flex flex-wrap gap-2">
-            {group.values.map(({ value, variants: matchingVariants }) => {
-              const isSelected = selectedOptions.get(group.name) === value;
-              const matchedVariant = findMatchingVariant(group.name, value);
-              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
-
-              return (
-                <button
-                  key={value}
-                  type="button"
-                  disabled={!isAvailable}
-                  aria-pressed={isSelected}
-                  onClick={() => {
-                    const variant = matchedVariant || matchingVariants[0];
-                    if (variant) onVariantChange(variant);
-                  }}
-                >
-                  {value}
-                </button>
-              );
-            })}
-          </div>
-        </fieldset>
-      ))}
-
-      {/* Variant-specific info */}
-      {selectedVariant && (
-        <p>
-          {selectedVariant.price && (
-            <span>
-              {
-                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
-                  currency,
-                }) as string
-              }
-            </span>
-          )}{' '}
-          <span>{getTranslatedStockStatus(selectedVariant.inventory, t)}</span>
-        </p>
-      )}
-    </div>
-  );
-}
-
-function getTranslatedStockStatus(
-  inventory: InventoryInfo | null | undefined,
-  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');
-  return t('availableInStock').replace('{available}', String(available));
-}
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
+import type { InventoryInfo } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface VariantSelectorProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+interface AttributeGroup {
+  name: string;
+  displayType: string;
+  values: Array<{
+    value: string;
+    swatchColor?: string | null;
+    swatchColor2?: string | null;
+    swatchImageUrl?: string | null;
+    variants: ProductVariant[];
+  }>;
+}
+
+/**
+ * DESIGN ME — variant selector on the product page: one group per attribute
+ * (Size, Color, …) with selectable values. Selection state and the matching
+ * logic below are the contract; the merchant's swatch metadata
+ * (`displayType`, `swatchColor`, `swatchColor2`, `swatchImageUrl`) is
+ * computed per value — the skeleton renders plain buttons, use the swatch
+ * data to build color/image swatches in your design.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const t = useTranslations('productDetail');
+  const currency = useCurrency();
+  const variants = useMemo(() => product.variants || [], [product.variants]);
+
+  // Get swatch metadata from product attribute options
+  const swatchData = useMemo(() => getProductSwatches(product), [product]);
+  const swatchMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        displayType: string;
+        options: Map<
+          string,
+          {
+            swatchColor?: string | null;
+            swatchColor2?: string | null;
+            swatchImageUrl?: string | null;
+          }
+        >;
+      }
+    >();
+    for (const attr of swatchData) {
+      const optMap = new Map<
+        string,
+        {
+          swatchColor?: string | null;
+          swatchColor2?: string | null;
+          swatchImageUrl?: string | null;
+        }
+      >();
+      for (const opt of attr.options) {
+        optMap.set(opt.name, {
+          swatchColor: opt.swatchColor,
+          swatchColor2: opt.swatchColor2,
+          swatchImageUrl: opt.swatchImageUrl,
+        });
+      }
+      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
+    }
+    return map;
+  }, [swatchData]);
+
+  // Build attribute groups from variant data, enriched with swatch info
+  const attributeGroups = useMemo<AttributeGroup[]>(() => {
+    const groups = new Map<string, Map<string, ProductVariant[]>>();
+
+    for (const variant of variants) {
+      const options = getVariantOptions(variant);
+      for (const { name, value } of options) {
+        if (!groups.has(name)) {
+          groups.set(name, new Map());
+        }
+        const valuesMap = groups.get(name)!;
+        if (!valuesMap.has(value)) {
+          valuesMap.set(value, []);
+        }
+        valuesMap.get(value)!.push(variant);
+      }
+    }
+
+    return Array.from(groups.entries()).map(([name, valuesMap]) => {
+      const attrSwatch = swatchMap.get(name);
+      return {
+        name,
+        displayType: attrSwatch?.displayType || 'DROPDOWN',
+        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
+          const optSwatch = attrSwatch?.options.get(value);
+          return {
+            value,
+            swatchColor: optSwatch?.swatchColor,
+            swatchColor2: optSwatch?.swatchColor2,
+            swatchImageUrl: optSwatch?.swatchImageUrl,
+            variants: variantList,
+          };
+        }),
+      };
+    });
+  }, [variants, swatchMap]);
+
+  // Get currently selected attribute values
+  const selectedOptions = useMemo(() => {
+    if (!selectedVariant) return new Map<string, string>();
+    const opts = getVariantOptions(selectedVariant);
+    return new Map(opts.map(({ name, value }) => [name, value]));
+  }, [selectedVariant]);
+
+  // Find the variant that matches all selected attributes
+  function findMatchingVariant(
+    attributeName: string,
+    newValue: string
+  ): ProductVariant | undefined {
+    const nextSelection = new Map(selectedOptions);
+    nextSelection.set(attributeName, newValue);
+
+    return variants.find((v) => {
+      const opts = getVariantOptions(v);
+      return Array.from(nextSelection.entries()).every(([name, value]) =>
+        opts.some((o) => o.name === name && o.value === value)
+      );
+    });
+  }
+
+  if (attributeGroups.length === 0) return null;
+
+  return (
+    <div className={cn(className)}>
+      {attributeGroups.map((group) => (
+        <fieldset key={group.name} data-display-type={group.displayType}>
+          <legend>
+            {group.name}
+            {selectedOptions.get(group.name) && <span>: {selectedOptions.get(group.name)}</span>}
+          </legend>
+          <div className="flex flex-wrap gap-2">
+            {group.values.map(({ value, variants: matchingVariants }) => {
+              const isSelected = selectedOptions.get(group.name) === value;
+              const matchedVariant = findMatchingVariant(group.name, value);
+              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  disabled={!isAvailable}
+                  aria-pressed={isSelected}
+                  onClick={() => {
+                    const variant = matchedVariant || matchingVariants[0];
+                    if (variant) onVariantChange(variant);
+                  }}
+                >
+                  {value}
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+      ))}
+
+      {/* Variant-specific info */}
+      {selectedVariant && (
+        <p>
+          {selectedVariant.price && (
+            <span>
+              {
+                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
+                  currency,
+                }) as string
+              }
+            </span>
+          )}{' '}
+          <span>{getTranslatedStockStatus(selectedVariant.inventory, t)}</span>
+        </p>
+      )}
+    </div>
+  );
+}
+
+function getTranslatedStockStatus(
+  inventory: InventoryInfo | null | undefined,
+  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');
+  return t('availableInStock').replace('{available}', String(available));
+}

package/templates/nextjs/ui-canvas/shared/cdn-image.tsx

@@ -1,31 +1,31 @@
-import Image, { type ImageProps } from 'next/image';
-import { OPTIMIZED_IMAGE_HOSTS } from '@/core/lib/image-hosts';
-
-const OPTIMIZED_HOSTS = new Set(OPTIMIZED_IMAGE_HOSTS);
-
-function isOptimizedHost(src: ImageProps['src']): boolean {
-  if (typeof src !== 'string') return true; // StaticImageData — always local
-  try {
-    return OPTIMIZED_HOSTS.has(new URL(src).hostname);
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Drop-in `next/image` replacement for Brainerce-sourced images (product
- * photos, blog covers). Uploaded images get re-hosted onto cdn.brainerce.com
- * by the backend's async image-import pipeline, but a product/variant can
- * still carry a raw upstream-merchant URL while mid-import, or if that job
- * failed. next/image throws if `src`'s host isn't in `images.remotePatterns`,
- * so any host outside our known CDN falls back to `unoptimized` — an
- * unresized, direct-from-origin fetch — instead of crashing the page.
- *
- * DESIGN ME — shared image wrapper; render ALL catalog images through this
- * component (not raw next/image) so unknown hosts never crash the page.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function CdnImage({ unoptimized, ...props }: ImageProps) {
-  return <Image {...props} unoptimized={unoptimized ?? !isOptimizedHost(props.src)} />;
-}
+import Image, { type ImageProps } from 'next/image';
+import { OPTIMIZED_IMAGE_HOSTS } from '@/core/lib/image-hosts';
+
+const OPTIMIZED_HOSTS = new Set(OPTIMIZED_IMAGE_HOSTS);
+
+function isOptimizedHost(src: ImageProps['src']): boolean {
+  if (typeof src !== 'string') return true; // StaticImageData — always local
+  try {
+    return OPTIMIZED_HOSTS.has(new URL(src).hostname);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Drop-in `next/image` replacement for Brainerce-sourced images (product
+ * photos, blog covers). Uploaded images get re-hosted onto cdn.brainerce.com
+ * by the backend's async image-import pipeline, but a product/variant can
+ * still carry a raw upstream-merchant URL while mid-import, or if that job
+ * failed. next/image throws if `src`'s host isn't in `images.remotePatterns`,
+ * so any host outside our known CDN falls back to `unoptimized` — an
+ * unresized, direct-from-origin fetch — instead of crashing the page.
+ *
+ * DESIGN ME — shared image wrapper; render ALL catalog images through this
+ * component (not raw next/image) so unknown hosts never crash the page.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CdnImage({ unoptimized, ...props }: ImageProps) {
+  return <Image {...props} unoptimized={unoptimized ?? !isOptimizedHost(props.src)} />;
+}

package/templates/nextjs/ui-canvas/shared/loading-spinner.tsx

@@ -1,27 +1,27 @@
-'use client';
-
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface LoadingSpinnerProps {
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
-}
-
-/**
- * DESIGN ME — loading indicator used by every page and async button. Bare
- * text placeholder; replace with your own spinner/skeleton. Keep the
- * `role="status"` + sr-only label, and keep the `size` prop (callers across
- * the app pass sm/md/lg).
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
-  const t = useTranslations('common');
-  return (
-    <span role="status" data-size={size} className={cn(className)}>
-      <span aria-hidden="true">…</span>
-      <span className="sr-only">{t('loading')}</span>
-    </span>
-  );
-}
+'use client';
+
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+/**
+ * DESIGN ME — loading indicator used by every page and async button. Bare
+ * text placeholder; replace with your own spinner/skeleton. Keep the
+ * `role="status"` + sr-only label, and keep the `size` prop (callers across
+ * the app pass sm/md/lg).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const t = useTranslations('common');
+  return (
+    <span role="status" data-size={size} className={cn(className)}>
+      <span aria-hidden="true">…</span>
+      <span className="sr-only">{t('loading')}</span>
+    </span>
+  );
+}