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

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;

package/src/components/with-designer-features.tsx

@@ -15,6 +15,10 @@ import {
   HOVER_SCOPE_ATTRIBUTE,
   REVEAL_ON_HOVER_ATTRIBUTE
 } from '../utils/property-switches';
+import {
+  HIDE_IN_CARD_VIEW_ATTRIBUTE,
+  HIDE_IN_CARD_VIEW_PROPERTY
+} from '../utils/card-media';
 
 /** Elements that already act on Enter/Space themselves. */
 export const NATIVE_KEYBOARD_CONTROLS =
@@ -159,6 +163,17 @@ export function WithDesignerFeatures({
 
   // In designer mode, keep hidden blocks mounted (prevents remount-driven side effects)
   // but visually hide them.
+  // A part of a card that one of the listing's grid views leaves out — the
+  // Product Card's caption in the picture-only archive (utils/card-media).
+  // On the wrapper, which carries the part's box, so nothing of it remains.
+  const hideInCardViewRaw = getResponsiveValue(
+    block.properties?.[HIDE_IN_CARD_VIEW_PROPERTY],
+    currentBreakpoint,
+    ''
+  );
+  const hideInCardView =
+    typeof hideInCardViewRaw === 'string' ? hideInCardViewRaw.trim() : '';
+
   const mergedStyle: React.CSSProperties = {
     ...(style || {}),
     ...(isDesigner && block.hidden ? { display: 'none' } : null),
@@ -173,6 +188,9 @@ export function WithDesignerFeatures({
       data-block-id={block.styleSourceId || block.id}
       {...(block.hoverScope ? { [HOVER_SCOPE_ATTRIBUTE]: '' } : null)}
       {...(block.revealOnHover ? { [REVEAL_ON_HOVER_ATTRIBUTE]: '' } : null)}
+      {...(hideInCardView
+        ? { [HIDE_IN_CARD_VIEW_ATTRIBUTE]: hideInCardView }
+        : null)}
       className={clsx(
         'relative',
         className,

package/src/theme-block.tsx

@@ -14,6 +14,7 @@ import {
   isPublishWindowVisible
 } from './utils';
 import { devWarn } from './utils/dev-warn';
+import type { CardsSliderSettings, CardViewSettings } from './utils/card-media';
 
 /**
  * Narrows what a designer typed into something usable as a document-wide id.
@@ -70,6 +71,16 @@ export interface Block {
    */
   revealOnHover?: boolean;
   hoverScope?: boolean;
+  /**
+   * Written by the same pass, never authored (utils/card-media.ts): the card's
+   * picture zooms in on hover, and this repeat lays the cards it holds out as
+   * a slider. Absent on every block no setting reaches, which is every block
+   * of an unconfigured list.
+   */
+  cardZoom?: boolean;
+  cardsSlider?: CardsSliderSettings;
+  /** The listing's grid view this repeat is drawn in, and its toggles when offered. */
+  cardsViews?: CardViewSettings;
   /**
    * Properties this clone resolved for itself from its row. One generated rule
    * serves every clone, so these are the values that have to be inlined on the

package/src/theme-placeholder-wrapper.tsx

@@ -36,7 +36,9 @@ import {
 import { isPublishWindowVisible } from './utils/publish-window';
 import {
   collectionBindingKey,
+  collectionPreviewWidget,
   fetchDesignerLiveRows,
+  fetchDesignerPreviewRows,
   hangDesignerDataSource,
   liveRowsEntryKey,
   LiveRowsStore,
@@ -799,7 +801,8 @@ export default function ThemePlaceholderWrapper({
               dataSource: hangDesignerDataSource(
                 section,
                 dataSource || section.dataSource,
-                liveRowsRef.current
+                liveRowsRef.current,
+                { previous: section.dataSource }
               )
             };
           }
@@ -814,11 +817,45 @@ export default function ThemePlaceholderWrapper({
   // preview (whose blob path writes no live rows), or the server could not
   // resolve them — asks the storefront for them once. Until they arrive the
   // picked snapshot stays on the canvas: it is the same collection.
+  //
+  // An unsaved pick asks for its binding's preview widget instead, once per
+  // binding, when the editor prepared one: those are the rows the section
+  // will show once published, where the snapshot is Omnitron's catalogue.
   useEffect(() => {
     if (!isDesigner) return;
 
     sections.forEach((section) => {
-      if (section.dataSourceSaved !== true || !section.id) return;
+      if (!section.id) return;
+
+      if (section.dataSourceSaved !== true) {
+        // The editor's record, not the one the section is drawn with: while
+        // its preview rows are asked for, the section keeps the source it
+        // showed before (see hangDesignerDataSource).
+        const record =
+          dataSources?.find(
+            (ds: { id?: string }) => ds.id === section.dataSourceId
+          ) ?? section.dataSource;
+        const previewWidget = collectionPreviewWidget(record);
+        if (
+          !previewWidget ||
+          liveRowsRef.current.has(previewWidget) ||
+          liveRowsAttemptedRef.current.has(previewWidget)
+        ) {
+          return;
+        }
+
+        liveRowsAttemptedRef.current.add(previewWidget);
+
+        fetchDesignerPreviewRows(previewWidget).then((answer) => {
+          if (!liveRowsMountedRef.current) return;
+
+          // Held as `null` when it gave nothing: the section stops holding
+          // its previous rows and falls back to the snapshot.
+          liveRowsRef.current.set(previewWidget, answer);
+          setLiveRowsRevision((revision) => revision + 1);
+        });
+        return;
+      }
 
       const bindingKey = collectionBindingKey(section.dataSource);
       if (!bindingKey) return;
@@ -844,8 +881,9 @@ export default function ThemePlaceholderWrapper({
       });
     });
     // `sections` already follows `dataSources`: every change to the records is
-    // hung over the sections before this runs.
-  }, [sections, isDesigner]);
+    // hung over the sections before this runs — except a record held back
+    // while its preview rows are asked for, which is read from `dataSources`.
+  }, [sections, dataSources, isDesigner]);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -940,7 +978,7 @@ export default function ThemePlaceholderWrapper({
 
                 // In editor mode: Complete override with theme editor's data
                 // This allows unsaved sections to render with editor's product data
-                setSections(() => {
+                setSections((previousSections) => {
                   return placeholder.sections.map((incomingSection: any) => {
                     let dataSource = null;
                     if (incomingSection.dataSourceId && theme.dataSources) {
@@ -963,11 +1001,18 @@ export default function ThemePlaceholderWrapper({
                         ? { ...incomingSection.properties }
                         : {},
                       // Live rows only for a pick the editor reports as
-                      // saved; otherwise the picked snapshot.
+                      // saved; otherwise the preview widget's rows or the
+                      // picked snapshot — and what the section showed so
+                      // far while the preview widget is asked.
                       dataSource: hangDesignerDataSource(
                         incomingSection,
                         dataSource || null,
-                        liveRowsRef.current
+                        liveRowsRef.current,
+                        {
+                          previous: previousSections.find(
+                            (section) => section.id === incomingSection.id
+                          )?.dataSource
+                        }
                       )
                     };
                   });