@remoteoss/json-schema-form 0.5.0-dev.20230705114115 → 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.20230705114115
- Generated: Wed, 05 Jul 2023 11:41:29 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230717090149
+ Generated: Mon, 17 Jul 2023 09:02:11 GMT
 
  MIT License
 
@@ -350,6 +350,13 @@ function convertDiskSizeFromTo(from, to) {
     return value * Math.pow(1024, units.indexOf(from.toLowerCase())) / Math.pow(1024, units.indexOf(to.toLowerCase()));
   };
 }
+function containsHTML(str = "") {
+  return /<[a-z][\s\S]*>/i.test(str);
+}
+function wrapWithSpan(html, properties = {}) {
+  const attributes = Object.entries(properties).reduce((acc, [key, value]) => `${acc}${key}="${value}" `, "").trim();
+  return `<span ${attributes}>${html}</span>`;
+}
 function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
@@ -374,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) => {
@@ -387,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(),
@@ -435,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) {
@@ -871,7 +936,7 @@ function extractParametersFromNode(schemaNode) {
   const errorMessage = pickXKey(schemaNode, "errorMessage") ?? {};
   const node = (0, import_omit.default)(schemaNode, ["x-jsf-presentation", "presentation"]);
   const description = presentation?.description || node.description;
-  const statementDescription = presentation.statement?.description;
+  const statementDescription = containsHTML(presentation.statement?.description) ? wrapWithSpan(presentation.statement.description, { class: "jsf-statement" }) : presentation.statement?.description;
   return (0, import_omitBy.default)(
     {
       label: node.title,
@@ -907,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.20230705114115
- Generated: Wed, 05 Jul 2023 11:41:29 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230717090149
+ Generated: Mon, 17 Jul 2023 09:02:11 GMT
 
  MIT License
 
@@ -314,6 +314,13 @@ function convertDiskSizeFromTo(from, to) {
     return value * Math.pow(1024, units.indexOf(from.toLowerCase())) / Math.pow(1024, units.indexOf(to.toLowerCase()));
   };
 }
+function containsHTML(str = "") {
+  return /<[a-z][\s\S]*>/i.test(str);
+}
+function wrapWithSpan(html, properties = {}) {
+  const attributes = Object.entries(properties).reduce((acc, [key, value]) => `${acc}${key}="${value}" `, "").trim();
+  return `<span ${attributes}>${html}</span>`;
+}
 function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
@@ -338,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) => {
@@ -351,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(),
@@ -399,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) {
@@ -835,7 +900,7 @@ function extractParametersFromNode(schemaNode) {
   const errorMessage = pickXKey(schemaNode, "errorMessage") ?? {};
   const node = omit(schemaNode, ["x-jsf-presentation", "presentation"]);
   const description = presentation?.description || node.description;
-  const statementDescription = presentation.statement?.description;
+  const statementDescription = containsHTML(presentation.statement?.description) ? wrapWithSpan(presentation.statement.description, { class: "jsf-statement" }) : presentation.statement?.description;
   return omitBy(
     {
       label: node.title,
@@ -871,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.20230705114115
- Generated: Wed, 05 Jul 2023 11:41:29 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230717090149
+ Generated: Mon, 17 Jul 2023 09:02:11 GMT
 
  MIT License
 
@@ -11291,6 +11291,13 @@ function convertDiskSizeFromTo(from2, to) {
     return value * Math.pow(1024, units.indexOf(from2.toLowerCase())) / Math.pow(1024, units.indexOf(to.toLowerCase()));
   };
 }
+function containsHTML(str = "") {
+  return /<[a-z][\s\S]*>/i.test(str);
+}
+function wrapWithSpan(html, properties = {}) {
+  const attributes = Object.entries(properties).reduce((acc, [key, value]) => `${acc}${key}="${value}" `, "").trim();
+  return `<span ${attributes}>${html}</span>`;
+}
 function hasProperty(object2, propertyName) {
   return Object.prototype.hasOwnProperty.call(object2, propertyName);
 }
@@ -11314,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) => {
@@ -11327,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(),
@@ -11375,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) {
@@ -11811,7 +11876,7 @@ function extractParametersFromNode(schemaNode) {
   const errorMessage = pickXKey(schemaNode, "errorMessage") ?? {};
   const node = (0, import_omit.default)(schemaNode, ["x-jsf-presentation", "presentation"]);
   const description = presentation?.description || node.description;
-  const statementDescription = presentation.statement?.description;
+  const statementDescription = containsHTML(presentation.statement?.description) ? wrapWithSpan(presentation.statement.description, { class: "jsf-statement" }) : presentation.statement?.description;
   return (0, import_omitBy.default)(
     {
       label: node.title,
@@ -11847,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.20230705114115",
+  "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()