feat(next): DEVXP-2565: implement visibility calculation (#151)

* implement visibility calculation

* popagate const to fields

* default initialValues to {} for v0 compatibility

---------

Co-authored-by: João Almeida <[email protected]>

Author: lukad

next/src/field/object.ts

@@ -28,7 +28,7 @@ export function buildFieldObject(schema: JsfObjectSchema, name: string, required
     type: schema['x-jsf-presentation']?.inputType || 'fieldset',
     inputType: schema['x-jsf-presentation']?.inputType || 'fieldset',
     jsonType: 'object',
-    name: schema.title || name,
+    name,
     required,
     fields: orderedFields,
     isVisible: true,

next/src/field/schema.ts

@@ -137,6 +137,14 @@ export function buildFieldSchema(
     ...(errorMessage && { errorMessage }),
   }
 
+  if (schema.const) {
+    field.const = schema.const
+
+    if (inputType === 'checkbox') {
+      field.checkboxValue = schema.const
+    }
+  }
+
   if (schema.title) {
     field.label = schema.title
   }

next/src/field/type.ts

@@ -22,6 +22,8 @@ export interface Field {
   format?: string
   anyOf?: unknown[]
   options?: unknown[]
+  const?: unknown
+  checkboxValue?: unknown
 
   // Allow additional properties from x-jsf-presentation (e.g. meta from oneOf/anyOf)
   [key: string]: unknown

next/src/form.ts

@@ -1,10 +1,14 @@
-import type { ValidationError } from './errors'
+import type { ValidationError, ValidationErrorPath } from './errors'
 import type { Field } from './field/type'
 import type { JsfObjectSchema, JsfSchema, NonBooleanJsfSchema, SchemaValue } from './types'
+import type { ValidationOptions } from './validation/schema'
 import { getErrorMessage } from './errors/messages'
 import { buildFieldObject } from './field/object'
 import { validateSchema } from './validation/schema'
 import { isObjectValue } from './validation/util'
+import { updateFieldVisibility } from './visibility'
+
+export { ValidationOptions } from './validation/schema'
 
 interface FormResult {
   fields: Field[]
@@ -26,6 +30,39 @@ export interface ValidationResult {
   formErrors?: FormErrors
 }
 
+/**
+ * Remove composition keywords and their indices as well as conditional keywords from the path
+ * @param path - The path to clean
+ * @returns The cleaned path
+ * @example
+ * ```ts
+ * cleanErrorPath(['some_object','allOf', 0, 'then', 'field'])
+ * // ['some_object', 'field']
+ * ```
+ */
+function cleanErrorPath(path: ValidationErrorPath): ValidationErrorPath {
+  const result: ValidationErrorPath = []
+
+  for (let i = 0; i < path.length; i++) {
+    const segment = path[i]
+
+    if (['allOf', 'anyOf', 'oneOf'].includes(segment as string)) {
+      if (i + 1 < path.length && typeof path[i + 1] === 'number') {
+        i++
+      }
+      continue
+    }
+
+    if (segment === 'then' || segment === 'else') {
+      continue
+    }
+
+    result.push(segment)
+  }
+
+  return result
+}
+
 /**
  * Transform validation errors into an object with the field names as keys and the error messages as values.
  * For nested fields, creates a nested object structure rather than using dot notation.
@@ -56,61 +93,32 @@ function validationErrorsToFormErrors(errors: ValidationErrorWithMessage[]): For
       return result
     }
 
-    // For conditional validation branches (then/else), show the error at the field level
-    const thenElseIndex = Math.max(path.indexOf('then'), path.indexOf('else'))
-    if (thenElseIndex !== -1) {
-      const fieldName = path[thenElseIndex + 1]
-      if (fieldName) {
-        result[fieldName] = error.message
-        return result
-      }
-    }
-
-    // For allOf/anyOf/oneOf validation errors, show the error at the field level
-    const compositionKeywords = ['allOf', 'anyOf', 'oneOf']
-    const compositionIndex = compositionKeywords.reduce((index, keyword) => {
-      const keywordIndex = path.indexOf(keyword)
-      return keywordIndex !== -1 ? keywordIndex : index
-    }, -1)
-
-    if (compositionIndex !== -1) {
-      // Get the field path before the composition keyword
-      const fieldPath = path.slice(0, compositionIndex)
-      if (fieldPath.length > 0) {
-        let current = result
-
-        // Process all segments except the last one
-        fieldPath.slice(0, -1).forEach((segment) => {
-          if (!(segment in current) || typeof current[segment] === 'string') {
-            current[segment] = {}
-          }
-          current = current[segment] as FormErrors
-        })
-
-        // Set the message at the last segment
-        const lastSegment = fieldPath[fieldPath.length - 1]
-        current[lastSegment] = error.message
-        return result
-      }
-    }
+    // Clean the path to remove intermediate composition structures
+    const cleanedPath = cleanErrorPath(path)
 
-    // For all other paths, recursively build the nested structure
+    // For all paths, recursively build the nested structure
     let current = result
 
     // Process all segments except the last one (which will hold the message)
-    path.slice(0, -1).forEach((segment) => {
+    cleanedPath.slice(0, -1).forEach((segment) => {
       // If this segment doesn't exist yet or is currently a string (from a previous error),
       // initialize it as an object
       if (!(segment in current) || typeof current[segment] === 'string') {
         current[segment] = {}
       }
 
-      current = current[segment]
+      current = current[segment] as FormErrors
     })
 
     // Set the message at the final level
-    const lastSegment = path[path.length - 1]
-    current[lastSegment] = error.message
+    if (cleanedPath.length > 0) {
+      const lastSegment = cleanedPath[cleanedPath.length - 1]
+      current[lastSegment] = error.message
+    }
+    else {
+      // Fallback for unexpected path structures
+      result[''] = error.message
+    }
 
     return result
   }, {})
@@ -257,9 +265,6 @@ function validate(value: SchemaValue, schema: JsfSchema, options: ValidationOpti
   const result: ValidationResult = {}
   const errors = validateSchema(value, schema, options)
 
-  // console.log(errors)
-
-  // Apply custom error messages before converting to form errors
   const errorsWithMessages = addErrorMessages(value, schema, errors)
   const processedErrors = applyCustomErrorMessages(errorsWithMessages, schema)
 
@@ -272,42 +277,34 @@ function validate(value: SchemaValue, schema: JsfSchema, options: ValidationOpti
   return result
 }
 
-export interface ValidationOptions {
-  /**
-   * A null value will be treated as undefined.
-   * That means that when validating a null value, against a non-required field that is not of type 'null' or ['null']
-   * the validation will succeed instead of returning a type error.
-   * @default false
-   */
-  treatNullAsUndefined?: boolean
-}
-
 export interface CreateHeadlessFormOptions {
   initialValues?: SchemaValue
   validationOptions?: ValidationOptions
 }
 
 function buildFields(params: { schema: JsfObjectSchema }): Field[] {
   const { schema } = params
-  return buildFieldObject(schema, 'root', true).fields || []
+  const fields = buildFieldObject(schema, 'root', true).fields || []
+  return fields
 }
 
 export function createHeadlessForm(
   schema: JsfObjectSchema,
   options: CreateHeadlessFormOptions = {},
 ): FormResult {
-  const errors = validateSchema(options.initialValues, schema, options.validationOptions)
-  const errorsWithMessages = addErrorMessages(options.initialValues, schema, errors)
-  const validationResult = validationErrorsToFormErrors(errorsWithMessages)
-  const isError = validationResult !== null
+  const initialValues = options.initialValues || {}
+  const fields = buildFields({ schema })
+  updateFieldVisibility(fields, initialValues, schema)
+  const isError = false
 
   const handleValidation = (value: SchemaValue) => {
     const result = validate(value, schema, options.validationOptions)
+    updateFieldVisibility(fields, value, schema, options.validationOptions)
     return result
   }
 
   return {
-    fields: buildFields({ schema }),
+    fields,
     isError,
     error: null,
     handleValidation,

next/src/validation/composition.ts

@@ -38,7 +38,7 @@ export function validateAllOf(
 
   for (let i = 0; i < schema.allOf.length; i++) {
     const subSchema = schema.allOf[i]
-    const errors = validateSchema(value, subSchema, options, false, [...path, 'allOf', i])
+    const errors = validateSchema(value, subSchema, options, [...path, 'allOf', i])
     if (errors.length > 0) {
       return errors
     }
@@ -74,7 +74,7 @@ export function validateAnyOf(
   }
 
   for (const subSchema of schema.anyOf) {
-    const errors = validateSchema(value, subSchema, options, false, path)
+    const errors = validateSchema(value, subSchema, options, path)
     if (errors.length === 0) {
       return []
     }
@@ -117,7 +117,7 @@ export function validateOneOf(
   let validCount = 0
 
   for (let i = 0; i < schema.oneOf.length; i++) {
-    const errors = validateSchema(value, schema.oneOf[i], options, false, path)
+    const errors = validateSchema(value, schema.oneOf[i], options, path)
     if (errors.length === 0) {
       validCount++
       if (validCount > 1) {
@@ -180,7 +180,7 @@ export function validateNot(
       : []
   }
 
-  const notErrors = validateSchema(value, schema.not, options, false, path)
+  const notErrors = validateSchema(value, schema.not, options, path)
   return notErrors.length === 0
     ? [{ path, validation: 'not' }]
     : []

next/src/validation/conditions.ts

@@ -7,21 +7,20 @@ export function validateCondition(
   value: SchemaValue,
   schema: NonBooleanJsfSchema,
   options: ValidationOptions,
-  required: boolean,
   path: ValidationErrorPath = [],
 ): ValidationError[] {
   if (schema.if === undefined) {
     return []
   }
 
-  const conditionIsTrue = validateSchema(value, schema.if, options, required, path).length === 0
+  const conditionIsTrue = validateSchema(value, schema.if, options, path).length === 0
 
   if (conditionIsTrue && schema.then !== undefined) {
-    return validateSchema(value, schema.then, options, required, [...path, 'then'])
+    return validateSchema(value, schema.then, options, [...path, 'then'])
   }
 
   if (!conditionIsTrue && schema.else !== undefined) {
-    return validateSchema(value, schema.else, options, required, [...path, 'else'])
+    return validateSchema(value, schema.else, options, [...path, 'else'])
   }
 
   return []

next/src/validation/object.ts

@@ -24,10 +24,7 @@ export function validateObject(
   if (typeof schema === 'object' && schema.properties && isObjectValue(value)) {
     const errors = []
     for (const [key, propertySchema] of Object.entries(schema.properties)) {
-      const propertyValue = value[key]
-      const propertyIsRequired = schema.required?.includes(key)
-      const propertyErrors = validateSchema(propertyValue, propertySchema, options, propertyIsRequired, [...path, key])
-      errors.push(...propertyErrors)
+      errors.push(...validateSchema(value[key], propertySchema, options, [...path, key]))
     }
     return errors
   }

next/src/validation/schema.ts

@@ -1,5 +1,4 @@
 import type { ValidationError, ValidationErrorPath } from '../errors'
-import type { ValidationOptions } from '../form'
 import type { JsfSchema, JsfSchemaType, SchemaValue } from '../types'
 import { validateAllOf, validateAnyOf, validateNot, validateOneOf } from './composition'
 import { validateCondition } from './conditions'
@@ -8,6 +7,17 @@ import { validateEnum } from './enum'
 import { validateNumber } from './number'
 import { validateObject } from './object'
 import { validateString } from './string'
+import { isObjectValue } from './util'
+
+export interface ValidationOptions {
+  /**
+   * A null value will be treated as undefined.
+   * That means that when validating a null value, against a non-required field that is not of type 'null' or ['null']
+   * the validation will succeed instead of returning a type error.
+   * @default false
+   */
+  treatNullAsUndefined?: boolean
+}
 
 /**
  * Get the type of a schema
@@ -94,7 +104,6 @@ function validateType(
  * @param value - The value to validate
  * @param schema - The schema to validate against
  * @param options - The validation options
- * @param required - Whether the value is required
  * @param path - The path to the current field being validated
  * @returns An array of validation errors
  * @description
@@ -104,7 +113,7 @@ function validateType(
  * 2. Handle boolean schemas (true allows everything, false allows nothing)
  * 3. Validate against base schema constraints:
  *    - Type validation (if type is specified)
- *    - Required properties (for objects)
+ *    - Required properties
  *    - Boolean validation
  *    - Enum validation
  *    - Const validation
@@ -123,15 +132,12 @@ export function validateSchema(
   value: SchemaValue,
   schema: JsfSchema,
   options: ValidationOptions = {},
-  required: boolean = false,
   path: ValidationErrorPath = [],
 ): ValidationError[] {
   const valueIsUndefined = value === undefined || (value === null && options.treatNullAsUndefined)
+  const errors: ValidationError[] = []
 
-  if (valueIsUndefined && required) {
-    return [{ path, validation: 'required' }]
-  }
-
+  // If value is undefined but not required, no further validation needed
   if (valueIsUndefined) {
     return []
   }
@@ -149,20 +155,23 @@ export function validateSchema(
   if (
     schema.required
     && Array.isArray(schema.required)
-    && typeof value === 'object'
-    && value !== null
+    && isObjectValue(value)
   ) {
-    const missingKeys = schema.required.filter((key: string) => !(key in value))
-    if (missingKeys.length > 0) {
-      // Return an error for each missing field.
-      return missingKeys.map(key => ({
+    const missingKeys = schema.required.filter((key: string) => {
+      const fieldValue = value[key]
+      return fieldValue === undefined || (fieldValue === null && options.treatNullAsUndefined)
+    })
+
+    for (const key of missingKeys) {
+      errors.push({
         path: [...path, key],
         validation: 'required',
-      }))
+      })
     }
   }
 
   return [
+    ...errors,
     ...validateConst(value, schema, path),
     ...validateEnum(value, schema, path),
     ...validateObject(value, schema, options, path),
@@ -172,6 +181,6 @@ export function validateSchema(
     ...validateAllOf(value, schema, options, path),
     ...validateAnyOf(value, schema, options, path),
     ...validateOneOf(value, schema, options, path),
-    ...validateCondition(value, schema, options, required, path),
+    ...validateCondition(value, schema, options, path),
   ]
 }