create-magic-storefront 0.4.0 → 0.6.0

package/template/components/product/reviews.tsx

@@ -0,0 +1,80 @@
+import type { Schema } from '@magicstoreai/storefront-client';
+
+import { Rating } from '@/components/ui/rating';
+import type { Messages } from '@/lib/i18n';
+
+import { ReviewList } from './review-list';
+
+type ReviewsPage = {
+  data: Schema<'Review'>[];
+  meta: { pagination: Schema<'Pagination'>; rating: Schema<'RatingSummary'> };
+};
+
+/** Reviews on the first page load; more, and a rating filter, come from the browser. */
+export const REVIEWS_PER_PAGE = 5;
+
+/**
+ * The product's reviews: the summary the API sends (average, count, the count per rating — never
+ * computed here), then the first page, server-rendered. Hidden while the product has none.
+ */
+export function ProductReviews({
+  handle,
+  reviews,
+  locale,
+  t,
+}: {
+  handle: string;
+  reviews: ReviewsPage;
+  locale: string;
+  t: Messages;
+}) {
+  const { rating } = reviews.meta;
+  if (rating.count === 0) {
+    return null;
+  }
+  const most = Math.max(...rating.breakdown.map((row) => row.count), 1);
+  return (
+    <section id="reviews" className="product-reviews" aria-labelledby="reviews-title">
+      <div className="section-header">
+        <h2 id="reviews-title">{t.reviews}</h2>
+      </div>
+      <div className="product-reviews__layout">
+        <div className="review-summary">
+          {rating.average !== null && (
+            <p className="review-summary__average">{rating.average.toFixed(1)}</p>
+          )}
+          <Rating
+            average={rating.average}
+            count={rating.count}
+            label={t.ratingSummary(rating.average ?? 0, rating.count)}
+            showCount={false}
+          />
+          <p className="muted text-sm">{t.reviewsCount(rating.count)}</p>
+          {rating.breakdown.length > 0 && (
+            <ul className="review-summary__breakdown">
+              {[...rating.breakdown]
+                .sort((a, b) => b.rating - a.rating)
+                .map((row) => (
+                  <li key={row.rating}>
+                    <span>{row.rating}</span>
+                    <span className="review-summary__bar" aria-hidden="true">
+                      <span style={{ width: `${(row.count / most) * 100}%` }} />
+                    </span>
+                    <span className="muted">{row.count}</span>
+                  </li>
+                ))}
+            </ul>
+          )}
+        </div>
+        <ReviewList
+          handle={handle}
+          initial={reviews.data}
+          pagination={reviews.meta.pagination}
+          perPage={REVIEWS_PER_PAGE}
+          ratings={rating.breakdown.filter((row) => row.count > 0).map((row) => row.rating)}
+          locale={locale}
+        />
+      </div>
+    </section>
+  );
+}

package/template/components/product/variant-picker.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useMagicStore } from '@magicstoreai/hydrogen';
+
+import { messages } from '@/lib/i18n';
+
+import { useProductSelection } from './product-selection';
+
+/** More values than this and an option becomes a `<select>` rather than a row of pills. */
+const MAX_PILLS = 8;
+
+/**
+ * One control per option with more than one value: pills (radio buttons), or a select when there
+ * are many. A value no variant for sale has with the other choices is struck through but stays
+ * selectable — choosing it moves to the closest variant that has it (`useVariantSelection`).
+ */
+export function VariantPicker() {
+  const t = messages(useMagicStore().locale);
+  const { product, selectedOptions, setOption, isAvailable } = useProductSelection();
+
+  return product.options
+    .filter((option) => option.values.length > 1)
+    .map((option) => {
+      const selected = selectedOptions[option.name];
+      if (option.values.length > MAX_PILLS) {
+        return (
+          <label key={option.name} className="field variant-select">
+            <span className="field__label">{option.name}</span>
+            <select
+              value={selected ?? ''}
+              onChange={(event) => setOption(option.name, event.target.value)}
+            >
+              {selected === undefined && (
+                <option value="" disabled>
+                  {t.selectOption(option.name)}
+                </option>
+              )}
+              {option.values.map((value) => (
+                <option key={value} value={value}>
+                  {isAvailable(option.name, value) ? value : `${value} — ${t.soldOut}`}
+                </option>
+              ))}
+            </select>
+          </label>
+        );
+      }
+      return (
+        <fieldset key={option.name} className="variant-picker">
+          <legend className="variant-picker__legend">
+            {option.name}
+            {selected !== undefined && <span className="variant-picker__value">: {selected}</span>}
+          </legend>
+          <div className="variant-picker__values">
+            {option.values.map((value) => {
+              const available = isAvailable(option.name, value);
+              return (
+                <label key={value} className={available ? 'pill' : 'pill pill--unavailable'}>
+                  <input
+                    type="radio"
+                    className="visually-hidden"
+                    name={`option-${option.name}`}
+                    value={value}
+                    checked={selected === value}
+                    onChange={() => setOption(option.name, value)}
+                  />
+                  {value}
+                  {!available && <span className="visually-hidden">, {t.soldOut}</span>}
+                </label>
+              );
+            })}
+          </div>
+        </fieldset>
+      );
+    });
+}

package/template/components/product-card.tsx

@@ -0,0 +1,103 @@
+import { Image } from '@magicstoreai/hydrogen';
+import { moneyAmount } from '@magicstoreai/hydrogen/core';
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+
+import { QuickAdd } from '@/components/quick-add';
+import { Badge, type BadgeKind } from '@/components/ui/badge';
+import { Price } from '@/components/ui/price';
+import { Rating } from '@/components/ui/rating';
+import { messages, type Messages } from '@/lib/i18n';
+
+type Product = Schema<'Product'>;
+
+/**
+ * The card's badges, only from the product's data and at most two: sold out first (it changes what
+ * the buyer can do), then a real discount (compare-at above the price), pre-order, new.
+ */
+export function productBadges(product: Product, t: Messages): { kind: BadgeKind; label: string }[] {
+  const onSale =
+    product.price !== null &&
+    product.compareAtPrice !== null &&
+    moneyAmount(product.compareAtPrice) > moneyAmount(product.price);
+  const badges: { kind: BadgeKind; label: string }[] = [
+    ...(!product.availableForSale ? [{ kind: 'soldOut' as const, label: t.soldOut }] : []),
+    ...(onSale ? [{ kind: 'sale' as const, label: t.sale }] : []),
+    ...(product.preOrder ? [{ kind: 'preOrder' as const, label: t.preOrder }] : []),
+    ...(product.isNew ? [{ kind: 'new' as const, label: t.isNew }] : []),
+  ];
+  return badges.slice(0, 2);
+}
+
+/** A product with nothing to choose: one variant, or none (bought as itself). */
+export function canQuickAdd(product: Product): boolean {
+  return product.availableForSale && product.variants.length <= 1;
+}
+
+/**
+ * One product as a card: image at the theme's ratio, badges from data, vendor and rating (each
+ * shown when the theme turns it on, `data-show-vendor` / `data-show-rating`), title, price. The
+ * whole card is one link; quick add is a separate button, only for a product with nothing to pick.
+ * Works in server and client components: the caller passes the storefront's `locale`.
+ */
+export function ProductCard({
+  product,
+  locale,
+  eager = false,
+}: {
+  product: Product;
+  locale: string;
+  /** The LCP candidates (a grid's first row): loaded at once, not lazily. */
+  eager?: boolean;
+}) {
+  const t = messages(locale);
+  const badges = productBadges(product, t);
+  const href = `/products/${product.handle}`;
+  return (
+    <div className="product-card">
+      <div className="product-card__media">
+        <Image
+          data={product.featuredImage}
+          alt={product.title}
+          loading={eager ? 'eager' : 'lazy'}
+          fetchPriority={eager ? 'high' : undefined}
+          fallback={<span className="media-fallback" />}
+        />
+        {badges.length > 0 && (
+          <span className="product-card__badges">
+            {badges.map((badge) => (
+              <Badge key={badge.kind} kind={badge.kind}>
+                {badge.label}
+              </Badge>
+            ))}
+          </span>
+        )}
+        {canQuickAdd(product) && (
+          <QuickAdd
+            productId={product.id}
+            variantId={product.variants[0]?.id ?? null}
+            title={product.title}
+          />
+        )}
+      </div>
+      <div className="product-card__info">
+        {product.vendor && <span className="product-card__vendor">{product.vendor}</span>}
+        <Link href={href} className="product-card__link">
+          <span className="product-card__title">{product.title}</span>
+        </Link>
+        <span className="product-card__rating">
+          <Rating
+            average={product.rating.average}
+            count={product.rating.count}
+            label={
+              product.rating.average === null
+                ? ''
+                : t.ratingSummary(product.rating.average, product.rating.count)
+            }
+          />
+        </span>
+        <Price price={product.price} compareAtPrice={product.compareAtPrice} />
+      </div>
+    </div>
+  );
+}

package/template/components/product-grid.tsx

@@ -1,67 +1,37 @@
-import { Image, Money } from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
-import Link from 'next/link';
-import { locale } from '@/lib/api';
-import { messages } from '@/lib/i18n';
 
-/** Badges come only from the product's data; at most two, so the card stays readable. */
-function ProductBadges({ product }: { product: Schema<'Product'> }) {
-  const t = messages(locale);
-  const badges = [
-    product.preOrder && t.preOrder,
-    product.compareAtPrice && t.sale,
-    product.isNew && t.isNew,
-  ]
-    .filter((badge): badge is string => typeof badge === 'string')
-    .slice(0, 2);
-  if (badges.length === 0) {
-    return null;
-  }
-  return (
-    <span className="row">
-      {badges.map((badge) => (
-        <span key={badge} className="badge">
-          {badge}
-        </span>
-      ))}
-    </span>
-  );
-}
+import { ProductCard } from '@/components/product-card';
 
-/** One product as a card: the whole card is one link. */
-export function ProductCard({ product }: { product: Schema<'Product'> }) {
-  const t = messages(locale);
-  return (
-    <Link href={`/products/${product.handle}`} className="card">
-      <Image
-        data={product.featuredImage}
-        alt={product.title}
-        fallback={<div className="noimg" />}
-      />
-      <ProductBadges product={product} />
-      <span>{product.title}</span>
-      <span className="row">
-        <Money data={product.price} fallback={<span className="muted">—</span>} />
-        {product.compareAtPrice && (
-          <s className="muted">
-            <Money data={product.compareAtPrice} />
-          </s>
-        )}
-      </span>
-      {!product.availableForSale && <span className="muted">{t.soldOut}</span>}
-    </Link>
-  );
-}
+/** How many cards a grid loads at once: its first row at the widest layout (4 columns). */
+const EAGER_CARDS = 4;
 
-export function ProductGrid({ products }: { products: Schema<'Product'>[] }) {
+/**
+ * Product cards in the theme's grid (2 / 3 / 4 columns), or one row that scrolls sideways
+ * (`slider`). The first row is loaded at once, the rest lazily. Renders nothing for no products:
+ * the page says why (an empty collection, no match).
+ */
+export function ProductGrid({
+  products,
+  locale,
+  eager = true,
+  slider = false,
+}: {
+  products: Schema<'Product'>[];
+  locale: string;
+  /** `false` for a grid below the fold (a shelf, a related list): every card lazy. */
+  eager?: boolean;
+  slider?: boolean;
+}) {
   if (products.length === 0) {
-    return <p className="muted">{messages(locale).nothingHere}</p>;
+    return null;
   }
   return (
-    <div className="grid">
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
+    <ul className={slider ? 'product-grid product-grid--slider' : 'product-grid'}>
+      {products.map((product, index) => (
+        <li key={product.id}>
+          <ProductCard product={product} locale={locale} eager={eager && index < EAGER_CARDS} />
+        </li>
       ))}
-    </div>
+    </ul>
   );
 }

package/template/components/quick-add.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useCart, useMagicStore } from '@magicstoreai/hydrogen';
+import { useState } from 'react';
+
+import { useCartDrawer } from '@/components/cart/cart-drawer';
+import { Icon } from '@/components/ui/icon';
+import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
+
+/**
+ * Add a product with nothing to choose straight from its card, then open the cart drawer (or
+ * announce the add, per `cartType`). A refusal (out of stock meanwhile) shows the API's detail.
+ */
+export function QuickAdd({
+  productId,
+  variantId,
+  title,
+}: {
+  productId: string;
+  variantId: string | null;
+  title: string;
+}) {
+  const { addLine } = useCart();
+  const drawer = useCartDrawer();
+  const t = messages(useMagicStore().locale);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function add() {
+    setBusy(true);
+    setError(null);
+    try {
+      await addLine({ productId, variantId, quantity: 1 });
+      drawer.added();
+    } catch (e) {
+      setError(describe(e, t.couldNotAdd));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="product-card__quick-add"
+        aria-label={t.quickAdd(title)}
+        aria-busy={busy || undefined}
+        disabled={busy}
+        onClick={() => void add()}
+      >
+        <Icon name="plus" size={18} />
+      </button>
+      {error && (
+        <p className="product-card__error" role="alert">
+          {error}
+        </p>
+      )}
+    </>
+  );
+}