@remoteoss/json-schema-form 0.7.1-dev.20231026204916 → 0.7.1-dev.20231031082524

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231026204916
- Generated: Thu, 26 Oct 2023 20:49:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
+ Generated: Tue, 31 Oct 2023 08:25:53 GMT
 
  MIT License
 
@@ -461,38 +461,22 @@ var validateMaxDate = (value, minDate) => {
 };
 var yupSchemas = {
   text: validateOnlyStrings,
-  radioOrSelect: (options) => (0, import_yup.string)().nullable().transform((value) => {
-    if (value === "") {
-      return void 0;
+  radioOrSelect: (options, isString) => {
+    if (isString) {
+      return (0, import_yup.string)().nullable();
     }
-    if (options?.some((option) => option.value === null)) {
-      return value;
-    }
-    return value === null ? void 0 : value;
-  }).test(
-    /* 
-      Custom test determines if the value either:
-       - Matches a specific option by value
-       - Matches a pattern
-      If the option is undefined do not test, to allow for optional fields. 
-     */
-    "matchesOptionOrPattern",
-    ({ value }) => `The option ${JSON.stringify(value)} is not valid.`,
-    (value) => {
-      if (value === void 0) {
-        return true;
-      }
-      const exactMatch = options.some((option) => option.value === value);
-      if (exactMatch) {
-        return true;
+    return (0, import_yup.string)().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
       }
-      const patternMatch = options.some((option) => option.pattern?.test(value));
-      if (patternMatch) {
-        return true;
+      if (options?.includes(null)) {
+        return value;
       }
-      return false;
-    }
-  ),
+      return value === null ? void 0 : value;
+    }).oneOf(options, ({ value }) => {
+      return `The option ${JSON.stringify(value)} is not valid.`;
+    });
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = (0, import_yup.string)().nullable().transform((value) => {
       if (value === "") {
@@ -550,21 +534,19 @@ function getRequiredErrorMessage(inputType, { inlineError, configError }) {
 }
 var getJsonTypeInArray = (jsonType) => Array.isArray(jsonType) ? jsonType.find((val) => val !== "null") : jsonType;
 var getOptions = (field) => {
-  const allValues = field.options?.map((option) => ({
-    value: option.value,
-    pattern: option.pattern ? new RegExp(option.pattern) : null
-  }));
+  const allValues = field.options?.map((option) => option.value);
   const isOptionalWithNull = Array.isArray(field.jsonType) && // @TODO should also check the "oneOf" directly looking for "null"
   // option but we don't have direct access at this point.
   // Otherwise the JSON Schema validator will fail as explained in PR#18
   field.jsonType.includes("null");
-  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
+  return isOptionalWithNull ? [...allValues, null] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
   if (field.options?.length > 0) {
+    const isString = field.options?.findIndex((option) => option.type === "string") > -1;
     const optionValues = getOptions(field);
-    return yupSchemas.radioOrSelect(optionValues);
+    return yupSchemas.radioOrSelect(optionValues, isString);
   }
   if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231026204916
- Generated: Thu, 26 Oct 2023 20:49:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
+ Generated: Tue, 31 Oct 2023 08:25:53 GMT
 
  MIT License
 
@@ -425,38 +425,22 @@ var validateMaxDate = (value, minDate) => {
 };
 var yupSchemas = {
   text: validateOnlyStrings,
-  radioOrSelect: (options) => string().nullable().transform((value) => {
-    if (value === "") {
-      return void 0;
+  radioOrSelect: (options, isString) => {
+    if (isString) {
+      return string().nullable();
     }
-    if (options?.some((option) => option.value === null)) {
-      return value;
-    }
-    return value === null ? void 0 : value;
-  }).test(
-    /* 
-      Custom test determines if the value either:
-       - Matches a specific option by value
-       - Matches a pattern
-      If the option is undefined do not test, to allow for optional fields. 
-     */
-    "matchesOptionOrPattern",
-    ({ value }) => `The option ${JSON.stringify(value)} is not valid.`,
-    (value) => {
-      if (value === void 0) {
-        return true;
-      }
-      const exactMatch = options.some((option) => option.value === value);
-      if (exactMatch) {
-        return true;
+    return string().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
       }
-      const patternMatch = options.some((option) => option.pattern?.test(value));
-      if (patternMatch) {
-        return true;
+      if (options?.includes(null)) {
+        return value;
       }
-      return false;
-    }
-  ),
+      return value === null ? void 0 : value;
+    }).oneOf(options, ({ value }) => {
+      return `The option ${JSON.stringify(value)} is not valid.`;
+    });
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = string().nullable().transform((value) => {
       if (value === "") {
@@ -514,21 +498,19 @@ function getRequiredErrorMessage(inputType, { inlineError, configError }) {
 }
 var getJsonTypeInArray = (jsonType) => Array.isArray(jsonType) ? jsonType.find((val) => val !== "null") : jsonType;
 var getOptions = (field) => {
-  const allValues = field.options?.map((option) => ({
-    value: option.value,
-    pattern: option.pattern ? new RegExp(option.pattern) : null
-  }));
+  const allValues = field.options?.map((option) => option.value);
   const isOptionalWithNull = Array.isArray(field.jsonType) && // @TODO should also check the "oneOf" directly looking for "null"
   // option but we don't have direct access at this point.
   // Otherwise the JSON Schema validator will fail as explained in PR#18
   field.jsonType.includes("null");
-  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
+  return isOptionalWithNull ? [...allValues, null] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
   if (field.options?.length > 0) {
+    const isString = field.options?.findIndex((option) => option.type === "string") > -1;
     const optionValues = getOptions(field);
-    return yupSchemas.radioOrSelect(optionValues);
+    return yupSchemas.radioOrSelect(optionValues, isString);
   }
   if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231026204916
- Generated: Thu, 26 Oct 2023 20:49:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
+ Generated: Tue, 31 Oct 2023 08:25:53 GMT
 
  MIT License
 
@@ -11779,38 +11779,22 @@ var validateMaxDate = (value, minDate) => {
 };
 var yupSchemas = {
   text: validateOnlyStrings,
-  radioOrSelect: (options) => StringSchema().nullable().transform((value) => {
-    if (value === "") {
-      return void 0;
+  radioOrSelect: (options, isString2) => {
+    if (isString2) {
+      return StringSchema().nullable();
     }
-    if (options?.some((option) => option.value === null)) {
-      return value;
-    }
-    return value === null ? void 0 : value;
-  }).test(
-    /* 
-      Custom test determines if the value either:
-       - Matches a specific option by value
-       - Matches a pattern
-      If the option is undefined do not test, to allow for optional fields. 
-     */
-    "matchesOptionOrPattern",
-    ({ value }) => `The option ${JSON.stringify(value)} is not valid.`,
-    (value) => {
-      if (value === void 0) {
-        return true;
-      }
-      const exactMatch = options.some((option) => option.value === value);
-      if (exactMatch) {
-        return true;
+    return StringSchema().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
       }
-      const patternMatch = options.some((option) => option.pattern?.test(value));
-      if (patternMatch) {
-        return true;
+      if (options?.includes(null)) {
+        return value;
       }
-      return false;
-    }
-  ),
+      return value === null ? void 0 : value;
+    }).oneOf(options, ({ value }) => {
+      return `The option ${JSON.stringify(value)} is not valid.`;
+    });
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = StringSchema().nullable().transform((value) => {
       if (value === "") {
@@ -11868,21 +11852,19 @@ function getRequiredErrorMessage(inputType, { inlineError, configError }) {
 }
 var getJsonTypeInArray = (jsonType) => Array.isArray(jsonType) ? jsonType.find((val) => val !== "null") : jsonType;
 var getOptions = (field) => {
-  const allValues = field.options?.map((option) => ({
-    value: option.value,
-    pattern: option.pattern ? new RegExp(option.pattern) : null
-  }));
+  const allValues = field.options?.map((option) => option.value);
   const isOptionalWithNull = Array.isArray(field.jsonType) && // @TODO should also check the "oneOf" directly looking for "null"
   // option but we don't have direct access at this point.
   // Otherwise the JSON Schema validator will fail as explained in PR#18
   field.jsonType.includes("null");
-  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
+  return isOptionalWithNull ? [...allValues, null] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
   if (field.options?.length > 0) {
+    const isString2 = field.options?.findIndex((option) => option.type === "string") > -1;
     const optionValues = getOptions(field);
-    return yupSchemas.radioOrSelect(optionValues);
+    return yupSchemas.radioOrSelect(optionValues, isString2);
   }
   if (field.format === "date") {
     return yupSchemas.date({ minDate: field.minDate, maxDate: field.maxDate });

package/package.json

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

@@ -15,6 +15,7 @@ import {
   schemaInputTypeRadioOptionsWithDetails,
   schemaInputTypeSelectSoloDeprecated,
   schemaInputTypeSelectSolo,
+  schemaInputTypeSelectString,
   schemaInputTypeSelectMultipleDeprecated,
   schemaInputTypeSelectMultiple,
   schemaInputTypeSelectMultipleOptional,
@@ -38,7 +39,6 @@ import {
   mockFileInput,
   mockRadioCardInput,
   mockRadioCardExpandableInput,
-  mockTelWithPattern,
   mockTextInput,
   mockTextInputDeprecated,
   mockNumberInput,
@@ -431,7 +431,7 @@ describe('createHeadlessForm', () => {
   });
 
   describe('field support', () => {
-    function assertOptionsAllowed({ handleValidation, fieldName, validOptions }) {
+    function assertOptionsAllowed({ handleValidation, fieldName, validOptions, isString = false }) {
       const validateForm = (vals) => friendlyError(handleValidation(vals));
 
       // All allowed options are valid
@@ -439,27 +439,34 @@ describe('createHeadlessForm', () => {
         expect(validateForm({ [fieldName]: value })).toBeUndefined();
       });
 
-      // Any other arbitrary value is not valid.
-      expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
-        [fieldName]: 'The option "blah-blah" is not valid.',
-      });
+      if (!isString) {
+        // Any other arbitrary value is not valid.
+        expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
+          [fieldName]: 'The option "blah-blah" is not valid.',
+        });
 
-      // Given undefined, it says it's a  required field.
-      expect(validateForm({})).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // Given undefined, it says it's a  required field.
+        expect(validateForm({})).toEqual({
+          [fieldName]: 'Required field',
+        });
 
-      // As required field, empty string ("") is also considered empty. @BUG RMT-518
-      // Expectation: The error to be "The option '' is not valid."
-      expect(validateForm({ [fieldName]: '' })).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // As required field, empty string ("") is also considered empty. @BUG RMT-518
+        // Expectation: The error to be "The option '' is not valid."
+        expect(validateForm({ [fieldName]: '' })).toEqual({
+          [fieldName]: 'Required field',
+        });
 
-      // As required field, null is also considered empty @BUG RMT-518
-      // Expectation: The error to be "The option null is not valid."
-      expect(validateForm({ [fieldName]: null })).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // As required field, null is also considered empty @BUG RMT-518
+        // Expectation: The error to be "The option null is not valid."
+        expect(validateForm({ [fieldName]: null })).toEqual({
+          [fieldName]: 'Required field',
+        });
+      }
+
+      if (isString) {
+        // Any other arbitrary value is valid.
+        expect(validateForm({ [fieldName]: 'blah-blah' })).toBeUndefined();
+      }
     }
 
     it('support "text" field type', () => {
@@ -631,6 +638,41 @@ describe('createHeadlessForm', () => {
       });
     });
 
+    it('supports "select" field type with string option', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeSelectString);
+      const fieldSelect = fields[0];
+      expect(fieldSelect).toMatchObject({
+        name: 'browsers',
+        label: 'Browsers (solo)',
+        description: 'This solo select also includes a disabled option.',
+        options: [
+          {
+            value: 'chr',
+            label: 'Chrome',
+          },
+          {
+            value: 'ff',
+            label: 'Firefox',
+          },
+          {
+            value: 'ie',
+            label: 'Internet Explorer',
+            disabled: true,
+          },
+          { value: undefined, type: 'string', label: '{Create another}' },
+        ],
+      });
+
+      expect(fieldSelect).not.toHaveProperty('multiple');
+
+      assertOptionsAllowed({
+        handleValidation,
+        fieldName: 'browsers',
+        validOptions: ['chr', 'ff', 'ie'],
+        isString: true,
+      });
+    });
+
     it('supports "select" field type with multiple options @deprecated', () => {
       const result = createHeadlessForm(schemaInputTypeSelectMultipleDeprecated);
       expect(result).toMatchObject({
@@ -1443,51 +1485,6 @@ describe('createHeadlessForm', () => {
       });
     });
 
-    it('supports oneOf pattern validation', () => {
-      const result = createHeadlessForm(mockTelWithPattern);
-
-      expect(result).toMatchObject({
-        fields: [
-          {
-            label: 'Phone number',
-            name: 'phone_number',
-            type: 'tel',
-            required: false,
-            options: [
-              {
-                label: 'Portugal',
-                pattern: '^(\\+351)[0-9]{9,}$',
-              },
-              {
-                label: 'United Kingdom (UK)',
-                pattern: '^(\\+44)[0-9]{1,}$',
-              },
-              {
-                label: 'Bolivia',
-                pattern: '^(\\+591)[0-9]{9,}$',
-              },
-              {
-                label: 'Canada',
-                pattern: '^(\\+1)(206|224)[0-9]{1,}$',
-              },
-              {
-                label: 'United States',
-                pattern: '^(\\+1)[0-9]{1,}$',
-              },
-            ],
-          },
-        ],
-      });
-
-      const fieldValidator = result.fields[0].schema;
-
-      expect(fieldValidator.isValidSync('+351123123123')).toBe(true);
-      expect(() => fieldValidator.validateSync('+35100')).toThrowError(
-        'The option "+35100" is not valid.'
-      );
-      expect(fieldValidator.isValidSync(undefined)).toBe(true);
-    });
-
     describe('supports "fieldset" field type', () => {
       it('supports basic case', () => {
         const result = createHeadlessForm({

package/src/tests/helpers.js

@@ -238,6 +238,11 @@ export const mockSelectInputSolo = {
   },
 };
 
+export const mockSelectInputSoloCreatable = {
+  ...mockSelectInputSolo,
+  oneOf: [...mockSelectInputSolo.oneOf, { type: 'string', title: '{Create another}' }],
+};
+
 export const mockSelectInputMultiple = {
   title: 'Browsers (multiple)',
   description: 'This multi-select also includes a disabled option.',
@@ -453,46 +458,6 @@ export const mockCheckboxInput = {
   type: 'string',
 };
 
-export const mockTelWithPattern = {
-  properties: {
-    phone_number: {
-      title: 'Phone number',
-      description: 'Enter your telephone number',
-      type: 'string',
-      'x-jsf-presentation': {
-        inputType: 'tel',
-      },
-      oneOf: [
-        {
-          title: 'Portugal',
-          pattern: '^(\\+351)[0-9]{9,}$',
-          'x-jsf-presentation': { meta: { countryCode: '351' } },
-        },
-        {
-          title: 'United Kingdom (UK)',
-          pattern: '^(\\+44)[0-9]{1,}$',
-          'x-jsf-presentation': { meta: { countryCode: '44' } },
-        },
-        {
-          title: 'Bolivia',
-          pattern: '^(\\+591)[0-9]{9,}$',
-          'x-jsf-presentation': { meta: { countryCode: '591' } },
-        },
-        {
-          title: 'Canada',
-          pattern: '^(\\+1)(206|224)[0-9]{1,}$',
-          'x-jsf-presentation': { meta: { countryCode: '1' } },
-        },
-        {
-          title: 'United States',
-          pattern: '^(\\+1)[0-9]{1,}$',
-          'x-jsf-presentation': { meta: { countryCode: '1' } },
-        },
-      ],
-    },
-  },
-};
-
 /**
  * Compose a schema with lower chance of human error
  * @param {Object} schema version
@@ -937,6 +902,10 @@ export const schemaInputTypeSelectSolo = JSONSchemaBuilder()
   .setRequiredFields(['browsers'])
   .build();
 
+export const schemaInputTypeSelectString = JSONSchemaBuilder().addInput({
+  browsers: mockSelectInputSoloCreatable,
+});
+
 /** @deprecated */
 export const schemaInputTypeSelectMultipleDeprecated = JSONSchemaBuilder()
   .addInput({