@embeddables/cli 0.1.0

package/dist/workbench/ExperimentsPanel.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+function collectVariantsFromConditions(conditions, experimentKey) {
+    if (!conditions)
+        return [];
+    const variants = [];
+    for (const cond of conditions) {
+        if (cond.key === experimentKey && Array.isArray(cond.values) && cond.values.length > 0) {
+            for (const value of cond.values) {
+                if (typeof value === 'string' && value !== '_no_value') {
+                    variants.push(value);
+                }
+            }
+        }
+    }
+    return variants;
+}
+function collectVariantsFromFlowJson(flowJson, experimentKey) {
+    const variants = [];
+    const pages = flowJson.pages ?? [];
+    // Check global components
+    const globalComponents = flowJson.components ?? [];
+    for (const comp of globalComponents) {
+        variants.push(...collectVariantsFromConditions(comp.conditions, experimentKey));
+    }
+    for (const page of pages) {
+        // Check page-level conditions
+        variants.push(...collectVariantsFromConditions(page.conditions, experimentKey));
+        // Check page components
+        const pageComponents = page.components ?? [];
+        console.log('pageComponents', pageComponents);
+        for (const comp of pageComponents) {
+            variants.push(...collectVariantsFromConditions(comp.conditions, experimentKey));
+        }
+    }
+    // Dedupe and sort alphabetically
+    return [...new Set(variants)].sort();
+}
+export function ExperimentsPanel({ embeddableId }) {
+    const [experiments, setExperiments] = useState([]);
+    const [error, setError] = useState(null);
+    const savvy = window.Savvy;
+    const refresh = useCallback(() => {
+        setError(null);
+        if (!savvy?.getFlowJson) {
+            setError('window.Savvy.getFlowJson is not available.');
+            return;
+        }
+        if (!savvy?.getUserData) {
+            setError('window.Savvy.getUserData is not available.');
+            return;
+        }
+        try {
+            const flowJson = savvy.getFlowJson(embeddableId);
+            if (!flowJson) {
+                setError('Could not retrieve flow JSON.');
+                return;
+            }
+            const connectedExperiments = flowJson.connected_experiments ?? [];
+            const userData = savvy.getUserData(embeddableId) ?? {};
+            const experimentInfos = connectedExperiments.map((exp) => {
+                const variants = collectVariantsFromFlowJson(flowJson, exp.experiment_key);
+                const currentVariant = userData[exp.experiment_key] ?? null;
+                return {
+                    experimentKey: exp.experiment_key,
+                    experimentId: exp.experiment_id,
+                    variants,
+                    currentVariant,
+                };
+            });
+            setExperiments(experimentInfos);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+        }
+    }, [embeddableId, savvy]);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            refresh();
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [refresh]);
+    const setVariant = async (experimentKey, variant) => {
+        if (!savvy?.getUserData || !savvy?.setUserData) {
+            setError('window.Savvy.getUserData/setUserData is not available.');
+            return;
+        }
+        try {
+            const userData = savvy.getUserData(embeddableId) ?? {};
+            await savvy.setUserData(embeddableId, {
+                ...userData,
+                [experimentKey]: variant,
+            });
+            refresh();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+        }
+    };
+    const resetAllToControl = async () => {
+        if (!savvy?.getUserData || !savvy?.setUserData) {
+            setError('window.Savvy.getUserData/setUserData is not available.');
+            return;
+        }
+        try {
+            const userData = savvy.getUserData(embeddableId) ?? {};
+            const updates = {};
+            for (const exp of experiments) {
+                if (exp.variants.length > 0) {
+                    // First alphabetically is the "control"
+                    updates[exp.experimentKey] = exp.variants[0];
+                }
+            }
+            await savvy.setUserData(embeddableId, {
+                ...userData,
+                ...updates,
+            });
+            refresh();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+        }
+    };
+    const shuffleAll = async () => {
+        if (!savvy?.getUserData || !savvy?.setUserData) {
+            setError('window.Savvy.getUserData/setUserData is not available.');
+            return;
+        }
+        try {
+            const userData = (await savvy.getUserData(embeddableId)) ?? {};
+            const updates = {};
+            for (const exp of experiments) {
+                if (exp.variants.length > 0) {
+                    const randomIndex = Math.floor(Math.random() * exp.variants.length);
+                    updates[exp.experimentKey] = exp.variants[randomIndex];
+                }
+            }
+            await savvy.setUserData(embeddableId, {
+                ...userData,
+                ...updates,
+            });
+            refresh();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+        }
+    };
+    const resetAllToNoValue = async () => {
+        if (!savvy?.getUserData || !savvy?.setUserData) {
+            setError('window.Savvy.getUserData/setUserData is not available.');
+            return;
+        }
+        try {
+            const userData = savvy.getUserData(embeddableId) ?? {};
+            const updates = {};
+            for (const exp of experiments) {
+                updates[exp.experimentKey] = undefined;
+            }
+            await savvy.setUserData(embeddableId, {
+                ...userData,
+                ...updates,
+            });
+            refresh();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+        }
+    };
+    return (_jsxs("div", { className: "mx-auto flex h-full w-full max-w-6xl flex-col", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold tracking-wide text-slate-100", children: "Experiments" }), _jsx("div", { className: "mt-0.5 text-[11px] text-slate-400", children: "View and switch experiment variants for this embeddable." })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-start gap-2 sm:justify-end", children: [_jsx("button", { type: "button", onClick: resetAllToNoValue, disabled: experiments.length === 0, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white disabled:cursor-not-allowed disabled:opacity-60", children: "Reset all to No Value" }), _jsx("button", { type: "button", onClick: resetAllToControl, disabled: experiments.length === 0, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white disabled:cursor-not-allowed disabled:opacity-60", children: "Reset all to Control" }), _jsx("button", { type: "button", onClick: shuffleAll, disabled: experiments.length === 0, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white disabled:cursor-not-allowed disabled:opacity-60", children: "Shuffle" })] })] }), error && (_jsx("div", { className: "mt-3 rounded-xl bg-rose-500/10 px-3 py-2 text-xs text-rose-200 ring-1 ring-inset ring-rose-500/20", children: error })), _jsxs("div", { className: "mt-4 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto", children: [experiments.length === 0 && !error && (_jsx("div", { className: "text-[11px] text-slate-400", children: "No experiments connected to this embeddable." })), experiments.map((exp) => (_jsxs("div", { className: "rounded-xl bg-white/5 p-3 ring-1 ring-inset ring-white/10", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("div", { className: "text-xs font-semibold text-slate-100", children: exp.experimentKey }), _jsx("div", { className: "text-[10px] text-slate-500", children: exp.experimentId })] }), exp.variants.length === 0 ? (_jsx("div", { className: "text-[11px] text-slate-400", children: "No variants found in conditions for this experiment." })) : (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { type: "button", onClick: () => setVariant(exp.experimentKey, undefined), className: `cursor-pointer rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${exp.currentVariant === null
+                                            ? 'bg-teal-500/20 text-teal-300 ring-1 ring-inset ring-teal-500/40'
+                                            : 'bg-slate-700 text-slate-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white'}`, children: "No Value" }), exp.variants.map((variant) => {
+                                        const isSelected = exp.currentVariant === variant;
+                                        return (_jsx("button", { type: "button", onClick: () => setVariant(exp.experimentKey, variant), className: `cursor-pointer rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${isSelected
+                                                ? 'bg-teal-500/20 text-teal-300 ring-1 ring-inset ring-teal-500/40'
+                                                : 'bg-slate-700 text-slate-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white'}`, children: variant }, variant));
+                                    })] }))] }, exp.experimentKey)))] })] }));
+}

package/dist/workbench/FieldEditorPanel.d.ts

@@ -0,0 +1,9 @@
+type FieldEditorPanelProps = {
+    embeddableId: string;
+    rawJson: string;
+    onUpdateUserData: (key: string, value: unknown) => void;
+    keyFilter: string;
+};
+export declare function FieldEditorPanel({ embeddableId, rawJson, onUpdateUserData, keyFilter, }: FieldEditorPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FieldEditorPanel.d.ts.map

package/dist/workbench/FieldEditorPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldEditorPanel.d.ts","sourceRoot":"","sources":["../../src/workbench/FieldEditorPanel.tsx"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAkND,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,2CA+7BvB"}