@remoteoss/json-schema-form 0.11.11-dev.20250220164730 → 0.11.12-beta.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+#### 0.11.12-beta.0 (2025-04-15)
+
+##### Chores
+
+*  change deprecated 'presentation' to 'x-jsf-presentation' in test helpers ([#159](https://github.com/remoteoss/json-schema-form/pull/159)) ([3f03b16d](https://github.com/remoteoss/json-schema-form/commit/3f03b16dce6acd801ff497a9c547cceb1b6347c5))
+
+#### 0.11.11-beta.0 (2025-02-20)
+
+##### Bug Fixes
+
+* **conditionals:**  Add support to `oneOf` ([#136](https://github.com/remoteoss/json-schema-form/pull/136)) ([966cec59](https://github.com/remoteoss/json-schema-form/commit/966cec595ed2a1ff35f9d15e22acaea16cdd5113))
+
 #### 0.11.10-beta.0 (2025-01-22)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.11-dev.20250220164730
- Generated: Thu, 20 Feb 2025 16:47:52 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.12-beta.0
+ Generated: Tue, 15 Apr 2025 08:28:29 GMT
 
  MIT License
 

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.11-dev.20250220164730
- Generated: Thu, 20 Feb 2025 16:47:52 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.12-beta.0
+ Generated: Tue, 15 Apr 2025 08:28:29 GMT
 
  MIT License
 

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2025 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.11-dev.20250220164730
- Generated: Thu, 20 Feb 2025 16:47:52 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.12-beta.0
+ Generated: Tue, 15 Apr 2025 08:28:29 GMT
 
  MIT License
 

package/package.json

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

package/src/tests/conditions.test.js

@@ -549,77 +549,49 @@ describe('Conditional with literal booleans', () => {
 });
 
 describe('Conditional with anyOf', () => {
-  it('handles true case', () => {
-    const { fields, handleValidation } = createHeadlessForm(
+  const schema = {
+    additionalProperties: false,
+    type: 'object',
+    properties: {
+      field_a: { type: 'string' },
+      field_b: { type: 'string' },
+      field_c: { type: 'string' },
+    },
+    allOf: [
       {
-        additionalProperties: false,
-        type: 'object',
-        properties: {
-          field_a: { type: 'string' },
-          field_b: { type: 'string' },
-          field_c: { type: 'string' },
+        if: {
+          anyOf: [
+            { properties: { field_a: { const: '1' } }, required: ['field_a'] },
+            { properties: { field_b: { const: '2' } }, required: ['field_b'] },
+          ],
         },
-        allOf: [
-          {
-            if: {
-              anyOf: [
-                { properties: { field_a: { const: '1' } }, required: ['a'] },
-                { properties: { field_b: { const: '2' } }, required: ['b'] },
-              ],
-            },
-            then: {
-              required: ['field_c'],
-            },
-            else: {
-              properties: {
-                field_c: false,
-              },
-            },
+        then: {
+          required: ['field_c'],
+        },
+        else: {
+          properties: {
+            field_c: false,
           },
-        ],
+        },
       },
-      { strictInputType: false }
-    );
+    ],
+  };
+
+  it('handles true case', () => {
+    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
 
-    expect(handleValidation({ field_a: '4', field_b: '2' }).formErrors).toEqual({
+    expect(fields[2].isVisible).toBe(false);
+    expect(handleValidation({ field_a: 'x', field_b: '2' }).formErrors).toEqual({
       field_c: 'Required field',
     });
     expect(fields[2].isVisible).toBe(true);
   });
 
   it('handles false case', () => {
-    const { fields, handleValidation } = createHeadlessForm(
-      {
-        additionalProperties: false,
-        type: 'object',
-        properties: {
-          field_a: { type: 'string' },
-          field_b: { type: 'string' },
-          field_c: { type: 'string' },
-        },
-        allOf: [
-          {
-            if: {
-              anyOf: [
-                { properties: { field_a: { const: '1' } }, required: ['a'] },
-                { properties: { field_b: { const: '2' } }, required: ['b'] },
-              ],
-            },
-            then: {
-              required: ['field_c'],
-            },
-            else: {
-              properties: {
-                field_c: false,
-              },
-            },
-          },
-        ],
-      },
-      { strictInputType: false }
-    );
+    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
 
-    expect(handleValidation({ field_a: '4', field_b: '4' }).formErrors).toBeUndefined();
+    expect(fields[2].isVisible).toBe(false);
+    expect(handleValidation({ field_a: 'x', field_b: 'x' }).formErrors).toBeUndefined();
     expect(fields[2].isVisible).toBe(false);
   });
 });

package/src/tests/createHeadlessForm.test.js

@@ -2521,7 +2521,7 @@ describe('createHeadlessForm', () => {
           .addInput({
             username: {
               ...mockTextInputDeprecated,
-              presentation: {
+              'x-jsf-presentation': {
                 inputType: 'text',
                 maskSecret: 2,
                 // should override the root level description

package/src/tests/helpers.custom.js

@@ -11,7 +11,7 @@ export const schemaInputTypeTextarea = {
   properties: {
     comment: {
       title: 'Your comment',
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'textarea',
       },
       maxLength: 250,
@@ -29,7 +29,7 @@ export const inputTypeCountriesSolo = {
     { title: 'Algeria', const: 'Algeria' },
   ],
   type: 'string',
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'countries',
   },
 };
@@ -58,7 +58,7 @@ export const schemaInputTypeCountriesMultiple = {
         ],
       },
       type: 'array',
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'countries',
       },
     },
@@ -90,7 +90,7 @@ export const schemaInputTypeTel = {
       type: 'string',
       pattern: '^(\\+|00)[0-9]{6,}$',
       maxLength: 30,
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'tel',
       },
       errorMessage: {
@@ -106,7 +106,7 @@ const mockTelInput = {
   title: 'Phone number',
   description: 'Enter your telephone number',
   maxLength: 30,
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'tel',
   },
   pattern: '^(\\+|00)\\d*$',
@@ -116,7 +116,7 @@ const mockTelInput = {
 export const mockMoneyInput = {
   title: 'Weekly salary',
   description: 'This field has a min and max values. Max has a custom error message.',
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'money',
     currency: 'EUR',
   },
@@ -150,7 +150,7 @@ export const schemaCustomComponent = {
     salary: {
       title: 'Monthly gross salary',
       description: 'This field gets represented by a custom UI Component.',
-      presentation: {
+      'x-jsf-presentation': {
         inputType: 'money',
         currency: 'EUR',
       },

package/src/tests/helpers.js

@@ -17,7 +17,7 @@ export const mockTextInputDeprecated = {
   title: 'Username',
   description: 'Your username (max 10 characters)',
   maxLength: 10,
-  presentation: {
+  'x-jsf-presentation': {
     inputType: 'text',
     maskSecret: 2,
   },
@@ -1284,7 +1284,7 @@ export const schemaForErrorMessageSpecificity = {
       title: 'Weekday',
       description: "This text field has the traditional error message. 'Required field'",
       type: 'string',
-      presentation: { inputType: 'text' },
+      'x-jsf-presentation': { inputType: 'text' },
     },
     day: {
       title: 'Day',
@@ -1293,21 +1293,21 @@ export const schemaForErrorMessageSpecificity = {
         'The remaining fields are numbers and were customized to say "This cannot be empty." instead of "Required field".',
 
       maximum: 31,
-      presentation: { inputType: 'number' },
+      'x-jsf-presentation': { inputType: 'number' },
     },
     month: {
       title: 'Month',
       type: 'number',
       minimum: 1,
       maximum: 12,
-      presentation: { inputType: 'number' },
+      'x-jsf-presentation': { inputType: 'number' },
     },
     year: {
       title: 'Year',
       description:
         "This number field has a custom error message declared in the json schema, which has a higher specificity than the one declared in createHeadlessForm's configuration.",
       type: 'number',
-      presentation: { inputType: 'number' },
+      'x-jsf-presentation': { inputType: 'number' },
       'x-jsf-errorMessage': {
         required: 'The year is mandatory.',
       },

package/src/tests/jsonLogic.fixtures.js

@@ -984,3 +984,51 @@ export const schemaWithTwoValidationsWhereOneOfThemIsAppliedConditionally = {
     },
   ],
 };
+
+export const schemaWithReduceAccumulator = {
+  properties: {
+    work_days: {
+      items: {
+        anyOf: [
+          { const: 'monday', title: 'Monday' },
+          { const: 'tuesday', title: 'Tuesday' },
+          { const: 'wednesday', title: 'Wednesday' },
+          { const: 'thursday', title: 'Thursday' },
+          { const: 'friday', title: 'Friday' },
+          { const: 'saturday', title: 'Saturday' },
+          { const: 'sunday', title: 'Sunday' },
+        ],
+      },
+      type: 'array',
+      uniqueItems: true,
+      'x-jsf-presentation': {
+        inputType: 'select',
+      },
+    },
+    working_hours_per_day: {
+      type: 'number',
+    },
+    working_hours_per_week: {
+      type: 'number',
+      'x-jsf-logic-computedAttrs': {
+        const: 'computed_work_hours_per_week',
+        defaultValue: 'computed_work_hours_per_week',
+        title: '{{computed_work_hours_per_week}} hours per week',
+      },
+    },
+  },
+  'x-jsf-logic': {
+    computedValues: {
+      computed_work_hours_per_week: {
+        rule: {
+          '*': [
+            { var: 'working_hours_per_day' },
+            {
+              reduce: [{ var: 'work_days' }, { '+': [{ var: ['accumulator', 0] }, 1] }, 0],
+            },
+          ],
+        },
+      },
+    },
+  },
+};

package/src/tests/jsonLogic.test.js

@@ -34,6 +34,7 @@ import {
   schemaWithUnknownVariableInValidations,
   schemaWithValidationThatDoesNotExistOnProperty,
   badSchemaThatWillNotSetAForcedValue,
+  schemaWithReduceAccumulator,
 } from './jsonLogic.fixtures';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -243,6 +244,23 @@ describe('jsonLogic: cross-values validations', () => {
     });
   });
 
+  // TODO: Implement this test.
+  describe.skip('Reduce', () => {
+    it('reduce: working_hours_per_day * work_days', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaWithReduceAccumulator, {
+        strictInputType: false,
+      });
+      handleValidation({
+        work_days: ['monday', 'tuesday'],
+        working_hours_per_day: 8,
+      });
+      const field = fields.find((i) => i.name === 'working_hours_per_week');
+      expect(field.const).toEqual(16);
+      expect(field.default).toEqual(16);
+      expect(field.label).toEqual('16 hours per week');
+    });
+  });
+
   describe('Logical: ||, &&', () => {
     it('AND: field_a > field_b && field_a > field_c (implicit with multiple rules in a single field)', () => {
       const schema = createSchemaWithThreePropertiesWithRuleOnFieldA({