allow non-object array items

This also simplifies field generation a bit by removing the object
special case as well as the array special case which

Author: lukad

next/src/field/array.ts

@@ -1,7 +1,6 @@
 import type { JsfObjectSchema, JsfSchema, JsfSchemaType, NonBooleanJsfSchema } from '../types'
 import type { Field, FieldOption, FieldType } from './type'
-import { buildFieldArray } from './array'
-import { buildFieldObject } from './object'
+import { setCustomOrder } from '../custom/order'
 
 /**
  * Add checkbox attributes to a field
@@ -49,13 +48,8 @@ function getInputTypeFromSchema(type: JsfSchemaType, schema: NonBooleanJsfSchema
       return 'number'
     case 'object':
       return 'fieldset'
-    case 'array': {
-      const { items } = schema
-      if (items?.properties) {
-        return 'group-array'
-      }
-      return 'select'
-    }
+    case 'array':
+      return 'group-array'
     case 'boolean':
       return 'checkbox'
     default:
@@ -68,7 +62,7 @@ function getInputTypeFromSchema(type: JsfSchemaType, schema: NonBooleanJsfSchema
  * @param schema - The non boolean schema of the field
  * @returns The input type for the field, based schema type. Default to 'text'
  */
-function getInputType(schema: NonBooleanJsfSchema, strictInputType?: boolean): FieldType {
+export function getInputType(schema: NonBooleanJsfSchema, strictInputType?: boolean): FieldType {
   const presentation = schema['x-jsf-presentation']
   if (presentation?.inputType) {
     return presentation.inputType as FieldType
@@ -170,6 +164,68 @@ function getFieldOptions(schema: NonBooleanJsfSchema) {
   return null
 }
 
+function getObjectFields(schema: NonBooleanJsfSchema, strictInputType?: boolean): Field[] | null {
+  const fields: Field[] = []
+
+  for (const key in schema.properties) {
+    const isRequired = schema.required?.includes(key) || false
+    const field = buildFieldSchema(schema.properties[key], key, isRequired, strictInputType)
+    if (field) {
+      fields.push(field)
+    }
+  }
+
+  const orderedFields = setCustomOrder({ fields, schema })
+
+  return orderedFields
+}
+
+function getArrayFields(schema: NonBooleanJsfSchema, strictInputType?: boolean): Field[] {
+  const fields: Field[] = []
+
+  if (typeof schema.items !== 'object' || schema.items === null) {
+    return []
+  }
+
+  if (schema.items?.type === 'object') {
+    const objectSchema = schema.items as JsfObjectSchema
+
+    for (const key in objectSchema.properties) {
+      const isFieldRequired = objectSchema.required?.includes(key) || false
+      const field = buildFieldSchema(objectSchema.properties[key], key, isFieldRequired, strictInputType)
+      if (field) {
+        field.nameKey = key
+        fields.push(field)
+      }
+    }
+  }
+  else {
+    const field = buildFieldSchema(schema.items, 'item', false, strictInputType)
+    if (field) {
+      fields.push(field)
+    }
+  }
+
+  return fields
+}
+
+/**
+ * Get the fields for a schema from either `items` or `properties`
+ * @param schema - The schema of the field
+ * @param strictInputType - Whether to strictly enforce the input type
+ * @returns The fields for the schema
+ */
+function getFields(schema: NonBooleanJsfSchema, strictInputType?: boolean): Field[] | null {
+  if (typeof schema.items === 'object') {
+    return getArrayFields(schema, strictInputType)
+  }
+  else if (schema.type === 'object') {
+    return getObjectFields(schema, strictInputType)
+  }
+
+  return null
+}
+
 /**
  * List of schema properties that should be excluded from the final field or handled specially
  */
@@ -180,7 +236,7 @@ const excludedSchemaProps = [
   'x-jsf-presentation', // Handled separately
   'oneOf', // Transformed to 'options'
   'anyOf', // Transformed to 'options'
-  'items', // Handled specially for arrays
+  'properties', // Handled separately
 ]
 
 /**
@@ -210,16 +266,6 @@ export function buildFieldSchema(
     return null
   }
 
-  if (schema.type === 'object') {
-    const objectSchema: JsfObjectSchema = { ...schema, type: 'object' }
-    return buildFieldObject(objectSchema, name, required)
-  }
-
-  if (schema.type === 'array') {
-    const arraySchema = schema as NonBooleanJsfSchema & { type: 'array' }
-    return buildFieldArray(arraySchema, name, required, strictInputType)
-  }
-
   const presentation = schema['x-jsf-presentation'] || {}
   const errorMessage = schema['x-jsf-errorMessage']
 
@@ -264,5 +310,11 @@ export function buildFieldSchema(
     field.options = options
   }
 
+  // Handle array fields
+  const fields = getFields(schema, strictInputType)
+  if (fields) {
+    field.fields = fields
+  }
+
   return field
 }

next/src/field/object.ts

@@ -3,7 +3,7 @@ import type { Field } from './field/type'
 import type { JsfObjectSchema, JsfSchema, SchemaValue } from './types'
 import type { ValidationOptions } from './validation/schema'
 import { getErrorMessage } from './errors/messages'
-import { buildFieldObject } from './field/object'
+import { buildFieldSchema } from './field/schema'
 import { mutateFields } from './mutations'
 import { validateSchema } from './validation/schema'
 
@@ -233,7 +233,7 @@ export interface CreateHeadlessFormOptions {
 
 function buildFields(params: { schema: JsfObjectSchema, strictInputType?: boolean }): Field[] {
   const { schema, strictInputType } = params
-  const fields = buildFieldObject(schema, 'root', true, strictInputType).fields || []
+  const fields = buildFieldSchema(schema, 'root', true, strictInputType)?.fields || []
   return fields
 }
 
@@ -281,7 +281,7 @@ function buildFieldsInPlace(fields: Field[], schema: JsfObjectSchema): void {
   fields.length = 0
 
   // Get new fields from schema
-  const newFields = buildFieldObject(schema, 'root', true).fields || []
+  const newFields = buildFieldSchema(schema, 'root', true)?.fields || []
 
   // Push all new fields into existing array
   fields.push(...newFields)

next/src/field/schema.ts

@@ -93,3 +93,11 @@ export type NonBooleanJsfSchema = Exclude<JsfSchema, boolean>
 export type JsfObjectSchema = NonBooleanJsfSchema & {
   type: 'object'
 }
+
+/**
+ * JSON Schema Form type specifically for array schemas.
+ * This type ensures the schema has type 'array'.
+ */
+export type JsfArraySchema = NonBooleanJsfSchema & {
+  type: 'array'
+}

next/src/form.ts

@@ -138,12 +138,17 @@ describe('buildFieldArray', () => {
     expect(nestedFields?.[0]?.name).toBe('name')
   })
 
-  it('throws an error if the items schema is not an object', () => {
-    expect(() => buildFieldSchema({ type: 'array', items: { type: 'string' } }, 'root', true)).toThrow()
-    expect(() => buildFieldSchema({ type: 'array', items: { type: 'number' } }, 'root', true)).toThrow()
-    expect(() => buildFieldSchema({ type: 'array', items: { type: 'array' } }, 'root', true)).toThrow()
-    expect(() => buildFieldSchema({ type: 'array', items: { type: 'enum' } }, 'root', true)).toThrow()
-    expect(() => buildFieldSchema({ type: 'array', items: { type: 'boolean' } }, 'root', true)).toThrow()
+  it('allows non-object items', () => {
+    const groupArray = () => expect.objectContaining({
+      inputType: 'group-array',
+      fields: [expect.anything()],
+    })
+
+    expect(buildFieldSchema({ type: 'array', items: { type: 'string' } }, 'root', true)).toEqual(groupArray())
+    expect(buildFieldSchema({ type: 'array', items: { type: 'number' } }, 'root', true)).toEqual(groupArray())
+    expect(buildFieldSchema({ type: 'array', items: { type: 'array' } }, 'root', true)).toEqual(groupArray())
+    expect(buildFieldSchema({ type: 'array', items: { type: 'enum' } }, 'root', true)).toEqual(groupArray())
+    expect(buildFieldSchema({ type: 'array', items: { type: 'boolean' } }, 'root', true)).toEqual(groupArray())
   })
 
   it('creates correct form errors validation errors in array items', () => {
@@ -269,8 +274,6 @@ describe('buildFieldArray', () => {
 
     const result = form.handleValidation(data)
 
-    console.warn(JSON.stringify(result, null, 2))
-
     expect(result.formErrors).toEqual({
       departments: [
         {
@@ -654,7 +657,7 @@ describe('buildFieldArray', () => {
   it('propagates schema properties to the field', () => {
     const schema: JsfSchema & Record<string, unknown> = {
       'type': 'array',
-      'title': 'My array',
+      'label': 'My array',
       'description': 'My array description',
       'x-jsf-presentation': {
         inputType: 'group-array',
@@ -672,7 +675,7 @@ describe('buildFieldArray', () => {
     const field = buildFieldSchema(schema, 'myArray', true)
 
     expect(field).toBeDefined()
-    expect(field?.title).toBe('My array')
+    expect(field?.label).toBe('My array')
     expect(field?.description).toBe('My array description')
   })
 
@@ -701,7 +704,12 @@ describe('buildFieldArray', () => {
 
     expect(field).toBeDefined()
     expect(field?.label).toBe('My array')
-    expect(field?.items).toBeUndefined()
+    expect(field?.items).toEqual({
+      type: 'object',
+      properties: {
+        name: { type: 'string' },
+      },
+    })
     expect(field?.minItems).toBe(1)
     expect(field?.['x-jsf-errorMessage']).toBeUndefined()
     expect(field?.['x-jsf-presentation']).toBeUndefined()