@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/presentation/fieldEditor/renderers/CmsAppearancePresenter.js

@@ -0,0 +1,90 @@
+import { createAbstraction, createFeature } from "@webiny/feature/admin";
+import { CmsFieldRenderer } from "../../fieldRenderers/abstractions.js";
+const HIDDEN_RENDERER = "hidden";
+function sortHiddenLast(items) {
+    return [
+        ...items
+    ].sort((a, b)=>{
+        if (a.value === HIDDEN_RENDERER) return 1;
+        if (b.value === HIDDEN_RENDERER) return -1;
+        return 0;
+    });
+}
+class CmsAppearancePresenterImpl {
+    constructor(allRenderers){
+        this.allRenderers = allRenderers;
+    }
+    getVm(field) {
+        const nameField = this.findField(field, "name");
+        const selectedValue = nameField ? String(nameField.value ?? "") : "";
+        const options = nameField?.options ?? [];
+        const renderers = this.buildRendererOptions(options);
+        const settingsLayout = this.buildSettingsLayout(field);
+        return {
+            renderers,
+            selectedValue,
+            settingsLayout,
+            hasRenderers: renderers.length > 0
+        };
+    }
+    selectRenderer(field, name) {
+        const nameField = this.findField(field, "name");
+        if (nameField) nameField.onChange(name);
+    }
+    autoSelectFirst(field) {
+        const nameField = this.findField(field, "name");
+        if (!nameField) return;
+        const options = nameField.options ?? [];
+        const value = String(nameField.value ?? "");
+        const isSelected = options.some((o)=>String(o.value) === value);
+        if (!isSelected && options.length > 0) {
+            const sorted = sortHiddenLast(options);
+            nameField.onChange(sorted[0].value);
+        }
+    }
+    findField(field, name) {
+        return field.fields.find((f)=>f.name === name);
+    }
+    buildRendererOptions(options) {
+        return sortHiddenLast(options).map((option)=>{
+            const renderer = this.allRenderers.find((r)=>r.rendererName === option.value);
+            return {
+                name: option.label,
+                value: String(option.value),
+                description: renderer ? renderer.description : ""
+            };
+        });
+    }
+    buildSettingsLayout(field) {
+        return field.layout.filter((node)=>{
+            if ("row" !== node.type) return true;
+            return !node.fields.some((f)=>"name" === f.name);
+        });
+    }
+}
+const CmsAppearancePresenter = createAbstraction("CmsAppearancePresenter");
+const CmsAppearancePresenterRegistration = CmsAppearancePresenter.createImplementation({
+    implementation: CmsAppearancePresenterImpl,
+    dependencies: [
+        [
+            CmsFieldRenderer,
+            {
+                multiple: true
+            }
+        ]
+    ]
+});
+const CmsAppearancePresenterFeature = createFeature({
+    name: "CmsFieldEditor/AppearancePresenter",
+    register (container) {
+        container.register(CmsAppearancePresenterRegistration);
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(CmsAppearancePresenter)
+        };
+    }
+});
+export { CmsAppearancePresenter, CmsAppearancePresenterFeature };
+
+//# sourceMappingURL=CmsAppearancePresenter.js.map

package/presentation/fieldEditor/renderers/CmsAppearancePresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldEditor/renderers/CmsAppearancePresenter.js","sources":["../../../../src/presentation/fieldEditor/renderers/CmsAppearancePresenter.ts"],"sourcesContent":["import { createAbstraction, createFeature } from \"@webiny/feature/admin\";\nimport {\n    CmsFieldRenderer,\n    type ICmsFieldRenderer\n} from \"~/presentation/fieldRenderers/abstractions.js\";\nimport type {\n    IFieldVM,\n    IObjectFieldVM,\n    IValueOption,\n    LayoutNodeVM\n} from \"@webiny/app-admin/features/formModel/abstractions.js\";\n\nexport interface IRendererOption {\n    name: string;\n    value: string;\n    description: string;\n}\n\nexport interface ICmsAppearanceVM {\n    renderers: IRendererOption[];\n    selectedValue: string;\n    settingsLayout: LayoutNodeVM[];\n    hasRenderers: boolean;\n}\n\nexport interface ICmsAppearancePresenter {\n    getVm(field: IObjectFieldVM): ICmsAppearanceVM;\n    selectRenderer(field: IObjectFieldVM, name: string): void;\n    autoSelectFirst(field: IObjectFieldVM): void;\n}\n\nconst HIDDEN_RENDERER = \"hidden\";\n\nfunction sortHiddenLast<T extends { value: string | number }>(items: T[]): T[] {\n    return [...items].sort((a, b) => {\n        if (a.value === HIDDEN_RENDERER) {\n            return 1;\n        }\n        if (b.value === HIDDEN_RENDERER) {\n            return -1;\n        }\n        return 0;\n    });\n}\n\nclass CmsAppearancePresenterImpl implements ICmsAppearancePresenter {\n    constructor(private allRenderers: ICmsFieldRenderer[]) {}\n\n    getVm(field: IObjectFieldVM): ICmsAppearanceVM {\n        const nameField = this.findField(field, \"name\");\n        const selectedValue = nameField ? String(nameField.value ?? \"\") : \"\";\n        const options = nameField?.options ?? [];\n\n        const renderers = this.buildRendererOptions(options);\n        const settingsLayout = this.buildSettingsLayout(field);\n\n        return {\n            renderers,\n            selectedValue,\n            settingsLayout,\n            hasRenderers: renderers.length > 0\n        };\n    }\n\n    selectRenderer(field: IObjectFieldVM, name: string) {\n        const nameField = this.findField(field, \"name\");\n        if (nameField) {\n            nameField.onChange(name);\n        }\n    }\n\n    autoSelectFirst(field: IObjectFieldVM) {\n        const nameField = this.findField(field, \"name\");\n        if (!nameField) {\n            return;\n        }\n        const options = nameField.options ?? [];\n        const value = String(nameField.value ?? \"\");\n        const isSelected = options.some(o => String(o.value) === value);\n        if (!isSelected && options.length > 0) {\n            const sorted = sortHiddenLast(options);\n            nameField.onChange(sorted[0].value);\n        }\n    }\n\n    private findField(field: IObjectFieldVM, name: string): IFieldVM | undefined {\n        return field.fields.find(f => f.name === name);\n    }\n\n    private buildRendererOptions(options: IValueOption[]): IRendererOption[] {\n        return sortHiddenLast(options).map(option => {\n            const renderer = this.allRenderers.find(r => r.rendererName === option.value);\n            return {\n                name: option.label,\n                value: String(option.value),\n                description: renderer ? renderer.description : \"\"\n            };\n        });\n    }\n\n    private buildSettingsLayout(field: IObjectFieldVM): LayoutNodeVM[] {\n        return field.layout.filter(node => {\n            if (node.type !== \"row\") {\n                return true;\n            }\n            return !node.fields.some(f => f.name === \"name\");\n        });\n    }\n}\n\nexport const CmsAppearancePresenter =\n    createAbstraction<ICmsAppearancePresenter>(\"CmsAppearancePresenter\");\n\nexport namespace CmsAppearancePresenter {\n    export type Interface = ICmsAppearancePresenter;\n    export type ViewModel = ICmsAppearanceVM;\n    export type RendererOption = IRendererOption;\n}\n\nconst CmsAppearancePresenterRegistration = CmsAppearancePresenter.createImplementation({\n    implementation: CmsAppearancePresenterImpl,\n    dependencies: [[CmsFieldRenderer, { multiple: true }]]\n});\n\nexport const CmsAppearancePresenterFeature = createFeature({\n    name: \"CmsFieldEditor/AppearancePresenter\",\n    register(container) {\n        container.register(CmsAppearancePresenterRegistration);\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(CmsAppearancePresenter)\n        };\n    }\n});\n"],"names":["HIDDEN_RENDERER","sortHiddenLast","items","a","b","CmsAppearancePresenterImpl","allRenderers","field","nameField","selectedValue","String","options","renderers","settingsLayout","name","value","isSelected","o","sorted","f","option","renderer","r","node","CmsAppearancePresenter","createAbstraction","CmsAppearancePresenterRegistration","CmsFieldRenderer","CmsAppearancePresenterFeature","createFeature","container"],"mappings":";;AA+BA,MAAMA,kBAAkB;AAExB,SAASC,eAAqDC,KAAU;IACpE,OAAO;WAAIA;KAAM,CAAC,IAAI,CAAC,CAACC,GAAGC;QACvB,IAAID,EAAE,KAAK,KAAKH,iBACZ,OAAO;QAEX,IAAII,EAAE,KAAK,KAAKJ,iBACZ,OAAO;QAEX,OAAO;IACX;AACJ;AAEA,MAAMK;IACF,YAAoBC,YAAiC,CAAE;aAAnCA,YAAY,GAAZA;IAAoC;IAExD,MAAMC,KAAqB,EAAoB;QAC3C,MAAMC,YAAY,IAAI,CAAC,SAAS,CAACD,OAAO;QACxC,MAAME,gBAAgBD,YAAYE,OAAOF,UAAU,KAAK,IAAI,MAAM;QAClE,MAAMG,UAAUH,WAAW,WAAW,EAAE;QAExC,MAAMI,YAAY,IAAI,CAAC,oBAAoB,CAACD;QAC5C,MAAME,iBAAiB,IAAI,CAAC,mBAAmB,CAACN;QAEhD,OAAO;YACHK;YACAH;YACAI;YACA,cAAcD,UAAU,MAAM,GAAG;QACrC;IACJ;IAEA,eAAeL,KAAqB,EAAEO,IAAY,EAAE;QAChD,MAAMN,YAAY,IAAI,CAAC,SAAS,CAACD,OAAO;QACxC,IAAIC,WACAA,UAAU,QAAQ,CAACM;IAE3B;IAEA,gBAAgBP,KAAqB,EAAE;QACnC,MAAMC,YAAY,IAAI,CAAC,SAAS,CAACD,OAAO;QACxC,IAAI,CAACC,WACD;QAEJ,MAAMG,UAAUH,UAAU,OAAO,IAAI,EAAE;QACvC,MAAMO,QAAQL,OAAOF,UAAU,KAAK,IAAI;QACxC,MAAMQ,aAAaL,QAAQ,IAAI,CAACM,CAAAA,IAAKP,OAAOO,EAAE,KAAK,MAAMF;QACzD,IAAI,CAACC,cAAcL,QAAQ,MAAM,GAAG,GAAG;YACnC,MAAMO,SAASjB,eAAeU;YAC9BH,UAAU,QAAQ,CAACU,MAAM,CAAC,EAAE,CAAC,KAAK;QACtC;IACJ;IAEQ,UAAUX,KAAqB,EAAEO,IAAY,EAAwB;QACzE,OAAOP,MAAM,MAAM,CAAC,IAAI,CAACY,CAAAA,IAAKA,EAAE,IAAI,KAAKL;IAC7C;IAEQ,qBAAqBH,OAAuB,EAAqB;QACrE,OAAOV,eAAeU,SAAS,GAAG,CAACS,CAAAA;YAC/B,MAAMC,WAAW,IAAI,CAAC,YAAY,CAAC,IAAI,CAACC,CAAAA,IAAKA,EAAE,YAAY,KAAKF,OAAO,KAAK;YAC5E,OAAO;gBACH,MAAMA,OAAO,KAAK;gBAClB,OAAOV,OAAOU,OAAO,KAAK;gBAC1B,aAAaC,WAAWA,SAAS,WAAW,GAAG;YACnD;QACJ;IACJ;IAEQ,oBAAoBd,KAAqB,EAAkB;QAC/D,OAAOA,MAAM,MAAM,CAAC,MAAM,CAACgB,CAAAA;YACvB,IAAIA,AAAc,UAAdA,KAAK,IAAI,EACT,OAAO;YAEX,OAAO,CAACA,KAAK,MAAM,CAAC,IAAI,CAACJ,CAAAA,IAAKA,AAAW,WAAXA,EAAE,IAAI;QACxC;IACJ;AACJ;AAEO,MAAMK,yBACTC,kBAA2C;AAQ/C,MAAMC,qCAAqCF,uBAAuB,oBAAoB,CAAC;IACnF,gBAAgBnB;IAChB,cAAc;QAAC;YAACsB;YAAkB;gBAAE,UAAU;YAAK;SAAE;KAAC;AAC1D;AAEO,MAAMC,gCAAgCC,cAAc;IACvD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACJ;IACvB;IACA,SAAQI,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACN;QACjC;IACJ;AACJ"}

package/presentation/fieldEditor/renderers/CmsConditionRulesRenderer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const CmsConditionRulesRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index").IFieldVM;
+}>;

package/presentation/fieldEditor/renderers/CmsConditionRulesRenderer.js

@@ -0,0 +1,203 @@
+import react, { useCallback, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { createObjectFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { Button, Grid, Input, Select, Separator } from "@webiny/admin-ui";
+import { VALUE_HIDDEN_OPERATORS, getOperatorOptions } from "../../../admin/components/ContentModelEditor/operatorOptions.js";
+import { useModelEditor } from "../../../admin/components/ContentModelEditor/useModelEditor.js";
+const DEFAULT_ACTION_OPTIONS = [
+    {
+        value: "hide",
+        label: "Hide"
+    },
+    {
+        value: "disable",
+        label: "Disable"
+    }
+];
+const CmsConditionRulesRenderer = createObjectFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(ConditionRules, {
+        field: field
+    }));
+const ConditionRules = observer(({ field })=>{
+    const { fieldOptions } = useModelEditor();
+    const rules = Array.isArray(field.value) ? field.value : [];
+    const addRule = useCallback(()=>{
+        const newRule = {
+            type: "condition",
+            target: "",
+            operator: "",
+            value: null,
+            action: "hide"
+        };
+        field.onChange([
+            ...rules,
+            newRule
+        ]);
+    }, [
+        rules,
+        field
+    ]);
+    const updateRule = useCallback((index, updated)=>{
+        const next = [
+            ...rules
+        ];
+        next[index] = updated;
+        field.onChange(next);
+    }, [
+        rules,
+        field
+    ]);
+    const removeRule = useCallback((index)=>{
+        field.onChange(rules.filter((_, i)=>i !== index));
+    }, [
+        rules,
+        field
+    ]);
+    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, rules.map((rule, index)=>/*#__PURE__*/ react.createElement(RuleRow, {
+            key: index,
+            rule: rule,
+            index: index,
+            fieldOptions: fieldOptions,
+            actionOptions: DEFAULT_ACTION_OPTIONS,
+            onChange: updateRule,
+            onRemove: removeRule
+        })), rules.length > 0 ? /*#__PURE__*/ react.createElement(Separator, {
+        variant: "accent",
+        className: "mt-lg"
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center mt-md"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: addRule,
+        text: "Add Rule",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        size: "sm"
+    }))));
+});
+const RuleRow = observer(({ rule, index, fieldOptions, actionOptions, onChange, onRemove })=>{
+    const selectedFieldOption = useMemo(()=>fieldOptions.find((o)=>o.value === rule.target), [
+        fieldOptions,
+        rule.target
+    ]);
+    const operatorOptions = useMemo(()=>selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : [], [
+        selectedFieldOption
+    ]);
+    const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator);
+    const isBooleanField = selectedFieldOption?.fieldType === "boolean";
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
+        className: 0 === index ? "mb-lg" : "my-lg",
+        variant: "accent",
+        labelPosition: "start"
+    }, "Rule #", index + 1), /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Select, {
+        displayResetAction: false,
+        label: "Field",
+        value: rule.target,
+        options: fieldOptions.map((o)=>({
+                value: o.value,
+                label: o.label
+            })),
+        onChange: (value)=>{
+            const newTarget = value ?? "";
+            const newFieldOption = fieldOptions.find((o)=>o.value === newTarget);
+            const newOps = newFieldOption ? getOperatorOptions(newFieldOption.fieldType) : [];
+            const currentOpValid = newOps.some((o)=>o.value === rule.operator);
+            onChange(index, {
+                ...rule,
+                target: newTarget,
+                operator: currentOpValid ? rule.operator : "",
+                value: currentOpValid ? rule.value : null
+            });
+        }
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Select, {
+        displayResetAction: false,
+        label: "Operator",
+        value: rule.operator,
+        options: operatorOptions.map((o)=>({
+                value: o.value,
+                label: o.label
+            })),
+        onChange: (value)=>{
+            const op = value ?? "";
+            onChange(index, {
+                ...rule,
+                operator: op,
+                value: VALUE_HIDDEN_OPERATORS.has(op) ? null : rule.value
+            });
+        },
+        disabled: !rule.target
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, isBooleanField ? /*#__PURE__*/ react.createElement(Select, {
+        disabled: !showValue,
+        displayResetAction: false,
+        label: "Value",
+        value: String(rule.value ?? ""),
+        options: [
+            {
+                value: "true",
+                label: "True"
+            },
+            {
+                value: "false",
+                label: "False"
+            }
+        ],
+        onChange: (value)=>{
+            let parsed = value ?? "";
+            if ("true" === parsed) parsed = true;
+            else if ("false" === parsed) parsed = false;
+            onChange(index, {
+                ...rule,
+                value: parsed
+            });
+        }
+    }) : /*#__PURE__*/ react.createElement(Input, {
+        disabled: !showValue,
+        label: "Value",
+        value: null != rule.value ? String(rule.value) : "",
+        type: selectedFieldOption?.fieldType === "number" ? "number" : "text",
+        onChange: (value)=>{
+            let parsed = value ?? "";
+            if (selectedFieldOption?.fieldType === "number" && "" !== parsed) {
+                const num = Number(parsed);
+                if (!isNaN(num)) parsed = num;
+            }
+            onChange(index, {
+                ...rule,
+                value: parsed
+            });
+        }
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Select, {
+        label: "Action",
+        displayResetAction: false,
+        value: rule.action,
+        options: actionOptions,
+        onChange: (value)=>{
+            onChange(index, {
+                ...rule,
+                action: value ?? actionOptions[0]?.value ?? "hide"
+            });
+        }
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12,
+        className: "flex justify-between"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        className: "[&_svg]:fill-destructive text-destructive-primary",
+        containerClassName: "flex ml-auto",
+        text: "Remove rule",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>onRemove(index),
+        variant: "ghost"
+    }))));
+});
+export { CmsConditionRulesRenderer };
+
+//# sourceMappingURL=CmsConditionRulesRenderer.js.map

package/presentation/fieldEditor/renderers/CmsConditionRulesRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldEditor/renderers/CmsConditionRulesRenderer.js","sources":["../../../../src/presentation/fieldEditor/renderers/CmsConditionRulesRenderer.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { createObjectFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport type { IObjectFieldVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { Grid, Select, Input, Button, Separator } from \"@webiny/admin-ui\";\nimport type { FieldRule, FieldRuleAction } from \"~/types.js\";\nimport type { FieldOption } from \"~/admin/components/ContentModelEditor/fieldOptions.js\";\nimport {\n    getOperatorOptions,\n    VALUE_HIDDEN_OPERATORS\n} from \"~/admin/components/ContentModelEditor/operatorOptions.js\";\nimport type { Operator } from \"~/admin/components/ContentModelEditor/evaluateExpression.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\n\nconst DEFAULT_ACTION_OPTIONS = [\n    { value: \"hide\", label: \"Hide\" },\n    { value: \"disable\", label: \"Disable\" }\n];\n\nexport const CmsConditionRulesRenderer = createObjectFieldRenderer(({ field }) => {\n    return <ConditionRules field={field} />;\n});\n\ninterface ConditionRulesProps {\n    field: IObjectFieldVM;\n}\n\nconst ConditionRules = observer(({ field }: ConditionRulesProps) => {\n    const { fieldOptions } = useModelEditor();\n    const rules: FieldRule[] = Array.isArray(field.value) ? (field.value as FieldRule[]) : [];\n\n    const addRule = useCallback(() => {\n        const newRule: FieldRule = {\n            type: \"condition\",\n            target: \"\",\n            operator: \"\",\n            value: null,\n            action: \"hide\"\n        };\n        field.onChange([...rules, newRule]);\n    }, [rules, field]);\n\n    const updateRule = useCallback(\n        (index: number, updated: FieldRule) => {\n            const next = [...rules];\n            next[index] = updated;\n            field.onChange(next);\n        },\n        [rules, field]\n    );\n\n    const removeRule = useCallback(\n        (index: number) => {\n            field.onChange(rules.filter((_, i) => i !== index));\n        },\n        [rules, field]\n    );\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                {rules.map((rule, index) => (\n                    <RuleRow\n                        key={index}\n                        rule={rule}\n                        index={index}\n                        fieldOptions={fieldOptions}\n                        actionOptions={DEFAULT_ACTION_OPTIONS}\n                        onChange={updateRule}\n                        onRemove={removeRule}\n                    />\n                ))}\n                {rules.length > 0 ? <Separator variant={\"accent\"} className={\"mt-lg\"} /> : null}\n                <div className={\"flex justify-center mt-md\"}>\n                    <Button onClick={addRule} text={\"Add Rule\"} icon={<AddIcon />} size={\"sm\"} />\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n});\n\ninterface RuleRowProps {\n    rule: FieldRule;\n    index: number;\n    fieldOptions: FieldOption[];\n    actionOptions: Array<{ value: string; label: string }>;\n    onChange: (index: number, updated: FieldRule) => void;\n    onRemove: (index: number) => void;\n}\n\nconst RuleRow = observer(\n    ({ rule, index, fieldOptions, actionOptions, onChange, onRemove }: RuleRowProps) => {\n        const selectedFieldOption = useMemo(\n            () => fieldOptions.find(o => o.value === rule.target),\n            [fieldOptions, rule.target]\n        );\n\n        const operatorOptions = useMemo(\n            () => (selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : []),\n            [selectedFieldOption]\n        );\n\n        const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator as Operator);\n        const isBooleanField = selectedFieldOption?.fieldType === \"boolean\";\n\n        return (\n            <>\n                <Separator\n                    className={index === 0 ? \"mb-lg\" : \"my-lg\"}\n                    variant={\"accent\"}\n                    labelPosition={\"start\"}\n                >\n                    Rule #{index + 1}\n                </Separator>\n                <Grid>\n                    <Grid.Column span={12}>\n                        <Select\n                            displayResetAction={false}\n                            label={\"Field\"}\n                            value={rule.target}\n                            options={fieldOptions.map(o => ({ value: o.value, label: o.label }))}\n                            onChange={value => {\n                                const newTarget = value ?? \"\";\n                                const newFieldOption = fieldOptions.find(\n                                    o => o.value === newTarget\n                                );\n                                const newOps = newFieldOption\n                                    ? getOperatorOptions(newFieldOption.fieldType)\n                                    : [];\n                                const currentOpValid = newOps.some(o => o.value === rule.operator);\n                                onChange(index, {\n                                    ...rule,\n                                    target: newTarget,\n                                    operator: currentOpValid ? rule.operator : \"\",\n                                    value: currentOpValid ? rule.value : null\n                                });\n                            }}\n                        />\n                    </Grid.Column>\n                    <Grid.Column span={6}>\n                        <Select\n                            displayResetAction={false}\n                            label={\"Operator\"}\n                            value={rule.operator}\n                            options={operatorOptions.map(o => ({\n                                value: o.value,\n                                label: o.label\n                            }))}\n                            onChange={value => {\n                                const op = value ?? \"\";\n                                onChange(index, {\n                                    ...rule,\n                                    operator: op,\n                                    value: VALUE_HIDDEN_OPERATORS.has(op as Operator)\n                                        ? null\n                                        : rule.value\n                                });\n                            }}\n                            disabled={!rule.target}\n                        />\n                    </Grid.Column>\n                    <Grid.Column span={6}>\n                        {isBooleanField ? (\n                            <Select\n                                disabled={!showValue}\n                                displayResetAction={false}\n                                label={\"Value\"}\n                                value={String(rule.value ?? \"\")}\n                                options={[\n                                    { value: \"true\", label: \"True\" },\n                                    { value: \"false\", label: \"False\" }\n                                ]}\n                                onChange={value => {\n                                    let parsed: string | number | boolean | null = value ?? \"\";\n                                    if (parsed === \"true\") {\n                                        parsed = true;\n                                    } else if (parsed === \"false\") {\n                                        parsed = false;\n                                    }\n                                    onChange(index, { ...rule, value: parsed });\n                                }}\n                            />\n                        ) : (\n                            <Input\n                                disabled={!showValue}\n                                label={\"Value\"}\n                                value={rule.value != null ? String(rule.value) : \"\"}\n                                type={\n                                    selectedFieldOption?.fieldType === \"number\" ? \"number\" : \"text\"\n                                }\n                                onChange={value => {\n                                    let parsed: string | number | boolean | null = value ?? \"\";\n                                    if (\n                                        selectedFieldOption?.fieldType === \"number\" &&\n                                        parsed !== \"\"\n                                    ) {\n                                        const num = Number(parsed);\n                                        if (!isNaN(num)) {\n                                            parsed = num;\n                                        }\n                                    }\n                                    onChange(index, { ...rule, value: parsed });\n                                }}\n                            />\n                        )}\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <Select\n                            label={\"Action\"}\n                            displayResetAction={false}\n                            value={rule.action}\n                            options={actionOptions}\n                            onChange={value => {\n                                onChange(index, {\n                                    ...rule,\n                                    action: (value ??\n                                        actionOptions[0]?.value ??\n                                        \"hide\") as FieldRuleAction\n                                });\n                            }}\n                        />\n                    </Grid.Column>\n                    <Grid.Column span={12} className={\"flex justify-between\"}>\n                        <Button\n                            className={\"[&_svg]:fill-destructive text-destructive-primary\"}\n                            containerClassName={\"flex ml-auto\"}\n                            text={\"Remove rule\"}\n                            icon={<DeleteIcon />}\n                            onClick={() => onRemove(index)}\n                            variant={\"ghost\"}\n                        />\n                    </Grid.Column>\n                </Grid>\n            </>\n        );\n    }\n);\n"],"names":["DEFAULT_ACTION_OPTIONS","CmsConditionRulesRenderer","createObjectFieldRenderer","field","ConditionRules","observer","fieldOptions","useModelEditor","rules","Array","addRule","useCallback","newRule","updateRule","index","updated","next","removeRule","_","i","Grid","rule","RuleRow","Separator","Button","AddIcon","actionOptions","onChange","onRemove","selectedFieldOption","useMemo","o","operatorOptions","getOperatorOptions","showValue","VALUE_HIDDEN_OPERATORS","isBooleanField","Select","value","newTarget","newFieldOption","newOps","currentOpValid","op","String","parsed","Input","num","Number","isNaN","DeleteIcon"],"mappings":"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"}

package/presentation/fieldEditor/renderers/CmsPredefinedValuesRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        cmsPredefinedValues: {
+            fieldType: "object";
+            settings: undefined;
+        };
+    }
+}
+export declare const CmsPredefinedValuesRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index").IFieldVM;
+}>;

package/presentation/fieldEditor/renderers/CmsPredefinedValuesRenderer.js

@@ -0,0 +1,86 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as remove_svg_ReactComponent } from "@webiny/icons/remove.svg";
+import { createObjectFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { Button, Grid, Icon, IconButton, Input, Switch, Text } from "@webiny/admin-ui";
+const CmsPredefinedValuesRenderer = createObjectFieldRenderer(({ field })=>{
+    if (!field.isList) return null;
+    return /*#__PURE__*/ react.createElement(PredefinedValuesList, {
+        field: field
+    });
+});
+const PredefinedValuesList = observer(({ field })=>{
+    const hasItems = field.items.length > 0;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, hasItems ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col"
+    }, field.items.map((item)=>/*#__PURE__*/ react.createElement(PredefinedValueRow, {
+            key: item.key,
+            item: item,
+            field: field
+        })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center mt-md"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: ()=>field.addItem(),
+        text: "Add a predefined value",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        size: "sm"
+    }))) : /*#__PURE__*/ react.createElement(Grid, {
+        className: "text-center"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Text, null, "There are no predefined values available.")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: ()=>field.addItem(),
+        text: "Add a predefined value"
+    }))));
+});
+const PredefinedValueRow = observer(({ item, field })=>{
+    const labelField = item.fields.find((f)=>"label" === f.name);
+    const valueField = item.fields.find((f)=>"value" === f.name);
+    const selectedField = item.fields.find((f)=>"selected" === f.name);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "mb-md"
+    }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 4
+    }, labelField ? /*#__PURE__*/ react.createElement(Input, {
+        label: "Label",
+        value: labelField.value ?? "",
+        onChange: (v)=>labelField.onChange(v)
+    }) : null), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 4
+    }, valueField ? /*#__PURE__*/ react.createElement(Input, {
+        label: "Value",
+        value: valueField.value ?? "",
+        onChange: (v)=>valueField.onChange(v)
+    }) : null), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 4
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-end gap-sm h-full py-sm-plus"
+    }, selectedField ? /*#__PURE__*/ react.createElement(Switch, {
+        label: "Selected",
+        description: "Mark as selected value.",
+        checked: Boolean(selectedField.value),
+        onChange: (v)=>selectedField.onChange(v)
+    }) : null, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "primary",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Add",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        onClick: ()=>field.addItem()
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "secondary",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Remove",
+            icon: /*#__PURE__*/ react.createElement(remove_svg_ReactComponent, null)
+        }),
+        onClick: ()=>item.remove()
+    })))));
+});
+export { CmsPredefinedValuesRenderer };
+
+//# sourceMappingURL=CmsPredefinedValuesRenderer.js.map

package/presentation/fieldEditor/renderers/CmsPredefinedValuesRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldEditor/renderers/CmsPredefinedValuesRenderer.js","sources":["../../../../src/presentation/fieldEditor/renderers/CmsPredefinedValuesRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as RemoveIcon } from \"@webiny/icons/remove.svg\";\nimport { createObjectFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport type {\n    IObjectFieldVM,\n    IObjectFieldItemVM\n} from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { Button, Grid, Icon, IconButton, Input, Switch, Text } from \"@webiny/admin-ui\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsPredefinedValues: { fieldType: \"object\"; settings: undefined };\n    }\n}\n\nexport const CmsPredefinedValuesRenderer = createObjectFieldRenderer(({ field }) => {\n    if (!field.isList) {\n        return null;\n    }\n\n    return <PredefinedValuesList field={field} />;\n});\n\ninterface PredefinedValuesListProps {\n    field: IObjectFieldVM;\n}\n\nconst PredefinedValuesList = observer(({ field }: PredefinedValuesListProps) => {\n    const hasItems = field.items.length > 0;\n\n    return (\n        <>\n            {hasItems ? (\n                <div className={\"flex flex-col\"}>\n                    {field.items.map(item => (\n                        <PredefinedValueRow key={item.key} item={item} field={field} />\n                    ))}\n                    <div className={\"flex justify-center mt-md\"}>\n                        <Button\n                            onClick={() => field.addItem()}\n                            text={\"Add a predefined value\"}\n                            icon={<AddIcon />}\n                            size={\"sm\"}\n                        />\n                    </div>\n                </div>\n            ) : (\n                <Grid className={\"text-center\"}>\n                    <Grid.Column span={12}>\n                        <Text>There are no predefined values available.</Text>\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <Button onClick={() => field.addItem()} text={\"Add a predefined value\"} />\n                    </Grid.Column>\n                </Grid>\n            )}\n        </>\n    );\n});\n\ninterface PredefinedValueRowProps {\n    item: IObjectFieldItemVM;\n    field: IObjectFieldVM;\n}\n\nconst PredefinedValueRow = observer(({ item, field }: PredefinedValueRowProps) => {\n    const labelField = item.fields.find(f => f.name === \"label\");\n    const valueField = item.fields.find(f => f.name === \"value\");\n    const selectedField = item.fields.find(f => f.name === \"selected\");\n\n    return (\n        <div className={\"mb-md\"}>\n            <Grid>\n                <Grid.Column span={4}>\n                    {labelField ? (\n                        <Input\n                            label={\"Label\"}\n                            value={(labelField.value as string) ?? \"\"}\n                            onChange={v => labelField.onChange(v)}\n                        />\n                    ) : null}\n                </Grid.Column>\n                <Grid.Column span={4}>\n                    {valueField ? (\n                        <Input\n                            label={\"Value\"}\n                            value={(valueField.value as string) ?? \"\"}\n                            onChange={v => valueField.onChange(v)}\n                        />\n                    ) : null}\n                </Grid.Column>\n                <Grid.Column span={4}>\n                    <div className={\"flex items-end gap-sm h-full py-sm-plus\"}>\n                        {selectedField ? (\n                            <Switch\n                                label={\"Selected\"}\n                                description={\"Mark as selected value.\"}\n                                checked={Boolean(selectedField.value)}\n                                onChange={v => selectedField.onChange(v)}\n                            />\n                        ) : null}\n                        <IconButton\n                            variant={\"primary\"}\n                            size={\"sm\"}\n                            icon={<Icon label={\"Add\"} icon={<AddIcon />} />}\n                            onClick={() => field.addItem()}\n                        />\n                        <IconButton\n                            variant={\"secondary\"}\n                            size={\"sm\"}\n                            icon={<Icon label={\"Remove\"} icon={<RemoveIcon />} />}\n                            onClick={() => item.remove()}\n                        />\n                    </div>\n                </Grid.Column>\n            </Grid>\n        </div>\n    );\n});\n"],"names":["CmsPredefinedValuesRenderer","createObjectFieldRenderer","field","PredefinedValuesList","observer","hasItems","item","PredefinedValueRow","Button","AddIcon","Grid","Text","labelField","f","valueField","selectedField","Input","v","Switch","Boolean","IconButton","Icon","RemoveIcon"],"mappings":";;;;;;AAiBO,MAAMA,8BAA8BC,0BAA0B,CAAC,EAAEC,KAAK,EAAE;IAC3E,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACC,sBAAoBA;QAAC,OAAOD;;AACxC;AAMA,MAAMC,uBAAuBC,SAAS,CAAC,EAAEF,KAAK,EAA6B;IACvE,MAAMG,WAAWH,MAAM,KAAK,CAAC,MAAM,GAAG;IAEtC,OAAO,WAAP,GACI,0CACKG,WAAW,WAAXA,GACG,oBAAC;QAAI,WAAW;OACXH,MAAM,KAAK,CAAC,GAAG,CAACI,CAAAA,OAAAA,WAAAA,GACb,oBAACC,oBAAkBA;YAAC,KAAKD,KAAK,GAAG;YAAE,MAAMA;YAAM,OAAOJ;2BAE1D,oBAAC;QAAI,WAAW;qBACZ,oBAACM,QAAMA;QACH,SAAS,IAAMN,MAAM,OAAO;QAC5B,MAAM;QACN,oBAAM,oBAACO,gBAAOA;QACd,MAAM;yBAKlB,oBAACC,MAAIA;QAAC,WAAW;qBACb,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA,MAAC,6DAEV,oBAACD,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACF,QAAMA;QAAC,SAAS,IAAMN,MAAM,OAAO;QAAI,MAAM;;AAMtE;AAOA,MAAMK,qBAAqBH,SAAS,CAAC,EAAEE,IAAI,EAAEJ,KAAK,EAA2B;IACzE,MAAMU,aAAaN,KAAK,MAAM,CAAC,IAAI,CAACO,CAAAA,IAAKA,AAAW,YAAXA,EAAE,IAAI;IAC/C,MAAMC,aAAaR,KAAK,MAAM,CAAC,IAAI,CAACO,CAAAA,IAAKA,AAAW,YAAXA,EAAE,IAAI;IAC/C,MAAME,gBAAgBT,KAAK,MAAM,CAAC,IAAI,CAACO,CAAAA,IAAKA,AAAW,eAAXA,EAAE,IAAI;IAElD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACH,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;OACdE,aAAa,WAAbA,GACG,oBAACI,OAAKA;QACF,OAAO;QACP,OAAQJ,WAAW,KAAK,IAAe;QACvC,UAAUK,CAAAA,IAAKL,WAAW,QAAQ,CAACK;SAEvC,qBAER,oBAACP,KAAK,MAAM;QAAC,MAAM;OACdI,aAAa,WAAbA,GACG,oBAACE,OAAKA;QACF,OAAO;QACP,OAAQF,WAAW,KAAK,IAAe;QACvC,UAAUG,CAAAA,IAAKH,WAAW,QAAQ,CAACG;SAEvC,qBAER,oBAACP,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;OACXK,gBAAgB,WAAhBA,GACG,oBAACG,QAAMA;QACH,OAAO;QACP,aAAa;QACb,SAASC,QAAQJ,cAAc,KAAK;QACpC,UAAUE,CAAAA,IAAKF,cAAc,QAAQ,CAACE;SAE1C,oBACJ,oBAACG,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,MAAIA;YAAC,OAAO;YAAO,oBAAM,oBAACZ,gBAAOA;;QACxC,SAAS,IAAMP,MAAM,OAAO;sBAEhC,oBAACkB,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,MAAIA;YAAC,OAAO;YAAU,oBAAM,oBAACC,2BAAUA;;QAC9C,SAAS,IAAMhB,KAAK,MAAM;;AAOtD"}

package/presentation/fieldEditor/renderers/CmsRendererSelectorRenderer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const CmsAppearanceRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index.js").IFieldVM;
+}>;

package/presentation/fieldEditor/renderers/CmsRendererSelectorRenderer.js

@@ -0,0 +1,67 @@
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { createObjectFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { LayoutNodeRenderer } from "@webiny/app-admin/features/formModel/FormView.js";
+import { Heading, RadioGroup, Text } from "@webiny/admin-ui";
+import { CmsAppearancePresenterFeature } from "./CmsAppearancePresenter.js";
+const CmsAppearanceRenderer = createObjectFieldRenderer(({ field })=>{
+    const parentContainer = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = parentContainer.createChildContainer();
+        CmsAppearancePresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(AppearanceInner, {
+        field: field
+    }));
+});
+const AppearanceInner = observer(({ field })=>{
+    const { presenter } = useFeature(CmsAppearancePresenterFeature);
+    const { renderers, selectedValue, settingsLayout, hasRenderers } = presenter.getVm(field);
+    useEffect(()=>{
+        presenter.autoSelectFirst(field);
+    }, [
+        renderers.length
+    ]);
+    if (!hasRenderers) return /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-center py-lg"
+    }, "There are no components that can render this field.");
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Heading, {
+        level: 5
+    }, "Field renderer"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Choose a component that will render the field."), /*#__PURE__*/ react.createElement("div", {
+        className: "mb-xl mt-md"
+    }, /*#__PURE__*/ react.createElement(RadioGroup, {
+        value: selectedValue,
+        onChange: (selected)=>presenter.selectRenderer(field, selected),
+        items: renderers.map((r)=>({
+                id: r.value,
+                value: r.value,
+                label: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Text, {
+                    as: "div",
+                    size: "md"
+                }, r.name), /*#__PURE__*/ react.createElement(Text, {
+                    as: "div",
+                    size: "sm",
+                    className: "text-sm text-neutral-strong text-wrap"
+                }, r.description))
+            }))
+    })), settingsLayout.length > 0 ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Heading, {
+        level: 5
+    }, "Renderer settings"), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Configure additional settings for the selected field renderer."), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md mt-md"
+    }, settingsLayout.map((node, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: node
+        })))) : null);
+});
+export { CmsAppearanceRenderer };
+
+//# sourceMappingURL=CmsRendererSelectorRenderer.js.map

package/presentation/fieldEditor/renderers/CmsRendererSelectorRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldEditor/renderers/CmsRendererSelectorRenderer.js","sources":["../../../../src/presentation/fieldEditor/renderers/CmsRendererSelectorRenderer.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { createObjectFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport type { IObjectFieldVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { LayoutNodeRenderer } from \"@webiny/app-admin/features/formModel/FormView.js\";\nimport { RadioGroup, Text, Heading } from \"@webiny/admin-ui\";\nimport { CmsAppearancePresenterFeature } from \"./CmsAppearancePresenter.js\";\n\nexport const CmsAppearanceRenderer = createObjectFieldRenderer(({ field }) => {\n    const parentContainer = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        CmsAppearancePresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <AppearanceInner field={field} />\n        </DiContainerProvider>\n    );\n});\n\ninterface AppearanceInnerProps {\n    field: IObjectFieldVM;\n}\n\nconst AppearanceInner = observer(({ field }: AppearanceInnerProps) => {\n    const { presenter } = useFeature(CmsAppearancePresenterFeature);\n    const { renderers, selectedValue, settingsLayout, hasRenderers } = presenter.getVm(field);\n\n    useEffect(() => {\n        presenter.autoSelectFirst(field);\n    }, [renderers.length]);\n\n    if (!hasRenderers) {\n        return (\n            <Text size={\"sm\"} className={\"text-center py-lg\"}>\n                There are no components that can render this field.\n            </Text>\n        );\n    }\n\n    return (\n        <>\n            <Heading level={5}>Field renderer</Heading>\n            <Text size={\"sm\"}>Choose a component that will render the field.</Text>\n            <div className={\"mb-xl mt-md\"}>\n                <RadioGroup\n                    value={selectedValue}\n                    onChange={selected => presenter.selectRenderer(field, selected)}\n                    items={renderers.map(r => ({\n                        id: r.value,\n                        value: r.value,\n                        label: (\n                            <div>\n                                <Text as={\"div\"} size={\"md\"}>\n                                    {r.name}\n                                </Text>\n                                <Text\n                                    as={\"div\"}\n                                    size={\"sm\"}\n                                    className={\"text-sm text-neutral-strong text-wrap\"}\n                                >\n                                    {r.description}\n                                </Text>\n                            </div>\n                        )\n                    }))}\n                />\n            </div>\n            {settingsLayout.length > 0 ? (\n                <>\n                    <Heading level={5}>Renderer settings</Heading>\n                    <Text size={\"sm\"}>\n                        Configure additional settings for the selected field renderer.\n                    </Text>\n                    <div className={\"flex flex-col gap-md mt-md\"}>\n                        {settingsLayout.map((node, index) => (\n                            <LayoutNodeRenderer key={index} node={node} />\n                        ))}\n                    </div>\n                </>\n            ) : null}\n        </>\n    );\n});\n"],"names":["CmsAppearanceRenderer","createObjectFieldRenderer","field","parentContainer","useContainer","scopedContainer","useMemo","child","CmsAppearancePresenterFeature","DiContainerProvider","AppearanceInner","observer","presenter","useFeature","renderers","selectedValue","settingsLayout","hasRenderers","useEffect","Text","Heading","RadioGroup","selected","r","node","index","LayoutNodeRenderer"],"mappings":";;;;;;;AASO,MAAMA,wBAAwBC,0BAA0B,CAAC,EAAEC,KAAK,EAAE;IACrE,MAAMC,kBAAkBC;IAExB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,gBAAgB,oBAAoB;QAClDK,8BAA8B,QAAQ,CAACD;QACvC,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACE,qBAAmBA;QAAC,WAAWJ;qBAC5B,oBAACK,iBAAeA;QAAC,OAAOR;;AAGpC;AAMA,MAAMQ,kBAAkBC,SAAS,CAAC,EAAET,KAAK,EAAwB;IAC7D,MAAM,EAAEU,SAAS,EAAE,GAAGC,WAAWL;IACjC,MAAM,EAAEM,SAAS,EAAEC,aAAa,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGL,UAAU,KAAK,CAACV;IAEnFgB,UAAU;QACNN,UAAU,eAAe,CAACV;IAC9B,GAAG;QAACY,UAAU,MAAM;KAAC;IAErB,IAAI,CAACG,cACD,OAAO,WAAP,GACI,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OAAqB;IAM1D,OAAO,WAAP,GACI,wDACI,oBAACC,SAAOA;QAAC,OAAO;OAAG,iCACnB,oBAACD,MAAIA;QAAC,MAAM;OAAM,iEAClB,oBAAC;QAAI,WAAW;qBACZ,oBAACE,YAAUA;QACP,OAAON;QACP,UAAUO,CAAAA,WAAYV,UAAU,cAAc,CAACV,OAAOoB;QACtD,OAAOR,UAAU,GAAG,CAACS,CAAAA,IAAM;gBACvB,IAAIA,EAAE,KAAK;gBACX,OAAOA,EAAE,KAAK;gBACd,OAAO,WAAP,GACI,oBAAC,2BACG,oBAACJ,MAAIA;oBAAC,IAAI;oBAAO,MAAM;mBAClBI,EAAE,IAAI,iBAEX,oBAACJ,MAAIA;oBACD,IAAI;oBACJ,MAAM;oBACN,WAAW;mBAEVI,EAAE,WAAW;YAI9B;SAGPP,eAAe,MAAM,GAAG,IAAI,WAAJ,GACrB,wDACI,oBAACI,SAAOA;QAAC,OAAO;OAAG,oCACnB,oBAACD,MAAIA;QAAC,MAAM;OAAM,iFAGlB,oBAAC;QAAI,WAAW;OACXH,eAAe,GAAG,CAAC,CAACQ,MAAMC,QAAAA,WAAAA,GACvB,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD;gBAIlD;AAGhB"}

package/presentation/fieldEditor/renderers/CmsValidatorsRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        cmsValidatorItem: {
+            fieldType: "object";
+            settings: undefined;
+        };
+    }
+}
+export declare const CmsValidatorItemRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index").IFieldVM;
+}>;

package/presentation/fieldEditor/renderers/CmsValidatorsRenderer.js

@@ -0,0 +1,37 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { createObjectFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { LayoutNodeRenderer } from "@webiny/app-admin/features/formModel/FormView.js";
+import { Accordion, Switch } from "@webiny/admin-ui";
+const CmsValidatorItemRenderer = createObjectFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(ValidatorItem, {
+        field: field
+    }));
+const ValidatorItem = observer(({ field })=>{
+    const value = field.value;
+    const isEnabled = Boolean(value && value.enabled);
+    const toggleEnabled = (checked)=>{
+        field.onChange({
+            ...value,
+            enabled: checked
+        });
+    };
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        interactive: false,
+        open: isEnabled,
+        title: field.label,
+        description: field.description,
+        actions: /*#__PURE__*/ react.createElement(Switch, {
+            label: "Enabled",
+            checked: isEnabled,
+            onChange: toggleEnabled
+        })
+    }, isEnabled ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md p-md"
+    }, field.layout.map((node, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: node
+        }))) : null);
+});
+export { CmsValidatorItemRenderer };
+
+//# sourceMappingURL=CmsValidatorsRenderer.js.map

package/presentation/fieldEditor/renderers/CmsValidatorsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldEditor/renderers/CmsValidatorsRenderer.js","sources":["../../../../src/presentation/fieldEditor/renderers/CmsValidatorsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { createObjectFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { LayoutNodeRenderer } from \"@webiny/app-admin/features/formModel/FormView.js\";\nimport type { IObjectFieldVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { Accordion, Switch } from \"@webiny/admin-ui\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsValidatorItem: { fieldType: \"object\"; settings: undefined };\n    }\n}\n\nexport const CmsValidatorItemRenderer = createObjectFieldRenderer(({ field }) => {\n    return <ValidatorItem field={field} />;\n});\n\ninterface ValidatorItemProps {\n    field: IObjectFieldVM;\n}\n\nconst ValidatorItem = observer(({ field }: ValidatorItemProps) => {\n    const value = field.value as Record<string, unknown> | null;\n    const isEnabled = Boolean(value && value.enabled);\n\n    const toggleEnabled = (checked: boolean) => {\n        field.onChange({ ...value, enabled: checked });\n    };\n\n    return (\n        <Accordion.Item\n            interactive={false}\n            open={isEnabled}\n            title={field.label}\n            description={field.description}\n            actions={<Switch label=\"Enabled\" checked={isEnabled} onChange={toggleEnabled} />}\n        >\n            {isEnabled ? (\n                <div className={\"flex flex-col gap-md p-md\"}>\n                    {field.layout.map((node, index) => (\n                        <LayoutNodeRenderer key={index} node={node} />\n                    ))}\n                </div>\n            ) : null}\n        </Accordion.Item>\n    );\n});\n"],"names":["CmsValidatorItemRenderer","createObjectFieldRenderer","field","ValidatorItem","observer","value","isEnabled","Boolean","toggleEnabled","checked","Accordion","Switch","node","index","LayoutNodeRenderer"],"mappings":";;;;;AAaO,MAAMA,2BAA2BC,0BAA0B,CAAC,EAAEC,KAAK,EAAE,GACjE,WAAP,GAAO,oBAACC,eAAaA;QAAC,OAAOD;;AAOjC,MAAMC,gBAAgBC,SAAS,CAAC,EAAEF,KAAK,EAAsB;IACzD,MAAMG,QAAQH,MAAM,KAAK;IACzB,MAAMI,YAAYC,QAAQF,SAASA,MAAM,OAAO;IAEhD,MAAMG,gBAAgB,CAACC;QACnBP,MAAM,QAAQ,CAAC;YAAE,GAAGG,KAAK;YAAE,SAASI;QAAQ;IAChD;IAEA,OAAO,WAAP,GACI,oBAACC,UAAU,IAAI;QACX,aAAa;QACb,MAAMJ;QACN,OAAOJ,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,uBAAS,oBAACS,QAAMA;YAAC,OAAM;YAAU,SAASL;YAAW,UAAUE;;OAE9DF,YAAY,WAAZA,GACG,oBAAC;QAAI,WAAW;OACXJ,MAAM,MAAM,CAAC,GAAG,CAAC,CAACU,MAAMC,QAAAA,WAAAA,GACrB,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD;eAG9C;AAGhB"}

package/presentation/fieldRenderers/CmsIconPickerRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        cmsIconPicker: {
+            fieldType: "text";
+            settings: undefined;
+        };
+    }
+}
+export declare const CmsIconPickerRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index").IFieldVM;
+}>;