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

package/src/utils/line-breaks.ts

@@ -0,0 +1,142 @@
+import {
+  DESKTOP_MIN_WIDTH,
+  TABLET_MIN_WIDTH,
+  type BreakpointName
+} from './breakpoints';
+import type { Block } from '../theme-block';
+import type { Section } from '../theme-section';
+
+/**
+ * Line breaks that exist at one width and not another.
+ *
+ * A designed heading is two lines wide and one line narrow — "Şehrin ritmiyle
+ * buluşan / güneşli yaşam stili" on the phone, one run of text on the desktop —
+ * and until now a theme could express neither half of that. The text of a block
+ * is ONE string: `block.value` is keyed by LOCALE, not by breakpoint, and
+ * `richtext` is explicitly excluded from `getResponsiveValue` in the editor's
+ * panel. So there is no per-breakpoint content to author, and there never will
+ * be without a second copy of every sentence to keep translated.
+ *
+ * What is per-breakpoint is CSS. A `<br>` is an element, `display: none` on it
+ * removes the break it produces, and a media query decides where. So the break
+ * point is authored once, in the text, where the designer wants it, and its
+ * SCOPE rides along in an attribute:
+ *
+ *   Şehrin ritmiyle buluşan<br data-pz-break="mobile tablet"> güneşli yaşam stili
+ *
+ * — two lines at 1023px and under, one line on the desktop. A plain `<br>` with
+ * no attribute is untouched by any of this and still breaks everywhere, which is
+ * what every already-published composition contains.
+ *
+ * ## Why the bands are disjoint here
+ *
+ * Everywhere else in the theme, `mobile` means "narrower than desktop" and
+ * `tablet` is a narrower override layered on top of it — the fall-through chain
+ * documented in breakpoints.ts. A break's scope is not a value on that chain: it
+ * is a LIST of the widths where the break exists, written out by the author, so
+ * "mobile" here means the phone and nothing else. `mobile tablet` is how the
+ * author says both, and the toolbar offers exactly that as one choice, so the
+ * common intent costs no more clicks than a hidden fallback rule would have.
+ *
+ * The alternative — inheriting the fall-through — cannot be undone: a break
+ * scoped to the phone would appear on tablets with no way to say otherwise,
+ * because there is no such thing as an authored-empty entry in an attribute
+ * list. Explicit is the only direction that stays reachable.
+ */
+export const LINE_BREAK_ATTRIBUTE = 'data-pz-break';
+
+/** The scopes an author can name, and the width band each one means. */
+const BAND_QUERIES: Record<BreakpointName, string> = {
+  desktop: `@media (min-width: ${DESKTOP_MIN_WIDTH}px)`,
+  tablet: `@media (min-width: ${TABLET_MIN_WIDTH}px) and (max-width: ${
+    DESKTOP_MIN_WIDTH - 1
+  }px)`,
+  mobile: `@media (max-width: ${TABLET_MIN_WIDTH - 1}px)`
+};
+
+/** Widest first, so the emitted sheet reads the way the editor authors. */
+const BANDS: BreakpointName[] = ['desktop', 'tablet', 'mobile'];
+
+/**
+ * `display: none` on a `<br>` is what actually removes the break, and it has to
+ * beat whatever the brand's own stylesheet says about `br` — a global
+ * `.prose br { display: block }` outranks a bare `br[data-pz-break]` on
+ * specificity, and a break that refuses to disappear is the bug this feature
+ * exists to fix. Same reason the part rules carry it.
+ */
+const HIDDEN = `display: none !important;`;
+const SHOWN = `display: inline !important;`;
+
+const scopeSelector = (band: BreakpointName): string =>
+  `br[${LINE_BREAK_ATTRIBUTE}~="${band}"]`;
+
+const ANY_SCOPED = `br[${LINE_BREAK_ATTRIBUTE}]`;
+
+/**
+ * The rules that make a scoped break appear only where it was scoped to.
+ *
+ * `targetBreakpoint` is the editor canvas: it renders a phone layout inside a
+ * desktop-width frame, so real media queries would answer for the frame and the
+ * designer would see the desktop's line count while authoring the phone's. The
+ * canvas gets the one band it is drawing, resolved, exactly as
+ * `generateElementCSS` does for every other property.
+ */
+export const buildLineBreakCss = (targetBreakpoint?: string): string => {
+  if (targetBreakpoint) {
+    const band = BANDS.find((entry) => entry === targetBreakpoint);
+    // An unknown breakpoint name must not silently hide every scoped break:
+    // falling through to the real queries is the honest answer, and it is what
+    // a non-designer render does anyway.
+    if (band) {
+      return `${ANY_SCOPED}{${HIDDEN}}\n${scopeSelector(band)}{${SHOWN}}\n`;
+    }
+  }
+
+  return (
+    `${ANY_SCOPED}{${HIDDEN}}\n` +
+    BANDS.map(
+      (band) =>
+        `${BAND_QUERIES[band]}{${scopeSelector(band)}{${SHOWN}}}\n`
+    ).join('')
+  );
+};
+
+const stringsIn = (value: unknown): string[] => {
+  if (typeof value === 'string') return [value];
+  if (Array.isArray(value)) return value.flatMap(stringsIn);
+  if (value && typeof value === 'object') {
+    return Object.values(value as Record<string, unknown>).flatMap(stringsIn);
+  }
+  return [];
+};
+
+const blockUsesScopedLineBreaks = (block: Block): boolean => {
+  // `value` holds the rich text (a locale map, or a bare string on a
+  // single-locale composition); `properties` holds the authored HTML of the
+  // blocks that keep their copy there instead.
+  const carriers = [block.value, block.properties];
+  if (
+    carriers.some((carrier) =>
+      stringsIn(carrier).some((text) => text.includes(LINE_BREAK_ATTRIBUTE))
+    )
+  ) {
+    return true;
+  }
+
+  return (block.blocks ?? []).some(blockUsesScopedLineBreaks);
+};
+
+/**
+ * Whether anything in the composition actually carries a scoped break.
+ *
+ * The sheet is four short rules, but "byte for byte the stylesheet it produced
+ * before" is a property this generator is expected to keep for compositions that
+ * do not use a feature — see the tablet breakpoint's note in breakpoints.ts. A
+ * composition with no scoped break emits nothing new.
+ */
+export const compositionUsesScopedLineBreaks = (
+  sections: Section[]
+): boolean =>
+  sections.some((section) =>
+    (section.blocks ?? []).some(blockUsesScopedLineBreaks)
+  );

package/src/utils/slider-arrows.tsx

@@ -0,0 +1,252 @@
+/**
+ * The arrows a slider SECTION draws from its own blocks.
+ *
+ * The `slider` BLOCK has drawn custom arrows from two child icon blocks since
+ * it was written — that is why a Featured Brand Collection lists "Left Arrow
+ * Icon" and "Right Arrow Icon" as layers a designer can select. The slider
+ * SECTIONS had nothing of the kind: `arrows` was handed straight to
+ * react-multi-carousel and the library drew its own buttons, so the only thing
+ * a brand could do with them was switch them off.
+ *
+ * What this adds over the block's version is reach. The block reads a
+ * hand-picked list off its arrow icons — size, colour, background, radius, the
+ * four offsets — and an authored `box-shadow` or `border` reached the theme
+ * JSON and stopped there. Here the whole style map goes through
+ * `getCSSStyles`, the same call every other block renderer makes, and the
+ * element carries `data-block-id` so the generated stylesheet reaches it too:
+ * states, part keys and the custom-CSS hatch included.
+ */
+
+import clsx from 'clsx';
+import React from 'react';
+
+import { getCSSStyles, getResponsiveValue, resolveThemeCssVariables } from '.';
+
+/**
+ * The labels that make an icon block an arrow.
+ *
+ * A contract with the editor, which writes them into the section template and
+ * reads them back to keep the pair alive across a datasource attach — see
+ * `config/blocks/slider-arrow-blocks.ts` there. The label rather than a flag,
+ * because the editor's template cloner drops keys it does not know and the
+ * `isArrowIcon: true` a template carries never survives into a real block.
+ */
+export const LEFT_ARROW_ICON_LABEL = 'Left Arrow Icon';
+export const RIGHT_ARROW_ICON_LABEL = 'Right Arrow Icon';
+
+/** Whether a block is one of a slider's arrow icons. */
+export const isSliderArrowIconBlock = (block: {
+  type?: string;
+  label?: string;
+}): boolean =>
+  block?.type === 'icon' &&
+  (block?.label === LEFT_ARROW_ICON_LABEL ||
+    block?.label === RIGHT_ARROW_ICON_LABEL);
+
+/** Finds the pair on a section, in either order and however many there are. */
+export const findSliderArrowBlocks = (blocks: any[] | undefined) => ({
+  left: (blocks || []).find(
+    (block) => block?.type === 'icon' && block?.label === LEFT_ARROW_ICON_LABEL
+  ),
+  right: (blocks || []).find(
+    (block) => block?.type === 'icon' && block?.label === RIGHT_ARROW_ICON_LABEL
+  )
+});
+
+const DEFAULT_LEFT_ARROW_SVG =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDZMOSAxMkwxNSAxOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==';
+
+const DEFAULT_RIGHT_ARROW_SVG =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNkwxNSAxMkw5IDE4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+';
+
+/**
+ * Style keys that are not CSS and must not be handed to the button.
+ *
+ * `size` is the icon block's own control for how big the glyph is, so it
+ * belongs on the `<img>`; left in the button's style map it would render as an
+ * unknown declaration. `opacity` is dropped by `getCSSStyles` for every block
+ * (it feeds the alpha maths instead), and it is applied to the glyph here for
+ * the same reason the block's version does: an arrow faded to 40% should not
+ * take its plate with it.
+ */
+const GLYPH_ONLY_STYLE_KEYS = ['size'];
+
+const readGlyphSize = (
+  styles: Record<string, unknown> | undefined,
+  currentBreakpoint: string
+): string => {
+  const value = getResponsiveValue(styles?.size, currentBreakpoint, '24');
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? `${numeric}px` : String(value);
+};
+
+const readGlyphOpacity = (
+  styles: Record<string, unknown> | undefined,
+  currentBreakpoint: string
+): number | undefined => {
+  const raw = styles?.opacity ?? styles?.['icon-opacity'];
+  if (raw === undefined || raw === null || raw === '') return undefined;
+
+  const value = Number(getResponsiveValue(raw, currentBreakpoint, ''));
+  if (!Number.isFinite(value)) return undefined;
+
+  // Authored as a percentage in the panel, like every other opacity control.
+  return value > 1 ? Math.min(value / 100, 1) : value;
+};
+
+const isInlineSvg = (value: string): boolean =>
+  typeof value === 'string' && value.trim().startsWith('<svg');
+
+/**
+ * Recolours an SVG to the arrow's own colour and hands it back as a data URI.
+ *
+ * Both `currentColor` and a literal `stroke`/`fill` are replaced: the shipped
+ * default uses the former, an uploaded icon usually the latter, and a designer
+ * setting the colour field expects either to follow.
+ */
+const colorizeSvg = (svg: string, color: string): string => {
+  const recoloured = svg
+    .replace(/currentColor/g, color)
+    .replace(/stroke="(?!none)[^"]*"/g, `stroke="${color}"`)
+    .replace(/fill="(?!none)[^"]*"/g, `fill="${color}"`);
+
+  return `data:image/svg+xml;utf8,${encodeURIComponent(recoloured)}`;
+};
+
+const readIconUrl = (
+  block: any,
+  currentBreakpoint: string,
+  fallback: string
+): string => {
+  const value = block?.value;
+
+  if (typeof value === 'string' && value) return value;
+
+  if (value && typeof value === 'object') {
+    const responsive = getResponsiveValue(value, currentBreakpoint, '');
+    if (typeof responsive === 'string' && responsive) return responsive;
+    if (typeof value.url === 'string' && value.url) return value.url;
+  }
+
+  return fallback;
+};
+
+export interface SliderArrowProps {
+  /** The icon block the arrow is, or undefined when the section has none. */
+  block: any;
+  direction: 'left' | 'right';
+  currentBreakpoint: string;
+  themeSettings?: any;
+  /** True while the arrow's own layer is selected in the editor. */
+  isSelected?: boolean;
+  /**
+   * Called on click in the designer, to hand selection to the arrow's layer.
+   *
+   * It runs ALONGSIDE the carousel's own handler rather than instead of it: the
+   * slide moving is what the designer clicked for, and the arrow is absolutely
+   * positioned chrome that does not move with it, so there is nothing to trade
+   * off between paging and selecting.
+   */
+  onSelect?: () => void;
+  /** react-multi-carousel's own handler. */
+  onClick?: () => void;
+}
+
+/**
+ * One arrow.
+ *
+ * The order is the contract. The plate's defaults are written first and the
+ * authored map second, so every one of them is a default a designer can simply
+ * replace — including the circle, which is what the old library button never
+ * let go of. What is NOT overridable inline sits in the class list instead
+ * (`absolute`, the flex centring), because those are what make the arrow an
+ * arrow rather than a styling choice; an authored `display` still beats the
+ * class, since an inline declaration outranks it.
+ */
+export const SliderArrow: React.FC<SliderArrowProps> = ({
+  block,
+  direction,
+  currentBreakpoint,
+  themeSettings,
+  isSelected = false,
+  onSelect,
+  onClick
+}) => {
+  const styles = (block?.styles || {}) as Record<string, unknown>;
+
+  const plateStyles = React.useMemo(() => {
+    const forPlate = { ...styles };
+    GLYPH_ONLY_STYLE_KEYS.forEach((key) => {
+      delete forPlate[key];
+    });
+    return getCSSStyles(forPlate, themeSettings, currentBreakpoint);
+  }, [styles, themeSettings, currentBreakpoint]);
+
+  const glyphSize = readGlyphSize(styles, currentBreakpoint);
+  const glyphOpacity = readGlyphOpacity(styles, currentBreakpoint);
+
+  const glyphColor = resolveThemeCssVariables(
+    String(getResponsiveValue(styles.color, currentBreakpoint, '#ffffff')),
+    themeSettings
+  );
+
+  const fallbackSvg =
+    direction === 'left' ? DEFAULT_LEFT_ARROW_SVG : DEFAULT_RIGHT_ARROW_SVG;
+  const iconUrl = readIconUrl(block, currentBreakpoint, fallbackSvg);
+
+  const glyphUrl = isInlineSvg(iconUrl)
+    ? colorizeSvg(iconUrl, glyphColor)
+    : iconUrl;
+
+  // An authored offset takes the axis over from the default. Keeping both would
+  // over-constrain the box on the horizontal axis, and on the vertical one the
+  // centring translate would shift an authored `top` by half the plate.
+  const hasHorizontalOffset =
+    plateStyles.left !== undefined || plateStyles.right !== undefined;
+  const hasVerticalOffset =
+    plateStyles.top !== undefined || plateStyles.bottom !== undefined;
+
+  return (
+    <button
+      type="button"
+      // The generated stylesheet finds the arrow through this, which is what
+      // carries states, part keys and the custom-CSS hatch onto it.
+      data-block-id={block?.id}
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick?.();
+        onSelect?.();
+      }}
+      className={clsx(
+        'absolute z-10 flex items-center justify-center',
+        !hasHorizontalOffset && (direction === 'left' ? 'left-4' : 'right-4'),
+        !hasVerticalOffset && 'top-1/2 -translate-y-1/2',
+        isSelected && 'ring-2 ring-blue-500 ring-offset-2'
+      )}
+      style={{
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        border: 'none',
+        cursor: 'pointer',
+        padding: 0,
+        ...plateStyles
+      }}
+      aria-label={direction === 'left' ? 'Previous' : 'Next'}
+    >
+      <img
+        src={glyphUrl}
+        alt=""
+        aria-hidden="true"
+        style={{
+          width: glyphSize,
+          height: glyphSize,
+          opacity: glyphOpacity,
+          pointerEvents: 'none'
+        }}
+      />
+    </button>
+  );
+};