@remoteoss/json-schema-form 0.5.0-dev.20230705093926 → 0.5.0-dev.20230717090149

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230705093926
- Generated: Wed, 05 Jul 2023 09:39:42 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230717090149
+ Generated: Mon, 17 Jul 2023 09:02:11 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,46 @@ 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 }) => {
+    if (minDate && maxDate) {
+      return (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}`
+      ).test(
+        "minDate",
+        `The date must be ${minDate} or after`,
+        (value) => validateMinDate(value, minDate)
+      ).test(
+        "maxDate",
+        `The date must be ${maxDate} or before`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    if (minDate) {
+      return (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}`
+      ).test(
+        "minDate",
+        `The date must be ${minDate} or after`,
+        (value) => validateMinDate(value, minDate)
+      );
+    }
+    if (maxDate) {
+      return (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}`
+      ).test(
+        "maxDate",
+        `The date must be ${maxDate} or before`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    return (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}`
+    );
+  },
   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 +497,9 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
+  if (inputType === "date") {
+    return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
+  }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
 };
 function buildYupSchema(field, config) {
@@ -914,8 +972,10 @@ function extractParametersFromNode(schemaNode) {
       },
       // Handle [name].presentation
       ...presentation,
-      description,
-      extra: presentation.extra,
+      description: containsHTML(description) ? wrapWithSpan(description, {
+        class: "jsf-description"
+      }) : description,
+      extra: containsHTML(presentation.extra) ? wrapWithSpan(presentation.extra, { class: "jsf-extra" }) : presentation.extra,
       statement: presentation.statement && {
         ...presentation.statement,
         description: statementDescription

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230705093926
- Generated: Wed, 05 Jul 2023 09:39:42 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230717090149
+ Generated: Mon, 17 Jul 2023 09:02:11 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,46 @@ 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 }) => {
+    if (minDate && maxDate) {
+      return 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}`
+      ).test(
+        "minDate",
+        `The date must be ${minDate} or after`,
+        (value) => validateMinDate(value, minDate)
+      ).test(
+        "maxDate",
+        `The date must be ${maxDate} or before`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    if (minDate) {
+      return 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}`
+      ).test(
+        "minDate",
+        `The date must be ${minDate} or after`,
+        (value) => validateMinDate(value, minDate)
+      );
+    }
+    if (maxDate) {
+      return 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}`
+      ).test(
+        "maxDate",
+        `The date must be ${maxDate} or before`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    return 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}`
+    );
+  },
   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 +461,9 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
+  if (inputType === "date") {
+    return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
+  }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
 };
 function buildYupSchema(field, config) {
@@ -878,8 +936,10 @@ function extractParametersFromNode(schemaNode) {
       },
       // Handle [name].presentation
       ...presentation,
-      description,
-      extra: presentation.extra,
+      description: containsHTML(description) ? wrapWithSpan(description, {
+        class: "jsf-description"
+      }) : description,
+      extra: containsHTML(presentation.extra) ? wrapWithSpan(presentation.extra, { class: "jsf-extra" }) : presentation.extra,
       statement: presentation.statement && {
         ...presentation.statement,
         description: statementDescription

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230705093926
- Generated: Wed, 05 Jul 2023 09:39:42 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230717090149
+ Generated: Mon, 17 Jul 2023 09:02:11 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,46 @@ 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 }) => {
+    if (minDate && maxDate) {
+      return 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}`
+      ).test(
+        "minDate",
+        `The date must be ${minDate} or after`,
+        (value) => validateMinDate(value, minDate)
+      ).test(
+        "maxDate",
+        `The date must be ${maxDate} or before`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    if (minDate) {
+      return 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}`
+      ).test(
+        "minDate",
+        `The date must be ${minDate} or after`,
+        (value) => validateMinDate(value, minDate)
+      );
+    }
+    if (maxDate) {
+      return 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}`
+      ).test(
+        "maxDate",
+        `The date must be ${maxDate} or before`,
+        (value) => validateMaxDate(value, maxDate)
+      );
+    }
+    return 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}`
+    );
+  },
   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 +11437,9 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
+  if (inputType === "date") {
+    return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
+  }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
 };
 function buildYupSchema(field, config) {
@@ -11854,8 +11912,10 @@ function extractParametersFromNode(schemaNode) {
       },
       // Handle [name].presentation
       ...presentation,
-      description,
-      extra: presentation.extra,
+      description: containsHTML(description) ? wrapWithSpan(description, {
+        class: "jsf-description"
+      }) : description,
+      extra: containsHTML(presentation.extra) ? wrapWithSpan(presentation.extra, { class: "jsf-extra" }) : presentation.extra,
       statement: presentation.statement && {
         ...presentation.statement,
         description: statementDescription

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.5.0-dev.20230705093926",
+  "version": "0.5.0-dev.20230717090149",
   "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

@@ -1035,6 +1035,62 @@ describe('createHeadlessForm', () => {
       );
     });
 
+    it('support "date" field type with a minDate', () => {
+      const result = 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 fieldValidator = result.fields[0].schema;
+      const todayDateHint = new Date().toISOString().substring(0, 10);
+      expect(fieldValidator.isValidSync('1922-02-01')).toBe(false);
+      expect(fieldValidator.isValidSync('1922-03-01')).toBe(true);
+      expect(fieldValidator.isValidSync('2021-03-01')).toBe(true);
+      expect(() => fieldValidator.validateSync('')).toThrowError(
+        `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`
+      );
+    });
+
+    it('support "date" field type with a maxDate', () => {
+      const result = 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 fieldValidator = result.fields[0].schema;
+      const todayDateHint = new Date().toISOString().substring(0, 10);
+      expect(fieldValidator.isValidSync('2022-02-01')).toBe(true);
+      expect(fieldValidator.isValidSync('2022-03-01')).toBe(true);
+      expect(fieldValidator.isValidSync('2022-04-01')).toBe(false);
+      expect(() => fieldValidator.validateSync('')).toThrowError(
+        `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`
+      );
+    });
+
     it('supports "file" field type', () => {
       const result = createHeadlessForm(
         JSONSchemaBuilder()