@zalify/storefront-kit 0.1.0

package/src/react/blocks/_box.tsx

@@ -0,0 +1,37 @@
+/** Port of blocks/_box.liquid — hero content box. CSS: blocks-_box.css */
+import type {BlockProps} from '../engine/types';
+
+interface BoxSettings {
+  position_x?: 'start' | 'center' | 'end';
+  position_y?: 'start' | 'center' | 'end';
+  color_scheme?: string;
+  backdrop?: boolean;
+}
+
+export default function BoxBlock({settings, children}: BlockProps<BoxSettings>) {
+  const {
+    position_x: positionX = 'start',
+    position_y: positionY = 'center',
+    color_scheme: colorScheme = 'scheme-1',
+    backdrop = false,
+  } = settings;
+  const className = [
+    'hero__box',
+    `hero__box--x-${positionX}`,
+    `hero__box--y-${positionY}`,
+    `color-${colorScheme}`,
+    backdrop ? 'hero__box--backdrop' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <div
+      className={className}
+      // Inline transparent: the scheme class paints via an unlayered rule
+      // that outranks any @layer override (mirror of _box.liquid).
+      style={backdrop ? undefined : {backgroundColor: 'transparent'}}
+    >
+      {children}
+    </div>
+  );
+}

package/src/react/blocks/_slide.tsx

@@ -0,0 +1,96 @@
+/**
+ * Port of blocks/_slide.liquid — hero slide: full-bleed media canvas.
+ * Content lives in nested _box blocks. CSS: blocks-_slide.css
+ */
+import type {BlockProps} from '../engine/types';
+import {imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
+
+interface SlideSettings {
+  image?: string;
+  mobile_image?: string;
+  video?: {
+    sources?: Array<{url: string; format: string; height: number; mime_type: string}>;
+    preview_image?: {src?: string};
+  };
+  mobile_video?: SlideSettings['video'];
+  link?: string;
+}
+
+function bestMp4(video: SlideSettings['video']) {
+  const mp4s = (video?.sources ?? []).filter((s) => s.format === 'mp4');
+  return mp4s.sort((a, b) => a.height - b.height).at(-1);
+}
+
+export default function SlideBlock({
+  settings,
+  index,
+  children,
+}: BlockProps<SlideSettings>) {
+  // First slide is the LCP candidate: eager + high priority.
+  const isFirst = index === 0;
+  const image = settingImageUrl(settings.image);
+  const mobileImage = settingImageUrl(settings.mobile_image);
+  const desktopMp4 = bestMp4(settings.video);
+  const mobileMp4 = bestMp4(settings.mobile_video);
+  // Poster paints video slides before any video bytes arrive
+  const poster =
+    image ?? mobileImage ?? settingImageUrl(settings.video?.preview_image?.src);
+
+  return (
+    <div className="hero__slide">
+      {desktopMp4 || mobileMp4 ? (
+        <video
+          className="hero__media"
+          autoPlay
+          loop
+          muted
+          playsInline
+          preload="metadata"
+          poster={poster ? imageUrl(poster, 1800) : undefined}
+        >
+          {mobileMp4 && (
+            <source
+              media="(max-width: 47.9375rem)"
+              src={mobileMp4.url}
+              type={mobileMp4.mime_type}
+            />
+          )}
+          {desktopMp4 && (
+            <source src={desktopMp4.url} type={desktopMp4.mime_type} />
+          )}
+        </video>
+      ) : image ? (
+        <picture>
+          {mobileImage && (
+            <source
+              media="(max-width: 47.9375rem)"
+              srcSet={[400, 750, 1100, 1500]
+                .map((w) => `${imageUrl(mobileImage, w)} ${w}w`)
+                .join(', ')}
+              sizes="100vw"
+            />
+          )}
+          <img
+            className="hero__media"
+            src={imageUrl(image, 3000)}
+            srcSet={[750, 1100, 1500, 2200, 3000]
+              .map((w) => `${imageUrl(image, w)} ${w}w`)
+              .join(', ')}
+            sizes="100vw"
+            loading={isFirst ? 'eager' : 'lazy'}
+            fetchPriority={isFirst ? 'high' : 'auto'}
+            alt=""
+          />
+        </picture>
+      ) : (
+        <PlaceholderSvg className="hero__media hero__media--placeholder" />
+      )}
+
+      {settings.link ? (
+        <a className="hero__media-link" href={settings.link} aria-label="View" />
+      ) : null}
+
+      <div className="hero__content">{children}</div>
+    </div>
+  );
+}

package/src/react/blocks/_video-card.tsx

@@ -0,0 +1,131 @@
+/**
+ * Port of blocks/_video-card.liquid — video carousel card: a muted
+ * preview loop that expands into the shared video modal (main video
+ * with sound + optional product). Private block of
+ * sections/video-carousel.liquid. Behavior from the <video-carousel>
+ * island in src/entries/video.ts.
+ * CSS: app/styles/components/blocks-_video-card.css
+ */
+import {useState} from 'react';
+import type {BlockProps} from '../engine/types';
+import {t} from '../engine/translate';
+import {Icon} from '../components/Icon';
+import {imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
+import {formatMoney} from '../../commerce/index.ts';
+import {
+  mp4Sources,
+  productImageUrl,
+  resolveVideoProduct,
+  useViewportPlayback,
+  VideoModal,
+  videoPreviewImage,
+  type ThemeVideo,
+} from '../components/VideoModal';
+
+interface VideoCardSettings {
+  preview_video?: ThemeVideo;
+  video?: ThemeVideo;
+  image?: string;
+  product?: unknown;
+  label?: string;
+}
+
+/**
+ * Cards render ~300px wide: the smallest rendition from 480p up is
+ * plenty and keeps a many-card strip light (mirror of the Liquid loop).
+ */
+function previewMp4For(video: ThemeVideo | undefined) {
+  const sources = mp4Sources(video);
+  return sources.find((s) => (s.height ?? 0) >= 480) ?? sources.at(-1);
+}
+
+export default function VideoCardBlock({
+  settings,
+}: BlockProps<VideoCardSettings>) {
+  const preview = settings.preview_video;
+  const mainVideo = settings.video ?? preview;
+  const poster =
+    settingImageUrl(settings.image) ??
+    videoPreviewImage(preview) ??
+    videoPreviewImage(mainVideo);
+  const previewMp4 = previewMp4For(preview);
+  const product = resolveVideoProduct(settings.product);
+  const productImage = productImageUrl(product?.featured_image);
+  const label = settings.label;
+
+  const previewRef = useViewportPlayback();
+  const [open, setOpen] = useState(false);
+
+  const triggerLabel =
+    t('general.play_video') +
+    (product?.title ? `: ${product.title}` : label ? `: ${label}` : '');
+
+  return (
+    <div className="video-card">
+      <button
+        type="button"
+        className="video-card__trigger"
+        onClick={() => setOpen(true)}
+        aria-label={triggerLabel}
+      >
+        {previewMp4 ? (
+          <video
+            ref={previewRef}
+            className="video-card__media"
+            autoPlay
+            loop
+            muted
+            playsInline
+            preload="metadata"
+            data-video-preview=""
+            poster={poster ? imageUrl(poster, 800) : undefined}
+          >
+            <source src={previewMp4.url} type={previewMp4.mime_type} />
+          </video>
+        ) : poster ? (
+          <img
+            className="video-card__media"
+            src={imageUrl(poster, 800)}
+            loading="lazy"
+            alt=""
+          />
+        ) : (
+          <PlaceholderSvg className="video-card__media video-card__media--placeholder" />
+        )}
+        <span className="video-card__play">
+          <Icon name="icon-play" />
+        </span>
+      </button>
+
+      {product ? (
+        <a className="video-card__product" href={product.url}>
+          {productImage ? (
+            <img
+              className="video-card__product-image"
+              src={imageUrl(productImage, 96)}
+              loading="lazy"
+              alt=""
+            />
+          ) : null}
+          <span className="video-card__product-info">
+            <span className="video-card__product-title">{product.title}</span>
+            <span className="video-card__product-price">
+              {formatMoney(product.price)}
+            </span>
+          </span>
+        </a>
+      ) : label ? (
+        <span className="video-card__label">{label}</span>
+      ) : null}
+
+      <VideoModal
+        open={open}
+        onClose={() => setOpen(false)}
+        video={mainVideo}
+        poster={poster}
+        product={product}
+        label={label}
+      />
+    </div>
+  );
+}

package/src/react/blocks/accordion.tsx

@@ -0,0 +1,33 @@
+/**
+ * Port of blocks/accordion.liquid — a <details>-based accordion with a
+ * heading and rich-text content.
+ * CSS: app/styles/components/blocks-accordion.css
+ */
+import type {BlockProps} from '../engine/types';
+
+interface AccordionSettings {
+  heading?: string;
+  content?: string;
+}
+
+export default function AccordionBlock({
+  settings,
+}: BlockProps<AccordionSettings>) {
+  const {
+    heading = 'Details',
+    content = '<p>Share details about ingredients, sizing, shipping, or care.</p>',
+  } = settings;
+
+  return (
+    <details className="accordion">
+      <summary className="accordion__summary">
+        <span>{heading}</span>
+        <span className="accordion__icon" aria-hidden="true" />
+      </summary>
+      <div
+        className="accordion__content"
+        dangerouslySetInnerHTML={{__html: content}}
+      />
+    </details>
+  );
+}

package/src/react/blocks/button.tsx

@@ -0,0 +1,36 @@
+/** Port of blocks/button.liquid (button styles live in critical.css). */
+import type {BlockProps} from '../engine/types';
+import {useAdapter} from '../adapter';
+
+interface ButtonSettings {
+  label?: string;
+  link?: string;
+  style?: '' | 'button--secondary';
+  size?: '' | 'button--sm' | 'button--lg';
+}
+
+export default function ButtonBlock({settings}: BlockProps<ButtonSettings>) {
+  const {Link} = useAdapter();
+  const {label = 'Shop now', link, style = '', size = ''} = settings;
+  const className = `button ${style} ${size}`.replace(/\s+/g, ' ').trim();
+  if (!link) {
+    return (
+      <a className={className} role="link" aria-disabled="true">
+        {label}
+      </a>
+    );
+  }
+  const isExternal = /^https?:\/\//.test(link);
+  if (isExternal) {
+    return (
+      <a className={className} href={link}>
+        {label}
+      </a>
+    );
+  }
+  return (
+    <Link className={className} to={link}>
+      {label}
+    </Link>
+  );
+}

package/src/react/blocks/countdown.tsx

@@ -0,0 +1,105 @@
+/**
+ * Port of blocks/countdown.liquid + the <countdown-timer> island
+ * (src/entries/countdown.ts): server renders dash placeholders, a
+ * 1-second tick fills the digit slots and flips visibility when the
+ * deadline passes. CSS: app/styles/components/blocks-countdown.css
+ */
+import {useEffect, useState} from 'react';
+// Clock math shared with the theme's <countdown-timer> island.
+import {
+  pad2 as pad,
+  parseEndTime as parseEnd,
+  secondsUntil,
+} from '../../commerce/index.ts';
+import type {BlockProps} from '../engine/types';
+import {t} from '../engine/translate';
+
+interface CountdownSettings {
+  end_time?: string;
+  label?: string;
+  completed_text?: string;
+  alignment?: string;
+}
+
+export default function CountdownBlock({
+  settings,
+}: BlockProps<CountdownSettings>) {
+  const {label = 'Ends in', completed_text: completedText, alignment = 'left'} =
+    settings;
+  const endTime = (settings.end_time ?? '').trim();
+
+  // null until the first client tick — SSR shows the "–" placeholders,
+  // exactly like the Liquid markup before countdown.js runs.
+  const [remain, setRemain] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!endTime) return;
+    const end = parseEnd(endTime);
+    if (Number.isNaN(end)) return;
+    let interval = 0;
+    const tick = () => {
+      const next = secondsUntil(end);
+      setRemain(next);
+      if (next <= 0 && interval) clearInterval(interval);
+      return next;
+    };
+    if (tick() > 0) interval = window.setInterval(tick, 1000);
+    return () => clearInterval(interval);
+  }, [endTime]);
+
+  if (!endTime) return <div hidden />;
+
+  const done = remain !== null && remain <= 0;
+  const days = remain === null ? null : Math.floor(remain / 86400);
+
+  // No completion message configured: the block just goes away.
+  if (done && !completedText) return <div className="countdown" hidden />;
+
+  const units: Array<{value: string; caption: string; hidden?: boolean}> = [
+    {
+      value: days === null ? '–' : pad(days),
+      caption: t('general.countdown.days'),
+      // Under a day, the days unit is dead weight — drop it
+      hidden: days === 0,
+    },
+    {
+      value: remain === null ? '–' : pad(Math.floor(remain / 3600) % 24),
+      caption: t('general.countdown.hours'),
+    },
+    {
+      value: remain === null ? '–' : pad(Math.floor(remain / 60) % 60),
+      caption: t('general.countdown.minutes'),
+    },
+    {
+      value: remain === null ? '–' : pad(remain % 60),
+      caption: t('general.countdown.seconds'),
+    },
+  ];
+
+  return (
+    <div
+      className="countdown"
+      style={{'--countdown-justify': alignment} as React.CSSProperties}
+      role="timer"
+    >
+      {label ? <span className="countdown__label">{label}</span> : null}
+      <span className="countdown__units" hidden={done}>
+        {units.map((unit) => (
+          <span
+            key={unit.caption}
+            className="countdown__unit"
+            hidden={unit.hidden}
+          >
+            <span className="countdown__value">{unit.value}</span>
+            <span className="countdown__caption">{unit.caption}</span>
+          </span>
+        ))}
+      </span>
+      {completedText ? (
+        <span className="countdown__completed" hidden={!done}>
+          {completedText}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/react/blocks/custom-liquid.tsx

@@ -0,0 +1,21 @@
+/**
+ * Port of blocks/custom-liquid.liquid — merchant-pasted markup inside
+ * any section that accepts theme blocks. Raw HTML is injected as-is;
+ * Liquid tags/objects in it cannot execute here (no Liquid runtime).
+ */
+import type {BlockProps} from '../engine/types';
+
+interface CustomLiquidBlockSettings {
+  custom_liquid?: string;
+}
+
+export default function CustomLiquidBlock({
+  settings,
+}: BlockProps<CustomLiquidBlockSettings>) {
+  return (
+    <div
+      className="custom-liquid-block"
+      dangerouslySetInnerHTML={{__html: settings.custom_liquid ?? ''}}
+    />
+  );
+}

package/src/react/blocks/group.tsx

@@ -0,0 +1,32 @@
+/** Port of blocks/group.liquid. CSS: app/styles/components/blocks-group.css */
+import type {BlockProps} from '../engine/types';
+
+interface GroupSettings {
+  layout_direction?: 'group--horizontal' | 'group--vertical';
+  alignment?: string;
+  padding?: number;
+}
+
+export default function GroupBlock({
+  settings,
+  children,
+}: BlockProps<GroupSettings>) {
+  const {
+    layout_direction: direction = 'group--vertical',
+    alignment = 'flex-start',
+    padding = 0,
+  } = settings;
+  return (
+    <div
+      className={`group ${direction}`}
+      style={
+        {
+          '--padding': `${padding}px`,
+          '--alignment': alignment,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+}

package/src/react/blocks/image.tsx

@@ -0,0 +1,29 @@
+/** Port of blocks/image.liquid. CSS: app/styles/components/blocks-image.css */
+import type {BlockProps} from '../engine/types';
+import {imageSrcSet, imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
+
+interface ImageSettings {
+  image?: string;
+  aspect?: 'auto' | 'square' | 'portrait' | 'landscape';
+}
+
+export default function ImageBlock({settings}: BlockProps<ImageSettings>) {
+  const {aspect = 'auto'} = settings;
+  const src = settingImageUrl(settings.image);
+  return (
+    <div className={`image-block image-block--${aspect}`}>
+      {src ? (
+        <img
+          className="image-block__image"
+          src={imageUrl(src, 1500)}
+          srcSet={imageSrcSet(src)}
+          sizes="(min-width: 48rem) 50vw, 100vw"
+          loading="lazy"
+          alt=""
+        />
+      ) : (
+        <PlaceholderSvg className="image-block__image image-block__placeholder" />
+      )}
+    </div>
+  );
+}

package/src/react/blocks/message.tsx

@@ -0,0 +1,28 @@
+/**
+ * The announcement bar's section-local 'message' block (defined inline
+ * in sections/announcement-bar.liquid's {% schema %}; data shape in
+ * sections/header-group.json). Only the first message is visible at
+ * SSR; the announcement-bar section rotates `hidden` afterwards.
+ * CSS: app/styles/components/sections-announcement-bar.css
+ */
+import type {BlockProps} from '../engine/types';
+
+interface MessageSettings {
+  /** inline_richtext */
+  text?: string;
+}
+
+export default function MessageBlock({
+  settings,
+  index,
+}: BlockProps<MessageSettings>) {
+  const {text = 'Free shipping on orders over $50'} = settings;
+  return (
+    <p className="announcement-bar__message" hidden={index !== 0}>
+      <span
+        className="announcement-bar__text"
+        dangerouslySetInnerHTML={{__html: text}}
+      />
+    </p>
+  );
+}

package/src/react/blocks/quote.tsx

@@ -0,0 +1,24 @@
+/** Port of blocks/quote.liquid. CSS: app/styles/components/blocks-quote.css */
+import type {BlockProps} from '../engine/types';
+
+interface QuoteSettings {
+  /** Richtext setting — HTML string. */
+  quote?: string;
+  author?: string;
+}
+
+export default function QuoteBlock({settings}: BlockProps<QuoteSettings>) {
+  const {
+    quote = '<p>Add a customer quote here to build trust.</p>',
+    author,
+  } = settings;
+  return (
+    <figure className="quote stack">
+      <blockquote
+        className="quote__text"
+        dangerouslySetInnerHTML={{__html: quote}}
+      />
+      {author ? <figcaption className="quote__author">{author}</figcaption> : null}
+    </figure>
+  );
+}

package/src/react/blocks/spacer.tsx

@@ -0,0 +1,17 @@
+/** Port of blocks/spacer.liquid. CSS: app/styles/components/blocks-spacer.css */
+import type {BlockProps} from '../engine/types';
+
+interface SpacerSettings {
+  size?: number;
+  fill?: boolean;
+}
+
+export default function SpacerBlock({settings}: BlockProps<SpacerSettings>) {
+  const {size = 40, fill = false} = settings;
+  return (
+    <div
+      className={`spacer${fill ? ' spacer--fill' : ''}`}
+      style={{'--spacer-size': `${size}px`} as React.CSSProperties}
+    />
+  );
+}

package/src/react/blocks/story.tsx

@@ -0,0 +1,40 @@
+/**
+ * Port of the section-local `story` block from sections/stories.liquid:
+ * a circular/square thumbnail with an optional label and link.
+ * CSS: app/styles/components/sections-stories.css (.story rules)
+ *
+ * The Liquid renders the image at width = desktop_size * 2; block props
+ * don't carry section settings, so a fixed 2x ladder around the maximum
+ * desktop size (240px) is used instead.
+ */
+import type {BlockProps} from '../engine/types';
+import {imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
+
+interface StorySettings {
+  image?: string;
+  label?: string;
+  link?: string;
+}
+
+export default function StoryBlock({settings}: BlockProps<StorySettings>) {
+  const image = settingImageUrl(settings.image);
+  const label = settings.label ?? '';
+
+  return (
+    <a className="story" role="listitem" href={settings.link || undefined}>
+      <span className="story__media">
+        {image ? (
+          <img
+            className="story__image"
+            src={imageUrl(image, 480)}
+            loading="lazy"
+            alt={label}
+          />
+        ) : (
+          <PlaceholderSvg className="story__image story__image--placeholder" />
+        )}
+      </span>
+      {label ? <span className="story__label">{label}</span> : null}
+    </a>
+  );
+}

package/src/react/blocks/text.tsx

@@ -0,0 +1,24 @@
+/** Port of blocks/text.liquid. CSS: app/styles/components/blocks-text.css */
+import type {BlockProps} from '../engine/types';
+
+interface TextSettings {
+  text?: string;
+  text_style?: string;
+  alignment?: string;
+}
+
+export default function TextBlock({settings}: BlockProps<TextSettings>) {
+  const {
+    text = 'Text',
+    text_style: textStyle = 'text--title',
+    alignment = 'left',
+  } = settings;
+  return (
+    <div
+      className={`text ${textStyle}`}
+      style={{'--text-align': alignment} as React.CSSProperties}
+    >
+      {text}
+    </div>
+  );
+}