@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/features/formModel/demo/FormModelDemo.js

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

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,22 @@
+import type { IFormModelFactory, IFormVM } from "../abstractions.js";
+export interface FormModelDemoVM {
+    form: IFormVM;
+    data: Record<string, unknown>;
+    lastSubmitted: Record<string, unknown> | null;
+    isSubmitting: boolean;
+    runtimeTemplateAdded: boolean;
+    textTemplateRemoved: boolean;
+}
+export declare class FormModelDemoPresenter {
+    private form;
+    private lastSubmitted;
+    private isSubmitting;
+    private runtimeTemplateAdded;
+    private textTemplateRemoved;
+    constructor(formFactory: IFormModelFactory);
+    get vm(): FormModelDemoVM;
+    submit(): Promise<void>;
+    reset(): void;
+    toggleRuntimeTemplate(): void;
+    toggleTextTemplate(): void;
+}

package/features/formModel/demo/FormModelDemoPresenter.js

@@ -0,0 +1,140 @@
+import { makeAutoObservable, toJS } from "mobx";
+const RUNTIME_TEMPLATE_ID = "runtimeBanner";
+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);
+    }
+    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 (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

@@ -0,0 +1 @@
+{"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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"}

package/features/formModel/demo/FormModelPhase11Presenter.d.ts

@@ -0,0 +1,25 @@
+import type { IFormModelFactory, IFormVM } from "../abstractions.js";
+export interface FormModelPhase11VM {
+    form: IFormVM;
+    data: Record<string, unknown>;
+    lastSubmitted: Record<string, unknown> | null;
+    isSubmitting: boolean;
+    formErrors: {
+        path: string;
+        message: string;
+    }[];
+}
+/**
+ * Demo presenter exercising Phase 11 features: requiredWhen (builder + modifier
+ * chaining), computed/computedUntilDirty, .extend() on object fields, form-level
+ * addRule (Zod + imperative), and setLayout.
+ */
+export declare class FormModelPhase11Presenter {
+    private form;
+    private lastSubmitted;
+    private isSubmitting;
+    constructor(formFactory: IFormModelFactory);
+    get vm(): FormModelPhase11VM;
+    submit(): Promise<void>;
+    reset(): void;
+}

package/features/formModel/demo/FormModelPhase11Presenter.js

@@ -0,0 +1,107 @@
+import { makeAutoObservable, toJS } from "mobx";
+import { z } from "zod";
+class FormModelPhase11Presenter {
+    constructor(formFactory){
+        this.lastSubmitted = null;
+        this.isSubmitting = false;
+        this.form = formFactory.create({
+            fields: (fields)=>({
+                    first: fields.text().label("First name").defaultValue("Ada"),
+                    last: fields.text().label("Last name").defaultValue("Lovelace"),
+                    fullName: fields.text().label("Full name (computed)").computed((f)=>`${f.field("first").getValue()} ${f.field("last").getValue()}`),
+                    slug: fields.text().label("Slug (computed until you edit it)").computedUntilDirty((f)=>{
+                        const full = `${f.field("first").getValue()} ${f.field("last").getValue()}`;
+                        return full.trim().toLowerCase().replace(/\s+/g, "-");
+                    }),
+                    plan: fields.text().label("Plan").defaultValue("free").options([
+                        {
+                            label: "Free",
+                            value: "free"
+                        },
+                        {
+                            label: "Pro",
+                            value: "pro"
+                        },
+                        {
+                            label: "Enterprise",
+                            value: "enterprise"
+                        }
+                    ]),
+                    seats: fields.text().label("Number of seats").help("Required when plan is pro or enterprise").requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Pro plan needs a seat count"),
+                    profile: fields.object().label("Profile").fields((f)=>({
+                            title: f.text().label("Title")
+                        })),
+                    password: fields.text().label("Password"),
+                    confirm: fields.text().label("Confirm password")
+                })
+        });
+        this.form.field("profile").as("object").fields((f)=>({
+                company: f.text().label("Company"),
+                bio: f.text().label("Short bio")
+            }));
+        this.form.field("seats").addRequiredWhen((f)=>"enterprise" === f.field("plan").getValue(), "Enterprise plan needs a seat count too");
+        this.form.addRule(z.object({
+            password: z.string().nullable(),
+            confirm: z.string().nullable()
+        }).refine((d)=>d.password === d.confirm || !d.password && !d.confirm, {
+            message: "Passwords must match",
+            path: [
+                "confirm"
+            ]
+        }));
+        this.form.addRule((f)=>{
+            const slug = String(f.field("slug").getValue() ?? "");
+            if (slug.length > 0 && slug.length < 3) return [
+                {
+                    path: "slug",
+                    message: "Slug must be at least 3 characters"
+                }
+            ];
+            return [];
+        });
+        this.form.setLayout((layout)=>[
+                layout.row("first", "last"),
+                layout.row("fullName"),
+                layout.row("slug"),
+                layout.separator(),
+                layout.row("plan", "seats"),
+                layout.separator(),
+                layout.object("profile", (l)=>[
+                        l.row("title"),
+                        l.row("company"),
+                        l.row("bio")
+                    ]),
+                layout.separator(),
+                layout.row("password", "confirm")
+            ]);
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            form: this.form.vm,
+            data: toJS(this.form.getData()),
+            lastSubmitted: this.lastSubmitted,
+            isSubmitting: this.isSubmitting,
+            formErrors: this.form.errors.map((e)=>({
+                    path: e.path,
+                    message: e.message
+                }))
+        };
+    }
+    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;
+    }
+}
+export { FormModelPhase11Presenter };
+
+//# sourceMappingURL=FormModelPhase11Presenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"features/formModel/demo/FormModelPhase11Presenter.js","sources":["../../../../src/features/formModel/demo/FormModelPhase11Presenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport { z } from \"zod\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelPhase11VM {\n    form: IFormVM;\n    data: Record<string, unknown>;\n    lastSubmitted: Record<string, unknown> | null;\n    isSubmitting: boolean;\n    formErrors: { path: string; message: string }[];\n}\n\n/**\n * Demo presenter exercising Phase 11 features: requiredWhen (builder + modifier\n * chaining), computed/computedUntilDirty, .extend() on object fields, form-level\n * addRule (Zod + imperative), and setLayout.\n */\nexport class FormModelPhase11Presenter {\n    private form: IFormModel;\n    private lastSubmitted: Record<string, unknown> | null = null;\n    private isSubmitting = false;\n\n    constructor(formFactory: IFormModelFactory) {\n        this.form = formFactory.create({\n            fields: fields => ({\n                first: fields.text().label(\"First name\").defaultValue(\"Ada\"),\n                last: fields.text().label(\"Last name\").defaultValue(\"Lovelace\"),\n                fullName: fields\n                    .text()\n                    .label(\"Full name (computed)\")\n                    .computed(f => `${f.field(\"first\").getValue()} ${f.field(\"last\").getValue()}`),\n                slug: fields\n                    .text()\n                    .label(\"Slug (computed until you edit it)\")\n                    .computedUntilDirty(f => {\n                        const full = `${f.field(\"first\").getValue()} ${f.field(\"last\").getValue()}`;\n                        return full.trim().toLowerCase().replace(/\\s+/g, \"-\");\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                seats: fields\n                    .text()\n                    .label(\"Number of seats\")\n                    .help(\"Required when plan is pro or enterprise\")\n                    .requiredWhen(\n                        f => f.field(\"plan\").getValue() === \"pro\",\n                        \"Pro plan needs a seat count\"\n                    ),\n                profile: fields\n                    .object()\n                    .label(\"Profile\")\n                    .fields(f => ({\n                        title: f.text().label(\"Title\")\n                    })),\n                password: fields.text().label(\"Password\"),\n                confirm: fields.text().label(\"Confirm password\")\n            })\n        });\n\n        // Modifier-style: add children to the existing \"profile\" object field.\n        this.form\n            .field(\"profile\")\n            .as(\"object\")\n            .fields(f => ({\n                company: f.text().label(\"Company\"),\n                bio: f.text().label(\"Short bio\")\n            }));\n\n        // Modifier-style requiredWhen: chains with the builder-defined one above.\n        // First truthy callback wins.\n        this.form\n            .field(\"seats\")\n            .addRequiredWhen(\n                f => f.field(\"plan\").getValue() === \"enterprise\",\n                \"Enterprise plan needs a seat count too\"\n            );\n\n        // Form-level Zod rule: confirm must match password.\n        this.form.addRule(\n            z\n                .object({\n                    password: z.string().nullable(),\n                    confirm: z.string().nullable()\n                })\n                .refine(d => d.password === d.confirm || (!d.password && !d.confirm), {\n                    message: \"Passwords must match\",\n                    path: [\"confirm\"]\n                })\n        );\n\n        // Imperative form-level rule.\n        this.form.addRule(f => {\n            const slug = String(f.field(\"slug\").getValue() ?? \"\");\n            if (slug.length > 0 && slug.length < 3) {\n                return [{ path: \"slug\", message: \"Slug must be at least 3 characters\" }];\n            }\n            return [];\n        });\n\n        // setLayout — full replacement.\n        this.form.setLayout(layout => [\n            layout.row(\"first\", \"last\"),\n            layout.row(\"fullName\"),\n            layout.row(\"slug\"),\n            layout.separator(),\n            layout.row(\"plan\", \"seats\"),\n            layout.separator(),\n            layout.object(\"profile\", l => [l.row(\"title\"), l.row(\"company\"), l.row(\"bio\")]),\n            layout.separator(),\n            layout.row(\"password\", \"confirm\")\n        ]);\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): FormModelPhase11VM {\n        return {\n            form: this.form.vm,\n            data: toJS(this.form.getData()),\n            lastSubmitted: this.lastSubmitted,\n            isSubmitting: this.isSubmitting,\n            formErrors: this.form.errors.map(e => ({\n                path: e.path,\n                message: e.message\n            }))\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"],"names":["FormModelPhase11Presenter","formFactory","fields","f","full","z","d","slug","String","layout","l","makeAutoObservable","toJS","e","result"],"mappings":"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"}

package/features/formModel/demo/FormModelPhase8c1Presenter.d.ts

@@ -0,0 +1,23 @@
+import type { IFormModelFactory, IFormVM } from "../abstractions.js";
+export interface FormModelPhase8c1VM {
+    form: IFormVM;
+    data: Record<string, unknown>;
+    lastSubmitted: Record<string, unknown> | null;
+    isSubmitting: boolean;
+}
+/**
+ * Demo presenter exercising Phase 8c.1: nested object layouts. The form has a
+ * top-level `page` object whose inner layout contains tabs, and one of those
+ * tabs contains a nested `seo` object with its own row layout. The Phase 8c.1
+ * registrar walks the inner layout (including tabs) and forwards the nested
+ * `layout.object("seo", ...)` to the seo field at build time.
+ */
+export declare class FormModelPhase8c1Presenter {
+    private form;
+    private lastSubmitted;
+    private isSubmitting;
+    constructor(formFactory: IFormModelFactory);
+    get vm(): FormModelPhase8c1VM;
+    submit(): Promise<void>;
+    reset(): void;
+}