@remoteoss/json-schema-form 0.9.1-dev.20240320153711 → 0.9.2-dev.20240518112325

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+#### 0.9.1-beta.0 (2024-03-26)
+
+##### Bug Fixes
+
+* **select/radio:**  Allow numbers in oneOf ([#49](https://github.com/remoteoss/json-schema-form/pull/49)) ([04c2598a](https://github.com/remoteoss/json-schema-form/commit/04c2598a3f4e31d8a9495e0d69c0427b6b8c9f56))
+
 #### 0.9.0-beta.0 (2024-03-11)
 
 ##### Breaking changes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.9.1-dev.20240320153711
- Generated: Wed, 20 Mar 2024 15:37:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.9.2-dev.20240518112325
+ Generated: Sat, 18 May 2024 11:23:50 GMT
 
  MIT License
 
@@ -509,12 +509,21 @@ var yupSchemas = {
     }
     return dateString;
   },
-  radioOrSelectNumber: (options) => (0, import_yup.number)().strict().typeError("The value must be a number").test(
+  radioOrSelectNumber: (options) => (0, import_yup.mixed)().typeError("The value must be a number").transform((value) => {
+    if (options?.some((option) => option.value === null)) {
+      return value;
+    }
+    return value === null ? void 0 : value;
+  }).test(
     "matchesOptionOrPattern",
     ({ value }) => {
       return `The option ${JSON.stringify(value)} is not valid.`;
     },
-    (value) => validateRadioOrSelectOptions(value, options)
+    (value) => {
+      if (value !== void 0 && typeof value !== "number")
+        return false;
+      return validateRadioOrSelectOptions(value, options);
+    }
   ).nullable(),
   number: (0, import_yup.number)().typeError("The value must be a number").nullable(),
   file: (0, import_yup.array)().nullable(),

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.9.1-dev.20240320153711
- Generated: Wed, 20 Mar 2024 15:37:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.9.2-dev.20240518112325
+ Generated: Sat, 18 May 2024 11:23:50 GMT
 
  MIT License
 
@@ -386,7 +386,7 @@ import jsonLogic from "json-logic-js";
 import flow from "lodash/flow";
 import noop from "lodash/noop";
 import { randexp } from "randexp";
-import { string, number, boolean, object, array } from "yup";
+import { string, number, boolean, object, array, mixed } from "yup";
 var DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
 var baseString = string().trim();
 var todayDateHint = (/* @__PURE__ */ new Date()).toISOString().substring(0, 10);
@@ -473,12 +473,21 @@ var yupSchemas = {
     }
     return dateString;
   },
-  radioOrSelectNumber: (options) => number().strict().typeError("The value must be a number").test(
+  radioOrSelectNumber: (options) => mixed().typeError("The value must be a number").transform((value) => {
+    if (options?.some((option) => option.value === null)) {
+      return value;
+    }
+    return value === null ? void 0 : value;
+  }).test(
     "matchesOptionOrPattern",
     ({ value }) => {
       return `The option ${JSON.stringify(value)} is not valid.`;
     },
-    (value) => validateRadioOrSelectOptions(value, options)
+    (value) => {
+      if (value !== void 0 && typeof value !== "number")
+        return false;
+      return validateRadioOrSelectOptions(value, options);
+    }
   ).nullable(),
   number: number().typeError("The value must be a number").nullable(),
   file: array().nullable(),

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.9.1-dev.20240320153711
- Generated: Wed, 20 Mar 2024 15:37:34 GMT
+ NPM Package: @remoteoss/json-schema-form@0.9.2-dev.20240518112325
+ Generated: Sat, 18 May 2024 11:23:50 GMT
 
  MIT License
 
@@ -11827,12 +11827,21 @@ var yupSchemas = {
     }
     return dateString;
   },
-  radioOrSelectNumber: (options) => NumberSchema().strict().typeError("The value must be a number").test(
+  radioOrSelectNumber: (options) => SchemaType().typeError("The value must be a number").transform((value) => {
+    if (options?.some((option) => option.value === null)) {
+      return value;
+    }
+    return value === null ? void 0 : value;
+  }).test(
     "matchesOptionOrPattern",
     ({ value }) => {
       return `The option ${JSON.stringify(value)} is not valid.`;
     },
-    (value) => validateRadioOrSelectOptions(value, options)
+    (value) => {
+      if (value !== void 0 && typeof value !== "number")
+        return false;
+      return validateRadioOrSelectOptions(value, options);
+    }
   ).nullable(),
   number: NumberSchema().typeError("The value must be a number").nullable(),
   file: array_default().nullable(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.9.1-dev.20240320153711",
+  "version": "0.9.2-dev.20240518112325",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",

package/src/tests/const.test.js

@@ -210,7 +210,7 @@ describe('OneOf const', () => {
     });
     expect(handleValidation({ number: 2 }).formErrors).toBeUndefined();
     expect(handleValidation({ number: '2' }).formErrors).toEqual({
-      number: 'The value must be a number',
+      number: 'The option "2" is not valid.',
     });
   });
 
@@ -229,7 +229,8 @@ describe('OneOf const', () => {
     });
     expect(handleValidation({ number: 2 }).formErrors).toBeUndefined();
     expect(handleValidation({ number: '2' }).formErrors).toEqual({
-      number: 'The value must be a number',
+      number: 'The option "2" is not valid.',
     });
+    expect(handleValidation({ number: null }).formErrors).toEqual(undefined);
   });
 });

package/src/tests/createHeadlessForm.test.js

@@ -467,9 +467,9 @@ describe('createHeadlessForm', () => {
       const { fields, handleValidation } = createHeadlessForm(schemaInputTypeText);
 
       expect(fields[0]).toMatchObject({
-        description: 'The number of your national identification (max 10 digits)',
-        label: 'ID number',
-        name: 'id_number',
+        description: 'Your username (max 10 characters)',
+        label: 'Username',
+        name: 'username',
         required: true,
         schema: expect.any(Object),
         inputType: 'text',
@@ -485,8 +485,8 @@ describe('createHeadlessForm', () => {
       expect(fieldValidator.isValidSync(1)).toBe(false);
       expect(fieldValidator.isValidSync(0)).toBe(false);
 
-      expect(handleValidation({ id_number: 1 }).formErrors).toEqual({
-        id_number: 'id_number must be a `string` type, but the final value was: `1`.',
+      expect(handleValidation({ username: 1 }).formErrors).toEqual({
+        username: 'username must be a `string` type, but the final value was: `1`.',
       });
 
       expect(() => fieldValidator.validateSync('')).toThrowError('Required field');
@@ -496,20 +496,18 @@ describe('createHeadlessForm', () => {
       const resultsWithRootDescription = createHeadlessForm(
         JSONSchemaBuilder()
           .addInput({
-            id_number: mockTextInput,
+            username: mockTextInput,
           })
-          .setRequiredFields(['id_number'])
+          .setRequiredFields(['username'])
           .build()
       );
 
-      expect(resultsWithRootDescription.fields[0].description).toMatch(
-        /the number of your national/i
-      );
+      expect(resultsWithRootDescription.fields[0].description).toMatch(/your username/i);
 
       const resultsWithPresentationDescription = createHeadlessForm(
         JSONSchemaBuilder()
           .addInput({
-            id_number: {
+            username: {
               ...mockTextInput,
               'x-jsf-presentation': {
                 inputType: 'text',
@@ -519,7 +517,7 @@ describe('createHeadlessForm', () => {
               },
             },
           })
-          .setRequiredFields(['id_number'])
+          .setRequiredFields(['username'])
           .build()
       );
 
@@ -532,20 +530,18 @@ describe('createHeadlessForm', () => {
       const resultsWithRootDescription = createHeadlessForm(
         JSONSchemaBuilder()
           .addInput({
-            id_number: mockTextInputDeprecated,
+            username: mockTextInputDeprecated,
           })
-          .setRequiredFields(['id_number'])
+          .setRequiredFields(['username'])
           .build()
       );
 
-      expect(resultsWithRootDescription.fields[0].description).toMatch(
-        /the number of your national/i
-      );
+      expect(resultsWithRootDescription.fields[0].description).toMatch(/your username/i);
 
       const resultsWithPresentationDescription = createHeadlessForm(
         JSONSchemaBuilder()
           .addInput({
-            id_number: {
+            username: {
               ...mockTextInputDeprecated,
               presentation: {
                 inputType: 'text',
@@ -555,7 +551,7 @@ describe('createHeadlessForm', () => {
               },
             },
           })
-          .setRequiredFields(['id_number'])
+          .setRequiredFields(['username'])
           .build()
       );
 
@@ -1561,9 +1557,9 @@ describe('createHeadlessForm', () => {
               required: false,
               fields: [
                 {
-                  description: 'The number of your national identification (max 10 digits)',
-                  label: 'ID number',
-                  name: 'id_number',
+                  description: 'Your username (max 10 characters)',
+                  label: 'Username',
+                  name: 'username',
                   type: 'text',
                   required: true,
                 },
@@ -1608,9 +1604,9 @@ describe('createHeadlessForm', () => {
                   required: false,
                   fields: [
                     {
-                      description: 'The number of your national identification (max 10 digits)',
-                      label: 'ID number',
-                      name: 'id_number',
+                      description: 'Your username (max 10 characters)',
+                      label: 'Username',
+                      name: 'username',
                       type: 'text',
                       required: true,
                     },
@@ -2018,16 +2014,55 @@ describe('createHeadlessForm', () => {
 
       // Assert the yupError shape is really a YupError
       expect(yupError).toEqual(expect.any(Error));
-      expect(yupError.inner[0].path).toBe('id_number');
+      expect(yupError.inner[0].path).toBe('username');
       expect(yupError.inner[0].message).toBe('Required field');
 
       // Assert the converted YupError to formErrors
       expect(formErrors).toEqual({
-        id_number: 'Required field',
+        username: 'Required field',
       });
     });
   });
 
+  it('supports oneOf number const', () => {
+    const result = createHeadlessForm({
+      type: 'object',
+      additionalProperties: false,
+      properties: {
+        pets: {
+          title: 'How many pets?',
+          oneOf: [
+            {
+              title: 'One',
+              const: 0,
+            },
+            {
+              title: 'Two',
+              const: 2,
+            },
+            {
+              title: 'null',
+              const: 1,
+            },
+          ],
+          'x-jsf-presentation': {
+            inputType: 'select',
+          },
+          type: ['number', 'null'],
+        },
+      },
+      required: [],
+      'x-jsf-order': ['pets'],
+    });
+
+    const fieldValidator = result.fields[0].schema;
+
+    expect(fieldValidator.isValidSync(0)).toBe(true);
+    expect(fieldValidator.isValidSync(1)).toBe(true);
+    expect(() => fieldValidator.validateSync('2')).toThrowError('The option "2" is not valid.');
+    expect(fieldValidator.isValidSync(null)).toBe(true);
+  });
+
   describe('x-jsf-presentation attribute', () => {
     it('support field with "x-jsf-presentation.statement"', () => {
       const result = createHeadlessForm(schemaInputWithStatement);
@@ -2773,7 +2808,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'no',
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
             },
             mandatory_group_array: 'no',
           })
@@ -2788,7 +2823,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
             },
             mandatory_group_array: 'no',
           })
@@ -2804,7 +2839,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
             },
             mandatory_group_array: 'yes',
             a_group_array: [{ full_name: 'adfs' }],
@@ -2815,7 +2850,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
               tabs: 2,
             },
             mandatory_group_array: 'no',
@@ -2904,18 +2939,18 @@ describe('createHeadlessForm', () => {
 
         expect(
           validateForm({
-            validate_fieldset: ['id_number'],
+            validate_fieldset: ['username'],
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
             },
           })
         ).toBeUndefined();
 
         expect(
           validateForm({
-            validate_fieldset: ['id_number', 'all'],
+            validate_fieldset: ['username', 'all'],
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
             },
           })
         ).toEqual({
@@ -2926,9 +2961,9 @@ describe('createHeadlessForm', () => {
 
         expect(
           validateForm({
-            validate_fieldset: ['id_number', 'all'],
+            validate_fieldset: ['username', 'all'],
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
               tabs: 2,
             },
           })
@@ -2941,18 +2976,18 @@ describe('createHeadlessForm', () => {
 
         expect(
           validateForm({
-            validate_fieldset: ['id_number'],
+            validate_fieldset: ['username'],
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
             },
           })
         ).toBeUndefined();
 
         expect(
           validateForm({
-            validate_fieldset: ['id_number', 'all'],
+            validate_fieldset: ['username', 'all'],
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
             },
           })
         ).toEqual({
@@ -2963,9 +2998,9 @@ describe('createHeadlessForm', () => {
 
         expect(
           validateForm({
-            validate_fieldset: ['id_number', 'all'],
+            validate_fieldset: ['username', 'all'],
             a_fieldset: {
-              id_number: '123',
+              username: 'abc',
               tabs: 2,
             },
           })
@@ -3545,7 +3580,7 @@ describe('createHeadlessForm', () => {
 
         // It returns fields without errors
         expect(result.fields).toBeDefined();
-        expect(result.fields[0].fields[0].name).toBe('id_number');
+        expect(result.fields[0].fields[0].name).toBe('username');
         expect(result.fields[0].fields[1].name).toBe('tabs');
 
         // Warn about those missmatched values
@@ -3688,14 +3723,14 @@ describe('createHeadlessForm', () => {
             id_number: { 'data-field': 'field' },
             fieldset: {
               customProperties: {
-                id_number: { 'data-fieldset': 'fieldset' },
+                username: { 'data-fieldset': 'fieldset' },
               },
             },
             nestedFieldset: {
               customProperties: {
                 innerFieldset: {
                   customProperties: {
-                    id_number: { 'data-nested-fieldset': 'nested-fieldset' },
+                    username: { 'data-nested-fieldset': 'nested-fieldset' },
                   },
                 },
               },
@@ -3714,7 +3749,7 @@ describe('createHeadlessForm', () => {
             name: 'fieldset',
             fields: [
               {
-                name: 'id_number',
+                name: 'username',
                 'data-fieldset': 'fieldset',
               },
               {
@@ -3729,7 +3764,7 @@ describe('createHeadlessForm', () => {
                 name: 'innerFieldset',
                 fields: [
                   {
-                    name: 'id_number',
+                    name: 'username',
                     'data-nested-fieldset': 'nested-fieldset',
                   },
                   {
@@ -3751,8 +3786,8 @@ describe('createHeadlessForm', () => {
       expect(fieldResult).not.toHaveProperty('data-fieldset');
       expect(fieldResult).not.toHaveProperty('data-nested-fieldset');
 
-      // $.fieldset.id_number
-      expect(fildsetResult.fields[0]).toHaveProperty('name', 'id_number');
+      // $.fieldset.username
+      expect(fildsetResult.fields[0]).toHaveProperty('name', 'username');
       expect(fildsetResult.fields[0]).toHaveProperty('data-fieldset', 'fieldset');
       expect(fildsetResult.fields[0]).not.toHaveProperty('data-field');
       expect(fildsetResult.fields[0]).not.toHaveProperty('data-nested-fieldset');
@@ -3760,7 +3795,7 @@ describe('createHeadlessForm', () => {
       expect(fildsetResult.fields[1]).not.toHaveProperty('data-nested-fieldset');
 
       // $.nestedFieldset.innerFieldset.id_number
-      expect(nestedFieldsetResult.fields[0].fields[0]).toHaveProperty('name', 'id_number');
+      expect(nestedFieldsetResult.fields[0].fields[0]).toHaveProperty('name', 'username');
       expect(nestedFieldsetResult.fields[0].fields[0]).toHaveProperty(
         'data-nested-fieldset',
         'nested-fieldset'

package/src/tests/helpers.js

@@ -3,8 +3,8 @@
 // -------------------------------------
 
 export const mockTextInput = {
-  title: 'ID number',
-  description: 'The number of your national identification (max 10 digits)',
+  title: 'Username',
+  description: 'Your username (max 10 characters)',
   maxLength: 10,
   'x-jsf-presentation': {
     inputType: 'text',
@@ -14,8 +14,8 @@ export const mockTextInput = {
 };
 
 export const mockTextInputDeprecated = {
-  title: 'ID number',
-  description: 'The number of your national identification (max 10 digits)',
+  title: 'Username',
+  description: 'Your username (max 10 characters)',
   maxLength: 10,
   presentation: {
     inputType: 'text',
@@ -313,10 +313,10 @@ export const mockFieldset = {
     inputType: 'fieldset',
   },
   properties: {
-    id_number: mockTextInput,
+    username: mockTextInput,
     tabs: mockNumberInput,
   },
-  required: ['id_number'],
+  required: ['username'],
   type: 'object',
 };
 
@@ -328,10 +328,10 @@ export const mockFocusedFieldset = {
     variant: 'focused',
   },
   properties: {
-    id_number: mockTextInput,
+    username: mockTextInput,
     tabs: mockNumberInput,
   },
-  required: ['id_number'],
+  required: ['username'],
   type: 'object',
 };
 
@@ -501,7 +501,7 @@ export const mockTelWithPattern = {
  * @returns {Object} A JSON schema
  * @example
  *  JSONSchemaBuilder().addInput({
-      id_number: mockTextInput,
+      username: mockTextInput,
     })
     .build();
  */
@@ -708,9 +708,9 @@ export const schemaWithoutTypes = {
 
 export const schemaInputTypeText = {
   properties: {
-    id_number: mockTextInput,
+    username: mockTextInput,
   },
-  required: ['id_number'],
+  required: ['username'],
 };
 
 export const schemaInputWithStatement = {
@@ -1292,7 +1292,7 @@ export const schemaDynamicValidationConst = {
   then: {
     properties: {
       a_fieldset: {
-        required: ['id_number', 'tabs'],
+        required: ['username', 'tabs'],
       },
     },
   },
@@ -1369,7 +1369,7 @@ export const schemaDynamicValidationContains = JSONSchemaBuilder()
       type: 'array',
       description: 'Select what fieldset fields are required',
       items: {
-        enum: ['all', 'id_number'],
+        enum: ['all', 'username'],
       },
       'x-jsf-presentation': {
         inputType: 'select',
@@ -1379,8 +1379,8 @@ export const schemaDynamicValidationContains = JSONSchemaBuilder()
             value: 'all',
           },
           {
-            label: 'ID Number',
-            value: 'id_number',
+            label: 'Username',
+            value: 'username',
           },
         ],
         placeholder: 'Select...',
@@ -1401,7 +1401,7 @@ export const schemaDynamicValidationContains = JSONSchemaBuilder()
     {
       properties: {
         a_fieldset: {
-          required: ['id_number', 'tabs'],
+          required: ['username', 'tabs'],
         },
       },
     }