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

package/CHANGELOG.md

@@ -1,22 +1,30 @@
+#### 0.4.0-beta.0 (2023-06-22)
+
+##### New Features
+
+BREAKING CHANGES:
+
+- **Radio/Select:** In each option, spread `x-jsf-presentation` value to option root ([#17](https://github.com/remoteoss/json-schema-form/pull/17)) ([367688c2](https://github.com/remoteoss/json-schema-form/commit/367688c24e212c1a0a1d2e7b19cbd7efa7021a15))
+
 #### 0.3.0-beta.0 (2023-06-21)
 
 ##### Fixes
 
-- Fix validation for text schema to only validate strings ([#12](https://github.com/remoteoss/json-schema-form/pull/12)) ([00017c0](https://github.com/remoteoss/json-schema-form/commit/00017c056d8a3583d56d9fefc4d3c7e0f4c1dd99))
+- **Text:** Fix validation to only accept strings ([#12](https://github.com/remoteoss/json-schema-form/pull/12)) ([00017c0](https://github.com/remoteoss/json-schema-form/commit/00017c056d8a3583d56d9fefc4d3c7e0f4c1dd99))
 
 ##### Chores
 
-- Update yup version to v.0.30.0 ([#12](https://github.com/remoteoss/json-schema-form/pull/12)) ([00017c0](https://github.com/remoteoss/json-schema-form/commit/00017c056d8a3583d56d9fefc4d3c7e0f4c1dd99))
+- Update Yup to v.0.30.0 ([#12](https://github.com/remoteoss/json-schema-form/pull/12)) ([00017c0](https://github.com/remoteoss/json-schema-form/commit/00017c056d8a3583d56d9fefc4d3c7e0f4c1dd99))
 
 #### 0.2.0-beta.0 (2023-06-20)
 
 ##### New Features
 
-- Add typescript declarations to the library ([2404188c](https://github.com/remoteoss/json-schema-form/commit/2404188cba52a5a665f257430a65a0ebb938dd44))
+- Add Typescript declarations to the library ([2404188c](https://github.com/remoteoss/json-schema-form/commit/2404188cba52a5a665f257430a65a0ebb938dd44))
 
 ##### Fixes
 
-- Support maximum 0 ([#10](https://github.com/remoteoss/json-schema-form/pull/10)) ([1e9d6cf9](https://github.com/remoteoss/json-schema-form/commit/1e9d6cf96436cf16018e045b351567c643e10dac))
+- **Number:** Support maximum 0 ([#10](https://github.com/remoteoss/json-schema-form/pull/10)) ([1e9d6cf9](https://github.com/remoteoss/json-schema-form/commit/1e9d6cf96436cf16018e045b351567c643e10dac))
 
 ##### Chores
 

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.3.0-beta.0
- Generated: Wed, 21 Jun 2023 11:17:55 GMT
+ NPM Package: @remoteoss/json-schema-form@0.4.0-beta.0
+ Generated: Thu, 22 Jun 2023 10:03:23 GMT
 
  MIT License
 
@@ -804,12 +804,26 @@ function updateFieldsProperties(fields, formValues, jsonSchema) {
   clearValuesIfNotVisible(fields, formValues);
 }
 var notNullOption = (opt) => opt.const !== null;
+function flatPresentation(item) {
+  return Object.entries(item).reduce((newItem, [key, value]) => {
+    if (key === "x-jsf-presentation") {
+      return {
+        ...newItem,
+        ...value
+      };
+    }
+    return {
+      ...newItem,
+      [key]: value
+    };
+  }, {});
+}
 function getFieldOptions(node, presentation) {
   function convertToOptions(nodeOptions) {
     return nodeOptions.filter(notNullOption).map(({ title, const: cons, ...item }) => ({
       label: title,
       value: cons,
-      ...item
+      ...flatPresentation(item)
     }));
   }
   if (presentation.options) {

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.3.0-beta.0
- Generated: Wed, 21 Jun 2023 11:17:55 GMT
+ NPM Package: @remoteoss/json-schema-form@0.4.0-beta.0
+ Generated: Thu, 22 Jun 2023 10:03:23 GMT
 
  MIT License
 
@@ -768,12 +768,26 @@ function updateFieldsProperties(fields, formValues, jsonSchema) {
   clearValuesIfNotVisible(fields, formValues);
 }
 var notNullOption = (opt) => opt.const !== null;
+function flatPresentation(item) {
+  return Object.entries(item).reduce((newItem, [key, value]) => {
+    if (key === "x-jsf-presentation") {
+      return {
+        ...newItem,
+        ...value
+      };
+    }
+    return {
+      ...newItem,
+      [key]: value
+    };
+  }, {});
+}
 function getFieldOptions(node, presentation) {
   function convertToOptions(nodeOptions) {
     return nodeOptions.filter(notNullOption).map(({ title, const: cons, ...item }) => ({
       label: title,
       value: cons,
-      ...item
+      ...flatPresentation(item)
     }));
   }
   if (presentation.options) {

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.3.0-beta.0
- Generated: Wed, 21 Jun 2023 11:17:55 GMT
+ NPM Package: @remoteoss/json-schema-form@0.4.0-beta.0
+ Generated: Thu, 22 Jun 2023 10:03:23 GMT
 
  MIT License
 
@@ -12172,12 +12172,26 @@ function updateFieldsProperties(fields, formValues, jsonSchema) {
   clearValuesIfNotVisible(fields, formValues);
 }
 var notNullOption = (opt) => opt.const !== null;
+function flatPresentation(item) {
+  return Object.entries(item).reduce((newItem, [key, value]) => {
+    if (key === "x-jsf-presentation") {
+      return {
+        ...newItem,
+        ...value
+      };
+    }
+    return {
+      ...newItem,
+      [key]: value
+    };
+  }, {});
+}
 function getFieldOptions(node, presentation) {
   function convertToOptions(nodeOptions) {
     return nodeOptions.filter(notNullOption).map(({ title, const: cons, ...item }) => ({
       label: title,
       value: cons,
-      ...item
+      ...flatPresentation(item)
     }));
   }
   if (presentation.options) {

package/package.json

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

package/src/tests/createHeadlessForm.test.js

@@ -10,6 +10,7 @@ import {
   schemaInputTypeRadioDeprecated,
   schemaInputTypeRadio,
   schemaInputTypeRadioRequiredAndOptional,
+  schemaInputTypeRadioOptionsWithDetails,
   schemaInputTypeSelectSoloDeprecated,
   schemaInputTypeSelectSolo,
   schemaInputTypeSelectMultipleDeprecated,
@@ -757,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({

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()