@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/modules/shared/FolderCellName.js

@@ -1,15 +1,15 @@
 import react from "react";
-import { useNavigateFolder } from "@webiny/app-aco";
 import { Icon, Text } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/folder.svg";
 import { ReactComponent as folder_shared_svg_ReactComponent } from "@webiny/icons/folder_shared.svg";
+import { usePageListPresenter } from "../../presentation/pages/PageList/PageListPresenterProvider.js";
 const FolderCellName = ({ folder })=>{
-    const { navigateToFolder } = useNavigateFolder();
+    const { folders } = usePageListPresenter();
     let icon = /*#__PURE__*/ react.createElement(ReactComponent, null);
     if (folder.hasNonInheritedPermissions && folder.canManagePermissions) icon = /*#__PURE__*/ react.createElement(folder_shared_svg_ReactComponent, null);
     return /*#__PURE__*/ react.createElement("div", {
         className: "flex items-center gap-sm truncate cursor-pointer font-semibold hover:underline",
-        onClick: ()=>navigateToFolder(folder.id)
+        onClick: ()=>folders.selectFolder(folder.id)
     }, /*#__PURE__*/ react.createElement(Icon, {
         size: "sm",
         color: "neutral-strong",

package/modules/shared/FolderCellName.js.map

@@ -1 +1 @@
-{"version":3,"file":"modules/shared/FolderCellName.js","sources":["../../../src/modules/shared/FolderCellName.tsx"],"sourcesContent":["import React from \"react\";\nimport { type FolderTableRow, useNavigateFolder } from \"@webiny/app-aco\";\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as Folder } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as FolderShared } from \"@webiny/icons/folder_shared.svg\";\n\ninterface FolderCellNameProps {\n    folder: FolderTableRow[\"data\"];\n}\n\nexport const FolderCellName = ({ folder }: FolderCellNameProps) => {\n    const { navigateToFolder } = useNavigateFolder();\n\n    let icon = <Folder />;\n    if (folder.hasNonInheritedPermissions && folder.canManagePermissions) {\n        icon = <FolderShared />;\n    }\n\n    return (\n        <div\n            className={\n                \"flex items-center gap-sm truncate cursor-pointer font-semibold hover:underline\"\n            }\n            onClick={() => navigateToFolder(folder.id)}\n        >\n            <Icon\n                size={\"sm\"}\n                color={\"neutral-strong\"}\n                icon={icon}\n                label={`Folder - ${folder.title}`}\n            />\n            <Text className={\"truncate min-w-0 shrink\"}>{folder.title}</Text>\n        </div>\n    );\n};\n"],"names":["FolderCellName","folder","navigateToFolder","useNavigateFolder","icon","Folder","FolderShared","Icon","Text"],"mappings":";;;;;AAUO,MAAMA,iBAAiB,CAAC,EAAEC,MAAM,EAAuB;IAC1D,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAE7B,IAAIC,OAAO,WAAPA,GAAO,oBAACC,gBAAMA;IAClB,IAAIJ,OAAO,0BAA0B,IAAIA,OAAO,oBAAoB,EAChEG,OAAO,WAAPA,GAAO,oBAACE,kCAAYA;IAGxB,OAAO,WAAP,GACI,oBAAC;QACG,WACI;QAEJ,SAAS,IAAMJ,iBAAiBD,OAAO,EAAE;qBAEzC,oBAACM,MAAIA;QACD,MAAM;QACN,OAAO;QACP,MAAMH;QACN,OAAO,CAAC,SAAS,EAAEH,OAAO,KAAK,EAAE;sBAErC,oBAACO,MAAIA;QAAC,WAAW;OAA4BP,OAAO,KAAK;AAGrE"}
+{"version":3,"file":"modules/shared/FolderCellName.js","sources":["../../../src/modules/shared/FolderCellName.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FolderTableRow } from \"@webiny/app-aco\";\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as Folder } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as FolderShared } from \"@webiny/icons/folder_shared.svg\";\nimport { usePageListPresenter } from \"~/presentation/pages/PageList/PageListPresenterProvider.js\";\n\ninterface FolderCellNameProps {\n    folder: FolderTableRow[\"data\"];\n}\n\nexport const FolderCellName = ({ folder }: FolderCellNameProps) => {\n    const { folders } = usePageListPresenter();\n\n    let icon = <Folder />;\n    if (folder.hasNonInheritedPermissions && folder.canManagePermissions) {\n        icon = <FolderShared />;\n    }\n\n    return (\n        <div\n            className={\n                \"flex items-center gap-sm truncate cursor-pointer font-semibold hover:underline\"\n            }\n            onClick={() => folders.selectFolder(folder.id)}\n        >\n            <Icon\n                size={\"sm\"}\n                color={\"neutral-strong\"}\n                icon={icon}\n                label={`Folder - ${folder.title}`}\n            />\n            <Text className={\"truncate min-w-0 shrink\"}>{folder.title}</Text>\n        </div>\n    );\n};\n"],"names":["FolderCellName","folder","folders","usePageListPresenter","icon","Folder","FolderShared","Icon","Text"],"mappings":";;;;;AAWO,MAAMA,iBAAiB,CAAC,EAAEC,MAAM,EAAuB;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,IAAIC,OAAO,WAAPA,GAAO,oBAACC,gBAAMA;IAClB,IAAIJ,OAAO,0BAA0B,IAAIA,OAAO,oBAAoB,EAChEG,OAAO,WAAPA,GAAO,oBAACE,kCAAYA;IAGxB,OAAO,WAAP,GACI,oBAAC;QACG,WACI;QAEJ,SAAS,IAAMJ,QAAQ,YAAY,CAACD,OAAO,EAAE;qBAE7C,oBAACM,MAAIA;QACD,MAAM;QACN,OAAO;QACP,MAAMH;QACN,OAAO,CAAC,SAAS,EAAEH,OAAO,KAAK,EAAE;sBAErC,oBAACO,MAAIA;QAAC,WAAW;OAA4BP,OAAO,KAAK;AAGrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-website-builder",
-	"version": "0.0.0-unstable.7be00a75a9",
+	"version": "0.0.0-unstable.7c2def32a7",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -13,51 +13,44 @@
 	"author": "Pavel Denisjuk",
 	"license": "MIT",
 	"dependencies": {
-		"@apollo/react-hooks": "3.1.5",
 		"@emotion/css": "11.13.5",
 		"@emotion/react": "11.14.0",
 		"@emotion/styled": "11.14.1",
-		"@lexical/utils": "0.44.0",
+		"@lexical/utils": "0.49.0",
 		"@monaco-editor/react": "4.7.0",
-		"@svgr/webpack": "8.1.0",
-		"@types/react": "18.3.29",
-		"@webiny/admin-ui": "0.0.0-unstable.7be00a75a9",
-		"@webiny/app": "0.0.0-unstable.7be00a75a9",
-		"@webiny/app-aco": "0.0.0-unstable.7be00a75a9",
-		"@webiny/app-admin": "0.0.0-unstable.7be00a75a9",
-		"@webiny/app-headless-cms-common": "0.0.0-unstable.7be00a75a9",
-		"@webiny/app-trash-bin": "0.0.0-unstable.7be00a75a9",
-		"@webiny/app-utils": "0.0.0-unstable.7be00a75a9",
-		"@webiny/di": "0.0.0-unstable.7be00a75a9",
-		"@webiny/error": "0.0.0-unstable.7be00a75a9",
-		"@webiny/feature": "0.0.0-unstable.7be00a75a9",
-		"@webiny/form": "0.0.0-unstable.7be00a75a9",
-		"@webiny/icons": "0.0.0-unstable.7be00a75a9",
-		"@webiny/languages": "0.0.0-unstable.7be00a75a9",
-		"@webiny/lexical-converter": "0.0.0-unstable.7be00a75a9",
-		"@webiny/lexical-editor": "0.0.0-unstable.7be00a75a9",
-		"@webiny/lexical-nodes": "0.0.0-unstable.7be00a75a9",
-		"@webiny/lexical-theme": "0.0.0-unstable.7be00a75a9",
-		"@webiny/react-composition": "0.0.0-unstable.7be00a75a9",
-		"@webiny/react-properties": "0.0.0-unstable.7be00a75a9",
-		"@webiny/utils": "0.0.0-unstable.7be00a75a9",
-		"@webiny/validation": "0.0.0-unstable.7be00a75a9",
-		"@webiny/website-builder-sdk": "0.0.0-unstable.7be00a75a9",
-		"apollo-cache": "1.3.5",
-		"apollo-client": "2.6.10",
-		"apollo-link": "1.2.14",
-		"apollo-utilities": "1.3.4",
+		"@types/react": "18.3.31",
+		"@webiny/admin-ui": "0.0.0-unstable.7c2def32a7",
+		"@webiny/app": "0.0.0-unstable.7c2def32a7",
+		"@webiny/app-aco": "0.0.0-unstable.7c2def32a7",
+		"@webiny/app-admin": "0.0.0-unstable.7c2def32a7",
+		"@webiny/app-headless-cms": "0.0.0-unstable.7c2def32a7",
+		"@webiny/app-headless-cms-common": "0.0.0-unstable.7c2def32a7",
+		"@webiny/app-utils": "0.0.0-unstable.7c2def32a7",
+		"@webiny/di": "2.0.0",
+		"@webiny/feature": "0.0.0-unstable.7c2def32a7",
+		"@webiny/form": "0.0.0-unstable.7c2def32a7",
+		"@webiny/frontend-settings": "0.0.0-unstable.7c2def32a7",
+		"@webiny/icons": "0.0.0-unstable.7c2def32a7",
+		"@webiny/languages": "0.0.0-unstable.7c2def32a7",
+		"@webiny/lexical-converter": "0.0.0-unstable.7c2def32a7",
+		"@webiny/lexical-editor": "0.0.0-unstable.7c2def32a7",
+		"@webiny/lexical-nodes": "0.0.0-unstable.7c2def32a7",
+		"@webiny/lexical-theme": "0.0.0-unstable.7c2def32a7",
+		"@webiny/react-composition": "0.0.0-unstable.7c2def32a7",
+		"@webiny/react-properties": "0.0.0-unstable.7c2def32a7",
+		"@webiny/utils": "0.0.0-unstable.7c2def32a7",
+		"@webiny/validation": "0.0.0-unstable.7c2def32a7",
+		"@webiny/website-builder-sdk": "0.0.0-unstable.7c2def32a7",
 		"classnames": "2.5.1",
 		"deep-equal": "2.2.3",
-		"graphql": "16.14.0",
-		"graphql-tag": "2.12.6",
+		"graphql": "16.14.2",
 		"is-hotkey": "0.2.0",
 		"lodash": "4.18.1",
-		"markdown-to-jsx": "9.8.0",
 		"matcher": "6.0.0",
-		"mobx": "6.15.3",
-		"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",
 		"react-dnd": "16.0.1",
 		"react-dnd-html5-backend": "16.0.1",
@@ -68,11 +61,12 @@
 	"devDependencies": {
 		"@types/deep-equal": "1.0.4",
 		"@types/is-hotkey": "0.1.10",
-		"@webiny/build-tools": "0.0.0-unstable.7be00a75a9",
-		"execa": "5.1.1",
+		"@webiny/build-tools": "0.0.0-unstable.7c2def32a7",
+		"@webiny/feature-flags": "0.0.0-unstable.7c2def32a7",
+		"execa": "10.0.1",
 		"rimraf": "6.1.3",
-		"typescript": "6.0.3",
-		"vitest": "4.1.7"
+		"typescript": "7.0.2",
+		"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("languages")) 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(\"languages\")) {\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,cACjC,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 {};