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

package/features/formModel/demo/FormModelDemo.js

@@ -0,0 +1,234 @@
+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";
+export 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 \u2014 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 \u2014 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 \u2014 Phase 11"), /*#__PURE__*/React.createElement("p", {
+    className: "text-sm text-neutral-strong"
+  }, "Conditional required (", /*#__PURE__*/React.createElement("code", null, "requiredWhen"), " on Seats \u2014 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
+}) => {
+  return /*#__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"
+  }, data === null ? "null" : JSON.stringify(data, null, 2)));
+};
+
+//# sourceMappingURL=FormModelDemo.js.map

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

@@ -0,0 +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","name","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 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"],"mappings":"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","ignoreList":[]}

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,121 @@
+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;
+    }
+  }
+  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;
+    }
+  }
+}
+
+//# sourceMappingURL=FormModelDemoPresenter.js.map

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

@@ -0,0 +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":[]}

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,104 @@
+import { makeAutoObservable, toJS } from "mobx";
+import { z } from "zod";
+/**
+ * Demo presenter exercising Phase 11 features: requiredWhen (builder + modifier
+ * chaining), computed/computedUntilDirty, .extend() on object fields, form-level
+ * addRule (Zod + imperative), and setLayout.
+ */
+export class FormModelPhase11Presenter {
+  lastSubmitted = null;
+  isSubmitting = false;
+  constructor(formFactory) {
+    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 => f.field("plan").getValue() === "pro", "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")
+      })
+    });
+
+    // Modifier-style: add children to the existing "profile" object field.
+    this.form.field("profile").as("object").fields(f => ({
+      company: f.text().label("Company"),
+      bio: f.text().label("Short bio")
+    }));
+
+    // Modifier-style requiredWhen: chains with the builder-defined one above.
+    // First truthy callback wins.
+    this.form.field("seats").addRequiredWhen(f => f.field("plan").getValue() === "enterprise", "Enterprise plan needs a seat count too");
+
+    // Form-level Zod rule: confirm must match password.
+    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"]
+    }));
+
+    // Imperative form-level rule.
+    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 [];
+    });
+
+    // setLayout — full replacement.
+    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 (result !== false) {
+        this.lastSubmitted = toJS(result);
+      }
+    } finally {
+      this.isSubmitting = false;
+    }
+  }
+  reset() {
+    this.form.reset();
+    this.lastSubmitted = null;
+  }
+}
+
+//# sourceMappingURL=FormModelPhase11Presenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","toJS","z","FormModelPhase11Presenter","lastSubmitted","isSubmitting","constructor","formFactory","form","create","fields","first","text","label","defaultValue","last","fullName","computed","f","field","getValue","slug","computedUntilDirty","full","trim","toLowerCase","replace","plan","options","value","seats","help","requiredWhen","profile","object","title","password","confirm","as","company","bio","addRequiredWhen","addRule","string","nullable","refine","d","message","path","String","length","setLayout","layout","row","separator","l","vm","data","getData","formErrors","errors","map","e","submit","result","reset"],"sources":["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"],"mappings":"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","ignoreList":[]}

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;
+}