@remoteoss/json-schema-form 0.11.14-dev.20250514093749 → 0.11.15-beta.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+#### 0.11.15-beta.0 (2025-06-06)
+
+##### Bug Fixes
+
+* **v0:**  Handle computed presentational attributes correctly ([#195](https://github.com/remoteoss/json-schema-form/pull/195)) ([19c7ff5b](https://github.com/remoteoss/json-schema-form/commit/19c7ff5b4c5cc90bd1025a3ad3032076e4e25b65))
+
+#### 0.11.14-beta.0 (2025-05-14)
+
+##### Chores
+
+*  Reminder to publish GitHub release ([#183](https://github.com/remoteoss/json-schema-form/pull/183)) ([adfa8c14](https://github.com/remoteoss/json-schema-form/commit/adfa8c14ca118b1012642f39c8388cf2ba1614c9))
+
 #### 0.11.13-beta.0 (2025-05-05)
 
 ##### Bug Fixes

package/README.md

@@ -5,14 +5,16 @@
 <p align="center">
   <code>json-schema-form</code> is a headless UI form library powered by <a href="https://json-schema.org/">JSON Schemas</a>. 
 <br/>
-  It transforms JSON schemas into Javascript to be consumed by your UI libraries.
+  It transforms JSON schemas into Javascript `fields` to be more easily consumed by your UI libraries.
 </p>
 
 ---
 
 ### Why JSON Schemas for forms?
 
-JSON Schemas are the SSoT (Single Source of Truth) that allows you to share form's _structure_ and _validations_ between frontend and backend, regardless of the language used.
+JSON Schemas are the SSoT (Single Source of Truth) that allows you to share form's data _structure_ and _validations_ between the server (backend) and the client (frontend), regardless of the language used.
+
+You can use it beyond UI Forms, like lists, tables, and any other UI that needs structured JSON data.
 
 ## Installation
 
@@ -25,12 +27,18 @@ npm install @remoteoss/json-schema-form
 yarn install @remoteoss/json-schema-form
 ```
 
-## Documentation
+## Getting Started
+
+Check the 📚 **[JSF website](https://json-schema-form.vercel.app/)** for documentation.
 
-Check the 📚 **[JSF website](https://json-schema-form.vercel.app/)** for documentation and demos.
+### Playground
+
+Check the 🕹️ **[JSF Playground](https://json-schema-form.vercel.app/?path=/docs/playground--docs)** for demos.
 
 ## Contributing
 
 Read [CONTRIBUTING](CONTRIBUTING.md) to get started.
 
+We are working on the [next version v1.0](/next). A rewrite in TypeScript with major bugfixes and missing features. It aims to support the latest JSON Schema dialect 2020-12.
+
 _Backed by [Remote.com](https://remote.com/)_

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.14-dev.20250514093749
- Generated: Wed, 14 May 2025 09:38:11 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.15-beta.0
+ Generated: Fri, 06 Jun 2025 13:25:38 GMT
 
  MIT License
 
@@ -967,9 +967,16 @@ function replaceHandlebarsTemplates({
 function calculateComputedAttributes(fieldParams, { parentID = "root" } = {}) {
   return ({ logic, isRequired, config, formValues }) => {
     const { name, computedAttributes } = fieldParams;
-    const attributes = Object.fromEntries(
+    let attributes = Object.fromEntries(
       Object.entries(computedAttributes).map(handleComputedAttribute(logic, formValues, parentID, name)).filter(([, value]) => value !== null)
     );
+    const { "x-jsf-presentation": presentation, ...rest } = attributes;
+    if (presentation) {
+      attributes = {
+        ...rest,
+        ...presentation
+      };
+    }
     return {
       ...attributes,
       schema: buildYupSchema(
@@ -993,16 +1000,21 @@ function handleComputedAttribute(logic, formValues, parentID, name) {
           handleNestedObjectForComputedValues(value, formValues, parentID, logic, name)
         ];
       case "x-jsf-presentation": {
-        if (value.statement) {
-          return [
-            "statement",
-            handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-          ];
-        }
-        return [
-          key,
-          handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-        ];
+        const values = {};
+        Object.entries(value).forEach(([presentationKey, presentationValue]) => {
+          if (typeof presentationValue === "object") {
+            values[presentationKey] = handleNestedObjectForComputedValues(
+              presentationValue,
+              formValues,
+              parentID,
+              logic,
+              name
+            );
+          } else {
+            values[presentationKey] = logic.getScope(parentID).applyComputedValueInField(presentationValue, formValues, name);
+          }
+        });
+        return [key, values];
       }
       case "const":
       default: {

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.14-dev.20250514093749
- Generated: Wed, 14 May 2025 09:38:11 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.15-beta.0
+ Generated: Fri, 06 Jun 2025 13:25:38 GMT
 
  MIT License
 
@@ -930,9 +930,16 @@ function replaceHandlebarsTemplates({
 function calculateComputedAttributes(fieldParams, { parentID = "root" } = {}) {
   return ({ logic, isRequired, config, formValues }) => {
     const { name, computedAttributes } = fieldParams;
-    const attributes = Object.fromEntries(
+    let attributes = Object.fromEntries(
       Object.entries(computedAttributes).map(handleComputedAttribute(logic, formValues, parentID, name)).filter(([, value]) => value !== null)
     );
+    const { "x-jsf-presentation": presentation, ...rest } = attributes;
+    if (presentation) {
+      attributes = {
+        ...rest,
+        ...presentation
+      };
+    }
     return {
       ...attributes,
       schema: buildYupSchema(
@@ -956,16 +963,21 @@ function handleComputedAttribute(logic, formValues, parentID, name) {
           handleNestedObjectForComputedValues(value, formValues, parentID, logic, name)
         ];
       case "x-jsf-presentation": {
-        if (value.statement) {
-          return [
-            "statement",
-            handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-          ];
-        }
-        return [
-          key,
-          handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-        ];
+        const values = {};
+        Object.entries(value).forEach(([presentationKey, presentationValue]) => {
+          if (typeof presentationValue === "object") {
+            values[presentationKey] = handleNestedObjectForComputedValues(
+              presentationValue,
+              formValues,
+              parentID,
+              logic,
+              name
+            );
+          } else {
+            values[presentationKey] = logic.getScope(parentID).applyComputedValueInField(presentationValue, formValues, name);
+          }
+        });
+        return [key, values];
       }
       case "const":
       default: {

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.14-dev.20250514093749
- Generated: Wed, 14 May 2025 09:38:11 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.15-beta.0
+ Generated: Fri, 06 Jun 2025 13:25:38 GMT
 
  MIT License
 
@@ -12446,9 +12446,16 @@ function replaceHandlebarsTemplates({
 function calculateComputedAttributes(fieldParams, { parentID = "root" } = {}) {
   return ({ logic, isRequired, config, formValues }) => {
     const { name, computedAttributes } = fieldParams;
-    const attributes = Object.fromEntries(
+    let attributes = Object.fromEntries(
       Object.entries(computedAttributes).map(handleComputedAttribute(logic, formValues, parentID, name)).filter(([, value]) => value !== null)
     );
+    const { "x-jsf-presentation": presentation, ...rest } = attributes;
+    if (presentation) {
+      attributes = {
+        ...rest,
+        ...presentation
+      };
+    }
     return {
       ...attributes,
       schema: buildYupSchema(
@@ -12472,16 +12479,21 @@ function handleComputedAttribute(logic, formValues, parentID, name) {
           handleNestedObjectForComputedValues(value, formValues, parentID, logic, name)
         ];
       case "x-jsf-presentation": {
-        if (value.statement) {
-          return [
-            "statement",
-            handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-          ];
-        }
-        return [
-          key,
-          handleNestedObjectForComputedValues(value.statement, formValues, parentID, logic, name)
-        ];
+        const values2 = {};
+        Object.entries(value).forEach(([presentationKey, presentationValue]) => {
+          if (typeof presentationValue === "object") {
+            values2[presentationKey] = handleNestedObjectForComputedValues(
+              presentationValue,
+              formValues,
+              parentID,
+              logic,
+              name
+            );
+          } else {
+            values2[presentationKey] = logic.getScope(parentID).applyComputedValueInField(presentationValue, formValues, name);
+          }
+        });
+        return [key, values2];
       }
       case "const":
       default: {

package/package.json

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

package/src/tests/helpers.custom.js

@@ -205,7 +205,7 @@ export const schemaInputTypeHidden = {
     a_hidden_select_multiple: {
       ...schemaInputTypeCountriesMultiple.properties.nationality,
       title: 'Select multi hidden',
-      default: ['Albania, Algeria'],
+      default: ['Albania', 'Algeria'],
       'x-jsf-presentation': { inputType: 'hidden' },
       type: 'array',
     },

package/src/tests/helpers.js

@@ -1468,7 +1468,6 @@ export const schemaDynamicValidationConst = {
   required: ['a_fieldset', 'validate_tabs', 'mandatory_group_array'],
   'x-jsf-order': ['validate_tabs', 'a_fieldset', 'mandatory_group_array', 'a_group_array'],
 };
-
 export const schemaDynamicValidationMinimumMaximum = JSONSchemaBuilder()
   .addInput({
     a_number: mockNumberInput,
@@ -1542,6 +1541,7 @@ export const schemaDynamicValidationContains = JSONSchemaBuilder()
       },
       'x-jsf-presentation': {
         inputType: 'select',
+        multiple: true,
         options: [
           {
             label: 'All',

package/src/tests/jsonLogic.fixtures.js

@@ -364,6 +364,55 @@ export const schemaWithComputedAttributesAndErrorMessages = {
   },
 };
 
+export const schemaWithComputedPresentationAttributes = {
+  properties: {
+    amount: {
+      description: 'Total amount to be reimbursed, including taxes.',
+      minimum: 0,
+      title: 'Total amount',
+      type: 'number',
+      'x-jsf-logic-computedAttrs': {
+        'x-jsf-presentation': {
+          currency: 'currency_selected',
+        },
+      },
+      'x-jsf-presentation': {
+        currency: '---',
+        inputType: 'money',
+      },
+    },
+    currency: {
+      default: 'USD',
+      description: 'Currency in which the expense was paid.',
+      oneOf: [
+        {
+          const: 'UGX',
+          title: 'UGX - Ugandan Shilling',
+        },
+        {
+          const: 'USD',
+          title: 'USD - United States Dollar',
+        },
+      ],
+      title: 'Currency',
+      type: 'string',
+      'x-jsf-presentation': {
+        inputType: 'select',
+      },
+    },
+  },
+  type: 'object',
+  'x-jsf-logic': {
+    computedValues: {
+      currency_selected: {
+        rule: {
+          var: 'currency',
+        },
+      },
+    },
+  },
+};
+
 export const schemaWithDeepVarThatDoesNotExist = {
   properties: {
     field_a: {

package/src/tests/jsonLogic.test.js

@@ -35,6 +35,7 @@ import {
   schemaWithValidationThatDoesNotExistOnProperty,
   badSchemaThatWillNotSetAForcedValue,
   schemaWithReduceAccumulator,
+  schemaWithComputedPresentationAttributes,
 } from './jsonLogic.fixtures';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -385,6 +386,17 @@ describe('jsonLogic: cross-values validations', () => {
       expect(fieldB.statement).toEqual({ description: 'Must be bigger than 4 and smaller than 8' });
     });
 
+    it('presentation attributes work', () => {
+      const { fields, handleValidation } = createHeadlessForm(
+        schemaWithComputedPresentationAttributes,
+        { strictInputType: false }
+      );
+      const fieldB = fields.find((i) => i.name === 'amount');
+      expect(handleValidation({ currency: 'UGX' }).formErrors).toEqual(undefined);
+      expect(fieldB.inputType).toEqual('money');
+      expect(fieldB.currency).toEqual('UGX');
+    });
+
     it('Use a inline-rule in a schema for a title attribute', () => {
       const { fields, handleValidation } = createHeadlessForm(
         schemaWithInlineRuleForComputedAttributeWithCopy,