@akinon/pz-theme 2.0.136-rc.0 → 2.0.137-beta.0

package/src/blocks/density-switcher.tsx

@@ -0,0 +1,336 @@
+'use client';
+
+import React from 'react';
+import { partAttrs } from '../utils';
+import { builtInBreakpointOf } from '../utils/breakpoints';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
+import {
+  chooseDensity,
+  DENSITY_BAND_MEDIA_QUERIES,
+  DENSITY_BANDS,
+  DensityBand,
+  DensityCounts,
+  DensityOptionSets,
+  registerDensityOptions,
+  useListingDensity
+} from './listing-density-store';
+
+/**
+ * The shopper-facing "how many across" control, drawn by the standalone
+ * `listing-density` block and by the switcher the product grid can still
+ * carry inside itself. One component so the two cannot drift: both read and
+ * write the same store, draw the same marks and hide per band the same way.
+ */
+
+export type DensityGlyphStyle = 'icon' | 'grid' | 'number';
+
+export const DENSITY_GLYPH_STYLES: DensityGlyphStyle[] = [
+  'icon',
+  'grid',
+  'number'
+];
+
+/** The column counts the designer allows, as an ascending, deduped list. */
+export const parseDensityOptions = (raw: string): number[] => {
+  const counts = new Set<number>();
+
+  raw.split(',').forEach((entry) => {
+    const numeric = Math.round(Number(entry.trim()));
+    if (!Number.isFinite(numeric) || numeric < 1 || numeric > 6) return;
+    counts.add(numeric);
+  });
+
+  return Array.from(counts).sort((a, b) => a - b);
+};
+
+/**
+ * An empty band reads the next one down the chain the breakpoints use
+ * everywhere else: tablet falls back to mobile, mobile to desktop.
+ */
+export const resolveDensityOptionSets = (
+  desktop: number[],
+  tablet: number[],
+  mobile: number[]
+): DensityOptionSets => {
+  const mobileSet = mobile.length > 0 ? mobile : desktop;
+
+  return {
+    desktop,
+    tablet: tablet.length > 0 ? tablet : mobileSet,
+    mobile: mobileSet
+  };
+};
+
+/** The band the designer's canvas is on; a custom breakpoint reads its base. */
+export const designerDensityBand = (currentBreakpoint: string): DensityBand => {
+  const builtIn = builtInBreakpointOf(currentBreakpoint);
+  return (DENSITY_BANDS as string[]).includes(builtIn)
+    ? (builtIn as DensityBand)
+    : 'desktop';
+};
+
+/**
+ * Which block draws the switcher. The grid's own switcher keeps the part names
+ * and data attributes it always had — published styles and brand CSS target
+ * them — and the standalone block has its own.
+ *
+ * Every part is stamped with a LITERAL `partAttrs('…')` on the element it
+ * dresses, one per host, rather than a name passed in: the editor's part-stamp
+ * parity check reads these calls from source to hold each part's tag and
+ * states against what the panel offers.
+ */
+export type DensitySwitcherHost = 'product-grid' | 'listing-density';
+
+/**
+ * As many bars as the layout has columns — the shopper reads the density
+ * rather than a number.
+ */
+const BarsGlyph = ({
+  columns,
+  inGrid
+}: {
+  columns: number;
+  inGrid: boolean;
+}) => {
+  const gap = 2;
+  const cell = (16 - gap * (columns - 1)) / columns;
+
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      {...(inGrid ? partAttrs('density-icon') : partAttrs('icon'))}
+    >
+      {Array.from({ length: columns }, (_, index) => (
+        <rect
+          key={index}
+          x={index * (cell + gap)}
+          y={0}
+          width={cell}
+          height={16}
+          rx={1}
+        />
+      ))}
+    </svg>
+  );
+};
+
+const roundTo2 = (value: number) => Math.round(value * 100) / 100;
+
+/**
+ * A square split into as many columns and rows as the layout has columns: one
+ * frame, two by two, three by three — the outline marks listing toolbars draw.
+ */
+const GridGlyph = ({
+  columns,
+  inGrid
+}: {
+  columns: number;
+  inGrid: boolean;
+}) => {
+  const step = 15 / columns;
+
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1}
+      aria-hidden="true"
+      {...(inGrid ? partAttrs('density-icon') : partAttrs('icon'))}
+    >
+      <rect x={0.5} y={0.5} width={15} height={15} />
+      {Array.from({ length: columns - 1 }, (_, index) => {
+        const at = roundTo2(0.5 + step * (index + 1));
+
+        return (
+          <React.Fragment key={index}>
+            <line x1={at} y1={0.5} x2={at} y2={15.5} />
+            <line x1={0.5} y1={at} x2={15.5} y2={at} />
+          </React.Fragment>
+        );
+      })}
+    </svg>
+  );
+};
+
+export interface DensitySwitcherProps {
+  host: DensitySwitcherHost;
+  /** Whose choice this switcher writes — see `listing-density-store`. */
+  scope: string;
+  /**
+   * The counts each band shows before any choice, when the caller already
+   * knows them. The grid's own switcher does, so its marks are right in the
+   * server markup; the standalone block learns them from the grid once the
+   * page has mounted.
+   */
+  defaultCounts?: DensityCounts;
+  /** Selector-safe; scopes the per-band rules to this switcher. */
+  switcherId: string;
+  optionSets: DensityOptionSets;
+  glyph: DensityGlyphStyle;
+  label?: string;
+  ariaLabel: string;
+  isDesigner: boolean;
+  currentBreakpoint: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * On the storefront every band is drawn and a stylesheet shows the one the
+ * viewport is in. The server cannot know the viewport, and on the live site
+ * `currentBreakpoint` is always `desktop` — so this is what lets a phone see
+ * its own counts in the first paint, with nothing to re-render once scripts
+ * run. Each band keeps its own mark, which is what fixed the tablet showing
+ * the phone's count as active.
+ *
+ * On the designer's canvas only the band being edited is drawn, the mark is
+ * the grid's authored count and a click changes nothing: the canvas has to
+ * show what the designer authored, and a click there selects the block. "Use
+ * preview" hands the canvas the storefront behaviour instead.
+ */
+const DensitySwitcher = ({
+  host,
+  scope,
+  defaultCounts,
+  switcherId,
+  optionSets,
+  glyph,
+  label = '',
+  ariaLabel,
+  isDesigner,
+  currentBreakpoint,
+  style
+}: DensitySwitcherProps) => {
+  const { applied, authored } = useListingDensity(scope);
+  const inGrid = host === 'product-grid';
+
+  const setsKey = DENSITY_BANDS.map((band) => optionSets[band].join(',')).join(
+    '|'
+  );
+
+  React.useEffect(
+    () => registerDensityOptions(scope, optionSets),
+    // The sets are rebuilt on every render; their contents are what matter.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scope, setsKey]
+  );
+
+  const offersSomething = (band: DensityBand) => optionSets[band].length > 1;
+
+  const bands = isDesigner
+    ? [designerDensityBand(currentBreakpoint)].filter(offersSomething)
+    : DENSITY_BANDS.filter(offersSomething);
+
+  if (bands.length === 0) return null;
+
+  const root = `[data-density-switcher-id="${switcherId}"]`;
+  // Band wrappers stay out of the layout, so the options sit in the root's
+  // flex row exactly where they sat before there were bands.
+  let css = `${root} [data-density-band]{display:contents;}`;
+
+  if (!isDesigner) {
+    DENSITY_BANDS.forEach((band) => {
+      const others = DENSITY_BANDS.filter((other) => other !== band)
+        .map((other) => `${root} [data-density-band="${other}"]`)
+        .join(',');
+      // Fewer than two counts is no choice at all: that band shows no
+      // switcher, label included.
+      const hideRoot = offersSomething(band)
+        ? ''
+        : `${root}{display:none!important;}`;
+
+      css += `${DENSITY_BAND_MEDIA_QUERIES[band]}{${others}{display:none;}${hideRoot}}`;
+    });
+  }
+
+  return (
+    <div
+      data-density-switcher-id={switcherId}
+      {...(inGrid
+        ? { 'data-product-grid-density': '' }
+        : { 'data-listing-density': '' })}
+      {...(inGrid ? partAttrs('density') : partAttrs('options'))}
+      role="group"
+      aria-label={ariaLabel}
+      style={style}
+    >
+      {/* Verbatim, not a text child: React 18's server renderer would escape
+          the selectors' quotes (see `css-safety.ts`). */}
+      <style
+        dangerouslySetInnerHTML={{ __html: neutralizeStyleTagBreakout(css) }}
+      />
+
+      {label && (
+        <span
+          {...(inGrid
+            ? { 'data-product-grid-density-label': '' }
+            : { 'data-listing-density-label': '' })}
+          {...(inGrid ? partAttrs('density-label') : partAttrs('label'))}
+        >
+          {label}
+        </span>
+      )}
+
+      {bands.map((band) => {
+        const authoredCount = authored[band] ?? defaultCounts?.[band];
+        const activeCount = isDesigner
+          ? authoredCount
+          : applied[band] ?? authoredCount;
+
+        return (
+          <div key={band} data-density-band={band}>
+            {optionSets[band].map((count) => {
+              const isActive = count === activeCount;
+
+              return (
+                <button
+                  key={count}
+                  type="button"
+                  {...(inGrid
+                    ? { 'data-product-grid-density-option': String(count) }
+                    : { 'data-listing-density-option': String(count) })}
+                  {...(inGrid
+                    ? partAttrs('density-option', { selected: isActive })
+                    : partAttrs('option', { selected: isActive }))}
+                  aria-pressed={isActive}
+                  aria-label={String(count)}
+                  onClick={() => {
+                    if (isDesigner) return;
+                    chooseDensity(scope, band, count);
+                  }}
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    background: 'none',
+                    border: 'none',
+                    padding: '4px',
+                    cursor: 'pointer',
+                    color: 'inherit',
+                    font: 'inherit',
+                    opacity: isActive ? 1 : 0.45
+                  }}
+                >
+                  {glyph === 'number' ? (
+                    count
+                  ) : glyph === 'grid' ? (
+                    <GridGlyph columns={count} inGrid={inGrid} />
+                  ) : (
+                    <BarsGlyph columns={count} inGrid={inGrid} />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DensitySwitcher;

package/src/blocks/listing-density-block.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import DensitySwitcher, {
+  DENSITY_GLYPH_STYLES,
+  DensityGlyphStyle,
+  designerDensityBand,
+  parseDensityOptions,
+  resolveDensityOptionSets
+} from './density-switcher';
+import { listingPlaceholderStyle, useListingContext } from './listing-context';
+import { LISTING_DENSITY_SCOPE } from './listing-density-store';
+
+/**
+ * Functional listing block: the shopper's "how many products across" switcher
+ * (ZERO-5151), on its own so it can sit wherever the design puts it — in the
+ * listing toolbar beside the filter and sort controls, typically — rather than
+ * glued to the top or bottom of the grid.
+ *
+ * Each device band offers its own counts (by default a desktop 2, 3 or 4 and a
+ * phone 1 or 2, with the tablet following the phone), and the choice is kept
+ * per band. It reaches every product grid on the page that carries no
+ * switcher of its own, through `listing-density-store`; the grid's own column
+ * counts stay the default each band shows until the shopper picks.
+ *
+ * Parts: options, label, option, icon.
+ * Properties: optionsDesktop, optionsTablet, optionsMobile, glyphStyle,
+ * label, ariaLabel.
+ */
+const ListingDensityBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const listing = useListingContext();
+
+  const read = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  // The same defaults the editor's panel shows. Tablet is empty by default and
+  // reads the mobile counts, the way a tablet reads mobile everywhere else.
+  const desktopRaw = read('optionsDesktop', '2,3,4');
+  const tabletRaw = read('optionsTablet', '');
+  const mobileRaw = read('optionsMobile', '1,2');
+  const optionSets = React.useMemo(
+    () =>
+      resolveDensityOptionSets(
+        parseDensityOptions(desktopRaw),
+        parseDensityOptions(tabletRaw),
+        parseDensityOptions(mobileRaw)
+      ),
+    [desktopRaw, tabletRaw, mobileRaw]
+  );
+
+  const glyphRaw = read('glyphStyle', 'grid');
+  const glyph = (DENSITY_GLYPH_STYLES as string[]).includes(glyphRaw)
+    ? (glyphRaw as DensityGlyphStyle)
+    : 'grid';
+  const label = read('label', '');
+  const ariaLabel = read('ariaLabel', 'Products per row');
+
+  if (isDesigner) {
+    // The canvas draws one band at a time; with fewer than two counts there
+    // it would draw nothing the designer could select.
+    if (optionSets[designerDensityBand(currentBreakpoint)].length < 2) {
+      return (
+        <div data-listing-density="" style={listingPlaceholderStyle}>
+          Density switcher (enter at least two column counts for this
+          breakpoint)
+        </div>
+      );
+    }
+  } else if (!listing || listing.products.length === 0) {
+    // Nothing to rearrange: no listing on this page, or one that came back
+    // empty and is showing its no-results layout instead of a grid.
+    return null;
+  }
+
+  return (
+    <DensitySwitcher
+      host="listing-density"
+      scope={LISTING_DENSITY_SCOPE}
+      switcherId={String(block.id || 'density').replace(/[^a-zA-Z0-9_-]/g, '')}
+      optionSets={optionSets}
+      glyph={glyph}
+      label={label}
+      ariaLabel={ariaLabel}
+      isDesigner={isDesigner}
+      currentBreakpoint={currentBreakpoint}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--listing-density-gap, 8px)'
+      }}
+    />
+  );
+};
+
+export default ListingDensityBlock;