@remoteoss/json-schema-form 0.7.1-dev.20231031082524 → 0.7.2-beta.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+#### 0.7.2-beta.0 (2023-11-06)
+
+##### Bug Fixes
+
+* **select/radio:**  Support oneOf[].pattern validation ([#47](https://github.com/remoteoss/json-schema-form/pull/47)) ([5a4bb592](https://github.com/remoteoss/json-schema-form/commit/5a4bb59266ff595a9cb65f5b261a4ae2f3ad279f))
+
+#### 0.7.1-beta.0 (2023-10-31)
+
+##### Bug Fixes
+
+- **select:** support string type ([#54](https://github.com/remoteoss/json-schema-form/pull/54)) ([b00f8776](https://github.com/remoteoss/json-schema-form/commit/b00f8776aa244803375ba64fbdd52c8fff9b9bd8))
+
 #### 0.7.0-beta.0 (2023-10-23)
 
 ##### Chores
@@ -27,10 +39,8 @@ BREAKING CHANGES:
 
 - json-logic: Add conditional logic checking. ([#41](https://github.com/remoteoss/json-schema-form/pull/41)) ([6292b01e](https://github.com/remoteoss/json-schema-form/commit/6292b01e3f77a9038328d7375080ffc4cb30dbc8))
 
-
 ###### Full API additions now supported from 0.6.5 onwards.
 
-
 - New custom JSON Schema keyword `x-jsf-logic` added to support cross-field validations. Built on top of [JsonLogic](https://jsonlogic.com/).
 
 - `x-jsf-logic` can contain:
@@ -49,16 +59,11 @@ While docs are underway, you can read examples from all the [tests](https://gith
 
 In short: `x-jsf-logic` is added to support complex conditional cross-field validations. Properties like `x-jsf-logic-validations` allow hooking those up to individual fields.
 
-
 #### 0.6.4-beta.0 (2023-09-15)
 
-
-
 ##### Changes
-- json-logic: computedAttrs - handle inline rules ([#40](https://github.com/remoteoss/json-schema-form/pull/40)) ([860ad91b](https://github.com/remoteoss/json-schema-form/commit/860ad91b034ab35d4d4bc51c0c04675f102bf278))
-
-
 
+- json-logic: computedAttrs - handle inline rules ([#40](https://github.com/remoteoss/json-schema-form/pull/40)) ([860ad91b](https://github.com/remoteoss/json-schema-form/commit/860ad91b034ab35d4d4bc51c0c04675f102bf278))
 
 #### 0.6.1-beta.0 (2023-09-13)
 
@@ -66,50 +71,43 @@ In short: `x-jsf-logic` is added to support complex conditional cross-field vali
 
 - json-logic: Computed string based values ([#37](https://github.com/remoteoss/json-schema-form/pull/37)) ([6e042ea5](https://github.com/remoteoss/json-schema-form/commit/6e042ea579497ea573710c307a6ff7ee2f19b931))
 
-
-
-
 #### 0.5.0-beta.0 (2023-09-12)
 
 ##### Changes
+
 - json-logic: Computed Attributes ([#36](https://github.com/remoteoss/json-schema-form/pull/36)) ([80c29589](https://github.com/remoteoss/json-schema-form/commit/80c29589ac0972e0f33add70a59df15a46db1b43))
 - json-logic: Initial skeleton implementation ([#35](https://github.com/remoteoss/json-schema-form/pull/35)) ([63149ae8](https://github.com/remoteoss/json-schema-form/commit/63149ae863cf1b5ad76a3b2a49c7f343e55ce07b))
 
-
-
-
 #### 0.4.5-beta.0 (2023-08-31)
+
 ##### Bug fixes
 
 - Validate values based on `const` key ([#34](https://github.com/remoteoss/json-schema-form/pull/34)) ([bf07870d](https://github.com/remoteoss/json-schema-form/commit/bf07870d407d9b9b078882a078b9e4c7928df868))
 
-
-
-
 #### 0.4.4-beta.0 (2023-08-30)
 
 ##### Chores
 
-* **fieldset:**  ignore values not matching the field type ([#44](https://github.com/remoteoss/json-schema-form/pull/44)) ([f0af54e5](https://github.com/remoteoss/json-schema-form/commit/f0af54e5d425fb78524ab150bb31629d00369a61))
+- **fieldset:** ignore values not matching the field type ([#44](https://github.com/remoteoss/json-schema-form/pull/44)) ([f0af54e5](https://github.com/remoteoss/json-schema-form/commit/f0af54e5d425fb78524ab150bb31629d00369a61))
 
 #### 0.4.3-beta.0 (2023-08-09)
 
 ##### Bug fixes
 
-* **conditions:** Validate a deeply nested if (e.g. checking an object with a number property) in an if property now doesn't break the form. ([#33](https://github.com/remoteoss/json-schema-form/pull/33)) ([e34cfcc](https://github.com/remoteoss/json-schema-form/commit/e34cfccaf45f1460b346f3cff0c797b3d11259e3))
+- **conditions:** Validate a deeply nested if (e.g. checking an object with a number property) in an if property now doesn't break the form. ([#33](https://github.com/remoteoss/json-schema-form/pull/33)) ([e34cfcc](https://github.com/remoteoss/json-schema-form/commit/e34cfccaf45f1460b346f3cff0c797b3d11259e3))
 
 #### 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))
+- **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))
+- **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)
 

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
- Generated: Tue, 31 Oct 2023 08:25:53 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.2-beta.0
+ Generated: Mon, 06 Nov 2023 19:11:58 GMT
 
  MIT License
 
@@ -469,13 +469,34 @@ var yupSchemas = {
       if (value === "") {
         return void 0;
       }
-      if (options?.includes(null)) {
+      if (options?.some((option) => option.value === null)) {
         return value;
       }
       return value === null ? void 0 : value;
-    }).oneOf(options, ({ value }) => {
-      return `The option ${JSON.stringify(value)} is not valid.`;
-    });
+    }).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;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
+      }
+    );
   },
   date: ({ minDate, maxDate }) => {
     let dateString = (0, import_yup.string)().nullable().transform((value) => {
@@ -534,12 +555,15 @@ 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) => option.value);
+  const allValues = field.options?.map((option) => ({
+    value: option.value,
+    pattern: option.pattern ? new RegExp(option.pattern) : null
+  }));
   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, null] : allValues;
+  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
- Generated: Tue, 31 Oct 2023 08:25:53 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.2-beta.0
+ Generated: Mon, 06 Nov 2023 19:11:58 GMT
 
  MIT License
 
@@ -433,13 +433,34 @@ var yupSchemas = {
       if (value === "") {
         return void 0;
       }
-      if (options?.includes(null)) {
+      if (options?.some((option) => option.value === null)) {
         return value;
       }
       return value === null ? void 0 : value;
-    }).oneOf(options, ({ value }) => {
-      return `The option ${JSON.stringify(value)} is not valid.`;
-    });
+    }).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;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
+      }
+    );
   },
   date: ({ minDate, maxDate }) => {
     let dateString = string().nullable().transform((value) => {
@@ -498,12 +519,15 @@ 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) => option.value);
+  const allValues = field.options?.map((option) => ({
+    value: option.value,
+    pattern: option.pattern ? new RegExp(option.pattern) : null
+  }));
   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, null] : allValues;
+  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.1-dev.20231031082524
- Generated: Tue, 31 Oct 2023 08:25:53 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.2-beta.0
+ Generated: Mon, 06 Nov 2023 19:11:58 GMT
 
  MIT License
 
@@ -11787,13 +11787,34 @@ var yupSchemas = {
       if (value === "") {
         return void 0;
       }
-      if (options?.includes(null)) {
+      if (options?.some((option) => option.value === null)) {
         return value;
       }
       return value === null ? void 0 : value;
-    }).oneOf(options, ({ value }) => {
-      return `The option ${JSON.stringify(value)} is not valid.`;
-    });
+    }).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;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
+      }
+    );
   },
   date: ({ minDate, maxDate }) => {
     let dateString = StringSchema().nullable().transform((value) => {
@@ -11852,12 +11873,15 @@ 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) => option.value);
+  const allValues = field.options?.map((option) => ({
+    value: option.value,
+    pattern: option.pattern ? new RegExp(option.pattern) : null
+  }));
   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, null] : allValues;
+  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);

package/package.json

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

@@ -39,6 +39,7 @@ import {
   mockFileInput,
   mockRadioCardInput,
   mockRadioCardExpandableInput,
+  mockTelWithPattern,
   mockTextInput,
   mockTextInputDeprecated,
   mockNumberInput,
@@ -1485,6 +1486,51 @@ 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

@@ -458,6 +458,46 @@ 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