create-magic-storefront 0.5.0 → 0.6.0

package/template/components/search/predictive-search.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import { Image, useMagicStore, useStorefrontClient } from '@magicstoreai/hydrogen';
+import type { Schema } from '@magicstoreai/storefront-client';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
+
+import { Drawer } from '@/components/ui/drawer';
+import { Icon } from '@/components/ui/icon';
+import { Price } from '@/components/ui/price';
+import { SEARCH_QUERY_MAX } from '@/lib/catalog-params';
+import { messages } from '@/lib/i18n';
+
+type Suggestions = Schema<'SearchSuggestions'>;
+type Trending = Schema<'TrendingQuery'>;
+
+/** What `searchSuggestions` is asked: its `q` has a `maxLength` of 120, so a longer query's start. */
+function suggestQuery(query: string): string {
+  return query.slice(0, 120).trim();
+}
+
+/** Typing pauses this long before a request: one call per word, not per key. */
+export const SUGGEST_DELAY_MS = 250;
+
+/** `/search?q=…` for a query; the results page owns everything past that. */
+export function searchHref(query: string): string {
+  return `/search?${new URLSearchParams({ q: query.trim() })}`;
+}
+
+type Option = { id: string; href: string };
+
+/**
+ * Search from the header. The trigger is a link to `/search` (it works without JavaScript); with
+ * it, a panel opens over the page with a combobox: suggestions as you type (`searchSuggestions`,
+ * debounced, the previous request aborted when a newer one starts), popular searches while the
+ * field is empty (`searchTrending`). Arrow keys move through the results, Enter opens the active
+ * one or submits the query to `/search`, Esc closes.
+ */
+export function PredictiveSearch({ className }: { className?: string }) {
+  const client = useStorefrontClient();
+  const router = useRouter();
+  const pathname = usePathname();
+  const t = messages(useMagicStore().locale);
+  const id = useId();
+  const input = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<Suggestions | null>(null);
+  const [trending, setTrending] = useState<Trending[] | null>(null);
+  const [active, setActive] = useState(-1);
+
+  // Back/forward navigation; a search or a picked suggestion closes the panel itself, even when it
+  // leads to the page already open (a new query on /search keeps the pathname).
+  useEffect(() => setOpen(false), [pathname]);
+
+  // Popular searches, once, the first time the panel opens.
+  useEffect(() => {
+    if (!open || trending !== null) {
+      return;
+    }
+    const controller = new AbortController();
+    client.searchTrending({ query: { perPage: 6 } }, { signal: controller.signal }).then(
+      ({ data }) => setTrending(data),
+      () => setTrending((current) => (controller.signal.aborted ? current : [])),
+    );
+    return () => controller.abort();
+  }, [open, trending, client]);
+
+  useEffect(() => {
+    const q = suggestQuery(query);
+    setActive(-1);
+    if (q === '') {
+      setResults(null);
+      return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      client.searchSuggestions({ query: { q } }, { signal: controller.signal }).then(
+        // Keyed by what was asked, so a late answer never shows under a newer query.
+        ({ data }) => setResults({ ...data, query: q }),
+        // Aborted: a newer query owns the panel. Failed: no suggestions; Enter still searches.
+        () => undefined,
+      );
+    }, SUGGEST_DELAY_MS);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [query, client]);
+
+  const q = query.trim();
+  const shown =
+    q !== '' && results !== null && results.query === suggestQuery(query) ? results : null;
+  const queries = shown
+    ? shown.queries.map((entry) => entry.query)
+    : q === ''
+      ? (trending ?? []).map((entry) => entry.query)
+      : [];
+  const options: Option[] = [
+    ...queries.map((value, index) => ({ id: `${id}-q${index}`, href: searchHref(value) })),
+    ...(shown?.collections ?? []).map((collection) => ({
+      id: `${id}-c${collection.id}`,
+      href: `/collections/${collection.handle}`,
+    })),
+    ...(shown?.products ?? []).map((product) => ({
+      id: `${id}-p${product.id}`,
+      href: `/products/${product.handle}`,
+    })),
+  ];
+  const activeId = options[active]?.id;
+  const listId = `${id}-list`;
+  const empty =
+    shown !== null && shown.queries.length + shown.collections.length + shown.products.length === 0;
+
+  const option = (index: number, children: ReactNode) => {
+    const entry = options[index]!;
+    return (
+      <li
+        key={entry.id}
+        id={entry.id}
+        role="option"
+        aria-selected={index === active}
+        className="predictive-search__option"
+      >
+        <Link
+          href={entry.href}
+          tabIndex={-1}
+          onMouseEnter={() => setActive(index)}
+          onClick={() => setOpen(false)}
+        >
+          {children}
+        </Link>
+      </li>
+    );
+  };
+
+  let index = 0;
+  return (
+    <>
+      <Link
+        href="/search"
+        className={className ? `icon-button ${className}` : 'icon-button'}
+        aria-label={t.search}
+        aria-haspopup="dialog"
+        onClick={(event) => {
+          event.preventDefault();
+          setOpen(true);
+          requestAnimationFrame(() => input.current?.focus());
+        }}
+      >
+        <Icon name="search" />
+      </Link>
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        title={t.search}
+        closeLabel={t.close}
+        side="top"
+        className="predictive-search"
+      >
+        <form
+          role="search"
+          className="predictive-search__form"
+          action="/search"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const href = options[active]?.href ?? (q !== '' ? searchHref(q) : null);
+            if (href !== null) {
+              setOpen(false);
+              router.push(href);
+            }
+          }}
+        >
+          <Icon name="search" className="predictive-search__icon" />
+          <input
+            ref={input}
+            name="q"
+            type="search"
+            role="combobox"
+            aria-label={t.search}
+            aria-expanded={options.length > 0}
+            aria-controls={listId}
+            aria-autocomplete="list"
+            aria-activedescendant={activeId}
+            autoComplete="off"
+            maxLength={SEARCH_QUERY_MAX}
+            enterKeyHint="search"
+            placeholder={t.searchPlaceholder}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                if (options.length === 0) {
+                  return;
+                }
+                const step = event.key === 'ArrowDown' ? 1 : -1;
+                // -1 is the field itself: past either end, back to typing.
+                setActive((current) => {
+                  const next = current + step;
+                  return next < -1 ? options.length - 1 : next >= options.length ? -1 : next;
+                });
+              }
+            }}
+          />
+        </form>
+        <div
+          id={listId}
+          role="listbox"
+          aria-label={t.suggestions}
+          className="predictive-search__results"
+        >
+          {queries.length > 0 && (
+            <div role="group" aria-label={shown ? t.suggestions : t.popularSearches}>
+              <div className="predictive-search__heading" aria-hidden="true">
+                {shown ? t.suggestions : t.popularSearches}
+              </div>
+              <ul role="presentation" className="predictive-search__queries">
+                {queries.map((value) => option(index++, value))}
+              </ul>
+            </div>
+          )}
+          {shown && shown.collections.length > 0 && (
+            <div role="group" aria-label={t.collections}>
+              <div className="predictive-search__heading" aria-hidden="true">
+                {t.collections}
+              </div>
+              <ul role="presentation" className="predictive-search__collections">
+                {shown.collections.map((collection) => option(index++, collection.title))}
+              </ul>
+            </div>
+          )}
+          {shown && shown.products.length > 0 && (
+            <div role="group" aria-label={t.products}>
+              <div className="predictive-search__heading" aria-hidden="true">
+                {t.products}
+              </div>
+              <ul role="presentation" className="predictive-search__products">
+                {shown.products.map((product) =>
+                  option(
+                    index++,
+                    <>
+                      <span className="predictive-search__thumb">
+                        <Image
+                          data={product.featuredImage}
+                          alt=""
+                          width={48}
+                          height={64}
+                          fallback={<span className="media-fallback" />}
+                        />
+                      </span>
+                      <span className="predictive-search__product">
+                        <span>{product.title}</span>
+                        <Price
+                          price={product.price}
+                          compareAtPrice={product.compareAtPrice}
+                          size="sm"
+                        />
+                      </span>
+                    </>,
+                  ),
+                )}
+              </ul>
+            </div>
+          )}
+        </div>
+        {empty && <p className="predictive-search__empty">{t.noSuggestions(q)}</p>}
+        {q !== '' && (
+          <Link
+            href={searchHref(q)}
+            className="predictive-search__all"
+            onClick={() => setOpen(false)}
+          >
+            {t.searchFor(q)}
+            <Icon name="chevron-right" size={16} />
+          </Link>
+        )}
+      </Drawer>
+    </>
+  );
+}

package/template/components/sections/announcement-bar.tsx

@@ -4,7 +4,7 @@ export function AnnouncementBar({ section }: { section: SectionOf<'ANNOUNCEMENT_
   const { text, backgroundColor, textColor, animation } = section.settings;
   return (
     <p
-      className={`announcement announcement-${animation.toLowerCase()}`}
+      className={`announcement-bar announcement-bar--${animation.toLowerCase()}`}
       style={{ background: backgroundColor ?? undefined, color: textColor ?? undefined }}
     >
       <span>{text}</span>

package/template/components/sections/banner.tsx

@@ -24,7 +24,7 @@ function slideHref(link: Slide['link']): string | null {
 
 export function Banner({ section }: { section: SectionOf<'BANNER'> }) {
   return (
-    <section className="banner">
+    <section className="banner-slider">
       {section.settings.slides.map((slide, index) => {
         const image = (
           <Image

package/template/components/sections/collections.tsx

@@ -1,32 +1,59 @@
 import { Image } from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import Link from 'next/link';
+import type { CSSProperties } from 'react';
 
+import { Icon } from '@/components/ui/icon';
 import { api } from '@/lib/api';
 
 import type { SectionOf } from './types';
 
-/** Collection tiles linking to each collection; renders nothing for none. */
+/**
+ * Collection tiles linking to each collection; renders nothing for none. With `count`, each tile
+ * also says how many products the collection holds. When no collection has an image, the tiles
+ * are compact text cards rather than rows of empty placeholders.
+ */
 export function CollectionTiles({
   collections,
   className = '',
+  count,
+  columns,
 }: {
   collections: Schema<'Collection'>[];
   className?: string;
+  count?: ((n: number) => string) | undefined;
+  /** Columns at desktop width; the theme's default (4) without it. */
+  columns?: number;
 }) {
   if (collections.length === 0) {
     return null;
   }
+  const media = collections.some((collection) => collection.image);
   return (
-    <div className={`grid ${className}`}>
+    <div
+      className={`collection-grid ${media ? '' : 'collection-grid--text'} ${className}`}
+      style={columns ? ({ '--columns': columns } as CSSProperties) : undefined}
+    >
       {collections.map((collection) => (
-        <Link key={collection.id} href={`/collections/${collection.handle}`} className="card">
-          <Image
-            data={collection.image}
-            alt={collection.title}
-            fallback={<div className="noimg" />}
-          />
-          <span>{collection.title}</span>
+        <Link
+          key={collection.id}
+          href={`/collections/${collection.handle}`}
+          className="collection-card"
+        >
+          {media && (
+            <span className="collection-card__media">
+              <Image
+                data={collection.image}
+                alt={collection.title}
+                fallback={<span className="media-fallback" />}
+              />
+            </span>
+          )}
+          <span className="collection-card__title">{collection.title}</span>
+          {count && (
+            <span className="collection-card__count">{count(collection.productsCount)}</span>
+          )}
+          {!media && <Icon name="chevron-right" className="collection-card__arrow" />}
         </Link>
       ))}
     </div>
@@ -56,11 +83,21 @@ export async function Collections({ section }: { section: SectionOf<'COLLECTIONS
 /** Tiles the merchant picked by hand, each with an optional image of its own. */
 export function CollectionGrid({ section }: { section: SectionOf<'COLLECTION_GRID'> }) {
   return (
-    <div className="grid">
+    <div className="collection-grid">
       {section.settings.tiles.map(({ collection, image }) => (
-        <Link key={collection.id} href={`/collections/${collection.handle}`} className="card">
-          <Image data={image} alt={collection.title} fallback={<div className="noimg" />} />
-          <span>{collection.title}</span>
+        <Link
+          key={collection.id}
+          href={`/collections/${collection.handle}`}
+          className="collection-card"
+        >
+          <span className="collection-card__media">
+            <Image
+              data={image}
+              alt={collection.title}
+              fallback={<span className="media-fallback" />}
+            />
+          </span>
+          <span className="collection-card__title">{collection.title}</span>
         </Link>
       ))}
     </div>

package/template/components/sections/deal-of-day.tsx

@@ -10,9 +10,9 @@ export async function DealOfDay({ section }: { section: SectionOf<'DEAL_OF_DAY'>
   const { product, image, price, compareAtPrice, endsAt, accentColor, badgeText, stock } =
     section.settings;
   return (
-    <section className="deal" style={{ borderColor: accentColor ?? undefined }}>
+    <section className="deal-of-day" style={{ borderColor: accentColor ?? undefined }}>
       <Link href={`/products/${product.handle}`}>
-        <Image data={image} alt={product.title} fallback={<div className="noimg" />} />
+        <Image data={image} alt={product.title} fallback={<div className="media-fallback" />} />
       </Link>
       <div className="stack">
         {badgeText && (

package/template/components/sections/product-shelves.tsx

@@ -13,11 +13,15 @@ export function Shelf({
   title,
   href,
   products,
+  slider = false,
   children,
 }: {
   title: string;
-  href?: string;
+  /** "See all" goes here; none without it. */
+  href?: string | undefined;
   products: Schema<'Product'>[];
+  /** One sideways-scrolling row instead of the grid. */
+  slider?: boolean;
   children?: ReactNode;
 }) {
   // The server drops a section that would show nothing, but a shelf can empty between the two reads.
@@ -25,13 +29,17 @@ export function Shelf({
     return null;
   }
   return (
-    <section className="stack">
-      <div className="row">
+    <section>
+      <div className="section-header">
         <h2>{title}</h2>
         {children}
-        {href && <Link href={href}>{messages(locale).seeAll}</Link>}
+        {href && (
+          <Link href={href} className="section-header__link">
+            {messages(locale).seeAll}
+          </Link>
+        )}
       </div>
-      <ProductGrid products={products} />
+      <ProductGrid products={products} locale={locale} eager={false} slider={slider} />
     </section>
   );
 }

package/template/components/sections/shoppable-stories.tsx

@@ -10,7 +10,7 @@ import type { SectionOf } from './types';
 export function ShoppableStories({ section }: { section: SectionOf<'SHOPPABLE_STORIES'> }) {
   const { layout, stories } = section.settings;
   return (
-    <section className={`stories stories-${layout.toLowerCase()}`}>
+    <section className={`stories stories--${layout.toLowerCase()}`}>
       {stories.map((story, index) => {
         const product = story.frames.find((frame) => frame.product !== null)?.product ?? null;
         const bubble = (
@@ -18,7 +18,7 @@ export function ShoppableStories({ section }: { section: SectionOf<'SHOPPABLE_ST
             <Image
               data={story.thumbnail}
               alt={story.title ?? ''}
-              fallback={<div className="noimg" />}
+              fallback={<div className="media-fallback" />}
             />
             {story.title && <span>{story.title}</span>}
           </>

package/template/components/sections/store-reviews.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 
+import { Rating } from '@/components/ui/rating';
 import { api, locale } from '@/lib/api';
 import { messages } from '@/lib/i18n';
 
@@ -42,16 +43,21 @@ export async function StoreReviews({ section }: { section: SectionOf<'STORE_REVI
         <ul className="muted">
           {rating.breakdown.map(({ rating: stars, count }) => (
             <li key={stars}>
-              {stars}★ — {count}
+              {t.starsFilter(stars)} — {count}
             </li>
           ))}
         </ul>
       )}
 
-      <div className="grid">
+      <div className="review-grid">
         {reviews.map((review) => (
-          <blockquote key={review.id} className="stack">
-            <span>{'★'.repeat(review.rating)}</span>
+          <blockquote key={review.id} className="review-card">
+            <Rating
+              average={review.rating}
+              count={1}
+              label={t.ratedOutOf(review.rating)}
+              showCount={false}
+            />
             <p>{review.body}</p>
             <footer className="muted">{review.author.name}</footer>
           </blockquote>

package/template/components/share-button.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useMagicStore } from '@magicstoreai/hydrogen';
+import { useState } from 'react';
+
+import { Icon } from '@/components/ui/icon';
+import { messages } from '@/lib/i18n';
+
+/** Shares the page with the system sheet where there is one, else copies its link. */
+export function ShareButton({ title }: { title: string }) {
+  const t = messages(useMagicStore().locale);
+  const [copied, setCopied] = useState(false);
+
+  async function share() {
+    const url = window.location.href;
+    if (typeof navigator.share === 'function') {
+      try {
+        await navigator.share({ title, url });
+        return;
+      } catch (error) {
+        // The buyer closed the sheet: nothing to do. Anything else falls back to copying.
+        if (error instanceof DOMException && error.name === 'AbortError') {
+          return;
+        }
+      }
+    }
+    await navigator.clipboard.writeText(url);
+    setCopied(true);
+  }
+
+  return (
+    <div className="share">
+      <button type="button" className="button button--link share__button" onClick={share}>
+        <Icon name="share" size={18} />
+        {t.share}
+      </button>
+      <span className="share__status" role="status">
+        {copied ? t.linkCopied : ''}
+      </span>
+    </div>
+  );
+}

package/template/components/ui/accordion.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+
+import { Icon } from './icon';
+
+/**
+ * A collapsible row: a native `<details>`, so it opens without JavaScript, by keyboard, and with
+ * the browser's find-in-page. Rows sharing a `name` close each other.
+ */
+export function Accordion({
+  title,
+  open = false,
+  name,
+  className,
+  children,
+}: {
+  title: ReactNode;
+  open?: boolean;
+  name?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <details
+      className={className ? `accordion ${className}` : 'accordion'}
+      open={open || undefined}
+      name={name}
+    >
+      <summary className="accordion__summary">
+        <span>{title}</span>
+        <Icon name="chevron-down" className="accordion__icon" />
+      </summary>
+      <div className="accordion__content">{children}</div>
+    </details>
+  );
+}

package/template/components/ui/badge.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+export type BadgeKind = 'sale' | 'soldOut' | 'new' | 'preOrder' | 'neutral';
+
+/**
+ * A short label on the merchant's label colors (`--label-bg` / `--label-fg`). Only ever for a fact
+ * the API sent: a compare-at price, `availableForSale: false`, `isNew`, `preOrder`. Sold out is
+ * neutral, so it never reads as a promotion.
+ */
+export function Badge({ kind = 'neutral', children }: { kind?: BadgeKind; children: ReactNode }) {
+  return <span className={`badge badge--${KIND_CLASS[kind]}`}>{children}</span>;
+}
+
+const KIND_CLASS: Record<BadgeKind, string> = {
+  sale: 'sale',
+  soldOut: 'sold-out',
+  new: 'new',
+  preOrder: 'pre-order',
+  neutral: 'neutral',
+};

package/template/components/ui/breadcrumbs.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+
+export type Crumb = { name: string; href?: string };
+
+/**
+ * Where the page sits: links to its parents, the page itself last (`aria-current`). Visual only:
+ * the page adds `breadcrumbJsonLd` from `@magicstoreai/hydrogen/seo` for search engines.
+ */
+export function Breadcrumbs({ items, label }: { items: Crumb[]; label: string }) {
+  if (items.length < 2) {
+    return null;
+  }
+  return (
+    <nav className="breadcrumbs" aria-label={label}>
+      <ol className="breadcrumbs__list">
+        {items.map((item, index) => {
+          const last = index === items.length - 1;
+          return (
+            <li key={`${index}-${item.name}`} className="breadcrumbs__item">
+              {last || item.href === undefined ? (
+                <span aria-current={last ? 'page' : undefined}>{item.name}</span>
+              ) : (
+                <Link href={item.href}>{item.name}</Link>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}