parent 80c2958

author brennj <[email protected]> 1694505093 +0200
committer brennj <[email protected]> 1694508319 +0200

Release 0.5.0-beta.0

chore: support barebones computedAttrs

chore: fix errors

chore: fix mess ups from rebase

chore: feedback from PR

chore: pass logic down at updateFieldsProperties to prevent bugs

feat: JSON Logic skeleton and plumbing setup

chore: clean up conditional additions

chore: remove const tests

chore: remove dupe file

chore: remove group array stuff

chore: clean up yupschema

chore: clean up helpers a small bit

chore: remove all error handling for now

chore: clean up package-lock

chore: more removing stuff

chore: clean more

chore: support barebones computedAttrs

chore: computed string attributes

chore: fix tests

chore: consistency for curly braces

chore: remove unneeded code for now

Author: brennj

.eslintrc

@@ -11,6 +11,7 @@
   },
   "rules": {
     "jest/no-focused-tests": "error",
+    "curly": ["error", "multi-line"],
     "arrow-body-style": 0,
     "default-case": 0,
     "import/order": [

CHANGELOG.md

@@ -1,3 +1,10 @@
+#### 0.5.0-beta.0 (2023-09-12)
+
+##### Changes
+
+- Computed Attributes ([#36](https://github.com/remoteoss/json-schema-form/pull/36)) ([80c29589](https://github.com/remoteoss/json-schema-form/commit/80c29589ac0972e0f33add70a59df15a46db1b43))
+- JSON Logic Skeleton ([#35](https://github.com/remoteoss/json-schema-form/pull/35)) ([63149ae8](https://github.com/remoteoss/json-schema-form/commit/63149ae863cf1b5ad76a3b2a49c7f343e55ce07b))
+
 #### 0.4.5-beta.0 (2023-08-31)
 
 ##### Changes

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.4.5-beta.0",
+  "version": "0.5.0-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <[email protected]> (https://remote.com/)",
   "license": "MIT",

package.json

@@ -1,5 +1,7 @@
 import jsonLogic from 'json-logic-js';
 
+import { buildYupSchema } from './yupSchema';
+
 /**
  * Parses the JSON schema to extract the json-logic rules and returns an object
  * containing the validation scopes, functions to retrieve the scopes, and evaluate the
@@ -123,26 +125,81 @@ export function yupSchemaWithCustomJSONLogic({ field, logic, config, id }) {
     );
 }
 
+const HANDLEBARS_REGEX = /\{\{([^{}]+)\}\}/g;
+
+function replaceHandlebarsTemplates({
+  value: toReplace,
+  logic,
+  formValues,
+  parentID,
+  name: fieldName,
+}) {
+  if (typeof toReplace === 'string') {
+    return toReplace.replace(HANDLEBARS_REGEX, (match, key) => {
+      return logic.getScope(parentID).applyComputedValueInField(key.trim(), formValues, fieldName);
+    });
+  }
+  return toReplace;
+}
+
 export function calculateComputedAttributes(fieldParams, { parentID = 'root' } = {}) {
-  return ({ logic, formValues }) => {
+  return ({ logic, isRequired, config, formValues }) => {
     const { computedAttributes } = fieldParams;
     const attributes = Object.fromEntries(
       Object.entries(computedAttributes)
         .map(handleComputedAttribute(logic, formValues, parentID))
         .filter(([, value]) => value !== null)
     );
 
-    return attributes;
+    return {
+      ...attributes,
+      schema: buildYupSchema(
+        { ...fieldParams, ...attributes, required: isRequired },
+        config,
+        logic
+      ),
+    };
   };
 }
 
 function handleComputedAttribute(logic, formValues, parentID) {
   return ([key, value]) => {
-    if (key === 'const')
+    if (key === 'description') {
+      return [key, replaceHandlebarsTemplates({ value, logic, formValues, parentID, name })];
+    }
+
+    if (key === 'title') {
+      return ['label', replaceHandlebarsTemplates({ value, logic, formValues, parentID, name })];
+    }
+
+    if (key === 'const') {
       return [key, logic.getScope(parentID).applyComputedValueInField(value, formValues)];
+    }
+
+    if (key === 'x-jsf-errorMessage') {
+      return [
+        'errorMessage',
+        handleNestedObjectForComputedValues(value, formValues, parentID, logic, name),
+      ];
+    }
 
     if (typeof value === 'string') {
       return [key, logic.getScope(parentID).applyComputedValueInField(value, formValues)];
     }
+
+    if (key === 'x-jsf-presentation' && value.statement) {
+      return [
+        'statement',
+        handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name),
+      ];
+    }
   };
 }
+
+function handleNestedObjectForComputedValues(values, formValues, parentID, logic, name) {
+  return Object.fromEntries(
+    Object.entries(values).map(([key, value]) => {
+      return [key, replaceHandlebarsTemplates({ value, logic, formValues, parentID, name })];
+    })
+  );
+}

src/jsonLogic.js

@@ -144,8 +144,10 @@ export const schemaWithComputedAttributes = {
     field_b: {
       type: 'number',
       'x-jsf-logic-computedAttrs': {
+        title: 'This is {{a_times_two}}!',
         const: 'a_times_two',
         default: 'a_times_two',
+        description: 'This field is 2 times bigger than field_a with value of {{a_times_two}}.',
       },
     },
   },
@@ -160,3 +162,42 @@ export const schemaWithComputedAttributes = {
     },
   },
 };
+
+export const schemaWithComputedAttributesAndErrorMessages = {
+  properties: {
+    field_a: {
+      type: 'number',
+    },
+    field_b: {
+      type: 'number',
+      'x-jsf-logic-computedAttrs': {
+        minimum: 'a_times_two',
+        maximum: 'a_times_four',
+        'x-jsf-errorMessage': {
+          minimum: 'Must be bigger than {{a_times_two}}',
+          maximum: 'Must be smaller than {{a_times_four}}',
+        },
+        'x-jsf-presentation': {
+          statement: {
+            description: 'Must be bigger than {{a_times_two}} and smaller than {{a_times_four}}',
+          },
+        },
+      },
+    },
+  },
+  required: ['field_a', 'field_b'],
+  'x-jsf-logic': {
+    computedValues: {
+      a_times_two: {
+        rule: {
+          '*': [{ var: 'field_a' }, 2],
+        },
+      },
+      a_times_four: {
+        rule: {
+          '*': [{ var: 'field_a' }, 4],
+        },
+      },
+    },
+  },
+};

src/tests/jsonLogic.fixtures.js

@@ -5,6 +5,7 @@ import {
   createSchemaWithThreePropertiesWithRuleOnFieldA,
   multiRuleSchema,
   schemaWithComputedAttributes,
+  schemaWithComputedAttributesAndErrorMessages,
   schemaWithNativeAndJSONLogicChecks,
   schemaWithNonRequiredField,
   schemaWithTwoRules,
@@ -221,10 +222,31 @@ describe('jsonLogic: cross-values validations', () => {
         initialValues: { field_a: 2 },
       });
       const fieldB = fields.find((i) => i.name === 'field_b');
+      expect(fieldB.description).toEqual(
+        'This field is 2 times bigger than field_a with value of 4.'
+      );
       expect(fieldB.default).toEqual(4);
       expect(fieldB.value).toEqual(4);
       handleValidation({ field_a: 4 });
       expect(fieldB.default).toEqual(8);
+      expect(fieldB.label).toEqual('This is 8!');
+    });
+
+    it('Derived errorMessages and statements work', () => {
+      const { fields, handleValidation } = createHeadlessForm(
+        schemaWithComputedAttributesAndErrorMessages,
+        { strictInputType: false }
+      );
+      const fieldB = fields.find((i) => i.name === 'field_b');
+      expect(handleValidation({ field_a: 2, field_b: 0 }).formErrors).toEqual({
+        field_b: 'Must be bigger than 4',
+      });
+      expect(handleValidation({ field_a: 2, field_b: 100 }).formErrors).toEqual({
+        field_b: 'Must be smaller than 8',
+      });
+      expect(fieldB.minimum).toEqual(4);
+      expect(fieldB.maximum).toEqual(8);
+      expect(fieldB.statement).toEqual({ description: 'Must be bigger than 4 and smaller than 8' });
     });
   });
 });