WIP: Advanced validation proof of concept

package.json

@@ -47,6 +47,7 @@
     ]
   },
   "dependencies": {
+    "json-logic-js": "^2.0.2",
     "lodash": "^4.17.21",
     "randexp": "^0.5.3",
     "yup": "^0.30.0"

src/createHeadlessForm.js

@@ -24,6 +24,7 @@ import {
   getInputType,
 } from './internals/fields';
 import { pickXKey } from './internals/helpers';
+import { getValidationsFromJSONSchema } from './jsonLogic';
 import { buildYupSchema } from './yupSchema';
 
 // Some type definitions (to be migrated into .d.ts file or TS Interfaces)
@@ -324,10 +325,16 @@ export function createHeadlessForm(jsonSchema, customConfig = {}) {
 
   try {
     const fields = getFieldsFromJSONSchema(jsonSchema, config);
+    const validations = getValidationsFromJSONSchema(jsonSchema);
 
-    const handleValidation = handleValuesChange(fields, jsonSchema, config);
+    const handleValidation = handleValuesChange(fields, jsonSchema, config, validations);
 
-    updateFieldsProperties(fields, getPrefillValues(fields, config.initialValues), jsonSchema);
+    updateFieldsProperties(
+      fields,
+      getPrefillValues(fields, config.initialValues),
+      jsonSchema,
+      validations
+    );
 
     return {
       fields,

src/helpers.js

@@ -68,8 +68,8 @@ function compareFormValueWithSchemaValue(formValue, schemaValue) {
  * @param {Object} formValues - form state
  * @returns {Boolean}
  */
-function checkIfConditionMatches(node, formValues, formFields) {
-  return Object.keys(node.if.properties).every((name) => {
+function checkIfConditionMatches(node, formValues, formFields, validations) {
+  const propertiesMatch = Object.keys(node.if.properties ?? {}).every((name) => {
     const currentProperty = node.if.properties[name];
     const value = formValues[name];
     const hasEmptyValue =
@@ -120,6 +120,16 @@ function checkIfConditionMatches(node, formValues, formFields) {
       value
     );
   });
+
+  const validationsMatch = Object.entries(node.if['x-jsf-validations'] ?? {}).every(
+    ([name, property]) => {
+      const currentValue = validations.evaluateRule(name, formValues);
+      if (Object.hasOwn(property, 'const') && currentValue === property.const) return true;
+      return false;
+    }
+  );
+
+  return propertiesMatch && validationsMatch;
 }
 
 /**
@@ -305,7 +315,7 @@ function updateField(field, requiredFields, node, formValues) {
  * @param {Set} accRequired - set of required field names gathered by traversing the tree
  * @returns {Object}
  */
-function processNode(node, formValues, formFields, accRequired = new Set()) {
+function processNode({ node, formValues, formFields, accRequired = new Set(), validations }) {
   // Set initial required fields
   const requiredFields = new Set(accRequired);
 
@@ -322,25 +332,27 @@ function processNode(node, formValues, formFields, accRequired = new Set()) {
   });
 
   if (node.if) {
-    const matchesCondition = checkIfConditionMatches(node, formValues, formFields);
+    const matchesCondition = checkIfConditionMatches(node, formValues, formFields, validations);
     // BUG HERE (unreleated) - what if it matches but doesn't has a then,
     // it should do nothing, but instead it jumps to node.else when it shouldn't.
     if (matchesCondition && node.then) {
-      const { required: branchRequired } = processNode(
-        node.then,
+      const { required: branchRequired } = processNode({
+        node: node.then,
         formValues,
         formFields,
-        requiredFields
-      );
+        accRequired: requiredFields,
+        validations,
+      });
 
       branchRequired.forEach((field) => requiredFields.add(field));
     } else if (node.else) {
-      const { required: branchRequired } = processNode(
-        node.else,
+      const { required: branchRequired } = processNode({
+        node: node.else,
         formValues,
         formFields,
-        requiredFields
-      );
+        accRequired: requiredFields,
+        validations,
+      });
       branchRequired.forEach((field) => requiredFields.add(field));
     }
   }
@@ -361,7 +373,15 @@ function processNode(node, formValues, formFields, accRequired = new Set()) {
 
   if (node.allOf) {
     node.allOf
-      .map((allOfNode) => processNode(allOfNode, formValues, formFields, requiredFields))
+      .map((allOfNode) =>
+        processNode({
+          node: allOfNode,
+          formValues,
+          formFields,
+          accRequired: requiredFields,
+          validations,
+        })
+      )
       .forEach(({ required: allOfItemRequired }) => {
         allOfItemRequired.forEach(requiredFields.add, requiredFields);
       });
@@ -372,7 +392,12 @@ function processNode(node, formValues, formFields, accRequired = new Set()) {
       const inputType = getInputType(nestedNode);
       if (inputType === supportedTypes.FIELDSET) {
         // It's a fieldset, which might contain scoped conditions
-        processNode(nestedNode, formValues[name] || {}, getField(name, formFields).fields);
+        processNode({
+          node: nestedNode,
+          formValues: formValues[name] || {},
+          formFields: getField(name, formFields).fields,
+          validations,
+        });
       }
     });
   }
@@ -407,11 +432,11 @@ function clearValuesIfNotVisible(fields, formValues) {
  * @param {Object} formValues - current values of the form
  * @param {Object} jsonSchema - JSON schema object
  */
-export function updateFieldsProperties(fields, formValues, jsonSchema) {
+export function updateFieldsProperties(fields, formValues, jsonSchema, validations) {
   if (!jsonSchema?.properties) {
     return;
   }
-  processNode(jsonSchema, formValues, fields);
+  processNode({ node: jsonSchema, formValues, formFields: fields, validations });
   clearValuesIfNotVisible(fields, formValues);
 }
 
@@ -474,6 +499,7 @@ export function extractParametersFromNode(schemaNode) {
 
   const presentation = pickXKey(schemaNode, 'presentation') ?? {};
   const errorMessage = pickXKey(schemaNode, 'errorMessage') ?? {};
+  const validations = schemaNode['x-jsf-validations'];
 
   const node = omit(schemaNode, ['x-jsf-presentation', 'presentation']);
 
@@ -518,6 +544,7 @@ export function extractParametersFromNode(schemaNode) {
 
       // Handle [name].presentation
       ...presentation,
+      validations: validations,
       description: containsHTML(description)
         ? wrapWithSpan(description, {
             class: 'jsf-description',
@@ -575,8 +602,8 @@ export function yupToFormErrors(yupError) {
  * @param {JsfConfig} config - jsf config
  * @returns {Function(values: Object): { YupError: YupObject, formErrors: Object }} Callback that returns Yup errors <YupObject>
  */
-export const handleValuesChange = (fields, jsonSchema, config) => (values) => {
-  updateFieldsProperties(fields, values, jsonSchema);
+export const handleValuesChange = (fields, jsonSchema, config, validations) => (values) => {
+  updateFieldsProperties(fields, values, jsonSchema, validations);
 
   const lazySchema = lazy(() => buildCompleteYupSchema(fields, config));
   let errors;

src/jsonLogic.js

@@ -0,0 +1,42 @@
+import jsonLogic from 'json-logic-js';
+
+/**
+ * Parses the JSON schema to extract the advanced validation logic and returns a set of functionality to check the current status of said rules.
+ * @param {Object} schema - JSON schema node
+ * @param {Object} initialValues - form state
+ * @returns {Object}
+ */
+export function getValidationsFromJSONSchema(schema) {
+  const ruleMap = new Map();
+
+  const validationObject = Object.entries(schema?.['x-jsf-validations'] ?? {});
+  validationObject.forEach(([id, { rule }]) => {
+    ruleMap.set(id, { rule });
+  });
+
+  return {
+    ruleMap,
+    evaluateRule(id, values) {
+      const validation = ruleMap.get(id);
+      const answer = jsonLogic.apply(validation.rule, clean(values));
+      return answer;
+    },
+  };
+}
+
+function clean(values) {
+  return Object.entries(values).reduce((prev, [key, value]) => {
+    return { ...prev, [key]: value === undefined ? null : value };
+  }, {});
+}
+
+export function yupSchemaWithCustomJSONLogic(field, validation, id) {
+  return (yupSchema) =>
+    yupSchema.test(
+      `${field.name}-validation-${id}`,
+      validation.errorMessage ?? 'This field is invalid.',
+      (_, { parent }) => {
+        return jsonLogic.apply(validation.rule, parent);
+      }
+    );
+}