@zalify/storefront-kit 0.1.0

package/src/react/sections/featured-collection.tsx

@@ -0,0 +1,89 @@
+/**
+ * Port of sections/featured-collection.liquid — heading + product grid.
+ * Products come from this section's server loader
+ * (featured-collection.server.ts) via useSectionData(); without data it
+ * renders the Liquid onboarding placeholders.
+ * CSS: app/styles/components/sections-featured-collection.css
+ */
+import {ProductCard} from '../components/ProductCard';
+import type {CardProduct} from '../../commerce/index.ts';
+import {useSectionData} from '../engine/context';
+import {PlaceholderSvg} from '../engine/images';
+import {t} from '../engine/translate';
+import type {SectionProps} from '../engine/types';
+
+interface FeaturedCollectionSettings {
+  heading?: string;
+  collection?: string;
+  products_to_show?: number;
+  color_scheme?: string;
+  section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+interface FeaturedCollectionData {
+  collection?: {
+    handle: string;
+    title: string;
+    products?: {nodes?: CardProduct[]};
+  } | null;
+}
+
+export default function FeaturedCollectionSection({
+  settings,
+}: SectionProps<FeaturedCollectionSettings>) {
+  const {
+    heading = 'Featured collection',
+    products_to_show: productsToShow = 4,
+    color_scheme: colorScheme = 'scheme-1',
+    section_spacing: sectionSpacing = 'md',
+  } = settings;
+  const data = useSectionData<FeaturedCollectionData>();
+  const collection = data?.collection ?? null;
+  const products = (collection?.products?.nodes ?? []).slice(0, productsToShow);
+
+  return (
+    <div
+      className={`featured-collection section color-${colorScheme} full-width`}
+      style={
+        {
+          '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        } as React.CSSProperties
+      }
+    >
+      <div
+        className="featured-collection__inner stack"
+        style={{'--stack-gap': 'var(--space-xl)'} as React.CSSProperties}
+      >
+        <header className="featured-collection__header cluster">
+          {heading ? <h2>{heading}</h2> : null}
+          {collection ? (
+            <a
+              className="featured-collection__link"
+              href={`/collections/${collection.handle}`}
+            >
+              {t('collections.view_all')}
+            </a>
+          ) : null}
+        </header>
+
+        <ul className="product-grid" role="list">
+          {products.length > 0
+            ? products.map((product) => (
+                <li key={product.id}>
+                  <ProductCard product={product} />
+                </li>
+              ))
+            : Array.from({length: productsToShow}, (_, i) => (
+                <li key={i}>
+                  <article className="product-card">
+                    <div className="product-card__media">
+                      <PlaceholderSvg className="product-card__placeholder" />
+                    </div>
+                  </article>
+                </li>
+              ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/react/sections/hero.tsx

@@ -0,0 +1,84 @@
+/**
+ * Port of sections/hero.liquid — scroll-snap slideshow. The Liquid
+ * theme drives this with the <hero-slideshow> web component
+ * (src/entries/hero.ts); here the same behavior lives in React.
+ * CSS: app/styles/components/sections-hero.css
+ */
+import {useEffect, useRef, useState} from 'react';
+import type {SectionProps} from '../engine/types';
+import {t} from '../engine/translate';
+import {Icon} from '../components/Icon';
+
+interface HeroSettings {
+  height?: 'sm' | 'md' | 'lg';
+}
+
+export default function HeroSection({
+  section,
+  settings,
+  children,
+}: SectionProps<HeroSettings>) {
+  const {height = 'md'} = settings;
+  const slideCount = section.block_order?.length ?? 0;
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track || slideCount <= 1) return;
+    const onScroll = () => {
+      const index = Math.round(track.scrollLeft / track.clientWidth);
+      setCurrent(Math.max(0, Math.min(slideCount - 1, index)));
+    };
+    track.addEventListener('scroll', onScroll, {passive: true});
+    return () => track.removeEventListener('scroll', onScroll);
+  }, [slideCount]);
+
+  const goTo = (index: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const clamped = ((index % slideCount) + slideCount) % slideCount;
+    track.scrollTo({left: clamped * track.clientWidth, behavior: 'smooth'});
+  };
+
+  return (
+    <section className={`hero hero--${height} full-width`}>
+      <div className="hero__track" ref={trackRef}>
+        {children}
+      </div>
+
+      {slideCount > 1 && (
+        <>
+          <button
+            type="button"
+            className="hero__arrow hero__arrow--prev"
+            onClick={() => goTo(current - 1)}
+            aria-label={t('general.previous')}
+          >
+            <Icon name="icon-chevron-left" />
+          </button>
+          <button
+            type="button"
+            className="hero__arrow hero__arrow--next"
+            onClick={() => goTo(current + 1)}
+            aria-label={t('general.next')}
+          >
+            <Icon name="icon-chevron-right" />
+          </button>
+          <div className="hero__dots">
+            {Array.from({length: slideCount}, (_, i) => (
+              <button
+                key={i}
+                type="button"
+                className="hero__dot"
+                onClick={() => goTo(i)}
+                aria-current={i === current || undefined}
+                aria-label={t('general.go_to_slide', {number: i + 1})}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </section>
+  );
+}

package/src/react/sections/image-with-text.tsx

@@ -0,0 +1,61 @@
+/**
+ * Port of sections/image-with-text.liquid — media column + block stack.
+ * CSS: app/styles/components/sections-image-with-text.css
+ */
+import type {SectionProps} from '../engine/types';
+import {
+  imageSrcSet,
+  imageUrl,
+  PlaceholderSvg,
+  settingImageUrl,
+} from '../engine/images';
+
+interface ImageWithTextSettings {
+  image?: string;
+  image_position?: 'left' | 'right';
+  color_scheme?: string;
+  section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+export default function ImageWithTextSection({
+  settings,
+  children,
+}: SectionProps<ImageWithTextSettings>) {
+  const {
+    image_position: imagePosition = 'left',
+    color_scheme: colorScheme = 'scheme-1',
+    section_spacing: sectionSpacing = 'lg',
+  } = settings;
+  const image = settingImageUrl(settings.image);
+
+  return (
+    <div
+      className={`image-with-text section color-${colorScheme} full-width`}
+      style={
+        {
+          '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        } as React.CSSProperties
+      }
+    >
+      <div
+        className={`image-with-text__inner image-with-text--media-${imagePosition}`}
+      >
+        <div className="image-with-text__media">
+          {image ? (
+            <img
+              className="image-with-text__image"
+              src={imageUrl(image, 1500)}
+              srcSet={imageSrcSet(image, [400, 700, 1000, 1500])}
+              sizes="(min-width: 48rem) 50vw, 100vw"
+              loading="lazy"
+              alt=""
+            />
+          ) : (
+            <PlaceholderSvg className="image-with-text__image image-with-text__placeholder" />
+          )}
+        </div>
+        <div className="image-with-text__content stack">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/react/sections/multicolumn.tsx

@@ -0,0 +1,46 @@
+/**
+ * Port of sections/multicolumn.liquid — optional heading + responsive
+ * column grid of theme blocks (image, quote, text …) rendered via
+ * `children`. Defines no section-local blocks.
+ * CSS: app/styles/components/sections-multicolumn.css
+ */
+import type {SectionProps} from '../engine/types';
+
+interface MulticolumnSettings {
+  heading?: string;
+  columns?: number;
+  color_scheme?: string;
+  section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+export default function MulticolumnSection({
+  settings,
+  children,
+}: SectionProps<MulticolumnSettings>) {
+  const {
+    heading = '',
+    columns = 3,
+    color_scheme: colorScheme = 'scheme-1',
+    section_spacing: sectionSpacing = 'lg',
+  } = settings;
+
+  return (
+    <div
+      className={`multicolumn section color-${colorScheme} full-width`}
+      style={
+        {
+          '--section-spacing': `var(--space-section-${sectionSpacing})`,
+          '--columns': columns,
+        } as React.CSSProperties
+      }
+    >
+      <div
+        className="multicolumn__inner stack"
+        style={{'--stack-gap': 'var(--space-xl)'} as React.CSSProperties}
+      >
+        {heading ? <h2 className="multicolumn__heading">{heading}</h2> : null}
+        <div className="multicolumn__grid">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/react/sections/page.tsx

@@ -0,0 +1,43 @@
+/**
+ * Port of sections/page.liquid. CSS: app/styles/components/sections-page.css
+ *
+ * Data: useResource('page') — the scaffold PAGE query shape
+ * ({handle, id, title, body}).
+ */
+import type {SectionProps} from '../engine/types';
+import {useResource} from '../engine/context';
+
+interface PageSettings {
+  color_scheme?: string;
+  section_spacing?: string;
+}
+
+export default function PageSection({settings}: SectionProps<PageSettings>) {
+  const {color_scheme: colorScheme = 'scheme-1', section_spacing: spacing = 'md'} =
+    settings;
+  const page = useResource<any>('page');
+
+  if (!page) return null;
+
+  return (
+    <div
+      className={`page section color-${colorScheme} full-width`}
+      style={
+        {
+          '--section-spacing': `var(--space-section-${spacing})`,
+        } as React.CSSProperties
+      }
+    >
+      <div
+        className="page__inner stack"
+        style={{'--stack-gap': 'var(--space-lg)'} as React.CSSProperties}
+      >
+        <h1 className="page__title">{page.title}</h1>
+        <div
+          className="prose"
+          dangerouslySetInnerHTML={{__html: page.body ?? ''}}
+        />
+      </div>
+    </div>
+  );
+}

package/src/react/sections/password.tsx

@@ -0,0 +1,60 @@
+/**
+ * Port of sections/password.liquid.
+ * CSS: app/styles/components/sections-password.css
+ *
+ * `{% form 'storefront_password' %}` posts to the Online Store password
+ * endpoint, which has no Hydrogen equivalent — the markup renders
+ * faithfully but submission is a no-op. TODO: wire to a route action if
+ * a storefront-password flow is ever needed.
+ */
+import type {SectionProps} from '../engine/types';
+import {useThemeGlobals} from '../engine/context';
+import {t} from '../engine/translate';
+
+interface PasswordSettings {
+  color_scheme?: string;
+}
+
+export default function PasswordSection({
+  settings,
+}: SectionProps<PasswordSettings>) {
+  const {color_scheme: colorScheme = 'scheme-3'} = settings;
+  const globals = useThemeGlobals() as any;
+  const shop = globals.shop ?? globals.header?.shop;
+
+  return (
+    <div className={`password-page section color-${colorScheme} full-width`}>
+      <div className="password-page__card stack">
+        <p className="password-page__shop">{shop?.name ?? ''}</p>
+        <h1 className="password-page__title">{t('password.title')}</h1>
+
+        {shop?.passwordMessage ? (
+          <p className="password-page__message">{shop.passwordMessage}</p>
+        ) : null}
+
+        {/* TODO: no storefront_password endpoint in Hydrogen — submission is a no-op. */}
+        <form
+          className="password-page__form stack"
+          method="post"
+          onSubmit={(event) => event.preventDefault()}
+        >
+          <label className="visually-hidden" htmlFor="PasswordInput">
+            {t('password.password')}
+          </label>
+          <div className="password-page__row">
+            <input
+              id="PasswordInput"
+              type="password"
+              name="password"
+              placeholder={t('password.password')}
+              autoComplete="current-password"
+            />
+            <button type="submit" className="button">
+              {t('password.enter')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/react/sections/rich-text.tsx

@@ -0,0 +1,37 @@
+/**
+ * Port of sections/rich-text.liquid — narrow centered/left block stack.
+ * CSS: app/styles/components/sections-rich-text.css
+ */
+import type {SectionProps} from '../engine/types';
+
+interface RichTextSettings {
+  alignment?: 'left' | 'center';
+  color_scheme?: string;
+  section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+export default function RichTextSection({
+  settings,
+  children,
+}: SectionProps<RichTextSettings>) {
+  const {
+    alignment = 'center',
+    color_scheme: colorScheme = 'scheme-1',
+    section_spacing: sectionSpacing = 'lg',
+  } = settings;
+
+  return (
+    <div
+      className={`rich-text section color-${colorScheme} full-width`}
+      style={
+        {
+          '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        } as React.CSSProperties
+      }
+    >
+      <div className={`rich-text__inner rich-text--${alignment} stack`}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/react/sections/stories.tsx

@@ -0,0 +1,51 @@
+/**
+ * Port of sections/stories.liquid — horizontally scrolling story strip.
+ * Story items are section-local blocks (app/blocks/story.tsx) rendered
+ * via `children`. Pure JSON-settings section: story blocks only carry
+ * image/label/link (no collection references), so no server loader.
+ * CSS: app/styles/components/sections-stories.css
+ */
+import type {SectionProps} from '../engine/types';
+
+interface StoriesSettings {
+  shape?: 'stories--circle' | 'stories--square';
+  rows?: string | number;
+  desktop_size?: number;
+  mobile_size?: number;
+  color_scheme?: string;
+  section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+export default function StoriesSection({
+  settings,
+  children,
+}: SectionProps<StoriesSettings>) {
+  const {
+    shape = 'stories--circle',
+    rows = '1',
+    desktop_size: desktopSize = 96,
+    mobile_size: mobileSize = 72,
+    color_scheme: colorScheme = 'scheme-1',
+    section_spacing: sectionSpacing = 'md',
+  } = settings;
+
+  return (
+    <div
+      className={`stories ${shape} color-${colorScheme} section full-width`}
+      style={
+        {
+          '--section-spacing': `var(--space-section-${sectionSpacing})`,
+          '--story-size-desktop': `${desktopSize}px`,
+          '--story-size-mobile': `${mobileSize}px`,
+          '--story-rows': `${rows}`,
+        } as React.CSSProperties
+      }
+    >
+      <div className="stories__inner">
+        <div className="stories__list" role="list">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/react/sections/video-bubble.tsx

@@ -0,0 +1,145 @@
+/**
+ * Port of sections/video-bubble.liquid — floating video bubble: a small
+ * muted preview loop pinned to a bottom corner that expands into the
+ * shared video modal (main video + optional product). Dismissible per
+ * browsing session. Behavior from the <video-bubble> island in
+ * src/entries/video.ts (viewport playback, session dismissal) plus the
+ * Liquid pre-paint script that keeps a dismissed bubble from flashing.
+ * CSS: app/styles/components/sections-video-bubble.css
+ */
+import {useEffect, useState} from 'react';
+import type {SectionProps} from '../engine/types';
+import {t} from '../engine/translate';
+import {Icon} from '../components/Icon';
+import {imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
+import {
+  mp4Sources,
+  resolveVideoProduct,
+  useViewportPlayback,
+  VideoModal,
+  videoPreviewImage,
+  type ThemeVideo,
+} from '../components/VideoModal';
+
+interface VideoBubbleSettings {
+  preview_video?: ThemeVideo;
+  video?: ThemeVideo;
+  image?: string;
+  product?: unknown;
+  shape?: 'portrait' | 'circle';
+  position?: 'left' | 'right';
+  size?: number;
+}
+
+export default function VideoBubbleSection({
+  id,
+  settings,
+}: SectionProps<VideoBubbleSettings>) {
+  const {shape = 'portrait', position = 'right', size = 120} = settings;
+  const preview = settings.preview_video;
+  const mainVideo = settings.video ?? preview;
+  const poster =
+    settingImageUrl(settings.image) ??
+    videoPreviewImage(preview) ??
+    videoPreviewImage(mainVideo);
+  // The bubble renders tiny — the smallest rendition is always enough
+  const previewMp4 = mp4Sources(preview)[0];
+  const product = resolveVideoProduct(settings.product);
+
+  const dismissKey = `zalify:video-bubble:${id}`;
+  const [dismissed, setDismissed] = useState(false);
+  const [open, setOpen] = useState(false);
+  const previewRef = useViewportPlayback();
+
+  // A bubble dismissed this session stays gone (≙ connectedCallback).
+  useEffect(() => {
+    try {
+      if (sessionStorage.getItem(dismissKey)) setDismissed(true);
+    } catch {
+      // Storage unavailable: leave the bubble visible
+    }
+  }, [dismissKey]);
+
+  if (dismissed) return null;
+
+  const dismiss = () => {
+    setDismissed(true);
+    try {
+      sessionStorage.setItem(dismissKey, '1');
+    } catch {
+      // Storage can be unavailable (private mode); hiding is enough
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={`video-bubble video-bubble--${position} video-bubble--${shape}`}
+        style={{'--bubble-size': `${size}px`} as React.CSSProperties}
+        data-dismiss-key={id}
+      >
+        <button
+          type="button"
+          className="video-bubble__dismiss"
+          onClick={dismiss}
+          aria-label={t('general.close')}
+        >
+          <Icon name="icon-close" />
+        </button>
+        <button
+          type="button"
+          className="video-bubble__trigger"
+          onClick={() => setOpen(true)}
+          aria-label={t('general.play_video')}
+        >
+          {previewMp4 ? (
+            <video
+              ref={previewRef}
+              className="video-bubble__media"
+              autoPlay
+              loop
+              muted
+              playsInline
+              preload="metadata"
+              data-video-preview=""
+              poster={poster ? imageUrl(poster, 400) : undefined}
+            >
+              <source src={previewMp4.url} type={previewMp4.mime_type} />
+            </video>
+          ) : poster ? (
+            <img
+              className="video-bubble__media"
+              src={imageUrl(poster, 400)}
+              loading="lazy"
+              alt=""
+            />
+          ) : (
+            <PlaceholderSvg className="video-bubble__media video-bubble__media--placeholder" />
+          )}
+          <span className="video-bubble__play">
+            <Icon name="icon-play" />
+          </span>
+        </button>
+
+        <VideoModal
+          open={open}
+          onClose={() => setOpen(false)}
+          video={mainVideo}
+          poster={poster}
+          product={product}
+        />
+      </div>
+
+      {/* Pre-paint: a bubble dismissed this session must not flash in
+          before the effect above runs (mirror of the Liquid inline
+          script). */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `(function(){try{if(sessionStorage.getItem(${JSON.stringify(
+            dismissKey,
+          )})){document.currentScript.previousElementSibling.hidden=true;}}catch(e){}})();`,
+        }}
+      />
+    </>
+  );
+}

package/src/react/sections/video-carousel.tsx

@@ -0,0 +1,57 @@
+/**
+ * Port of sections/video-carousel.liquid — a scroll-snap strip of
+ * _video-card blocks. The carousel itself is pure CSS (scroll-snap);
+ * the <video-carousel> island in src/entries/video.ts only wired
+ * preview playback and dialog pausing, which now live inside each
+ * card / the shared VideoModal. (The shopify:block:select editor
+ * scroll has no mirror equivalent.)
+ * CSS: app/styles/components/sections-video-carousel.css
+ */
+import type {SectionProps} from '../engine/types';
+
+interface VideoCarouselSettings {
+  heading?: string;
+  desktop_size?: number;
+  mobile_size?: number;
+  color_scheme?: string;
+  section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+export default function VideoCarouselSection({
+  settings,
+  children,
+}: SectionProps<VideoCarouselSettings>) {
+  const {
+    heading = 'Shop the look',
+    desktop_size: desktopSize = 280,
+    mobile_size: mobileSize = 200,
+    color_scheme: colorScheme = 'scheme-1',
+    section_spacing: sectionSpacing = 'md',
+  } = settings;
+
+  return (
+    <div
+      className={`video-carousel section color-${colorScheme} full-width`}
+      style={
+        {
+          '--section-spacing': `var(--space-section-${sectionSpacing})`,
+          '--video-card-size-desktop': `${desktopSize}px`,
+          '--video-card-size-mobile': `${mobileSize}px`,
+        } as React.CSSProperties
+      }
+    >
+      <div
+        className="video-carousel__inner stack"
+        style={{'--stack-gap': 'var(--space-xl)'} as React.CSSProperties}
+      >
+        {heading ? <h2>{heading}</h2> : null}
+
+        {/* Direct children are the block wrappers (.shopify-block),
+            mirroring the editor wrappers the CSS flexes on. */}
+        <div className="video-carousel__list" role="list">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}