@akinon/pz-theme 2.0.95-beta.1 → 2.0.95-rc.0

package/src/overlays/__tests__/modal-loading.test.tsx

@@ -1,235 +0,0 @@
-import { act, render, screen } from '@testing-library/react';
-import React from 'react';
-
-jest.mock('next/navigation', () => ({
-  usePathname: () => '/',
-  useSearchParams: () => new URLSearchParams()
-}));
-
-jest.mock('next-auth/react', () => ({
-  useSession: () => ({ status: 'unauthenticated' })
-}));
-
-jest.mock('@akinon/next/hooks/use-localization', () => ({
-  useLocalization: () => ({ locale: 'en', currency: 'USD' })
-}));
-
-import { clearAutoOpenRecord } from '../modal-frequency';
-import { buildModalChromeCss } from '../modal-chrome-css';
-import { readThemeModals, ThemeModal } from '../modal-registry';
-import {
-  __resetOverlayBusForTests,
-  openModal,
-  closeModal,
-  registerModalHost
-} from '../overlay-bus';
-import { OverlayLoadingLayer } from '../overlay-loading';
-import { LayeredOverlaySurface } from '../overlay-surface';
-import ThemeModalMount from '../theme-modal-mount';
-import { __resetModalPreviewForTests } from '../use-modal-preview';
-
-/**
- * What a modal shows while its composition is still committing.
- *
- * The pause is the commit, not a fetch: a composed modal's content ships with
- * the page, and a large one mounts ninety blocks at once. So the host draws
- * the panel and a loading layer in an urgent commit and reveals the
- * composition in a transition — which is also why nothing here has to fight
- * the clock: `act()` flushes transitions, so the tests see the settled state
- * unless they render a surface directly.
- */
-
-const mkModal = (chrome: Record<string, unknown> = {}): ThemeModal =>
-  readThemeModals([{ id: 'login', name: 'Login', chrome }])[0];
-
-const openWith = (chrome: Record<string, unknown> = {}, isDesigner = false) => {
-  if (isDesigner) {
-    (window as { __themeEditorDesigner?: boolean }).__themeEditorDesigner =
-      true;
-  }
-
-  render(
-    <ThemeModalMount modal={mkModal(chrome)}>
-      <p>composed content</p>
-    </ThemeModalMount>
-  );
-
-  act(() => {
-    openModal('login');
-  });
-};
-
-beforeEach(() => {
-  __resetOverlayBusForTests();
-  __resetModalPreviewForTests();
-  registerModalHost();
-  clearAutoOpenRecord('login');
-  delete (window as { __themeEditorDesigner?: boolean }).__themeEditorDesigner;
-});
-
-describe('the loading settings', () => {
-  it('is on for a modal that never mentioned it, and off when asked', () => {
-    expect(mkModal().chrome.showLoading).toBe(true);
-    expect(mkModal({ showLoading: false }).chrome.showLoading).toBe(false);
-  });
-
-  it('keeps an unauthored delay absent, so the surface default stands', () => {
-    expect(mkModal().chrome.loadingDelay).toBeUndefined();
-    // Zero is a real answer — "show it at once" — and must survive as one.
-    expect(mkModal({ loadingDelay: 0 }).chrome.loadingDelay).toBe(0);
-    expect(mkModal({ loadingDelay: 400 }).chrome.loadingDelay).toBe(400);
-    // A delay longer than the wait it explains is a typo.
-    expect(mkModal({ loadingDelay: 90000 }).chrome.loadingDelay).toBe(2000);
-    expect(mkModal({ loadingDelay: -5 }).chrome.loadingDelay).toBe(0);
-    expect(
-      mkModal({ loadingDelay: 'soon' }).chrome.loadingDelay
-    ).toBeUndefined();
-  });
-
-  it('keeps the label absence-preserving, since the package has no copy', () => {
-    expect(mkModal().chrome.loadingLabel).toBeUndefined();
-    expect(
-      mkModal({ loadingLabel: '   ' }).chrome.loadingLabel
-    ).toBeUndefined();
-    expect(mkModal({ loadingLabel: 'Yükleniyor' }).chrome.loadingLabel).toBe(
-      'Yükleniyor'
-    );
-  });
-});
-
-describe('the layer itself', () => {
-  const renderLayer = (props: { label?: string; delay?: number } = {}) => {
-    render(
-      <LayeredOverlaySurface
-        presentation="drawer"
-        overlayProps={{ ref: undefined, 'aria-modal': 'true' }}
-        ariaLabel="Login"
-        showBackdrop
-        closeOnOverlay={false}
-        onDismiss={() => undefined}
-        width={480}
-        widthUnit="px"
-        loading={<OverlayLoadingLayer {...props} />}
-        panelBusy
-      >
-        <p>composed content</p>
-      </LayeredOverlaySurface>
-    );
-
-    // The LAST one: a test that renders twice to compare two settings stacks
-    // two containers, and the first match would answer for the previous render.
-    return Array.from(
-      document.querySelectorAll('[data-part="loading"]')
-    ).pop() as HTMLElement;
-  };
-
-  it('starts invisible and fades in only after the delay', () => {
-    const layer = renderLayer({ delay: 400 });
-
-    expect(layer.style.opacity).toBe('0');
-    expect(layer.style.animation).toContain('400ms forwards');
-  });
-
-  it('falls back to the surface delay when the modal authored none', () => {
-    expect(renderLayer().style.animation).toContain('150ms forwards');
-  });
-
-  it('never takes a click meant for the panel underneath', () => {
-    expect(renderLayer().style.pointerEvents).toBe('none');
-  });
-
-  it('sizes itself in flow, so a scrolling panel cannot scroll it away', () => {
-    const layer = renderLayer();
-
-    expect(layer.style.position).toBe('');
-    // Fills a stretched panel's flex column; the min-height is what a centred
-    // dialog with nothing in it has to go on.
-    expect(layer.style.flex).toBe('1 1 auto');
-    expect(layer.style.minHeight).toBe('160px');
-  });
-
-  it('is silent for assistive tech until a designer gives it words', () => {
-    expect(renderLayer().getAttribute('aria-hidden')).toBe('true');
-
-    const labelled = renderLayer({ label: 'Yükleniyor' });
-
-    expect(labelled.getAttribute('aria-hidden')).toBeNull();
-    expect(
-      labelled.querySelector('[data-part="loading-text"]')?.textContent
-    ).toBe('Yükleniyor');
-  });
-
-  it('tells assistive tech the dialog is still filling', () => {
-    renderLayer();
-
-    expect(
-      document.querySelector('[role="dialog"]')?.getAttribute('aria-busy')
-    ).toBe('true');
-  });
-});
-
-describe('a modal that is holding one', () => {
-  it('has the composition and no layer left once the transition lands', () => {
-    openWith();
-
-    expect(screen.getByText('composed content')).toBeInTheDocument();
-    // Both halves go together: nothing drawn over the content, and no
-    // attribute left claiming the dialog is still filling.
-    expect(document.querySelector('[data-part="loading"]')).toBeNull();
-    expect(
-      document.querySelector('[role="dialog"]')?.getAttribute('aria-busy')
-    ).toBeNull();
-  });
-
-  it('draws no layer at all when the setting is off', () => {
-    openWith({ showLoading: false });
-
-    expect(screen.getByText('composed content')).toBeInTheDocument();
-    expect(document.querySelector('[data-part="loading"]')).toBeNull();
-  });
-
-  it('shows the composition at once in the canvas, where the wait is not real', () => {
-    openWith({}, true);
-
-    expect(screen.getByText('composed content')).toBeInTheDocument();
-    expect(document.querySelector('[data-part="loading"]')).toBeNull();
-  });
-
-  it('starts from the cheap commit again on the next open', () => {
-    openWith();
-
-    act(() => {
-      closeModal('login');
-    });
-
-    expect(document.querySelector('[role="dialog"]')).toBeNull();
-
-    act(() => {
-      openModal('login');
-    });
-
-    // The reopen is a fresh mount of the composition, so the reveal has to
-    // have been reset — a latched one would leave the second open with no
-    // layer to cover it.
-    expect(screen.getByText('composed content')).toBeInTheDocument();
-  });
-});
-
-describe('the designer styles', () => {
-  it('reach the layer, its mark and its words', () => {
-    const css = buildModalChromeCss({
-      id: 'login',
-      styles: {
-        'loading/background-color': '#ffffff',
-        'loading-mark/border-color': '#00321b',
-        'loading-text/font-size': '15px'
-      }
-    });
-
-    expect(css).toContain('[data-theme-modal="login"] [data-part="loading"]');
-    expect(css).toContain('[data-part="loading-mark"]');
-    expect(css).toContain('[data-part="loading-text"]');
-    // The panel's own inline styles would otherwise outrank every rule here.
-    expect(css).toContain('!important');
-  });
-});

package/src/overlays/modal-host-context.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { closeModal } from './overlay-bus';
-
-/**
- * Which modal the composition being rendered is INSIDE.
- *
- * A composed form had no way to know. The consequence a shopper met: signing
- * in inside the auth drawer left the drawer open over the page, because the
- * only close a form could perform was `closeAllModals()` behind an authored
- * toggle — and that toggle defaults to off, deliberately, since "close every
- * modal on the page" is not something a form on a plain page should ever do
- * unasked. So the safe default and the useful one were in conflict, and the
- * live GANT drawer's SAVED config shows exactly how that ends — measured off
- * the storefront's own payload, not off the shipped template: the OTP form has
- * the toggle on and the login and register forms do not, so signing in with an
- * e-mail left the drawer covering the page while the phone path closed it. A
- * designer had no way to know they had to tick three separate boxes.
- *
- * With the host's id in hand the conflict disappears: a form closes THE MODAL
- * IT IS IN, which is never a surprise, and a form that is not in one closes
- * nothing at all.
- *
- * Same shape and same reason as `AuthFlowIdContext` — a host telling its
- * composed children which instance of itself they belong to, because they are
- * blocks at any depth and the host has no reference to hand them.
- */
-const ModalHostIdContext = React.createContext<string>('');
-
-export const ModalHostIdProvider = ModalHostIdContext.Provider;
-
-/** The id of the modal this block is inside, or '' when it is not in one. */
-export const useModalHostId = (): string =>
-  React.useContext(ModalHostIdContext);
-
-/**
- * "My task is finished — close the surface I am on."
- *
- * One helper rather than the same three lines in every block that can finish,
- * because the rule is the same everywhere and the mistakes would not be: a
- * form that closes a modal it is not in, or that closes one while the shopper
- * still has something to read.
- *
- * Which blocks turn it on by DEFAULT is a judgement about their success state,
- * not about the mechanism:
- *
- *  - a sign-in leaves nothing to read — the shopper is in — so the auth forms
- *    default to closing, and that is the bug this whole family exists to fix;
- *  - "check your inbox", "thanks for subscribing", "your password has been
- *    changed" are the point of the success state, so those forms default to
- *    staying open and let the designer decide otherwise.
- *
- * Returns a stable no-op when the block is not in a modal, so a caller can
- * fire it unconditionally.
- */
-export const useHostModalCloser = (enabled: boolean): (() => void) => {
-  const hostModalId = useModalHostId();
-
-  return React.useCallback(() => {
-    if (!enabled || !hostModalId) return;
-
-    closeModal(hostModalId);
-  }, [enabled, hostModalId]);
-};

package/src/overlays/overlay-loading.tsx

@@ -1,144 +0,0 @@
-'use client';
-
-import React from 'react';
-import { partAttrs } from '../utils';
-import { OVERLAY_LOADING_DELAY } from './overlay-tokens';
-
-/**
- * What a modal shows while its composition is still arriving.
- *
- * The gap this exists for is not a fetch — a composed modal's content ships
- * with the page, in the layout's payload — it is the COMMIT. Opening a drawer
- * mounts the whole composition at once, and a large one (ninety blocks, a
- * text block carrying half a megabyte of pasted markup) takes long enough
- * that the panel's own white surface is on screen well before anything is in
- * it. A shopper reads that as a broken drawer, which is why the host reveals
- * the composition in a transition and puts this underneath in the meantime:
- * the panel and this layer are the cheap commit, and they paint immediately.
- *
- * Two consequences follow from "the main thread is busy" and both shape the
- * implementation:
- *
- *  - The reveal is a CSS animation, not a timer. A `setTimeout` scheduled to
- *    show a spinner cannot fire while the thread it lives on is committing
- *    the very tree it is waiting for.
- *  - The layer carries no shopper-facing copy of its own. pz-theme has no
- *    dictionary — it renders authored text — so an invented "Loading…" would
- *    be an untranslatable English string on every storefront. The dialog
- *    carries `aria-busy` instead, and a designer who wants words authors them.
- */
-
-/**
- * Re-exported from `overlay-tokens.ts`, which owns them so the server-side
- * registry can clamp the authored delay without importing this client module.
- *
- * `OVERLAY_LOADING_DELAY` is long enough that a composition which commits in
- * the same frame — the common case, and the one this must not disturb — never
- * flashes a spinner, and short enough that it is not itself the pause it
- * exists to explain.
- */
-export {
-  OVERLAY_LOADING_DELAY,
-  OVERLAY_LOADING_DELAY_MAX
-} from './overlay-tokens';
-
-/** How long the layer takes to fade in once the delay has passed. */
-const OVERLAY_LOADING_FADE = 120;
-
-/**
- * The reveal and the spin. Keyframes cannot be written inline, and the
- * `prefers-reduced-motion` answer cannot either — a shopper who asked for
- * less motion still gets the affordance, just still.
- *
- * Scoped through the layer's own part attribute rather than emitted bare, so
- * a page with two overlays up does not have two authors for one selector.
- */
-const OVERLAY_LOADING_CSS = [
-  '@keyframes pz-overlay-loading-in{from{opacity:0}to{opacity:1}}',
-  '@keyframes pz-overlay-loading-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}',
-  '@media (prefers-reduced-motion: reduce){' +
-    '[data-part="loading"] [data-part="loading-mark"]{animation:none}}'
-].join('');
-
-export interface OverlayLoadingLayerProps {
-  /**
-   * Visible text beside the mark, if the designer authored one. Absent means
-   * the mark alone — see the note on copy above.
-   */
-  label?: string;
-  /** ms before the layer fades in. See `OVERLAY_LOADING_DELAY`. */
-  delay?: number;
-}
-
-/**
- * The layer itself: a mark centred in the panel, invisible for its first
- * `delay` ms.
- *
- * In FLOW, not absolutely positioned, and that is deliberate: the panel is
- * `overflow: auto`, so `inset: 0` would anchor to the scrollable content box
- * and scroll away rather than stay centred — and a stretched panel is a flex
- * column, where an out-of-flow child leaves the column with nothing to size.
- * In flow, `flex: 1 1 auto` fills a stretched drawer and `min-height` gives a
- * centred dialog something to be while it is empty. Nothing is drawn over the
- * composition either way: the host renders one or the other, never both.
- *
- * Inert regardless, because the panel underneath is already listening for
- * clicks it must keep receiving.
- */
-export const OverlayLoadingLayer = ({
-  label,
-  delay = OVERLAY_LOADING_DELAY
-}: OverlayLoadingLayerProps) => (
-  <div
-    {...partAttrs('loading')}
-    /**
-     * Hidden from assistive tech when it is a bare spinner: the dialog's own
-     * `aria-busy` is the fact a screen reader needs, and a wordless status
-     * region announced the instant a drawer opens talks over the dialog's
-     * name. Authored text is real content and stays readable.
-     */
-    aria-hidden={label ? undefined : true}
-    style={{
-      display: 'flex',
-      // Fills a stretched panel, and is ignored by one that is not a flex
-      // column — where the min-height is what keeps the mark off the top edge.
-      flex: '1 1 auto',
-      minHeight: '160px',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: '12px',
-      pointerEvents: 'none',
-      opacity: 0,
-      animation:
-        `pz-overlay-loading-in ${OVERLAY_LOADING_FADE}ms linear ` +
-        `${delay}ms forwards`
-    }}
-  >
-    <style dangerouslySetInnerHTML={{ __html: OVERLAY_LOADING_CSS }} />
-    <span
-      {...partAttrs('loading-mark')}
-      style={{
-        width: '24px',
-        height: '24px',
-        borderRadius: '999px',
-        // `currentColor` so the mark inherits the panel's text colour: a
-        // designer who darkened the panel does not also have to restyle this.
-        border: '2px solid currentColor',
-        borderTopColor: 'transparent',
-        opacity: 0.45,
-        animation: 'pz-overlay-loading-spin 700ms linear infinite'
-      }}
-    />
-    {label ? (
-      <span
-        {...partAttrs('loading-text')}
-        style={{ fontSize: '13px', opacity: 0.7 }}
-      >
-        {label}
-      </span>
-    ) : null}
-  </div>
-);
-
-export default OverlayLoadingLayer;