@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

package/src/tracking/react/Experiment.tsx

@@ -1,44 +0,0 @@
-import type { ReactNode } from 'react';
-import { useExperiment } from './hooks';
-
-export interface IExperimentProps {
-  /** The experiment key, as in the admin API (`signup-cta`). */
-  id: string;
-  /** One element per variant key; the control's key must be among them. */
-  variants: Record<string, ReactNode>;
-  /** The control's key (default `a`). */
-  control?: string;
-  /** Trigger section (`data-track-section` id) when the definition names none. */
-  trigger?: string;
-}
-
-/**
- * Renders the visitor's variant: `<Experiment id="signup-cta" variants={{ a: <A />, b: <B /> }} />`.
- * Without consent, without a running definition, or outside the traffic share it
- * renders the control and logs nothing. An ended (concluded) experiment renders its winner
- * for everybody. An in-app switch (`experiments.setEditorOverride`) shows one version per
- * experiment (never logged); a `?qa_variant=signup-cta:b` link previews one for QA.
- *
- * DOM: a `display: contents` wrapper with `data-experiment`, `data-variant` (shown),
- * `data-variants` (every key, comma-separated) and `data-experiment-reason`.
- */
-export const Experiment = ({ id, variants, control = 'a', trigger }: IExperimentProps) => {
-  const keys = Object.keys(variants);
-  const { variant, assignment } = useExperiment(id, { control, trigger, variants: keys });
-  const shown = variants[variant] !== undefined ? variant : control;
-  // DOM markers, so an editor overlay can find every experiment on the page. `display: contents`
-  // gives the wrapper no box, so the page lays out exactly as without it.
-  return (
-    <div
-      style={CONTENTS}
-      data-experiment={id}
-      data-variant={shown}
-      data-variants={keys.join(',')}
-      data-experiment-reason={assignment.reason}
-    >
-      {variants[shown] ?? null}
-    </div>
-  );
-};
-
-const CONTENTS = { display: 'contents' } as const;

package/src/tracking/react/TrackingProvider.tsx

@@ -1,56 +0,0 @@
-import { createContext, useContext, useLayoutEffect, useMemo, useRef, type ReactNode, type MutableRefObject } from 'react';
-import type { IAttached } from '../browser/attach';
-import type { Tracker } from '../core/tracker';
-
-interface ITrackingContext {
-  tracker: Tracker | null;
-  /** The page wiring; set before any child's passive effect runs. */
-  attached: MutableRefObject<IAttached | null>;
-}
-
-const TrackingContext = createContext<ITrackingContext>({ tracker: null, attached: { current: null } });
-
-export interface ITrackingProviderProps {
-  tracker: Tracker | null;
-  /** Attaches the tracker to the page (listeners, observers); omitted in stories and tests. */
-  attach?: () => IAttached;
-  /** The current route (`pathname + search`): each change is a new page view. */
-  location: string;
-  children: ReactNode;
-}
-
-/**
- * Mount once, at the app shell. Without a provider (or with `tracker={null}`)
- * everything still renders: consent reads `unknown`, experiments serve the control.
- */
-export const TrackingProvider = ({ tracker, attach, location, children }: ITrackingProviderProps) => {
-  const attached = useRef<IAttached | null>(null);
-
-  // Layout effects: every layout effect runs before any passive effect, so the
-  // tracker is attached and started before a child's `useExperiment` effect.
-  useLayoutEffect(() => {
-    if (!tracker) return undefined;
-    try {
-      attached.current = attach?.() ?? null;
-      tracker.start();
-    } catch {
-      /* never into the page */
-    }
-    return () => {
-      attached.current?.detach();
-      attached.current = null;
-    };
-  }, [tracker, attach]);
-
-  useLayoutEffect(() => {
-    tracker?.pageview();
-  }, [tracker, location]);
-
-  const value = useMemo(() => ({ tracker, attached }), [tracker]);
-  return <TrackingContext.Provider value={value}>{children}</TrackingContext.Provider>;
-};
-
-export const useTrackingContext = () => useContext(TrackingContext);
-
-/** The tracker, or null outside a provider. Call `goal`, `custom`, `record` on it. */
-export const useTracker = () => useContext(TrackingContext).tracker;

package/src/tracking/react/hooks.ts

@@ -1,106 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
-import type { IAssignment } from '../core/experiments';
-import { Observable } from '../core/observable';
-import type { TConsentState } from '../core/types';
-import { useTrackingContext } from './TrackingProvider';
-
-const noopSubscribe = () => () => undefined;
-
-/** The visitor's consent and the two answers. `unknown` outside a provider. */
-export const useConsent = () => {
-  const { tracker } = useTrackingContext();
-  const state = useSyncExternalStore<TConsentState>(
-    tracker ? tracker.consent.state.subscribe : noopSubscribe,
-    () => (tracker ? tracker.consent.get() : 'unknown'),
-    () => 'unknown',
-  );
-  const grant = useCallback(() => tracker?.grant(), [tracker]);
-  const deny = useCallback(() => tracker?.deny(), [tracker]);
-  return { state, grant, deny, available: !!tracker };
-};
-
-/** Whether the app asked to reopen its consent prompt (a "Cookie settings" link). */
-export const consentPanel = new Observable<boolean>(false);
-export const openConsentSettings = () => consentPanel.set(true);
-export const closeConsentSettings = () => consentPanel.set(false);
-export const useConsentPanelOpen = () => useSyncExternalStore(consentPanel.subscribe, consentPanel.get, consentPanel.get);
-
-export interface IUseExperimentOptions {
-  /** The control's key (default `a`): served whenever the visitor is not assigned. */
-  control?: string;
-  /** Variant keys this code can render; an assignment outside it falls back to the control. */
-  variants?: string[];
-  /** Trigger section when the experiment definition names none. */
-  trigger?: string;
-}
-
-export interface IUseExperiment {
-  variant: string;
-  assignment: IAssignment;
-  /** Put on the element whose being seen counts as exposure, when there is no trigger section. */
-  triggerRef: (el: Element | null) => void;
-}
-
-/**
- * The variant this visitor sees. Decided once when the component mounts and kept
- * for the page view (no flicker when definitions or consent arrive later: the
- * next page view picks them up). Two exceptions, both for an editor: the in-app
- * version switch (`setEditorOverride`) applies at once, and `experiments.refresh()`
- * (after a winner is accepted or a version removed) decides again. Logs the exposure once per page view when the
- * trigger is seen, and only for enrolled visitors (never for a preview or a winner).
- */
-export const useExperiment = (key: string, options: IUseExperimentOptions = {}): IUseExperiment => {
-  const { tracker, attached } = useTrackingContext();
-  const control = options.control ?? 'a';
-  const known = options.variants;
-  const decide = useCallback((): IAssignment => {
-    const a: IAssignment = tracker
-      ? tracker.decide(key, control)
-      : { key, variant: control, enrolled: false, reason: 'no-consent', trigger: null };
-    return known && !known.includes(a.variant) ? { ...a, variant: control, enrolled: false } : a;
-    // `known` is the variant keys of the call site: constant for its lifetime.
-  }, [tracker, key, control]);
-  const [mounted] = useState<IAssignment>(decide);
-  const store = tracker?.experiments;
-  const revision = useSyncExternalStore(store ? store.revision.subscribe : noopSubscribe, () => store?.revision.get() ?? 0, () => 0);
-  const editorVariant = useSyncExternalStore(
-    store ? store.editorOverrides.subscribe : noopSubscribe,
-    () => store?.editorOverrideOf(key),
-    () => undefined,
-  );
-  // Windows of the same app (an editor and its preview frame) share the switch through localStorage.
-  useEffect(() => {
-    if (!store || typeof window === 'undefined') return undefined;
-    const onStorage = () => store.reloadEditorOverrides();
-    window.addEventListener('storage', onStorage);
-    return () => window.removeEventListener('storage', onStorage);
-  }, [store]);
-  // Same object while no switch or refresh changed it, so the exposure watch is not re-created.
-  const [mountedSwitch] = useState(editorVariant);
-  const assignment = useMemo(
-    () => (revision === 0 && editorVariant === mountedSwitch ? mounted : decide()),
-    [revision, editorVariant, mountedSwitch, mounted, decide],
-  );
-  const element = useRef<Element | null>(null);
-  const triggerRef = useCallback((el: Element | null) => {
-    element.current = el;
-  }, []);
-
-  useEffect(() => {
-    if (!tracker || !assignment.enrolled) return undefined;
-    let trigger = assignment.trigger ?? options.trigger ?? null;
-    let unobserve: (() => void) | undefined;
-    if (!trigger && element.current && attached.current) {
-      trigger = `experiment:${key}`;
-      unobserve = attached.current.observeElement(element.current, trigger);
-    }
-    const unwatch = tracker.watchExposure({ ...assignment, trigger });
-    return () => {
-      unwatch();
-      unobserve?.();
-    };
-    // A new assignment only comes from a switch or a refresh; options.trigger is a constant at the call site.
-  }, [tracker, assignment]);
-
-  return { variant: assignment.variant, assignment, triggerRef };
-};

package/src/tracking/react/index.ts

@@ -1,13 +0,0 @@
-export { TrackingProvider, useTracker, useTrackingContext } from './TrackingProvider';
-export { Experiment } from './Experiment';
-export {
-  closeConsentSettings,
-  consentPanel,
-  openConsentSettings,
-  useConsent,
-  useConsentPanelOpen,
-  useExperiment,
-} from './hooks';
-export type { IUseExperiment, IUseExperimentOptions } from './hooks';
-export type { ITrackingProviderProps } from './TrackingProvider';
-export type { IExperimentProps } from './Experiment';

package/src/tracking/testing.ts

@@ -1,108 +0,0 @@
-import { memoryStorage, type IStorage } from './core/storage';
-import { Tracker, type IPageInfo } from './core/tracker';
-import { resolveConfig, storageKeys, type IBatch, type IExperimentDefinition, type ITrackingConfig, type TStorageKeys } from './core/types';
-
-/**
- * A tracker with no browser behind it: memory storage, a fake clock and timers you
- * drive, a transport that records batches. For unit tests and Storybook stories.
- * Defaults: property `test`, the default storage prefix (`qa.`), page `https://example.com/`.
- */
-export interface IMemoryTracker {
-  tracker: Tracker;
-  /** Batches handed to the transport, parsed. */
-  sent: { batch: IBatch; mode: 'fetch' | 'beacon' }[];
-  local: IStorage;
-  session: IStorage;
-  /** The storage keys under the config's prefix. */
-  keys: TStorageKeys;
-  page: IPageInfo;
-  /** Moves the clock forward and runs every timer that is due. */
-  advance: (ms: number) => Promise<void>;
-  now: () => number;
-  /** Makes the next transport calls fail (network down). */
-  setOffline: (offline: boolean) => void;
-}
-
-export interface IMemoryTrackerOptions {
-  /** Any config field; `property`, `endpoint` and `experimentsEndpoint` have test defaults. */
-  config?: Partial<ITrackingConfig>;
-  consent?: 'granted' | 'denied';
-  /** The running-experiments answer: a list, a function (read on every load), or 'fail' (no endpoint). */
-  experiments?: IExperimentDefinition[] | (() => unknown[]) | 'fail';
-  page?: Partial<IPageInfo>;
-  vid?: string;
-  start?: number;
-  /** localStorage contents before the tracker starts (applied last). */
-  seed?: Record<string, string>;
-}
-
-export const createMemoryTracker = (options: IMemoryTrackerOptions = {}): IMemoryTracker => {
-  let clock = options.start ?? Date.UTC(2026, 8, 29, 10, 0, 0);
-  let offline = false;
-  const timers = new Map<number, { at: number; fn: () => void }>();
-  let nextTimer = 1;
-  const local = memoryStorage();
-  const session = memoryStorage();
-  const config = resolveConfig({
-    property: 'test',
-    endpoint: '/collect',
-    experimentsEndpoint: '/experiments',
-    ...options.config,
-  });
-  const keys = storageKeys(config.storagePrefix);
-  if (options.consent) {
-    local.set(keys.consent, options.consent);
-    local.set(keys.consentVersion, String(config.consentVersion));
-  }
-  if (options.vid) local.set(keys.vid, options.vid);
-  Object.entries(options.seed ?? {}).forEach(([k, v]) => local.set(k, v));
-  const page: IPageInfo = {
-    origin: 'https://example.com',
-    path: '/',
-    search: '',
-    title: 'Example',
-    referrer: '',
-    lang: 'en-US',
-    viewport: [1440, 900],
-    device: 'desktop',
-    ...options.page,
-  };
-  const sent: IMemoryTracker['sent'] = [];
-  const tracker = new Tracker(config, {
-    local,
-    session,
-    now: () => clock,
-    setTimer: (fn, ms) => {
-      const id = nextTimer++;
-      timers.set(id, { at: clock + ms, fn });
-      return id;
-    },
-    clearTimer: (h) => void timers.delete(h as number),
-    page: () => page,
-    transport: {
-      send: async (body, mode) => {
-        if (offline) return false;
-        sent.push({ batch: JSON.parse(body) as IBatch, mode });
-        return true;
-      },
-    },
-    fetchJson: async () => {
-      if (!options.experiments || options.experiments === 'fail') throw new Error('no experiments endpoint');
-      return { experiments: typeof options.experiments === 'function' ? options.experiments() : options.experiments };
-    },
-  });
-  const advance = async (ms: number) => {
-    const until = clock + ms;
-    for (;;) {
-      const due = Array.from(timers.entries()).filter(([, t]) => t.at <= until).sort((a, b) => a[1].at - b[1].at)[0];
-      if (!due) break;
-      timers.delete(due[0]);
-      clock = Math.max(clock, due[1].at);
-      due[1].fn();
-      await Promise.resolve();
-    }
-    clock = until;
-    await new Promise((r) => setTimeout(r, 0));
-  };
-  return { tracker, sent, local, session, keys, page, advance, now: () => clock, setOffline: (o) => (offline = o) };
-};

package/src/tracking/ui/ExperimentCard.stories.tsx

@@ -1,296 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fireEvent, fn, waitFor, within } from 'storybook/test';
-import {
-  CONCLUDED,
-  DRAFT,
-  EXPERIMENT_KEY,
-  NO_DATA_YET,
-  PAUSED,
-  RUNNING_FIVE,
-  RUNNING_TWO,
-  variant,
-} from '../../stories/tracking';
-import { StoryMeta } from '../../types';
-import { ExperimentCard } from './ExperimentCard';
-
-const ANALYTICS = 'https://example.com/analytics?dashboard=tracking&experiment=signup-cta';
-
-const meta = {
-  title: 'Tracking/Experiment Card',
-  component: ExperimentCard,
-  args: {
-    experimentKey: EXPERIMENT_KEY,
-    shown: 'a',
-    codeVariants: ['a', 'b', 'c', 'd', 'e'],
-    detailsUrl: ANALYTICS,
-    versionDetailsUrl: (v: string) => `${ANALYTICS}&variant=${v}`,
-    onShow: fn(),
-    onAccept: fn(async () => undefined),
-    onRemove: fn(async () => undefined),
-    onStart: fn(async () => undefined),
-    onPause: fn(async () => undefined),
-    onStop: fn(async () => undefined),
-    onClose: fn(),
-  },
-  render: (args) => (
-    <div style={{ width: '100%', maxWidth: 440 }}>
-      <ExperimentCard {...args} />
-    </div>
-  ),
-} as StoryMeta<typeof ExperimentCard>;
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-const card = (canvasElement: HTMLElement) => within(canvasElement);
-const rowsOf = (canvasElement: HTMLElement) =>
-  Array.from(canvasElement.querySelectorAll<HTMLElement>('[role="listitem"]'));
-const order = (canvasElement: HTMLElement) => rowsOf(canvasElement).map((r) => r.dataset.version);
-const buttonWith = (root: Element, text: string) =>
-  Array.from(root.querySelectorAll('button')).find((b) => b.textContent?.trim() === text);
-const row = (canvasElement: HTMLElement, key: string) =>
-  canvasElement.querySelector(`[data-version="${key}"]`) as HTMLElement;
-
-// ── draft ──────────────────────────────────────────────────────────────────────
-
-const draft: Story = {
-  args: { test: DRAFT },
-  play: async ({ canvasElement }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('Sign-up button copy')).toBeInTheDocument();
-    await expect(c.getByText('Draft')).toBeInTheDocument();
-    await expect(c.getByText(/Not started yet/)).toBeInTheDocument();
-    await expect(rowsOf(canvasElement)).toHaveLength(2);
-    await expect(c.getAllByText('Not started: no visitors yet')).toHaveLength(2);
-    // Remove is a bin icon at the far end of the row, labelled for assistive tech.
-    await expect(c.getByLabelText('Remove version Short copy')).toBeInTheDocument();
-    await expect(buttonWith(canvasElement, 'Remove')).toBeFalsy();
-    await expect(buttonWith(canvasElement, 'Start test')).toBeTruthy();
-    await expect(buttonWith(canvasElement, 'Pause')).toBeFalsy();
-  },
-};
-const DRAFT_TEXT =
-  'Renders the card of a draft test with two versions: the "Draft" tag, the "not started" verdict, both rows without numbers, each with "Show analytics", Accept and a bin icon (Remove) at the far end, and Start test as the only solid button.';
-export const Draft = variant(draft, DRAFT_TEXT, 'Dark');
-export const DraftLight = variant(draft, DRAFT_TEXT, 'Light');
-export const DraftPhone = variant(draft, DRAFT_TEXT, 'Phone');
-
-// ── running, two versions ────────────────────────────────────────────────────────
-
-const runningTwo: Story = {
-  args: { test: RUNNING_TWO },
-  play: async ({ canvasElement, args }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('Running')).toBeInTheDocument();
-    await expect(c.getByText(/91% chance it beats Current button/)).toBeInTheDocument();
-    // The likely winner comes first and is marked; the original keeps its tag.
-    await expect(order(canvasElement)).toEqual(['b', 'a']);
-    await expect(within(row(canvasElement, 'b')).getByText('Winner')).toBeInTheDocument();
-    await expect(within(row(canvasElement, 'a')).getByText('Original')).toBeInTheDocument();
-    await expect(row(canvasElement, 'b').dataset.highlight).toBe('winner');
-    await expect(c.getAllByText('Show analytics')).toHaveLength(2);
-    await expect(c.queryByText('Shown')).toBeNull();
-    // The shown version is marked by its colour and for assistive tech.
-    await expect(row(canvasElement, 'a').getAttribute('aria-current')).toBe('true');
-    await expect(
-      c.getByText(/1,228 visitors · 11.3% “Started a sign-up” · 91% chance to beat the original/)
-    ).toBeInTheDocument();
-    await expect(c.getByLabelText('Show analytics for Short copy')).toBeInTheDocument();
-    // The whole row of the other version shows it, by click and by keyboard.
-    const rowB = row(canvasElement, 'b').querySelector('[role="button"]') as HTMLElement;
-    await fireEvent.click(rowB);
-    await expect(args.onShow).toHaveBeenCalledWith('b');
-    await fireEvent.keyDown(rowB, { key: 'Enter' });
-    await expect(args.onShow).toHaveBeenCalledTimes(2);
-    await expect(row(canvasElement, 'a').querySelector('[role="button"]')).toBeNull();
-    await expect(buttonWith(canvasElement, 'Pause')).toBeTruthy();
-    await expect(buttonWith(canvasElement, 'Stop')).toBeTruthy();
-    await expect(buttonWith(canvasElement, 'Open in admin portal')).toBeTruthy();
-    await fireEvent.click(c.getByLabelText('Close the test card'));
-    await expect(args.onClose).toHaveBeenCalled();
-  },
-};
-const RUNNING_TWO_TEXT =
-  'Renders a running test with two versions, best first: "Short copy", the likely winner, tagged "Winner" and lit by a green glow and wash, above the "Original". Tags are soft pills. Each row shows visitors, conversion, chance to beat and a bar, "Show analytics", Accept and a bin icon; the shown version is the blue row. Clicking the other row (or Enter on it) shows it; ✕ closes the card.';
-export const RunningTwoVersions = variant(runningTwo, RUNNING_TWO_TEXT, 'Dark');
-export const RunningTwoVersionsLight = variant(runningTwo, RUNNING_TWO_TEXT, 'Light');
-export const RunningTwoVersionsPhone = variant(runningTwo, RUNNING_TWO_TEXT, 'Phone');
-
-// ── running, five versions ───────────────────────────────────────────────────────
-
-const runningFive: Story = {
-  args: { test: RUNNING_FIVE },
-  play: async ({ canvasElement }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('Pricing page headline')).toBeInTheDocument();
-    await expect(c.getByText('5 versions · goal: “Started a sign-up”')).toBeInTheDocument();
-    // Best conversion first; the leader is tagged while it is too early for a winner.
-    await expect(order(canvasElement)).toEqual(['b', 'd', 'a', 'c', 'e']);
-    await expect(within(row(canvasElement, 'b')).getByText('Leading')).toBeInTheDocument();
-    await expect(row(canvasElement, 'b').dataset.highlight).toBe('leading');
-    // A long title stays on one line (an ellipsis, the full name in its tooltip).
-    await expect(c.getAllByText('Pricing page headline').length).toBeGreaterThan(0);
-    // Three and a half rows are visible; the rest scroll inside the card.
-    const list = canvasElement.querySelector('.reqraft-experiment-versions') as HTMLElement;
-    await waitFor(() => expect(list.scrollHeight).toBeGreaterThan(list.clientHeight + 10));
-  },
-};
-const RUNNING_FIVE_TEXT =
-  'Renders a running test with five versions sorted best first, the best one tagged "Leading" with a softer glow than a winner\'s: three and a half rows are visible and the list scrolls inside the card for the rest.';
-export const RunningFiveVersions = variant(runningFive, RUNNING_FIVE_TEXT, 'Dark');
-export const RunningFiveVersionsLight = variant(runningFive, RUNNING_FIVE_TEXT, 'Light');
-export const RunningFiveVersionsPhone = variant(runningFive, RUNNING_FIVE_TEXT, 'Phone');
-
-// ── paused ─────────────────────────────────────────────────────────────────────
-
-const paused: Story = {
-  args: { test: PAUSED, actorLabels: { admin: 'in the admin portal' } },
-  play: async ({ canvasElement }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('Paused · phase 2')).toBeInTheDocument();
-    await expect(
-      c.getByText('Counting since 20 Sept (phase 2): “Emoji” was removed in the admin portal.')
-    ).toBeInTheDocument();
-    await expect(buttonWith(canvasElement, 'Resume')).toBeTruthy();
-    await expect(buttonWith(canvasElement, 'Stop')).toBeTruthy();
-    await expect(buttonWith(canvasElement, 'Pause')).toBeFalsy();
-  },
-};
-const PAUSED_TEXT =
-  'Renders a paused test in its second phase: the "Paused · phase 2" tag, a note saying since when it counts and which version was removed, the leading version first, and Resume (solid) and Stop in the footer.';
-export const Paused = variant(paused, PAUSED_TEXT, 'Dark');
-export const PausedLight = variant(paused, PAUSED_TEXT, 'Light');
-export const PausedPhone = variant(paused, PAUSED_TEXT, 'Phone');
-
-// ── concluded ──────────────────────────────────────────────────────────────────
-
-const concluded: Story = {
-  args: { test: CONCLUDED, shown: 'b' },
-  play: async ({ canvasElement }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('Ended')).toBeInTheDocument();
-    await expect(order(canvasElement)[0]).toBe('b');
-    await expect(within(row(canvasElement, 'b')).getByText('Winner')).toBeInTheDocument();
-    // Each version keeps its analytics link after the test ended.
-    await expect(c.getByLabelText('Show analytics for Short copy')).toBeInTheDocument();
-    await expect(c.getByLabelText('Show analytics for Current button')).toBeInTheDocument();
-    await expect(buttonWith(canvasElement, 'Start test')).toBeFalsy();
-    await expect(buttonWith(canvasElement, 'Stop')).toBeFalsy();
-    Array.from(canvasElement.querySelectorAll('button'))
-      .filter((b) => b.textContent?.includes('Accept'))
-      .forEach((b) => expect(b).toBeDisabled());
-  },
-};
-const CONCLUDED_TEXT =
-  'Renders an ended test whose winner (Short copy) is live: the "Ended" tag, the final verdict, the winner first with a "Winner" tag, the winner\'s glow and the blue shown colour, "Show analytics" on every version, and no lifecycle buttons; Accept and Remove are disabled.';
-export const Concluded = variant(concluded, CONCLUDED_TEXT, 'Dark');
-export const ConcludedLight = variant(concluded, CONCLUDED_TEXT, 'Light');
-export const ConcludedPhone = variant(concluded, CONCLUDED_TEXT, 'Phone');
-
-// ── no data yet ────────────────────────────────────────────────────────────────
-
-const noData: Story = {
-  args: { test: NO_DATA_YET },
-  play: async ({ canvasElement }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('Too early to tell.')).toBeInTheDocument();
-    await expect(c.getAllByText('No visitors yet')).toHaveLength(2);
-    await expect(c.queryByText('Leading')).toBeNull();
-    await expect(canvasElement.querySelector('[role="progressbar"]')).toBeNull();
-  },
-};
-const NO_DATA_TEXT =
-  'Renders a running test nobody has seen yet: "Too early to tell", "No visitors yet" on each version instead of numbers and bars, and no leader.';
-export const NoDataYet = variant(noData, NO_DATA_TEXT, 'Dark');
-export const NoDataYetLight = variant(noData, NO_DATA_TEXT, 'Light');
-export const NoDataYetPhone = variant(noData, NO_DATA_TEXT, 'Phone');
-
-// ── not set up yet ───────────────────────────────────────────────────────────────
-
-const notSetUp: Story = {
-  args: { test: undefined, codeVariants: ['a', 'b'], name: 'signup-cta' },
-  play: async ({ canvasElement }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('Not set up')).toBeInTheDocument();
-    await expect(
-      c.getByText(/in the page's code but isn't set up yet: ask the Designer to set it up/)
-    ).toBeInTheDocument();
-    await expect(c.getByText('Version A')).toBeInTheDocument();
-    await expect(
-      c.getByText('Start, Accept and Remove appear once the test is set up.')
-    ).toBeInTheDocument();
-    await expect(
-      Array.from(canvasElement.querySelectorAll('button')).some((b) =>
-        b.textContent?.includes('Accept')
-      )
-    ).toBe(false);
-    await expect(c.queryByLabelText(/Show analytics/)).toBeNull();
-    await expect(buttonWith(canvasElement, 'Open in admin portal')).toBeFalsy();
-  },
-};
-const NOT_SET_UP_TEXT =
-  'Renders a test that is in the page\'s code but not registered in the analytics service yet: the "Not set up" tag, the words "ask the Designer to set it up", its versions from the code (switchable, without numbers), and no Accept, Remove, analytics links or lifecycle buttons.';
-export const NotSetUp = variant(notSetUp, NOT_SET_UP_TEXT, 'Dark');
-export const NotSetUpLight = variant(notSetUp, NOT_SET_UP_TEXT, 'Light');
-export const NotSetUpPhone = variant(notSetUp, NOT_SET_UP_TEXT, 'Phone');
-
-// ── the service cannot be reached ────────────────────────────────────────────────
-
-const unreachable: Story = {
-  args: { test: undefined, codeVariants: ['a', 'b'], name: 'signup-cta', loadError: 'HTTP 502' },
-  play: async ({ canvasElement }) => {
-    const c = card(canvasElement);
-    await expect(await c.findByText('No connection')).toBeInTheDocument();
-    await expect(c.getByText(/Can't reach the analytics service right now/)).toBeInTheDocument();
-    await expect(
-      c.getByText('Start, Accept and Remove come back once the analytics service answers.')
-    ).toBeInTheDocument();
-  },
-};
-const UNREACHABLE_TEXT =
-  'Renders the card when the analytics service cannot be reached: the "No connection" tag and an amber message saying so; the versions from the code can still be switched.';
-export const ServiceUnreachable = variant(unreachable, UNREACHABLE_TEXT, 'Dark');
-export const ServiceUnreachableLight = variant(unreachable, UNREACHABLE_TEXT, 'Light');
-export const ServiceUnreachablePhone = variant(unreachable, UNREACHABLE_TEXT, 'Phone');
-
-// ── the confirm step on Remove ───────────────────────────────────────────────────
-
-const removeConfirm: Story = {
-  args: { test: RUNNING_FIVE },
-  play: async ({ canvasElement, args }) => {
-    await card(canvasElement).findByText('Pricing page headline');
-    await fireEvent.click(card(canvasElement).getByLabelText('Remove version Customer quote'));
-    const body = within(canvasElement.ownerDocument.body);
-    await expect(
-      await body.findByText('Remove “Customer quote” from the test?')
-    ).toBeInTheDocument();
-    await expect(body.getByText(/numbers start from zero/)).toBeInTheDocument();
-    // Nothing happens until it is confirmed.
-    await expect(args.onRemove).not.toHaveBeenCalled();
-  },
-};
-const REMOVE_TEXT =
-  'Renders a running five-version test after the bin icon was clicked on "Customer quote": the confirm step asks first and says the numbers restart; nothing is removed until it is confirmed.';
-export const RemoveConfirmStep = variant(removeConfirm, REMOVE_TEXT, 'Dark');
-export const RemoveConfirmStepLight = variant(removeConfirm, REMOVE_TEXT, 'Light');
-export const RemoveConfirmStepPhone = variant(removeConfirm, REMOVE_TEXT, 'Phone');
-
-// ── the help ─────────────────────────────────────────────────────────────────────
-
-const help: Story = {
-  args: { test: RUNNING_TWO },
-  play: async ({ canvasElement }) => {
-    await card(canvasElement).findByText('Sign-up button copy');
-    await fireEvent.click(card(canvasElement).getByLabelText('How A/B tests work'));
-    const body = within(canvasElement.ownerDocument.body);
-    await expect(await body.findByText('The buttons')).toBeInTheDocument();
-    await expect(body.getByText('When you can trust the result')).toBeInTheDocument();
-    await expect(body.getByText(/at least 200 visitors and 7 days/)).toBeInTheDocument();
-    await expect(body.getByText('Not set up yet?')).toBeInTheDocument();
-  },
-};
-const HELP_TEXT =
-  'Renders the card with its "?" help open: a dialog explaining, in plain words, what the test is, what every button does, how visitors are split and counted, how to read the verdict and the chance to beat, when a result can be trusted, a test that is not set up yet, and where the full analytics are.';
-export const Help = variant(help, HELP_TEXT, 'Dark');
-export const HelpLight = variant(help, HELP_TEXT, 'Light');
-export const HelpPhone = variant(help, HELP_TEXT, 'Phone');