@remoteoss/json-schema-form 0.11.9-dev.20241213082826 → 0.11.10-beta.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+#### 0.11.10-beta.0 (2025-01-22)
+
+##### Bug Fixes
+
+* **checkbox:**  Boolean - allow nullable values, and throw friendly error message ([#109](https://github.com/remoteoss/json-schema-form/pull/109)) ([63286eee](https://github.com/remoteoss/json-schema-form/commit/63286eee57591b97c9c5bbbcfbf9231cfabde864))
+
+##### Chores
+
+* **conditionals:**  Highlight bugs related to validations and conditional fields  ([#107](https://github.com/remoteoss/json-schema-form/pull/107)) ([85dc3d6d](https://github.com/remoteoss/json-schema-form/commit/85dc3d6dbb0a0483a32479563ef9cd65cd36a210))
+*  Update eslint dependencies  ([#99](https://github.com/remoteoss/json-schema-form/pull/99)) ([ff2e6ed5](https://github.com/remoteoss/json-schema-form/commit/ff2e6ed56ba96d911ccc36dc50485d8cb6ec764b))
+
+
+
+##### Build System / Dependencies
+
+* **next:**
+  *  Add build step ([#110](https://github.com/remoteoss/json-schema-form/pull/110)) ([6c00ce32](https://github.com/remoteoss/json-schema-form/commit/6c00ce32f6e5edba328d5cdede38a82c330f5f14))
+  *  Set up lint ([#108](https://github.com/remoteoss/json-schema-form/pull/108)) ([038efcfc](https://github.com/remoteoss/json-schema-form/commit/038efcfcda6cb7b31852e7bc80c9524bffdb94f5))
+
+
+#### 0.11.9-beta.0 (2024-12-17)
+
+##### Bug Fixes
+
+*  Add support for boolean values in the if condition ([#100](https://github.com/remoteoss/json-schema-form/pull/100)) ([b3dca67d](https://github.com/remoteoss/json-schema-form/commit/b3dca67da14a7e4f5339a14a1e2f14ac014d2b92))
+
 #### 0.11.8-beta.0 (2024-11-20)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
- Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.9-dev.20241213082826
- Generated: Fri, 13 Dec 2024 08:29:06 GMT
+ Copyright (c) 2025 Remote Technology, Inc.
+ NPM Package: @remoteoss/json-schema-form@0.11.10-beta.0
+ Generated: Wed, 22 Jan 2025 16:30:09 GMT
 
  MIT License
 
@@ -96,7 +96,7 @@ function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
 
-// src/checkIfConditionMatches.js
+// src/internals/checkIfConditionMatches.js
 function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
   if (typeof node.if === "boolean") {
     return node.if;
@@ -557,7 +557,7 @@ var yupSchemas = {
   email: (0, import_yup.string)().trim().email("Please enter a valid email address").nullable(),
   fieldset: (0, import_yup.object)().nullable(),
   checkbox: (0, import_yup.string)().trim().nullable(),
-  checkboxBool: (0, import_yup.boolean)(),
+  checkboxBool: (0, import_yup.boolean)().typeError('The value must be a boolean, but received "${value}"').nullable(),
   multiple: {
     select: (0, import_yup.array)().nullable(),
     "group-array": (0, import_yup.array)().nullable()

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
- Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.9-dev.20241213082826
- Generated: Fri, 13 Dec 2024 08:29:06 GMT
+ Copyright (c) 2025 Remote Technology, Inc.
+ NPM Package: @remoteoss/json-schema-form@0.11.10-beta.0
+ Generated: Wed, 22 Jan 2025 16:30:09 GMT
 
  MIT License
 
@@ -59,7 +59,7 @@ function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
 
-// src/checkIfConditionMatches.js
+// src/internals/checkIfConditionMatches.js
 function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
   if (typeof node.if === "boolean") {
     return node.if;
@@ -520,7 +520,7 @@ var yupSchemas = {
   email: string().trim().email("Please enter a valid email address").nullable(),
   fieldset: object().nullable(),
   checkbox: string().trim().nullable(),
-  checkboxBool: boolean(),
+  checkboxBool: boolean().typeError('The value must be a boolean, but received "${value}"').nullable(),
   multiple: {
     select: array().nullable(),
     "group-array": array().nullable()

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
- Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.9-dev.20241213082826
- Generated: Fri, 13 Dec 2024 08:29:06 GMT
+ Copyright (c) 2025 Remote Technology, Inc.
+ NPM Package: @remoteoss/json-schema-form@0.11.10-beta.0
+ Generated: Wed, 22 Jan 2025 16:30:09 GMT
 
  MIT License
 
@@ -11576,7 +11576,7 @@ function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
 
-// src/checkIfConditionMatches.js
+// src/internals/checkIfConditionMatches.js
 function checkIfConditionMatchesProperties(node, formValues, formFields, logic) {
   if (typeof node.if === "boolean") {
     return node.if;
@@ -12036,7 +12036,7 @@ var yupSchemas = {
   email: StringSchema().trim().email("Please enter a valid email address").nullable(),
   fieldset: ObjectSchema().nullable(),
   checkbox: StringSchema().trim().nullable(),
-  checkboxBool: boolean2(),
+  checkboxBool: boolean2().typeError('The value must be a boolean, but received "${value}"').nullable(),
   multiple: {
     select: array_default().nullable(),
     "group-array": array_default().nullable()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.11.9-dev.20241213082826",
+  "version": "0.11.10-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",
@@ -54,8 +54,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.5",
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/preset-env": "^7.21.5",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
     "child-process-promise": "^2.2.1",
     "esbuild": "^0.17.15",

package/src/tests/checkIfConditionMatches.test.js

@@ -1,59 +1,65 @@
-import { checkIfConditionMatchesProperties } from '../checkIfConditionMatches';
+import { checkIfConditionMatchesProperties } from '../internals/checkIfConditionMatches';
 
-it('True if is always going to be true', () => {
-  expect(checkIfConditionMatchesProperties({ if: true })).toBe(true);
-});
+describe('checkIfConditionMatchesProperties()', () => {
+  it('True if is always going to be true', () => {
+    expect(checkIfConditionMatchesProperties({ if: true })).toBe(true);
+  });
 
-it('False if is always going to be false', () => {
-  expect(checkIfConditionMatchesProperties({ if: false })).toBe(false);
-});
+  it('False if is always going to be false', () => {
+    expect(checkIfConditionMatchesProperties({ if: false })).toBe(false);
+  });
 
-it('Empty if is always going to be true', () => {
-  expect(checkIfConditionMatchesProperties({ if: { properties: {} } })).toBe(true);
-});
+  it('Empty if is always going to be true', () => {
+    expect(checkIfConditionMatchesProperties({ if: { properties: {} } })).toBe(true);
+  });
 
-it('Basic if check passes with correct value', () => {
-  expect(
-    checkIfConditionMatchesProperties(
-      { if: { properties: { a: { const: 'hello' } } } },
-      {
-        a: 'hello',
-      }
-    )
-  ).toBe(true);
-});
+  it('Basic if check passes with correct value', () => {
+    expect(
+      checkIfConditionMatchesProperties(
+        { if: { properties: { a: { const: 'hello' } } } },
+        {
+          a: 'hello',
+        }
+      )
+    ).toBe(true);
+  });
 
-it('Basic if check fails with incorrect value', () => {
-  expect(
-    checkIfConditionMatchesProperties(
-      { if: { properties: { a: { const: 'hello' } } } },
-      {
-        a: 'goodbye',
-      }
-    )
-  ).toBe(false);
-});
+  it('Basic if check fails with incorrect value', () => {
+    expect(
+      checkIfConditionMatchesProperties(
+        { if: { properties: { a: { const: 'hello' } } } },
+        {
+          a: 'goodbye',
+        }
+      )
+    ).toBe(false);
+  });
 
-it('Nested properties check passes with correct value', () => {
-  expect(
-    checkIfConditionMatchesProperties(
-      { if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } } },
-      {
-        parent: { child: 'hello from child' },
-      },
-      [{ name: 'parent', fields: [] }]
-    )
-  ).toBe(true);
-});
+  it('Nested properties check passes with correct value', () => {
+    expect(
+      checkIfConditionMatchesProperties(
+        {
+          if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } },
+        },
+        {
+          parent: { child: 'hello from child' },
+        },
+        [{ name: 'parent', fields: [] }]
+      )
+    ).toBe(true);
+  });
 
-it('Nested properties check passes with correct value', () => {
-  expect(
-    checkIfConditionMatchesProperties(
-      { if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } } },
-      {
-        parent: { child: 'goodbye from child' },
-      },
-      [{ name: 'parent', fields: [] }]
-    )
-  ).toBe(false);
+  it('Nested properties check passes with correct value', () => {
+    expect(
+      checkIfConditionMatchesProperties(
+        {
+          if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } },
+        },
+        {
+          parent: { child: 'goodbye from child' },
+        },
+        [{ name: 'parent', fields: [] }]
+      )
+    ).toBe(false);
+  });
 });

package/src/tests/conditions.test.js

@@ -1,58 +1,58 @@
 import { createHeadlessForm } from '../createHeadlessForm';
 
-it('Should allow check of a nested property in a conditional', () => {
-  const { handleValidation } = createHeadlessForm(
-    {
-      additionalProperties: false,
-      allOf: [
-        {
-          if: {
-            properties: {
-              parent: {
-                properties: {
-                  child: {
-                    const: 'yes',
+describe('Conditional attributes updated', () => {
+  it('Should allow check of a nested property in a conditional', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        additionalProperties: false,
+        allOf: [
+          {
+            if: {
+              properties: {
+                parent: {
+                  properties: {
+                    child: {
+                      const: 'yes',
+                    },
                   },
+                  required: ['child'],
                 },
-                required: ['child'],
               },
+              required: ['parent'],
             },
-            required: ['parent'],
+            then: { required: ['parent_sibling'] },
           },
-          then: { required: ['parent_sibling'] },
-        },
-      ],
-      properties: {
-        parent: {
-          additionalProperties: false,
-          properties: {
-            child: {
-              oneOf: [{ const: 'yes' }, { const: 'no' }],
-              type: 'string',
+        ],
+        properties: {
+          parent: {
+            additionalProperties: false,
+            properties: {
+              child: {
+                oneOf: [{ const: 'yes' }, { const: 'no' }],
+                type: 'string',
+              },
             },
+            required: ['child'],
+            type: 'object',
+          },
+          parent_sibling: {
+            type: 'integer',
           },
-          required: ['child'],
-          type: 'object',
-        },
-        parent_sibling: {
-          type: 'integer',
         },
+        required: ['parent'],
+        type: 'object',
       },
-      required: ['parent'],
-      type: 'object',
-    },
-    { strictInputType: false }
-  );
-  expect(handleValidation({ parent: { child: 'no' } }).formErrors).toEqual(undefined);
-  expect(handleValidation({ parent: { child: 'yes' } }).formErrors).toEqual({
-    parent_sibling: 'Required field',
+      { strictInputType: false }
+    );
+    expect(handleValidation({ parent: { child: 'no' } }).formErrors).toEqual(undefined);
+    expect(handleValidation({ parent: { child: 'yes' } }).formErrors).toEqual({
+      parent_sibling: 'Required field',
+    });
+    expect(handleValidation({ parent: { child: 'yes' }, parent_sibling: 1 }).formErrors).toEqual(
+      undefined
+    );
   });
-  expect(handleValidation({ parent: { child: 'yes' }, parent_sibling: 1 }).formErrors).toEqual(
-    undefined
-  );
-});
 
-describe('Conditional attributes updated', () => {
   it('Update basic case with const, default, maximum', () => {
     const { fields, handleValidation } = createHeadlessForm(
       {
@@ -547,3 +547,165 @@ describe('Conditional with literal booleans', () => {
     });
   });
 });
+
+describe('Conditionals - bugs and code-smells', () => {
+  // Why do we have these bugs?
+  // To be honest we never realized it much later later.
+  // We will fix them in the next major version.
+
+  const schemaHasPet = {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      has_pet: {
+        title: 'Has Pet',
+        description: 'Do you have a pet?',
+        oneOf: [
+          { title: 'Yes', const: 'yes' },
+          { title: 'No', const: 'no' },
+        ],
+        type: 'string',
+      },
+      pet_name: {
+        title: "Pet's name",
+        type: 'string',
+      },
+    },
+    required: ['has_pet'],
+    allOf: [
+      {
+        if: {
+          properties: {
+            has_pet: { const: 'yes' },
+          },
+          required: ['has_pet'],
+        },
+        then: {
+          required: ['pet_name'],
+        },
+        else: {
+          properties: {
+            pet_name: false,
+          },
+        },
+      },
+    ],
+  };
+
+  it('Given values from hidden fields, it does not thrown an error (@bug)', () => {
+    const { fields, handleValidation } = createHeadlessForm(schemaHasPet, {
+      strictInputType: false,
+    });
+
+    const petNameField = fields[1];
+
+    const validation = handleValidation({ has_pet: 'no', pet_name: 'Max' });
+    expect(petNameField.isVisible).toBe(false);
+
+    // Bug: 🐛 It does not thrown an error,
+    // but it should to be compliant with JSON Schema specs.
+    expect(validation.formErrors).toBeUndefined();
+    // The error should be something like:
+    // expect(validation.formErrors).toEqual({ pet_name: 'Not allowed.'});
+  });
+
+  it('Given values from hidden fields, it mutates the values (@bug)', () => {
+    const { handleValidation } = createHeadlessForm(schemaHasPet, {
+      strictInputType: false,
+    });
+
+    const newValues = { has_pet: 'no', pet_name: 'Max' };
+
+    const validation = handleValidation(newValues);
+
+    expect(newValues).toEqual({
+      has_pet: 'no',
+      pet_name: null, // BUG! 🐛 Should still be "Max", should not be mutated.
+    });
+
+    // Same bug as explained in the previous test.
+    expect(validation.formErrors).toBeUndefined();
+  });
+
+  it('Given multiple conditionals to the same field, it only applies the last one (@bug) - case 1', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        additionalProperties: false,
+        properties: {
+          field_a: { type: 'string' },
+          field_b: { type: 'string' },
+          field_c: { type: 'number' },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { field_a: { const: 'yes' } },
+              required: ['field_a'],
+            },
+            then: { properties: { field_c: { minimum: 30 } } },
+          },
+          {
+            if: {
+              properties: { field_b: { const: 'yes' } },
+              required: ['field_b'],
+            },
+            then: { properties: { field_c: { minimum: 10 } } },
+          },
+        ],
+      },
+      {
+        strictInputType: false,
+      }
+    );
+
+    const validation = handleValidation({ field_a: 'yes', field_b: 'yes', field_c: 5 });
+    expect(validation.formErrors).toEqual({
+      // BUG: 🐛 it should be "Must be greater or equal to 30"
+      field_c: 'Must be greater or equal to 10',
+    });
+  });
+
+  it('Given multiple conditionals to the same field, it only applies the last one (@bug) - case 2', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        additionalProperties: false,
+        properties: {
+          field_a: { type: 'string' },
+          field_b: { type: 'string' },
+          field_c: { type: 'number' },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { field_a: { const: 'yes' } },
+              required: ['field_a'],
+            },
+            then: { properties: { field_c: { minimum: 5 } } },
+          },
+          {
+            if: {
+              properties: { field_b: { const: 'yes' } },
+              required: ['field_b'],
+            },
+            then: { properties: { field_c: { maximum: 10 } } },
+          },
+        ],
+      },
+      {
+        strictInputType: false,
+      }
+    );
+
+    const validation1 = handleValidation({ field_a: 'yes', field_b: 'yes', field_c: 12 });
+    expect(validation1.formErrors).toEqual({
+      field_c: 'Must be smaller or equal to 10',
+    });
+
+    const validation2 = handleValidation({ field_a: 'yes', field_b: 'yes', field_c: 3 });
+    // BUG: 🐛 it should be "Must be greater or equal to 5"
+    expect(validation2.formErrors).toBeUndefined();
+    // expect(validation1.formErrors).toEqual({
+    //   field_c: 'Must be greater or equal to 5',
+    // });
+  });
+});

package/src/tests/createHeadlessForm.customValidations.test.js

@@ -140,7 +140,8 @@ afterAll(() => {
   console.warn.mockRestore();
 });
 
-describe('createHeadlessForm() - custom validations', () => {
+// @deprecated - customProperties won't be supported in v2.
+describe('createHeadlessForm() - custom validations (deprecated)', () => {
   describe('simple validation (eg maximum)', () => {
     it('works as a number', () => {
       const { fields, validateForm } = createScenario({