@remoteoss/json-schema-form 0.4.4-dev.20230830125207 → 0.4.6-dev.20230911130751

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.4.4-dev.20230830125207",
+  "version": "0.4.6-dev.20230911130751",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",
@@ -47,6 +47,7 @@
     ]
   },
   "dependencies": {
+    "json-logic-js": "^2.0.2",
     "lodash": "^4.17.21",
     "randexp": "^0.5.3",
     "yup": "^0.30.0"

package/src/tests/const.test.js

@@ -0,0 +1,98 @@
+import { createHeadlessForm } from '../createHeadlessForm';
+
+describe('validations: const', () => {
+  it('Should work for number', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          ten_only: { type: 'number', const: 10 },
+        },
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ ten_only: 1 }).formErrors).toEqual({
+      ten_only: 'The only accepted value is 10.',
+    });
+    expect(handleValidation({ ten_only: 10 }).formErrors).toBeUndefined();
+    // null is also considered valid until we fix @BUG RMT-518
+    // Expectation: To fail with error "The only accepted value is 10."
+    expect(handleValidation({ ten_only: null }).formErrors).toBeUndefined();
+  });
+
+  it('Should work for text', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          hello_only: { type: 'string', const: 'hello' },
+        },
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ hello_only: 'what' }).formErrors).toEqual({
+      hello_only: 'The only accepted value is hello.',
+    });
+    expect(handleValidation({ hello_only: 'hello' }).formErrors).toEqual(undefined);
+  });
+
+  it('Should work for a conditionally applied const', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          answer: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          amount: {
+            description: 'If you select yes, this needs to be exactly 10.',
+            type: 'number',
+          },
+        },
+        allOf: [
+          {
+            if: { properties: { answer: { const: 'yes' } }, required: ['answer'] },
+            then: { properties: { amount: { const: 10 } }, required: ['amount'] },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ answer: 'no' }).formErrors).toEqual(undefined);
+    expect(handleValidation({ answer: 'yes' }).formErrors).toEqual({ amount: 'Required field' });
+    expect(handleValidation({ answer: 'yes', amount: 1 }).formErrors).toEqual({
+      amount: 'The only accepted value is 10.',
+    });
+    expect(handleValidation({ answer: 'yes', amount: 10 }).formErrors).toEqual(undefined);
+  });
+
+  it('Should show the custom error message', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          string: {
+            type: 'string',
+            const: 'hello',
+            'x-jsf-errorMessage': { const: 'You must say hello!!!' },
+          },
+        },
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ string: 'hi' }).formErrors).toEqual({
+      string: 'You must say hello!!!',
+    });
+    expect(handleValidation({ string: 'hello' }).formErrors).toEqual(undefined);
+  });
+
+  it('Should have value attribute for when const & default is present', () => {
+    const { fields } = createHeadlessForm(
+      {
+        properties: {
+          ten_only: { type: 'number', const: 10, default: 10 },
+        },
+      },
+      { strictInputType: false }
+    );
+    expect(fields[0]).toMatchObject({ value: 10, const: 10, default: 10 });
+  });
+});

package/src/tests/helpers.custom.js

@@ -207,7 +207,6 @@ export const schemaInputTypeHidden = {
       title: 'Select multi hidden',
       default: ['Albania, Algeria'],
       'x-jsf-presentation': { inputType: 'hidden' },
-      const: ['Albania, Algeria'],
       type: 'array',
     },
   },

package/src/tests/jsonLogic.fixtures.js

@@ -0,0 +1,162 @@
+export function createSchemaWithRulesOnFieldA(rules) {
+  return {
+    properties: {
+      field_a: {
+        type: 'number',
+        'x-jsf-logic-validations': Object.keys(rules),
+      },
+      field_b: {
+        type: 'number',
+      },
+    },
+    required: ['field_a', 'field_b'],
+    'x-jsf-logic': { validations: rules },
+  };
+}
+
+export function createSchemaWithThreePropertiesWithRuleOnFieldA(rules) {
+  return {
+    properties: {
+      field_a: {
+        type: 'number',
+        'x-jsf-logic-validations': Object.keys(rules),
+      },
+      field_b: {
+        type: 'number',
+      },
+      field_c: {
+        type: 'number',
+      },
+    },
+    'x-jsf-logic': { validations: rules },
+    required: ['field_a', 'field_b', 'field_c'],
+  };
+}
+
+export const schemaWithNonRequiredField = {
+  properties: {
+    field_a: {
+      type: 'number',
+    },
+    field_b: {
+      type: 'number',
+      'x-jsf-logic-validations': ['a_greater_than_field_b'],
+    },
+  },
+  'x-jsf-logic': {
+    validations: {
+      a_greater_than_field_b: {
+        errorMessage: 'Must be greater than field_a',
+        rule: {
+          '>': [{ var: 'field_a' }, { var: 'field_b' }],
+        },
+      },
+    },
+  },
+  required: [],
+};
+
+export const schemaWithNativeAndJSONLogicChecks = {
+  properties: {
+    field_a: {
+      type: 'number',
+      minimum: 100,
+      'x-jsf-logic-validations': ['a_multiple_of_ten'],
+    },
+  },
+  'x-jsf-logic': {
+    validations: {
+      a_multiple_of_ten: {
+        errorMessage: 'Must be a multiple of 10',
+        rule: {
+          '===': [{ '%': [{ var: 'field_a' }, 10] }, 0],
+        },
+      },
+    },
+  },
+  required: ['field_a'],
+};
+
+export const multiRuleSchema = {
+  properties: {
+    field_a: {
+      type: 'number',
+      'x-jsf-logic-validations': ['a_bigger_than_b', 'is_even_number'],
+    },
+    field_b: {
+      type: 'number',
+    },
+  },
+  required: ['field_a', 'field_b'],
+  'x-jsf-logic': {
+    validations: {
+      a_bigger_than_b: {
+        errorMessage: 'A must be bigger than B',
+        rule: {
+          '>': [{ var: 'field_a' }, { var: 'field_b' }],
+        },
+      },
+      is_even_number: {
+        errorMessage: 'A must be even',
+        rule: {
+          '===': [{ '%': [{ var: 'field_a' }, 2] }, 0],
+        },
+      },
+    },
+  },
+};
+
+export const schemaWithTwoRules = {
+  properties: {
+    field_a: {
+      type: 'number',
+      'x-jsf-logic-validations': ['a_bigger_than_b'],
+    },
+    field_b: {
+      type: 'number',
+      'x-jsf-logic-validations': ['is_even_number'],
+    },
+  },
+  required: ['field_a', 'field_b'],
+  'x-jsf-logic': {
+    validations: {
+      a_bigger_than_b: {
+        errorMessage: 'A must be bigger than B',
+        rule: {
+          '>': [{ var: 'field_a' }, { var: 'field_b' }],
+        },
+      },
+      is_even_number: {
+        errorMessage: 'B must be even',
+        rule: {
+          '===': [{ '%': [{ var: 'field_b' }, 2] }, 0],
+        },
+      },
+    },
+  },
+};
+
+export const schemaWithComputedAttributes = {
+  properties: {
+    field_a: {
+      type: 'number',
+    },
+    field_b: {
+      type: 'number',
+      'x-jsf-logic-computedAttrs': {
+        const: 'a_times_two',
+        default: 'a_times_two',
+      },
+    },
+  },
+  required: ['field_a', 'field_b'],
+  'x-jsf-logic': {
+    computedValues: {
+      a_times_two: {
+        rule: {
+          '*': [{ var: 'field_a' }, 2],
+        },
+      },
+    },
+  },
+};

package/src/tests/jsonLogic.test.js

@@ -0,0 +1,230 @@
+import { createHeadlessForm } from '../createHeadlessForm';
+
+import {
+  createSchemaWithRulesOnFieldA,
+  createSchemaWithThreePropertiesWithRuleOnFieldA,
+  multiRuleSchema,
+  schemaWithComputedAttributes,
+  schemaWithNativeAndJSONLogicChecks,
+  schemaWithNonRequiredField,
+  schemaWithTwoRules,
+} from './jsonLogic.fixtures';
+
+describe('jsonLogic: cross-values validations', () => {
+  describe('Does not conflict with native JSON schema', () => {
+    it('Given an optional field and empty value, jsonLogic validations are ignored', () => {
+      const { handleValidation } = createHeadlessForm(schemaWithNonRequiredField, {
+        strictInputType: false,
+      });
+      expect(handleValidation({}).formErrors).toBeUndefined();
+      expect(handleValidation({ field_a: 0, field_b: 10 }).formErrors).toEqual({
+        field_b: 'Must be greater than field_a',
+      });
+      expect(handleValidation({ field_a: 'incorrect value' }).formErrors).toEqual({
+        field_a: 'The value must be a number',
+      });
+      expect(handleValidation({ field_a: 11 }).formErrors).toBeUndefined();
+    });
+
+    it('Native validations have higher precedence than jsonLogic validations', () => {
+      const { handleValidation } = createHeadlessForm(schemaWithNativeAndJSONLogicChecks, {
+        strictInputType: false,
+      });
+      expect(handleValidation({}).formErrors).toEqual({ field_a: 'Required field' });
+      expect(handleValidation({ field_a: 0 }).formErrors).toEqual({
+        field_a: 'Must be greater or equal to 100',
+      });
+      expect(handleValidation({ field_a: 101 }).formErrors).toEqual({
+        field_a: 'Must be a multiple of 10',
+      });
+      expect(handleValidation({ field_a: 110 }).formErrors).toBeUndefined();
+    });
+  });
+
+  describe('Relative: <, >, =', () => {
+    it('bigger: field_a > field_b', () => {
+      const schema = createSchemaWithRulesOnFieldA({
+        a_greater_than_b: {
+          errorMessage: 'Field A must be bigger than field B',
+          rule: { '>': [{ var: 'field_a' }, { var: 'field_b' }] },
+        },
+      });
+      const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+      const { formErrors } = handleValidation({ field_a: 1, field_b: 2 });
+      expect(formErrors.field_a).toEqual('Field A must be bigger than field B');
+      expect(handleValidation({ field_a: 2, field_b: 0 }).formErrors).toEqual(undefined);
+    });
+
+    it('smaller: field_a < field_b', () => {
+      const schema = createSchemaWithRulesOnFieldA({
+        a_less_than_b: {
+          errorMessage: 'Field A must be smaller than field B',
+          rule: { '<': [{ var: 'field_a' }, { var: 'field_b' }] },
+        },
+      });
+      const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+      const { formErrors } = handleValidation({ field_a: 2, field_b: 2 });
+      expect(formErrors.field_a).toEqual('Field A must be smaller than field B');
+      expect(handleValidation({ field_a: 0, field_b: 2 }).formErrors).toEqual(undefined);
+    });
+
+    it('equal: field_a = field_b', () => {
+      const schema = createSchemaWithRulesOnFieldA({
+        a_equals_b: {
+          errorMessage: 'Field A must equal field B',
+          rule: { '==': [{ var: 'field_a' }, { var: 'field_b' }] },
+        },
+      });
+      const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+      const { formErrors } = handleValidation({ field_a: 3, field_b: 2 });
+      expect(formErrors.field_a).toEqual('Field A must equal field B');
+      expect(handleValidation({ field_a: 2, field_b: 2 }).formErrors).toEqual(undefined);
+    });
+  });
+
+  describe('Arithmetic: +, -, *, /', () => {
+    it('multiple: field_a > field_b * 2', () => {
+      const schema = createSchemaWithRulesOnFieldA({
+        a_greater_than_b_multiplied_by_2: {
+          errorMessage: 'Field A must be at least twice as big as field b',
+          rule: { '>': [{ var: 'field_a' }, { '*': [{ var: 'field_b' }, 2] }] },
+        },
+      });
+      const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+
+      const { formErrors } = handleValidation({ field_a: 1, field_b: 4 });
+      expect(formErrors.field_a).toEqual('Field A must be at least twice as big as field b');
+      expect(handleValidation({ field_a: 3, field_b: 1 }).formErrors).toEqual(undefined);
+    });
+
+    it('divide: field_a > field_b / 2', () => {
+      const { handleValidation } = createHeadlessForm(
+        createSchemaWithRulesOnFieldA({
+          a_greater_than_b_divided_by_2: {
+            errorMessage: 'Field A must be greater than field_b / 2',
+            rule: { '>': [{ var: 'field_a' }, { '/': [{ var: 'field_b' }, 2] }] },
+          },
+        }),
+        { strictInputType: false }
+      );
+      expect(handleValidation({ field_a: 2, field_b: 4 }).formErrors).toEqual({
+        field_a: 'Field A must be greater than field_b / 2',
+      });
+      expect(handleValidation({ field_a: 3, field_b: 5 }).formErrors).toEqual(undefined);
+    });
+
+    it('sum: field_a > field_b + field_c', () => {
+      const schema = createSchemaWithThreePropertiesWithRuleOnFieldA({
+        a_is_greater_than_b_plus_c: {
+          errorMessage: 'Field A must be greater than field_b and field_b added together',
+          rule: {
+            '>': [{ var: 'field_a' }, { '+': [{ var: 'field_b' }, { var: 'field_c' }] }],
+          },
+        },
+      });
+      const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+      const { formErrors } = handleValidation({ field_a: 0, field_b: 1, field_c: 2 });
+      expect(formErrors.field_a).toEqual(
+        'Field A must be greater than field_b and field_b added together'
+      );
+      expect(handleValidation({ field_a: 4, field_b: 1, field_c: 2 }).formErrors).toEqual(
+        undefined
+      );
+    });
+  });
+
+  describe('Logical: ||, &&', () => {
+    it('AND: field_a > field_b && field_a > field_c (implicit with multiple rules in a single field)', () => {
+      const schema = createSchemaWithThreePropertiesWithRuleOnFieldA({
+        a_is_greater_than_b: {
+          errorMessage: 'Field A must be greater than field_b',
+          rule: {
+            '>': [{ var: 'field_a' }, { var: 'field_b' }],
+          },
+        },
+        a_is_greater_than_c: {
+          errorMessage: 'Field A must be greater than field_c',
+          rule: {
+            '>': [{ var: 'field_a' }, { var: 'field_c' }],
+          },
+        },
+      });
+      const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+      expect(handleValidation({ field_a: 1, field_b: 10, field_c: 0 }).formErrors.field_a).toEqual(
+        'Field A must be greater than field_b'
+      );
+      expect(handleValidation({ field_a: 1, field_b: 0, field_c: 10 }).formErrors.field_a).toEqual(
+        'Field A must be greater than field_c'
+      );
+      expect(handleValidation({ field_a: 10, field_b: 5, field_c: 5 }).formErrors).toEqual(
+        undefined
+      );
+    });
+
+    it('OR: field_a > field_b or field_a > field_c', () => {
+      const schema = createSchemaWithThreePropertiesWithRuleOnFieldA({
+        field_a_is_greater_than_b_or_c: {
+          errorMessage: 'Field A must be greater than field_b or field_c',
+          rule: {
+            or: [
+              { '>': [{ var: 'field_a' }, { var: 'field_b' }] },
+              { '>': [{ var: 'field_a' }, { var: 'field_c' }] },
+            ],
+          },
+        },
+      });
+      const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+      expect(handleValidation({ field_a: 0, field_b: 10, field_c: 10 }).formErrors.field_a).toEqual(
+        'Field A must be greater than field_b or field_c'
+      );
+      expect(handleValidation({ field_a: 1, field_b: 0, field_c: 10 }).formErrors).toEqual(
+        undefined
+      );
+      expect(handleValidation({ field_a: 10, field_b: 5, field_c: 5 }).formErrors).toEqual(
+        undefined
+      );
+    });
+  });
+
+  describe('Multiple validations', () => {
+    it('two rules: A > B; A is even', () => {
+      const { handleValidation } = createHeadlessForm(multiRuleSchema, { strictInputType: false });
+      expect(handleValidation({ field_a: 1 }).formErrors).toEqual({
+        field_a: 'A must be even',
+        field_b: 'Required field',
+      });
+      expect(handleValidation({ field_a: 1, field_b: 2 }).formErrors).toEqual({
+        field_a: 'A must be bigger than B',
+      });
+      expect(handleValidation({ field_a: 3, field_b: 2 }).formErrors).toEqual({
+        field_a: 'A must be even',
+      });
+      expect(handleValidation({ field_a: 4, field_b: 2 }).formErrors).toEqual(undefined);
+    });
+
+    it('2 seperate fields with rules failing', () => {
+      const { handleValidation } = createHeadlessForm(schemaWithTwoRules, {
+        strictInputType: false,
+      });
+      expect(handleValidation({ field_a: 1, field_b: 3 }).formErrors).toEqual({
+        field_a: 'A must be bigger than B',
+        field_b: 'B must be even',
+      });
+      expect(handleValidation({ field_a: 4, field_b: 2 }).formErrors).toEqual(undefined);
+    });
+  });
+
+  describe('Derive values', () => {
+    it('field_b is field_a * 2', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaWithComputedAttributes, {
+        strictInputType: false,
+        initialValues: { field_a: 2 },
+      });
+      const fieldB = fields.find((i) => i.name === 'field_b');
+      expect(fieldB.default).toEqual(4);
+      expect(fieldB.value).toEqual(4);
+      handleValidation({ field_a: 4 });
+      expect(fieldB.default).toEqual(8);
+    });
+  });
+});