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

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230717090149
- Generated: Mon, 17 Jul 2023 09:02:11 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230719114157
+ Generated: Wed, 19 Jul 2023 11:42:22 GMT
 
  MIT License
 
@@ -414,44 +414,25 @@ var yupSchemas = {
     return `The option ${JSON.stringify(value)} is not valid.`;
   }),
   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)
-      );
-    }
+    let dateString = (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}`
+    );
     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(
+      dateString = dateString.test(
         "minDate",
-        `The date must be ${minDate} or after`,
+        `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(
+      dateString = dateString.test(
         "maxDate",
-        `The date must be ${maxDate} or before`,
+        `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}`
-    );
+    return dateString;
   },
   number: (0, import_yup.number)().typeError("The value must be a number").nullable(),
   file: (0, import_yup.array)().nullable(),
@@ -497,7 +478,7 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
-  if (inputType === "date") {
+  if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
   }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
@@ -959,6 +940,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.5.0-dev.20230717090149
- Generated: Mon, 17 Jul 2023 09:02:11 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230719114157
+ Generated: Wed, 19 Jul 2023 11:42:22 GMT
 
  MIT License
 
@@ -378,44 +378,25 @@ var yupSchemas = {
     return `The option ${JSON.stringify(value)} is not valid.`;
   }),
   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)
-      );
-    }
+    let dateString = 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}`
+    );
     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(
+      dateString = dateString.test(
         "minDate",
-        `The date must be ${minDate} or after`,
+        `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(
+      dateString = dateString.test(
         "maxDate",
-        `The date must be ${maxDate} or before`,
+        `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}`
-    );
+    return dateString;
   },
   number: number().typeError("The value must be a number").nullable(),
   file: array().nullable(),
@@ -461,7 +442,7 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
-  if (inputType === "date") {
+  if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
   }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
@@ -923,6 +904,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.5.0-dev.20230717090149
- Generated: Mon, 17 Jul 2023 09:02:11 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230719114157
+ Generated: Wed, 19 Jul 2023 11:42:22 GMT
 
  MIT License
 
@@ -11354,44 +11354,25 @@ var yupSchemas = {
     return `The option ${JSON.stringify(value)} is not valid.`;
   }),
   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)
-      );
-    }
+    let dateString = 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}`
+    );
     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(
+      dateString = dateString.test(
         "minDate",
-        `The date must be ${minDate} or after`,
+        `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(
+      dateString = dateString.test(
         "maxDate",
-        `The date must be ${maxDate} or before`,
+        `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}`
-    );
+    return dateString;
   },
   number: NumberSchema().typeError("The value must be a number").nullable(),
   file: array_default().nullable(),
@@ -11437,7 +11418,7 @@ var getYupSchema = ({ inputType, ...field }) => {
     const optionValues = getOptions(field);
     return yupSchemas.radioOrSelect(optionValues);
   }
-  if (inputType === "date") {
+  if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });
   }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
@@ -11899,6 +11880,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.5.0-dev.20230717090149",
+  "version": "0.5.0-dev.20230719114157",
   "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

@@ -1036,59 +1036,91 @@ describe('createHeadlessForm', () => {
     });
 
     it('support "date" field type with a minDate', () => {
-      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',
+        maxLength: 10,
+        minDate: '1922-03-01',
+        maxDate: '2022-03-01',
+      });
+
+      expect(validateForm({})).toEqual({
+        birthdate: 'Required field',
       });
 
-      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}`
-      );
+
+      expect(validateForm({ birthdate: '' })).toEqual({
+        birthdate: `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`,
+      });
+
+      expect(validateForm({ birthdate: '1922-02-01' })).toEqual({
+        birthdate: 'The date must be 1922-03-01 or after.',
+      });
+
+      expect(validateForm({ birthdate: '1922-03-01' })).toEqual(undefined);
+
+      expect(validateForm({ birthdate: '2021-03-01' })).toEqual(undefined);
     });
 
     it('support "date" field type with a maxDate', () => {
-      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',
+        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}`
-      );
+
+      expect(validateForm({ birthdate: '' })).toEqual({
+        birthdate: `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`,
+      });
+
+      expect(validateForm({ birthdate: '2022-02-01' })).toEqual(undefined);
+      expect(validateForm({ birthdate: '2022-03-01' })).toEqual(undefined);
+      expect(validateForm({ birthdate: '2022-04-01' })).toEqual({
+        birthdate: 'The date must be 2022-03-01 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', () => {