@delmaredigital/payload-experiments 0.0.0-stage → 0.1.0-rc.3

package/dist/admin/AllocationField.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldError, useField, useFormFields } from '@payloadcms/ui';
+import { EDITABLE_BY_STATUS, isEditable } from '../collections/experiments/editability.js';
+import { lockedReason } from './lockedNotice.model.js';
+import { allocationGroups, allocationLayer, allocationSentence } from './allocation.model.js';
+import { WHO_COPY } from './copy/who.js';
+import { useLayerUsage } from './useLayerUsage.js';
+export function AllocationField({ path, field, readOnly }) {
+    const { value, setValue } = useField({
+        path
+    });
+    const form = useFormFields(([fields])=>({
+            status: fields.status?.value ?? 'draft',
+            unitType: fields.unitType?.value ?? 'visitor',
+            arms: allocationGroups(fields),
+            layerId: fields.layer?.value,
+            layer: allocationLayer(fields.layer?.value) ?? allocationLayer({
+                name: fields['layer.name']?.value,
+                used: fields['layer.used']?.value,
+                free: fields['layer.free']?.value
+            })
+        }));
+    const locked = Boolean(readOnly || field.admin?.readOnly || !isEditable(form.status, 'allocation'));
+    const reason = lockedReason(form.status, 'allocation', EDITABLE_BY_STATUS);
+    const layerId = typeof form.layerId === 'object' && form.layerId !== null ? 'id' in form.layerId ? form.layerId.id : null : form.layerId;
+    const layer = useLayerUsage(typeof layerId === 'string' || typeof layerId === 'number' ? layerId : null);
+    const sentence = allocationSentence({
+        ...form,
+        allocation: value ?? NaN,
+        layer: layer ?? form.layer
+    });
+    // position: relative anchors Payload's absolutely positioned FieldError tooltip to this field.
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-allocation-field",
+        style: {
+            position: 'relative'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                htmlFor: path,
+                children: WHO_COPY.allocation
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                id: path,
+                name: path,
+                type: "number",
+                min: 1,
+                max: 100,
+                step: 1,
+                required: field.required,
+                value: value ?? '',
+                readOnly: locked,
+                "aria-describedby": `${path}-description`,
+                style: {
+                    display: 'block',
+                    color: 'var(--theme-text)',
+                    background: 'var(--theme-input-bg)',
+                    border: '1px solid var(--theme-elevation-200)',
+                    borderRadius: 'var(--style-radius-s)',
+                    padding: '0.5rem'
+                },
+                onChange: (event)=>{
+                    if (!locked) setValue(event.target.value === '' ? null : event.target.valueAsNumber);
+                }
+            }),
+            /*#__PURE__*/ _jsx(FieldError, {
+                path: path
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                id: `${path}-description`,
+                children: sentence
+            }),
+            reason && (form.status !== 'running' || !sentence) ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-locked-notice",
+                children: reason
+            }) : null
+        ]
+    });
+}

package/dist/admin/FlagPointSelect.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldClientProps } from 'payload';
+export declare function FlagPointSelect({ field, path, readOnly }: TextFieldClientProps): import("react").JSX.Element;

package/dist/admin/FlagPointSelect.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectInput, useField, useForm, useFormFields } from '@payloadcms/ui';
+import { EDITABLE_BY_STATUS, isEditable } from '../collections/experiments/editability.js';
+import { lockedReason } from './lockedNotice.model.js';
+import { ARMS_COPY } from './copy/arms.js';
+import { readArms } from './arms/arms.model.js';
+export function FlagPointSelect({ field, path, readOnly }) {
+    const { value, setValue } = useField({
+        path
+    });
+    const form = useForm();
+    const status = useFormFields(([fields])=>fields.status?.value ?? 'draft');
+    const rowKinds = useFormFields(([fields])=>readArms(fields).map((arm)=>arm.kind).join(','));
+    const points = field.admin?.custom?.flagPoints ?? [];
+    const editable = isEditable(status, 'flagPoint') && !readOnly && !form.disabled;
+    const reason = lockedReason(status, 'flagPoint', EDITABLE_BY_STATUS);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-flag-point",
+        children: [
+            /*#__PURE__*/ _jsx(SelectInput, {
+                path: path,
+                name: path,
+                label: ARMS_COPY.flagPoint,
+                options: points.map((point)=>({
+                        label: point.label,
+                        value: point.id
+                    })),
+                value: value ?? '',
+                readOnly: !editable,
+                onChange: (option)=>{
+                    if (!editable || Array.isArray(option)) return;
+                    const point = points.find((candidate)=>candidate.id === option?.value);
+                    if ((point?.id ?? '') === (value ?? '')) return;
+                    setValue(point?.id ?? '');
+                    rowKinds.split(',').forEach((kind, index)=>{
+                        if (kind === 'control' || kind === 'variant') form.dispatchFields({
+                            type: 'UPDATE',
+                            path: `arms.${index}.params`,
+                            value: kind === 'control' && point ? {
+                                ...point.effectiveDefaults
+                            } : {}
+                        });
+                    });
+                    form.setModified(true);
+                }
+            }),
+            reason ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-locked-notice",
+                children: reason
+            }) : null
+        ]
+    });
+}

package/dist/admin/LayerUsage.d.ts

@@ -0,0 +1,2 @@
+import type { UIFieldClientProps } from 'payload';
+export declare function LayerUsage(_props: UIFieldClientProps): import("react").JSX.Element | null;

package/dist/admin/LayerUsage.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDocumentInfo } from '@payloadcms/ui';
+import { useLayerExperiments } from './useLayerUsage.js';
+import { statusLabel } from './labels.js';
+import { HISTORY_COPY, layerRow, layerSummary } from './copy/history.js';
+export function LayerUsage(_props) {
+    const { id } = useDocumentInfo();
+    const usage = useLayerExperiments(id ?? null);
+    if (id == null || !usage) return null;
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": HISTORY_COPY.layers,
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                children: layerSummary(usage.used, usage.free)
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                children: usage.rows.map((row, index)=>/*#__PURE__*/ _jsx("li", {
+                        children: layerRow(row.name, statusLabel(row.status), row.slices)
+                    }, index))
+            })
+        ]
+    });
+}

package/dist/admin/LockedFieldNotice.d.ts

@@ -0,0 +1,2 @@
+import type { FieldDescriptionClientProps } from 'payload';
+export declare function LockedFieldNotice(props: FieldDescriptionClientProps): import("react").JSX.Element;

package/dist/admin/LockedFieldNotice.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FieldDescription, useDocumentInfo, useFormFields } from '@payloadcms/ui';
+import { EDITABLE_BY_STATUS } from '../collections/experiments/editability.js';
+import { lockedReason } from './lockedNotice.model.js';
+export function LockedFieldNotice(props) {
+    const status = useFormFields(([fields])=>fields.status?.value);
+    const { id } = useDocumentInfo();
+    const admin = props.field.admin;
+    const description = admin && 'description' in admin ? admin.description : undefined;
+    const customField = admin?.custom?.field;
+    const field = typeof customField === 'string' ? customField : props.path.split('.')[0];
+    const reason = id != null && status ? lockedReason(status, field, EDITABLE_BY_STATUS) : null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(FieldDescription, {
+                description: description,
+                path: props.path
+            }),
+            reason ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-locked-notice",
+                children: reason
+            }) : null
+        ]
+    });
+}

package/dist/admin/MetricSourceSelect.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldClientProps } from 'payload';
+export declare function MetricSourceSelect({ path, field, readOnly }: TextFieldClientProps): import("react").JSX.Element;

package/dist/admin/MetricSourceSelect.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectInput, useField } from '@payloadcms/ui';
+import { metricSourceHint, metricSourceOptions } from './metricSource.model.js';
+import { METRICS_COPY } from './copy/metrics.js';
+export function MetricSourceSelect({ path, field, readOnly }) {
+    const { value, setValue } = useField({
+        path
+    });
+    const sources = field.admin?.custom?.sources ?? [];
+    const hint = metricSourceHint(sources.find((source)=>source.id === value));
+    const locked = Boolean(readOnly || field.admin?.readOnly);
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx(SelectInput, {
+                path: path,
+                name: path,
+                label: METRICS_COPY.source,
+                required: field.required,
+                options: metricSourceOptions(sources),
+                value: value ?? '',
+                readOnly: locked,
+                onChange: (option)=>{
+                    if (!locked) setValue(option && !Array.isArray(option) ? option.value : null);
+                }
+            }),
+            hint ? /*#__PURE__*/ _jsx("p", {
+                children: hint
+            }) : null
+        ]
+    });
+}

package/dist/admin/PhaseHistory.d.ts

@@ -0,0 +1,2 @@
+import type { UIFieldClientProps } from 'payload';
+export declare function PhaseHistory(_props: UIFieldClientProps): import("react").JSX.Element | null;

package/dist/admin/PhaseHistory.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig, useDocumentInfo, useFormFields } from '@payloadcms/ui';
+import { useEffect, useState } from 'react';
+import { phaseHistory } from './phaseHistory.model.js';
+import { HISTORY_COPY } from './copy/history.js';
+export function PhaseHistory(_props) {
+    const { id, data } = useDocumentInfo();
+    const { config } = useConfig();
+    const api = config.routes.api;
+    const decidedBy = useFormFields(([fields])=>{
+        const decision = fields.decision?.value;
+        return fields['decision.decidedBy']?.value ?? (decision && typeof decision === 'object' && 'decidedBy' in decision ? decision.decidedBy : undefined);
+    }) ?? data?.decision?.decidedBy;
+    const [state, setState] = useState(null);
+    const key = `${api}:${id}`;
+    useEffect(()=>{
+        setState(null);
+        if (id == null) return;
+        const controller = new AbortController();
+        async function load() {
+            const docs = [];
+            let page = 1;
+            while(!controller.signal.aborted){
+                const query = new URLSearchParams({
+                    depth: '0',
+                    sort: 'phase,startedAt',
+                    limit: '100',
+                    page: String(page),
+                    'where[experiment][equals]': String(id)
+                });
+                const response = await fetch(`${api}/xp-phases?${query}`, {
+                    credentials: 'include',
+                    signal: controller.signal
+                });
+                if (!response.ok) {
+                    if (!controller.signal.aborted) setState(null);
+                    return;
+                }
+                const result = await response.json();
+                docs.push(...result.docs);
+                if (!result.hasNextPage) break;
+                page++;
+            }
+            if (!controller.signal.aborted) setState({
+                key,
+                docs
+            });
+        }
+        void load().catch(()=>{
+            if (!controller.signal.aborted) setState(null);
+        });
+        return ()=>controller.abort();
+    }, [
+        api,
+        id,
+        key
+    ]);
+    if (id == null || state?.key !== key) return null;
+    const history = phaseHistory(state.docs, {
+        decidedBy
+    });
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": HISTORY_COPY.rounds,
+        children: [
+            /*#__PURE__*/ _jsx("ul", {
+                children: history.rows.map((row)=>/*#__PURE__*/ _jsx("li", {
+                        children: row.text
+                    }, `${row.phase}-${row.phaseKind}`))
+            }),
+            history.decision ? /*#__PURE__*/ _jsx("p", {
+                children: history.decision
+            }) : null
+        ]
+    });
+}

package/dist/admin/PreviewLinks.d.ts

@@ -0,0 +1,11 @@
+import type { DocId } from '../types/contracts.js';
+import type { PreflightResult } from '../types/endpoints.js';
+export declare function PreviewLinks({ experimentId, placements, arms }: {
+    experimentId: DocId;
+    placements: PreflightResult['placements'];
+    arms: readonly {
+        key: string;
+        kind?: string;
+        label?: string;
+    }[];
+}): import("react").JSX.Element;

package/dist/admin/PreviewLinks.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Button } from '@payloadcms/ui';
+import { armLabel } from './labels.js';
+import { useApi } from './useApi.js';
+import { REVIEW_COPY as C } from './copy/review.js';
+import { API_MESSAGES } from './copy/common.js';
+export function PreviewLinks({ experimentId, placements, arms }) {
+    const api = useApi();
+    const inFlight = useRef(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    async function preview(url, arm) {
+        if (inFlight.current) return;
+        inFlight.current = true;
+        setBusy(true);
+        setError(null);
+        try {
+            const result = await api.previewToken(experimentId, arm);
+            if (!result.ok) {
+                setError(result.message);
+                return;
+            }
+            if (!result.data?.token) {
+                setError(API_MESSAGES.unreadable);
+                return;
+            }
+            const target = new URL(url, window.location.origin);
+            target.searchParams.set('xp_preview', result.data.token);
+            window.open(target.href, '_blank', 'noopener,noreferrer');
+        } catch  {
+            setError(API_MESSAGES.failed);
+        } finally{
+            inFlight.current = false;
+            setBusy(false);
+        }
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-preview-links",
+        children: [
+            placements.map((placement)=>/*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            children: placement.title
+                        }),
+                        placement.url ? arms.filter((arm)=>arm.kind !== 'holdout' && arm.key !== 'holdout').map((arm)=>/*#__PURE__*/ _jsxs(Button, {
+                                disabled: busy,
+                                onClick: ()=>{
+                                    void preview(placement.url, arm.key);
+                                },
+                                children: [
+                                    C.preview,
+                                    " ",
+                                    arm.label?.trim() || armLabel(arm.key)
+                                ]
+                            }, arm.key)) : /*#__PURE__*/ _jsx(Button, {
+                            disabled: true,
+                            children: C.noPreview
+                        })
+                    ]
+                }, `${placement.collection}/${placement.id}`)),
+            error ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: error
+            }) : null
+        ]
+    });
+}

package/dist/admin/StatusCell.d.ts

@@ -0,0 +1,3 @@
+import './styles.js';
+import type { DefaultCellComponentProps } from 'payload';
+export declare function StatusCell({ cellData, rowData }: DefaultCellComponentProps): import("react").JSX.Element;

package/dist/admin/StatusCell.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import './styles.js';
+import { Pill } from '@payloadcms/ui';
+import { statusPill } from './status.model.js';
+export function StatusCell({ cellData, rowData }) {
+    const pill = statusPill({
+        status: cellData,
+        arms: rowData.arms,
+        decision: rowData.decision
+    });
+    return /*#__PURE__*/ _jsx("span", {
+        title: pill.tooltip,
+        children: /*#__PURE__*/ _jsx(Pill, {
+            className: `xp-status-pill xp-status-pill--${pill.tone}`,
+            children: pill.label
+        })
+    });
+}

package/dist/admin/SummaryCell.d.ts

@@ -0,0 +1,2 @@
+import type { DefaultCellComponentProps } from 'payload';
+export declare function SummaryCell({ rowData }: DefaultCellComponentProps): import("react").JSX.Element;

package/dist/admin/SummaryCell.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useApi } from './useApi.js';
+import { verdictCodeLabel } from './labels.js';
+import { summaryLine } from './copy/results.js';
+import { formatCount, formatNumber } from './results/format.js';
+import { requestSummary } from './summaryBatcher.js';
+export function SummaryCell({ rowData }) {
+    const api = useApi();
+    const id = rowData.id;
+    const [state, setState] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        if (id !== undefined && id !== null) void requestSummary(api, id).then((entry)=>{
+            if (active) setState({
+                id,
+                entry
+            });
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        api,
+        id
+    ]);
+    const entry = state?.id === id ? state?.entry : null;
+    return /*#__PURE__*/ _jsx("span", {
+        children: entry ? summaryLine(formatCount(entry.exposures), formatNumber(entry.days), entry.verdict ? verdictCodeLabel(entry.verdict.code) : '—') : '—'
+    });
+}

package/dist/admin/actions/AddMetricDialog.d.ts

@@ -0,0 +1,6 @@
+import type { DocId } from '../../types/contracts.js';
+export declare function AddMetricDialog({ id, attachedMetrics, onClose }: {
+    id: DocId;
+    attachedMetrics: readonly DocId[];
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/admin/actions/AddMetricDialog.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button, useConfig } from '@payloadcms/ui';
+import { DialogFrame } from './ConfirmDialog.js';
+import { useApi } from '../useApi.js';
+import { reloadPage } from '../reload.js';
+import { REVIEW_COPY as C } from '../copy/review.js';
+import { ACTIONS_COPY } from '../copy/actions.js';
+import { API_MESSAGES, refusalMessage } from '../copy/common.js';
+export function AddMetricDialog({ id, attachedMetrics, onClose }) {
+    const api = useApi();
+    const { config } = useConfig();
+    const [metrics, setMetrics] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [metric, setMetric] = useState('');
+    const [role, setRole] = useState('secondary');
+    const [busy, setBusy] = useState(false);
+    const inFlight = useRef(false);
+    const [error, setError] = useState(null);
+    useEffect(()=>{
+        const controller = new AbortController();
+        async function load() {
+            try {
+                const response = await fetch(`${config.routes.api.replace(/\/$/, '')}/xp-metrics?depth=0&limit=100`, {
+                    credentials: 'include',
+                    signal: controller.signal
+                });
+                if (!response.ok) throw new Error(refusalMessage(undefined, response.status));
+                const data = await response.json();
+                if (!Array.isArray(data.docs)) throw new Error(API_MESSAGES.unreadable);
+                if (!controller.signal.aborted) setMetrics(data.docs);
+            } catch (cause) {
+                if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : API_MESSAGES.network);
+            } finally{
+                if (!controller.signal.aborted) setLoading(false);
+            }
+        }
+        void load();
+        return ()=>controller.abort();
+    }, [
+        config.routes.api
+    ]);
+    const attached = new Set(attachedMetrics.map(String));
+    const available = metrics.filter((item)=>!attached.has(String(item.id)));
+    const selected = available.find((item)=>String(item.id) === metric);
+    async function submit() {
+        if (inFlight.current || loading || !selected) return;
+        inFlight.current = true;
+        setBusy(true);
+        setError(null);
+        const body = {
+            metric: selected.id,
+            role
+        };
+        const result = await api.addMetric(id, body);
+        if (result.ok) {
+            reloadPage();
+            return;
+        }
+        setError(result.message);
+        inFlight.current = false;
+        setBusy(false);
+    }
+    return /*#__PURE__*/ _jsxs(DialogFrame, {
+        title: C.addMetric,
+        onClose: ()=>{
+            if (!inFlight.current) onClose();
+        },
+        children: [
+            loading ? /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                children: C.loadingMetrics
+            }) : null,
+            /*#__PURE__*/ _jsxs("label", {
+                children: [
+                    C.role,
+                    /*#__PURE__*/ _jsxs("select", {
+                        value: role,
+                        disabled: busy,
+                        onChange: (event)=>setRole(event.target.value),
+                        children: [
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "secondary",
+                                children: C.supporting
+                            }),
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "guardrail",
+                                children: C.guardrail
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("label", {
+                children: [
+                    C.metric,
+                    /*#__PURE__*/ _jsxs("select", {
+                        value: metric,
+                        disabled: busy || loading,
+                        onChange: (event)=>setMetric(event.target.value),
+                        children: [
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "",
+                                children: C.chooseMetric
+                            }),
+                            available.map((item)=>/*#__PURE__*/ _jsx("option", {
+                                    value: String(item.id),
+                                    children: item.name
+                                }, item.id))
+                        ]
+                    })
+                ]
+            }),
+            !loading && !error && !available.length ? /*#__PURE__*/ _jsx("p", {
+                children: C.noMetrics
+            }) : null,
+            error ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: error
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                disabled: busy || loading || !selected,
+                onClick: ()=>{
+                    void submit();
+                },
+                children: C.addMetric
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                disabled: busy,
+                onClick: ()=>{
+                    if (!inFlight.current) onClose();
+                },
+                children: ACTIONS_COPY.cancel
+            })
+        ]
+    });
+}

package/dist/admin/actions/AllocateDialog.d.ts

@@ -0,0 +1,6 @@
+import type { DocId } from '../../types/contracts.js';
+export declare function AllocateDialog({ id, allocation: current, onClose }: {
+    id: DocId;
+    allocation: number;
+    onClose: () => void;
+}): import("react").JSX.Element;