@remoteoss/json-schema-form 0.9.2-dev.20240518112325 → 0.10.1-beta.0

package/CHANGELOG.md

@@ -1,32 +1,42 @@
+#### 0.10.1-beta.0 (2024-07-23)
+
+##### Chores
+
+* **Text field docs:**  Change naming of ID number property ([#74](https://github.com/remoteoss/json-schema-form/pull/74)) ([338ddd2a](https://github.com/remoteoss/json-schema-form/commit/338ddd2a5f008ec089f38db834f075100b856001))
+
+#### 0.10.0-beta.0 (2024-06-20)
+
+Adds `modify` utility for better customizations ([#75](https://github.com/remoteoss/json-schema-form/pull/75))
+
 #### 0.9.1-beta.0 (2024-03-26)
 
 ##### Bug Fixes
 
-* **select/radio:**  Allow numbers in oneOf ([#49](https://github.com/remoteoss/json-schema-form/pull/49)) ([04c2598a](https://github.com/remoteoss/json-schema-form/commit/04c2598a3f4e31d8a9495e0d69c0427b6b8c9f56))
+- **select/radio:** Allow numbers in oneOf ([#49](https://github.com/remoteoss/json-schema-form/pull/49)) ([04c2598a](https://github.com/remoteoss/json-schema-form/commit/04c2598a3f4e31d8a9495e0d69c0427b6b8c9f56))
 
 #### 0.9.0-beta.0 (2024-03-11)
 
 ##### Breaking changes
 
-*  Rename `value` -> `forcedValue`. This is in regards to the `json-logic`, where a "forced value" will now be returned in each relevant field (i.e. fields where the schema `const` and `default` are the same) with `forcedValue` over `value`. ([#66](https://github.com/remoteoss/json-schema-form/pull/66)) ([77c445a9](https://github.com/remoteoss/json-schema-form/commit/77c445a9dce657a7648642312f22c18f972187c7))
+- Rename `value` -> `forcedValue`. This is in regards to the `json-logic`, where a "forced value" will now be returned in each relevant field (i.e. fields where the schema `const` and `default` are the same) with `forcedValue` over `value`. ([#66](https://github.com/remoteoss/json-schema-form/pull/66)) ([77c445a9](https://github.com/remoteoss/json-schema-form/commit/77c445a9dce657a7648642312f22c18f972187c7))
 
 #### 0.8.2-beta.0 (2024-02-13)
 
 ##### Bug Fixes
 
-* **helpers:**  getFieldOptions - return empty array if oneOf missing in radio ([#67](https://github.com/remoteoss/json-schema-form/pull/67)) ([6511330f](https://github.com/remoteoss/json-schema-form/commit/6511330f55a2accedb1c58a61ff915a3a0186dbb))
+- **helpers:** getFieldOptions - return empty array if oneOf missing in radio ([#67](https://github.com/remoteoss/json-schema-form/pull/67)) ([6511330f](https://github.com/remoteoss/json-schema-form/commit/6511330f55a2accedb1c58a61ff915a3a0186dbb))
 
 #### 0.8.1-beta.0 (2024-02-12)
 
 ##### Bug Fixes
 
-* **conditionals:**  Certain conditions in a JSON schema were failing. This bugfix adds missing field context to the evaluation to prevent the error. ([#65](https://github.com/remoteoss/json-schema-form/pull/65)) ([6755a2fd](https://github.com/remoteoss/json-schema-form/commit/6755a2fd29f3f806a57ba19e29ad7e21daf9e51b))
+- **conditionals:** Certain conditions in a JSON schema were failing. This bugfix adds missing field context to the evaluation to prevent the error. ([#65](https://github.com/remoteoss/json-schema-form/pull/65)) ([6755a2fd](https://github.com/remoteoss/json-schema-form/commit/6755a2fd29f3f806a57ba19e29ad7e21daf9e51b))
 
 #### 0.8.0-beta.0 (2024-02-01)
 
 ##### Bug Fixes
 
-* **fieldset:**  Support customProperties with sub-fields clashing with reserved words. ([#64](https://github.com/remoteoss/json-schema-form/pull/64)) ([8340cdea](https://github.com/remoteoss/json-schema-form/commit/8340cdea27b711064079055af939a595d1c38031))
+- **fieldset:** Support customProperties with sub-fields clashing with reserved words. ([#64](https://github.com/remoteoss/json-schema-form/pull/64)) ([8340cdea](https://github.com/remoteoss/json-schema-form/commit/8340cdea27b711064079055af939a595d1c38031))
 
 #### 0.7.6-beta.0 (2024-01-23)
 

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.9.2-dev.20240518112325
- Generated: Sat, 18 May 2024 11:23:50 GMT
+ NPM Package: @remoteoss/json-schema-form@0.10.1-beta.0
+ Generated: Tue, 23 Jul 2024 21:13:09 GMT
 
  MIT License
 
@@ -60,6 +60,7 @@ var src_exports = {};
 __export(src_exports, {
   buildCompleteYupSchema: () => buildCompleteYupSchema,
   createHeadlessForm: () => createHeadlessForm,
+  modify: () => modify,
   pickXKey: () => pickXKey
 });
 module.exports = __toCommonJS(src_exports);
@@ -1831,3 +1832,60 @@ function createHeadlessForm(jsonSchema, customConfig = {}) {
     };
   }
 }
+
+// src/modify.js
+var import_get4 = __toESM(require("lodash/get"));
+var import_merge3 = __toESM(require("lodash/merge"));
+function shortToFullPath(path) {
+  return path.replace(".", ".properties.");
+}
+function standardizeAttrs(attrs) {
+  const { errorMessage, properties, ...rest } = attrs;
+  return {
+    ...rest,
+    ...errorMessage ? { "x-jsf-errorMessage": errorMessage } : {}
+  };
+}
+function rewriteFields(schema, fieldsConfig) {
+  if (!fieldsConfig)
+    return null;
+  const fieldsToModify = Object.entries(fieldsConfig);
+  fieldsToModify.forEach(([shortPath, mutation]) => {
+    const fieldPath = shortToFullPath(shortPath);
+    if (!(0, import_get4.default)(schema.properties, fieldPath)) {
+      return;
+    }
+    const fieldAttrs = (0, import_get4.default)(schema.properties, fieldPath);
+    const fieldChanges = typeof mutation === "function" ? mutation(fieldAttrs) : mutation;
+    (0, import_merge3.default)((0, import_get4.default)(schema.properties, fieldPath), {
+      ...fieldAttrs,
+      ...standardizeAttrs(fieldChanges)
+    });
+    if (fieldChanges.properties) {
+      rewriteFields((0, import_get4.default)(schema.properties, fieldPath), fieldChanges.properties);
+    }
+  });
+}
+function rewriteAllFields(schema, configCallback, context) {
+  if (!configCallback)
+    return null;
+  const parentName = context?.parent;
+  Object.entries(schema.properties).forEach(([fieldName, fieldAttrs]) => {
+    const fullName = parentName ? `${parentName}.${fieldName}` : fieldName;
+    (0, import_merge3.default)((0, import_get4.default)(schema.properties, fieldName), {
+      ...fieldAttrs,
+      ...configCallback(fullName, fieldAttrs)
+    });
+    if (fieldAttrs.properties) {
+      rewriteAllFields(fieldAttrs, configCallback, {
+        parent: fieldName
+      });
+    }
+  });
+}
+function modify(originalSchema, config) {
+  const schema = JSON.parse(JSON.stringify(originalSchema));
+  rewriteFields(schema, config.fields);
+  rewriteAllFields(schema, config.allFields);
+  return schema;
+}

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.9.2-dev.20240518112325
- Generated: Sat, 18 May 2024 11:23:50 GMT
+ NPM Package: @remoteoss/json-schema-form@0.10.1-beta.0
+ Generated: Tue, 23 Jul 2024 21:13:09 GMT
 
  MIT License
 
@@ -1795,8 +1795,66 @@ function createHeadlessForm(jsonSchema, customConfig = {}) {
     };
   }
 }
+
+// src/modify.js
+import get4 from "lodash/get";
+import merge3 from "lodash/merge";
+function shortToFullPath(path) {
+  return path.replace(".", ".properties.");
+}
+function standardizeAttrs(attrs) {
+  const { errorMessage, properties, ...rest } = attrs;
+  return {
+    ...rest,
+    ...errorMessage ? { "x-jsf-errorMessage": errorMessage } : {}
+  };
+}
+function rewriteFields(schema, fieldsConfig) {
+  if (!fieldsConfig)
+    return null;
+  const fieldsToModify = Object.entries(fieldsConfig);
+  fieldsToModify.forEach(([shortPath, mutation]) => {
+    const fieldPath = shortToFullPath(shortPath);
+    if (!get4(schema.properties, fieldPath)) {
+      return;
+    }
+    const fieldAttrs = get4(schema.properties, fieldPath);
+    const fieldChanges = typeof mutation === "function" ? mutation(fieldAttrs) : mutation;
+    merge3(get4(schema.properties, fieldPath), {
+      ...fieldAttrs,
+      ...standardizeAttrs(fieldChanges)
+    });
+    if (fieldChanges.properties) {
+      rewriteFields(get4(schema.properties, fieldPath), fieldChanges.properties);
+    }
+  });
+}
+function rewriteAllFields(schema, configCallback, context) {
+  if (!configCallback)
+    return null;
+  const parentName = context?.parent;
+  Object.entries(schema.properties).forEach(([fieldName, fieldAttrs]) => {
+    const fullName = parentName ? `${parentName}.${fieldName}` : fieldName;
+    merge3(get4(schema.properties, fieldName), {
+      ...fieldAttrs,
+      ...configCallback(fullName, fieldAttrs)
+    });
+    if (fieldAttrs.properties) {
+      rewriteAllFields(fieldAttrs, configCallback, {
+        parent: fieldName
+      });
+    }
+  });
+}
+function modify(originalSchema, config) {
+  const schema = JSON.parse(JSON.stringify(originalSchema));
+  rewriteFields(schema, config.fields);
+  rewriteAllFields(schema, config.allFields);
+  return schema;
+}
 export {
   buildCompleteYupSchema,
   createHeadlessForm,
+  modify,
   pickXKey
 };

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.9.2-dev.20240518112325
- Generated: Sat, 18 May 2024 11:23:50 GMT
+ NPM Package: @remoteoss/json-schema-form@0.10.1-beta.0
+ Generated: Tue, 23 Jul 2024 21:13:09 GMT
 
  MIT License
 
@@ -849,11 +849,11 @@ var require_baseGet = __commonJS({
 var require_get = __commonJS({
   "node_modules/lodash/get.js"(exports2, module2) {
     var baseGet2 = require_baseGet();
-    function get5(object2, path, defaultValue) {
+    function get6(object2, path, defaultValue) {
       var result = object2 == null ? void 0 : baseGet2(object2, path);
       return result === void 0 ? defaultValue : result;
     }
-    module2.exports = get5;
+    module2.exports = get6;
   }
 });
 
@@ -2891,7 +2891,7 @@ var require_hasIn = __commonJS({
 var require_baseMatchesProperty = __commonJS({
   "node_modules/lodash/_baseMatchesProperty.js"(exports2, module2) {
     var baseIsEqual2 = require_baseIsEqual();
-    var get5 = require_get();
+    var get6 = require_get();
     var hasIn2 = require_hasIn();
     var isKey2 = require_isKey();
     var isStrictComparable2 = require_isStrictComparable();
@@ -2904,7 +2904,7 @@ var require_baseMatchesProperty = __commonJS({
         return matchesStrictComparable2(toKey2(path), srcValue);
       }
       return function(object2) {
-        var objValue = get5(object2, path);
+        var objValue = get6(object2, path);
         return objValue === void 0 && objValue === srcValue ? hasIn2(object2, path) : baseIsEqual2(srcValue, objValue, COMPARE_PARTIAL_FLAG7 | COMPARE_UNORDERED_FLAG5);
       };
     }
@@ -3478,10 +3478,10 @@ var require_merge = __commonJS({
   "node_modules/lodash/merge.js"(exports2, module2) {
     var baseMerge = require_baseMerge();
     var createAssigner = require_createAssigner();
-    var merge3 = createAssigner(function(object2, source, srcIndex) {
+    var merge4 = createAssigner(function(object2, source, srcIndex) {
       baseMerge(object2, source, srcIndex);
     });
-    module2.exports = merge3;
+    module2.exports = merge4;
   }
 });
 
@@ -9418,7 +9418,7 @@ var RefSet = /* @__PURE__ */ function() {
     next.refs = new Map(this.refs);
     return next;
   };
-  _proto.merge = function merge3(newItems, removeItems) {
+  _proto.merge = function merge4(newItems, removeItems) {
     var next = this.clone();
     newItems.list.forEach(function(value) {
       return next.add(value);
@@ -9436,7 +9436,7 @@ var RefSet = /* @__PURE__ */ function() {
   };
   _createClass(RefSet2, [{
     key: "size",
-    get: function get5() {
+    get: function get6() {
       return this.list.size + this.refs.size;
     }
   }]);
@@ -13149,8 +13149,66 @@ function createHeadlessForm(jsonSchema, customConfig = {}) {
     };
   }
 }
+
+// src/modify.js
+var import_get5 = __toESM(require_get());
+var import_merge3 = __toESM(require_merge());
+function shortToFullPath(path) {
+  return path.replace(".", ".properties.");
+}
+function standardizeAttrs(attrs) {
+  const { errorMessage, properties, ...rest } = attrs;
+  return {
+    ...rest,
+    ...errorMessage ? { "x-jsf-errorMessage": errorMessage } : {}
+  };
+}
+function rewriteFields(schema, fieldsConfig) {
+  if (!fieldsConfig)
+    return null;
+  const fieldsToModify = Object.entries(fieldsConfig);
+  fieldsToModify.forEach(([shortPath, mutation]) => {
+    const fieldPath = shortToFullPath(shortPath);
+    if (!(0, import_get5.default)(schema.properties, fieldPath)) {
+      return;
+    }
+    const fieldAttrs = (0, import_get5.default)(schema.properties, fieldPath);
+    const fieldChanges = typeof mutation === "function" ? mutation(fieldAttrs) : mutation;
+    (0, import_merge3.default)((0, import_get5.default)(schema.properties, fieldPath), {
+      ...fieldAttrs,
+      ...standardizeAttrs(fieldChanges)
+    });
+    if (fieldChanges.properties) {
+      rewriteFields((0, import_get5.default)(schema.properties, fieldPath), fieldChanges.properties);
+    }
+  });
+}
+function rewriteAllFields(schema, configCallback, context) {
+  if (!configCallback)
+    return null;
+  const parentName = context?.parent;
+  Object.entries(schema.properties).forEach(([fieldName, fieldAttrs]) => {
+    const fullName = parentName ? `${parentName}.${fieldName}` : fieldName;
+    (0, import_merge3.default)((0, import_get5.default)(schema.properties, fieldName), {
+      ...fieldAttrs,
+      ...configCallback(fullName, fieldAttrs)
+    });
+    if (fieldAttrs.properties) {
+      rewriteAllFields(fieldAttrs, configCallback, {
+        parent: fieldName
+      });
+    }
+  });
+}
+function modify(originalSchema, config) {
+  const schema = JSON.parse(JSON.stringify(originalSchema));
+  rewriteFields(schema, config.fields);
+  rewriteAllFields(schema, config.allFields);
+  return schema;
+}
 export {
   buildCompleteYupSchema,
   createHeadlessForm,
+  modify,
   pickXKey
 };

package/json-schema-form.d.ts

@@ -113,3 +113,28 @@ export function createHeadlessForm(
   jsonSchema: JSONSchemaObjectType,
   customConfig?: JSFConfig
 ): HeadlessFormOutput;
+
+type MutationsConfig = {
+  /**
+   * An object with the list of fields to be mutated.
+   */
+  fields: Record<string, unknown>;
+  /**
+   * a callback function that applies a mutation to all the fields.
+   * @param fieldName
+   * @param fieldAttrs
+   * @returns
+   */
+  allFields: (fieldName: string, fieldAttrs: Record<string, unknown>) => Record<string, unknown>;
+};
+
+export function modify(
+  /**
+   * The original JSON schema to be modified.
+   */
+  originalSchema: JSONSchemaObjectType,
+  /**
+   * The configuration object containing the fields and allFields properties.
+   */
+  config?: MutationsConfig
+);

package/package.json

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

package/src/tests/modify.test.js

@@ -0,0 +1,300 @@
+import { modify } from '../modify';
+
+const schemaPet = {
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    has_pet: {
+      title: 'Has Pet',
+      description: 'Do you have a pet?',
+      oneOf: [
+        {
+          title: 'Yes',
+          const: 'yes',
+        },
+        {
+          title: 'No',
+          const: 'no',
+        },
+      ],
+      'x-jsf-presentation': {
+        inputType: 'radio',
+      },
+      type: 'string',
+    },
+    pet_name: {
+      title: "Pet's name",
+      description: "What's your pet's name?",
+      'x-jsf-presentation': {
+        inputType: 'text',
+      },
+      type: 'string',
+    },
+    pet_age: {
+      title: "Pet's age in months",
+      maximum: 24,
+      'x-jsf-presentation': {
+        inputType: 'number',
+      },
+      'x-jsf-errorMessage': {
+        maximum: 'Your pet cannot be older than 24 months.',
+      },
+      type: 'integer',
+    },
+    pet_fat: {
+      title: 'Pet fat percentage',
+      'x-jsf-presentation': {
+        inputType: 'number',
+        percentage: true,
+      },
+      type: 'integer',
+    },
+    pet_address: {
+      properties: {
+        street: {
+          title: 'Street',
+        },
+      },
+    },
+  },
+  required: ['has_pet'],
+  'x-jsf-order': ['has_pet', 'pet_name'],
+  allOf: [
+    {
+      id: 'pet_conditional_id',
+      if: {
+        properties: {
+          has_pet: {
+            const: 'yes',
+          },
+        },
+        required: ['has_pet'],
+      },
+      then: {
+        required: ['pet_name', 'pet_age', 'pet_fat'],
+      },
+      else: {
+        properties: {
+          pet_name: false,
+          pet_age: false,
+          pet_fat: false,
+        },
+      },
+    },
+  ],
+};
+
+const schemaAddress = {
+  properties: {
+    address: {
+      properties: {
+        street: {
+          title: 'Street',
+        },
+        number: {
+          title: 'Number',
+        },
+        city: {
+          title: 'City',
+        },
+      },
+    },
+  },
+};
+
+describe('modify() - basic mutations', () => {
+  it('replace base field', () => {
+    const result = modify(schemaPet, {
+      fields: {
+        pet_name: {
+          title: 'Your pet name',
+        },
+        has_pet: (fieldAttrs) => {
+          const options = fieldAttrs.oneOf?.map(({ title }) => title).join(' or ') || '';
+          return {
+            title: 'Pet owner',
+            description: `Do you own a pet? ${options}?`, // "Do you own a pet? Yes or No?"
+          };
+        },
+      },
+    });
+
+    expect(result).toMatchObject({
+      properties: {
+        pet_name: {
+          title: 'Your pet name',
+        },
+        has_pet: {
+          title: 'Pet owner',
+          description: 'Do you own a pet? Yes or No?',
+        },
+      },
+    });
+  });
+
+  it('replace nested field', () => {
+    const result = modify(schemaAddress, {
+      fields: {
+        'address.street': {
+          title: 'Street name',
+        },
+        'address.city': () => ({
+          title: 'City name',
+        }),
+        address: () => {
+          return {
+            properties: {
+              number: { title: 'Door number' },
+            },
+          };
+        },
+        // TODO: write test to nested field
+      },
+    });
+
+    expect(result).toMatchObject({
+      properties: {
+        address: {
+          properties: {
+            street: {
+              title: 'Street name',
+            },
+            number: {
+              title: 'Door number',
+            },
+            city: {
+              title: 'City name',
+            },
+          },
+        },
+      },
+    });
+  });
+
+  it('replace all fields', () => {
+    const result = modify(schemaPet, {
+      allFields: (fieldName, fieldAttrs) => {
+        const { inputType, percentage } = fieldAttrs?.['x-jsf-presentation'] || {};
+
+        if (inputType === 'number' && percentage === true) {
+          return {
+            styleDecimals: 2,
+          };
+        }
+
+        return {
+          dataFoo: 'abc',
+        };
+      },
+    });
+
+    expect(result).toMatchObject({
+      properties: {
+        has_pet: {
+          dataFoo: 'abc',
+        },
+        pet_name: {
+          dataFoo: 'abc',
+        },
+        pet_age: {
+          dataFoo: 'abc',
+        },
+        pet_fat: {
+          styleDecimals: 2,
+        },
+        pet_address: {
+          properties: {
+            street: {
+              dataFoo: 'abc',
+            },
+          },
+        },
+      },
+    });
+  });
+
+  it('replace field options (radio/select)', () => {
+    const result = modify(schemaPet, {
+      fields: {
+        has_pet: (fieldAttrs) => {
+          const labelsMap = {
+            yes: 'Yes, I have',
+          };
+
+          return {
+            oneOf: fieldAttrs.oneOf.map((option) => {
+              const customTitle = labelsMap[option.const];
+              if (!customTitle) {
+                // TODO - test this
+                // console.error('The option is not handled.');
+                return option;
+              }
+              return {
+                ...option,
+                title: customTitle,
+              };
+            }),
+          };
+        },
+      },
+    });
+
+    expect(result).toMatchObject({
+      properties: {
+        has_pet: {
+          oneOf: [
+            {
+              title: 'Yes, I have',
+              const: 'yes',
+            },
+            {
+              title: 'No',
+              const: 'no',
+            },
+          ],
+        },
+      },
+    });
+  });
+
+  it('error message', () => {
+    const result = modify(schemaPet, {
+      fields: {
+        pet_age: (fieldAttrs) => {
+          return {
+            errorMessage: {
+              minimum: `We only accept pets up to ${fieldAttrs.maximum} months old.`,
+              required: 'We need to know your pet name.',
+            },
+          };
+        },
+        'pet_address.street': {
+          errorMessage: {
+            required: 'Your pet cannot live in the street.',
+          },
+        },
+      },
+      // ...
+    });
+
+    expect(result).toMatchObject({
+      properties: {
+        pet_age: {
+          'x-jsf-errorMessage': {
+            minimum: `We only accept pets up to 24 months old.`,
+            required: 'We need to know your pet name.',
+          },
+        },
+        pet_address: {
+          properties: {
+            street: {
+              'x-jsf-errorMessage': {
+                required: 'Your pet cannot live in the street.',
+              },
+            },
+          },
+        },
+      },
+    });
+  });
+});