@remoteoss/json-schema-form 0.7.1-dev.20231026204916 → 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.20231026204916
- Generated: Thu, 26 Oct 2023 20:49:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.2-beta.0
+ Generated: Mon, 06 Nov 2023 19:11:58 GMT
 
  MIT License
 
@@ -461,38 +461,43 @@ 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;
+    return (0, import_yup.string)().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
       }
-      const exactMatch = options.some((option) => option.value === value);
-      if (exactMatch) {
-        return true;
+      if (options?.some((option) => option.value === null)) {
+        return value;
       }
-      const patternMatch = options.some((option) => option.pattern?.test(value));
-      if (patternMatch) {
-        return true;
+      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;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
       }
-      return false;
-    }
-  ),
+    );
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = (0, import_yup.string)().nullable().transform((value) => {
       if (value === "") {
@@ -563,8 +568,9 @@ var getOptions = (field) => {
 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.2-beta.0
+ Generated: Mon, 06 Nov 2023 19:11:58 GMT
 
  MIT License
 
@@ -425,38 +425,43 @@ 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;
+    return string().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
       }
-      const exactMatch = options.some((option) => option.value === value);
-      if (exactMatch) {
-        return true;
+      if (options?.some((option) => option.value === null)) {
+        return value;
       }
-      const patternMatch = options.some((option) => option.pattern?.test(value));
-      if (patternMatch) {
-        return true;
+      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;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
       }
-      return false;
-    }
-  ),
+    );
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = string().nullable().transform((value) => {
       if (value === "") {
@@ -527,8 +532,9 @@ var getOptions = (field) => {
 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.2-beta.0
+ Generated: Mon, 06 Nov 2023 19:11:58 GMT
 
  MIT License
 
@@ -11779,38 +11779,43 @@ 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;
+    return StringSchema().nullable().transform((value) => {
+      if (value === "") {
+        return void 0;
       }
-      const exactMatch = options.some((option) => option.value === value);
-      if (exactMatch) {
-        return true;
+      if (options?.some((option) => option.value === null)) {
+        return value;
       }
-      const patternMatch = options.some((option) => option.pattern?.test(value));
-      if (patternMatch) {
-        return true;
+      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;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
       }
-      return false;
-    }
-  ),
+    );
+  },
   date: ({ minDate, maxDate }) => {
     let dateString = StringSchema().nullable().transform((value) => {
       if (value === "") {
@@ -11881,8 +11886,9 @@ var getOptions = (field) => {
 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.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

@@ -15,6 +15,7 @@ import {
   schemaInputTypeRadioOptionsWithDetails,
   schemaInputTypeSelectSoloDeprecated,
   schemaInputTypeSelectSolo,
+  schemaInputTypeSelectString,
   schemaInputTypeSelectMultipleDeprecated,
   schemaInputTypeSelectMultiple,
   schemaInputTypeSelectMultipleOptional,
@@ -431,7 +432,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 +440,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 +639,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({

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.',
@@ -937,6 +942,10 @@ export const schemaInputTypeSelectSolo = JSONSchemaBuilder()
   .setRequiredFields(['browsers'])
   .build();
 
+export const schemaInputTypeSelectString = JSONSchemaBuilder().addInput({
+  browsers: mockSelectInputSoloCreatable,
+});
+
 /** @deprecated */
 export const schemaInputTypeSelectMultipleDeprecated = JSONSchemaBuilder()
   .addInput({