chore: integrate with latest main

brennj · brennj · commit bb83706de4fa · 2023-08-09T14:07:57.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+#### 0.4.3-beta.0 (2023-08-09)
+
+##### Bug fixes
+
+* **conditions:** Validate a deeply nested if (e.g. checking an object with a number property) in an if property now doesn't break the form. ([#33](https://github.com/remoteoss/json-schema-form/pull/33)) ([e34cfcc](https://github.com/remoteoss/json-schema-form/commit/e34cfccaf45f1460b346f3cff0c797b3d11259e3))
+
+#### 0.4.2-beta.0 (2023-07-20)
+
+##### Bug Fixes
+
+* **date:**  Validate based on minDate and maxDate ([#30](https://github.com/remoteoss/json-schema-form/pull/30)) ([01c0143e](https://github.com/remoteoss/json-schema-form/commit/01c0143ea4a3775f9489ae6cb8fd99a90b3f1394))
+
 #### 0.4.1-beta.0 (2023-07-03)
 
 ##### Bug Fixes
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.4.1-beta.0",
+  "version": "0.4.3-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",
diff --git a/src/checkIfConditionMatches.js b/src/checkIfConditionMatches.js
@@ -1,5 +1,5 @@
-import { compareFormValueWithSchemaValue, getField, validateFieldSchema } from '../helpers';
-import { hasProperty } from '../utils';
+import { compareFormValueWithSchemaValue, getField, validateFieldSchema } from './helpers';
+import { hasProperty } from './utils';
 
 /**
  * Checks if a "IF" condition matches given the current form state
@@ -46,6 +46,15 @@ export function checkIfConditionMatches(node, formValues, formFields, validation
       return currentProperty.enum.includes(value);
     }
 
+    if (currentProperty.properties) {
+      return checkIfConditionMatches(
+        { if: currentProperty },
+        formValues[name],
+        getField(name, formFields).fields,
+        validations
+      );
+    }
+
     const field = getField(name, formFields);
 
     return validateFieldSchema(
@@ -56,8 +65,7 @@ export function checkIfConditionMatches(node, formValues, formFields, validation
         inputType: field.inputType,
         required: true,
       },
-      value,
-      validations
+      value
     );
   });
 }
diff --git a/src/helpers.js b/src/helpers.js
@@ -5,10 +5,10 @@ import omitBy from 'lodash/omitBy';
 import set from 'lodash/set';
 import { lazy } from 'yup';
 
+import { checkIfConditionMatches } from './checkIfConditionMatches';
 import { supportedTypes, getInputType } from './internals/fields';
 import { pickXKey } from './internals/helpers';
 import { processJSONLogicNode } from './jsonLogic';
-import { checkIfConditionMatches } from './nodeProcessing/checkIfConditionMatches';
 import { containsHTML, hasProperty, wrapWithSpan } from './utils';
 import { buildCompleteYupSchema, buildYupSchema } from './yupSchema';
 
@@ -504,6 +504,7 @@ export function extractParametersFromNode(schemaNode) {
       maximum: node.maximum,
       maxFileSize: node.maxFileSize, // @deprecated in favor of presentation.maxFileSize
       default: node.default,
+      format: node.format,
       // Checkboxes conditions
       // — For checkboxes that only accept one value (string)
       ...(presentation?.inputType === 'checkbox' && { checkboxValue: node.const }),
diff --git a/src/jsonLogic.js b/src/jsonLogic.js
@@ -1,10 +1,10 @@
 import jsonLogic from 'json-logic-js';
 
-import { processNode } from './helpers';
 import {
   checkIfConditionMatches,
   checkIfMatchesValidationsAndComputedValues,
-} from './nodeProcessing/checkIfConditionMatches';
+} from './checkIfConditionMatches';
+import { processNode } from './helpers';
 
 jsonLogic.add_operation('Number.toFixed', (a, b) => {
   if (typeof a === 'number') return a.toFixed(b);
diff --git a/src/tests/checkIfConditionMatches.test.js b/src/tests/checkIfConditionMatches.test.js
@@ -0,0 +1,51 @@
+import { checkIfConditionMatches } from '../checkIfConditionMatches';
+
+it('Empty if is always going to be true', () => {
+  expect(checkIfConditionMatches({ if: { properties: {} } })).toBe(true);
+});
+
+it('Basic if check passes with correct value', () => {
+  expect(
+    checkIfConditionMatches(
+      { if: { properties: { a: { const: 'hello' } } } },
+      {
+        a: 'hello',
+      }
+    )
+  ).toBe(true);
+});
+
+it('Basic if check fails with incorrect value', () => {
+  expect(
+    checkIfConditionMatches(
+      { if: { properties: { a: { const: 'hello' } } } },
+      {
+        a: 'goodbye',
+      }
+    )
+  ).toBe(false);
+});
+
+it('Nested properties check passes with correct value', () => {
+  expect(
+    checkIfConditionMatches(
+      { 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(
+    checkIfConditionMatches(
+      { if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } } },
+      {
+        parent: { child: 'goodbye from child' },
+      },
+      [{ name: 'parent', fields: [] }]
+    )
+  ).toBe(false);
+});
diff --git a/src/tests/conditions.test.js b/src/tests/conditions.test.js
@@ -0,0 +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',
+                  },
+                },
+                required: ['child'],
+              },
+            },
+            required: ['parent'],
+          },
+          then: { required: ['parent_sibling'] },
+        },
+      ],
+      properties: {
+        parent: {
+          additionalProperties: false,
+          properties: {
+            child: {
+              oneOf: [
+                {
+                  const: 'yes',
+                },
+                { const: 'no' },
+              ],
+              type: 'string',
+            },
+          },
+          required: ['child'],
+          type: 'object',
+        },
+        parent_sibling: {
+          type: 'integer',
+        },
+      },
+      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',
+  });
+  expect(handleValidation({ parent: { child: 'yes' }, parent_sibling: 1 }).formErrors).toEqual(
+    undefined
+  );
+});
diff --git a/src/tests/createHeadlessForm.test.js b/src/tests/createHeadlessForm.test.js
@@ -1009,30 +1009,112 @@ describe('createHeadlessForm', () => {
     });
 
     it('support "date" field type', () => {
-      const result = createHeadlessForm(schemaInputTypeDate);
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeDate);
 
-      expect(result).toMatchObject({
-        fields: [
-          {
-            label: 'Birthdate',
-            name: 'birthdate',
-            required: true,
-            schema: expect.any(Object),
-            type: 'date',
-            maxLength: 10,
-            minDate: '1922-03-01',
-            maxDate: '2022-03-01',
-          },
-        ],
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(fields[0]).toMatchObject({
+        label: 'Birthdate',
+        name: 'birthdate',
+        required: true,
+        schema: expect.any(Object),
+        type: 'date',
+        minDate: '1922-03-01',
+        maxDate: '2022-03-17',
       });
 
-      const fieldValidator = result.fields[0].schema;
       const todayDateHint = new Date().toISOString().substring(0, 10);
-      expect(fieldValidator.isValidSync('2020-10-10')).toBe(true);
-      expect(fieldValidator.isValidSync('2020-13-10')).toBe(false);
-      expect(() => fieldValidator.validateSync('')).toThrowError(
-        `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`
-      );
+
+      expect(validateForm({})).toEqual({
+        birthdate: 'Required field',
+      });
+
+      expect(validateForm({ birthdate: '2020-10-10' })).toBeUndefined();
+      expect(validateForm({ birthdate: '2020-13-10' })).toEqual({
+        birthdate: `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`,
+      });
+    });
+
+    it('support "date" field type with a minDate', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeDate);
+
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(fields[0]).toMatchObject({
+        label: 'Birthdate',
+        name: 'birthdate',
+        required: true,
+        schema: expect.any(Object),
+        type: 'date',
+        minDate: '1922-03-01',
+        maxDate: '2022-03-17',
+      });
+
+      expect(validateForm({})).toEqual({
+        birthdate: 'Required field',
+      });
+
+      expect(validateForm({ birthdate: '' })).toEqual({
+        birthdate: `Required field`,
+      });
+
+      expect(validateForm({ birthdate: '1922-02-01' })).toEqual({
+        birthdate: 'The date must be 1922-03-01 or after.',
+      });
+
+      expect(validateForm({ birthdate: '1922-03-01' })).toBeUndefined();
+
+      expect(validateForm({ birthdate: '2021-03-01' })).toBeUndefined();
+    });
+
+    it('support "date" field type with a maxDate', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeDate);
+
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(fields[0]).toMatchObject({
+        label: 'Birthdate',
+        name: 'birthdate',
+        required: true,
+        schema: expect.any(Object),
+        type: 'date',
+        minDate: '1922-03-01',
+        maxDate: '2022-03-17',
+      });
+
+      expect(validateForm({ birthdate: '' })).toEqual({
+        birthdate: `Required field`,
+      });
+
+      expect(validateForm({ birthdate: '2022-02-01' })).toBeUndefined();
+      expect(validateForm({ birthdate: '2022-03-01' })).toBeUndefined();
+      expect(validateForm({ birthdate: '2022-04-01' })).toEqual({
+        birthdate: 'The date must be 2022-03-17 or before.',
+      });
+    });
+
+    it('support format date with minDate and maxDate', () => {
+      const schemaFormatDate = {
+        properties: {
+          birthdate: {
+            title: 'Birthdate',
+            type: 'string',
+            format: 'date',
+            'x-jsf-presentation': {
+              inputType: 'myDateType',
+              maxDate: '2022-03-01',
+              minDate: '1922-03-01',
+            },
+          },
+        },
+      };
+
+      const { handleValidation } = createHeadlessForm(schemaFormatDate);
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(validateForm({ birthdate: '1922-02-01' })).toEqual({
+        birthdate: 'The date must be 1922-03-01 or after.',
+      });
     });
 
     it('supports "file" field type', () => {
diff --git a/src/tests/helpers.js b/src/tests/helpers.js
@@ -272,18 +272,6 @@ export const mockSelectInputMultipleOptional = {
   type: ['array', 'null'],
 };
 
-export const mockDateInput = {
-  'x-jsf-presentation': {
-    inputType: 'date',
-    maxDate: '2022-03-01',
-    minDate: '1922-03-01',
-  },
-  title: 'Birthdate',
-  type: 'string',
-  format: 'date',
-  maxLength: 10,
-};
-
 export const mockFileInput = {
   description: 'File Input Description',
   'x-jsf-presentation': {
@@ -998,12 +986,19 @@ export const schemaInputTypeNumberWithPercentage = JSONSchemaBuilder()
   .setRequiredFields(['shares'])
   .build();
 
-export const schemaInputTypeDate = JSONSchemaBuilder()
-  .addInput({
-    birthdate: mockDateInput,
-  })
-  .setRequiredFields(['birthdate'])
-  .build();
+export const schemaInputTypeDate = {
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    birthdate: {
+      'x-jsf-presentation': { inputType: 'date', maxDate: '2022-03-17', minDate: '1922-03-01' },
+      title: 'Birthdate',
+      type: 'string',
+      format: 'date',
+    },
+  },
+  required: ['birthdate'],
+};
 
 export const schemaInputTypeEmail = JSONSchemaBuilder()
   .addInput({
diff --git a/src/yupSchema.js b/src/yupSchema.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@remoteoss/json-schema-form",`
`3`		`- "version": "0.4.1-beta.0",`
	`3`	`+ "version": "0.4.3-beta.0",`
`4`	`4`	`"description": "Headless UI form powered by JSON Schemas",`
`5`	`5`	`"author": "Remote.com <[email protected]> (https://remote.com/)",`
`6`	`6`	`"license": "MIT",`