feat(codegen-ts-react): view.image -> <ImageUpload> via Controller

The formFile template dispatches a view.image field to a react-hook-form
<Controller> wrapping <ImageUpload> (a native <input> can't drive a
file-upload control's value/onChange contract). The meta prop threads
the view's aspectRatio/maxEdge/store/accept/maxBytes attrs. The
Controller (react-hook-form) and ImageUpload (@metaobjectsdev/react)
imports are gated on the entity having an image field, mirroring the
existing useFieldArrayImport idiom.

Author: dmealing

server/typescript/packages/codegen-ts-react/src/templates/form-file.ts

@@ -46,7 +46,13 @@ import {
   VIEW_SUBTYPE_DROPDOWN,
   VIEW_SUBTYPE_CHECKBOX,
   VIEW_SUBTYPE_RADIO,
+  VIEW_SUBTYPE_IMAGE,
   VIEW_TEXTAREA_ATTR_ROWS,
+  VIEW_IMAGE_ATTR_ASPECT_RATIO,
+  VIEW_IMAGE_ATTR_MAX_EDGE,
+  VIEW_IMAGE_ATTR_STORE,
+  VIEW_IMAGE_ATTR_ACCEPT,
+  VIEW_IMAGE_ATTR_MAX_BYTES,
 } from "@metaobjectsdev/metadata";
 import { type RenderContext, entityModuleSpecifier, GENERATED_HEADER, tphDiscriminatorPin } from "@metaobjectsdev/codegen-ts";
 
@@ -386,6 +392,21 @@ ${control}
         `          <fieldset aria-label={${entityName}.${name}.label} className="metaobjects-field-radios">\n${radios}\n          </fieldset>`,
       );
     }
+    if (kind === VIEW_SUBTYPE_IMAGE) {
+      const num = (a: string) => {
+        const v = view?.attr(a);
+        return typeof v === "number" ? String(v) : "undefined";
+      };
+      const accept = view?.attr(VIEW_IMAGE_ATTR_ACCEPT) as string[] | undefined;
+      const acceptLit = accept ? JSON.stringify(accept) : "undefined";
+      const store = view?.attr(VIEW_IMAGE_ATTR_STORE);
+      const storeLit = typeof store === "string" ? JSON.stringify(store) : "undefined";
+      const meta = `{ aspectRatio: ${num(VIEW_IMAGE_ATTR_ASPECT_RATIO)}, maxEdge: ${num(VIEW_IMAGE_ATTR_MAX_EDGE)}, store: ${storeLit}, accept: ${acceptLit}, maxBytes: ${num(VIEW_IMAGE_ATTR_MAX_BYTES)} }`;
+      const control = `          <Controller name=${JSON.stringify(name)} control={form.control} render={({ field: f }) => (
+            <ImageUpload value={f.value as string | null} onChange={f.onChange} meta={${meta}} />
+          )} />`;
+      return labelAndError(name, control);
+    }
     return scalarBlock(name);
   };
 
@@ -412,13 +433,21 @@ ${control}
   const useFieldArrayImport =
     fieldArrayHooks.length > 0 ? `import { useFieldArray } from "react-hook-form";\n` : "";
 
+  // Only pull in Controller + ImageUpload when a view.image field needs them —
+  // a native <input> can't drive a file-upload control's value/onChange
+  // contract, so image fields are wrapped in react-hook-form's <Controller>.
+  const hasImage = fields.some((f) => f.views()[0]?.subType === VIEW_SUBTYPE_IMAGE);
+  const imageImports = hasImage
+    ? `import { Controller } from "react-hook-form";\nimport { ImageUpload } from "@metaobjectsdev/react";\n`
+    : "";
+
   const literalImports = code`
 import {
   ${entityName},
   ${entityName}InsertSchema,
 } from ${JSON.stringify(entityFileSpec)};
 import type { ${entityName} as ${entityName}Row } from ${JSON.stringify(entityFileSpec)};
-${useFieldArrayImport}`;
+${useFieldArrayImport}${imageImports}`;
 
   const body = code`
 export interface ${entityName}FormProps {

server/typescript/packages/codegen-ts-react/test/form-image.test.ts

@@ -0,0 +1,127 @@
+// Form controls: renderFormFile dispatches a view.image field to <ImageUpload>
+// wrapped in react-hook-form's <Controller> (a bound native <input> can't drive
+// a file-upload control's value/onChange contract). The Controller/ImageUpload
+// imports are gated — they must appear ONLY when the entity has an image field.
+import { describe, test, expect } from "bun:test";
+import {
+  MetaDataLoader,
+  InMemoryStringSource,
+  type MetaObject,
+  type MetaRoot,
+} from "@metaobjectsdev/metadata";
+import { renderFormFile } from "../src/templates/form-file.js";
+import { makeRenderContext, buildPkMap, buildRelationMap } from "@metaobjectsdev/codegen-ts";
+
+async function loadModel(): Promise<{ root: MetaRoot; doc: MetaObject; plain: MetaObject }> {
+  const loader = new MetaDataLoader();
+  const { root, errors } = await loader.load([
+    new InMemoryStringSource(
+      JSON.stringify({
+        "metadata.root": {
+          package: "demo",
+          children: [
+            {
+              "object.entity": {
+                name: "Doc",
+                children: [
+                  { "source.rdb": { "@table": "docs" } },
+                  { "field.long": { name: "id" } },
+                  { "identity.primary": { name: "id", "@fields": "id", "@generation": "increment" } },
+                  {
+                    "field.string": {
+                      name: "coverKey",
+                      "@maxLength": 80,
+                      children: [
+                        {
+                          "view.image": {
+                            "@aspectRatio": 1.777,
+                            "@maxEdge": 2000,
+                            "@store": "photos",
+                            "@accept": ["image/jpeg", "image/png"],
+                            "@maxBytes": 10485760,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              "object.entity": {
+                name: "Plain",
+                children: [
+                  { "source.rdb": { "@table": "plains" } },
+                  { "field.long": { name: "id" } },
+                  { "identity.primary": { name: "id", "@fields": "id", "@generation": "increment" } },
+                  { "field.string": { name: "name", "@required": true } },
+                ],
+              },
+            },
+          ],
+        },
+      }),
+      { id: "doc.json" },
+    ),
+  ]);
+  if (errors.length > 0) throw new Error(errors.map((e) => e.message).join("; "));
+  const doc = root.objects().find((o) => o.name === "Doc")! as MetaObject;
+  const plain = root.objects().find((o) => o.name === "Plain")! as MetaObject;
+  return { root, doc, plain };
+}
+
+function ctxFor(root: MetaRoot) {
+  return makeRenderContext({
+    dialect: "postgres",
+    loadedRoot: root,
+    outDir: "/x",
+    dbImport: "../db",
+    extStyle: "none",
+    apiPrefix: "/api",
+    pkMap: buildPkMap(root),
+    relationMap: buildRelationMap(root),
+  });
+}
+
+describe("form controls — view.image dispatch", () => {
+  test("a view.image field renders <ImageUpload> wrapped in <Controller>", async () => {
+    const { root, doc } = await loadModel();
+    const out = renderFormFile(doc, ctxFor(root));
+    expect(out).toContain("<ImageUpload");
+    expect(out).toContain("Controller");
+    expect(out).not.toMatch(/form\.input\.coverKey/);
+  });
+
+  test("the gated imports are emitted for an image entity", async () => {
+    const { root, doc } = await loadModel();
+    const out = renderFormFile(doc, ctxFor(root));
+    expect(out).toContain('import { Controller } from "react-hook-form"');
+    // Specifically the ImageUpload specifier, not just any "@metaobjectsdev/react"
+    // import — useEntityForm's import from the same package is unconditional.
+    expect(out).toContain('import { ImageUpload } from "@metaobjectsdev/react"');
+    expect(out).toMatch(/from "@metaobjectsdev\/react"/);
+  });
+
+  test("the <ImageUpload> meta object carries all five view.image attrs", async () => {
+    const { root, doc } = await loadModel();
+    const out = renderFormFile(doc, ctxFor(root));
+    expect(out).toContain("aspectRatio: 1.777");
+    expect(out).toContain("maxEdge: 2000");
+    expect(out).toContain('store: "photos"');
+    // Format-tolerant: the ts-poet `code` template reformats interpolated
+    // content (e.g. adds a space after the array-literal comma).
+    expect(out).toMatch(/accept:\s*\[\s*"image\/jpeg",\s*"image\/png"\s*\]/);
+    expect(out).toContain("maxBytes: 10485760");
+  });
+
+  test("a non-image entity emits neither the ImageUpload import nor a Controller import (gated)", async () => {
+    const { root, plain } = await loadModel();
+    const out = renderFormFile(plain, ctxFor(root));
+    // NOTE: useEntityForm is imported from "@metaobjectsdev/react" on every
+    // generated form, image or not — so the gating assertion targets the
+    // ImageUpload/Controller specifiers specifically, not the bare package.
+    expect(out).not.toContain("ImageUpload");
+    expect(out).not.toContain("Controller");
+    expect(out).not.toContain('import { ImageUpload }');
+  });
+});