create-magic-storefront 0.4.0 → 0.6.0

package/template/app/styles/reset.css

@@ -0,0 +1,55 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+  img,
+  svg,
+  video {
+    display: block;
+    max-width: 100%;
+  }
+  input,
+  button,
+  select,
+  textarea {
+    font: inherit;
+    color: inherit;
+  }
+  button {
+    cursor: pointer;
+  }
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+  }
+  legend {
+    padding: 0;
+  }
+  dialog {
+    padding: 0;
+    border: 0;
+    max-width: none;
+    max-height: none;
+    color: inherit;
+  }
+}

package/template/app/styles/sections.css

@@ -0,0 +1,415 @@
+/* Theme sections (theme/sections/) and GET /home renderers (components/sections/). */
+@layer sections {
+  .section-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-2) var(--space-4);
+    margin-bottom: var(--space-5);
+  }
+  .section-header__link {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+
+  /* Hero (Dawn's image banner): the text over the image, or below it (`stacked`, and on phones
+     with `stack-mobile`); without an image, the text alone on a quiet fill. */
+  .hero {
+    --hero-h: 26rem;
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background: var(--subtle);
+  }
+  .hero--small {
+    --hero-h: 20rem;
+  }
+  .hero--large {
+    --hero-h: 32rem;
+  }
+  @media (min-width: 750px) {
+    .hero {
+      --hero-h: 34rem;
+    }
+    .hero--small {
+      --hero-h: 26rem;
+    }
+    .hero--large {
+      --hero-h: 44rem;
+    }
+  }
+  .hero__media {
+    position: relative;
+    min-height: var(--hero-h);
+  }
+  .hero__media img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  /* As the image: its own proportions, nothing cropped. */
+  .hero--adapt .hero__media {
+    min-height: 0;
+  }
+  .hero--adapt .hero__media img {
+    position: static;
+    height: auto;
+  }
+  .hero__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: var(--space-4);
+    padding: var(--space-8) var(--gutter);
+  }
+  @media (min-width: 990px) {
+    .hero__content {
+      padding: var(--space-9) var(--space-8);
+    }
+  }
+  .hero--top .hero__content {
+    justify-content: flex-start;
+  }
+  .hero--middle .hero__content {
+    justify-content: center;
+  }
+  .hero__heading {
+    max-width: 22ch;
+    font-size: var(--text-4xl);
+  }
+  .hero__text {
+    max-width: 46ch;
+    font-size: var(--text-lg);
+  }
+  .hero__content .button {
+    align-self: flex-start;
+  }
+  .hero--center .hero__content {
+    align-items: center;
+    text-align: center;
+  }
+  .hero--center .hero__content .button {
+    align-self: center;
+  }
+
+  /* Text over the image: on a shade the merchant sets (`overlayOpacity`). */
+  .hero--overlay .hero__media,
+  .hero--overlay .hero__content {
+    grid-area: 1 / 1;
+  }
+  .hero--overlay .hero__media::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgb(0 0 0 / var(--hero-overlay, 0.4));
+  }
+  .hero--overlay .hero__content {
+    position: relative;
+    color: #fff;
+  }
+  .hero--overlay .hero__heading,
+  .hero--overlay .hero__text {
+    text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
+  }
+
+  /* Text below the image: the banner keeps its own lettering readable. */
+  .hero--stacked {
+    background: none;
+  }
+  .hero--stacked .hero__media {
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+  }
+  .hero--stacked .hero__content {
+    padding: var(--space-5) 0 0;
+  }
+  @media (max-width: 749px) {
+    .hero--stack-mobile.hero--overlay {
+      background: none;
+    }
+    .hero--stack-mobile.hero--overlay .hero__media {
+      grid-area: auto;
+      overflow: hidden;
+      border-radius: var(--radius-lg);
+    }
+    .hero--stack-mobile.hero--overlay .hero__media::after {
+      content: none;
+    }
+    .hero--stack-mobile.hero--overlay .hero__content {
+      grid-area: auto;
+      padding: var(--space-5) 0 0;
+      color: inherit;
+    }
+    .hero--stack-mobile .hero__heading,
+    .hero--stack-mobile .hero__text {
+      text-shadow: none;
+    }
+    /* Stacked on a phone, the image keeps its proportions: a banner is seldom made for 4:5. */
+    .hero--stack-mobile .hero__media {
+      min-height: 0;
+    }
+    .hero--stack-mobile .hero__media img {
+      position: static;
+      height: auto;
+    }
+  }
+
+  /* Rich text */
+  .rich-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+  .rich-text--narrow {
+    max-width: 48rem;
+    margin-inline: auto;
+  }
+  .rich-text--center {
+    align-items: center;
+    text-align: center;
+  }
+
+  /* Image with text */
+  .image-with-text {
+    display: grid;
+    gap: var(--space-5);
+    align-items: center;
+  }
+  @media (min-width: 750px) {
+    .image-with-text {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--space-8);
+    }
+    .image-with-text--image-right .image-with-text__media {
+      order: 2;
+    }
+  }
+  .image-with-text__media {
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    background: var(--placeholder);
+  }
+  .image-with-text__media img {
+    width: 100%;
+    height: auto;
+  }
+  .image-with-text--portrait .image-with-text__media {
+    aspect-ratio: 4 / 5;
+  }
+  .image-with-text--square .image-with-text__media {
+    aspect-ratio: 1;
+  }
+  .image-with-text--landscape .image-with-text__media {
+    aspect-ratio: 4 / 3;
+  }
+  .image-with-text:not(.image-with-text--adapt) .image-with-text__media img {
+    height: 100%;
+    object-fit: cover;
+  }
+  .image-with-text__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+  .image-with-text__text .button {
+    align-self: flex-start;
+  }
+
+  /* Testimonials (merchant-entered quotes) and store reviews (GET /reviews/site). */
+  .testimonials__grid,
+  .review-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+    gap: var(--space-4);
+  }
+  .testimonial,
+  .review-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    margin: 0;
+    padding: var(--space-5);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+  }
+  .testimonial__text {
+    margin: 0;
+    font-size: var(--text-lg);
+    line-height: var(--leading-snug);
+  }
+
+  /* Banner slider (GET /home BANNER) */
+  .banner-slider {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 100%;
+    gap: var(--space-4);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+  }
+  .banner-slider > * {
+    scroll-snap-align: start;
+  }
+  .banner-slider img {
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius-md);
+  }
+
+  /* Deal of the day */
+  .deal-of-day {
+    display: grid;
+    gap: var(--space-5);
+    padding: var(--space-5);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-lg);
+  }
+  @media (min-width: 750px) {
+    .deal-of-day {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      align-items: center;
+    }
+  }
+  .deal-of-day img,
+  .deal-of-day .media-fallback {
+    width: 100%;
+    height: auto;
+    aspect-ratio: var(--media-ratio);
+    object-fit: cover;
+    border-radius: var(--radius-md);
+  }
+
+  /* Stories */
+  .stories {
+    display: flex;
+    gap: var(--space-4);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .story {
+    display: flex;
+    flex: 0 0 5.5rem;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    text-align: center;
+    text-decoration: none;
+  }
+  .story img,
+  .story .media-fallback {
+    width: 5rem;
+    height: 5rem;
+    object-fit: cover;
+    border-radius: var(--radius-md);
+    background: var(--placeholder);
+  }
+  .stories--circle .story img,
+  .stories--circle .story .media-fallback {
+    border-radius: 50%;
+  }
+
+  /* Announcement bar (GET /home) */
+  .announcement-bar {
+    margin: 0;
+    padding: var(--space-3) var(--space-4);
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    background: var(--fg);
+    color: var(--bg);
+    text-align: center;
+    white-space: nowrap;
+  }
+  .announcement-bar--ltr span,
+  .announcement-bar--rtl span {
+    display: inline-block;
+    animation: marquee 18s linear infinite;
+  }
+  .announcement-bar--rtl span {
+    animation-direction: reverse;
+  }
+  @keyframes marquee {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .announcement-bar span {
+      animation: none;
+    }
+  }
+
+  /* Multicolumn: the merchant's columns; a sideways row on phones. */
+  .multicolumn__list {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 78%;
+    gap: var(--space-4);
+    margin: 0 calc(var(--gutter) * -1);
+    padding: 0 var(--gutter) var(--space-2);
+    overflow-x: auto;
+    list-style: none;
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline: var(--gutter);
+    scrollbar-width: none;
+  }
+  .multicolumn__list::-webkit-scrollbar {
+    display: none;
+  }
+  @media (min-width: 750px) {
+    .multicolumn__list {
+      grid-auto-flow: row;
+      grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
+      gap: var(--space-6);
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+    }
+  }
+  .multicolumn__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    scroll-snap-align: start;
+  }
+  .multicolumn--center .multicolumn__item {
+    align-items: center;
+    text-align: center;
+  }
+  .multicolumn--center .section-header {
+    justify-content: center;
+  }
+  .multicolumn__media {
+    overflow: hidden;
+    aspect-ratio: 3 / 2;
+    border-radius: var(--radius-md);
+    background: var(--placeholder);
+  }
+  .multicolumn--center .multicolumn__media {
+    align-self: stretch;
+  }
+  .multicolumn__media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .multicolumn__heading {
+    font-size: var(--text-lg);
+  }
+  .multicolumn__link {
+    font-weight: var(--weight-medium);
+  }
+
+  /* Collapsible content (a FAQ) */
+  .collapsible-content {
+    max-width: 48rem;
+    margin-inline: auto;
+  }
+}

package/template/app/styles/tokens.css

@@ -0,0 +1,167 @@
+/*
+ * Design tokens (DESIGN.md). Components use only these, never a raw color, size or radius.
+ * Brand tokens are overridden per request by <html style> with the merchant's colors (lib/brand.ts);
+ * the values here are the design's fallbacks for a color the merchant left empty.
+ */
+@layer tokens {
+  :root {
+    /* Neutrals: one cool grey family. */
+    --bg: #fff;
+    --fg: #14161a;
+    --muted: #5b616e;
+    --line: #e3e5e9;
+    --line-strong: #c9cdd4;
+    --danger: #c62828;
+    --success: #1a7f37;
+    --warning: #b45309;
+    /* Controls and image placeholders: white and light grey here, Telegram's colors in a Mini App. */
+    --surface: #fff;
+    --placeholder: #f2f3f5;
+    --subtle: #f6f7f8;
+    --overlay: rgb(20 22 26 / 0.5);
+
+    /* Brand: app/layout.tsx overrides them with the merchant's colors (lib/brand.ts). */
+    --accent: #1f5eff;
+    --on-accent: #fff;
+    /* The accent as text on the page: half way to the text color keeps AA (≥ 4.5) for any accent,
+       pale or dark, in a light and a dark scheme. */
+    --accent-text: color-mix(in oklab, var(--accent) 50%, var(--fg));
+    --nav-bg: var(--bg);
+    --nav-fg: var(--fg);
+    --label-bg: var(--accent);
+    --label-fg: var(--on-accent);
+
+    /* Spacing: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.5rem;
+    --space-6: 2rem;
+    --space-7: 3rem;
+    --space-8: 4rem;
+    --space-9: 6rem;
+    --space-10: 8rem;
+
+    /* Type: one family (app/layout.tsx sets --font-onest); sizes from xl up are fluid. */
+    --font-body:
+      var(--font-onest, system-ui), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --font-heading: var(--font-body);
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
+    --text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
+    --text-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
+    --text-4xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
+    --leading-tight: 1.15;
+    --leading-snug: 1.3;
+    --leading-normal: 1.55;
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-heading: 600;
+
+    /* Shape: controls, cards and media, panels. data-radius (theme setting) picks the scale. */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-pill: 999px;
+
+    /* Depth: tinted with the foreground, never pure black. */
+    --shadow-1: 0 1px 2px rgb(20 22 26 / 0.06), 0 1px 3px rgb(20 22 26 / 0.08);
+    --shadow-2: 0 16px 40px -12px rgb(20 22 26 / 0.28), 0 2px 6px rgb(20 22 26 / 0.08);
+
+    /* Layout. Breakpoints (mobile first): 750px and 990px. */
+    --container: 1320px;
+    --gutter: 1rem;
+    --header-h: 3.75rem;
+    --section-gap: var(--space-7);
+
+    /* Layers: nothing else sets a z-index above 1. */
+    --z-header: 20;
+    --z-drawer: 40;
+    --z-toast: 50;
+
+    /* Motion. */
+    --duration-fast: 150ms;
+    --duration: 250ms;
+    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+
+    /* Product media ratio: data-image-ratio (theme setting). */
+    --media-ratio: 3 / 4;
+
+    font-family: var(--font-body);
+    color: var(--fg);
+    background: var(--bg);
+  }
+
+  @media (min-width: 750px) {
+    :root {
+      --gutter: 2rem;
+      --section-gap: var(--space-8);
+    }
+  }
+  @media (min-width: 990px) {
+    :root {
+      --gutter: 3rem;
+      --header-h: 4.5rem;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --duration-fast: 0ms;
+      --duration: 0ms;
+    }
+  }
+
+  /* Theme settings (theme/settings.ts), mapped to data-* on <html> by app/layout.tsx. */
+  :root[data-radius='none'] {
+    --radius-sm: 0;
+    --radius-md: 0;
+    --radius-lg: 0;
+  }
+  :root[data-radius='medium'] {
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+  }
+  :root[data-radius='large'] {
+    --radius-sm: 12px;
+    --radius-md: 20px;
+    --radius-lg: 28px;
+  }
+  :root[data-image-ratio='square'] {
+    --media-ratio: 1;
+  }
+  :root[data-image-ratio='natural'] {
+    --media-ratio: auto;
+  }
+
+  /*
+   * 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.
+   */
+  html[data-telegram] {
+    --bg: var(--tg-theme-bg-color, #fff);
+    --fg: var(--tg-theme-text-color, #14161a);
+    --muted: var(--tg-theme-hint-color, #5b616e);
+    --danger: var(--tg-theme-destructive-text-color, #c62828);
+    --surface: var(--tg-theme-secondary-bg-color, #fff);
+    --placeholder: var(--tg-theme-secondary-bg-color, #f2f3f5);
+    --subtle: var(--tg-theme-secondary-bg-color, #f6f7f8);
+    --accent: var(--tg-theme-button-color, #1f5eff);
+    --on-accent: var(--tg-theme-button-text-color, #fff);
+  }
+  html[data-telegram][data-color-scheme='dark'] {
+    --line: rgb(255 255 255 / 0.14);
+    --line-strong: rgb(255 255 255 / 0.28);
+    --overlay: rgb(0 0 0 / 0.6);
+    /* Status colors light enough for AA on Telegram's dark backgrounds. */
+    --danger: var(--tg-theme-destructive-text-color, #ff6b6b);
+    --success: #3fb950;
+    --warning: #f0a33a;
+    color-scheme: dark;
+  }
+}

package/template/app/styles/utilities.css

@@ -0,0 +1,37 @@
+/* Small single-purpose helpers; they win over every other layer. */
+@layer utilities {
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  .stack--loose {
+    gap: var(--space-5);
+  }
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .muted {
+    color: var(--muted);
+  }
+  .error {
+    color: var(--danger);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+  }
+  .visually-hidden {
+    position: absolute !important;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/template/app/wishlist/page.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { WishlistView } from '@/components/wishlist/wishlist-view';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
+
+// Personal: nothing here for a search engine.
+export const metadata: Metadata = {
+  title: messages(locale).wishlist,
+  robots: { index: false, follow: false },
+};
+
+/** The wishlist, only for a shop that has one (`features.wishlist`); the list lives in the browser. */
+export default async function WishlistPage() {
+  const { data: shop } = await api.shop();
+  if (!shop.features.wishlist) {
+    notFound();
+  }
+  const t = messages(locale);
+  return (
+    <>
+      <h1 className="page-title">{t.wishlist}</h1>
+      <WishlistView />
+    </>
+  );
+}