Add getField util and improve json-schema-form schema type

- Added proper type safety for `required` fields in JSON Schema type
- With this change I was able to simplify some conditional checks across validation and visibility logic
- Added new utility function `getField` for safer field access (Based on suggetion from #152)
- Improved test readability using the new `getField` utility and added tests for the new utility function

Author: antoniocapelo

next/src/types.ts

@@ -45,6 +45,10 @@ export type JsfSchema = JSONSchema & {
     validations: Record<string, object>
     computedValues: Record<string, object>
   }
+  // Note: if we don't have this property here, when inspecting any recursive
+  // schema (like an if inside another schema), the required property won't be
+  // present in the type
+  'required'?: string[]
   'x-jsf-order'?: string[]
   'x-jsf-presentation'?: JsfPresentation
   'x-jsf-errorMessage'?: Record<string, string>

next/src/utils.ts

@@ -1,3 +1,5 @@
+import type { Field } from './field/type'
+
 type DiskSizeUnit = 'Bytes' | 'KB' | 'MB'
 
 /**
@@ -22,3 +24,22 @@ export function convertDiskSizeFromTo(
     return (value * fromMultiplier) / toMultiplier
   }
 }
+
+/**
+ * Get a field from a list of fields by name.
+ * If the field is nested, you can pass additional names to access a nested field.
+ * @param fields - The list of fields to search in.
+ * @param name - The name of the field to search for.
+ * @param subNames - The names of the nested fields to access.
+ * @returns The field if found, otherwise undefined.
+ */
+export function getField(fields: Field[], name: string, ...subNames: string[]) {
+  const field = fields.find(f => f.name === name)
+  if (subNames.length) {
+    if (!field?.fields) {
+      return undefined
+    }
+    return getField(field.fields, subNames[0], ...subNames.slice(1))
+  }
+  return field
+};

next/src/validation/composition.ts

@@ -32,7 +32,7 @@ export function validateAllOf(
   options: ValidationOptions,
   path: ValidationErrorPath = [],
 ): ValidationError[] {
-  if (!schema.allOf || !Array.isArray(schema.allOf)) {
+  if (!schema.allOf) {
     return []
   }
 
@@ -69,7 +69,7 @@ export function validateAnyOf(
   options: ValidationOptions,
   path: ValidationErrorPath = [],
 ): ValidationError[] {
-  if (!schema.anyOf || !Array.isArray(schema.anyOf)) {
+  if (!schema.anyOf) {
     return []
   }
 
@@ -110,7 +110,7 @@ export function validateOneOf(
   options: ValidationOptions,
   path: ValidationErrorPath = [],
 ): ValidationError[] {
-  if (!schema.oneOf || !Array.isArray(schema.oneOf)) {
+  if (!schema.oneOf) {
     return []
   }
 

next/src/validation/schema.ts

@@ -159,9 +159,7 @@ export function validateSchema(
 
   // If the schema defines "required", run required checks even when type is undefined.
   if (
-    schema.required
-    && Array.isArray(schema.required)
-    && isObjectValue(value)
+    schema.required && isObjectValue(value)
   ) {
     const missingKeys = schema.required.filter((key: string) => {
       const fieldValue = value[key]

next/src/visibility.ts

@@ -69,10 +69,7 @@ function evaluateConditional(
 
   // Prevent fields from being shown when required fields have type errors
   let hasTypeErrors = false
-  if (matches
-    && typeof rule.if === 'object'
-    && rule.if !== null
-    && Array.isArray(rule.if.required)) {
+  if (matches && rule.if?.required) {
     const requiredFields = rule.if.required
     hasTypeErrors = requiredFields.some((fieldName) => {
       if (!schema.properties || !schema.properties[fieldName]) {
@@ -118,7 +115,7 @@ function applySchemaRules(
 
   // If the schema has an allOf property, evaluate each rule and add it to the conditional rules array
   (schema.allOf ?? [])
-    .filter(rule => typeof rule === 'object' && rule !== null && 'if' in rule)
+    .filter((rule: JsfSchema) => rule.if)
     .forEach((rule) => {
       const result = evaluateConditional(values, schema, rule as NonBooleanJsfSchema, options)
       conditionalRules.push(result)

next/test/utils.test.ts

@@ -0,0 +1,113 @@
+import type { Field } from '../src/field/type'
+import { describe, expect, it } from '@jest/globals'
+import { getField } from '../src/utils'
+
+describe('getField', () => {
+  const mockFields: Field[] = [
+    {
+      name: 'name',
+      type: 'text',
+      inputType: 'text',
+      jsonType: 'string',
+      label: 'Name',
+      required: false,
+      isVisible: true,
+    },
+    {
+      name: 'address',
+      type: 'object',
+      inputType: 'object',
+      jsonType: 'object',
+      label: 'Address',
+      required: false,
+      isVisible: true,
+      fields: [
+        {
+          name: 'street',
+          type: 'text',
+          inputType: 'text',
+          jsonType: 'string',
+          label: 'Street',
+          required: false,
+          isVisible: true,
+        },
+        {
+          name: 'city',
+          type: 'text',
+          inputType: 'text',
+          jsonType: 'string',
+          label: 'City',
+          required: false,
+          isVisible: true,
+        },
+      ],
+    },
+  ]
+
+  it('should find a top-level field by name', () => {
+    const field = getField(mockFields, 'name')
+    expect(field).toBeDefined()
+    expect(field?.name).toBe('name')
+  })
+
+  it('should find a nested field using path', () => {
+    const field = getField(mockFields, 'address', 'street')
+    expect(field).toBeDefined()
+    expect(field?.name).toBe('street')
+  })
+
+  it('should return undefined for non-existent field', () => {
+    const field = getField(mockFields, 'nonexistent')
+    expect(field).toBeUndefined()
+  })
+
+  it('should return undefined for non-existent nested field', () => {
+    const field = getField(mockFields, 'address', 'nonexistent')
+    expect(field).toBeUndefined()
+  })
+
+  it('should return undefined when trying to access nested field on non-object field', () => {
+    const field = getField(mockFields, 'name', 'something')
+    expect(field).toBeUndefined()
+  })
+
+  it('should handle multiple levels of nesting', () => {
+    const deepFields: Field[] = [
+      {
+        name: 'level1',
+        type: 'object',
+        inputType: 'object',
+        jsonType: 'object',
+        label: 'Level 1',
+        required: false,
+        isVisible: true,
+        fields: [
+          {
+            name: 'level2',
+            type: 'object',
+            inputType: 'object',
+            jsonType: 'object',
+            label: 'Level 2',
+            required: false,
+            isVisible: true,
+            fields: [
+              {
+                name: 'level3',
+                type: 'text',
+                inputType: 'text',
+                jsonType: 'string',
+                label: 'Level 3',
+                required: false,
+                isVisible: true,
+              },
+            ],
+          },
+        ],
+      },
+    ]
+
+    const field = getField(deepFields, 'level1', 'level2', 'level3')
+    expect(field).toBeDefined()
+    expect(field?.name).toBe('level3')
+  })
+})

next/test/visibility.test.ts

@@ -1,6 +1,7 @@
 import type { JsfObjectSchema } from '../src/types'
 import { describe, expect, it } from '@jest/globals'
 import { createHeadlessForm } from '../src'
+import { getField } from '../src/utils'
 
 describe('Field visibility', () => {
   describe('if inside allOf', () => {
@@ -36,22 +37,22 @@ describe('Field visibility', () => {
 
       it('should hide the password field by default', () => {
         const form = createHeadlessForm(schema, { initialValues: { name: 'asd', password: null } })
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(false)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(false)
 
         // Different name provided
         form.handleValidation({
           name: 'some name',
           password: null,
         })
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(false)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(false)
       })
 
       it('should show the password field if the name is admin', () => {
         const form = createHeadlessForm(schema)
         form.handleValidation({
           name: 'admin',
         })
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(true)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(true)
       })
     })
     describe('if an "else" branch is not provided', () => {
@@ -88,18 +89,18 @@ describe('Field visibility', () => {
       it('should show the password field by default', () => {
         const form = createHeadlessForm(schema)
         // No name provided
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(true)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(true)
 
         // Different name provided
         form.handleValidation({
           name: 'some name',
         })
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(true)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(true)
       })
 
       it('should hide the password field if the name is "user that does not need password field visible"', () => {
         const form = createHeadlessForm(schema, { initialValues: { name: userName, password: null } })
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(false)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(false)
       })
     })
     describe('if no "else" or "then" branch are provided', () => {
@@ -131,21 +132,21 @@ describe('Field visibility', () => {
       it('should show the password field by default', () => {
         const form = createHeadlessForm(schema)
         // No name provided
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(true)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(true)
 
         // Different name provided
         form.handleValidation({
           name: 'some name',
         })
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(true)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(true)
       })
 
       it('should show the password field if the name is "admin"', () => {
         const form = createHeadlessForm(schema)
         form.handleValidation({
           name: userName,
         })
-        expect(form.fields.find(field => field.name === 'password')?.isVisible).toBe(true)
+        expect(getField(form.fields, 'password')?.isVisible).toBe(true)
       })
     })
   })
@@ -194,7 +195,7 @@ describe('Field visibility', () => {
     it('should hide the password field by default', () => {
       const form = createHeadlessForm(schema, { initialValues: { form: { name: '', password: null } } })
       // No name provided
-      expect(form.fields.find(field => field.name === 'form')?.fields?.find(field => field.name === 'password')?.isVisible).toBe(false)
+      expect(getField(form.fields, 'form', 'password')?.isVisible).toBe(false)
 
       // Different name provided
       form.handleValidation({
@@ -203,15 +204,15 @@ describe('Field visibility', () => {
           password: null,
         },
       })
-      expect(form.fields.find(field => field.name === 'form')?.fields?.find(field => field.name === 'password')?.isVisible).toBe(false)
+      expect(getField(form.fields, 'form', 'password')?.isVisible).toBe(false)
     })
 
     it('should show the password field if the name is admin', () => {
       const form = createHeadlessForm(schema, { initialValues: { form: { name: 'admin', password: null } } })
       form.handleValidation({ form: {
         name: 'admin',
       } })
-      expect(form.fields.find(field => field.name === 'form')?.fields?.find(field => field.name === 'password')?.isVisible).toBe(true)
+      expect(getField(form.fields, 'form', 'password')?.isVisible).toBe(true)
     })
   })
 })