@akinon/pz-theme 2.0.143-rc.0 → 2.0.143

package/src/components/card-list-slider.tsx

@@ -0,0 +1,374 @@
+'use client';
+
+import React from 'react';
+
+import { MOBILE_MEDIA_QUERY_COMPACT } from '../utils/breakpoints';
+import type { CardsSliderSettings } from '../utils/card-media';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
+import { partAttrs } from '../utils/part-styles';
+
+/**
+ * A list of product cards as one sliding row (ZERO-5173) — what the product
+ * grid and the Product Cards section draw once their slider is on.
+ *
+ * Modelled on the GANT rail ("Sizin için seçtiklerimiz", the posts slider
+ * with its arrows top right): a row above the cards with the list's title on
+ * the left and the two chevrons on the right, laid out and typed as that rail
+ * lays out its own, and the cards underneath, `perView` of them in view on desktop and
+ * `perViewMobile` below 1024px. The strip is a native scroller with scroll
+ * snap, so a touch screen swipes it as it is, the server renders it complete,
+ * and a swipe is a scroll — it is never read as a click on a card. The
+ * chevrons step one card and leave the row when every card already fits; at
+ * either end the one with nowhere to go is disabled, drawn like the other as
+ * the rail draws it, and stamped so a design can style that state.
+ *
+ * The cards are the host's own elements, unwrapped: every direct child of the
+ * strip is one card. Their width comes from the slider's scoped stylesheet, so
+ * it is right before any script runs.
+ */
+
+export interface CardListSliderProps {
+  /** Selector-safe and unique on the page: scopes the slider's stylesheet. */
+  sliderId: string;
+  settings: CardsSliderSettings;
+  /**
+   * The space between cards, desktop and below — the list's own gap, so the
+   * strip keeps the spacing the grid had. Each falls back to `defaultGap`.
+   */
+  gap?: { desktop?: unknown; mobile?: unknown };
+  defaultGap?: string;
+  isDesigner?: boolean;
+  /**
+   * The canvas breakpoint. The phone and tablet canvases show the phone
+   * count; the storefront decides by media query, which the canvas iframe
+   * cannot answer for the device it previews.
+   */
+  currentBreakpoint?: string;
+  /** The host's marks for the element holding the cards (its list part). */
+  trackAttributes?: Record<string, string>;
+  /**
+   * The canvas's selection for a click on the title: the list whose settings
+   * hold it — the Product Cards section, the product grid. The title is no
+   * block of its own, and the block it is drawn in is not where it is set.
+   */
+  onTitleSelect?: () => void;
+  prevLabel?: string;
+  nextLabel?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * An authored gap as a CSS length, or undefined. Numbers are pixels; strings
+ * must be a plain length, since the value lands inside a stylesheet.
+ */
+export const readGapLength = (value: unknown): string | undefined => {
+  if (typeof value === 'number' && Number.isFinite(value)) return `${value}px`;
+  if (typeof value !== 'string') return undefined;
+
+  const text = value.trim();
+  const match = text.match(/^(\d+(?:\.\d+)?)(px|rem|em|%)?$/);
+  if (!match) return undefined;
+
+  return match[2] ? text : `${match[1]}px`;
+};
+
+const readBreakpointValue = (value: unknown, breakpoint: string): unknown => {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const record = value as Record<string, unknown>;
+    return breakpoint === 'desktop'
+      ? record.desktop
+      : record[breakpoint] ?? record.mobile ?? record.desktop;
+  }
+  return value;
+};
+
+/** The authored gap of a list, per side of the 1024px line. */
+export const readListGap = (
+  value: unknown
+): { desktop?: unknown; mobile?: unknown } => ({
+  desktop: readBreakpointValue(value, 'desktop'),
+  mobile: readBreakpointValue(value, 'mobile')
+});
+
+/** One card's width with `count` in view and the gap between them. */
+const cardWidth = (count: number) =>
+  `calc((100% - ${count - 1} * var(--card-slider-gap)) / ${count})`;
+
+export const buildCardSliderCss = (
+  sliderId: string,
+  settings: CardsSliderSettings,
+  gapDesktop: string,
+  gapMobile: string,
+  onPhoneCanvas: boolean
+): string => {
+  const scope = `[data-card-slider="${sliderId}"]`;
+  const cards = `${scope}>[data-card-slider-frame]>[data-card-slider-track]>*`;
+  const phone = `${scope}{--card-slider-gap:${gapMobile}}${cards}{flex-basis:${cardWidth(
+    settings.perViewMobile
+  )}}`;
+
+  return neutralizeStyleTagBreakout(
+    `${scope}{--card-slider-gap:${gapDesktop}}` +
+      `${cards}{flex:0 0 ${cardWidth(
+        settings.perView
+      )};min-width:0;scroll-snap-align:start}` +
+      `${scope}>[data-card-slider-frame]>[data-card-slider-track]::-webkit-scrollbar{display:none}` +
+      // The canvas previews the phone in whatever width the iframe has, so it
+      // takes the phone count outright; the storefront asks the viewport.
+      (onPhoneCanvas ? phone : `${MOBILE_MEDIA_QUERY_COMPACT}{${phone}}`)
+  );
+};
+
+/**
+ * The slider's chevron: the 8 × 12 glyph the GANT rail's arrows draw
+ * (posts-slider's top-right navigation), mirrored for "next", so a list
+ * slider and the rail beside it read as one design.
+ */
+const Chevron = ({ direction }: { direction: 'prev' | 'next' }) => (
+  <svg
+    width="8"
+    height="12"
+    viewBox="0 0 8 12"
+    fill="none"
+    aria-hidden="true"
+    style={{
+      display: 'block',
+      ...(direction === 'next' ? { transform: 'scaleX(-1)' } : null)
+    }}
+  >
+    <path d="M6.5 1L1.5 6l5 5" stroke="currentColor" strokeWidth="1.2" />
+  </svg>
+);
+
+const prefersReducedMotion = (): boolean =>
+  typeof window !== 'undefined' &&
+  typeof window.matchMedia === 'function' &&
+  window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export const CardListSlider = ({
+  sliderId,
+  settings,
+  gap,
+  defaultGap = '16px',
+  isDesigner = false,
+  currentBreakpoint = 'desktop',
+  trackAttributes,
+  onTitleSelect,
+  prevLabel = 'Previous',
+  nextLabel = 'Next',
+  children
+}: CardListSliderProps) => {
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  // Before the strip is measured it is assumed to overflow, which is the
+  // common case: the server renders the chevrons, the first one disabled,
+  // and they only leave the row once a measurement says every card fits.
+  const [edges, setEdges] = React.useState({ atStart: true, atEnd: false });
+
+  const measure = React.useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    // Negative in a right-to-left strip.
+    const offset = Math.abs(track.scrollLeft);
+    const next = {
+      atStart: offset <= 1,
+      atEnd: offset + track.clientWidth >= track.scrollWidth - 1
+    };
+    setEdges((previous) =>
+      previous.atStart === next.atStart && previous.atEnd === next.atEnd
+        ? previous
+        : next
+    );
+  }, []);
+
+  // After every render: a page of cards appended by Load More, a breakpoint
+  // or a count changed in the panel can each turn a full strip into one that
+  // fits, and back.
+  React.useEffect(() => {
+    measure();
+  });
+
+  React.useEffect(() => {
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, [measure]);
+
+  const step = (direction: 1 | -1) => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    const card = track.firstElementChild as HTMLElement | null;
+    const computed = window.getComputedStyle(track);
+    const spacing = parseFloat(computed.columnGap) || 0;
+    const distance =
+      (card ? card.getBoundingClientRect().width : track.clientWidth) + spacing;
+    const sign = computed.direction === 'rtl' ? -1 : 1;
+
+    track.scrollBy({
+      left: sign * direction * distance,
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth'
+    });
+  };
+
+  const onPhoneCanvas = isDesigner && currentBreakpoint !== 'desktop';
+  const gapDesktop = readGapLength(gap?.desktop) ?? defaultGap;
+  const gapMobile = readGapLength(gap?.mobile) ?? gapDesktop;
+  const css = buildCardSliderCss(
+    sliderId,
+    settings,
+    gapDesktop,
+    gapMobile,
+    onPhoneCanvas
+  );
+
+  const fits = edges.atStart && edges.atEnd;
+  const showsArrows = settings.arrows !== 'none' && !fits;
+  const title = settings.title;
+  const showsHeader =
+    Boolean(title) || (showsArrows && settings.arrows === 'top-right');
+
+  const arrow = (direction: 'prev' | 'next', placement: 'row' | 'side') => {
+    const disabled = direction === 'prev' ? edges.atStart : edges.atEnd;
+
+    return (
+      <button
+        type="button"
+        data-card-slider-arrow={direction}
+        {...partAttrs('slider-arrow', { disabled })}
+        aria-label={direction === 'prev' ? prevLabel : nextLabel}
+        disabled={disabled}
+        onClick={(event) => {
+          // Inside a card list that may sit in a link or a designer selection
+          // target: the page turn is the whole of what this click means.
+          event.preventDefault();
+          event.stopPropagation();
+          step(direction === 'prev' ? -1 : 1);
+        }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          border: 0,
+          color: 'inherit',
+          background: placement === 'side' ? '#ffffff' : 'transparent',
+          cursor: disabled ? 'default' : 'pointer',
+          ...(placement === 'side'
+            ? {
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 1,
+                ...(direction === 'prev' ? { left: '8px' } : { right: '8px' })
+              }
+            : null)
+        }}
+      >
+        <Chevron direction={direction} />
+      </button>
+    );
+  };
+
+  return (
+    <div
+      data-card-slider={sliderId}
+      {...partAttrs('slider')}
+      style={{
+        position: 'relative',
+        width: '100%',
+        minWidth: 0,
+        // A grid host keeps its own column template; the slider spans it.
+        gridColumn: '1 / -1'
+      }}
+    >
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+      {showsHeader ? (
+        <div
+          data-card-slider-header=""
+          {...partAttrs('slider-header')}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '24px',
+            // The rail's row: the title 24px in from the left, the chevrons
+            // 14px in from the right, 16px above and below. The list's
+            // Slider Header part restyles it; a host with no part styles of
+            // its own (the Product Cards section) through its custom CSS.
+            padding: 'var(--card-slider-header-padding, 16px 14px 16px 24px)'
+          }}
+        >
+          {title ? (
+            // The rail's title, typed as the list's settings say. Not a block:
+            // clicking it in the canvas selects the list that owns it, whose
+            // panel holds the title's settings.
+            <h2
+              data-card-slider-title=""
+              onClick={
+                isDesigner && onTitleSelect
+                  ? (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onTitleSelect();
+                    }
+                  : undefined
+              }
+              style={{
+                minWidth: 0,
+                margin: 0,
+                color: title.color,
+                fontSize: `${title.size}px`,
+                fontWeight: title.weight,
+                lineHeight: 1.4,
+                textTransform: title.transform,
+                fontFamily: title.font || 'var(--theme-font-body, inherit)'
+              }}
+            >
+              {title.text}
+            </h2>
+          ) : (
+            <span />
+          )}
+          {showsArrows && settings.arrows === 'top-right' ? (
+            <div
+              data-card-slider-arrows="top-right"
+              style={{ display: 'flex', alignItems: 'center' }}
+            >
+              {arrow('prev', 'row')}
+              {arrow('next', 'row')}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      <div data-card-slider-frame="" style={{ position: 'relative' }}>
+        <div
+          ref={trackRef}
+          data-card-slider-track=""
+          {...trackAttributes}
+          onScroll={measure}
+          style={{
+            display: 'flex',
+            gap: 'var(--card-slider-gap)',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            scrollSnapType: 'x mandatory',
+            overscrollBehaviorX: 'contain',
+            scrollbarWidth: 'none'
+          }}
+        >
+          {children}
+        </div>
+        {showsArrows && settings.arrows === 'sides' ? (
+          <>
+            {arrow('prev', 'side')}
+            {arrow('next', 'side')}
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default CardListSlider;

package/src/components/card-list-views.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import React from 'react';
+
+import { MOBILE_MEDIA_QUERY_COMPACT } from '../utils/breakpoints';
+import {
+  CARD_VIEW_COLUMNS,
+  CARD_VIEWS,
+  type CardView,
+  cardViewFromHash,
+  type CardViewSettings,
+  type CardViewToggles,
+  HIDE_IN_CARD_VIEW_ATTRIBUTE
+} from '../utils/card-media';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
+
+/**
+ * The GANT listing's grid views for a card list that is not sliding
+ * (ZERO-5173): the cards laid out as the view says — catalogue three across
+ * (one below 1024px), classic the list's own grid, archive eight across (four
+ * below) with the cards' captions left out — in the view the designer picked,
+ * and, when the shopper is offered them, the listing toolbar's three toggles.
+ *
+ * A SHOPPER'S SWITCH IS THE PAGE'S, IN THE HASH — the listing's own contract
+ * (`#catalogue` / `#classic` / `#archive`): read on mount and on `hashchange`,
+ * rewritten in place on a switch, so a shared link opens the view it was
+ * shared in and every list offering the toggles on a page shows the same one.
+ * No hash is no choice: each list shows its designer's view, which is also
+ * what the server — which never sees the hash — renders.
+ *
+ * The layout is CSS only: the cards are the list's own elements and keep
+ * rendering exactly as they are; a view only overrides the list's column
+ * template and hides what the archive leaves out.
+ */
+
+/** The shopper's choice: undefined before the hash is read, null for none. */
+let current: CardView | null | undefined;
+const listeners = new Set<() => void>();
+
+const read = (): CardView | null => {
+  if (current === undefined) {
+    current = cardViewFromHash(
+      typeof window === 'undefined' ? '' : window.location.hash
+    );
+  }
+  return current;
+};
+
+const notify = () => listeners.forEach((listener) => listener());
+
+const onHashChange = () => {
+  current = cardViewFromHash(window.location.hash);
+  notify();
+};
+
+const subscribe = (listener: () => void) => {
+  if (listeners.size === 0) {
+    window.addEventListener('hashchange', onHashChange);
+  }
+  listeners.add(listener);
+
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      window.removeEventListener('hashchange', onHashChange);
+      // The next page reads its own hash.
+      current = undefined;
+    }
+  };
+};
+
+/**
+ * Switch the page's view. The hash is rewritten in place — no navigation, no
+ * scroll — except on the canvas, where the preview's URL is the editor's.
+ */
+export const setCardView = (
+  view: CardView,
+  { writeHash = true }: { writeHash?: boolean } = {}
+): void => {
+  current = view;
+  if (writeHash && typeof window !== 'undefined') {
+    const url = new URL(window.location.href);
+    url.hash = `#${view}`;
+    window.history.replaceState(window.history.state, '', url.toString());
+  }
+  notify();
+};
+
+/** The shopper's choice on this page — none on the server and while hydrating. */
+export const useCardViewChoice = (): CardView | null =>
+  React.useSyncExternalStore(subscribe, read, () => null);
+
+/** Test-only: forget the view between cases. */
+export const __resetCardViewForTests = (): void => {
+  current = undefined;
+};
+
+const SAFE_ID = /^[A-Za-z0-9_-]+$/;
+
+/**
+ * The view's layout for the list whose wrapper is `[data-block-id=scopeId]`.
+ * The attribute twice outranks the list's own column template without
+ * `!important`; classic writes nothing, so it is the list as authored.
+ */
+export const buildCardViewCss = (
+  scopeId: string,
+  view: CardView,
+  onPhoneCanvas: boolean,
+  toggles?: CardViewToggles
+): string => {
+  if (!SAFE_ID.test(scopeId)) return '';
+
+  const list = `[data-block-id="${scopeId}"][data-block-id="${scopeId}"]`;
+  let css = '';
+
+  if (toggles) {
+    // The toolbar's toggles: buttons 8px wider than their glyph from 1024px
+    // up, the gap between them authored; 44px squares flush together below.
+    const switcher = `[data-card-view-switcher="${scopeId}"]`;
+    const button = toggles.size + 8;
+    const touch = Math.max(44, button);
+    const phoneSwitcher = `${switcher}{gap:0}${switcher}>button{width:${touch}px;height:${touch}px}`;
+    css +=
+      `${switcher}{gap:${toggles.gap}px}${switcher}>button{width:${button}px;height:${button}px}` +
+      (onPhoneCanvas
+        ? phoneSwitcher
+        : `${MOBILE_MEDIA_QUERY_COMPACT}{${phoneSwitcher}}`);
+  }
+
+  if (view !== 'classic') {
+    const { desktop, mobile } = CARD_VIEW_COLUMNS[view];
+    const columns = (count: number) =>
+      `${list}{grid-template-columns:repeat(${count},minmax(0,1fr))}`;
+    css += onPhoneCanvas
+      ? columns(mobile)
+      : `${columns(desktop)}${MOBILE_MEDIA_QUERY_COMPACT}{${columns(mobile)}}`;
+    css += `${list} [${HIDE_IN_CARD_VIEW_ATTRIBUTE}~="${view}"]{display:none}`;
+  }
+
+  return neutralizeStyleTagBreakout(css);
+};
+
+/** The listing toolbar's 24-unit glyphs: one cell, four, six. */
+const VIEW_GLYPHS: Record<CardView, string> = {
+  catalogue: 'M18.5 17.5h-13v-11h13zm-12-1h11v-9h-11z',
+  classic:
+    'M18.5 17.5h-13v-11h13zm-12-1h5v-4h-5zm6 0h5v-4h-5zm-6-5h5v-4h-5zm6 0h5v-4h-5z',
+  archive:
+    'M18.5 17.5h-13v-11h13zm-12-1h3v-4h-3zm4 0h3v-4h-3zm4 0h3v-4h-3zm-8-5h3v-4h-3zm4 0h3v-4h-3zm4 0h3v-4h-3z'
+};
+
+const VIEW_LABELS: Record<CardView, string> = {
+  catalogue: 'Catalogue view',
+  classic: 'Classic view',
+  archive: 'Archive view'
+};
+
+export interface CardListViewsProps {
+  /** The list's wrapper `data-block-id` — what its own grid styles target. */
+  scopeId: string;
+  settings: CardViewSettings;
+  isDesigner?: boolean;
+  currentBreakpoint?: string;
+  /**
+   * The canvas's selection for a click on the toggles: the list whose settings
+   * hold them — they are no block of their own.
+   */
+  onSelect?: () => void;
+}
+
+const JUSTIFY: Record<CardViewToggles['align'], string> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+
+/**
+ * The view's stylesheet and, when offered, the toggles — drawn as the first
+ * item of the list's grid and spanning its columns. Its own component, so only
+ * it re-renders when the view changes; the cards never do.
+ */
+export const CardListViews = ({
+  scopeId,
+  settings,
+  isDesigner = false,
+  currentBreakpoint = 'desktop',
+  onSelect
+}: CardListViewsProps) => {
+  const choice = useCardViewChoice();
+  const { toggles } = settings;
+  // Only a list that offers the toggles answers to the shopper's switch; one
+  // that does not is the view its designer picked, whatever the page says.
+  const view = toggles ? choice ?? settings.view : settings.view;
+  const css = buildCardViewCss(
+    scopeId,
+    view,
+    isDesigner && currentBreakpoint !== 'desktop',
+    toggles
+  );
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+      {toggles ? (
+        <div
+          data-card-view-switcher={scopeId}
+          role="group"
+          aria-label="Grid views"
+          style={{
+            gridColumn: '1 / -1',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: JUSTIFY[toggles.align],
+            padding: toggles.padding,
+            color: toggles.color
+          }}
+        >
+          {CARD_VIEWS.map((option) => {
+            const active = option === view;
+            return (
+              <button
+                key={option}
+                type="button"
+                data-card-view-option={option}
+                aria-pressed={active}
+                aria-label={VIEW_LABELS[option]}
+                onClick={(event) => {
+                  // Inside a list the canvas selects on click: the toggle is
+                  // the whole of what this click means — and on the canvas it
+                  // also opens the list's settings, where the toggles are set.
+                  event.preventDefault();
+                  event.stopPropagation();
+                  setCardView(option, { writeHash: !isDesigner });
+                  if (isDesigner) onSelect?.();
+                }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: 0,
+                  border: 0,
+                  background: 'transparent',
+                  color: 'inherit',
+                  cursor: 'pointer'
+                }}
+              >
+                <span
+                  style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    width: `${toggles.size}px`,
+                    height: `${toggles.size + 1}px`,
+                    borderBottom: `1px solid ${
+                      active ? 'currentColor' : 'transparent'
+                    }`
+                  }}
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    width={toggles.size}
+                    height={toggles.size}
+                    fill="none"
+                    aria-hidden="true"
+                    style={{ display: 'block' }}
+                  >
+                    <path fill="currentColor" d={VIEW_GLYPHS[option]} />
+                  </svg>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default CardListViews;

package/src/components/card-zoom.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+
+import { CARD_ZOOM_CSS, CARD_ZOOM_STYLE_ID } from '../utils/card-media';
+
+const ensureCardZoomStyles = () => {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(CARD_ZOOM_STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = CARD_ZOOM_STYLE_ID;
+  style.textContent = CARD_ZOOM_CSS;
+  document.head.appendChild(style);
+};
+
+interface CardZoomProps {
+  /** The box the picture was drawn in, so the card around it does not move. */
+  style?: React.CSSProperties;
+  /** The host's own marks for its picture, written on the frame. */
+  attributes?: Record<string, string>;
+  children: React.ReactNode;
+}
+
+/**
+ * The product card's picture, zooming in on hover (ZERO-5173).
+ *
+ * A frame that clips the picture to its own box, so the enlarged picture
+ * never spills over the caption or a neighbouring card. The hover rule is a
+ * stylesheet injected once per document: it only does anything where a
+ * pointer hovers, so the server render — and a phone — draw the picture
+ * exactly as before.
+ */
+export const CardZoom = ({ style, attributes, children }: CardZoomProps) => {
+  React.useInsertionEffect(ensureCardZoomStyles, []);
+
+  return (
+    <div
+      data-card-zoom=""
+      {...attributes}
+      style={{
+        position: 'relative',
+        display: 'block',
+        overflow: 'hidden',
+        ...style
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CardZoom;