@webiny/app-website-builder 6.6.0-alpha.0 → 6.6.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-website-builder",
-	"version": "6.6.0-alpha.0",
+	"version": "6.6.0-alpha.2",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -16,38 +16,38 @@
 		"@emotion/css": "11.13.5",
 		"@emotion/react": "11.14.0",
 		"@emotion/styled": "11.14.1",
-		"@lexical/utils": "0.48.0",
+		"@lexical/utils": "0.49.0",
 		"@monaco-editor/react": "4.7.0",
 		"@types/react": "18.3.31",
-		"@webiny/admin-ui": "6.6.0-alpha.0",
-		"@webiny/app": "6.6.0-alpha.0",
-		"@webiny/app-aco": "6.6.0-alpha.0",
-		"@webiny/app-admin": "6.6.0-alpha.0",
-		"@webiny/app-headless-cms-common": "6.6.0-alpha.0",
-		"@webiny/app-utils": "6.6.0-alpha.0",
-		"@webiny/di": "1.0.2",
-		"@webiny/feature": "6.6.0-alpha.0",
-		"@webiny/form": "6.6.0-alpha.0",
-		"@webiny/icons": "6.6.0-alpha.0",
-		"@webiny/languages": "6.6.0-alpha.0",
-		"@webiny/lexical-converter": "6.6.0-alpha.0",
-		"@webiny/lexical-editor": "6.6.0-alpha.0",
-		"@webiny/lexical-nodes": "6.6.0-alpha.0",
-		"@webiny/lexical-theme": "6.6.0-alpha.0",
-		"@webiny/react-composition": "6.6.0-alpha.0",
-		"@webiny/react-properties": "6.6.0-alpha.0",
-		"@webiny/utils": "6.6.0-alpha.0",
-		"@webiny/validation": "6.6.0-alpha.0",
-		"@webiny/website-builder-sdk": "6.6.0-alpha.0",
+		"@webiny/admin-ui": "6.6.0-alpha.2",
+		"@webiny/app": "6.6.0-alpha.2",
+		"@webiny/app-aco": "6.6.0-alpha.2",
+		"@webiny/app-admin": "6.6.0-alpha.2",
+		"@webiny/app-headless-cms-common": "6.6.0-alpha.2",
+		"@webiny/app-utils": "6.6.0-alpha.2",
+		"@webiny/di": "1.1.0",
+		"@webiny/feature": "6.6.0-alpha.2",
+		"@webiny/form": "6.6.0-alpha.2",
+		"@webiny/icons": "6.6.0-alpha.2",
+		"@webiny/languages": "6.6.0-alpha.2",
+		"@webiny/lexical-converter": "6.6.0-alpha.2",
+		"@webiny/lexical-editor": "6.6.0-alpha.2",
+		"@webiny/lexical-nodes": "6.6.0-alpha.2",
+		"@webiny/lexical-theme": "6.6.0-alpha.2",
+		"@webiny/react-composition": "6.6.0-alpha.2",
+		"@webiny/react-properties": "6.6.0-alpha.2",
+		"@webiny/utils": "6.6.0-alpha.2",
+		"@webiny/validation": "6.6.0-alpha.2",
+		"@webiny/website-builder-sdk": "6.6.0-alpha.2",
 		"classnames": "2.5.1",
 		"deep-equal": "2.2.3",
 		"graphql": "16.14.2",
 		"is-hotkey": "0.2.0",
 		"lodash": "4.18.1",
-		"markdown-to-jsx": "9.9.0",
+		"markdown-to-jsx": "9.10.2",
 		"matcher": "6.0.0",
-		"mobx": "6.16.1",
-		"mobx-react-lite": "4.1.1",
+		"mobx": "7.0.3",
+		"mobx-react-lite": "5.0.3",
 		"pluralize": "8.0.0",
 		"radix-ui": "1.6.7",
 		"react": "18.3.1",
@@ -60,11 +60,11 @@
 	"devDependencies": {
 		"@types/deep-equal": "1.0.4",
 		"@types/is-hotkey": "0.1.10",
-		"@webiny/build-tools": "6.6.0-alpha.0",
-		"execa": "10.0.0",
+		"@webiny/build-tools": "6.6.0-alpha.2",
+		"execa": "10.0.1",
 		"rimraf": "6.1.3",
 		"typescript": "7.0.2",
-		"vitest": "4.1.10"
+		"vitest": "4.1.11"
 	},
 	"publishConfig": {
 		"access": "public"

package/presentation/components/LanguageCodeTag.js

@@ -1,15 +1,16 @@
 import react from "react";
 import { Tag } from "@webiny/admin-ui";
-import { Wcp } from "@webiny/app-admin";
+import { useFeatureFlags } from "@webiny/app-admin";
 const LanguageCodeTag = ({ code, className })=>{
-    if (!code) return null;
-    return /*#__PURE__*/ react.createElement(Wcp.CanUseMultiTenancy, null, /*#__PURE__*/ react.createElement("div", {
+    const featureFlags = useFeatureFlags();
+    if (!code || !featureFlags.isEnabled("multiTenancy")) return null;
+    return /*#__PURE__*/ react.createElement("div", {
         className: "flex justify-center items-center"
     }, /*#__PURE__*/ react.createElement(Tag, {
         variant: "neutral-muted",
         content: code,
         className: className
-    })));
+    }));
 };
 export { LanguageCodeTag };
 

package/presentation/components/LanguageCodeTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/components/LanguageCodeTag.js","sources":["../../../src/presentation/components/LanguageCodeTag.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tag } from \"@webiny/admin-ui\";\nimport { Wcp } from \"@webiny/app-admin\";\n\nexport interface LanguageCodeProps {\n    code: string | undefined;\n    className?: string;\n}\n\nexport const LanguageCodeTag = ({ code, className }: LanguageCodeProps) => {\n    if (!code) {\n        return null;\n    }\n\n    return (\n        <Wcp.CanUseMultiTenancy>\n            <div className={\"flex justify-center items-center\"}>\n                <Tag variant={\"neutral-muted\"} content={code} className={className} />\n            </div>\n        </Wcp.CanUseMultiTenancy>\n    );\n};\n"],"names":["LanguageCodeTag","code","className","Wcp","Tag"],"mappings":";;;AASO,MAAMA,kBAAkB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAqB;IAClE,IAAI,CAACD,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,IAAI,kBAAkB,sBACnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,KAAGA;QAAC,SAAS;QAAiB,SAASH;QAAM,WAAWC;;AAIzE"}
+{"version":3,"file":"presentation/components/LanguageCodeTag.js","sources":["../../../src/presentation/components/LanguageCodeTag.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tag } from \"@webiny/admin-ui\";\nimport { useFeatureFlags } from \"@webiny/app-admin\";\n\nexport interface LanguageCodeProps {\n    code: string | undefined;\n    className?: string;\n}\n\nexport const LanguageCodeTag = ({ code, className }: LanguageCodeProps) => {\n    const featureFlags = useFeatureFlags();\n\n    if (!code || !featureFlags.isEnabled(\"multiTenancy\")) {\n        return null;\n    }\n\n    return (\n        <div className={\"flex justify-center items-center\"}>\n            <Tag variant={\"neutral-muted\"} content={code} className={className} />\n        </div>\n    );\n};\n"],"names":["LanguageCodeTag","code","className","featureFlags","useFeatureFlags","Tag"],"mappings":";;;AASO,MAAMA,kBAAkB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAqB;IAClE,MAAMC,eAAeC;IAErB,IAAI,CAACH,QAAQ,CAACE,aAAa,SAAS,CAAC,iBACjC,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,KAAGA;QAAC,SAAS;QAAiB,SAASJ;QAAM,WAAWC;;AAGrE"}

package/presentation/experiments/ExperimentForm/ExperimentFormPresenter.d.ts

@@ -0,0 +1,30 @@
+import { type ExperimentFormInitial, type IExperimentFormPresenter, type IExperimentFormViewModel, type NewExperimentPayload } from "./abstractions/ExperimentFormPresenter.js";
+declare class ExperimentFormPresenterImpl implements IExperimentFormPresenter {
+    private _name;
+    private _key;
+    private _keyEdited;
+    private _buckets;
+    private _submitLabel;
+    private _allowStructureChange;
+    private _onSubmit;
+    constructor();
+    get vm(): IExperimentFormViewModel;
+    init(initial: ExperimentFormInitial | undefined, options: {
+        submitLabel: string;
+        allowStructureChange: boolean;
+        onSubmit: (payload: NewExperimentPayload) => void;
+    }): void;
+    setName(value: string): void;
+    setKey(value: string): void;
+    addVariant(): void;
+    removeVariant(index: number): void;
+    changeWeight(index: number, value: number): void;
+    changeName(index: number, value: string): void;
+    changeKey(index: number, value: string): void;
+    changeDescription(index: number, value: string): void;
+    submit(): void;
+}
+export declare const ExperimentFormPresenter: typeof ExperimentFormPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IExperimentFormPresenter>;
+};
+export {};

package/presentation/experiments/ExperimentForm/ExperimentFormPresenter.js

@@ -0,0 +1,202 @@
+import { computed, makeAutoObservable } from "mobx";
+import slugify from "slugify";
+import { ExperimentFormPresenter } from "./abstractions/ExperimentFormPresenter.js";
+const toKey = (value)=>slugify(value, {
+        lower: true,
+        strict: true
+    });
+const defaultBuckets = ()=>[
+        {
+            id: "control",
+            isControl: true,
+            name: "Control",
+            key: "control",
+            keyEdited: false,
+            description: "",
+            weight: 50
+        },
+        {
+            id: crypto.randomUUID(),
+            isControl: false,
+            name: "Variant B",
+            key: "variant-b",
+            keyEdited: false,
+            description: "",
+            weight: 50
+        }
+    ];
+const evenSplit = (buckets)=>{
+    const n = buckets.length;
+    const each = Math.floor(100 / n);
+    const next = buckets.map((b)=>({
+            ...b,
+            weight: each
+        }));
+    let used = each * n;
+    let i = 0;
+    while(used < 100){
+        next[i % n].weight += 1;
+        used++;
+        i++;
+    }
+    return next;
+};
+const rebalance = (buckets, index, rawValue)=>{
+    const value = Math.max(0, Math.min(100, Math.round(rawValue)));
+    const next = buckets.map((b)=>({
+            ...b
+        }));
+    next[index].weight = value;
+    const others = next.map((b, i)=>({
+            b,
+            i
+        })).filter((x)=>x.i !== index);
+    if (0 === others.length) {
+        next[index].weight = 100;
+        return next;
+    }
+    const remaining = 100 - value;
+    const sumOthers = others.reduce((sum, x)=>sum + x.b.weight, 0);
+    if (sumOthers <= 0) {
+        const each = Math.floor(remaining / others.length);
+        others.forEach((x)=>next[x.i].weight = each);
+        let used = each * others.length;
+        let k = 0;
+        while(used < remaining){
+            next[others[k % others.length].i].weight += 1;
+            used++;
+            k++;
+        }
+    } else {
+        let allocated = 0;
+        others.forEach((x)=>{
+            const w = Math.max(0, Math.round(x.b.weight / sumOthers * remaining));
+            next[x.i].weight = w;
+            allocated += w;
+        });
+        const drift = remaining - allocated;
+        if (0 !== drift) {
+            const largest = others.reduce((a, b)=>next[a.i].weight >= next[b.i].weight ? a : b);
+            next[largest.i].weight = Math.max(0, next[largest.i].weight + drift);
+        }
+    }
+    return next;
+};
+class ExperimentFormPresenterImpl {
+    constructor(){
+        this._name = "";
+        this._key = "";
+        this._keyEdited = false;
+        this._buckets = defaultBuckets();
+        this._submitLabel = "Create experiment";
+        this._allowStructureChange = true;
+        this._onSubmit = ()=>{};
+        makeAutoObservable(this, {
+            vm: computed
+        });
+    }
+    get vm() {
+        const total = this._buckets.reduce((sum, b)=>sum + b.weight, 0);
+        const variantCount = this._buckets.filter((b)=>!b.isControl).length;
+        const canSubmit = this._name.trim().length > 0 && this._key.trim().length > 0;
+        return {
+            name: this._name,
+            key: this._key,
+            buckets: this._buckets,
+            total,
+            variantCount,
+            canSubmit,
+            submitLabel: this._submitLabel,
+            allowStructureChange: this._allowStructureChange
+        };
+    }
+    init(initial, options) {
+        this._name = initial?.name ?? "";
+        this._key = initial?.key ?? "";
+        this._keyEdited = Boolean(initial?.key);
+        this._buckets = initial?.buckets ?? defaultBuckets();
+        this._submitLabel = options.submitLabel;
+        this._allowStructureChange = options.allowStructureChange;
+        this._onSubmit = options.onSubmit;
+    }
+    setName(value) {
+        this._name = value;
+        if (!this._keyEdited) this._key = toKey(value);
+    }
+    setKey(value) {
+        this._keyEdited = true;
+        this._key = value;
+    }
+    addVariant() {
+        const count = this._buckets.filter((b)=>!b.isControl).length;
+        const variantName = `Variant ${String.fromCharCode(66 + count)}`;
+        this._buckets = evenSplit([
+            ...this._buckets,
+            {
+                id: crypto.randomUUID(),
+                isControl: false,
+                weight: 0,
+                name: variantName,
+                key: toKey(variantName),
+                keyEdited: false,
+                description: ""
+            }
+        ]);
+    }
+    removeVariant(index) {
+        this._buckets = evenSplit(this._buckets.filter((_, i)=>i !== index));
+    }
+    changeWeight(index, value) {
+        this._buckets = rebalance(this._buckets, index, value);
+    }
+    changeName(index, value) {
+        this._buckets = this._buckets.map((b, i)=>i === index ? {
+                ...b,
+                name: value,
+                key: b.keyEdited ? b.key : toKey(value)
+            } : b);
+    }
+    changeKey(index, value) {
+        this._buckets = this._buckets.map((b, i)=>i === index ? {
+                ...b,
+                key: value,
+                keyEdited: true
+            } : b);
+    }
+    changeDescription(index, value) {
+        this._buckets = this._buckets.map((b, i)=>i === index ? {
+                ...b,
+                description: value
+            } : b);
+    }
+    submit() {
+        const canSubmit = this._name.trim().length > 0 && this._key.trim().length > 0;
+        if (!canSubmit) return;
+        const control = this._buckets.find((b)=>b.isControl);
+        const variants = this._buckets.filter((b)=>!b.isControl).map((b)=>({
+                id: b.id,
+                revisionId: b.revisionId,
+                name: b.name,
+                key: b.key,
+                description: b.description,
+                weight: b.weight
+            }));
+        this._onSubmit({
+            name: this._name.trim(),
+            key: this._key.trim(),
+            control: {
+                key: control.key,
+                description: control.description,
+                weight: control.weight
+            },
+            variants
+        });
+    }
+}
+const ExperimentFormPresenter_ExperimentFormPresenter = ExperimentFormPresenter.createImplementation({
+    implementation: ExperimentFormPresenterImpl,
+    dependencies: []
+});
+export { ExperimentFormPresenter_ExperimentFormPresenter as ExperimentFormPresenter };
+
+//# sourceMappingURL=ExperimentFormPresenter.js.map

package/presentation/experiments/ExperimentForm/ExperimentFormPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/ExperimentFormPresenter.js","sources":["../../../../src/presentation/experiments/ExperimentForm/ExperimentFormPresenter.ts"],"sourcesContent":["import { computed, makeAutoObservable } from \"mobx\";\nimport slugify from \"slugify\";\nimport {\n    ExperimentFormPresenter as Abstraction,\n    type ExperimentFormInitial,\n    type FormBucket,\n    type IExperimentFormPresenter,\n    type IExperimentFormViewModel,\n    type NewExperimentPayload\n} from \"./abstractions/ExperimentFormPresenter.js\";\n\nconst toKey = (value: string): string => slugify(value, { lower: true, strict: true });\n\nconst defaultBuckets = (): FormBucket[] => [\n    {\n        id: \"control\",\n        isControl: true,\n        name: \"Control\",\n        key: \"control\",\n        keyEdited: false,\n        description: \"\",\n        weight: 50\n    },\n    {\n        id: crypto.randomUUID(),\n        isControl: false,\n        name: \"Variant B\",\n        key: \"variant-b\",\n        keyEdited: false,\n        description: \"\",\n        weight: 50\n    }\n];\n\n/** Even split summing to 100, with any remainder distributed from the first bucket. */\nconst evenSplit = (buckets: FormBucket[]): FormBucket[] => {\n    const n = buckets.length;\n    const each = Math.floor(100 / n);\n    const next = buckets.map(b => ({ ...b, weight: each }));\n    let used = each * n;\n    let i = 0;\n    while (used < 100) {\n        next[i % n].weight += 1;\n        used++;\n        i++;\n    }\n    return next;\n};\n\n/** Set one bucket's weight and auto-balance the rest (proportionally) so the total stays 100. */\nconst rebalance = (buckets: FormBucket[], index: number, rawValue: number): FormBucket[] => {\n    const value = Math.max(0, Math.min(100, Math.round(rawValue)));\n    const next = buckets.map(b => ({ ...b }));\n    next[index].weight = value;\n\n    const others = next.map((b, i) => ({ b, i })).filter(x => x.i !== index);\n    if (others.length === 0) {\n        next[index].weight = 100;\n        return next;\n    }\n\n    const remaining = 100 - value;\n    const sumOthers = others.reduce((sum, x) => sum + x.b.weight, 0);\n\n    if (sumOthers <= 0) {\n        const each = Math.floor(remaining / others.length);\n        others.forEach(x => (next[x.i].weight = each));\n        let used = each * others.length;\n        let k = 0;\n        while (used < remaining) {\n            next[others[k % others.length].i].weight += 1;\n            used++;\n            k++;\n        }\n    } else {\n        let allocated = 0;\n        others.forEach(x => {\n            const w = Math.max(0, Math.round((x.b.weight / sumOthers) * remaining));\n            next[x.i].weight = w;\n            allocated += w;\n        });\n        const drift = remaining - allocated;\n        if (drift !== 0) {\n            const largest = others.reduce((a, b) => (next[a.i].weight >= next[b.i].weight ? a : b));\n            next[largest.i].weight = Math.max(0, next[largest.i].weight + drift);\n        }\n    }\n\n    return next;\n};\n\nclass ExperimentFormPresenterImpl implements IExperimentFormPresenter {\n    private _name = \"\";\n    private _key = \"\";\n    private _keyEdited = false;\n    private _buckets: FormBucket[] = defaultBuckets();\n    private _submitLabel = \"Create experiment\";\n    private _allowStructureChange = true;\n    private _onSubmit: (payload: NewExperimentPayload) => void = () => {\n        return;\n    };\n\n    public constructor() {\n        makeAutoObservable(this, { vm: computed });\n    }\n\n    public get vm(): IExperimentFormViewModel {\n        const total = this._buckets.reduce((sum, b) => sum + b.weight, 0);\n        const variantCount = this._buckets.filter(b => !b.isControl).length;\n        const canSubmit = this._name.trim().length > 0 && this._key.trim().length > 0;\n\n        return {\n            name: this._name,\n            key: this._key,\n            buckets: this._buckets,\n            total,\n            variantCount,\n            canSubmit,\n            submitLabel: this._submitLabel,\n            allowStructureChange: this._allowStructureChange\n        };\n    }\n\n    public init(\n        initial: ExperimentFormInitial | undefined,\n        options: {\n            submitLabel: string;\n            allowStructureChange: boolean;\n            onSubmit: (payload: NewExperimentPayload) => void;\n        }\n    ): void {\n        this._name = initial?.name ?? \"\";\n        this._key = initial?.key ?? \"\";\n        this._keyEdited = Boolean(initial?.key);\n        this._buckets = initial?.buckets ?? defaultBuckets();\n        this._submitLabel = options.submitLabel;\n        this._allowStructureChange = options.allowStructureChange;\n        this._onSubmit = options.onSubmit;\n    }\n\n    public setName(value: string): void {\n        this._name = value;\n        if (!this._keyEdited) {\n            this._key = toKey(value);\n        }\n    }\n\n    public setKey(value: string): void {\n        this._keyEdited = true;\n        this._key = value;\n    }\n\n    public addVariant(): void {\n        const count = this._buckets.filter(b => !b.isControl).length;\n        const variantName = `Variant ${String.fromCharCode(66 + count)}`;\n        this._buckets = evenSplit([\n            ...this._buckets,\n            {\n                id: crypto.randomUUID(),\n                isControl: false,\n                weight: 0,\n                name: variantName,\n                key: toKey(variantName),\n                keyEdited: false,\n                description: \"\"\n            }\n        ]);\n    }\n\n    public removeVariant(index: number): void {\n        this._buckets = evenSplit(this._buckets.filter((_, i) => i !== index));\n    }\n\n    public changeWeight(index: number, value: number): void {\n        this._buckets = rebalance(this._buckets, index, value);\n    }\n\n    public changeName(index: number, value: string): void {\n        this._buckets = this._buckets.map((b, i) =>\n            i === index ? { ...b, name: value, key: b.keyEdited ? b.key : toKey(value) } : b\n        );\n    }\n\n    public changeKey(index: number, value: string): void {\n        this._buckets = this._buckets.map((b, i) =>\n            i === index ? { ...b, key: value, keyEdited: true } : b\n        );\n    }\n\n    public changeDescription(index: number, value: string): void {\n        this._buckets = this._buckets.map((b, i) =>\n            i === index ? { ...b, description: value } : b\n        );\n    }\n\n    public submit(): void {\n        const canSubmit = this._name.trim().length > 0 && this._key.trim().length > 0;\n        if (!canSubmit) {\n            return;\n        }\n        const control = this._buckets.find(b => b.isControl)!;\n        const variants = this._buckets\n            .filter(b => !b.isControl)\n            .map(b => ({\n                id: b.id,\n                revisionId: b.revisionId,\n                name: b.name,\n                key: b.key,\n                description: b.description,\n                weight: b.weight\n            }));\n\n        this._onSubmit({\n            name: this._name.trim(),\n            key: this._key.trim(),\n            control: { key: control.key, description: control.description, weight: control.weight },\n            variants\n        });\n    }\n}\n\nexport const ExperimentFormPresenter = Abstraction.createImplementation({\n    implementation: ExperimentFormPresenterImpl,\n    dependencies: []\n});\n"],"names":["toKey","value","slugify","defaultBuckets","crypto","evenSplit","buckets","n","each","Math","next","b","used","i","rebalance","index","rawValue","others","x","remaining","sumOthers","sum","k","allocated","w","drift","largest","a","ExperimentFormPresenterImpl","makeAutoObservable","computed","total","variantCount","canSubmit","initial","options","Boolean","count","variantName","String","_","control","variants","ExperimentFormPresenter","Abstraction"],"mappings":"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"}

package/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.d.ts

@@ -0,0 +1,65 @@
+/** A single form row: the control or a variant, with its traffic weight and analytics key. */
+export interface FormBucket {
+    id: string;
+    isControl: boolean;
+    name: string;
+    key: string;
+    keyEdited: boolean;
+    description: string;
+    weight: number;
+    revisionId?: string;
+}
+export interface ExperimentFormInitial {
+    name: string;
+    key: string;
+    buckets: FormBucket[];
+}
+export interface NewExperimentPayload {
+    name: string;
+    key: string;
+    control: {
+        key: string;
+        description: string;
+        weight: number;
+    };
+    variants: Array<{
+        id: string;
+        revisionId?: string;
+        name: string;
+        key: string;
+        description: string;
+        weight: number;
+    }>;
+}
+export interface IExperimentFormViewModel {
+    name: string;
+    key: string;
+    buckets: FormBucket[];
+    total: number;
+    variantCount: number;
+    canSubmit: boolean;
+    submitLabel: string;
+    allowStructureChange: boolean;
+}
+export interface IExperimentFormPresenter {
+    vm: IExperimentFormViewModel;
+    init(initial: ExperimentFormInitial | undefined, options: {
+        submitLabel: string;
+        allowStructureChange: boolean;
+        onSubmit: (payload: NewExperimentPayload) => void;
+    }): void;
+    setName(value: string): void;
+    setKey(value: string): void;
+    addVariant(): void;
+    removeVariant(index: number): void;
+    changeWeight(index: number, value: number): void;
+    changeName(index: number, value: string): void;
+    changeKey(index: number, value: string): void;
+    changeDescription(index: number, value: string): void;
+    submit(): void;
+}
+export declare const ExperimentFormPresenter: import("@webiny/di").Abstraction<IExperimentFormPresenter>;
+export declare namespace ExperimentFormPresenter {
+    type Interface = IExperimentFormPresenter;
+    type ViewModel = IExperimentFormViewModel;
+}

package/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const ExperimentFormPresenter = createAbstraction("ExperimentFormPresenter");
+export { ExperimentFormPresenter };
+
+//# sourceMappingURL=ExperimentFormPresenter.js.map

package/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.js","sources":["../../../../../src/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\n\n/** A single form row: the control or a variant, with its traffic weight and analytics key. */\nexport interface FormBucket {\n    id: string;\n    isControl: boolean;\n    name: string;\n    key: string;\n    keyEdited: boolean;\n    description: string;\n    weight: number;\n    // CMS revision id of an existing variant (edit mode); absent for control and new variants.\n    revisionId?: string;\n}\n\nexport interface ExperimentFormInitial {\n    name: string;\n    key: string;\n    buckets: FormBucket[];\n}\n\nexport interface NewExperimentPayload {\n    name: string;\n    key: string;\n    control: { key: string; description: string; weight: number };\n    variants: Array<{\n        id: string;\n        revisionId?: string;\n        name: string;\n        key: string;\n        description: string;\n        weight: number;\n    }>;\n}\n\nexport interface IExperimentFormViewModel {\n    name: string;\n    key: string;\n    buckets: FormBucket[];\n    total: number;\n    variantCount: number;\n    canSubmit: boolean;\n    submitLabel: string;\n    allowStructureChange: boolean;\n}\n\nexport interface IExperimentFormPresenter {\n    vm: IExperimentFormViewModel;\n    init(\n        initial: ExperimentFormInitial | undefined,\n        options: {\n            submitLabel: string;\n            allowStructureChange: boolean;\n            onSubmit: (payload: NewExperimentPayload) => void;\n        }\n    ): void;\n    setName(value: string): void;\n    setKey(value: string): void;\n    addVariant(): void;\n    removeVariant(index: number): void;\n    changeWeight(index: number, value: number): void;\n    changeName(index: number, value: string): void;\n    changeKey(index: number, value: string): void;\n    changeDescription(index: number, value: string): void;\n    submit(): void;\n}\n\nexport const ExperimentFormPresenter =\n    createAbstraction<IExperimentFormPresenter>(\"ExperimentFormPresenter\");\n\nexport namespace ExperimentFormPresenter {\n    export type Interface = IExperimentFormPresenter;\n    export type ViewModel = IExperimentFormViewModel;\n}\n"],"names":["ExperimentFormPresenter","createAbstraction"],"mappings":";AAmEO,MAAMA,0BACTC,kBAA4C"}

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ExperimentFormInitial, NewExperimentPayload } from "../abstractions/ExperimentFormPresenter.js";
+interface Props {
+    onCancel: () => void;
+    onSubmit: (payload: NewExperimentPayload) => void;
+    initial?: ExperimentFormInitial;
+    submitLabel?: string;
+    /** When false, variants can't be added/removed (used when editing an existing experiment). */
+    allowStructureChange?: boolean;
+}
+export declare const ExperimentFormView: (props: Props) => React.JSX.Element;
+export {};

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.js

@@ -0,0 +1,149 @@
+import react, { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { Button, Input, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as info_svg_ReactComponent } from "@webiny/icons/info.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { VariantSplitRow } from "./VariantSplitRow.js";
+import { ExperimentFormPresenterFeature } from "../feature.js";
+const ExperimentFormView_ExperimentFormViewInner = observer(function({ onCancel, onSubmit, initial, submitLabel = "Create experiment", allowStructureChange = true }) {
+    const { presenter } = useFeature(ExperimentFormPresenterFeature);
+    useMemo(()=>{
+        presenter.init(initial, {
+            submitLabel,
+            allowStructureChange,
+            onSubmit
+        });
+    }, [
+        presenter
+    ]);
+    const { vm } = presenter;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            flex: 1,
+            overflowY: "auto",
+            padding: 24
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 20
+        }
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Experiment name",
+        value: vm.name,
+        onChange: (value)=>presenter.setName(value),
+        placeholder: "e.g. Homepage CTA test"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 12
+        }
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Experiment key",
+        value: vm.key,
+        onChange: (value)=>presenter.setKey(value),
+        placeholder: "homepage-cta-test"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            gap: 8,
+            background: "#f5f5f5",
+            borderRadius: 8,
+            padding: 12,
+            marginBottom: 28
+        }
+    }, /*#__PURE__*/ react.createElement(info_svg_ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            flexShrink: 0,
+            marginTop: 2
+        }
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "This key is the identifier reported to your analytics platform to track this experiment. Auto-generated from the name — edit it to override.")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 4
+        }
+    }, /*#__PURE__*/ react.createElement(Text, null, "Variants & traffic split"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: 100 === vm.total ? "#0f9d58" : "#d93025"
+        }
+    }, "Total ", vm.total, "%")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 16
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Each variant is an independent copy of the page. Sliders auto-balance to 100%.")), vm.buckets.map((bucket, index)=>/*#__PURE__*/ react.createElement(VariantSplitRow, {
+            key: bucket.id,
+            name: bucket.name,
+            variantKey: bucket.key,
+            description: bucket.description,
+            isControl: bucket.isControl,
+            weight: bucket.weight,
+            variantIndex: vm.buckets.slice(0, index).filter((b)=>!b.isControl).length,
+            onNameChange: (value)=>presenter.changeName(index, value),
+            onKeyChange: (value)=>presenter.changeKey(index, value),
+            onDescriptionChange: (value)=>presenter.changeDescription(index, value),
+            onChange: (value)=>presenter.changeWeight(index, value),
+            onRemove: bucket.isControl || !vm.allowStructureChange || vm.variantCount <= 1 ? void 0 : ()=>presenter.removeVariant(index),
+            removeIcon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, {
+                style: {
+                    width: 14,
+                    height: 14
+                }
+            })
+        })), vm.allowStructureChange ? /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginTop: 8
+        }
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "tertiary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Add variant",
+        onClick: ()=>presenter.addVariant()
+    })) : null), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: 12,
+            padding: 16,
+            borderTop: "1px solid #eee"
+        }
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Cancel",
+        onClick: onCancel
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: vm.submitLabel,
+        disabled: !vm.canSubmit,
+        onClick: ()=>presenter.submit()
+    })));
+});
+const ExperimentFormView = (props)=>{
+    const container = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = container.createChildContainer();
+        ExperimentFormPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(ExperimentFormView_ExperimentFormViewInner, props));
+};
+export { ExperimentFormView };
+
+//# sourceMappingURL=ExperimentFormView.js.map

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/components/ExperimentFormView.js","sources":["../../../../../src/presentation/experiments/ExperimentForm/components/ExperimentFormView.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { Button, Input, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { VariantSplitRow } from \"./VariantSplitRow.js\";\nimport { ExperimentFormPresenterFeature } from \"../feature.js\";\nimport type {\n    ExperimentFormInitial,\n    NewExperimentPayload\n} from \"../abstractions/ExperimentFormPresenter.js\";\n\ninterface Props {\n    onCancel: () => void;\n    onSubmit: (payload: NewExperimentPayload) => void;\n    initial?: ExperimentFormInitial;\n    submitLabel?: string;\n    /** When false, variants can't be added/removed (used when editing an existing experiment). */\n    allowStructureChange?: boolean;\n}\n\nconst ExperimentFormViewInner = observer(function ExperimentFormViewInner({\n    onCancel,\n    onSubmit,\n    initial,\n    submitLabel = \"Create experiment\",\n    allowStructureChange = true\n}: Props) {\n    const { presenter } = useFeature(ExperimentFormPresenterFeature);\n\n    useMemo(() => {\n        presenter.init(initial, { submitLabel, allowStructureChange, onSubmit });\n    }, [presenter]);\n\n    const { vm } = presenter;\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", height: \"100%\" }}>\n            <div style={{ flex: 1, overflowY: \"auto\", padding: 24 }}>\n                <div style={{ marginBottom: 20 }}>\n                    <Input\n                        label=\"Experiment name\"\n                        value={vm.name}\n                        onChange={value => presenter.setName(value)}\n                        placeholder=\"e.g. Homepage CTA test\"\n                    />\n                </div>\n\n                <div style={{ marginBottom: 12 }}>\n                    <Input\n                        label=\"Experiment key\"\n                        value={vm.key}\n                        onChange={value => presenter.setKey(value)}\n                        placeholder=\"homepage-cta-test\"\n                    />\n                </div>\n\n                <div\n                    style={{\n                        display: \"flex\",\n                        gap: 8,\n                        background: \"#f5f5f5\",\n                        borderRadius: 8,\n                        padding: 12,\n                        marginBottom: 28\n                    }}\n                >\n                    <InfoIcon style={{ width: 18, height: 18, flexShrink: 0, marginTop: 2 }} />\n                    <Text size=\"sm\">\n                        This key is the identifier reported to your analytics platform to track this\n                        experiment. Auto-generated from the name — edit it to override.\n                    </Text>\n                </div>\n\n                <div\n                    style={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"space-between\",\n                        marginBottom: 4\n                    }}\n                >\n                    <Text>Variants &amp; traffic split</Text>\n                    <span\n                        style={{\n                            fontSize: 13,\n                            fontWeight: 600,\n                            color: vm.total === 100 ? \"#0f9d58\" : \"#d93025\"\n                        }}\n                    >\n                        Total {vm.total}%\n                    </span>\n                </div>\n                <div style={{ marginBottom: 16 }}>\n                    <Text size=\"sm\">\n                        Each variant is an independent copy of the page. Sliders auto-balance to\n                        100%.\n                    </Text>\n                </div>\n\n                {vm.buckets.map((bucket, index) => (\n                    <VariantSplitRow\n                        key={bucket.id}\n                        name={bucket.name}\n                        variantKey={bucket.key}\n                        description={bucket.description}\n                        isControl={bucket.isControl}\n                        weight={bucket.weight}\n                        variantIndex={vm.buckets.slice(0, index).filter(b => !b.isControl).length}\n                        onNameChange={value => presenter.changeName(index, value)}\n                        onKeyChange={value => presenter.changeKey(index, value)}\n                        onDescriptionChange={value => presenter.changeDescription(index, value)}\n                        onChange={value => presenter.changeWeight(index, value)}\n                        onRemove={\n                            bucket.isControl || !vm.allowStructureChange || vm.variantCount <= 1\n                                ? undefined\n                                : () => presenter.removeVariant(index)\n                        }\n                        removeIcon={<CloseIcon style={{ width: 14, height: 14 }} />}\n                    />\n                ))}\n\n                {vm.allowStructureChange ? (\n                    <div style={{ marginTop: 8 }}>\n                        <Button\n                            variant=\"tertiary\"\n                            icon={<AddIcon />}\n                            text=\"Add variant\"\n                            onClick={() => presenter.addVariant()}\n                        />\n                    </div>\n                ) : null}\n            </div>\n\n            <div\n                style={{\n                    display: \"flex\",\n                    justifyContent: \"flex-end\",\n                    gap: 12,\n                    padding: 16,\n                    borderTop: \"1px solid #eee\"\n                }}\n            >\n                <Button variant=\"secondary\" text=\"Cancel\" onClick={onCancel} />\n                <Button\n                    variant=\"primary\"\n                    text={vm.submitLabel}\n                    disabled={!vm.canSubmit}\n                    onClick={() => presenter.submit()}\n                />\n            </div>\n        </div>\n    );\n});\n\nexport const ExperimentFormView = (props: Props) => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        ExperimentFormPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <ExperimentFormViewInner {...props} />\n        </DiContainerProvider>\n    );\n};\n"],"names":["ExperimentFormViewInner","observer","onCancel","onSubmit","initial","submitLabel","allowStructureChange","presenter","useFeature","ExperimentFormPresenterFeature","useMemo","vm","Input","value","InfoIcon","Text","bucket","index","VariantSplitRow","b","undefined","CloseIcon","Button","AddIcon","ExperimentFormView","props","container","useContainer","scopedContainer","child","DiContainerProvider"],"mappings":"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"}