create-magic-storefront 0.1.0 → 0.1.2

package/template/app/globals.css

@@ -3,8 +3,14 @@
   --fg: #16161a;
   --muted: #6b6b76;
   --line: #e7e7ec;
-  --accent: #1f5eff;
   --danger: #c62828;
+  /* Brand tokens: app/layout.tsx overrides them with the merchant's colors (lib/brand.ts). */
+  --accent: #1f5eff;
+  --on-accent: #fff;
+  --nav-bg: var(--bg);
+  --nav-fg: var(--fg);
+  --label-bg: var(--accent);
+  --label-fg: var(--on-accent);
   font-family:
     system-ui,
     -apple-system,
@@ -30,6 +36,8 @@ main {
 }
 header.site {
   border-bottom: 1px solid var(--line);
+  background: var(--nav-bg);
+  color: var(--nav-fg);
 }
 header.site nav {
   max-width: 1100px;
@@ -45,6 +53,11 @@ header.site .brand {
   text-decoration: none;
   margin-right: auto;
 }
+header.site .brand img {
+  display: block;
+  width: auto;
+  height: 32px;
+}
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -110,7 +123,7 @@ button.primary,
 .button.primary {
   background: var(--accent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--on-accent);
 }
 button[aria-pressed='true'] {
   border-color: var(--fg);
@@ -137,6 +150,35 @@ th {
   text-align: left;
   vertical-align: middle;
 }
+.cart-lines {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* Phone: image and title on one row, the controls under the title. Wider: all on one row. */
+.cart-line {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 8px 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line);
+}
+.cart-line-controls {
+  grid-column: 2;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+@media (min-width: 720px) {
+  .cart-line {
+    grid-template-columns: 64px minmax(0, 1fr) auto;
+    align-items: center;
+  }
+  .cart-line-controls {
+    grid-column: auto;
+  }
+}
 .pager {
   display: flex;
   gap: 8px;
@@ -221,8 +263,8 @@ fieldset {
   align-self: flex-start;
   padding: 2px 10px;
   border-radius: 999px;
-  background: var(--accent);
-  color: #fff;
+  background: var(--label-bg);
+  color: var(--label-fg);
 }
 .stories {
   display: flex;

package/template/app/layout.tsx

@@ -1,8 +1,11 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import type { ReactNode } from 'react';
+import { Image } from '@magicstoreai/hydrogen';
 import { CartLink } from '@/components/cart-link';
 import { api, locale } from '@/lib/api';
+import { brandStyle } from '@/lib/brand';
+import { messages } from '@/lib/i18n';
 import { Providers } from './providers';
 import './globals.css';
 
@@ -15,6 +18,7 @@ export async function generateMetadata(): Promise<Metadata> {
   return {
     title: shop.seo.title || shop.name,
     description: shop.seo.description ?? shop.description,
+    icons: shop.branding.favicon ? { icon: shop.branding.favicon.url } : undefined,
   };
 }
 
@@ -24,23 +28,29 @@ export default async function RootLayout({ children }: { children: ReactNode })
     api.collectionsIndex({ query: { perPage: 6 } }),
     api.pagesIndex(),
   ]);
+  const t = messages(locale);
 
   return (
-    <html lang={locale}>
+    // The merchant's colors, read per request: a change in the admin shows after SHOP_UPDATED.
+    <html lang={locale} style={brandStyle(shop.branding)}>
       <body>
         <Providers shop={shop}>
           <header className="site">
             <nav>
               <Link href="/" className="brand">
-                {shop.name}
+                {shop.branding.logo ? (
+                  <Image data={shop.branding.logo} alt={shop.name} height={32} loading="eager" />
+                ) : (
+                  shop.name
+                )}
               </Link>
               {collections.map((collection) => (
                 <Link key={collection.id} href={`/collections/${collection.handle}`}>
                   {collection.title}
                 </Link>
               ))}
-              <Link href="/search">Search</Link>
-              <Link href="/account">Account</Link>
+              <Link href="/search">{t.search}</Link>
+              <Link href="/account">{t.account}</Link>
               <CartLink />
             </nav>
           </header>

package/template/app/not-found.tsx

@@ -1,10 +1,13 @@
 import Link from 'next/link';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 export default function NotFound() {
+  const t = messages(locale);
   return (
     <div className="stack">
-      <h1>Not found</h1>
-      <Link href="/">Back to the shop</Link>
+      <h1>{t.notFound}</h1>
+      <Link href="/">{t.backToShop}</Link>
     </div>
   );
 }

package/template/app/pages/[handle]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { pageMeta } from '@magicstoreai/hydrogen/seo';
-import { api, orNotFound } from '@/lib/api';
+import { api, locale, orNotFound } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 type Props = { params: Promise<{ handle: string }> };
 
@@ -21,7 +22,7 @@ export default async function ContentPage({ params }: Props) {
       {page.body ? (
         <div dangerouslySetInnerHTML={{ __html: page.body }} />
       ) : (
-        <p className="muted">Nothing here yet.</p>
+        <p className="muted">{messages(locale).nothingHere}</p>
       )}
     </article>
   );

package/template/app/search/page.tsx

@@ -2,29 +2,34 @@ import type { Metadata } from 'next';
 import { SearchView } from '@/components/analytics-views';
 import { Pager } from '@/components/pager';
 import { ProductGrid } from '@/components/product-grid';
-import { api } from '@/lib/api';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 type Props = { searchParams: Promise<{ q?: string; page?: string }> };
 
 // Result pages are endless and change by the minute: keep them out of the index.
-export const metadata: Metadata = { title: 'Search', robots: { index: false, follow: true } };
+export const metadata: Metadata = {
+  title: messages(locale).search,
+  robots: { index: false, follow: true },
+};
 
 export default async function SearchPage({ searchParams }: Props) {
   const { q = '', page: pageParam } = await searchParams;
   const page = Math.max(1, Number(pageParam) || 1);
+  const t = messages(locale);
   const results = q.trim() ? await api.search({ query: { q, page, perPage: 24 } }) : null;
 
   return (
     <>
-      <h1>Search</h1>
+      <h1>{t.search}</h1>
       <form className="row" action="/search">
-        <input name="q" defaultValue={q} placeholder="What are you looking for?" />
-        <button className="primary">Search</button>
+        <input name="q" defaultValue={q} placeholder={t.searchPlaceholder} />
+        <button className="primary">{t.search}</button>
       </form>
       {results && (
         <>
           <SearchView query={q} resultsCount={results.meta.pagination.total} />
-          <p className="muted">{results.meta.pagination.total} found</p>
+          <p className="muted">{t.found(results.meta.pagination.total)}</p>
           <ProductGrid products={results.data} />
           <Pager
             meta={results.meta.pagination}

package/template/components/buy-box.tsx

@@ -5,17 +5,20 @@ import {
   Money,
   useAnalytics,
   useCart,
+  useMagicStore,
   useVariantSelection,
   useWishlist,
 } from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import { useEffect, useState } from 'react';
+import { messages } from '@/lib/i18n';
 
 export function BuyBox({ product }: { product: Schema<'ProductDetail'> }) {
   const { selectedOptions, selectedVariant, setOption, isAvailable } = useVariantSelection(product);
   const { addLine, status } = useCart();
   const wishlist = useWishlist();
   const analytics = useAnalytics();
+  const t = messages(useMagicStore().locale);
   const [error, setError] = useState<string | null>(null);
   const [added, setAdded] = useState(false);
 
@@ -37,7 +40,7 @@ export function BuyBox({ product }: { product: Schema<'ProductDetail'> }) {
       await addLine({ productId: product.id, variantId, quantity: 1 });
       setAdded(true);
     } catch (e) {
-      setError(e instanceof MagicStoreError ? (e.detail ?? e.message) : 'Could not add.');
+      setError(e instanceof MagicStoreError ? (e.detail ?? e.message) : t.couldNotAdd);
     }
   }
 
@@ -73,13 +76,13 @@ export function BuyBox({ product }: { product: Schema<'ProductDetail'> }) {
         ))}
       <div className="row">
         <button className="primary" disabled={!forSale || status === 'updating'} onClick={add}>
-          {forSale ? 'Add to cart' : 'Sold out'}
+          {forSale ? t.addToCart : t.soldOut}
         </button>
         <button type="button" onClick={() => void wishlist.toggle(product.id)}>
-          {wishlist.has(product.id) ? '♥ Saved' : '♡ Save'}
+          {wishlist.has(product.id) ? `♥ ${t.saved}` : `♡ ${t.save}`}
         </button>
       </div>
-      {added && <p className="muted">Added to cart.</p>}
+      {added && <p className="muted">{t.addedToCart}</p>}
       {error && <p className="error">{error}</p>}
     </div>
   );

package/template/components/cart-link.tsx

@@ -1,9 +1,15 @@
 'use client';
 
-import { useCart } from '@magicstoreai/hydrogen';
+import { useCart, useMagicStore } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { messages } from '@/lib/i18n';
 
 export function CartLink() {
   const { totalQuantity } = useCart();
-  return <Link href="/cart">Cart ({totalQuantity})</Link>;
+  const t = messages(useMagicStore().locale);
+  return (
+    <Link href="/cart">
+      {t.cart} ({totalQuantity})
+    </Link>
+  );
 }

package/template/components/pager.tsx

@@ -1,5 +1,7 @@
 import { paginationState, type Pagination } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 /** Server-rendered page links (`paginationState` is plain arithmetic, no hooks). */
 export function Pager({ meta, href }: { meta: Pagination; href: (page: number) => string }) {
@@ -8,7 +10,7 @@ export function Pager({ meta, href }: { meta: Pagination; href: (page: number) =
   }
   const state = paginationState(meta);
   return (
-    <nav className="pager" aria-label="Pages">
+    <nav className="pager" aria-label={messages(locale).pages}>
       {state.pages.map((page, index) =>
         page === null ? (
           <span key={`gap-${index}`}>…</span>

package/template/components/product-grid.tsx

@@ -1,10 +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>
+  );
+}
 
 export function ProductGrid({ products }: { products: Schema<'Product'>[] }) {
+  const t = messages(locale);
   if (products.length === 0) {
-    return <p className="muted">Nothing here yet.</p>;
+    return <p className="muted">{t.nothingHere}</p>;
   }
   return (
     <div className="grid">
@@ -15,6 +42,7 @@ export function ProductGrid({ products }: { products: Schema<'Product'>[] }) {
             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>} />
@@ -24,7 +52,7 @@ export function ProductGrid({ products }: { products: Schema<'Product'>[] }) {
               </s>
             )}
           </span>
-          {!product.availableForSale && <span className="muted">Sold out</span>}
+          {!product.availableForSale && <span className="muted">{t.soldOut}</span>}
         </Link>
       ))}
     </div>

package/template/components/sections/banner.tsx

@@ -1,5 +1,7 @@
 import { Image } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import type { SectionOf } from './types';
 
@@ -25,7 +27,11 @@ export function Banner({ section }: { section: SectionOf<'BANNER'> }) {
     <section className="banner">
       {section.settings.slides.map((slide, index) => {
         const image = (
-          <Image data={slide.image} loading={index === 0 ? 'eager' : 'lazy'} alt="Banner" />
+          <Image
+            data={slide.image}
+            loading={index === 0 ? 'eager' : 'lazy'}
+            alt={messages(locale).banner}
+          />
         );
         const href = slideHref(slide.link);
         return href === null ? (

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

@@ -1,9 +1,12 @@
 import { Image, Money } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import type { SectionOf } from './types';
 
-export function DealOfDay({ section }: { section: SectionOf<'DEAL_OF_DAY'> }) {
+export async function DealOfDay({ section }: { section: SectionOf<'DEAL_OF_DAY'> }) {
+  const t = messages(locale);
   const { product, image, price, compareAtPrice, endsAt, accentColor, badgeText, stock } =
     section.settings;
   return (
@@ -31,18 +34,26 @@ export function DealOfDay({ section }: { section: SectionOf<'DEAL_OF_DAY'> }) {
         {/* The merchant's "N of M left" bar — not the product's real stock. */}
         {stock && (
           <label className="stack">
-            <span className="muted">
-              {stock.remaining} of {stock.initial} left
-            </span>
+            <span className="muted">{t.stockLeft(stock.remaining, stock.initial)}</span>
             <progress value={stock.remaining} max={Math.max(stock.initial, stock.remaining, 1)} />
           </label>
         )}
         {endsAt && (
           <span className="muted">
-            Ends <time dateTime={endsAt}>{new Date(endsAt).toUTCString()}</time>
+            {t.endsAt} <time dateTime={endsAt}>{await endsAtText(endsAt)}</time>
           </span>
         )}
       </div>
     </section>
   );
 }
+
+/** The end of the deal in the shop's time zone, as the storefront's language writes dates. */
+async function endsAtText(endsAt: string): Promise<string> {
+  const { data: shop } = await api.shop();
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+    timeZone: shop.timezone,
+  }).format(new Date(endsAt));
+}

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

@@ -3,7 +3,8 @@ import Link from 'next/link';
 import type { ReactNode } from 'react';
 
 import { ProductGrid } from '@/components/product-grid';
-import { api } from '@/lib/api';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import { SHELF_SIZE, type SectionOf } from './types';
 
@@ -27,7 +28,7 @@ function Shelf({
       <div className="row">
         <h2>{title}</h2>
         {children}
-        {href && <Link href={href}>See all</Link>}
+        {href && <Link href={href}>{messages(locale).seeAll}</Link>}
       </div>
       <ProductGrid products={products} />
     </section>
@@ -42,35 +43,35 @@ export async function NewArrivals({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { sort: '-createdAt', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="New arrivals" products={data} />;
+  return <Shelf title={messages(locale).newArrivals} products={data} />;
 }
 
 export async function OnSale({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { 'filter[onSale]': 'true', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="On sale" products={data} />;
+  return <Shelf title={messages(locale).onSale} products={data} />;
 }
 
 export async function Trending({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { 'filter[trending]': 'true', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="Trending" products={data} />;
+  return <Shelf title={messages(locale).trending} products={data} />;
 }
 
 export async function Bestsellers({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { sort: '-bestSellers', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="Bestsellers" products={data} />;
+  return <Shelf title={messages(locale).bestsellers} products={data} />;
 }
 
 export async function PreOrders({ section }: { section: ShelfSection }) {
   const { data } = await api.productsIndex({
     query: { 'filter[preOrder]': 'true', perPage: section.settings.limit ?? SHELF_SIZE },
   });
-  return <Shelf title="Pre-order" products={data} />;
+  return <Shelf title={messages(locale).preOrder} products={data} />;
 }
 
 /**

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

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 
-import { api } from '@/lib/api';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 import type { SectionOf } from './types';
 
@@ -8,6 +9,7 @@ const SOURCE_LABELS = { GOOGLE: 'Google', YANDEX: 'Yandex', TWO_GIS: '2GIS', CUS
 
 /** Reviews of the shop itself (`GET /reviews/site`), dressed with what the merchant entered. */
 export async function StoreReviews({ section }: { section: SectionOf<'STORE_REVIEWS'> }) {
+  const t = messages(locale);
   const settings = section.settings;
   const { data: reviews, meta } = await api.reviewsSite({
     query: { perPage: settings.limit, sort: '-createdAt' },
@@ -17,17 +19,17 @@ export async function StoreReviews({ section }: { section: SectionOf<'STORE_REVI
   return (
     <section className="stack">
       {settings.overline && <span className="muted">{settings.overline}</span>}
-      <h2>{settings.title ?? 'What our customers say'}</h2>
+      <h2>{settings.title ?? t.customersSay}</h2>
       {settings.subtitle && <p className="muted">{settings.subtitle}</p>}
 
       <div className="row">
         {rating.average !== null && (
           <strong>
-            {rating.average} / 5 · {rating.count} reviews
+            {rating.average} / 5 · {t.reviewsCount(rating.count)}
           </strong>
         )}
         {settings.recommendPercent !== null && (
-          <span>{settings.recommendPercent}% recommend us</span>
+          <span>{t.recommendUs(settings.recommendPercent)}</span>
         )}
         {settings.externalRatings.map((external, index) => (
           <span key={index} className="muted">
@@ -59,7 +61,7 @@ export async function StoreReviews({ section }: { section: SectionOf<'STORE_REVI
       {settings.showLeaveReview && (
         // Leaving a site review needs a signed-in customer (POST /reviews/site).
         <Link href="/account" className="button">
-          Leave a review
+          {t.leaveReview}
         </Link>
       )}
     </section>

package/template/lib/brand.ts

@@ -0,0 +1,60 @@
+import type { Schema } from '@magicstoreai/storefront-client';
+import type { CSSProperties } from 'react';
+
+type Branding = Schema<'Shop'>['branding'];
+
+/** `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`. The admin stores colors as free text; nothing else is trusted. */
+const HEX_COLOR = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
+function hexColor(value: string | null): string | null {
+  return value !== null && HEX_COLOR.test(value) ? value : null;
+}
+
+/** WCAG relative luminance of a hex color; alpha is ignored. */
+function luminance(hex: string): number {
+  const digits = hex.slice(1);
+  const channels =
+    digits.length <= 4
+      ? [0, 1, 2].map((i) => parseInt(digits[i]! + digits[i]!, 16))
+      : [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16));
+  const [r, g, b] = channels.map((channel) => {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!;
+}
+
+/** Black or white, whichever contrasts more with the background. */
+export function readableTextOn(background: string): '#000' | '#fff' {
+  const l = luminance(background);
+  const onBlack = (l + 0.05) / 0.05;
+  const onWhite = 1.05 / (l + 0.05);
+  return onBlack >= onWhite ? '#000' : '#fff';
+}
+
+/**
+ * The merchant's colors as CSS custom properties for `<html style>`. A color the merchant didn't
+ * set is left out, so the design's fallback in `globals.css` applies; a text color the merchant
+ * didn't set is picked for contrast against its background.
+ */
+export function brandStyle(branding: Branding): CSSProperties {
+  const { colors } = branding;
+  const tokens: Record<string, string> = {};
+  const pair = (name: string, background: string | null, text: string | null) => {
+    const bg = hexColor(background);
+    if (bg === null) {
+      return;
+    }
+    tokens[`--${name}-bg`] = bg;
+    tokens[`--${name}-fg`] = hexColor(text) ?? readableTextOn(bg);
+  };
+
+  const accent = hexColor(colors.main);
+  if (accent !== null) {
+    tokens['--accent'] = accent;
+    tokens['--on-accent'] = hexColor(colors.buttonText) ?? readableTextOn(accent);
+  }
+  pair('nav', colors.navbarBackground, colors.navbarText);
+  pair('label', colors.labelBackground, colors.labelText);
+  return tokens as CSSProperties;
+}

package/template/lib/errors.ts

@@ -1,9 +1,6 @@
 import { MagicStoreError } from '@magicstoreai/hydrogen';
 
 /** What to tell the buyer: the API's localized detail when there is one. */
-export function describe(
-  error: unknown,
-  fallback = 'Something went wrong. Please try again.',
-): string {
+export function describe(error: unknown, fallback: string): string {
   return error instanceof MagicStoreError ? (error.detail ?? error.message) : fallback;
 }