@webiny/app-admin 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

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

@@ -33,13 +33,17 @@ 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: (({ name, form, renderers, layoutRenderers }: FormViewProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const FormView: (({ name, form, renderers, layoutRenderers }: FormViewProps) => React.JSX.Element) & React.NamedExoticComponent<FormViewProps> & {
+    readonly type: ({ name, form, renderers, layoutRenderers }: FormViewProps) => React.JSX.Element;
 };
 export declare const LayoutNodeRenderer: (({ node }: {
     node: LayoutNodeVM;
-}) => React.JSX.Element | null) & {
-    displayName: string;
+}) => React.JSX.Element | null) & React.NamedExoticComponent<{
+    node: LayoutNodeVM;
+}> & {
+    readonly type: ({ node }: {
+        node: LayoutNodeVM;
+    }) => React.JSX.Element | null;
 };
 export interface TabsNodeRendererProps {
     node: ITabsNodeVM;

package/features/formModel/FormView.js

@@ -1,234 +1,206 @@
-import React, { createContext, useContext, useMemo } from "react";
+import react, { createContext, useContext, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Grid, IconButton, Tabs, Tooltip, useToast } from "@webiny/admin-ui";
-import { ReactComponent as CopyIcon } from "@webiny/icons/content_copy.svg";
-import { ReactComponent as PasteIcon } from "@webiny/icons/content_paste.svg";
+import { Alert, Grid, IconButton, Separator, Tabs, Text, 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 || "string" != typeof icon.name) 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(({
-  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
-  }))));
+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, {
+                node: node
+            });
+        case "alert":
+            return /*#__PURE__*/ react.createElement(FormView_AlertNodeRenderer, {
+                node: node
+            });
+        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({ node }) {
+    if (node.title) return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Separator, {
+        variant: "accent",
+        labelPosition: "start"
+    }, node.title), node.description ? /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "mt-xs"
+    }, node.description) : null);
+    return /*#__PURE__*/ react.createElement(Separator, {
+        variant: "dimmed"
+    });
 });
-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
-      })))
-    }))
-  });
+const FormView_AlertNodeRenderer = observer(function({ node }) {
+    if (!node.message) return null;
+    return /*#__PURE__*/ react.createElement(Alert, {
+        type: node.alertType
+    }, node.message);
 });
-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}".`);
+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 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."
+    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 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."
-      });
+});
+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(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(CopyIcon, 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(PasteIcon, null),
-      onClick: handlePaste,
-      size: "sm"
-    })
-  }))));
+    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","IconButton","Tabs","Tooltip","useToast","ReactComponent","CopyIcon","PasteIcon","DevToolsSection","FontAwesomeIcon","DeveloperMode","useFieldRenderers","useLayoutRenderers","renderTabIcon","icon","undefined","createElement","name","split","FormViewRenderersContext","useFormViewRenderers","ctx","Error","FormView","form","renderers","layoutRenderers","defaultFieldRenderers","defaultLayoutRenderers","value","fieldRenderers","Provider","group","data","getData","views","className","DevModeTools","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","toast","handleCopy","navigator","clipboard","writeText","JSON","stringify","showSuccessToast","title","handlePaste","text","readText","parse","setData","showWarningToast","variant","onClick","size"],"sources":["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"],"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 {\n    Alert,\n    Grid,\n    IconButton,\n    Separator,\n    Tabs,\n    Text,\n    Tooltip,\n    useToast\n} 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    ISeparatorNodeVM,\n    IAlertNodeVM,\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 || typeof icon.name !== \"string\") {\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 node={node} />;\n        case \"alert\":\n            return <AlertNodeRenderer node={node} />;\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    node\n}: {\n    node: ISeparatorNodeVM;\n}) {\n    if (node.title) {\n        return (\n            <div>\n                <Separator variant={\"accent\"} labelPosition={\"start\"}>\n                    {node.title}\n                </Separator>\n                {node.description ? (\n                    <Text size={\"sm\"} className={\"mt-xs\"}>\n                        {node.description}\n                    </Text>\n                ) : null}\n            </div>\n        );\n    }\n    return <Separator variant={\"dimmed\"} />;\n});\n\nconst AlertNodeRenderer = observer(function AlertNodeRenderer({ node }: { node: IAlertNodeVM }) {\n    if (!node.message) {\n        return null;\n    }\n    return <Alert type={node.alertType}>{node.message}</Alert>;\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","AlertNodeRenderer","TabsNodeRenderer","ElementNodeRenderer","fieldRenderers","Grid","field","span","Math","FieldRenderer","Renderer","undefined","process","console","Separator","Text","Alert","CustomRenderer","Tabs","id","tab","childNode","toast","useToast","handleCopy","data","navigator","JSON","handlePaste","text","DeveloperMode","Tooltip","IconButton","CopyIcon","PasteIcon"],"mappings":"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"}

package/features/formModel/LayoutBuilderFactory.d.ts

@@ -21,11 +21,12 @@ export declare class TabBuilder implements TabBuilderInternal {
 export declare class TabsBuilder implements ITabsBuilder {
     private _id;
     private _renderer;
+    private _rendererSettings;
     private _rules;
     private _pendingTabs;
     private _lastAddedIdx;
     constructor(id?: string);
-    renderer(name: string): this;
+    renderer(name: string, settings?: Record<string, unknown>): this;
     tab(tabId: string, configure: (tab: ITabBuilder) => void): this;
     before(_target: string): this;
     after(_target: string): this;
@@ -36,7 +37,7 @@ export declare class TabsAccessBuilder implements ITabsBuilder {
     private _node;
     private _lastAddedIdx;
     constructor(_node: ITabsNode);
-    renderer(name: string): this;
+    renderer(name: string, settings?: Record<string, unknown>): this;
     tab(tabId: string, configure: (tab: ITabBuilder) => void): this;
     before(target: string): this;
     after(target: string): this;