@remoteoss/json-schema-form 0.11.2-beta.0 → 0.11.3-beta.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+#### 0.11.3-beta.0 (2024-08-19)
+
+##### Bug Fixes
+
+* **select/radio:**  Add support for options with boolean type ([#89](https://github.com/remoteoss/json-schema-form/pull/89)) ([127f70b3](https://github.com/remoteoss/json-schema-form/commit/127f70b3b19974a404e710548b83d4e4b17e1339))
+
 #### 0.11.2-beta.0 (2024-07-30)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.2-beta.0
- Generated: Tue, 30 Jul 2024 12:00:17 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.3-beta.0
+ Generated: Mon, 19 Aug 2024 17:56:28 GMT
 
  MIT License
 
@@ -526,6 +526,24 @@ var yupSchemas = {
       return validateRadioOrSelectOptions(value, options);
     }
   ).nullable(),
+  radioOrSelectBoolean: (options) => {
+    return (0, import_yup.boolean)().nullable().transform((value) => {
+      if (options?.some((option) => option.value === null)) {
+        return value;
+      }
+      return value === null ? void 0 : value;
+    }).test(
+      "matchesOptionOrPattern",
+      ({ originalValue }) => {
+        return `The option ${JSON.stringify(originalValue)} is not valid.`;
+      },
+      (castValue, { originalValue }) => {
+        if (typeof originalValue !== "boolean" && castValue !== void 0)
+          return false;
+        return validateRadioOrSelectOptions(castValue, options);
+      }
+    );
+  },
   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(),
@@ -574,7 +592,14 @@ var getYupSchema = ({ inputType, ...field }) => {
   const hasOptions = field.options?.length > 0;
   const generateOptionSchema = (type) => {
     const optionValues = getOptions(field);
-    return type === "number" ? yupSchemas.radioOrSelectNumber(optionValues) : yupSchemas.radioOrSelectString(optionValues);
+    switch (type) {
+      case "number":
+        return yupSchemas.radioOrSelectNumber(optionValues);
+      case "boolean":
+        return yupSchemas.radioOrSelectBoolean(optionValues);
+      default:
+        return yupSchemas.radioOrSelectString(optionValues);
+    }
   };
   if (hasOptions) {
     if (Array.isArray(field.jsonType)) {

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.2-beta.0
- Generated: Tue, 30 Jul 2024 12:00:17 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.3-beta.0
+ Generated: Mon, 19 Aug 2024 17:56:28 GMT
 
  MIT License
 
@@ -489,6 +489,24 @@ var yupSchemas = {
       return validateRadioOrSelectOptions(value, options);
     }
   ).nullable(),
+  radioOrSelectBoolean: (options) => {
+    return boolean().nullable().transform((value) => {
+      if (options?.some((option) => option.value === null)) {
+        return value;
+      }
+      return value === null ? void 0 : value;
+    }).test(
+      "matchesOptionOrPattern",
+      ({ originalValue }) => {
+        return `The option ${JSON.stringify(originalValue)} is not valid.`;
+      },
+      (castValue, { originalValue }) => {
+        if (typeof originalValue !== "boolean" && castValue !== void 0)
+          return false;
+        return validateRadioOrSelectOptions(castValue, options);
+      }
+    );
+  },
   number: number().typeError("The value must be a number").nullable(),
   file: array().nullable(),
   email: string().trim().email("Please enter a valid email address").nullable(),
@@ -537,7 +555,14 @@ var getYupSchema = ({ inputType, ...field }) => {
   const hasOptions = field.options?.length > 0;
   const generateOptionSchema = (type) => {
     const optionValues = getOptions(field);
-    return type === "number" ? yupSchemas.radioOrSelectNumber(optionValues) : yupSchemas.radioOrSelectString(optionValues);
+    switch (type) {
+      case "number":
+        return yupSchemas.radioOrSelectNumber(optionValues);
+      case "boolean":
+        return yupSchemas.radioOrSelectBoolean(optionValues);
+      default:
+        return yupSchemas.radioOrSelectString(optionValues);
+    }
   };
   if (hasOptions) {
     if (Array.isArray(field.jsonType)) {

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.2-beta.0
- Generated: Tue, 30 Jul 2024 12:00:17 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.3-beta.0
+ Generated: Mon, 19 Aug 2024 17:56:28 GMT
 
  MIT License
 
@@ -12005,6 +12005,24 @@ var yupSchemas = {
       return validateRadioOrSelectOptions(value, options);
     }
   ).nullable(),
+  radioOrSelectBoolean: (options) => {
+    return boolean2().nullable().transform((value) => {
+      if (options?.some((option) => option.value === null)) {
+        return value;
+      }
+      return value === null ? void 0 : value;
+    }).test(
+      "matchesOptionOrPattern",
+      ({ originalValue }) => {
+        return `The option ${JSON.stringify(originalValue)} is not valid.`;
+      },
+      (castValue, { originalValue }) => {
+        if (typeof originalValue !== "boolean" && castValue !== void 0)
+          return false;
+        return validateRadioOrSelectOptions(castValue, options);
+      }
+    );
+  },
   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(),
@@ -12053,7 +12071,14 @@ var getYupSchema = ({ inputType, ...field }) => {
   const hasOptions = field.options?.length > 0;
   const generateOptionSchema = (type) => {
     const optionValues = getOptions(field);
-    return type === "number" ? yupSchemas.radioOrSelectNumber(optionValues) : yupSchemas.radioOrSelectString(optionValues);
+    switch (type) {
+      case "number":
+        return yupSchemas.radioOrSelectNumber(optionValues);
+      case "boolean":
+        return yupSchemas.radioOrSelectBoolean(optionValues);
+      default:
+        return yupSchemas.radioOrSelectString(optionValues);
+    }
   };
   if (hasOptions) {
     if (Array.isArray(field.jsonType)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.11.2-beta.0",
+  "version": "0.11.3-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.customValidations.test.js

@@ -2,7 +2,7 @@ import merge from 'lodash/fp/merge';
 
 import { createHeadlessForm } from '../createHeadlessForm';
 
-import { JSONSchemaBuilder, mockFieldset, mockRadioInput } from './helpers';
+import { JSONSchemaBuilder, mockFieldset, mockRadioInputString } from './helpers';
 import { mockMoneyInput } from './helpers.custom';
 
 function friendlyError({ formErrors }) {
@@ -52,7 +52,7 @@ const schemaWithConditional = ({ newProperties } = {}) =>
     .addInput(
       merge(
         {
-          is_employee: mockRadioInput,
+          is_employee: mockRadioInputString,
           salary: { ...mockMoneyInput, minimum: 0 },
           bonus: { ...mockMoneyInput, minimum: 0 },
         },

package/src/tests/createHeadlessForm.test.js

@@ -8,7 +8,9 @@ import {
   JSONSchemaBuilder,
   schemaInputTypeText,
   schemaInputTypeRadioDeprecated,
-  schemaInputTypeRadio,
+  schemaInputTypeRadioString,
+  schemaInputTypeRadioBoolean,
+  schemaInputTypeRadioNumber,
   schemaInputTypeRadioRequiredAndOptional,
   schemaInputRadioOptionalNull,
   schemaInputRadioOptionalConventional,
@@ -432,7 +434,7 @@ describe('createHeadlessForm', () => {
   });
 
   describe('field support', () => {
-    function assertOptionsAllowed({ handleValidation, fieldName, validOptions }) {
+    function assertOptionsAllowed({ handleValidation, fieldName, validOptions, type = 'string' }) {
       const validateForm = (vals) => friendlyError(handleValidation(vals));
 
       // All allowed options are valid
@@ -440,22 +442,24 @@ 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 (type === 'string') {
+        // Any other arbitrary value is not valid.
+        expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
+          [fieldName]: 'The option "blah-blah" is not valid.',
+        });
+
+        // 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',
+        });
+      }
 
       // 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, null is also considered empty @BUG RMT-518
       // Expectation: The error to be "The option null is not valid."
       expect(validateForm({ [fieldName]: null })).toEqual({
@@ -745,8 +749,8 @@ describe('createHeadlessForm', () => {
         validOptions: ['yes', 'no'],
       });
     });
-    it('support "radio" field type', () => {
-      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeRadio);
+    it('support "radio" field string type', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeRadioString);
 
       expect(fields).toMatchObject([
         {
@@ -776,6 +780,86 @@ describe('createHeadlessForm', () => {
       });
     });
 
+    it('support "radio" field boolean type', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeRadioBoolean);
+
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(fields).toMatchObject([
+        {
+          description: 'Are you over 18 years old?',
+          label: 'Over 18',
+          name: 'over_18',
+          options: [
+            {
+              label: 'Yes',
+              value: true,
+            },
+            {
+              label: 'No',
+              value: false,
+            },
+          ],
+          required: true,
+          schema: expect.any(Object),
+          type: 'radio',
+        },
+      ]);
+
+      assertOptionsAllowed({
+        handleValidation,
+        fieldName: 'over_18',
+        validOptions: [true, false],
+        type: schemaInputTypeRadioBoolean.properties.over_18.type,
+      });
+
+      expect(validateForm({ over_18: 'true' })).toEqual({
+        over_18: 'The option "true" is not valid.',
+      });
+    });
+
+    it('support "radio" field number type', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeRadioNumber);
+
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(fields).toMatchObject([
+        {
+          description: 'How many siblings do you have?',
+          label: 'Number of siblings',
+          name: 'siblings_count',
+          options: [
+            {
+              label: 'One',
+              value: 1,
+            },
+            {
+              label: 'Two',
+              value: 2,
+            },
+            {
+              label: 'Three',
+              value: 3,
+            },
+          ],
+          required: true,
+          schema: expect.any(Object),
+          type: 'radio',
+        },
+      ]);
+
+      assertOptionsAllowed({
+        handleValidation,
+        fieldName: 'siblings_count',
+        validOptions: [1, 2, 3],
+        type: schemaInputTypeRadioNumber.properties.siblings_count.type,
+      });
+
+      expect(validateForm({ siblings_count: '3' })).toEqual({
+        siblings_count: 'The option "3" is not valid.',
+      });
+    });
+
     it('support "radio" optional field', () => {
       const { fields, handleValidation } = createHeadlessForm(
         schemaInputTypeRadioRequiredAndOptional

package/src/tests/helpers.js

@@ -110,7 +110,7 @@ export const mockRadioInputDeprecated = {
   },
 };
 
-export const mockRadioInput = {
+export const mockRadioInputString = {
   title: 'Has siblings',
   description: 'Do you have any siblings?',
   oneOf: [
@@ -129,6 +129,48 @@ export const mockRadioInput = {
   type: 'string',
 };
 
+export const mockRadioInputBoolean = {
+  title: 'Over 18',
+  description: 'Are you over 18 years old?',
+  oneOf: [
+    {
+      title: 'Yes',
+      const: true,
+    },
+    {
+      title: 'No',
+      const: false,
+    },
+  ],
+  'x-jsf-presentation': {
+    inputType: 'radio',
+  },
+  type: 'boolean',
+};
+
+export const mockRadioInputNumber = {
+  title: 'Number of siblings',
+  description: 'How many siblings do you have?',
+  oneOf: [
+    {
+      title: 'One',
+      const: 1,
+    },
+    {
+      title: 'Two',
+      const: 2,
+    },
+    {
+      title: 'Three',
+      const: 3,
+    },
+  ],
+  'x-jsf-presentation': {
+    inputType: 'radio',
+  },
+  type: 'number',
+};
+
 export const mockRadioCardExpandableInput = {
   title: 'Experience level',
   description:
@@ -831,13 +873,27 @@ export const schemaInputTypeRadioDeprecated = {
   required: ['has_siblings'],
 };
 
-export const schemaInputTypeRadio = {
+export const schemaInputTypeRadioString = {
   properties: {
-    has_siblings: mockRadioInput,
+    has_siblings: mockRadioInputString,
   },
   required: ['has_siblings'],
 };
 
+export const schemaInputTypeRadioBoolean = {
+  properties: {
+    over_18: mockRadioInputBoolean,
+  },
+  required: ['over_18'],
+};
+
+export const schemaInputTypeRadioNumber = {
+  properties: {
+    siblings_count: mockRadioInputNumber,
+  },
+  required: ['siblings_count'],
+};
+
 export const mockRadioInputOptionalNull = {
   title: 'Has car',
   oneOf: [
@@ -853,7 +909,7 @@ export const mockRadioInputOptionalNull = {
 
 export const schemaInputTypeRadioRequiredAndOptional = {
   properties: {
-    has_siblings: mockRadioInput,
+    has_siblings: mockRadioInputString,
     has_car: {
       ...mockRadioInputOptionalNull,
       description: 'Do you have a car? (optional field, check oneOf)',
@@ -1440,7 +1496,7 @@ export const schemaAnyOfValidation = JSONSchemaBuilder()
 
 export const schemaWithConditionalPresentationProperties = JSONSchemaBuilder()
   .addInput({
-    mock_radio: mockRadioInput,
+    mock_radio: mockRadioInputString,
   })
   .addAllOf([
     {
@@ -1477,7 +1533,7 @@ export const schemaWithConditionalPresentationProperties = JSONSchemaBuilder()
   .build();
 
 export const schemaWithConditionalReadOnlyProperty = JSONSchemaBuilder()
-  .addInput({ field_a: mockRadioInput })
+  .addInput({ field_a: mockRadioInputString })
   .addInput({ field_b: mockTextInput })
   .addAllOf([
     {
@@ -1526,7 +1582,7 @@ export const schemaWithConditionalReadOnlyProperty = JSONSchemaBuilder()
   .build();
 
 export const schemaWithConditionalAcknowledgementProperty = JSONSchemaBuilder()
-  .addInput({ field_a: mockRadioInput })
+  .addInput({ field_a: mockRadioInputString })
   .addInput({ field_b: mockCheckboxInput })
   .addAllOf([
     {
@@ -1554,9 +1610,9 @@ export const schemaWithConditionalAcknowledgementProperty = JSONSchemaBuilder()
 // Note: The second conditional (field_a_wrong) is incorrect,
 // it's used to test/catch the scenario where devs forget to add the if.required[]
 export const schemaWithWrongConditional = JSONSchemaBuilder()
-  .addInput({ field_a: mockRadioInput })
+  .addInput({ field_a: mockRadioInputString })
   .addInput({ field_b: mockTextInput })
-  .addInput({ field_a_wrong: mockRadioInput })
+  .addInput({ field_a_wrong: mockRadioInputString })
   .addInput({ field_b_wrong: mockTextInput })
   .addAllOf([
     {