@zalify/storefront-kit 0.1.0

package/src/react/components/VideoModal.tsx

@@ -0,0 +1,236 @@
+/**
+ * Port of snippets/video-modal.liquid — expanded video player dialog
+ * shared by the video carousel cards and the video bubble. Built on a
+ * native <dialog>, mirroring the <theme-dialog> semantics from
+ * src/lib/dialog.ts (showModal/close, light dismiss on backdrop click,
+ * data-dialog-close ≙ the close button) and the play-on-open /
+ * pause-on-close wiring from src/entries/video.ts.
+ * CSS: app/styles/components/snippets-video-modal.css
+ */
+import {useEffect, useRef} from 'react';
+import type {Money} from '../../commerce/index.ts';
+import {t} from '../engine/translate';
+import {Icon} from './Icon';
+import {imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
+import {Price} from './Price';
+
+/* ------------------------------------------------------------------ *
+ * Shared video-setting helpers (used by blocks/video, blocks/_video-card
+ * and sections/video-bubble — the React mirror of the `video` object
+ * filters in the Liquid sources).
+ * ------------------------------------------------------------------ */
+
+export interface VideoSource {
+  url: string;
+  format?: string;
+  height?: number;
+  mime_type?: string;
+}
+
+/** Theme-editor `video` setting object (usually absent in the mirror). */
+export interface ThemeVideo {
+  sources?: VideoSource[];
+  preview_image?: {src?: string} | string;
+  alt?: string;
+}
+
+/** Mirror of `video.sources | where: 'format', 'mp4' | sort: 'height'`. */
+export function mp4Sources(video: ThemeVideo | undefined | null): VideoSource[] {
+  return (video?.sources ?? [])
+    .filter((s) => s.format === 'mp4')
+    .sort((a, b) => (a.height ?? 0) - (b.height ?? 0));
+}
+
+/** Resolve a video's preview_image to a usable URL (or null). */
+export function videoPreviewImage(
+  video: ThemeVideo | undefined | null,
+): string | null {
+  const pi = video?.preview_image;
+  return settingImageUrl(typeof pi === 'string' ? pi : pi?.src);
+}
+
+/**
+ * Loose `product` setting shape. Template JSON stores product settings
+ * as a handle string, which only a section loader could resolve — those
+ * return null so callers skip the product row gracefully.
+ */
+export interface VideoProductSetting {
+  url?: string;
+  title?: string;
+  featured_image?: unknown;
+  price?: Money;
+  compare_at_price?: Money | null;
+}
+
+export function resolveVideoProduct(
+  value: unknown,
+): VideoProductSetting | null {
+  if (!value || typeof value !== 'object') return null;
+  return value as VideoProductSetting;
+}
+
+/** Resolve a loose product image value (string or {src|url}) to a URL. */
+export function productImageUrl(value: unknown): string | null {
+  if (typeof value === 'string') return settingImageUrl(value);
+  if (value && typeof value === 'object') {
+    const obj = value as {src?: string; url?: string};
+    return settingImageUrl(obj.src ?? obj.url);
+  }
+  return null;
+}
+
+/**
+ * Mirror of watchPreviews() in src/entries/video.ts: a muted
+ * `video[data-video-preview]` loop plays only while near the viewport.
+ * Attach the returned ref to the preview <video>.
+ */
+export function useViewportPlayback() {
+  const ref = useRef<HTMLVideoElement>(null);
+  useEffect(() => {
+    const video = ref.current;
+    if (!video) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) video.play().catch(() => {});
+          else video.pause();
+        }
+      },
+      {rootMargin: '80px'},
+    );
+    io.observe(video);
+    return () => io.disconnect();
+  }, []);
+  return ref;
+}
+
+/* ------------------------------------------------------------------ *
+ * The modal itself.
+ * ------------------------------------------------------------------ */
+
+export interface VideoModalProps {
+  /** Mirror of the Liquid snippet's `id` param (data-dialog-open target). */
+  id?: string;
+  open: boolean;
+  onClose: () => void;
+  /** Shopify-hosted video to play (largest mp4 rendition is used). */
+  video?: ThemeVideo | null;
+  /** Cover image URL painted before playback. */
+  poster?: string | null;
+  /** Product featured in the video. */
+  product?: VideoProductSetting | null;
+  /** Accessible name for the dialog. */
+  label?: string;
+}
+
+export function VideoModal({
+  id,
+  open,
+  onClose,
+  video,
+  poster,
+  product,
+  label,
+}: VideoModalProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // showModal()/close() driven by the open prop — the React mirror of
+  // ThemeDialog.show()/hide(). Playback starts a frame later so the
+  // video starts inside the open dialog (≙ playDialogVideo in video.ts).
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+      requestAnimationFrame(() => {
+        videoRef.current?.play().catch(() => {});
+      });
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  const mp4 = mp4Sources(video).at(-1);
+  const modalLabel = label || t('general.play_video');
+  const productImage = productImageUrl(product?.featured_image);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      id={id}
+      scroll-lock=""
+      className="video-modal"
+      aria-label={modalLabel}
+      // Expanded players stop when their dialog closes (Esc included) —
+      // mirror of pauseOnDialogClose in video.ts.
+      onClose={() => {
+        videoRef.current?.pause();
+        onClose();
+      }}
+      // Light dismiss: clicks land on the <dialog> itself only when
+      // they hit the backdrop (mirror of ThemeDialog's click handler).
+      onClick={(event) => {
+        if (event.target === dialogRef.current) dialogRef.current?.close();
+      }}
+    >
+      <button
+        type="button"
+        className="video-modal__close"
+        onClick={() => dialogRef.current?.close()}
+        aria-label={t('general.close')}
+      >
+        <Icon name="icon-close" />
+      </button>
+
+      <div className="video-modal__media">
+        {mp4 ? (
+          <video
+            ref={videoRef}
+            className="video-modal__video"
+            controls
+            playsInline
+            preload="metadata"
+            poster={poster ? imageUrl(poster, 1100) : undefined}
+          >
+            <source src={mp4.url} type={mp4.mime_type} />
+          </video>
+        ) : poster ? (
+          <img
+            className="video-modal__video"
+            src={imageUrl(poster, 1100)}
+            loading="lazy"
+            alt=""
+          />
+        ) : (
+          <PlaceholderSvg className="video-modal__video" />
+        )}
+      </div>
+
+      {product ? (
+        <a className="video-modal__product" href={product.url}>
+          {productImage ? (
+            <img
+              className="video-modal__product-image"
+              src={imageUrl(productImage, 120)}
+              loading="lazy"
+              alt=""
+            />
+          ) : null}
+          <span className="video-modal__product-info">
+            <span className="video-modal__product-title">{product.title}</span>
+            <span className="video-modal__product-price">
+              <Price
+                price={product.price}
+                compareAt={product.compare_at_price}
+              />
+            </span>
+          </span>
+          <span className="video-modal__product-cta">
+            {t('products.view_product')}
+          </span>
+        </a>
+      ) : null}
+    </dialog>
+  );
+}

package/src/react/engine/CssVariables.tsx

@@ -0,0 +1,142 @@
+/**
+ * React mirror of snippets/css-variables.liquid: emits merchant-driven
+ * design tokens as CSS custom properties — font slots, page layout,
+ * corner radii, badge colors, grid density, and one class per color
+ * scheme (the first scheme also seeds :root).
+ *
+ * Static token scales (spacing, type, radii) live in the app's
+ * critical.css (synced from the theme).
+ */
+import {useMemo} from 'react';
+import {colorSchemes, themeSettings} from './settings';
+import {googleFontsHref, parseFontHandle} from './fonts';
+
+function buildCss(): string {
+  const s = themeSettings;
+  const bodyGoogle = (s.type_body_google ?? '').trim();
+  const headingGoogle = (s.type_heading_google ?? '').trim();
+  const monoGoogle = (s.type_mono_google ?? '').trim();
+
+  const bodyFont = parseFontHandle(s.type_body_font);
+  const headingFont = parseFontHandle(s.type_heading_font);
+
+  const bodyFamily = bodyGoogle
+    ? `'${bodyGoogle}', sans-serif`
+    : `'${bodyFont.family}', sans-serif`;
+  const headingFamily = headingGoogle
+    ? `'${headingGoogle}', var(--font-body--family)`
+    : `'${headingFont.family}', sans-serif`;
+
+  const lines: string[] = [];
+  lines.push(':root {');
+  lines.push(`  --font-body--family: ${bodyFamily};`);
+  lines.push(`  --font-body--style: ${bodyGoogle ? 'normal' : bodyFont.style};`);
+  lines.push(`  --font-body--weight: ${bodyGoogle ? 400 : bodyFont.weight};`);
+  lines.push(`  --font-heading--family: ${headingFamily};`);
+  if (monoGoogle) {
+    lines.push(
+      `  --font-mono--family: '${monoGoogle}', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;`,
+    );
+    // Accent elements (eyebrows, badges, footer headings) use mono only
+    // when chosen; otherwise they inherit via the var() fallback.
+    lines.push(`  --font-accent--family: var(--font-mono--family);`);
+  } else {
+    lines.push(
+      `  --font-mono--family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;`,
+    );
+  }
+  lines.push(`  --page-width: ${s.max_page_width ?? '90rem'};`);
+  lines.push(`  --page-margin: ${s.min_page_margin ?? 20}px;`);
+  lines.push(`  --style-border-radius-inputs: ${s.input_corner_radius ?? 0}px;`);
+  lines.push(`  --style-border-radius-buttons: ${s.button_corner_radius ?? 0}px;`);
+  lines.push(`  --style-border-radius-cards: ${s.card_corner_radius ?? 0}px;`);
+  lines.push(`  --style-badge-background: ${s.card_badge_background ?? '#F9EDEF'};`);
+  lines.push(`  --style-badge-text: ${s.card_badge_text ?? '#1A1A1A'};`);
+  lines.push(
+    `  --style-badge-sale-background: ${s.card_badge_sale_background ?? '#F26B8A'};`,
+  );
+  lines.push(`  --style-badge-sale-text: ${s.card_badge_sale_text ?? '#FFFFFF'};`);
+  lines.push(
+    `  --style-badge-1-background: ${s.badge_style_1_background ?? '#1A1A1A'};`,
+  );
+  lines.push(`  --style-badge-1-text: ${s.badge_style_1_text ?? '#FFFFFF'};`);
+  lines.push(
+    `  --style-badge-2-background: ${s.badge_style_2_background ?? '#F9EDEF'};`,
+  );
+  lines.push(`  --style-badge-2-text: ${s.badge_style_2_text ?? '#1A1A1A'};`);
+  // Product grid density: comfortable (fluid) or compact (tight, edge-bleed on mobile)
+  if (s.card_density === 'compact') {
+    lines.push(`  --product-grid-gap: 0.75rem 0.5rem;`);
+    lines.push(`  --product-grid-margin: -0.75rem;`);
+  } else {
+    lines.push(`  --product-grid-gap: clamp(0.5rem, 2.1333vw, 1rem);`);
+    lines.push(`  --product-grid-margin: 0;`);
+  }
+  // Variant image thumbs: fully round by default; follow the card
+  // radius once the merchant sets one.
+  const cardRadius = s.card_corner_radius ?? 0;
+  lines.push(
+    `  --style-border-radius-swatch: ${cardRadius === 0 ? '999px' : `${cardRadius}px`};`,
+  );
+  lines.push('}');
+
+  for (const [index, scheme] of colorSchemes().entries()) {
+    const prefix = index === 0 ? ':root,\n' : '';
+    lines.push(`${prefix}.color-${scheme.id} {`);
+    lines.push(`  --color-background: ${scheme.settings.background};`);
+    lines.push(`  --color-foreground: ${scheme.settings.text};`);
+    lines.push(`  --color-accent: ${scheme.settings.accent};`);
+    lines.push(`  --color-button: ${scheme.settings.button};`);
+    lines.push(`  --color-button-label: ${scheme.settings.button_label};`);
+    lines.push(
+      `  --color-border: color-mix(in oklch, ${scheme.settings.text} 15%, ${scheme.settings.background});`,
+    );
+    lines.push('}');
+  }
+
+  // Applying a scheme class paints the element itself
+  lines.push(`[class*='color-scheme-'] {`);
+  lines.push(`  background-color: var(--color-background);`);
+  lines.push(`  color: var(--color-foreground);`);
+  lines.push('}');
+
+  return lines.join('\n');
+}
+
+function fontLinks(): string[] {
+  const s = themeSettings;
+  const hrefs: string[] = [];
+  const bodyGoogle = (s.type_body_google ?? '').trim();
+  const headingGoogle = (s.type_heading_google ?? '').trim();
+  const monoGoogle = (s.type_mono_google ?? '').trim();
+  hrefs.push(
+    googleFontsHref(bodyGoogle || parseFontHandle(s.type_body_font).family),
+  );
+  const heading = headingGoogle || parseFontHandle(s.type_heading_font).family;
+  if (!hrefs[0].includes(heading.replace(/ /g, '+'))) {
+    hrefs.push(googleFontsHref(heading, 'wght@400;500;600;700'));
+  }
+  if (monoGoogle) hrefs.push(googleFontsHref(monoGoogle, 'wght@400;500'));
+  return hrefs;
+}
+
+export function CssVariables() {
+  const {css, links} = useMemo(
+    () => ({css: buildCss(), links: fontLinks()}),
+    [],
+  );
+  return (
+    <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossOrigin="anonymous"
+      />
+      {links.map((href) => (
+        <link key={href} rel="stylesheet" href={href} />
+      ))}
+      <style dangerouslySetInnerHTML={{__html: css}} />
+    </>
+  );
+}

package/src/react/engine/context.tsx

@@ -0,0 +1,108 @@
+/**
+ * Contexts giving ported sections access to Shopify data.
+ *
+ * - ThemeDataContext (set once in root/PageLayout): header menu, footer
+ *   menu, cart promise, shop info — the mirror of Liquid globals like
+ *   `linklists`, `cart`, `shop`.
+ * - TemplateContext (set per route): the route's resources (`product`,
+ *   `collection`, …) — the mirror of Liquid template objects — plus
+ *   per-section loader results.
+ * - SectionContext / current section id, used by useSectionData().
+ */
+import {createContext, useContext} from 'react';
+import type {ReactNode} from 'react';
+
+export interface ThemeGlobals {
+  /** Root loader data from the Hydrogen scaffold (header/footer queries, cart…). */
+  header?: unknown;
+  footer?: unknown;
+  cart?: unknown;
+  isLoggedIn?: unknown;
+  publicStoreDomain?: string;
+  shop?: unknown;
+}
+
+const ThemeDataContext = createContext<ThemeGlobals>({});
+
+export interface TemplateScope {
+  /** Template name, e.g. "index", "product". */
+  name: string;
+  /**
+   * Whether `name` is a page template or a section group — the scope
+   * half of a @zalify/storefront-kit/schemas ThemeJsonPath. Defaults to
+   * "template".
+   */
+  kind?: 'template' | 'group';
+  /** Route resources: product, collection, blog, article, page, searchResult… */
+  resources: Record<string, unknown>;
+  /** Results of app/sections/<type>.server.ts loaders, keyed by section key. */
+  sectionData: Record<string, unknown>;
+}
+
+const TemplateContext = createContext<TemplateScope>({
+  name: '',
+  resources: {},
+  sectionData: {},
+});
+
+const SectionContext = createContext<{id: string}>({id: ''});
+
+export function ThemeDataProvider({
+  value,
+  children,
+}: {
+  value: ThemeGlobals;
+  children: ReactNode;
+}) {
+  return (
+    <ThemeDataContext.Provider value={value}>
+      {children}
+    </ThemeDataContext.Provider>
+  );
+}
+
+export function TemplateProvider({
+  value,
+  children,
+}: {
+  value: TemplateScope;
+  children: ReactNode;
+}) {
+  return (
+    <TemplateContext.Provider value={value}>
+      {children}
+    </TemplateContext.Provider>
+  );
+}
+
+export function SectionProvider({
+  id,
+  children,
+}: {
+  id: string;
+  children: ReactNode;
+}) {
+  return (
+    <SectionContext.Provider value={{id}}>{children}</SectionContext.Provider>
+  );
+}
+
+/** Liquid globals mirror (`cart`, `shop`, menus…). */
+export function useThemeGlobals(): ThemeGlobals {
+  return useContext(ThemeDataContext);
+}
+
+/** Route resource mirror of Liquid template objects, e.g. useResource('product'). */
+export function useResource<T = unknown>(name: string): T | undefined {
+  return useContext(TemplateContext).resources[name] as T | undefined;
+}
+
+export function useTemplateScope(): TemplateScope {
+  return useContext(TemplateContext);
+}
+
+/** Result of this section's optional .server.ts loader. */
+export function useSectionData<T = unknown>(): T | undefined {
+  const {id} = useContext(SectionContext);
+  return useContext(TemplateContext).sectionData[id] as T | undefined;
+}

package/src/react/engine/fonts.ts

@@ -0,0 +1,42 @@
+/**
+ * Font resolution for the mirror. The Liquid theme uses Shopify's
+ * font_picker (handles like "work_sans_n4") plus optional Google-font
+ * override text settings. Outside Shopify's font CDN we resolve picker
+ * handles to the same family served from Google Fonts, keeping the
+ * css-variables contract (--font-body--family etc.) identical.
+ */
+
+export interface ResolvedFont {
+  family: string;
+  weight: number;
+  style: 'normal' | 'italic';
+}
+
+/** Parse a Shopify font handle: "work_sans_n4" → Work Sans / 400 / normal. */
+export function parseFontHandle(handle: string | undefined): ResolvedFont {
+  const fallback: ResolvedFont = {
+    family: 'Work Sans',
+    weight: 400,
+    style: 'normal',
+  };
+  if (!handle) return fallback;
+  const match = /^(.*)_([nib])(\d)$/.exec(handle);
+  if (!match) return fallback;
+  const family = match[1]
+    .split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+  return {
+    family,
+    weight: Number(match[3]) * 100,
+    style: match[2] === 'i' ? 'italic' : 'normal',
+  };
+}
+
+export function googleFontsHref(
+  family: string,
+  axes = 'ital,wght@0,400;0,500;0,700;1,400',
+): string {
+  const param = family.trim().replace(/ /g, '+');
+  return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
+}

package/src/react/engine/images.tsx

@@ -0,0 +1,58 @@
+/**
+ * Helpers mirroring the theme's image snippet / `image_url` usage for
+ * images that arrive from JSON settings (not the Storefront API — for
+ * those use @shopify/hydrogen's <Image>).
+ */
+
+/**
+ * Resolve an image_picker setting value to a usable URL. Values saved
+ * by the theme editor look like "shopify://shop_images/foo.png", which
+ * only the Liquid runtime can resolve — those return null here so the
+ * component falls back to its placeholder (matching placeholder_svg_tag
+ * behavior on a fresh install).
+ */
+export function settingImageUrl(value: unknown): string | null {
+  if (typeof value !== 'string' || !value) return null;
+  if (value.startsWith('shopify://')) return null;
+  return value;
+}
+
+/** Append a width to a Shopify CDN URL (mirror of `| image_url: width`). */
+export function imageUrl(url: string, width?: number): string {
+  if (!width || !url.includes('cdn.shopify.com')) return url;
+  const separator = url.includes('?') ? '&' : '?';
+  return `${url}${separator}width=${width}`;
+}
+
+/** Srcset across the theme's standard width ladder. */
+export function imageSrcSet(
+  url: string,
+  widths: number[] = [400, 700, 1000, 1500],
+): string | undefined {
+  if (!url.includes('cdn.shopify.com')) return undefined;
+  return widths.map((w) => `${imageUrl(url, w)} ${w}w`).join(', ');
+}
+
+/**
+ * Neutral placeholder mirroring Liquid's placeholder_svg_tag: a muted
+ * box that inherits the component's sizing classes.
+ */
+export function PlaceholderSvg({className}: {className?: string}) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 525 525"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-hidden="true"
+      preserveAspectRatio="xMidYMid slice"
+    >
+      <rect width="525" height="525" fill="currentColor" opacity="0.06" />
+      <path
+        d="M262.5 138a52 52 0 1 1 0 104 52 52 0 0 1 0-104Zm-131 249c0-58 59-90 131-90s131 32 131 90v0H131.5v0Z"
+        fill="currentColor"
+        opacity="0.12"
+      />
+    </svg>
+  );
+}