@delmaredigital/payload-experiments 0.1.0-rc.7 → 0.2.0-rc.2

package/dist/admin/surface/SurfaceShell.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import './surface.css';
+export declare function SurfaceShell({ adminRoute, children }: {
+    adminRoute: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/admin/surface/SurfaceShell.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { SURFACE_COPY } from '../copy/surface.js';
+import './surface.css';
+export function SurfaceShell({ adminRoute, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-tests-surface",
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: "xp-tests-shell-header",
+                children: [
+                    /*#__PURE__*/ _jsx(Link, {
+                        href: formatAdminURL({
+                            adminRoute,
+                            path: '/experiments'
+                        }),
+                        children: SURFACE_COPY.title
+                    }),
+                    /*#__PURE__*/ _jsx(Link, {
+                        href: formatAdminURL({
+                            adminRoute
+                        }),
+                        children: SURFACE_COPY.backToAdmin
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("main", {
+                className: "xp-tests-main",
+                children: children
+            })
+        ]
+    });
+}

package/dist/admin/surface/TestsHome.d.ts

@@ -0,0 +1,4 @@
+export declare function TestsHome({ adminRoute, apiRoute }: {
+    adminRoute: string;
+    apiRoute: string;
+}): import("react").JSX.Element;

package/dist/admin/surface/TestsHome.js

@@ -0,0 +1,212 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Link, Pill } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { createApi } from '../api.js';
+import { SURFACE_COPY } from '../copy/surface.js';
+import { groupTests, homeCard } from './home.model.js';
+export function TestsHome({ adminRoute, apiRoute }) {
+    const api = useMemo(()=>createApi(apiRoute), [
+        apiRoute
+    ]);
+    const [state, setState] = useState({
+        loading: true
+    });
+    const [search, setSearch] = useState('');
+    const [attempt, setAttempt] = useState(0);
+    useEffect(()=>{
+        let active = true;
+        const controller = new AbortController();
+        setState({
+            loading: true
+        });
+        async function load() {
+            try {
+                const response = await fetch(`${apiRoute.replace(/\/$/, '')}/xp-experiments?depth=0&sort=-updatedAt&limit=200`, {
+                    credentials: 'include',
+                    signal: controller.signal
+                });
+                if (!response.ok) throw new Error('list');
+                const { docs, totalDocs } = await response.json();
+                if (!active) return;
+                const summary = await api.summary(docs.map((doc)=>doc.id));
+                if (active) setState({
+                    loading: false,
+                    error: false,
+                    tests: docs,
+                    limited: totalDocs > docs.length,
+                    summaries: summary.ok ? summary.data ?? {} : {},
+                    summaryError: !summary.ok
+                });
+            } catch  {
+                if (active) setState({
+                    loading: false,
+                    error: true
+                });
+            }
+        }
+        void load();
+        return ()=>{
+            active = false;
+            controller.abort();
+        };
+    }, [
+        api,
+        apiRoute,
+        attempt
+    ]);
+    const retry = /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        onClick: ()=>setAttempt((value)=>value + 1),
+        children: SURFACE_COPY.retry
+    });
+    const newTest = /*#__PURE__*/ _jsx(Link, {
+        className: "xp-tests-primary",
+        href: formatAdminURL({
+            adminRoute,
+            path: '/experiments/new'
+        }),
+        children: SURFACE_COPY.newTest
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-tests-toolbar",
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        children: SURFACE_COPY.title
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        children: [
+                            SURFACE_COPY.search,
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "search",
+                                value: search,
+                                onChange: (event)=>setSearch(event.target.value)
+                            })
+                        ]
+                    }),
+                    newTest,
+                    /*#__PURE__*/ _jsx(Link, {
+                        href: formatAdminURL({
+                            adminRoute,
+                            path: '/collections/xp-metrics'
+                        }),
+                        children: SURFACE_COPY.goals
+                    })
+                ]
+            }),
+            state.loading ? /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                children: SURFACE_COPY.loading
+            }) : state.error ? /*#__PURE__*/ _jsxs("div", {
+                role: "alert",
+                children: [
+                    SURFACE_COPY.loadError,
+                    " ",
+                    retry
+                ]
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    state.limited ? /*#__PURE__*/ _jsx("p", {
+                        children: SURFACE_COPY.limitedList
+                    }) : null,
+                    state.summaryError ? /*#__PURE__*/ _jsxs("div", {
+                        role: "alert",
+                        children: [
+                            SURFACE_COPY.summaryError,
+                            " ",
+                            retry
+                        ]
+                    }) : null,
+                    state.tests.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                children: SURFACE_COPY.empty
+                            }),
+                            newTest
+                        ]
+                    }) : /*#__PURE__*/ _jsx(TestGroups, {
+                        tests: state.tests,
+                        summaries: state.summaries,
+                        adminRoute: adminRoute,
+                        search: search
+                    })
+                ]
+            })
+        ]
+    });
+}
+function TestGroups({ tests, summaries, adminRoute, search }) {
+    const groups = groupTests(tests, summaries, search);
+    if (!groups.some((group)=>group.tests.length)) return /*#__PURE__*/ _jsx("p", {
+        children: SURFACE_COPY.noMatches
+    });
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: groups.map((group, index)=>{
+            if (!group.tests.length) return null;
+            const cards = /*#__PURE__*/ _jsx("div", {
+                className: "xp-tests-cards",
+                children: group.tests.map((test)=>{
+                    const card = homeCard(test, summaries[test.id], adminRoute);
+                    return /*#__PURE__*/ _jsxs("article", {
+                        className: "xp-tests-card",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "xp-tests-card-heading",
+                                children: [
+                                    /*#__PURE__*/ _jsx("h3", {
+                                        children: test.name
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: card.kind
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        title: card.pill.tooltip,
+                                        children: /*#__PURE__*/ _jsx(Pill, {
+                                            children: card.pill.label
+                                        })
+                                    }),
+                                    test.status === 'running' && card.health ? /*#__PURE__*/ _jsx("span", {
+                                        role: "img",
+                                        "aria-label": SURFACE_COPY.health[card.health],
+                                        className: `xp-tests-health xp-tests-health--${card.health}`
+                                    }) : null
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                children: card.line
+                            }),
+                            card.headline ? /*#__PURE__*/ _jsx("p", {
+                                children: card.headline
+                            }) : null,
+                            /*#__PURE__*/ _jsx(Link, {
+                                href: card.href,
+                                children: card.action
+                            })
+                        ]
+                    }, test.id);
+                })
+            });
+            return index === 5 ? /*#__PURE__*/ _jsxs("details", {
+                className: "xp-tests-group",
+                children: [
+                    /*#__PURE__*/ _jsx("summary", {
+                        children: group.label
+                    }),
+                    cards
+                ]
+            }, group.label) : /*#__PURE__*/ _jsxs("section", {
+                className: "xp-tests-group",
+                "aria-label": group.label,
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        children: group.label
+                    }),
+                    cards
+                ]
+            }, group.label);
+        })
+    });
+}

package/dist/admin/surface/TestsSurface.d.ts

@@ -0,0 +1,2 @@
+import type { TestsSurfaceProps } from '../../types/surface.js';
+export declare function TestsSurface(props: TestsSurfaceProps): import("react").JSX.Element;

package/dist/admin/surface/TestsSurface.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewTest } from './newTest/NewTest.js';
+import { TestPage } from './test/TestPage.js';
+import { ResultsRoute } from './ResultsRoute.js';
+import { SurfaceShell } from './SurfaceShell.js';
+import { TestsHome } from './TestsHome.js';
+export function TestsSurface(props) {
+    const surface = {
+        adminRoute: props.adminRoute,
+        apiRoute: props.apiRoute,
+        canManage: props.canManage,
+        canReadResults: props.canReadResults,
+        isAdmin: props.isAdmin,
+        flagPoints: props.flagPoints,
+        attributeKeys: props.attributeKeys,
+        metricSources: props.metricSources,
+        descriptions: props.admin?.descriptions
+    };
+    return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: props.adminRoute,
+        children: props.route === 'home' ? /*#__PURE__*/ _jsx(TestsHome, {
+            adminRoute: props.adminRoute,
+            apiRoute: props.apiRoute
+        }) : props.route === 'new' ? /*#__PURE__*/ _jsx(NewTest, {
+            surface: surface,
+            pages: props.pages
+        }) : props.id === undefined ? null : props.route === 'test' ? /*#__PURE__*/ _jsx(TestPage, {
+            id: props.id,
+            surface: surface
+        }, props.id) : /*#__PURE__*/ _jsx(ResultsRoute, {
+            id: props.id,
+            surface: surface
+        }, props.id)
+    });
+}

package/dist/admin/surface/contracts.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentType } from 'react';
+import type { SerializedAttributeKeys, SerializedFlagPoint, SerializedMetricSource } from '../../types/admin.js';
+import type { useTestDocument } from './useTestDocument.js';
+/** Sections of the test page, in readiness order (surface spec §6.2, §8). */
+export type SectionId = 'what' | 'versions' | 'win' | 'who' | 'length' | 'advanced';
+export declare const SECTION_ORDER: readonly SectionId[];
+/** The data layer's return value; every section takes it as `test`. */
+export type TestDocApi = ReturnType<typeof useTestDocument>;
+/** Serialisable props the server root view passes to the surface (ADM-20). */
+export interface SurfaceProps {
+    adminRoute: string;
+    apiRoute: string;
+    canManage: boolean;
+    canReadResults: boolean;
+    isAdmin: boolean;
+    flagPoints: SerializedFlagPoint[];
+    attributeKeys: SerializedAttributeKeys;
+    metricSources: SerializedMetricSource[];
+    descriptions?: {
+        block?: string;
+        document?: string;
+        setting?: string;
+    };
+}
+export interface SectionProps {
+    test: TestDocApi;
+    surface: SurfaceProps;
+}
+/** Kind-specific pieces the generic test page composes (Setting kind: ADM-22). */
+export interface KindParts {
+    /** Section 1 body for this kind. */
+    Binding: ComponentType<SectionProps>;
+    /** The content cell of one version row in Section 2. */
+    VersionContent: ComponentType<SectionProps & {
+        armIndex: number;
+    }>;
+}
+/** Readiness pieces (ADM-23). */
+export interface ReadinessParts {
+    /** Sticky-header banner incl. Start / status sentence. */
+    Banner: ComponentType<SectionProps>;
+    /** "Saving…" / "Saved" / error indicator for the header. */
+    SaveStatus: ComponentType<{
+        test: TestDocApi;
+    }>;
+    /** Check-circle state per section, from preflight. */
+    sectionDone(test: TestDocApi): Record<SectionId, boolean>;
+}

package/dist/admin/surface/contracts.js

@@ -0,0 +1,8 @@
+export const SECTION_ORDER = [
+    'what',
+    'versions',
+    'win',
+    'who',
+    'length',
+    'advanced'
+];

package/dist/admin/surface/home.model.d.ts

@@ -0,0 +1,41 @@
+import type { DocId, ExperimentKind, Status } from '../../types/contracts.js';
+import type { SummaryResponse } from '../../types/endpoints.js';
+export interface HomeTest {
+    id: DocId;
+    name: string;
+    kind: ExperimentKind;
+    status: Status;
+    analysis?: {
+        plannedDurationDays?: number | null;
+    } | null;
+    arms?: Array<{
+        key: string;
+        label?: string;
+    }> | null;
+    decidedAt?: string | null;
+    decision?: {
+        winnerArm?: string | null;
+        holdoutReleasedAt?: string | null;
+    } | null;
+}
+type Summary = SummaryResponse[DocId] | undefined;
+export type Health = 'red' | 'amber' | 'green';
+export declare function healthDot(test: HomeTest, summary: Summary): Health | undefined;
+export declare function groupTests(tests: readonly HomeTest[], summaries: SummaryResponse, search?: string): {
+    label: "Draft" | "Running" | "Decided" | "Archived" | "Needs attention" | "Ready to start";
+    tests: HomeTest[];
+}[];
+export declare function homeCard(test: HomeTest, summary: Summary, adminRoute: string): {
+    kind: "Whole page" | "Page block" | "Setting";
+    pill: {
+        label: string;
+        tone: import("../status.model.js").PillTone;
+        tooltip: string;
+    };
+    line: string;
+    headline: string | undefined;
+    health: Health | undefined;
+    href: string;
+    action: "Continue setup" | "View results" | "Open";
+};
+export {};

package/dist/admin/surface/home.model.js

@@ -0,0 +1,59 @@
+import { formatAdminURL } from 'payload/shared';
+import { armLabel } from '../labels.js';
+import { statusPill } from '../status.model.js';
+import { decidedLine, runningLine, SURFACE_COPY } from '../copy/surface.js';
+export function healthDot(test, summary) {
+    const code = summary?.verdict?.code;
+    if (!code) return undefined;
+    if (code === 'data-problem' || code === 'guardrail-failing') return 'red';
+    if (code === 'unavailable' || code === 'collecting' && test.analysis?.plannedDurationDays != null && summary.days > test.analysis.plannedDurationDays) return 'amber';
+    return 'green';
+}
+export function groupTests(tests, summaries, search = '') {
+    const groups = SURFACE_COPY.groups.map((label)=>({
+            label,
+            tests: []
+        }));
+    const query = search.trim().toLocaleLowerCase('en-US');
+    for (const test of tests){
+        if (!test.name.toLocaleLowerCase('en-US').includes(query)) continue;
+        const summary = summaries[test.id];
+        const health = healthDot(test, summary);
+        const index = test.status === 'running' ? health === 'red' || health === 'amber' ? 0 : 1 : test.status === 'decided' ? 4 : test.status === 'archived' ? 5 : summary?.ready === true ? 2 : 3;
+        groups[index].tests.push(test);
+    }
+    return groups;
+}
+const number = (value)=>value != null && Number.isFinite(value) ? new Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 0
+    }).format(value) : '—';
+export function homeCard(test, summary, adminRoute) {
+    const results = [
+        'running',
+        'stopped',
+        'decided'
+    ].includes(test.status);
+    const href = formatAdminURL({
+        adminRoute,
+        path: `/experiments/${encodeURIComponent(test.id)}${results ? '/results' : ''}`
+    });
+    let line = summary?.ready ? SURFACE_COPY.ready : SURFACE_COPY.next;
+    if (test.status === 'running') line = runningLine(number(summary?.days), number(test.analysis?.plannedDurationDays), number(summary?.exposures));
+    if (test.status === 'decided') {
+        const date = test.decidedAt ? new Date(test.decidedAt) : undefined;
+        const winner = test.decision?.winnerArm;
+        line = decidedLine(date && Number.isFinite(date.valueOf()) ? date.toLocaleDateString('en-US', {
+            timeZone: 'UTC'
+        }) : '—', winner ? armLabel(winner, test.arms?.find((arm)=>arm.key === winner)?.label) : '—');
+    }
+    if (test.status === 'archived') line = statusPill(test).label;
+    return {
+        kind: SURFACE_COPY.kinds[test.kind],
+        pill: statusPill(test),
+        line,
+        headline: test.status === 'running' ? summary?.verdict?.headline : undefined,
+        health: healthDot(test, summary),
+        href,
+        action: results ? SURFACE_COPY.results : test.status === 'draft' || test.status === 'stopped' ? SURFACE_COPY.continue : SURFACE_COPY.open
+    };
+}

package/dist/admin/surface/newTest/NewTest.d.ts

@@ -0,0 +1,7 @@
+import type { TestsSurfaceProps } from '../../../types/surface.js';
+import type { SurfaceProps } from '../contracts.js';
+import './newTest.css';
+export declare function NewTest({ surface, pages }: {
+    surface: SurfaceProps;
+    pages?: TestsSurfaceProps['pages'];
+}): import("react").JSX.Element;