@webiny/app-admin 6.3.0 → 6.4.0-beta.1

package/features/formModel/FormModelFactory.js

@@ -1,23 +1,33 @@
 import { FormModel } from "./FormModel.js";
-import { FormModelFactory as Abstraction, FieldBuilderRegistry, RuleEvaluator } from "./abstractions.js";
+import { FieldBuilderRegistry, FormModelFactory, RuleEvaluator } from "./abstractions.js";
 class FormModelFactoryImpl {
-  constructor(evaluators, registry) {
-    this.evaluators = evaluators;
-    this.registry = registry;
-  }
-  create(config) {
-    const provided = config.ruleEvaluators ?? [];
-    return new FormModel({
-      ...config,
-      ruleEvaluators: [...this.evaluators, ...provided]
-    }, this.registry);
-  }
+    constructor(evaluators, registry){
+        this.evaluators = evaluators;
+        this.registry = registry;
+    }
+    create(config) {
+        const provided = config.ruleEvaluators ?? [];
+        return new FormModel({
+            ...config,
+            ruleEvaluators: [
+                ...this.evaluators,
+                ...provided
+            ]
+        }, this.registry);
+    }
 }
-export const FormModelFactory = Abstraction.createImplementation({
-  implementation: FormModelFactoryImpl,
-  dependencies: [[RuleEvaluator, {
-    multiple: true
-  }], FieldBuilderRegistry]
+const FormModelFactory_FormModelFactory = FormModelFactory.createImplementation({
+    implementation: FormModelFactoryImpl,
+    dependencies: [
+        [
+            RuleEvaluator,
+            {
+                multiple: true
+            }
+        ],
+        FieldBuilderRegistry
+    ]
 });
+export { FormModelFactory_FormModelFactory as FormModelFactory };
 
 //# sourceMappingURL=FormModelFactory.js.map

package/features/formModel/FormModelFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormModel","FormModelFactory","Abstraction","FieldBuilderRegistry","RuleEvaluator","FormModelFactoryImpl","constructor","evaluators","registry","create","config","provided","ruleEvaluators","createImplementation","implementation","dependencies","multiple"],"sources":["FormModelFactory.ts"],"sourcesContent":["import { FormModel } from \"./FormModel.js\";\nimport {\n    FormModelFactory as Abstraction,\n    FieldBuilderRegistry,\n    RuleEvaluator,\n    type IFormModelFactory,\n    type IFormModelConfig,\n    type IFormModel,\n    type IFieldBuilderRegistry,\n    type IRuleEvaluator\n} from \"./abstractions.js\";\n\nclass FormModelFactoryImpl implements IFormModelFactory {\n    constructor(\n        private evaluators: IRuleEvaluator[],\n        private registry: IFieldBuilderRegistry\n    ) {}\n\n    create<T = Record<string, any>>(config: IFormModelConfig): IFormModel<T> {\n        const provided = config.ruleEvaluators ?? [];\n        return new FormModel(\n            {\n                ...config,\n                ruleEvaluators: [...this.evaluators, ...provided]\n            },\n            this.registry\n        ) as IFormModel<T>;\n    }\n}\n\nexport const FormModelFactory = Abstraction.createImplementation({\n    implementation: FormModelFactoryImpl,\n    dependencies: [[RuleEvaluator, { multiple: true }], FieldBuilderRegistry]\n});\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,SACIC,gBAAgB,IAAIC,WAAW,EAC/BC,oBAAoB,EACpBC,aAAa;AAQjB,MAAMC,oBAAoB,CAA8B;EACpDC,WAAWA,CACCC,UAA4B,EAC5BC,QAA+B,EACzC;IAAA,KAFUD,UAA4B,GAA5BA,UAA4B;IAAA,KAC5BC,QAA+B,GAA/BA,QAA+B;EACxC;EAEHC,MAAMA,CAA0BC,MAAwB,EAAiB;IACrE,MAAMC,QAAQ,GAAGD,MAAM,CAACE,cAAc,IAAI,EAAE;IAC5C,OAAO,IAAIZ,SAAS,CAChB;MACI,GAAGU,MAAM;MACTE,cAAc,EAAE,CAAC,GAAG,IAAI,CAACL,UAAU,EAAE,GAAGI,QAAQ;IACpD,CAAC,EACD,IAAI,CAACH,QACT,CAAC;EACL;AACJ;AAEA,OAAO,MAAMP,gBAAgB,GAAGC,WAAW,CAACW,oBAAoB,CAAC;EAC7DC,cAAc,EAAET,oBAAoB;EACpCU,YAAY,EAAE,CAAC,CAACX,aAAa,EAAE;IAAEY,QAAQ,EAAE;EAAK,CAAC,CAAC,EAAEb,oBAAoB;AAC5E,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"features/formModel/FormModelFactory.js","sources":["../../../src/features/formModel/FormModelFactory.ts"],"sourcesContent":["import { FormModel } from \"./FormModel.js\";\nimport {\n    FormModelFactory as Abstraction,\n    FieldBuilderRegistry,\n    RuleEvaluator,\n    type IFormModelFactory,\n    type IFormModelConfig,\n    type IFormModel,\n    type IFieldBuilderRegistry,\n    type IRuleEvaluator\n} from \"./abstractions.js\";\n\nclass FormModelFactoryImpl implements IFormModelFactory {\n    constructor(\n        private evaluators: IRuleEvaluator[],\n        private registry: IFieldBuilderRegistry\n    ) {}\n\n    create<T = Record<string, any>>(config: IFormModelConfig): IFormModel<T> {\n        const provided = config.ruleEvaluators ?? [];\n        return new FormModel(\n            {\n                ...config,\n                ruleEvaluators: [...this.evaluators, ...provided]\n            },\n            this.registry\n        ) as IFormModel<T>;\n    }\n}\n\nexport const FormModelFactory = Abstraction.createImplementation({\n    implementation: FormModelFactoryImpl,\n    dependencies: [[RuleEvaluator, { multiple: true }], FieldBuilderRegistry]\n});\n"],"names":["FormModelFactoryImpl","evaluators","registry","config","provided","FormModel","FormModelFactory","Abstraction","RuleEvaluator","FieldBuilderRegistry"],"mappings":";;AAYA,MAAMA;IACF,YACYC,UAA4B,EAC5BC,QAA+B,CACzC;aAFUD,UAAU,GAAVA;aACAC,QAAQ,GAARA;IACT;IAEH,OAAgCC,MAAwB,EAAiB;QACrE,MAAMC,WAAWD,OAAO,cAAc,IAAI,EAAE;QAC5C,OAAO,IAAIE,UACP;YACI,GAAGF,MAAM;YACT,gBAAgB;mBAAI,IAAI,CAAC,UAAU;mBAAKC;aAAS;QACrD,GACA,IAAI,CAAC,QAAQ;IAErB;AACJ;AAEO,MAAME,oCAAmBC,iBAAAA,oBAAgC,CAAC;IAC7D,gBAAgBP;IAChB,cAAc;QAAC;YAACQ;YAAe;gBAAE,UAAU;YAAK;SAAE;QAAEC;KAAqB;AAC7E"}

package/features/formModel/FormView.d.ts

@@ -24,6 +24,7 @@ interface FormViewRenderers {
 declare const useFormViewRenderers: () => FormViewRenderers;
 export { useFormViewRenderers };
 interface FormViewProps {
+    name: string;
     form: IFormVM;
     renderers?: FieldRenderers;
     layoutRenderers?: LayoutRenderers;
@@ -32,7 +33,7 @@ interface FormViewProps {
  * Generic form view that walks layout nodes and renders fields.
  * This component is stateless — it reads from the FormVM and delegates to renderers.
  */
-export declare const FormView: (({ form, renderers, layoutRenderers }: FormViewProps) => React.JSX.Element) & {
+export declare const FormView: (({ name, form, renderers, layoutRenderers }: FormViewProps) => React.JSX.Element) & {
     displayName: string;
 };
 export declare const LayoutNodeRenderer: (({ node }: {

package/features/formModel/FormView.js

@@ -1,175 +1,187 @@
-import React, { createContext, useContext, useMemo } from "react";
+import react, { createContext, useContext, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Grid, Tabs } from "@webiny/admin-ui";
+import { Grid, IconButton, Tabs, Tooltip, useToast } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as content_paste_svg_ReactComponent } from "@webiny/icons/content_paste.svg";
+import { DevToolsSection } from "@webiny/react-properties";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DeveloperMode } from "../../components/DeveloperMode/DeveloperMode.js";
 import { useFieldRenderers } from "./useFieldRenderers.js";
 import { useLayoutRenderers } from "./useLayoutRenderers.js";
-export function renderTabIcon(icon) {
-  if (!icon) {
-    return undefined;
-  }
-  return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: icon.name.split("/")
-  });
+function renderTabIcon(icon) {
+    if (!icon) return;
+    return /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+        icon: icon.name.split("/")
+    });
 }
-
-/**
- * A field renderer component receives a FieldVM and renders the appropriate UI.
- */
-
-/**
- * Map of renderer keys to React components for fields.
- * Lookup order: `{type}:{renderer}` → `{type}`.
- */
-
-/**
- * Map of renderer keys to React components for layout nodes.
- */
-
-const FormViewRenderersContext = /*#__PURE__*/createContext(null);
-const useFormViewRenderers = () => {
-  const ctx = useContext(FormViewRenderersContext);
-  if (!ctx) {
-    throw new Error("useFormViewRenderers must be used within a FormView.");
-  }
-  return ctx;
+const FormViewRenderersContext = /*#__PURE__*/ createContext(null);
+const useFormViewRenderers = ()=>{
+    const ctx = useContext(FormViewRenderersContext);
+    if (!ctx) throw new Error("useFormViewRenderers must be used within a FormView.");
+    return ctx;
 };
-export { useFormViewRenderers };
-/**
- * Generic form view that walks layout nodes and renders fields.
- * This component is stateless — it reads from the FormVM and delegates to renderers.
- */
-export const FormView = observer(({
-  form,
-  renderers,
-  layoutRenderers
-}) => {
-  const defaultFieldRenderers = useFieldRenderers();
-  const defaultLayoutRenderers = useLayoutRenderers();
-  const value = useMemo(() => ({
-    fieldRenderers: renderers ?? defaultFieldRenderers,
-    layoutRenderers: layoutRenderers ?? defaultLayoutRenderers
-  }), [renderers, defaultFieldRenderers, layoutRenderers, defaultLayoutRenderers]);
-  return /*#__PURE__*/React.createElement(FormViewRenderersContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full flex flex-col gap-4"
-  }, form.layout.map((node, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
-    key: index,
-    node: node
-  }))));
+const FormView = observer(({ name, form, renderers, layoutRenderers })=>{
+    const defaultFieldRenderers = useFieldRenderers();
+    const defaultLayoutRenderers = useLayoutRenderers();
+    const value = useMemo(()=>({
+            fieldRenderers: renderers ?? defaultFieldRenderers,
+            layoutRenderers: layoutRenderers ?? defaultLayoutRenderers
+        }), [
+        renderers,
+        defaultFieldRenderers,
+        layoutRenderers,
+        defaultLayoutRenderers
+    ]);
+    return /*#__PURE__*/ react.createElement(FormViewRenderersContext.Provider, {
+        value: value
+    }, /*#__PURE__*/ react.createElement(DevToolsSection, {
+        name: name,
+        group: "Forms",
+        data: form.getData(),
+        views: "raw"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "w-full relative flex flex-col gap-4"
+    }, /*#__PURE__*/ react.createElement(DevModeTools, {
+        form: form
+    }), form.layout.map((node, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: node
+        }))));
 });
-export const LayoutNodeRenderer = observer(({
-  node
-}) => {
-  switch (node.type) {
-    case "row":
-      return /*#__PURE__*/React.createElement(RowNodeRenderer, {
-        node: node
-      });
-    case "separator":
-      return /*#__PURE__*/React.createElement(SeparatorNodeRenderer, null);
-    case "tabs":
-      return /*#__PURE__*/React.createElement(TabsNodeRenderer, {
-        node: node
-      });
-    case "element":
-      return /*#__PURE__*/React.createElement(ElementNodeRenderer, {
-        node: node
-      });
-    default:
-      return null;
-  }
+const LayoutNodeRenderer = observer(({ node })=>{
+    switch(node.type){
+        case "row":
+            return /*#__PURE__*/ react.createElement(RowNodeRenderer, {
+                node: node
+            });
+        case "separator":
+            return /*#__PURE__*/ react.createElement(FormView_SeparatorNodeRenderer, null);
+        case "tabs":
+            return /*#__PURE__*/ react.createElement(TabsNodeRenderer, {
+                node: node
+            });
+        case "element":
+            return /*#__PURE__*/ react.createElement(ElementNodeRenderer, {
+                node: node
+            });
+        default:
+            return null;
+    }
 });
-const RowNodeRenderer = observer(({
-  node
-}) => {
-  const {
-    fieldRenderers
-  } = useFormViewRenderers();
-  return /*#__PURE__*/React.createElement(Grid, null, node.fields.map(field => {
-    const span = Math.floor(12 / node.fields.length);
-    return /*#__PURE__*/React.createElement(Grid.Column, {
-      key: field.name,
-      span: span
-    }, /*#__PURE__*/React.createElement(FieldRenderer, {
-      field: field,
-      renderers: fieldRenderers
+const RowNodeRenderer = observer(({ node })=>{
+    const { fieldRenderers } = useFormViewRenderers();
+    return /*#__PURE__*/ react.createElement(Grid, null, node.fields.map((field)=>{
+        const span = Math.floor(12 / node.fields.length);
+        return /*#__PURE__*/ react.createElement(Grid.Column, {
+            key: field.name,
+            span: span
+        }, /*#__PURE__*/ react.createElement(FieldRenderer, {
+            field: field,
+            renderers: fieldRenderers
+        }));
     }));
-  }));
 });
-const FieldRenderer = observer(({
-  field,
-  renderers
-}) => {
-  const Renderer = field.renderer ? renderers[field.renderer] : undefined;
-  if (!Renderer) {
-    if (process.env.NODE_ENV === "development") {
-      console.warn(`[FormView] No renderer found for field "${field.name}" (renderer: "${field.renderer || "none"}").`);
+const FieldRenderer = observer(({ field, renderers })=>{
+    const Renderer = field.renderer ? renderers[field.renderer] : void 0;
+    if (!Renderer) {
+        if ("development" === process.env.NODE_ENV) console.warn(`[FormView] No renderer found for field "${field.name}" (renderer: "${field.renderer || "none"}").`);
+        return null;
     }
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Renderer, {
-    field: field
-  });
+    return /*#__PURE__*/ react.createElement(Renderer, {
+        field: field
+    });
 });
-const SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {
-  return /*#__PURE__*/React.createElement("hr", {
-    className: "border-neutral-dimmed my-2"
-  });
+const FormView_SeparatorNodeRenderer = observer(function() {
+    return /*#__PURE__*/ react.createElement("hr", {
+        className: "border-neutral-dimmed my-2"
+    });
 });
-const TabsNodeRenderer = observer(({
-  node
-}) => {
-  const {
-    layoutRenderers
-  } = useFormViewRenderers();
-  if (node.renderer) {
-    const CustomRenderer = layoutRenderers[node.renderer];
-    if (CustomRenderer) {
-      return /*#__PURE__*/React.createElement(CustomRenderer, {
-        node: node
-      });
+const TabsNodeRenderer = observer(({ node })=>{
+    const { layoutRenderers } = useFormViewRenderers();
+    if (node.renderer) {
+        const CustomRenderer = layoutRenderers[node.renderer];
+        if (CustomRenderer) return /*#__PURE__*/ react.createElement(CustomRenderer, {
+            node: node
+        });
     }
-  }
-  return /*#__PURE__*/React.createElement(Tabs, {
-    value: node.activeTabId,
-    onValueChange: id => node.setActiveTab(id),
-    tabs: node.tabs.map(tab => /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: tab.id,
-      value: tab.id,
-      icon: renderTabIcon(tab.icon),
-      trigger: /*#__PURE__*/React.createElement(React.Fragment, null, tab.label, tab.hasErrors && /*#__PURE__*/React.createElement("span", {
-        className: "ml-1 text-destructive-default text-xs"
-      }, "*")),
-      disabled: tab.disabled,
-      content: /*#__PURE__*/React.createElement("div", {
-        className: "flex flex-col gap-4 mt-md"
-      }, tab.layout.map((childNode, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
-        key: index,
-        node: childNode
-      })))
-    }))
-  });
+    return /*#__PURE__*/ react.createElement(Tabs, {
+        value: node.activeTabId,
+        onValueChange: (id)=>node.setActiveTab(id),
+        tabs: node.tabs.map((tab)=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: tab.id,
+                value: tab.id,
+                icon: renderTabIcon(tab.icon),
+                trigger: /*#__PURE__*/ react.createElement(react.Fragment, null, tab.label, tab.hasErrors && /*#__PURE__*/ react.createElement("span", {
+                    className: "ml-1 text-destructive-default text-xs"
+                }, "*")),
+                disabled: tab.disabled,
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "flex flex-col gap-4 mt-md"
+                }, tab.layout.map((childNode, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+                        key: index,
+                        node: childNode
+                    })))
+            }))
+    });
 });
-const ElementNodeRenderer = observer(({
-  node
-}) => {
-  const {
-    fieldRenderers
-  } = useFormViewRenderers();
-  const Renderer = fieldRenderers[`element:${node.renderer}`];
-  if (!Renderer) {
-    if (process.env.NODE_ENV === "development") {
-      console.warn(`[FormView] No renderer found for element "${node.renderer}".`);
-    }
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Renderer, {
-    field: {
-      ...node.props
+const ElementNodeRenderer = observer(({ node })=>{
+    const { fieldRenderers } = useFormViewRenderers();
+    const Renderer = fieldRenderers[`element:${node.renderer}`];
+    if (!Renderer) {
+        if ("development" === process.env.NODE_ENV) console.warn(`[FormView] No renderer found for element "${node.renderer}".`);
+        return null;
     }
-  });
+    return /*#__PURE__*/ react.createElement(Renderer, {
+        field: {
+            ...node.props
+        }
+    });
 });
+const DevModeTools = ({ form })=>{
+    const toast = useToast();
+    const handleCopy = ()=>{
+        const data = form.getData();
+        navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+        toast.showSuccessToast({
+            title: "Form data copied to clipboard."
+        });
+    };
+    const handlePaste = async ()=>{
+        try {
+            const text = await navigator.clipboard.readText();
+            const data = JSON.parse(text);
+            form.setData(data);
+            toast.showSuccessToast({
+                title: "Form data imported from clipboard."
+            });
+        } catch  {
+            toast.showWarningToast({
+                title: "Failed to import. Make sure clipboard contains valid JSON."
+            });
+        }
+    };
+    return /*#__PURE__*/ react.createElement(DeveloperMode, null, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-0 right-0 w-[200px] h-[80px] z-10 group/devtools"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-0 right-0 flex gap-xs opacity-0 group-hover/devtools:opacity-100 transition-opacity"
+    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Copy form data to clipboard",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "secondary",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: handleCopy,
+            size: "sm"
+        })
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Paste form data from clipboard",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "secondary",
+            icon: /*#__PURE__*/ react.createElement(content_paste_svg_ReactComponent, null),
+            onClick: handlePaste,
+            size: "sm"
+        })
+    }))));
+};
+export { FormView, LayoutNodeRenderer, renderTabIcon, useFormViewRenderers };
 
 //# sourceMappingURL=FormView.js.map

package/features/formModel/FormView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContext","useMemo","observer","Grid","Tabs","FontAwesomeIcon","useFieldRenderers","useLayoutRenderers","renderTabIcon","icon","undefined","createElement","name","split","FormViewRenderersContext","useFormViewRenderers","ctx","Error","FormView","form","renderers","layoutRenderers","defaultFieldRenderers","defaultLayoutRenderers","value","fieldRenderers","Provider","className","layout","map","node","index","LayoutNodeRenderer","key","type","RowNodeRenderer","SeparatorNodeRenderer","TabsNodeRenderer","ElementNodeRenderer","fields","field","span","Math","floor","length","Column","FieldRenderer","Renderer","renderer","process","env","NODE_ENV","console","warn","CustomRenderer","activeTabId","onValueChange","id","setActiveTab","tabs","tab","Tab","trigger","Fragment","label","hasErrors","disabled","content","childNode","props"],"sources":["FormView.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Grid, Tabs } from \"@webiny/admin-ui\";\nimport type {\n    IFormVM,\n    LayoutNodeVM,\n    IRowNodeVM,\n    IFieldVM,\n    ITabsNodeVM,\n    IElementNodeVM\n} from \"./abstractions.js\";\nimport type { Icon } from \"~/components/IconPicker/types.js\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { useFieldRenderers } from \"~/features/formModel/useFieldRenderers.js\";\nimport { useLayoutRenderers } from \"~/features/formModel/useLayoutRenderers.js\";\n\nexport function renderTabIcon(icon: Icon | undefined): React.ReactElement | undefined {\n    if (!icon) {\n        return undefined;\n    }\n    return <FontAwesomeIcon icon={icon.name.split(\"/\") as IconProp} />;\n}\n\n/**\n * A field renderer component receives a FieldVM and renders the appropriate UI.\n */\nexport type FieldRendererComponent = React.ComponentType<{ field: IFieldVM }>;\n\n/**\n * Map of renderer keys to React components for fields.\n * Lookup order: `{type}:{renderer}` → `{type}`.\n */\nexport type FieldRenderers = Record<string, FieldRendererComponent>;\n\n/**\n * Map of renderer keys to React components for layout nodes.\n */\nexport type LayoutRenderers = Record<string, React.ComponentType<any>>;\n\ninterface FormViewRenderers {\n    fieldRenderers: FieldRenderers;\n    layoutRenderers: LayoutRenderers;\n}\n\nconst FormViewRenderersContext = createContext<FormViewRenderers | null>(null);\n\nconst useFormViewRenderers = (): FormViewRenderers => {\n    const ctx = useContext(FormViewRenderersContext);\n    if (!ctx) {\n        throw new Error(\"useFormViewRenderers must be used within a FormView.\");\n    }\n    return ctx;\n};\n\nexport { useFormViewRenderers };\n\ninterface FormViewProps {\n    form: IFormVM;\n    renderers?: FieldRenderers;\n    layoutRenderers?: LayoutRenderers;\n}\n\n/**\n * Generic form view that walks layout nodes and renders fields.\n * This component is stateless — it reads from the FormVM and delegates to renderers.\n */\nexport const FormView = observer(({ form, renderers, layoutRenderers }: FormViewProps) => {\n    const defaultFieldRenderers = useFieldRenderers();\n    const defaultLayoutRenderers = useLayoutRenderers();\n\n    const value = useMemo(\n        () => ({\n            fieldRenderers: renderers ?? defaultFieldRenderers,\n            layoutRenderers: layoutRenderers ?? defaultLayoutRenderers\n        }),\n        [renderers, defaultFieldRenderers, layoutRenderers, defaultLayoutRenderers]\n    );\n\n    return (\n        <FormViewRenderersContext.Provider value={value}>\n            <div className=\"w-full flex flex-col gap-4\">\n                {form.layout.map((node, index) => (\n                    <LayoutNodeRenderer key={index} node={node} />\n                ))}\n            </div>\n        </FormViewRenderersContext.Provider>\n    );\n});\n\nexport const LayoutNodeRenderer = observer(({ node }: { node: LayoutNodeVM }) => {\n    switch (node.type) {\n        case \"row\":\n            return <RowNodeRenderer node={node} />;\n        case \"separator\":\n            return <SeparatorNodeRenderer />;\n        case \"tabs\":\n            return <TabsNodeRenderer node={node} />;\n        case \"element\":\n            return <ElementNodeRenderer node={node} />;\n        default:\n            return null;\n    }\n});\n\nconst RowNodeRenderer = observer(({ node }: { node: IRowNodeVM }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n\n    return (\n        <Grid>\n            {node.fields.map(field => {\n                const span = Math.floor(12 / node.fields.length) as React.ComponentProps<\n                    typeof Grid.Column\n                >[\"span\"];\n\n                return (\n                    <Grid.Column key={field.name} span={span}>\n                        <FieldRenderer field={field} renderers={fieldRenderers} />\n                    </Grid.Column>\n                );\n            })}\n        </Grid>\n    );\n});\n\ninterface FieldRendererProps {\n    field: IFieldVM;\n    renderers: FieldRenderers;\n}\n\nconst FieldRenderer = observer(({ field, renderers }: FieldRendererProps) => {\n    const Renderer = field.renderer ? renderers[field.renderer] : undefined;\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(\n                `[FormView] No renderer found for field \"${field.name}\" (renderer: \"${field.renderer || \"none\"}\").`\n            );\n        }\n        return null;\n    }\n\n    return <Renderer field={field} />;\n});\n\nconst SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {\n    return <hr className=\"border-neutral-dimmed my-2\" />;\n});\n\nexport interface TabsNodeRendererProps {\n    node: ITabsNodeVM;\n}\n\nconst TabsNodeRenderer = observer(({ node }: TabsNodeRendererProps) => {\n    const { layoutRenderers } = useFormViewRenderers();\n\n    if (node.renderer) {\n        const CustomRenderer = layoutRenderers[node.renderer];\n        if (CustomRenderer) {\n            return <CustomRenderer node={node} />;\n        }\n    }\n\n    return (\n        <Tabs\n            value={node.activeTabId}\n            onValueChange={id => node.setActiveTab(id)}\n            tabs={node.tabs.map(tab => (\n                <Tabs.Tab\n                    key={tab.id}\n                    value={tab.id}\n                    icon={renderTabIcon(tab.icon)}\n                    trigger={\n                        <>\n                            {tab.label}\n                            {tab.hasErrors && (\n                                <span className=\"ml-1 text-destructive-default text-xs\">*</span>\n                            )}\n                        </>\n                    }\n                    disabled={tab.disabled}\n                    content={\n                        <div className={\"flex flex-col gap-4 mt-md\"}>\n                            {tab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    }\n                />\n            ))}\n        />\n    );\n});\n\nconst ElementNodeRenderer = observer(({ node }: { node: IElementNodeVM }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n    const Renderer = fieldRenderers[`element:${node.renderer}`];\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(`[FormView] No renderer found for element \"${node.renderer}\".`);\n        }\n        return null;\n    }\n\n    return <Renderer field={{ ...node.props } as any} />;\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"features/formModel/FormView.js","sources":["../../../src/features/formModel/FormView.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Grid, IconButton, Tabs, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { DevToolsSection } from \"@webiny/react-properties\";\nimport type {\n    IFormVM,\n    LayoutNodeVM,\n    IRowNodeVM,\n    IFieldVM,\n    ITabsNodeVM,\n    IElementNodeVM\n} from \"./abstractions.js\";\nimport type { Icon } from \"~/components/IconPicker/types.js\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { DeveloperMode } from \"~/components/DeveloperMode/DeveloperMode.js\";\nimport { useFieldRenderers } from \"~/features/formModel/useFieldRenderers.js\";\nimport { useLayoutRenderers } from \"~/features/formModel/useLayoutRenderers.js\";\n\nexport function renderTabIcon(icon: Icon | undefined): React.ReactElement | undefined {\n    if (!icon) {\n        return undefined;\n    }\n    return <FontAwesomeIcon icon={icon.name.split(\"/\") as IconProp} />;\n}\n\n/**\n * A field renderer component receives a FieldVM and renders the appropriate UI.\n */\nexport type FieldRendererComponent = React.ComponentType<{ field: IFieldVM }>;\n\n/**\n * Map of renderer keys to React components for fields.\n * Lookup order: `{type}:{renderer}` → `{type}`.\n */\nexport type FieldRenderers = Record<string, FieldRendererComponent>;\n\n/**\n * Map of renderer keys to React components for layout nodes.\n */\nexport type LayoutRenderers = Record<string, React.ComponentType<any>>;\n\ninterface FormViewRenderers {\n    fieldRenderers: FieldRenderers;\n    layoutRenderers: LayoutRenderers;\n}\n\nconst FormViewRenderersContext = createContext<FormViewRenderers | null>(null);\n\nconst useFormViewRenderers = (): FormViewRenderers => {\n    const ctx = useContext(FormViewRenderersContext);\n    if (!ctx) {\n        throw new Error(\"useFormViewRenderers must be used within a FormView.\");\n    }\n    return ctx;\n};\n\nexport { useFormViewRenderers };\n\ninterface FormViewProps {\n    name: string;\n    form: IFormVM;\n    renderers?: FieldRenderers;\n    layoutRenderers?: LayoutRenderers;\n}\n\n/**\n * Generic form view that walks layout nodes and renders fields.\n * This component is stateless — it reads from the FormVM and delegates to renderers.\n */\nexport const FormView = observer(({ name, form, renderers, layoutRenderers }: FormViewProps) => {\n    const defaultFieldRenderers = useFieldRenderers();\n    const defaultLayoutRenderers = useLayoutRenderers();\n\n    const value = useMemo(\n        () => ({\n            fieldRenderers: renderers ?? defaultFieldRenderers,\n            layoutRenderers: layoutRenderers ?? defaultLayoutRenderers\n        }),\n        [renderers, defaultFieldRenderers, layoutRenderers, defaultLayoutRenderers]\n    );\n\n    return (\n        <FormViewRenderersContext.Provider value={value}>\n            <DevToolsSection name={name} group=\"Forms\" data={form.getData()} views={\"raw\"} />\n            <div className=\"w-full relative flex flex-col gap-4\">\n                <DevModeTools form={form} />\n                {form.layout.map((node, index) => (\n                    <LayoutNodeRenderer key={index} node={node} />\n                ))}\n            </div>\n        </FormViewRenderersContext.Provider>\n    );\n});\n\nexport const LayoutNodeRenderer = observer(({ node }: { node: LayoutNodeVM }) => {\n    switch (node.type) {\n        case \"row\":\n            return <RowNodeRenderer node={node} />;\n        case \"separator\":\n            return <SeparatorNodeRenderer />;\n        case \"tabs\":\n            return <TabsNodeRenderer node={node} />;\n        case \"element\":\n            return <ElementNodeRenderer node={node} />;\n        default:\n            return null;\n    }\n});\n\nconst RowNodeRenderer = observer(({ node }: { node: IRowNodeVM }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n\n    return (\n        <Grid>\n            {node.fields.map(field => {\n                const span = Math.floor(12 / node.fields.length) as React.ComponentProps<\n                    typeof Grid.Column\n                >[\"span\"];\n\n                return (\n                    <Grid.Column key={field.name} span={span}>\n                        <FieldRenderer field={field} renderers={fieldRenderers} />\n                    </Grid.Column>\n                );\n            })}\n        </Grid>\n    );\n});\n\ninterface FieldRendererProps {\n    field: IFieldVM;\n    renderers: FieldRenderers;\n}\n\nconst FieldRenderer = observer(({ field, renderers }: FieldRendererProps) => {\n    const Renderer = field.renderer ? renderers[field.renderer] : undefined;\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(\n                `[FormView] No renderer found for field \"${field.name}\" (renderer: \"${field.renderer || \"none\"}\").`\n            );\n        }\n        return null;\n    }\n\n    return <Renderer field={field} />;\n});\n\nconst SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {\n    return <hr className=\"border-neutral-dimmed my-2\" />;\n});\n\nexport interface TabsNodeRendererProps {\n    node: ITabsNodeVM;\n}\n\nconst TabsNodeRenderer = observer(({ node }: TabsNodeRendererProps) => {\n    const { layoutRenderers } = useFormViewRenderers();\n\n    if (node.renderer) {\n        const CustomRenderer = layoutRenderers[node.renderer];\n        if (CustomRenderer) {\n            return <CustomRenderer node={node} />;\n        }\n    }\n\n    return (\n        <Tabs\n            value={node.activeTabId}\n            onValueChange={id => node.setActiveTab(id)}\n            tabs={node.tabs.map(tab => (\n                <Tabs.Tab\n                    key={tab.id}\n                    value={tab.id}\n                    icon={renderTabIcon(tab.icon)}\n                    trigger={\n                        <>\n                            {tab.label}\n                            {tab.hasErrors && (\n                                <span className=\"ml-1 text-destructive-default text-xs\">*</span>\n                            )}\n                        </>\n                    }\n                    disabled={tab.disabled}\n                    content={\n                        <div className={\"flex flex-col gap-4 mt-md\"}>\n                            {tab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    }\n                />\n            ))}\n        />\n    );\n});\n\nconst ElementNodeRenderer = observer(({ node }: { node: IElementNodeVM }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n    const Renderer = fieldRenderers[`element:${node.renderer}`];\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(`[FormView] No renderer found for element \"${node.renderer}\".`);\n        }\n        return null;\n    }\n\n    return <Renderer field={{ ...node.props } as any} />;\n});\n\ninterface DevModelToolsProps {\n    form: IFormVM;\n}\n\nconst DevModeTools = ({ form }: DevModelToolsProps) => {\n    const toast = useToast();\n\n    const handleCopy = () => {\n        const data = form.getData();\n        navigator.clipboard.writeText(JSON.stringify(data, null, 2));\n        toast.showSuccessToast({ title: \"Form data copied to clipboard.\" });\n    };\n\n    const handlePaste = async () => {\n        try {\n            const text = await navigator.clipboard.readText();\n            const data = JSON.parse(text);\n            form.setData(data);\n            toast.showSuccessToast({ title: \"Form data imported from clipboard.\" });\n        } catch {\n            toast.showWarningToast({\n                title: \"Failed to import. Make sure clipboard contains valid JSON.\"\n            });\n        }\n    };\n    return (\n        <DeveloperMode>\n            <div className=\"absolute top-0 right-0 w-[200px] h-[80px] z-10 group/devtools\">\n                <div className=\"absolute top-0 right-0 flex gap-xs opacity-0 group-hover/devtools:opacity-100 transition-opacity\">\n                    <Tooltip\n                        content=\"Copy form data to clipboard\"\n                        trigger={\n                            <IconButton\n                                variant={\"secondary\"}\n                                icon={<CopyIcon />}\n                                onClick={handleCopy}\n                                size=\"sm\"\n                            />\n                        }\n                    />\n                    <Tooltip\n                        content=\"Paste form data from clipboard\"\n                        trigger={\n                            <IconButton\n                                variant={\"secondary\"}\n                                icon={<PasteIcon />}\n                                onClick={handlePaste}\n                                size=\"sm\"\n                            />\n                        }\n                    />\n                </div>\n            </div>\n        </DeveloperMode>\n    );\n};\n"],"names":["renderTabIcon","icon","FontAwesomeIcon","FormViewRenderersContext","createContext","useFormViewRenderers","ctx","useContext","Error","FormView","observer","name","form","renderers","layoutRenderers","defaultFieldRenderers","useFieldRenderers","defaultLayoutRenderers","useLayoutRenderers","value","useMemo","DevToolsSection","DevModeTools","node","index","LayoutNodeRenderer","RowNodeRenderer","SeparatorNodeRenderer","TabsNodeRenderer","ElementNodeRenderer","fieldRenderers","Grid","field","span","Math","FieldRenderer","Renderer","undefined","process","console","CustomRenderer","Tabs","id","tab","childNode","toast","useToast","handleCopy","data","navigator","JSON","handlePaste","text","DeveloperMode","Tooltip","IconButton","CopyIcon","PasteIcon"],"mappings":"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"}