Add nested object support in json schema generation (#166)

* Add nested object support in json schema generation

* Add changeset

* Update packages/fabrix/src/renderers/form/validation.ts

Co-authored-by: Akira HIGUCHI <akira_higuchi@tailor.tech>

* Add more test cases

---------

Co-authored-by: Akira HIGUCHI <akira_higuchi@tailor.tech>

Author: IzumiSy

.changeset/brave-apples-love.md

@@ -0,0 +1,5 @@
+---
+"@fabrix-framework/fabrix": minor
+---
+
+Support constraints for nested object field in fabrixForm directive API

packages/fabrix/src/renderers/form/validation.test.ts

@@ -0,0 +1,184 @@
+import { describe, expect, it } from "vitest";
+import { Path } from "@visitor/path";
+import { buildAjvSchema } from "./validation";
+
+describe("buildAjvSchema", () => {
+  it("empty input should return an empty schema", () => {
+    expect(buildAjvSchema([])).toEqual({
+      type: "object",
+      properties: {},
+      required: [],
+      additionalProperties: true,
+    });
+  });
+
+  const id = {
+    input: {
+      meta: {
+        fieldType: { type: "Scalar", name: "ID" },
+        isRequired: true,
+      },
+      constraint: null,
+      config: {
+        hidden: false,
+        gridCol: 12,
+      },
+    },
+    expected: {
+      id: {
+        type: "string",
+      },
+    },
+  } as const;
+
+  const name = {
+    input: {
+      meta: {
+        fieldType: { type: "Scalar", name: "String" },
+        isRequired: true,
+      },
+      constraint: { minLength: 3, maxLength: 5 },
+      config: {
+        hidden: false,
+        gridCol: 12,
+      },
+    },
+    expected: {
+      name: {
+        type: "string",
+        minLength: 3,
+        maxLength: 5,
+      },
+    },
+  } as const;
+
+  const age = {
+    input: {
+      meta: {
+        fieldType: { type: "Scalar", name: "Int" },
+        isRequired: false,
+      },
+      constraint: { min: 0, max: 65 },
+      config: {
+        hidden: false,
+        gridCol: 12,
+      },
+    },
+    expected: {
+      age: {
+        type: "number",
+        minimum: 0,
+        maximum: 65,
+      },
+    },
+  } as const;
+
+  it.each([
+    [
+      "fields - no level",
+      [
+        {
+          field: new Path(["name"]),
+          ...name.input,
+        },
+        {
+          field: new Path(["age"]),
+          ...age.input,
+        },
+      ],
+      {
+        type: "object",
+        properties: {
+          ...name.expected,
+          ...age.expected,
+        },
+        required: ["name"],
+        additionalProperties: true,
+      },
+    ],
+
+    [
+      "containing some nested fields - 2 level",
+      [
+        {
+          field: new Path(["id"]),
+          ...id.input,
+        },
+        {
+          field: new Path(["input", "name"]),
+          ...name.input,
+        },
+        {
+          field: new Path(["input", "age"]),
+          ...age.input,
+        },
+      ],
+      {
+        type: "object",
+        properties: {
+          ...id.expected,
+          input: {
+            type: "object",
+            properties: {
+              ...name.expected,
+              ...age.expected,
+            },
+            required: ["name"],
+            additionalProperties: true,
+          },
+        },
+        required: ["id"],
+        additionalProperties: true,
+      },
+    ],
+
+    [
+      "containing nested fields - 3 level",
+      [
+        {
+          field: new Path(["id"]),
+          ...id.input,
+        },
+        {
+          field: new Path(["input", "id"]),
+          ...id.input,
+        },
+        {
+          field: new Path(["input", "nested", "name"]),
+          ...name.input,
+        },
+        {
+          field: new Path(["input", "nested", "age"]),
+          ...age.input,
+        },
+      ],
+      {
+        type: "object",
+        properties: {
+          ...id.expected,
+          input: {
+            type: "object",
+            properties: {
+              ...id.expected,
+              nested: {
+                type: "object",
+                properties: {
+                  ...name.expected,
+                  ...age.expected,
+                },
+                required: ["name"],
+                additionalProperties: true,
+              },
+            },
+            required: ["id"],
+            additionalProperties: true,
+          },
+        },
+        required: ["id"],
+        additionalProperties: true,
+      },
+    ],
+  ])("should return a schema (%s)", (_, input, expected) => {
+    expect(buildAjvSchema(input)).toEqual(expected);
+  });
+});

packages/fabrix/src/renderers/form/validation.ts

@@ -1,4 +1,5 @@
 import { FormField, FormFields } from "@renderers/form";
+import { JSONSchemaType } from "ajv";
 
 const convertToAjvProperty = (field: FormField) => {
   switch (field.meta?.fieldType?.type) {
@@ -31,27 +32,57 @@ const convertToAjvProperty = (field: FormField) => {
             type: "boolean",
           } as const;
       }
+    case "Enum": {
+      return {
+        type: "string",
+        enum: field.meta.fieldType.meta.values,
+      } as const;
+    }
     default:
       // TODO: handle other types (e.g. object, array)
       return null;
   }
 };
 
-export const buildAjvSchema = (fields: FormFields) => {
-  const visibleFields = fields.filter((field) => !field.config.hidden);
-  const requiredFields = visibleFields.filter(
-    (field) => field.meta?.isRequired,
-  );
+type SchemaType = {
+  type: "object";
+  properties: Record<string, unknown>;
+  required: Array<string>;
+  additionalProperties: true;
+};
 
-  return {
+export const buildAjvSchema = (fields: FormFields) => {
+  const schema: SchemaType = {
     type: "object",
-    properties: visibleFields.reduce((acc, field) => {
-      const property = convertToAjvProperty(field);
-      return property === null
-        ? acc
-        : { ...acc, [field.field.asKey()]: property };
-    }, {}),
-    required: requiredFields.map((field) => field.field.asKey()),
+    properties: {},
+    required: [],
     additionalProperties: true,
-  } as const;
+  };
+
+  fields.forEach((field) => {
+    const path = field.field.asKey().split(".");
+    const current = path.slice(0, -1).reduce<SchemaType>((acc, key) => {
+      if (!acc.properties[key]) {
+        acc.properties[key] = {
+          type: "object",
+          properties: {},
+          required: [],
+          additionalProperties: true,
+        };
+      }
+      return acc.properties[key] as SchemaType;
+    }, schema);
+
+    const lastKey = path[path.length - 1];
+    const property = convertToAjvProperty(field);
+
+    if (property !== null) {
+      current.properties[lastKey] = property;
+      if (field.meta?.isRequired) {
+        current.required.push(lastKey);
+      }
+    }
+  });
+
+  return schema as unknown as JSONSchemaType<Record<string, unknown>>;
 };