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

package/features/formModel/demo/FormModelDemo.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","observer","useFeature","Button","FormView","FormModelFeature","FieldRenderersDemoPresenter","FormModelDemoPresenter","FormModelPhase8c1Presenter","FormModelPhase11Presenter","FormModelDemo","formModelFactory","presenter","form","data","lastSubmitted","isSubmitting","runtimeTemplateAdded","textTemplateRemoved","vm","createElement","className","FieldRenderersSection","text","variant","onClick","submit","disabled","reset","toggleRuntimeTemplate","toggleTextTemplate","DataPanel","title","Phase8c1Section","Phase11Section","formErrors","length","map","e","i","key","path","type","focusField","message","JSON","stringify"],"sources":["FormModelDemo.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { FormView } from \"../FormView.js\";\nimport { FormModelFeature } from \"../feature.js\";\nimport { FieldRenderersDemoPresenter } from \"./FieldRenderersDemoPresenter.js\";\nimport { FormModelDemoPresenter } from \"./FormModelDemoPresenter.js\";\nimport { FormModelPhase8c1Presenter } from \"./FormModelPhase8c1Presenter.js\";\nimport { FormModelPhase11Presenter } from \"./FormModelPhase11Presenter.js\";\n\nexport const FormModelDemo = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FormModelDemoPresenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting, runtimeTemplateAdded, textTemplateRemoved } =\n        presenter.vm;\n\n    return (\n        <div className={\"p-lg flex flex-col gap-2xl max-w-4xl mx-auto\"}>\n            <FieldRenderersSection />\n\n            <div className={\"flex flex-col gap-lg\"}>\n                <div className={\"flex flex-col gap-sm\"}>\n                    <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 8</h2>\n                    <p className={\"text-sm text-neutral-strong\"}>\n                        Exercises the full Phase 8 surface: single-object templates (&quot;Content\n                        Block&quot;), templated lists (&quot;Page Sections&quot;), per-template\n                        layouts (Hero spans two rows; Rich Text uses a single row; templates without\n                        a layout entry fall back to default), and runtime template management via{\" \"}\n                        <code>field.templates.add/remove</code>. Change Plan to{\" \"}\n                        <code>enterprise</code> to reveal the &quot;Premium Widget&quot; template in\n                        the Content Block picker.\n                    </p>\n                </div>\n\n                <FormView form={form} />\n\n                <div className={\"flex flex-wrap gap-sm\"}>\n                    <Button\n                        text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                        variant={\"primary\"}\n                        onClick={() => presenter.submit()}\n                        disabled={isSubmitting}\n                    />\n                    <Button\n                        text={\"Reset\"}\n                        variant={\"secondary\"}\n                        onClick={() => presenter.reset()}\n                        disabled={isSubmitting}\n                    />\n                    <Button\n                        text={\n                            runtimeTemplateAdded\n                                ? 'Remove \"Runtime Banner\" from sections'\n                                : 'Add \"Runtime Banner\" to sections'\n                        }\n                        variant={\"tertiary\"}\n                        onClick={() => presenter.toggleRuntimeTemplate()}\n                    />\n                    <Button\n                        text={\n                            textTemplateRemoved\n                                ? 'Restore \"Rich Text\" on content'\n                                : 'Remove \"Rich Text\" from content'\n                        }\n                        variant={\"tertiary\"}\n                        onClick={() => presenter.toggleTextTemplate()}\n                    />\n                </div>\n\n                <div className={\"grid grid-cols-2 gap-md\"}>\n                    <DataPanel title={\"Current getData()\"} data={data} />\n                    <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n                </div>\n            </div>\n\n            <Phase8c1Section />\n\n            <Phase11Section />\n        </div>\n    );\n});\n\nconst FieldRenderersSection = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FieldRenderersDemoPresenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;\n\n    return (\n        <div className={\"flex flex-col gap-lg\"}>\n            <div className={\"flex flex-col gap-sm\"}>\n                <h2 className={\"text-xl font-semibold\"}>Field Renderers Showcase</h2>\n                <p className={\"text-sm text-neutral-strong\"}>\n                    All field renderer variants: text, number, boolean, select\n                    (dropdown/radio/checkboxes), date/time (4 variants), tags, textarea, multi-value\n                    lists, hidden, and dynamic zones. Renderers not yet implemented show nothing\n                    (console warning).\n                </p>\n            </div>\n\n            <FormView form={form} />\n\n            {formErrors.length > 0 && (\n                <div className={\"flex flex-col gap-xs\"}>\n                    <div className={\"text-sm font-medium\"}>Form errors</div>\n                    <ul className={\"text-xs text-error-strong list-disc pl-md\"}>\n                        {formErrors.map((e, i) => (\n                            <li key={i}>\n                                {e.path ? (\n                                    <button\n                                        type={\"button\"}\n                                        className={\n                                            \"underline cursor-pointer hover:text-error-default\"\n                                        }\n                                        onClick={() => presenter.focusField(e.path)}\n                                    >\n                                        <code>{e.path}</code>\n                                    </button>\n                                ) : null}{\" \"}\n                                {e.message}\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            )}\n\n            <div className={\"flex flex-wrap gap-sm\"}>\n                <Button\n                    text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                    variant={\"primary\"}\n                    onClick={() => presenter.submit()}\n                    disabled={isSubmitting}\n                />\n                <Button\n                    text={\"Reset\"}\n                    variant={\"secondary\"}\n                    onClick={() => presenter.reset()}\n                    disabled={isSubmitting}\n                />\n            </div>\n\n            <div className={\"grid grid-cols-2 gap-md\"}>\n                <DataPanel title={\"Current getData()\"} data={data} />\n                <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n            </div>\n        </div>\n    );\n});\n\nconst Phase8c1Section = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FormModelPhase8c1Presenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting } = presenter.vm;\n\n    return (\n        <div className={\"flex flex-col gap-lg border-t border-neutral-dimmed pt-lg\"}>\n            <div className={\"flex flex-col gap-sm\"}>\n                <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 8c.1</h2>\n                <p className={\"text-sm text-neutral-strong\"}>\n                    Nested object layouts. A top-level <code>page</code> object whose inner layout\n                    is split across tabs (General / SEO). The SEO tab contains a nested{\" \"}\n                    <code>layout.object(&quot;seo&quot;, ...)</code> with its own row layout, and\n                    the SEO object itself contains another nested{\" \"}\n                    <code>layout.object(&quot;og&quot;, ...)</code> for the Open Graph fields. Phase\n                    8c.1 walks the inner layout (including across tabs) and forwards each nested{\" \"}\n                    <code>layout.object()</code> to the matching child at build time.\n                </p>\n            </div>\n\n            <FormView form={form} />\n\n            <div className={\"flex flex-wrap gap-sm\"}>\n                <Button\n                    text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                    variant={\"primary\"}\n                    onClick={() => presenter.submit()}\n                    disabled={isSubmitting}\n                />\n                <Button\n                    text={\"Reset\"}\n                    variant={\"secondary\"}\n                    onClick={() => presenter.reset()}\n                    disabled={isSubmitting}\n                />\n            </div>\n\n            <div className={\"grid grid-cols-2 gap-md\"}>\n                <DataPanel title={\"Current getData()\"} data={data} />\n                <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n            </div>\n        </div>\n    );\n});\n\nconst Phase11Section = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FormModelPhase11Presenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;\n\n    return (\n        <div className={\"flex flex-col gap-lg border-t border-neutral-dimmed pt-lg\"}>\n            <div className={\"flex flex-col gap-sm\"}>\n                <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 11</h2>\n                <p className={\"text-sm text-neutral-strong\"}>\n                    Conditional required (<code>requiredWhen</code> on Seats — chained builder +\n                    modifier rules), derived fields (<code>computed</code> Full Name and{\" \"}\n                    <code>computedUntilDirty</code> Slug), modifier-style child addition via{\" \"}\n                    <code>field.as(&quot;object&quot;).fields()</code> adding Company/Bio to\n                    Profile, form-level rules (<code>addRule</code> with a Zod refinement for\n                    password match plus an imperative slug-length rule), and a layout assembled via{\" \"}\n                    <code>setLayout</code>.\n                </p>\n            </div>\n\n            <FormView form={form} />\n\n            {formErrors.length > 0 && (\n                <div className={\"flex flex-col gap-xs\"}>\n                    <div className={\"text-sm font-medium\"}>Form errors</div>\n                    <ul className={\"text-xs text-error-strong list-disc pl-md\"}>\n                        {formErrors.map((e, i) => (\n                            <li key={i}>\n                                {e.path ? <code>{e.path}</code> : null} {e.message}\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            )}\n\n            <div className={\"flex flex-wrap gap-sm\"}>\n                <Button\n                    text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                    variant={\"primary\"}\n                    onClick={() => presenter.submit()}\n                    disabled={isSubmitting}\n                />\n                <Button\n                    text={\"Reset\"}\n                    variant={\"secondary\"}\n                    onClick={() => presenter.reset()}\n                    disabled={isSubmitting}\n                />\n            </div>\n\n            <div className={\"grid grid-cols-2 gap-md\"}>\n                <DataPanel title={\"Current getData()\"} data={data} />\n                <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n            </div>\n        </div>\n    );\n});\n\nconst DataPanel = ({ title, data }: { title: string; data: unknown }) => {\n    return (\n        <div className={\"flex flex-col gap-xs\"}>\n            <div className={\"text-sm font-medium\"}>{title}</div>\n            <pre\n                className={\n                    \"text-xs bg-neutral-subtle p-sm rounded border border-neutral-dimmed overflow-auto\"\n                }\n            >\n                {data === null ? \"null\" : JSON.stringify(data, null, 2)}\n            </pre>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"features/formModel/demo/FormModelDemo.js","sources":["../../../../src/features/formModel/demo/FormModelDemo.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { FormView } from \"../FormView.js\";\nimport { FormModelFeature } from \"../feature.js\";\nimport { FieldRenderersDemoPresenter } from \"./FieldRenderersDemoPresenter.js\";\nimport { FormModelDemoPresenter } from \"./FormModelDemoPresenter.js\";\nimport { FormModelPhase8c1Presenter } from \"./FormModelPhase8c1Presenter.js\";\nimport { FormModelPhase11Presenter } from \"./FormModelPhase11Presenter.js\";\n\nexport const FormModelDemo = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FormModelDemoPresenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting, runtimeTemplateAdded, textTemplateRemoved } =\n        presenter.vm;\n\n    return (\n        <div className={\"p-lg flex flex-col gap-2xl max-w-4xl mx-auto\"}>\n            <FieldRenderersSection />\n\n            <div className={\"flex flex-col gap-lg\"}>\n                <div className={\"flex flex-col gap-sm\"}>\n                    <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 8</h2>\n                    <p className={\"text-sm text-neutral-strong\"}>\n                        Exercises the full Phase 8 surface: single-object templates (&quot;Content\n                        Block&quot;), templated lists (&quot;Page Sections&quot;), per-template\n                        layouts (Hero spans two rows; Rich Text uses a single row; templates without\n                        a layout entry fall back to default), and runtime template management via{\" \"}\n                        <code>field.templates.add/remove</code>. Change Plan to{\" \"}\n                        <code>enterprise</code> to reveal the &quot;Premium Widget&quot; template in\n                        the Content Block picker.\n                    </p>\n                </div>\n\n                <FormView name=\"Demo\" form={form} />\n\n                <div className={\"flex flex-wrap gap-sm\"}>\n                    <Button\n                        text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                        variant={\"primary\"}\n                        onClick={() => presenter.submit()}\n                        disabled={isSubmitting}\n                    />\n                    <Button\n                        text={\"Reset\"}\n                        variant={\"secondary\"}\n                        onClick={() => presenter.reset()}\n                        disabled={isSubmitting}\n                    />\n                    <Button\n                        text={\n                            runtimeTemplateAdded\n                                ? 'Remove \"Runtime Banner\" from sections'\n                                : 'Add \"Runtime Banner\" to sections'\n                        }\n                        variant={\"tertiary\"}\n                        onClick={() => presenter.toggleRuntimeTemplate()}\n                    />\n                    <Button\n                        text={\n                            textTemplateRemoved\n                                ? 'Restore \"Rich Text\" on content'\n                                : 'Remove \"Rich Text\" from content'\n                        }\n                        variant={\"tertiary\"}\n                        onClick={() => presenter.toggleTextTemplate()}\n                    />\n                </div>\n\n                <div className={\"grid grid-cols-2 gap-md\"}>\n                    <DataPanel title={\"Current getData()\"} data={data} />\n                    <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n                </div>\n            </div>\n\n            <Phase8c1Section />\n\n            <Phase11Section />\n        </div>\n    );\n});\n\nconst FieldRenderersSection = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FieldRenderersDemoPresenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;\n\n    return (\n        <div className={\"flex flex-col gap-lg\"}>\n            <div className={\"flex flex-col gap-sm\"}>\n                <h2 className={\"text-xl font-semibold\"}>Field Renderers Showcase</h2>\n                <p className={\"text-sm text-neutral-strong\"}>\n                    All field renderer variants: text, number, boolean, select\n                    (dropdown/radio/checkboxes), date/time (4 variants), tags, textarea, multi-value\n                    lists, hidden, and dynamic zones. Renderers not yet implemented show nothing\n                    (console warning).\n                </p>\n            </div>\n\n            <FormView name=\"Demo\" form={form} />\n\n            {formErrors.length > 0 && (\n                <div className={\"flex flex-col gap-xs\"}>\n                    <div className={\"text-sm font-medium\"}>Form errors</div>\n                    <ul className={\"text-xs text-error-strong list-disc pl-md\"}>\n                        {formErrors.map((e, i) => (\n                            <li key={i}>\n                                {e.path ? (\n                                    <button\n                                        type={\"button\"}\n                                        className={\n                                            \"underline cursor-pointer hover:text-error-default\"\n                                        }\n                                        onClick={() => presenter.focusField(e.path)}\n                                    >\n                                        <code>{e.path}</code>\n                                    </button>\n                                ) : null}{\" \"}\n                                {e.message}\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            )}\n\n            <div className={\"flex flex-wrap gap-sm\"}>\n                <Button\n                    text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                    variant={\"primary\"}\n                    onClick={() => presenter.submit()}\n                    disabled={isSubmitting}\n                />\n                <Button\n                    text={\"Reset\"}\n                    variant={\"secondary\"}\n                    onClick={() => presenter.reset()}\n                    disabled={isSubmitting}\n                />\n            </div>\n\n            <div className={\"grid grid-cols-2 gap-md\"}>\n                <DataPanel title={\"Current getData()\"} data={data} />\n                <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n            </div>\n        </div>\n    );\n});\n\nconst Phase8c1Section = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FormModelPhase8c1Presenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting } = presenter.vm;\n\n    return (\n        <div className={\"flex flex-col gap-lg border-t border-neutral-dimmed pt-lg\"}>\n            <div className={\"flex flex-col gap-sm\"}>\n                <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 8c.1</h2>\n                <p className={\"text-sm text-neutral-strong\"}>\n                    Nested object layouts. A top-level <code>page</code> object whose inner layout\n                    is split across tabs (General / SEO). The SEO tab contains a nested{\" \"}\n                    <code>layout.object(&quot;seo&quot;, ...)</code> with its own row layout, and\n                    the SEO object itself contains another nested{\" \"}\n                    <code>layout.object(&quot;og&quot;, ...)</code> for the Open Graph fields. Phase\n                    8c.1 walks the inner layout (including across tabs) and forwards each nested{\" \"}\n                    <code>layout.object()</code> to the matching child at build time.\n                </p>\n            </div>\n\n            <FormView name=\"Demo\" form={form} />\n\n            <div className={\"flex flex-wrap gap-sm\"}>\n                <Button\n                    text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                    variant={\"primary\"}\n                    onClick={() => presenter.submit()}\n                    disabled={isSubmitting}\n                />\n                <Button\n                    text={\"Reset\"}\n                    variant={\"secondary\"}\n                    onClick={() => presenter.reset()}\n                    disabled={isSubmitting}\n                />\n            </div>\n\n            <div className={\"grid grid-cols-2 gap-md\"}>\n                <DataPanel title={\"Current getData()\"} data={data} />\n                <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n            </div>\n        </div>\n    );\n});\n\nconst Phase11Section = observer(() => {\n    const { formModelFactory } = useFeature(FormModelFeature);\n    const presenter = useMemo(\n        () => new FormModelPhase11Presenter(formModelFactory),\n        [formModelFactory]\n    );\n\n    const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;\n\n    return (\n        <div className={\"flex flex-col gap-lg border-t border-neutral-dimmed pt-lg\"}>\n            <div className={\"flex flex-col gap-sm\"}>\n                <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 11</h2>\n                <p className={\"text-sm text-neutral-strong\"}>\n                    Conditional required (<code>requiredWhen</code> on Seats — chained builder +\n                    modifier rules), derived fields (<code>computed</code> Full Name and{\" \"}\n                    <code>computedUntilDirty</code> Slug), modifier-style child addition via{\" \"}\n                    <code>field.as(&quot;object&quot;).fields()</code> adding Company/Bio to\n                    Profile, form-level rules (<code>addRule</code> with a Zod refinement for\n                    password match plus an imperative slug-length rule), and a layout assembled via{\" \"}\n                    <code>setLayout</code>.\n                </p>\n            </div>\n\n            <FormView name=\"Demo\" form={form} />\n\n            {formErrors.length > 0 && (\n                <div className={\"flex flex-col gap-xs\"}>\n                    <div className={\"text-sm font-medium\"}>Form errors</div>\n                    <ul className={\"text-xs text-error-strong list-disc pl-md\"}>\n                        {formErrors.map((e, i) => (\n                            <li key={i}>\n                                {e.path ? <code>{e.path}</code> : null} {e.message}\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            )}\n\n            <div className={\"flex flex-wrap gap-sm\"}>\n                <Button\n                    text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n                    variant={\"primary\"}\n                    onClick={() => presenter.submit()}\n                    disabled={isSubmitting}\n                />\n                <Button\n                    text={\"Reset\"}\n                    variant={\"secondary\"}\n                    onClick={() => presenter.reset()}\n                    disabled={isSubmitting}\n                />\n            </div>\n\n            <div className={\"grid grid-cols-2 gap-md\"}>\n                <DataPanel title={\"Current getData()\"} data={data} />\n                <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n            </div>\n        </div>\n    );\n});\n\nconst DataPanel = ({ title, data }: { title: string; data: unknown }) => {\n    return (\n        <div className={\"flex flex-col gap-xs\"}>\n            <div className={\"text-sm font-medium\"}>{title}</div>\n            <pre\n                className={\n                    \"text-xs bg-neutral-subtle p-sm rounded border border-neutral-dimmed overflow-auto\"\n                }\n            >\n                {data === null ? \"null\" : JSON.stringify(data, null, 2)}\n            </pre>\n        </div>\n    );\n};\n"],"names":["FormModelDemo","observer","formModelFactory","useFeature","FormModelFeature","presenter","useMemo","FormModelDemoPresenter","form","data","lastSubmitted","isSubmitting","runtimeTemplateAdded","textTemplateRemoved","FieldRenderersSection","FormView","Button","DataPanel","Phase8c1Section","Phase11Section","FieldRenderersDemoPresenter","formErrors","e","i","FormModelPhase8c1Presenter","FormModelPhase11Presenter","title","JSON"],"mappings":"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"}

package/features/formModel/demo/FormModelDemoPresenter.js

@@ -1,121 +1,140 @@
 import { makeAutoObservable, toJS } from "mobx";
 const RUNTIME_TEMPLATE_ID = "runtimeBanner";
-export class FormModelDemoPresenter {
-  lastSubmitted = null;
-  isSubmitting = false;
-  runtimeTemplateAdded = false;
-  textTemplateRemoved = false;
-  constructor(formFactory) {
-    this.form = formFactory.create({
-      fields: fields => ({
-        title: fields.text().label("Title").required("Title is required"),
-        content: fields.object().label("Content Block").required("Pick a template").template("hero", t => {
-          t.label("Hero Banner").fields(f => ({
-            heading: f.text().label("Heading").required("Required"),
-            subheading: f.text().label("Subheading"),
-            image: f.text().label("Image URL"),
-            cta: f.text().label("Call To Action")
-          }));
-        }).template("text", t => {
-          t.label("Rich Text").fields(f => ({
-            body: f.text().label("Body").required("Required")
-          }));
-        }).template("premium", t => {
-          t.label("Premium Widget").visible(form => form.field("plan").getValue() === "enterprise").fields(f => ({
-            config: f.text().label("Widget Config")
-          }));
-        }),
-        sections: fields.object().label("Page Sections").list().template("hero", t => {
-          t.label("Hero Banner").fields(f => ({
-            heading: f.text().label("Heading").required("Required"),
-            subheading: f.text().label("Subheading"),
-            image: f.text().label("Image URL")
-          }));
-        }).template("text", t => {
-          t.label("Rich Text").fields(f => ({
-            body: f.text().label("Body").required("Required")
-          }));
-        }).template("cta", t => {
-          t.label("Call To Action").fields(f => ({
-            label: f.text().label("Button Label").required("Required"),
-            url: f.text().label("Link URL")
-          }));
-        }),
-        plan: fields.text().label("Plan").defaultValue("free").options([{
-          label: "Free",
-          value: "free"
-        }, {
-          label: "Pro",
-          value: "pro"
-        }, {
-          label: "Enterprise",
-          value: "enterprise"
-        }])
-      }),
-      layout: layout => [layout.row("title"), layout.row("plan"), layout.object("content", {
-        hero: l => [l.row("heading", "subheading"), l.row("image"), l.row("cta")],
-        text: l => [l.row("body")]
-      }), layout.object("sections", {
-        hero: l => [l.row("heading", "subheading"), l.row("image")],
-        cta: l => [l.row("label", "url")]
-      })]
-    });
-    makeAutoObservable(this);
-  }
-  get vm() {
-    return {
-      form: this.form.vm,
-      data: toJS(this.form.getData()),
-      lastSubmitted: this.lastSubmitted,
-      isSubmitting: this.isSubmitting,
-      runtimeTemplateAdded: this.runtimeTemplateAdded,
-      textTemplateRemoved: this.textTemplateRemoved
-    };
-  }
-  async submit() {
-    this.isSubmitting = true;
-    try {
-      const result = await this.form.submit();
-      if (result !== false) {
-        this.lastSubmitted = toJS(result);
-      }
-    } finally {
-      this.isSubmitting = false;
+class FormModelDemoPresenter {
+    constructor(formFactory){
+        this.lastSubmitted = null;
+        this.isSubmitting = false;
+        this.runtimeTemplateAdded = false;
+        this.textTemplateRemoved = false;
+        this.form = formFactory.create({
+            fields: (fields)=>({
+                    title: fields.text().label("Title").required("Title is required"),
+                    content: fields.object().label("Content Block").required("Pick a template").template("hero", (t)=>{
+                        t.label("Hero Banner").fields((f)=>({
+                                heading: f.text().label("Heading").required("Required"),
+                                subheading: f.text().label("Subheading"),
+                                image: f.text().label("Image URL"),
+                                cta: f.text().label("Call To Action")
+                            }));
+                    }).template("text", (t)=>{
+                        t.label("Rich Text").fields((f)=>({
+                                body: f.text().label("Body").required("Required")
+                            }));
+                    }).template("premium", (t)=>{
+                        t.label("Premium Widget").visible((form)=>"enterprise" === form.field("plan").getValue()).fields((f)=>({
+                                config: f.text().label("Widget Config")
+                            }));
+                    }),
+                    sections: fields.object().label("Page Sections").list().template("hero", (t)=>{
+                        t.label("Hero Banner").fields((f)=>({
+                                heading: f.text().label("Heading").required("Required"),
+                                subheading: f.text().label("Subheading"),
+                                image: f.text().label("Image URL")
+                            }));
+                    }).template("text", (t)=>{
+                        t.label("Rich Text").fields((f)=>({
+                                body: f.text().label("Body").required("Required")
+                            }));
+                    }).template("cta", (t)=>{
+                        t.label("Call To Action").fields((f)=>({
+                                label: f.text().label("Button Label").required("Required"),
+                                url: f.text().label("Link URL")
+                            }));
+                    }),
+                    plan: fields.text().label("Plan").defaultValue("free").options([
+                        {
+                            label: "Free",
+                            value: "free"
+                        },
+                        {
+                            label: "Pro",
+                            value: "pro"
+                        },
+                        {
+                            label: "Enterprise",
+                            value: "enterprise"
+                        }
+                    ])
+                }),
+            layout: (layout)=>[
+                    layout.row("title"),
+                    layout.row("plan"),
+                    layout.object("content", {
+                        hero: (l)=>[
+                                l.row("heading", "subheading"),
+                                l.row("image"),
+                                l.row("cta")
+                            ],
+                        text: (l)=>[
+                                l.row("body")
+                            ]
+                    }),
+                    layout.object("sections", {
+                        hero: (l)=>[
+                                l.row("heading", "subheading"),
+                                l.row("image")
+                            ],
+                        cta: (l)=>[
+                                l.row("label", "url")
+                            ]
+                    })
+                ]
+        });
+        makeAutoObservable(this);
     }
-  }
-  reset() {
-    this.form.reset();
-    this.lastSubmitted = null;
-  }
-  toggleRuntimeTemplate() {
-    const sections = this.form.field("sections").as("object");
-    if (this.runtimeTemplateAdded) {
-      sections.templates.remove(RUNTIME_TEMPLATE_ID);
-      this.runtimeTemplateAdded = false;
-    } else {
-      sections.templates.add(RUNTIME_TEMPLATE_ID, t => {
-        t.label("Runtime Banner").fields(f => ({
-          headline: f.text().label("Headline").required("Required"),
-          note: f.text().label("Note")
-        }));
-      });
-      this.runtimeTemplateAdded = true;
+    get vm() {
+        return {
+            form: this.form.vm,
+            data: toJS(this.form.getData()),
+            lastSubmitted: this.lastSubmitted,
+            isSubmitting: this.isSubmitting,
+            runtimeTemplateAdded: this.runtimeTemplateAdded,
+            textTemplateRemoved: this.textTemplateRemoved
+        };
     }
-  }
-  toggleTextTemplate() {
-    const content = this.form.field("content").as("object");
-    if (this.textTemplateRemoved) {
-      content.templates.add("text", t => {
-        t.label("Rich Text").fields(f => ({
-          body: f.text().label("Body").required("Required")
-        }));
-      });
-      this.textTemplateRemoved = false;
-    } else {
-      content.templates.remove("text");
-      this.textTemplateRemoved = true;
+    async submit() {
+        this.isSubmitting = true;
+        try {
+            const result = await this.form.submit();
+            if (false !== result) this.lastSubmitted = toJS(result);
+        } finally{
+            this.isSubmitting = false;
+        }
+    }
+    reset() {
+        this.form.reset();
+        this.lastSubmitted = null;
+    }
+    toggleRuntimeTemplate() {
+        const sections = this.form.field("sections").as("object");
+        if (this.runtimeTemplateAdded) {
+            sections.templates.remove(RUNTIME_TEMPLATE_ID);
+            this.runtimeTemplateAdded = false;
+        } else {
+            sections.templates.add(RUNTIME_TEMPLATE_ID, (t)=>{
+                t.label("Runtime Banner").fields((f)=>({
+                        headline: f.text().label("Headline").required("Required"),
+                        note: f.text().label("Note")
+                    }));
+            });
+            this.runtimeTemplateAdded = true;
+        }
+    }
+    toggleTextTemplate() {
+        const content = this.form.field("content").as("object");
+        if (this.textTemplateRemoved) {
+            content.templates.add("text", (t)=>{
+                t.label("Rich Text").fields((f)=>({
+                        body: f.text().label("Body").required("Required")
+                    }));
+            });
+            this.textTemplateRemoved = false;
+        } else {
+            content.templates.remove("text");
+            this.textTemplateRemoved = true;
+        }
     }
-  }
 }
+export { FormModelDemoPresenter };
 
 //# sourceMappingURL=FormModelDemoPresenter.js.map

package/features/formModel/demo/FormModelDemoPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","toJS","RUNTIME_TEMPLATE_ID","FormModelDemoPresenter","lastSubmitted","isSubmitting","runtimeTemplateAdded","textTemplateRemoved","constructor","formFactory","form","create","fields","title","text","label","required","content","object","template","t","f","heading","subheading","image","cta","body","visible","field","getValue","config","sections","list","url","plan","defaultValue","options","value","layout","row","hero","l","vm","data","getData","submit","result","reset","toggleRuntimeTemplate","as","templates","remove","add","headline","note","toggleTextTemplate"],"sources":["FormModelDemoPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelDemoVM {\n    form: IFormVM;\n    data: Record<string, unknown>;\n    lastSubmitted: Record<string, unknown> | null;\n    isSubmitting: boolean;\n    runtimeTemplateAdded: boolean;\n    textTemplateRemoved: boolean;\n}\n\nconst RUNTIME_TEMPLATE_ID = \"runtimeBanner\";\n\nexport class FormModelDemoPresenter {\n    private form: IFormModel;\n    private lastSubmitted: Record<string, unknown> | null = null;\n    private isSubmitting = false;\n    private runtimeTemplateAdded = false;\n    private textTemplateRemoved = false;\n\n    constructor(formFactory: IFormModelFactory) {\n        this.form = formFactory.create({\n            fields: fields => ({\n                title: fields.text().label(\"Title\").required(\"Title is required\"),\n                content: fields\n                    .object()\n                    .label(\"Content Block\")\n                    .required(\"Pick a template\")\n                    .template(\"hero\", t => {\n                        t.label(\"Hero Banner\").fields(f => ({\n                            heading: f.text().label(\"Heading\").required(\"Required\"),\n                            subheading: f.text().label(\"Subheading\"),\n                            image: f.text().label(\"Image URL\"),\n                            cta: f.text().label(\"Call To Action\")\n                        }));\n                    })\n                    .template(\"text\", t => {\n                        t.label(\"Rich Text\").fields(f => ({\n                            body: f.text().label(\"Body\").required(\"Required\")\n                        }));\n                    })\n                    .template(\"premium\", t => {\n                        t.label(\"Premium Widget\")\n                            .visible(form => form.field(\"plan\").getValue() === \"enterprise\")\n                            .fields(f => ({\n                                config: f.text().label(\"Widget Config\")\n                            }));\n                    }),\n                sections: fields\n                    .object()\n                    .label(\"Page Sections\")\n                    .list()\n                    .template(\"hero\", t => {\n                        t.label(\"Hero Banner\").fields(f => ({\n                            heading: f.text().label(\"Heading\").required(\"Required\"),\n                            subheading: f.text().label(\"Subheading\"),\n                            image: f.text().label(\"Image URL\")\n                        }));\n                    })\n                    .template(\"text\", t => {\n                        t.label(\"Rich Text\").fields(f => ({\n                            body: f.text().label(\"Body\").required(\"Required\")\n                        }));\n                    })\n                    .template(\"cta\", t => {\n                        t.label(\"Call To Action\").fields(f => ({\n                            label: f.text().label(\"Button Label\").required(\"Required\"),\n                            url: f.text().label(\"Link URL\")\n                        }));\n                    }),\n                plan: fields\n                    .text()\n                    .label(\"Plan\")\n                    .defaultValue(\"free\")\n                    .options([\n                        { label: \"Free\", value: \"free\" },\n                        { label: \"Pro\", value: \"pro\" },\n                        { label: \"Enterprise\", value: \"enterprise\" }\n                    ])\n            }),\n            layout: layout => [\n                layout.row(\"title\"),\n                layout.row(\"plan\"),\n                layout.object(\"content\", {\n                    hero: l => [l.row(\"heading\", \"subheading\"), l.row(\"image\"), l.row(\"cta\")],\n                    text: l => [l.row(\"body\")]\n                }),\n                layout.object(\"sections\", {\n                    hero: l => [l.row(\"heading\", \"subheading\"), l.row(\"image\")],\n                    cta: l => [l.row(\"label\", \"url\")]\n                })\n            ]\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): FormModelDemoVM {\n        return {\n            form: this.form.vm,\n            data: toJS(this.form.getData()),\n            lastSubmitted: this.lastSubmitted,\n            isSubmitting: this.isSubmitting,\n            runtimeTemplateAdded: this.runtimeTemplateAdded,\n            textTemplateRemoved: this.textTemplateRemoved\n        };\n    }\n\n    async submit(): Promise<void> {\n        this.isSubmitting = true;\n        try {\n            const result = await this.form.submit<Record<string, unknown>>();\n            if (result !== false) {\n                this.lastSubmitted = toJS(result);\n            }\n        } finally {\n            this.isSubmitting = false;\n        }\n    }\n\n    reset(): void {\n        this.form.reset();\n        this.lastSubmitted = null;\n    }\n\n    toggleRuntimeTemplate(): void {\n        const sections = this.form.field(\"sections\").as(\"object\");\n        if (this.runtimeTemplateAdded) {\n            sections.templates.remove(RUNTIME_TEMPLATE_ID);\n            this.runtimeTemplateAdded = false;\n        } else {\n            sections.templates.add(RUNTIME_TEMPLATE_ID, t => {\n                t.label(\"Runtime Banner\").fields(f => ({\n                    headline: f.text().label(\"Headline\").required(\"Required\"),\n                    note: f.text().label(\"Note\")\n                }));\n            });\n            this.runtimeTemplateAdded = true;\n        }\n    }\n\n    toggleTextTemplate(): void {\n        const content = this.form.field(\"content\").as(\"object\");\n        if (this.textTemplateRemoved) {\n            content.templates.add(\"text\", t => {\n                t.label(\"Rich Text\").fields(f => ({\n                    body: f.text().label(\"Body\").required(\"Required\")\n                }));\n            });\n            this.textTemplateRemoved = false;\n        } else {\n            content.templates.remove(\"text\");\n            this.textTemplateRemoved = true;\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"features/formModel/demo/FormModelDemoPresenter.js","sources":["../../../../src/features/formModel/demo/FormModelDemoPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelDemoVM {\n    form: IFormVM;\n    data: Record<string, unknown>;\n    lastSubmitted: Record<string, unknown> | null;\n    isSubmitting: boolean;\n    runtimeTemplateAdded: boolean;\n    textTemplateRemoved: boolean;\n}\n\nconst RUNTIME_TEMPLATE_ID = \"runtimeBanner\";\n\nexport class FormModelDemoPresenter {\n    private form: IFormModel;\n    private lastSubmitted: Record<string, unknown> | null = null;\n    private isSubmitting = false;\n    private runtimeTemplateAdded = false;\n    private textTemplateRemoved = false;\n\n    constructor(formFactory: IFormModelFactory) {\n        this.form = formFactory.create({\n            fields: fields => ({\n                title: fields.text().label(\"Title\").required(\"Title is required\"),\n                content: fields\n                    .object()\n                    .label(\"Content Block\")\n                    .required(\"Pick a template\")\n                    .template(\"hero\", t => {\n                        t.label(\"Hero Banner\").fields(f => ({\n                            heading: f.text().label(\"Heading\").required(\"Required\"),\n                            subheading: f.text().label(\"Subheading\"),\n                            image: f.text().label(\"Image URL\"),\n                            cta: f.text().label(\"Call To Action\")\n                        }));\n                    })\n                    .template(\"text\", t => {\n                        t.label(\"Rich Text\").fields(f => ({\n                            body: f.text().label(\"Body\").required(\"Required\")\n                        }));\n                    })\n                    .template(\"premium\", t => {\n                        t.label(\"Premium Widget\")\n                            .visible(form => form.field(\"plan\").getValue() === \"enterprise\")\n                            .fields(f => ({\n                                config: f.text().label(\"Widget Config\")\n                            }));\n                    }),\n                sections: fields\n                    .object()\n                    .label(\"Page Sections\")\n                    .list()\n                    .template(\"hero\", t => {\n                        t.label(\"Hero Banner\").fields(f => ({\n                            heading: f.text().label(\"Heading\").required(\"Required\"),\n                            subheading: f.text().label(\"Subheading\"),\n                            image: f.text().label(\"Image URL\")\n                        }));\n                    })\n                    .template(\"text\", t => {\n                        t.label(\"Rich Text\").fields(f => ({\n                            body: f.text().label(\"Body\").required(\"Required\")\n                        }));\n                    })\n                    .template(\"cta\", t => {\n                        t.label(\"Call To Action\").fields(f => ({\n                            label: f.text().label(\"Button Label\").required(\"Required\"),\n                            url: f.text().label(\"Link URL\")\n                        }));\n                    }),\n                plan: fields\n                    .text()\n                    .label(\"Plan\")\n                    .defaultValue(\"free\")\n                    .options([\n                        { label: \"Free\", value: \"free\" },\n                        { label: \"Pro\", value: \"pro\" },\n                        { label: \"Enterprise\", value: \"enterprise\" }\n                    ])\n            }),\n            layout: layout => [\n                layout.row(\"title\"),\n                layout.row(\"plan\"),\n                layout.object(\"content\", {\n                    hero: l => [l.row(\"heading\", \"subheading\"), l.row(\"image\"), l.row(\"cta\")],\n                    text: l => [l.row(\"body\")]\n                }),\n                layout.object(\"sections\", {\n                    hero: l => [l.row(\"heading\", \"subheading\"), l.row(\"image\")],\n                    cta: l => [l.row(\"label\", \"url\")]\n                })\n            ]\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): FormModelDemoVM {\n        return {\n            form: this.form.vm,\n            data: toJS(this.form.getData()),\n            lastSubmitted: this.lastSubmitted,\n            isSubmitting: this.isSubmitting,\n            runtimeTemplateAdded: this.runtimeTemplateAdded,\n            textTemplateRemoved: this.textTemplateRemoved\n        };\n    }\n\n    async submit(): Promise<void> {\n        this.isSubmitting = true;\n        try {\n            const result = await this.form.submit<Record<string, unknown>>();\n            if (result !== false) {\n                this.lastSubmitted = toJS(result);\n            }\n        } finally {\n            this.isSubmitting = false;\n        }\n    }\n\n    reset(): void {\n        this.form.reset();\n        this.lastSubmitted = null;\n    }\n\n    toggleRuntimeTemplate(): void {\n        const sections = this.form.field(\"sections\").as(\"object\");\n        if (this.runtimeTemplateAdded) {\n            sections.templates.remove(RUNTIME_TEMPLATE_ID);\n            this.runtimeTemplateAdded = false;\n        } else {\n            sections.templates.add(RUNTIME_TEMPLATE_ID, t => {\n                t.label(\"Runtime Banner\").fields(f => ({\n                    headline: f.text().label(\"Headline\").required(\"Required\"),\n                    note: f.text().label(\"Note\")\n                }));\n            });\n            this.runtimeTemplateAdded = true;\n        }\n    }\n\n    toggleTextTemplate(): void {\n        const content = this.form.field(\"content\").as(\"object\");\n        if (this.textTemplateRemoved) {\n            content.templates.add(\"text\", t => {\n                t.label(\"Rich Text\").fields(f => ({\n                    body: f.text().label(\"Body\").required(\"Required\")\n                }));\n            });\n            this.textTemplateRemoved = false;\n        } else {\n            content.templates.remove(\"text\");\n            this.textTemplateRemoved = true;\n        }\n    }\n}\n"],"names":["RUNTIME_TEMPLATE_ID","FormModelDemoPresenter","formFactory","fields","t","f","form","layout","l","makeAutoObservable","toJS","result","sections","content"],"mappings":"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"}