@remoteoss/json-schema-form 0.2.0-beta.0 → 0.4.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.2.0-beta.0",
+  "version": "0.4.0-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",
@@ -24,6 +24,7 @@
   "scripts": {
     "build": "node scripts/build.js",
     "test": "jest",
+    "test:watch": "jest --watchAll",
     "lint": "eslint \"src/**/*.{js,ts}\"",
     "format": "npm run format:prettier && npm run format:eslint",
     "prepare": "husky install",
@@ -48,7 +49,7 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "randexp": "^0.5.3",
-    "yup": "^0.29.1"
+    "yup": "^0.30.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.5",

package/src/tests/createHeadlessForm.test.js

@@ -10,6 +10,7 @@ import {
   schemaInputTypeRadioDeprecated,
   schemaInputTypeRadio,
   schemaInputTypeRadioRequiredAndOptional,
+  schemaInputTypeRadioOptionsWithDetails,
   schemaInputTypeSelectSoloDeprecated,
   schemaInputTypeSelectSolo,
   schemaInputTypeSelectMultipleDeprecated,
@@ -420,7 +421,7 @@ describe('createHeadlessForm', () => {
 
   describe('field support', () => {
     it('support "text" field type', () => {
-      const { fields } = createHeadlessForm(schemaInputTypeText);
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeText);
 
       expect(fields[0]).toMatchObject({
         description: 'The number of your national identification (max 10 digits)',
@@ -437,9 +438,13 @@ describe('createHeadlessForm', () => {
 
       const fieldValidator = fields[0].schema;
       expect(fieldValidator.isValidSync('CI007')).toBe(true);
-      expect(fieldValidator.isValidSync(true)).toBe(true); // @BUG RMT-446 - cannot be a bool
-      expect(fieldValidator.isValidSync(1)).toBe(true); // @BUG RMT-446 - cannot be a number
-      expect(fieldValidator.isValidSync(0)).toBe(true); // @BUG RMT-446 - cannot be a number
+      expect(fieldValidator.isValidSync(true)).toBe(false);
+      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(() => fieldValidator.validateSync('')).toThrowError('Required field');
     });
@@ -753,6 +758,35 @@ describe('createHeadlessForm', () => {
       expect(() => fieldValidator.validateSync('')).toThrowError('Required field');
     });
 
+    it('support "radio" field type with extra info inside each option', () => {
+      const result = createHeadlessForm(schemaInputTypeRadioOptionsWithDetails);
+
+      expect(result.fields).toHaveLength(1);
+
+      const fieldOptions = result.fields[0].options;
+
+      // The x-jsf-presentation content was spread to the root:
+      expect(fieldOptions[0]).not.toHaveProperty('x-jsf-presentation');
+      expect(fieldOptions).toEqual([
+        {
+          label: 'Basic',
+          value: 'basic',
+          meta: {
+            displayCost: '$30.00/mo',
+          },
+          // Other x-* keywords are kept as it is.
+          'x-another': 'extra-thing',
+        },
+        {
+          label: 'Standard',
+          value: 'standard',
+          meta: {
+            displayCost: '$50.00/mo',
+          },
+        },
+      ]);
+    });
+
     it('support "number" field type', () => {
       const result = createHeadlessForm(schemaInputTypeNumber);
       expect(result).toMatchObject({
@@ -2327,7 +2361,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'no',
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
             },
             mandatory_group_array: 'no',
           })
@@ -2342,7 +2376,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
             },
             mandatory_group_array: 'no',
           })
@@ -2358,7 +2392,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
             },
             mandatory_group_array: 'yes',
             a_group_array: [{ full_name: 'adfs' }],
@@ -2369,7 +2403,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
               tabs: 2,
             },
             mandatory_group_array: 'no',
@@ -2460,7 +2494,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number'],
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
             },
           })
         ).toBeUndefined();
@@ -2469,7 +2503,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
             },
           })
         ).toEqual({
@@ -2482,7 +2516,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
               tabs: 2,
             },
           })
@@ -2497,7 +2531,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number'],
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
             },
           })
         ).toBeUndefined();
@@ -2506,7 +2540,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
             },
           })
         ).toEqual({
@@ -2519,7 +2553,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: 123,
+              id_number: '123',
               tabs: 2,
             },
           })

package/src/tests/helpers.js

@@ -871,34 +871,70 @@ export const schemaInputDeprecated = JSONSchemaBuilder()
   .build();
 
 /** @deprecated */
-export const schemaInputTypeRadioDeprecated = JSONSchemaBuilder()
-  .addInput({
+export const schemaInputTypeRadioDeprecated = {
+  properties: {
     has_siblings: mockRadioInputDeprecated,
-  })
-  .setRequiredFields(['has_siblings'])
-  .build();
-export const schemaInputTypeRadio = JSONSchemaBuilder()
-  .addInput({
+  },
+  required: ['has_siblings'],
+};
+
+export const schemaInputTypeRadio = {
+  properties: {
     has_siblings: mockRadioInput,
-  })
-  .setRequiredFields(['has_siblings'])
-  .build();
+  },
+  required: ['has_siblings'],
+};
 
-export const schemaInputTypeRadioRequiredAndOptional = JSONSchemaBuilder()
-  .addInput({
+export const schemaInputTypeRadioRequiredAndOptional = {
+  properties: {
     has_siblings: mockRadioInput,
     has_car: mockRadioInputOptional,
-  })
-  .setRequiredFields(['has_siblings'])
-  .build();
+  },
+  required: ['has_siblings'],
+};
 
-export const schemaInputTypeRadioCard = JSONSchemaBuilder()
-  .addInput({
+export const schemaInputTypeRadioCard = {
+  properties: {
     experience_level: mockRadioCardExpandableInput,
     payment_method: mockRadioCardInput,
-  })
-  .setRequiredFields(['experience_level'])
-  .build();
+  },
+  required: ['experience_level'],
+};
+
+export const schemaInputTypeRadioOptionsWithDetails = {
+  properties: {
+    health_perks: {
+      title: 'Health perks',
+      description:
+        'This example contains options with more custom details, under the x-jsf-presentation key',
+      oneOf: [
+        {
+          const: 'basic',
+          title: 'Basic',
+          'x-jsf-presentation': {
+            meta: {
+              displayCost: '$30.00/mo',
+            },
+          },
+          'x-another': 'extra-thing',
+        },
+        {
+          const: 'standard',
+          title: 'Standard',
+          'x-jsf-presentation': {
+            meta: {
+              displayCost: '$50.00/mo',
+            },
+          },
+        },
+      ],
+      'x-jsf-presentation': {
+        inputType: 'radio',
+      },
+      type: 'string',
+    },
+  },
+};
 
 /** @deprecated */
 export const schemaInputTypeSelectSoloDeprecated = JSONSchemaBuilder()