@remoteoss/json-schema-form 0.4.1-dev.20230703203242 → 0.4.2-beta.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+#### 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
+
+* **fieldset:**  support root conditionals for fieldsets ([#23](https://github.com/remoteoss/json-schema-form/pull/23)) ([65d87b3a](https://github.com/remoteoss/json-schema-form/commit/65d87b3a93018f0729aed565000eb2a2ce1f2ce7))
+* **select/radio:**  Accept just the values in options (plus `''` and `null` for backward-compatibility) ([#18](https://github.com/remoteoss/json-schema-form/pull/18)) ([37501d2d](https://github.com/remoteoss/json-schema-form/commit/37501d2ddafdd5e207b34d2ca3f6b7b7a1006e9d))
+
 #### 0.4.0-beta.0 (2023-06-22)
 
 ##### New Features

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.4.1-dev.20230703203242
- Generated: Mon, 03 Jul 2023 20:32:50 GMT
+ NPM Package: @remoteoss/json-schema-form@0.4.2-beta.0
+ Generated: Thu, 20 Jul 2023 11:13:46 GMT
 
  MIT License
 
@@ -381,6 +381,25 @@ var validateOnlyStrings = (0, import_yup.string)().trim().nullable().test(
     return true;
   }
 );
+var compareDates = (d1, d2) => {
+  let date1 = new Date(d1).getTime();
+  let date2 = new Date(d2).getTime();
+  if (date1 < date2) {
+    return "LESSER";
+  } else if (date1 > date2) {
+    return "GREATER";
+  } else {
+    return "EQUAL";
+  }
+};
+var validateMinDate = (value, minDate) => {
+  const compare = compareDates(value, minDate);
+  return compare === "GREATER" || compare === "EQUAL" ? true : false;
+};
+var validateMaxDate = (value, minDate) => {
+  const compare = compareDates(value, minDate);
+  return compare === "LESSER" || compare === "EQUAL" ? true : false;
+};
 var yupSchemas = {
   text: validateOnlyStrings,
   radioOrSelect: (options) => (0, import_yup.string)().nullable().transform((value) => {
@@ -394,10 +413,32 @@ var yupSchemas = {
   }).oneOf(options, ({ value }) => {
     return `The option ${JSON.stringify(value)} is not valid.`;
   }),
-  date: (0, import_yup.string)().nullable().trim().matches(
-    /(?:\d){4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9]|3[0-1])/,
-    `Must be a valid date in ${DEFAULT_DATE_FORMAT.toLocaleLowerCase()} format. e.g. ${todayDateHint}`
-  ),
+  date: ({ minDate, maxDate }) => {
+    let dateString = (0, import_yup.string)().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
+      }
+      return value === null ? void 0 : value;
+    }).trim().matches(
+      /(?:\d){4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9]|3[0-1])/,
+      `Must be a valid date in ${DEFAULT_DATE_FORMAT.toLocaleLowerCase()} format. e.g. ${todayDateHint}`
+    );
+    if (minDate) {
+      dateString = dateString.test(
+        "minDate",
+        `The date must be ${minDate} or after.`,
+        (value) => validateMinDate(value, minDate)
+      );
+    }
+    if (maxDate) {
+      dateString = dateString.test(
+        "maxDate",
+        `The date must be ${maxDate} or before.`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    return dateString;
+  },
   number: (0, import_yup.number)().typeError("The value must be a number").nullable(),
   file: (0, import_yup.array)().nullable(),
   email: (0, import_yup.string)().trim().email("Please enter a valid email address").nullable(),
@@ -442,6 +483,9 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
+  if (field.format === "date") {
+    return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
+  }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
 };
 function buildYupSchema(field, config) {
@@ -901,6 +945,7 @@ function extractParametersFromNode(schemaNode) {
       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 },

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.4.1-dev.20230703203242
- Generated: Mon, 03 Jul 2023 20:32:50 GMT
+ NPM Package: @remoteoss/json-schema-form@0.4.2-beta.0
+ Generated: Thu, 20 Jul 2023 11:13:46 GMT
 
  MIT License
 
@@ -345,6 +345,25 @@ var validateOnlyStrings = string().trim().nullable().test(
     return true;
   }
 );
+var compareDates = (d1, d2) => {
+  let date1 = new Date(d1).getTime();
+  let date2 = new Date(d2).getTime();
+  if (date1 < date2) {
+    return "LESSER";
+  } else if (date1 > date2) {
+    return "GREATER";
+  } else {
+    return "EQUAL";
+  }
+};
+var validateMinDate = (value, minDate) => {
+  const compare = compareDates(value, minDate);
+  return compare === "GREATER" || compare === "EQUAL" ? true : false;
+};
+var validateMaxDate = (value, minDate) => {
+  const compare = compareDates(value, minDate);
+  return compare === "LESSER" || compare === "EQUAL" ? true : false;
+};
 var yupSchemas = {
   text: validateOnlyStrings,
   radioOrSelect: (options) => string().nullable().transform((value) => {
@@ -358,10 +377,32 @@ var yupSchemas = {
   }).oneOf(options, ({ value }) => {
     return `The option ${JSON.stringify(value)} is not valid.`;
   }),
-  date: string().nullable().trim().matches(
-    /(?:\d){4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9]|3[0-1])/,
-    `Must be a valid date in ${DEFAULT_DATE_FORMAT.toLocaleLowerCase()} format. e.g. ${todayDateHint}`
-  ),
+  date: ({ minDate, maxDate }) => {
+    let dateString = string().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
+      }
+      return value === null ? void 0 : value;
+    }).trim().matches(
+      /(?:\d){4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9]|3[0-1])/,
+      `Must be a valid date in ${DEFAULT_DATE_FORMAT.toLocaleLowerCase()} format. e.g. ${todayDateHint}`
+    );
+    if (minDate) {
+      dateString = dateString.test(
+        "minDate",
+        `The date must be ${minDate} or after.`,
+        (value) => validateMinDate(value, minDate)
+      );
+    }
+    if (maxDate) {
+      dateString = dateString.test(
+        "maxDate",
+        `The date must be ${maxDate} or before.`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    return dateString;
+  },
   number: number().typeError("The value must be a number").nullable(),
   file: array().nullable(),
   email: string().trim().email("Please enter a valid email address").nullable(),
@@ -406,6 +447,9 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
+  if (field.format === "date") {
+    return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
+  }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
 };
 function buildYupSchema(field, config) {
@@ -865,6 +909,7 @@ function extractParametersFromNode(schemaNode) {
       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 },

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.4.1-dev.20230703203242
- Generated: Mon, 03 Jul 2023 20:32:50 GMT
+ NPM Package: @remoteoss/json-schema-form@0.4.2-beta.0
+ Generated: Thu, 20 Jul 2023 11:13:46 GMT
 
  MIT License
 
@@ -11321,6 +11321,25 @@ var validateOnlyStrings = StringSchema().trim().nullable().test(
     return true;
   }
 );
+var compareDates = (d1, d2) => {
+  let date1 = new Date(d1).getTime();
+  let date2 = new Date(d2).getTime();
+  if (date1 < date2) {
+    return "LESSER";
+  } else if (date1 > date2) {
+    return "GREATER";
+  } else {
+    return "EQUAL";
+  }
+};
+var validateMinDate = (value, minDate) => {
+  const compare = compareDates(value, minDate);
+  return compare === "GREATER" || compare === "EQUAL" ? true : false;
+};
+var validateMaxDate = (value, minDate) => {
+  const compare = compareDates(value, minDate);
+  return compare === "LESSER" || compare === "EQUAL" ? true : false;
+};
 var yupSchemas = {
   text: validateOnlyStrings,
   radioOrSelect: (options) => StringSchema().nullable().transform((value) => {
@@ -11334,10 +11353,32 @@ var yupSchemas = {
   }).oneOf(options, ({ value }) => {
     return `The option ${JSON.stringify(value)} is not valid.`;
   }),
-  date: StringSchema().nullable().trim().matches(
-    /(?:\d){4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9]|3[0-1])/,
-    `Must be a valid date in ${DEFAULT_DATE_FORMAT.toLocaleLowerCase()} format. e.g. ${todayDateHint}`
-  ),
+  date: ({ minDate, maxDate }) => {
+    let dateString = StringSchema().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
+      }
+      return value === null ? void 0 : value;
+    }).trim().matches(
+      /(?:\d){4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9]|3[0-1])/,
+      `Must be a valid date in ${DEFAULT_DATE_FORMAT.toLocaleLowerCase()} format. e.g. ${todayDateHint}`
+    );
+    if (minDate) {
+      dateString = dateString.test(
+        "minDate",
+        `The date must be ${minDate} or after.`,
+        (value) => validateMinDate(value, minDate)
+      );
+    }
+    if (maxDate) {
+      dateString = dateString.test(
+        "maxDate",
+        `The date must be ${maxDate} or before.`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    return dateString;
+  },
   number: NumberSchema().typeError("The value must be a number").nullable(),
   file: array_default().nullable(),
   email: StringSchema().trim().email("Please enter a valid email address").nullable(),
@@ -11382,6 +11423,9 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
+  if (field.format === "date") {
+    return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
+  }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
 };
 function buildYupSchema(field, config) {
@@ -11841,6 +11885,7 @@ function extractParametersFromNode(schemaNode) {
       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 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.4.1-dev.20230703203242",
+  "version": "0.4.2-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",

package/src/tests/createHeadlessForm.test.js

@@ -439,23 +439,15 @@ describe('createHeadlessForm', () => {
 
       // All allowed options are valid
       validOptions.forEach((value) => {
-        expect(
-          validateForm({
-            [fieldName]: value,
-          })
-        ).toBeUndefined();
+        expect(validateForm({ [fieldName]: value })).toBeUndefined();
       });
 
       // Any other arbitrary value is not valid.
-      expect(
-        validateForm({
-          [fieldName]: 'blah-blah',
-        })
-      ).toEqual({
+      expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
         [fieldName]: 'The option "blah-blah" is not valid.',
       });
 
-      // This is a required field:
+      // Given undefined, it says it's a  required field.
       expect(validateForm({})).toEqual({
         [fieldName]: 'Required field',
       });
@@ -831,6 +823,9 @@ describe('createHeadlessForm', () => {
 
     describe('support "radio" optional field - more examples @BUG RMT-518', () => {
       function assertCommonBehavior(validateForm) {
+        // Note: Very similar to assertOptionsAllowed()
+        // We could reuse it in a next iteration.
+
         // Happy path
         expect(validateForm({ has_car: 'yes' })).toBeUndefined();
 
@@ -1014,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', () => {

package/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({