create-magic-storefront 0.4.0 → 0.6.0

package/template/app/globals.css

@@ -1,520 +1,16 @@
-:root {
-  --bg: #fff;
-  --fg: #16161a;
-  --muted: #6b6b76;
-  --line: #e7e7ec;
-  --danger: #c62828;
-  /* Controls and image placeholders: white and light grey here, Telegram's colors in a Mini App. */
-  --surface: #fff;
-  --placeholder: #f3f3f6;
-  /* 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,
-    'Segoe UI',
-    Roboto,
-    sans-serif;
-  color: var(--fg);
-  background: var(--bg);
-}
 /*
- * Inside a Telegram Mini App (components/telegram-shell.tsx marks <html>): Telegram's theme, which
- * its script writes as --tg-theme-* on <html>, with the defaults above as fallbacks. The merchant's
- * accent from <html style> (lib/brand.ts) still wins over Telegram's button color.
+ * The storefront's styles, one file per cascade layer (DESIGN.md). The order below is the
+ * precedence: a later layer wins over an earlier one whatever the selector. Components are the
+ * reusable parts; the layout, sections and pages that place them may restyle them; a utility
+ * beats everything.
  */
-html[data-telegram] {
-  --bg: var(--tg-theme-bg-color, #fff);
-  --fg: var(--tg-theme-text-color, #16161a);
-  --muted: var(--tg-theme-hint-color, #6b6b76);
-  --danger: var(--tg-theme-destructive-text-color, #c62828);
-  --surface: var(--tg-theme-secondary-bg-color, #fff);
-  --placeholder: var(--tg-theme-secondary-bg-color, #f3f3f6);
-  --accent: var(--tg-theme-button-color, #1f5eff);
-  --on-accent: var(--tg-theme-button-text-color, #fff);
-}
-html[data-telegram][data-color-scheme='dark'] {
-  --line: rgba(255, 255, 255, 0.14);
-  color-scheme: dark;
-}
-html[data-telegram] body {
-  /* Telegram's stable viewport (the sheet can be dragged), the dynamic viewport outside it. */
-  min-height: var(--tg-viewport-stable-height, 100dvh);
-  padding-left: max(env(safe-area-inset-left), var(--tg-safe-area-inset-left, 0px));
-  padding-right: max(env(safe-area-inset-right), var(--tg-safe-area-inset-right, 0px));
-  padding-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
-}
-* {
-  box-sizing: border-box;
-}
-body {
-  margin: 0;
-}
-a {
-  color: inherit;
-}
-main {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 24px 16px 64px;
-}
-header.site {
-  border-bottom: 1px solid var(--line);
-  background: var(--nav-bg);
-  color: var(--nav-fg);
-}
-header.site nav {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 12px 16px;
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-header.site .brand {
-  font-weight: 700;
-  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));
-  gap: 20px;
-}
-.card {
-  text-decoration: none;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.card img,
-.card .noimg {
-  width: 100%;
-  /* The intrinsic width/height attributes (no layout shift) must not override the ratio. */
-  height: auto;
-  aspect-ratio: 1;
-  object-fit: cover;
-  background: var(--placeholder);
-  border-radius: 8px;
-}
-.muted {
-  color: var(--muted);
-}
-.error {
-  color: var(--danger);
-}
-.row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.product {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 32px;
-}
-@media (max-width: 720px) {
-  .product {
-    grid-template-columns: 1fr;
-  }
-}
-.product img {
-  width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-button,
-.button {
-  font: inherit;
-  padding: 10px 16px;
-  border-radius: 8px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  color: var(--fg);
-  min-height: 44px;
-  cursor: pointer;
-  text-decoration: none;
-}
-button.primary,
-.button.primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--on-accent);
-}
-button[aria-pressed='true'] {
-  border-color: var(--fg);
-}
-button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-input,
-select {
-  font: inherit;
-  min-height: 44px;
-  padding: 9px 12px;
-  background: var(--surface);
-  color: var(--fg);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-td,
-th {
-  padding: 10px 6px;
-  border-bottom: 1px solid var(--line);
-  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;
-  margin-top: 24px;
-}
-fieldset {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 16px;
-}
-.home {
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-}
-.announcement {
-  margin: 0;
-  padding: 10px 16px;
-  border-radius: 8px;
-  background: var(--fg);
-  color: var(--bg);
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.announcement-ltr span,
-.announcement-rtl span {
-  display: inline-block;
-  animation: marquee 18s linear infinite;
-}
-.announcement-rtl span {
-  animation-direction: reverse;
-}
-@keyframes marquee {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .announcement span {
-    animation: none;
-  }
-}
-.banner {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  gap: 16px;
-}
-.banner > * {
-  scroll-snap-align: start;
-}
-.banner img {
-  width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-.deal {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 24px;
-  padding: 16px;
-  border: 2px solid var(--accent);
-  border-radius: 12px;
-}
-@media (max-width: 720px) {
-  .deal {
-    grid-template-columns: 1fr;
-  }
-}
-.deal img {
-  width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-.badge {
-  align-self: flex-start;
-  padding: 2px 10px;
-  border-radius: 999px;
-  background: var(--label-bg);
-  color: var(--label-fg);
-}
-.stories {
-  display: flex;
-  gap: 16px;
-  overflow-x: auto;
-}
-.story {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  text-decoration: none;
-  flex: 0 0 88px;
-}
-.story img,
-.story .noimg {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  background: var(--placeholder);
-  border-radius: 12px;
-}
-.stories-circle .story img,
-.stories-circle .story .noimg {
-  border-radius: 50%;
-}
-blockquote {
-  margin: 0;
-  padding: 16px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-}
-footer.site {
-  border-top: 1px solid var(--line);
-}
-footer.site nav {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 16px;
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-.articles {
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-}
-.article-card img,
-.article-card .noimg {
-  aspect-ratio: 16 / 9;
-}
-.article-card .badge {
-  align-self: flex-start;
-}
-.chips a {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-height: 44px;
-  padding: 0 14px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  text-decoration: none;
-}
-.chips a[aria-current='page'] {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--on-accent);
-}
-.article {
-  max-width: 760px;
-  margin: 0 auto;
-}
-.article-cover {
-  width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-.prose {
-  line-height: 1.65;
-}
-.prose img {
-  max-width: 100%;
-  height: auto;
-}
-.prose table {
-  display: block;
-  overflow-x: auto;
-}
-.article-product {
-  max-width: 260px;
-  margin: 16px 0;
-}
-.callout {
-  margin: 16px 0;
-  padding: 12px 16px;
-  border-left: 4px solid var(--accent);
-  border-radius: 8px;
-  background: var(--placeholder);
-}
-.callout[data-callout='warning'] {
-  border-left-color: var(--danger);
-}
-.author img {
-  border-radius: 50%;
-  object-fit: cover;
-}
-.author h1 {
-  margin: 0;
-}
-/* Theme sections (theme/sections/): the merchant edits their content in the admin. */
-/* A section with nothing to show yet renders nothing, but ThemeSections still wraps it. */
-[data-section-id]:empty {
-  display: none;
-}
-.site-announcement {
-  margin: 0;
-  padding: 8px 16px;
-  background: var(--accent);
-  color: var(--on-accent);
-  text-align: center;
-}
-.hero {
-  display: grid;
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--placeholder);
-}
-.hero > img,
-.hero-text {
-  grid-area: 1 / 1;
-}
-.hero > img {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 21 / 9;
-  object-fit: cover;
-}
-.hero-text {
-  align-self: center;
-  padding: 40px 24px;
-}
-.hero > img + .hero-text {
-  background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.35) 55%, transparent);
-  color: #fff;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
-  align-self: stretch;
-  justify-content: flex-end;
-}
-.hero-center .hero-text {
-  align-items: center;
-  text-align: center;
-}
-.hero-text h1,
-.hero-text p {
-  margin: 0;
-  max-width: 40ch;
-}
-.hero-text .button,
-.image-with-text .button {
-  align-self: flex-start;
-  text-shadow: none;
-}
-.hero-center .hero-text .button {
-  align-self: center;
-}
-@media (max-width: 720px) {
-  .hero > img {
-    aspect-ratio: 4 / 5;
-  }
-}
-.rich-text-narrow {
-  max-width: 760px;
-}
-.image-with-text {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 32px;
-  align-items: center;
-}
-.image-with-text.image-right > img {
-  order: 2;
-}
-.image-with-text > img {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-  border-radius: 12px;
-}
-@media (max-width: 720px) {
-  .image-with-text {
-    grid-template-columns: 1fr;
-  }
-  .image-with-text.image-right > img {
-    order: 0;
-  }
-}
-.testimonials {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 20px;
-}
-.testimonials figure {
-  margin: 0;
-  padding: 16px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-}
-.testimonials blockquote {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.testimonials .rating {
-  color: var(--accent);
-  letter-spacing: 2px;
-}
+@layer reset, tokens, base, components, layout, sections, pages, utilities;
+
+@import './styles/reset.css';
+@import './styles/tokens.css';
+@import './styles/base.css';
+@import './styles/components.css';
+@import './styles/layout.css';
+@import './styles/sections.css';
+@import './styles/pages.css';
+@import './styles/utilities.css';

package/template/app/layout.tsx

@@ -1,18 +1,19 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
 import Script from 'next/script';
 import type { ReactNode } from 'react';
-import { Image } from '@magicstoreai/hydrogen';
 // From /core, not the "use client" entry: a plain string a server component can read.
 import { TELEGRAM_WEB_APP_SCRIPT } from '@magicstoreai/hydrogen/core';
-import { loadThemeSettings } from '@magicstoreai/hydrogen/server';
-import { CartLink } from '@/components/cart-link';
+import { SiteFooter } from '@/components/footer/site-footer';
+import { SiteHeader } from '@/components/header/site-header';
 import { TelegramShell } from '@/components/telegram-shell';
 import { api, locale } from '@/lib/api';
-import { themePreview } from '@/lib/preview';
 import { brandStyle } from '@/lib/brand';
+import { hasContacts } from '@/lib/contacts';
+import { credentialsMode } from '@/lib/upstream';
 import { messages } from '@/lib/i18n';
-import theme from '@/theme';
+import { footerNav, mainNav, readMenu, type NavItem } from '@/lib/menu';
+import { globalSettings, themeAttributes } from '@/lib/theme-settings';
+import { onest } from './fonts';
 import { Providers } from './providers';
 import './globals.css';
 
@@ -30,65 +31,88 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function RootLayout({ children }: { children: ReactNode }) {
-  const [{ data: shop }, { data: collections }, { data: pages }, themeSettings] = await Promise.all(
-    [
-      api.shop(),
-      api.collectionsIndex({ query: { perPage: 6 } }),
-      api.pagesIndex(),
-      themePreview().then((preview) => loadThemeSettings(api, theme, { locale, preview })),
-    ],
-  );
-  const announcement = themeSettings.announcement as string;
+  const [
+    { data: shop },
+    mainMenu,
+    footerMenu,
+    { data: collections },
+    { data: pages },
+    contacts,
+    themeSettings,
+  ] = await Promise.all([
+    api.shop(),
+    readMenu(() => api.menusShow({ path: { handle: 'main' } })),
+    readMenu(() => api.menusShow({ path: { handle: 'footer' } })),
+    // The header's fallback when the shop has no main menu; the footer's top collections.
+    api.collectionsIndex({ query: { 'filter[root]': 'true', perPage: 12 } }),
+    api.pagesIndex(),
+    // Every page renders the header and footer: a failed contacts read leaves the footer without
+    // its contacts column (and /contacts shows the error itself) rather than failing every page.
+    api.contacts().then(
+      ({ data }) => data,
+      () => null,
+    ),
+    globalSettings(),
+  ]);
+  const { announcement } = themeSettings;
   const t = messages(locale);
+  // Without a footer menu, the shop's pages are the footer's links (as before menus existed).
+  const footer = footerNav(footerMenu);
+  const footerLinks =
+    footer.columns.length + footer.links.length + footer.policies.length > 0
+      ? footer
+      : { ...footer, links: pages.map((page) => link(page.title, `/pages/${page.handle}`)) };
 
   return (
     // The merchant's colors, read per request: a change in the admin shows after SHOP_UPDATED.
+    // The theme's global settings as data-* (lib/theme-settings.ts), read by app/styles.
     // Telegram's script (beforeInteractive) writes --tg-viewport-* into <html style> before React
     // hydrates; suppressHydrationWarning covers this element's attributes only, not its children.
-    <html lang={locale} style={brandStyle(shop.branding)} suppressHydrationWarning>
+    <html
+      lang={locale}
+      className={onest.variable}
+      style={brandStyle(shop.branding)}
+      {...themeAttributes(themeSettings)}
+      suppressHydrationWarning
+    >
       <body>
         {/* Telegram's Mini App script, only for a shop with a bot: nobody else can open it in Telegram. */}
         {shop.features.telegramBot && (
           <Script src={TELEGRAM_WEB_APP_SCRIPT} strategy="beforeInteractive" />
         )}
-        <Providers shop={shop}>
+        <Providers shop={shop} credentials={credentialsMode()} cartType={themeSettings.cartType}>
+          <a href="#main" className="skip-link">
+            {t.skipToContent}
+          </a>
           <TelegramShell />
           {announcement && <p className="site-announcement">{announcement}</p>}
-          <header className="site">
-            <nav>
-              <Link href="/" className="brand">
-                {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>
-              ))}
-              {/* Only when an article is readable in this language (`features.blog`). */}
-              {shop.features.blog && <Link href="/blog">{t.blog}</Link>}
-              <Link href="/search">{t.search}</Link>
-              <Link href="/account">{t.account}</Link>
-              <CartLink />
-            </nav>
-          </header>
-          <main>{children}</main>
-          {pages.length > 0 && (
-            <footer className="site">
-              <nav>
-                {pages.map((page) => (
-                  <Link key={page.handle} href={`/pages/${page.handle}`}>
-                    {page.title}
-                  </Link>
-                ))}
-              </nav>
-            </footer>
-          )}
+          <SiteHeader
+            shop={shop}
+            nav={mainNav(mainMenu, collections)}
+            showContacts={contacts !== null && hasContacts(contacts)}
+            t={t}
+          />
+          <main id="main" className="site-main" tabIndex={-1}>
+            {children}
+          </main>
+          <SiteFooter
+            shop={shop}
+            nav={footerLinks}
+            collections={[
+              ...collections
+                .slice(0, 6)
+                .map((collection) => link(collection.title, `/collections/${collection.handle}`)),
+              ...(collections.length > 0 ? [link(t.seeAll, '/collections')] : []),
+            ]}
+            contacts={contacts}
+            t={t}
+          />
         </Providers>
       </body>
     </html>
   );
 }
+
+function link(title: string, href: string): NavItem {
+  return { title, href, children: [] };
+}