@remoteoss/json-schema-form 0.7.2-dev.20231106093837 → 0.7.4-beta.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+#### 0.7.4-beta.0 (2023-11-07)
+
+##### Chores
+
+- Follow-up of #57. Ignore internal attributes from conditional attributes removal ([#58](https://github.com/remoteoss/json-schema-form/pull/58)) ([ee762c2e](https://github.com/remoteoss/json-schema-form/commit/ee762c2e90834a9ec0d7b88af47cefe1e3a03dd1))
+
+#### 0.7.3-beta.0 (2023-11-07)
+
+##### Bug Fixes
+
+- Remove conditional attributes after the condition is unmatched ([#57](https://github.com/remoteoss/json-schema-form/pull/57)) ([8bac7145](https://github.com/remoteoss/json-schema-form/commit/8bac7145dfdd4136c0613044389666a614eb12f7))
+
+#### 0.7.2-beta.0 (2023-11-06)
+
+##### Bug Fixes
+
+- **select/radio:** Support oneOf[].pattern validation ([#47](https://github.com/remoteoss/json-schema-form/pull/47)) ([5a4bb592](https://github.com/remoteoss/json-schema-form/commit/5a4bb59266ff595a9cb65f5b261a4ae2f3ad279f))
+
 #### 0.7.1-beta.0 (2023-10-31)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.2-dev.20231106093837
- Generated: Mon, 06 Nov 2023 09:38:54 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.4-beta.0
+ Generated: Tue, 07 Nov 2023 14:43:48 GMT
 
  MIT License
 
@@ -469,13 +469,34 @@ var yupSchemas = {
       if (value === "") {
         return void 0;
       }
-      if (options?.includes(null)) {
+      if (options?.some((option) => option.value === null)) {
         return value;
       }
       return value === null ? void 0 : value;
-    }).oneOf(options, ({ value }) => {
-      return `The option ${JSON.stringify(value)} is not valid.`;
-    });
+    }).test(
+      /* 
+        Custom test determines if the value either:
+         - Matches a specific option by value
+         - Matches a pattern
+        If the option is undefined do not test, to allow for optional fields. 
+       */
+      "matchesOptionOrPattern",
+      ({ value }) => `The option ${JSON.stringify(value)} is not valid.`,
+      (value) => {
+        if (value === void 0) {
+          return true;
+        }
+        const exactMatch = options.some((option) => option.value === value);
+        if (exactMatch) {
+          return true;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
+      }
+    );
   },
   date: ({ minDate, maxDate }) => {
     let dateString = (0, import_yup.string)().nullable().transform((value) => {
@@ -534,12 +555,15 @@ function getRequiredErrorMessage(inputType, { inlineError, configError }) {
 }
 var getJsonTypeInArray = (jsonType) => Array.isArray(jsonType) ? jsonType.find((val) => val !== "null") : jsonType;
 var getOptions = (field) => {
-  const allValues = field.options?.map((option) => option.value);
+  const allValues = field.options?.map((option) => ({
+    value: option.value,
+    pattern: option.pattern ? new RegExp(option.pattern) : null
+  }));
   const isOptionalWithNull = Array.isArray(field.jsonType) && // @TODO should also check the "oneOf" directly looking for "null"
   // option but we don't have direct access at this point.
   // Otherwise the JSON Schema validator will fail as explained in PR#18
   field.jsonType.includes("null");
-  return isOptionalWithNull ? [...allValues, null] : allValues;
+  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
@@ -1050,8 +1074,11 @@ var dynamicInternalJsfAttrs = [
   // driven from conditionals
   "calculateCustomValidationProperties",
   // To be deprecated in favor of json-logic
-  "scopedJsonSchema"
+  "scopedJsonSchema",
   // The respective JSON Schema
+  // HOTFIX/TODO Internal customizations, check test conditions.test.js for more info.
+  "Component",
+  "calculateDynamicProperties"
 ];
 var dynamicInternalJsfAttrsObj = Object.fromEntries(
   dynamicInternalJsfAttrs.map((k) => [k, true])
@@ -1186,7 +1213,7 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       conditionBranch: node,
       formValues
     });
-    updateAttributes(newAttributes, rootFieldAttrs);
+    updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
   }
   if (field.calculateCustomValidationProperties) {

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.2-dev.20231106093837
- Generated: Mon, 06 Nov 2023 09:38:54 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.4-beta.0
+ Generated: Tue, 07 Nov 2023 14:43:48 GMT
 
  MIT License
 
@@ -433,13 +433,34 @@ var yupSchemas = {
       if (value === "") {
         return void 0;
       }
-      if (options?.includes(null)) {
+      if (options?.some((option) => option.value === null)) {
         return value;
       }
       return value === null ? void 0 : value;
-    }).oneOf(options, ({ value }) => {
-      return `The option ${JSON.stringify(value)} is not valid.`;
-    });
+    }).test(
+      /* 
+        Custom test determines if the value either:
+         - Matches a specific option by value
+         - Matches a pattern
+        If the option is undefined do not test, to allow for optional fields. 
+       */
+      "matchesOptionOrPattern",
+      ({ value }) => `The option ${JSON.stringify(value)} is not valid.`,
+      (value) => {
+        if (value === void 0) {
+          return true;
+        }
+        const exactMatch = options.some((option) => option.value === value);
+        if (exactMatch) {
+          return true;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
+      }
+    );
   },
   date: ({ minDate, maxDate }) => {
     let dateString = string().nullable().transform((value) => {
@@ -498,12 +519,15 @@ function getRequiredErrorMessage(inputType, { inlineError, configError }) {
 }
 var getJsonTypeInArray = (jsonType) => Array.isArray(jsonType) ? jsonType.find((val) => val !== "null") : jsonType;
 var getOptions = (field) => {
-  const allValues = field.options?.map((option) => option.value);
+  const allValues = field.options?.map((option) => ({
+    value: option.value,
+    pattern: option.pattern ? new RegExp(option.pattern) : null
+  }));
   const isOptionalWithNull = Array.isArray(field.jsonType) && // @TODO should also check the "oneOf" directly looking for "null"
   // option but we don't have direct access at this point.
   // Otherwise the JSON Schema validator will fail as explained in PR#18
   field.jsonType.includes("null");
-  return isOptionalWithNull ? [...allValues, null] : allValues;
+  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
@@ -1014,8 +1038,11 @@ var dynamicInternalJsfAttrs = [
   // driven from conditionals
   "calculateCustomValidationProperties",
   // To be deprecated in favor of json-logic
-  "scopedJsonSchema"
+  "scopedJsonSchema",
   // The respective JSON Schema
+  // HOTFIX/TODO Internal customizations, check test conditions.test.js for more info.
+  "Component",
+  "calculateDynamicProperties"
 ];
 var dynamicInternalJsfAttrsObj = Object.fromEntries(
   dynamicInternalJsfAttrs.map((k) => [k, true])
@@ -1150,7 +1177,7 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       conditionBranch: node,
       formValues
     });
-    updateAttributes(newAttributes, rootFieldAttrs);
+    updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
   }
   if (field.calculateCustomValidationProperties) {

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.7.2-dev.20231106093837
- Generated: Mon, 06 Nov 2023 09:38:54 GMT
+ NPM Package: @remoteoss/json-schema-form@0.7.4-beta.0
+ Generated: Tue, 07 Nov 2023 14:43:48 GMT
 
  MIT License
 
@@ -11787,13 +11787,34 @@ var yupSchemas = {
       if (value === "") {
         return void 0;
       }
-      if (options?.includes(null)) {
+      if (options?.some((option) => option.value === null)) {
         return value;
       }
       return value === null ? void 0 : value;
-    }).oneOf(options, ({ value }) => {
-      return `The option ${JSON.stringify(value)} is not valid.`;
-    });
+    }).test(
+      /* 
+        Custom test determines if the value either:
+         - Matches a specific option by value
+         - Matches a pattern
+        If the option is undefined do not test, to allow for optional fields. 
+       */
+      "matchesOptionOrPattern",
+      ({ value }) => `The option ${JSON.stringify(value)} is not valid.`,
+      (value) => {
+        if (value === void 0) {
+          return true;
+        }
+        const exactMatch = options.some((option) => option.value === value);
+        if (exactMatch) {
+          return true;
+        }
+        const patternMatch = options.some((option) => option.pattern?.test(value));
+        if (patternMatch) {
+          return true;
+        }
+        return false;
+      }
+    );
   },
   date: ({ minDate, maxDate }) => {
     let dateString = StringSchema().nullable().transform((value) => {
@@ -11852,12 +11873,15 @@ function getRequiredErrorMessage(inputType, { inlineError, configError }) {
 }
 var getJsonTypeInArray = (jsonType) => Array.isArray(jsonType) ? jsonType.find((val) => val !== "null") : jsonType;
 var getOptions = (field) => {
-  const allValues = field.options?.map((option) => option.value);
+  const allValues = field.options?.map((option) => ({
+    value: option.value,
+    pattern: option.pattern ? new RegExp(option.pattern) : null
+  }));
   const isOptionalWithNull = Array.isArray(field.jsonType) && // @TODO should also check the "oneOf" directly looking for "null"
   // option but we don't have direct access at this point.
   // Otherwise the JSON Schema validator will fail as explained in PR#18
   field.jsonType.includes("null");
-  return isOptionalWithNull ? [...allValues, null] : allValues;
+  return isOptionalWithNull ? [...allValues, { option: null }] : allValues;
 };
 var getYupSchema = ({ inputType, ...field }) => {
   const jsonType = getJsonTypeInArray(field.jsonType);
@@ -12368,8 +12392,11 @@ var dynamicInternalJsfAttrs = [
   // driven from conditionals
   "calculateCustomValidationProperties",
   // To be deprecated in favor of json-logic
-  "scopedJsonSchema"
+  "scopedJsonSchema",
   // The respective JSON Schema
+  // HOTFIX/TODO Internal customizations, check test conditions.test.js for more info.
+  "Component",
+  "calculateDynamicProperties"
 ];
 var dynamicInternalJsfAttrsObj = Object.fromEntries(
   dynamicInternalJsfAttrs.map((k) => [k, true])
@@ -12504,7 +12531,7 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       conditionBranch: node,
       formValues
     });
-    updateAttributes(newAttributes, rootFieldAttrs);
+    updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
   }
   if (field.calculateCustomValidationProperties) {

package/package.json

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

@@ -358,4 +358,62 @@ describe('Conditional attributes updated', () => {
       ],
     });
   });
+
+  it('Keeps custom attribute Component (fieldAttrsFromJsf) (hotfix temporary)', () => {
+    // This is necessary as hotfix because we (Remote) use it internally.
+    // Not cool, we'll need a better solution asap.
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          salary_period: {
+            type: 'string',
+            title: 'Salary period',
+            oneOf: [
+              { title: 'Weekly', const: 'weekly' },
+              { title: 'Monthly', const: 'monthly' },
+            ],
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              properties: {
+                salary_period: {
+                  description: 'We recommend montlhy.',
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        strictInputType: false,
+        customProperties: {
+          salary_period: {
+            Component: '<A React Component>',
+            calculateDynamicProperties: () => true,
+          },
+        },
+      }
+    );
+
+    // It's there by default
+    expect(fields[1].Component).toBe('<A React Component>');
+    expect(fields[1].calculateDynamicProperties).toEqual(expect.any(Function));
+
+    // Given "Yes", it stays there too.
+    handleValidation({ is_full_time: 'yes' });
+    expect(fields[1].Component).toBe('<A React Component>');
+    expect(fields[1].calculateDynamicProperties).toEqual(expect.any(Function));
+
+    // Given "No", it stays there too.
+    handleValidation({ is_full_time: 'no' });
+    expect(fields[1].Component).toBe('<A React Component>');
+    expect(fields[1].calculateDynamicProperties).toEqual(expect.any(Function));
+  });
 });

package/src/tests/createHeadlessForm.test.js

@@ -39,6 +39,7 @@ import {
   mockFileInput,
   mockRadioCardInput,
   mockRadioCardExpandableInput,
+  mockTelWithPattern,
   mockTextInput,
   mockTextInputDeprecated,
   mockNumberInput,
@@ -1530,6 +1531,51 @@ describe('createHeadlessForm', () => {
       });
     });
 
+    it('supports oneOf pattern validation', () => {
+      const result = createHeadlessForm(mockTelWithPattern);
+
+      expect(result).toMatchObject({
+        fields: [
+          {
+            label: 'Phone number',
+            name: 'phone_number',
+            type: 'tel',
+            required: false,
+            options: [
+              {
+                label: 'Portugal',
+                pattern: '^(\\+351)[0-9]{9,}$',
+              },
+              {
+                label: 'United Kingdom (UK)',
+                pattern: '^(\\+44)[0-9]{1,}$',
+              },
+              {
+                label: 'Bolivia',
+                pattern: '^(\\+591)[0-9]{9,}$',
+              },
+              {
+                label: 'Canada',
+                pattern: '^(\\+1)(206|224)[0-9]{1,}$',
+              },
+              {
+                label: 'United States',
+                pattern: '^(\\+1)[0-9]{1,}$',
+              },
+            ],
+          },
+        ],
+      });
+
+      const fieldValidator = result.fields[0].schema;
+
+      expect(fieldValidator.isValidSync('+351123123123')).toBe(true);
+      expect(() => fieldValidator.validateSync('+35100')).toThrowError(
+        'The option "+35100" is not valid.'
+      );
+      expect(fieldValidator.isValidSync(undefined)).toBe(true);
+    });
+
     describe('supports "fieldset" field type', () => {
       it('supports basic case', () => {
         const result = createHeadlessForm({

package/src/tests/helpers.js

@@ -458,6 +458,46 @@ export const mockCheckboxInput = {
   type: 'string',
 };
 
+export const mockTelWithPattern = {
+  properties: {
+    phone_number: {
+      title: 'Phone number',
+      description: 'Enter your telephone number',
+      type: 'string',
+      'x-jsf-presentation': {
+        inputType: 'tel',
+      },
+      oneOf: [
+        {
+          title: 'Portugal',
+          pattern: '^(\\+351)[0-9]{9,}$',
+          'x-jsf-presentation': { meta: { countryCode: '351' } },
+        },
+        {
+          title: 'United Kingdom (UK)',
+          pattern: '^(\\+44)[0-9]{1,}$',
+          'x-jsf-presentation': { meta: { countryCode: '44' } },
+        },
+        {
+          title: 'Bolivia',
+          pattern: '^(\\+591)[0-9]{9,}$',
+          'x-jsf-presentation': { meta: { countryCode: '591' } },
+        },
+        {
+          title: 'Canada',
+          pattern: '^(\\+1)(206|224)[0-9]{1,}$',
+          'x-jsf-presentation': { meta: { countryCode: '1' } },
+        },
+        {
+          title: 'United States',
+          pattern: '^(\\+1)[0-9]{1,}$',
+          'x-jsf-presentation': { meta: { countryCode: '1' } },
+        },
+      ],
+    },
+  },
+};
+
 /**
  * Compose a schema with lower chance of human error
  * @param {Object} schema version

package/src/tests/jsonLogic.fixtures.js

@@ -250,7 +250,7 @@ export const schemaWithComputedAttributeThatDoesntExist = {
     field_a: {
       type: 'number',
       'x-jsf-logic-computedAttrs': {
-        default: 'iDontExist',
+        minimum: 'iDontExist',
       },
     },
   },