create-magic-storefront 0.1.0 → 0.1.2

package/template/PAGES.md

@@ -31,7 +31,10 @@ API's, not the build's. The fetch cache still spares the API.
 ## Layout — `app/layout.tsx`
 
 - Reads `api.shop()` and the navigation (`api.collectionsIndex` or `api.menusShow({ path: { handle: 'main' } })`).
-- `generateMetadata`: `shop.seo.title || shop.name`, `shop.seo.description ?? shop.description`.
+- `generateMetadata`: `shop.seo.title || shop.name`, `shop.seo.description ?? shop.description`,
+  the favicon from `shop.branding.favicon`.
+- The merchant's colors: `brandStyle(shop.branding)` (`lib/brand.ts`) on `<html style>`, as the
+  tokens `app/globals.css` falls back from; the header shows `shop.branding.logo` when there is one.
 - Wraps the page in `Providers` (`MagicStoreProvider` with `shop` passed in, so the browser does not
   load it again).
 
@@ -147,8 +150,13 @@ updatedAt }` rows — on `SITE_URL` or the shop's `primaryDomain`, at most 50 pa
 ## Every page
 
 - Import only the SDK's entry points; `npx create-magic-storefront check` passes.
-- Not found → `notFound()`; any other failure shows `describe(error)` (`lib/errors.ts`) or lets
-  `app/error.tsx` catch it (it shows `detail`, and "temporarily closed" on `STORE_UNAVAILABLE`).
+- Not found → `notFound()`; any other failure shows `describe(error, t.tryAgainLater)`
+  (`lib/errors.ts`) or lets `app/error.tsx` catch it (it shows `detail`, and "temporarily closed"
+  on `STORE_UNAVAILABLE`).
+- The interface speaks the storefront's language: every word the storefront itself shows comes from
+  `lib/i18n.ts` (`messages(locale)` on the server, `messages(useMagicStore().locale)` in a client
+  component), with an entry in each dictionary (`ru`, `uz`, `en`). What the merchant wrote comes
+  translated from the API.
 - Images through `<Image>` (intrinsic size, lazy), prices through `<Money>`.
 - Analytics: `PageViews` in `app/providers.tsx` reports each route; product, collection and search
   views are reported where they render.

package/template/_gitignore

@@ -3,3 +3,4 @@ node_modules/
 .env*.local
 next-env.d.ts
 *.tsbuildinfo
+.screenshots/

package/template/app/account/page.tsx

@@ -1,19 +1,27 @@
 'use client';
 
-import { Money, useCustomer, useStorefrontClient, useWishlist } from '@magicstoreai/hydrogen';
+import {
+  Money,
+  useCustomer,
+  useMagicStore,
+  useStorefrontClient,
+  useWishlist,
+} from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import { useEffect, useState } from 'react';
 import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
 
 export default function AccountPage() {
   const { customer, isSignedIn, signOut } = useCustomer();
+  const t = messages(useMagicStore().locale);
   return isSignedIn && customer ? (
     <div className="stack">
       <h1>{customer.name || customer.phone}</h1>
       <Orders />
       <SavedCount />
       <div>
-        <button onClick={() => void signOut()}>Sign out</button>
+        <button onClick={() => void signOut()}>{t.signOut}</button>
       </div>
     </div>
   ) : (
@@ -23,6 +31,7 @@ export default function AccountPage() {
 
 function SignIn() {
   const { requestOtp, verifyOtp } = useCustomer();
+  const t = messages(useMagicStore().locale);
   const [phone, setPhone] = useState('');
   const [sent, setSent] = useState(false);
   const [code, setCode] = useState('');
@@ -33,7 +42,7 @@ function SignIn() {
     try {
       await step();
     } catch (e) {
-      setError(describe(e));
+      setError(describe(e, t.tryAgainLater));
     }
   }
 
@@ -53,11 +62,14 @@ function SignIn() {
         });
       }}
     >
-      <h1>Sign in</h1>
+      <h1>{t.signIn}</h1>
       <input
         value={phone}
         onChange={(e) => setPhone(e.target.value)}
         placeholder="+998 90 123 45 67"
+        aria-label={t.phone}
+        type="tel"
+        autoComplete="tel"
         required
         disabled={sent}
       />
@@ -65,12 +77,14 @@ function SignIn() {
         <input
           value={code}
           onChange={(e) => setCode(e.target.value)}
-          placeholder="Code from the SMS"
+          placeholder={t.smsCode}
+          aria-label={t.smsCode}
           inputMode="numeric"
+          autoComplete="one-time-code"
           required
         />
       )}
-      <button className="primary">{sent ? 'Sign in' : 'Send code'}</button>
+      <button className="primary">{sent ? t.signIn : t.sendCode}</button>
       {error && <p className="error">{error}</p>}
     </form>
   );
@@ -79,6 +93,7 @@ function SignIn() {
 function Orders() {
   const client = useStorefrontClient();
   const [orders, setOrders] = useState<Schema<'Order'>[] | null>(null);
+  const t = messages(useMagicStore().locale);
 
   useEffect(() => {
     void client.customerOrdersIndex({ query: { perPage: 20 } }).then(
@@ -88,18 +103,18 @@ function Orders() {
   }, [client]);
 
   if (orders === null) {
-    return <p className="muted">Loading orders…</p>;
+    return <p className="muted">{t.loadingOrders}</p>;
   }
   return (
     <section className="stack">
-      <h2>Orders</h2>
-      {orders.length === 0 && <p className="muted">No orders yet.</p>}
+      <h2>{t.orders}</h2>
+      {orders.length === 0 && <p className="muted">{t.noOrders}</p>}
       <table>
         <tbody>
           {orders.map((order) => (
             <tr key={order.id}>
               <td>#{order.number}</td>
-              <td>{order.status}</td>
+              <td>{t.orderStatus[order.status]}</td>
               <td>
                 <Money data={(order.cost as { total?: Schema<'Money'> | null }).total ?? null} />
               </td>
@@ -113,5 +128,10 @@ function Orders() {
 
 function SavedCount() {
   const { productIds } = useWishlist();
-  return <p className="muted">Saved products: {productIds.length}</p>;
+  const t = messages(useMagicStore().locale);
+  return (
+    <p className="muted">
+      {t.savedProducts}: {productIds.length}
+    </p>
+  );
 }

package/template/app/cart/page.tsx

@@ -1,22 +1,24 @@
 'use client';
 
-import { Image, Money, moneyAmount, useCart } from '@magicstoreai/hydrogen';
+import { Image, Money, moneyAmount, useCart, useMagicStore } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
 import { useState } from 'react';
 import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
 
 export default function CartPage() {
   const { cart, status, error, updateLine, removeLine, setDiscountCodes } = useCart();
   const [code, setCode] = useState('');
+  const t = messages(useMagicStore().locale);
 
   if (status === 'loading') {
-    return <p className="muted">Loading your cart…</p>;
+    return <p className="muted">{t.loadingCart}</p>;
   }
   if (cart === null || cart.lines.length === 0) {
     return (
       <div className="stack">
-        <h1>Your cart is empty</h1>
-        <Link href="/">Continue shopping</Link>
+        <h1>{t.cartEmpty}</h1>
+        <Link href="/">{t.continueShopping}</Link>
       </div>
     );
   }
@@ -25,47 +27,39 @@ export default function CartPage() {
 
   return (
     <div className="stack">
-      <h1>Cart</h1>
-      <table>
-        <tbody>
-          {cart.lines.map((line) => (
-            <tr key={line.id}>
-              <td style={{ width: 72 }}>
-                <Image data={line.merchandise.image} width={64} height={64} alt="" />
-              </td>
-              <td>
-                <div>{line.merchandise.product?.title}</div>
-                {line.merchandise.variant &&
-                  !/^Default( Title)?$/.test(line.merchandise.variant.title) && (
-                    <div className="muted">{line.merchandise.variant.title}</div>
-                  )}
-                {!line.available && <div className="error">Not available any more</div>}
-              </td>
-              <td>
-                <input
-                  type="number"
-                  min={0}
-                  max={999}
-                  value={line.quantity}
-                  aria-label="Quantity"
-                  onChange={(event) =>
-                    void updateLine(line.id, Number(event.target.value)).catch(() => undefined)
-                  }
-                  style={{ width: 72 }}
-                />
-              </td>
-              <td>
-                <Money data={line.cost.total} />
-              </td>
-              <td>
-                <button onClick={() => void removeLine(line.id).catch(() => undefined)}>
-                  Remove
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <h1>{t.cart}</h1>
+      <ul className="cart-lines">
+        {cart.lines.map((line) => (
+          <li key={line.id} className="cart-line">
+            <Image data={line.merchandise.image} width={64} height={64} alt="" />
+            <div>
+              <div>{line.merchandise.product?.title}</div>
+              {line.merchandise.variant &&
+                !/^Default( Title)?$/.test(line.merchandise.variant.title) && (
+                  <div className="muted">{line.merchandise.variant.title}</div>
+                )}
+              {!line.available && <div className="error">{t.notAvailable}</div>}
+            </div>
+            <div className="cart-line-controls">
+              <input
+                type="number"
+                min={0}
+                max={999}
+                value={line.quantity}
+                aria-label={t.quantity}
+                onChange={(event) =>
+                  void updateLine(line.id, Number(event.target.value)).catch(() => undefined)
+                }
+                style={{ width: 72 }}
+              />
+              <Money data={line.cost.total} />
+              <button onClick={() => void removeLine(line.id).catch(() => undefined)}>
+                {t.remove}
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
 
       <form
         className="row"
@@ -77,12 +71,14 @@ export default function CartPage() {
         <input
           value={code}
           onChange={(event) => setCode(event.target.value)}
-          placeholder="Discount code"
+          placeholder={t.discountCode}
+          aria-label={t.discountCode}
         />
-        <button>Apply</button>
+        <button>{t.apply}</button>
         {applied && (
           <span className={applied.applicable ? 'muted' : 'error'}>
-            {applied.code}: {applied.applicable ? 'applied' : `not applied (${applied.reasonCode})`}
+            {applied.code}:{' '}
+            {applied.applicable ? t.codeApplied : `${t.codeNotApplied} (${applied.reasonCode})`}
           </span>
         )}
       </form>
@@ -90,21 +86,21 @@ export default function CartPage() {
       <table>
         <tbody>
           <tr>
-            <td>Subtotal</td>
+            <td>{t.subtotal}</td>
             <td>
               <Money data={cart.cost.subtotal} />
             </td>
           </tr>
           {cart.cost.discountTotal && moneyAmount(cart.cost.discountTotal) > 0 && (
             <tr>
-              <td>Discount</td>
+              <td>{t.discount}</td>
               <td>
                 −<Money data={cart.cost.discountTotal} />
               </td>
             </tr>
           )}
           <tr>
-            <th>Total</th>
+            <th>{t.total}</th>
             <th>
               <Money data={cart.cost.total} />
             </th>
@@ -112,12 +108,12 @@ export default function CartPage() {
         </tbody>
       </table>
 
-      {error && <p className="error">{describe(error)}</p>}
+      {error && <p className="error">{describe(error, t.tryAgainLater)}</p>}
       <div className="row">
         <Link href="/checkout" className="button primary">
-          Checkout
+          {t.checkout}
         </Link>
-        {status === 'updating' && <span className="muted">Updating…</span>}
+        {status === 'updating' && <span className="muted">{t.updating}</span>}
       </div>
     </div>
   );

package/template/app/checkout/page.tsx

@@ -1,10 +1,17 @@
 'use client';
 
-import { Money, useCart, useCustomer, useStorefrontClient } from '@magicstoreai/hydrogen';
+import {
+  Money,
+  useCart,
+  useCustomer,
+  useMagicStore,
+  useStorefrontClient,
+} from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
 
 type Checkout = Schema<'Checkout'>;
 type DeliveryOption = Schema<'DeliveryOption'>;
@@ -20,6 +27,7 @@ export default function CheckoutPage() {
   const client = useStorefrontClient();
   const { cart, status: cartStatus } = useCart();
   const { customer } = useCustomer();
+  const t = messages(useMagicStore().locale);
   const [checkout, setCheckout] = useState<Checkout | null>(null);
   const [locations, setLocations] = useState<Location[]>([]);
   const [options, setOptions] = useState<DeliveryOption[]>([]);
@@ -27,20 +35,23 @@ export default function CheckoutPage() {
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
-  const run = useCallback(async (step: () => Promise<{ data: Checkout } | void>) => {
-    setBusy(true);
-    setError(null);
-    try {
-      const result = await step();
-      if (result) {
-        setCheckout(result.data);
+  const run = useCallback(
+    async (step: () => Promise<{ data: Checkout } | void>) => {
+      setBusy(true);
+      setError(null);
+      try {
+        const result = await step();
+        if (result) {
+          setCheckout(result.data);
+        }
+      } catch (e) {
+        setError(describe(e, t.tryAgainLater));
+      } finally {
+        setBusy(false);
       }
-    } catch (e) {
-      setError(describe(e));
-    } finally {
-      setBusy(false);
-    }
-  }, []);
+    },
+    [t],
+  );
 
   useEffect(() => {
     if (cart === null || checkout !== null) {
@@ -62,31 +73,36 @@ export default function CheckoutPage() {
   if (completion) {
     return (
       <div className="stack">
-        <h1>Thank you!</h1>
+        <h1>{t.thankYou}</h1>
         <p>
-          Order <strong>{completion.order.number}</strong> — <Money data={completion.order.total} />
+          {t.order} <strong>{completion.order.number}</strong> —{' '}
+          <Money data={completion.order.total} />
         </p>
         {completion.payment.status === 'PENDING' && completion.payment.redirectUrl && (
           <a className="button primary" href={completion.payment.redirectUrl}>
-            Pay now
+            {t.payNow}
           </a>
         )}
-        <Link href="/">Continue shopping</Link>
+        <Link href="/">{t.continueShopping}</Link>
       </div>
     );
   }
   if (cartStatus === 'loading') {
-    return <p className="muted">Loading your cart…</p>;
+    return <p className="muted">{t.loadingCart}</p>;
   }
   if (cart === null || cart.lines.length === 0) {
     return (
       <p>
-        Your cart is empty. <Link href="/">Continue shopping</Link>
+        {t.cartEmpty}. <Link href="/">{t.continueShopping}</Link>
       </p>
     );
   }
   if (checkout === null) {
-    return error ? <p className="error">{error}</p> : <p className="muted">Preparing checkout…</p>;
+    return error ? (
+      <p className="error">{error}</p>
+    ) : (
+      <p className="muted">{t.preparingCheckout}</p>
+    );
   }
 
   const id = checkout.id;
@@ -94,7 +110,7 @@ export default function CheckoutPage() {
 
   return (
     <div className="stack">
-      <h1>Checkout</h1>
+      <h1>{t.checkoutTitle}</h1>
 
       <form
         className="stack"
@@ -110,30 +126,38 @@ export default function CheckoutPage() {
         }}
       >
         <fieldset className="stack">
-          <legend>Contact {missing.has('CONTACT') ? '' : '✓'}</legend>
+          <legend>
+            {t.contact} {missing.has('CONTACT') ? '' : '✓'}
+          </legend>
           <input
             name="name"
             required
-            placeholder="Name"
+            placeholder={t.name}
+            aria-label={t.name}
+            autoComplete="name"
             defaultValue={checkout.contact?.name ?? customer?.name ?? ''}
           />
           <input
             name="phone"
             required
             placeholder="+998 90 123 45 67"
+            aria-label={t.phone}
+            type="tel"
+            autoComplete="tel"
             defaultValue={checkout.contact?.phone ?? customer?.phone ?? ''}
           />
-          <button disabled={busy}>Save contact</button>
+          <button disabled={busy}>{t.saveContact}</button>
         </fieldset>
       </form>
 
       <fieldset className="stack">
         <legend>
-          Delivery {missing.has('DELIVERY_ADDRESS') || missing.has('DELIVERY_OPTION') ? '' : '✓'}
+          {t.delivery}{' '}
+          {missing.has('DELIVERY_ADDRESS') || missing.has('DELIVERY_OPTION') ? '' : '✓'}
         </legend>
         {locations.length > 0 && (
           <div className="stack">
-            <strong>Pick up</strong>
+            <strong>{t.pickUp}</strong>
             {locations.map((location) => (
               <label key={location.id} className="row">
                 <input
@@ -176,17 +200,39 @@ export default function CheckoutPage() {
             });
           }}
         >
-          <strong>Or deliver to</strong>
-          <input name="address" placeholder="Street, house" />
-          <input name="city" placeholder="City" />
+          <strong>{locations.length > 0 ? t.orDeliverTo : t.deliverTo}</strong>
+          <input
+            name="address"
+            placeholder={t.street}
+            aria-label={t.street}
+            autoComplete="street-address"
+          />
+          <input
+            name="city"
+            placeholder={t.city}
+            aria-label={t.city}
+            autoComplete="address-level2"
+          />
           <div className="row">
-            <input name="latitude" required inputMode="decimal" placeholder="Latitude" />
-            <input name="longitude" required inputMode="decimal" placeholder="Longitude" />
+            <input
+              name="latitude"
+              required
+              inputMode="decimal"
+              placeholder={t.latitude}
+              aria-label={t.latitude}
+            />
+            <input
+              name="longitude"
+              required
+              inputMode="decimal"
+              placeholder={t.longitude}
+              aria-label={t.longitude}
+            />
             <button type="button" onClick={(event) => fillMyLocation(event.currentTarget.form)}>
-              Use my location
+              {t.useMyLocation}
             </button>
           </div>
-          <button disabled={busy}>Show delivery options</button>
+          <button disabled={busy}>{t.showDeliveryOptions}</button>
         </form>
         {options.map((option) => (
           <label key={option.id} className="row">
@@ -204,13 +250,15 @@ export default function CheckoutPage() {
                 )
               }
             />
-            {option.title} — <Money data={option.price} fallback="free" />
+            {option.title} — <Money data={option.price} fallback={t.free} />
           </label>
         ))}
       </fieldset>
 
       <fieldset className="stack">
-        <legend>Payment {missing.has('PAYMENT_METHOD') ? '' : '✓'}</legend>
+        <legend>
+          {t.payment} {missing.has('PAYMENT_METHOD') ? '' : '✓'}
+        </legend>
         {checkout.paymentMethods.map((method) => (
           <label key={method.id} className="row">
             <input
@@ -232,7 +280,7 @@ export default function CheckoutPage() {
       </fieldset>
 
       <p>
-        Total:{' '}
+        {t.total}:{' '}
         <strong>
           <Money data={checkout.cost.total} />
         </strong>
@@ -248,7 +296,7 @@ export default function CheckoutPage() {
           })
         }
       >
-        Place order
+        {t.placeOrder}
       </button>
     </div>
   );

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

@@ -3,7 +3,8 @@ import { breadcrumbJsonLd, jsonLdScript, pageMeta } from '@magicstoreai/hydrogen
 import { CollectionView } from '@/components/analytics-views';
 import { Pager } from '@/components/pager';
 import { ProductGrid } from '@/components/product-grid';
-import { api, orNotFound } from '@/lib/api';
+import { api, locale, orNotFound } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 type Props = { params: Promise<{ handle: string }>; searchParams: Promise<{ page?: string }> };
 
@@ -33,7 +34,7 @@ export default async function CollectionPage({ params, searchParams }: Props) {
         dangerouslySetInnerHTML={{
           __html: jsonLdScript(
             breadcrumbJsonLd([
-              { name: 'Home', url: '/' },
+              { name: messages(locale).home, url: '/' },
               { name: collection.title, url: `/collections/${collection.handle}` },
             ]),
           ),

package/template/app/error.tsx

@@ -1,17 +1,19 @@
 'use client';
 
-import { MagicStoreError } from '@magicstoreai/hydrogen';
+import { MagicStoreError, useMagicStore } from '@magicstoreai/hydrogen';
+import { messages } from '@/lib/i18n';
 
 /** Any failure a page did not handle itself: the API's detail when there is one, and a retry. */
 export default function ErrorPage({ error, reset }: { error: Error; reset: () => void }) {
+  const t = messages(useMagicStore().locale);
   const unavailable = error instanceof MagicStoreError && error.code === 'STORE_UNAVAILABLE';
   return (
     <div className="stack">
-      <h1>{unavailable ? 'The shop is temporarily closed' : 'Something went wrong'}</h1>
+      <h1>{unavailable ? t.shopClosed : t.somethingWentWrong}</h1>
       {error instanceof MagicStoreError && error.detail && <p>{error.detail}</p>}
       <div className="row">
-        <button onClick={reset}>Try again</button>
-        <a href="/">Back to the shop</a>
+        <button onClick={reset}>{t.tryAgain}</button>
+        <a href="/">{t.backToShop}</a>
       </div>
     </div>
   );