@remoteoss/json-schema-form 0.11.1-dev.20240726080523 → 0.11.2-beta.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+#### 0.11.2-beta.0 (2024-07-30)
+
+##### Bug Fixes
+
+- **modify:**
+
+  - Support x-jsf shorthands in all methods, fix TS declarations; ([#85](https://github.com/remoteoss/json-schema-form/pull/85)) ([9a87c19b](https://github.com/remoteoss/json-schema-form/commit/9a87c19b6d373a8f660dd24b20a48725f3dbe8d0))
+
+- **createHeadlessForm:**
+
+  - mark createHeadlessForm config.customProperties as deprecated ([#85](https://github.com/remoteoss/json-schema-form/pull/85)) ([9a87c19b](https://github.com/remoteoss/json-schema-form/commit/9a87c19b6d373a8f660dd24b20a48725f3dbe8d0))
+  - support custom attributes as functions (do not execute them) ([#86](https://github.com/remoteoss/json-schema-form/pull/86)) ([3674fc87](https://github.com/remoteoss/json-schema-form/commit/3674fc87d44df44a5ba9b13b40465c2ccda448ca))
+
+#### 0.11.1-beta.0 (2024-07-26)
+
+##### Chores
+
+- **modify:** Add missing Typescript declarations ([#84](https://github.com/remoteoss/json-schema-form/pull/84)) ([86b3af2a](https://github.com/remoteoss/json-schema-form/commit/86b3af2a31981718ad349ac8d08fbdce3aa86acf))
+
 #### 0.11.0-beta.0 (2024-07-25)
 
 ##### Breaking changes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.1-dev.20240726080523
- Generated: Fri, 26 Jul 2024 08:05:36 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.2-beta.0
+ Generated: Tue, 30 Jul 2024 12:00:17 GMT
 
  MIT License
 
@@ -1196,7 +1196,10 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
   }
   const updateAttributes = (fieldAttrs) => {
     Object.entries(fieldAttrs).forEach(([key, value]) => {
-      field[key] = typeof value === "function" ? value() : value;
+      field[key] = value;
+      if (key === "schema" && typeof value === "function") {
+        field[key] = value();
+      }
       if (key === "value") {
         const readOnlyPropertyWasUpdated = typeof fieldAttrs.readOnly !== "undefined";
         const isReadonlyByDefault = field.readOnly;
@@ -1917,7 +1920,7 @@ function rewriteAllFields(schema, configCallback, context) {
       (0, import_get4.default)(schema.properties, fieldName),
       {
         ...fieldAttrs,
-        ...configCallback(fullName, fieldAttrs)
+        ...standardizeAttrs(configCallback(fullName, fieldAttrs))
       },
       mergeReplaceArray
     );

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.1-dev.20240726080523
- Generated: Fri, 26 Jul 2024 08:05:36 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.2-beta.0
+ Generated: Tue, 30 Jul 2024 12:00:17 GMT
 
  MIT License
 
@@ -1159,7 +1159,10 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
   }
   const updateAttributes = (fieldAttrs) => {
     Object.entries(fieldAttrs).forEach(([key, value]) => {
-      field[key] = typeof value === "function" ? value() : value;
+      field[key] = value;
+      if (key === "schema" && typeof value === "function") {
+        field[key] = value();
+      }
       if (key === "value") {
         const readOnlyPropertyWasUpdated = typeof fieldAttrs.readOnly !== "undefined";
         const isReadonlyByDefault = field.readOnly;
@@ -1880,7 +1883,7 @@ function rewriteAllFields(schema, configCallback, context) {
       get4(schema.properties, fieldName),
       {
         ...fieldAttrs,
-        ...configCallback(fullName, fieldAttrs)
+        ...standardizeAttrs(configCallback(fullName, fieldAttrs))
       },
       mergeReplaceArray
     );

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.1-dev.20240726080523
- Generated: Fri, 26 Jul 2024 08:05:36 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.2-beta.0
+ Generated: Tue, 30 Jul 2024 12:00:17 GMT
 
  MIT License
 
@@ -12675,7 +12675,10 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
   }
   const updateAttributes = (fieldAttrs) => {
     Object.entries(fieldAttrs).forEach(([key, value]) => {
-      field[key] = typeof value === "function" ? value() : value;
+      field[key] = value;
+      if (key === "schema" && typeof value === "function") {
+        field[key] = value();
+      }
       if (key === "value") {
         const readOnlyPropertyWasUpdated = typeof fieldAttrs.readOnly !== "undefined";
         const isReadonlyByDefault = field.readOnly;
@@ -13396,7 +13399,7 @@ function rewriteAllFields(schema, configCallback, context) {
       (0, import_get5.default)(schema.properties, fieldName),
       {
         ...fieldAttrs,
-        ...configCallback(fullName, fieldAttrs)
+        ...standardizeAttrs(configCallback(fullName, fieldAttrs))
       },
       mergeReplaceArray
     );

package/json-schema-form.d.ts

@@ -1,5 +1,3 @@
-import { WARNING_TYPES } from './src/modify';
-
 /**
  * Shorthand to lookup for keys with `x-jsf-*` preffix.
  */
@@ -108,28 +106,26 @@ type JSONSchemaObjectType = Record<string, unknown>;
 type FieldName = string;
 type FieldAttrs = Record<string, unknown>;
 
-type FieldAttrsCallbackFn = (fieldName: FieldName, fieldAttrs: FieldAttrs) => FieldAttrs;
-
-type ModConfigProperties = Record<FieldName, FieldAttrs | FieldAttrsCallbackFn>;
-
 type ModifyConfig = {
   /**
    * An object with the fields to be modified with the returned attributes.
    */
-  fields?: ModConfigProperties;
+  fields?: Record<FieldName, FieldAttrs | ((fieldAttrs: FieldAttrs) => FieldAttrs)>;
   /**
    * A callback function that runs through all fields, to modify them with the returned attributes.
    */
-  allFields?: FieldAttrsCallbackFn;
+  allFields?: (fieldName: FieldName, fieldAttrs: FieldAttrs) => FieldAttrs;
   /**
    * An object of new fields to be created with the new attributes.
    */
-  create?: ModConfigProperties;
+  create?: Record<FieldName, FieldAttrs>;
   /**
    * An array of the fields to keep, removing the remaining fields.
    */
   pick?: FieldName[];
-  /* An array of fieldNames with the new order. Can be an object or callback function */
+  /**
+   * An array of fieldNames with the new order. Can be an object or callback function
+   * */
   orderRoot?: FieldName[] | ((originalOrder: FieldName[]) => FieldName[]);
   /**
    * Mutes any logs or warnings from the library.
@@ -137,15 +133,23 @@ type ModifyConfig = {
   muteLogging?: boolean;
 };
 
-const warningTypes = WARNING_TYPES satisfies Record<string, string>;
-
-type WARNING_TYPES = keyof typeof warningTypes;
+type WarningType =
+  | 'FIELD_TO_CHANGE_NOT_FOUND'
+  | 'ORDER_MISSING_FIELDS'
+  | 'FIELD_TO_CREATE_EXISTS'
+  | 'PICK_MISSED_FIELD';
 
-type Warnings = {
+type Warning = {
   message: string;
-  type: WARNING_TYPES;
+  type: WarningType;
   meta?: Record<string, unknown>;
-}[];
+};
+
+type ModifyOutput = {
+  schema: JSONSchemaObjectType;
+  warnings: Warning[];
+};
+
 /**
  * Generates the Headless form based on the provided JSON schema
  */
@@ -156,18 +160,16 @@ export function createHeadlessForm(
 ): HeadlessFormOutput;
 
 /**
- * Modifies the JSON schema based on the provided configuration.
+ * Returns a new JSON Schema modified based a given configuration.
+ * This does not mutate the original JSON Schema.
  */
 export function modify(
   /**
-   * The original JSON schema to be modified.
+   * The original JSON schema as base to the modifications.
    */
   originalSchema: JSONSchemaObjectType,
   /**
-   * The configuration object containing the fields and allFields properties.
+   * The configuration object to create a new JSON Schema based on the originalSchema.
    */
   config?: ModifyConfig
-): {
-  schema: JSONSchemaObjectType;
-  warnings: Warnings;
-};
+): ModifyOutput;

package/package.json

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

@@ -2177,6 +2177,75 @@ describe('createHeadlessForm', () => {
       });
     });
 
+    it('pass custom attributes as function', () => {
+      function FakeComponent(props) {
+        const { label, description } = props;
+        return `A React component with ${label} and ${description}`;
+      }
+      // Any custom attributes must be inside "x-jsf-presentation"
+      const { fields, handleValidation } = createHeadlessForm({
+        properties: {
+          field_a: {
+            title: 'Field A',
+            'x-jsf-presentation': {
+              inputType: 'text',
+              MyComponent: FakeComponent,
+            },
+          },
+          field_b: {
+            title: 'Field B',
+            'x-jsf-presentation': {
+              inputType: 'text',
+              MyComponent: FakeComponent,
+            },
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: {
+                field_a: { const: 'yes' },
+              },
+              required: ['field_a'],
+            },
+            then: {
+              required: ['field_b'],
+            },
+          },
+        ],
+      });
+
+      const fieldA = getField(fields, 'field_a');
+      expect(fieldA).toMatchObject({
+        label: 'Field A',
+        MyComponent: expect.any(Function),
+      });
+
+      const fieldB = getField(fields, 'field_b');
+      expect(fieldB).toMatchObject({
+        label: 'Field B',
+        required: false,
+        MyComponent: expect.any(Function),
+      });
+
+      const fakeProps = { label: 'Field B', description: 'fake description' };
+      expect(fieldB.MyComponent(fakeProps)).toBe(
+        'A React component with Field B and fake description'
+      );
+
+      // Ensure "MyComponent" attribute still exsits after a validation cycle.
+      // This covers the updateField(). Check PR for more context.
+      handleValidation({ field_a: 'yes' });
+
+      expect(getField(fields, 'field_a')).toMatchObject({
+        MyComponent: expect.any(Function),
+      });
+      expect(getField(fields, 'field_b')).toMatchObject({
+        required: true,
+        MyComponent: expect.any(Function),
+      });
+    });
+
     it('passes scopedJsonSchema to each field', () => {
       const { fields } = createHeadlessForm(schemaWithoutInputTypes, {
         strictInputType: false,

package/src/tests/modify.test.js

@@ -358,40 +358,94 @@ describe('modify() - basic mutations', () => {
       },
     });
   });
+});
 
-  it('customize x-jsf-errorMessage (shorthand)', () => {
-    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.',
+describe('supporting shorthands', () => {
+  const invoiceSchema = {
+    properties: {
+      title: {
+        title: 'Invoice title',
+        'x-jsf-presentation': {
+          inputType: 'text',
+        },
+        'x-jsf-errorMessage': {
+          required: 'Cannot be empty.',
+        },
+        type: 'string',
+      },
+      total: {
+        title: 'Invoice amount',
+        'x-jsf-presentation': {
+          inputType: 'money',
+        },
+        type: 'number',
+      },
+      taxes: {
+        title: 'Taxes details',
+        properties: {
+          country: {
+            title: 'Country',
+            'x-jsf-presentation': {
+              inputType: 'country',
             },
-          };
+            type: 'string',
+          },
+          percentage: {
+            title: 'Percentage',
+            'x-jsf-presentation': {
+              inputType: 'number',
+            },
+          },
+          type: 'integer',
         },
-        'pet_address.street': {
+      },
+    },
+    required: ['title'],
+  };
+
+  it('basic support for x-jsf-presentation and x-jsf-errorMessage in config.fields', () => {
+    const result = modify(invoiceSchema, {
+      fields: {
+        title: {
           errorMessage: {
-            required: 'Your pet cannot live in the street.',
+            maxLength: 'Must be shorter.',
+          },
+          presentation: {
+            dataFoo: 123,
+          },
+        },
+        'taxes.country': {
+          errorMessage: {
+            required: 'The country is required.',
+          },
+          presentation: {
+            flags: true,
           },
         },
       },
-      // ...
     });
 
+    // Assert all the other propreties are kept
+    expect(result.schema).toMatchObject(invoiceSchema);
+
     expect(result.schema).toMatchObject({
       properties: {
-        pet_age: {
+        title: {
           'x-jsf-errorMessage': {
-            minimum: `We only accept pets up to 24 months old.`,
-            required: 'We need to know your pet name.',
+            maxLength: 'Must be shorter.',
+          },
+          'x-jsf-presentation': {
+            dataFoo: 123,
           },
         },
-        pet_address: {
+        taxes: {
           properties: {
-            street: {
+            country: {
               'x-jsf-errorMessage': {
-                required: 'Your pet cannot live in the street.',
+                required: 'The country is required.',
+              },
+              'x-jsf-presentation': {
+                flags: true,
               },
             },
           },
@@ -400,47 +454,90 @@ describe('modify() - basic mutations', () => {
     });
   });
 
-  it('customize x-jsf-presentation (shorthand)', () => {
-    const result = modify(schemaPet, {
-      fields: {
-        pet_age: () => {
-          return {
-            presentation: {
-              'data-foo': 123,
-            },
-          };
+  it('shorthands work in config.allFields', () => {
+    const result = modify(invoiceSchema, {
+      allFields: (fieldName, attrs) => ({
+        errorMessage: {
+          required: `${attrs.title} cannot be empty.`,
         },
-        'pet_address.street': {
-          presentation: {
-            'data-foo': 456,
-          },
+        presentation: {
+          dataName: fieldName,
         },
-      },
+      }),
     });
 
-    const originalPetAgePresentation = schemaPet.properties.pet_age['x-jsf-presentation'];
-    expect(originalPetAgePresentation).toBeDefined();
-
-    const originalPetStreetPresentation =
-      schemaPet.properties.pet_address.properties.street['x-jsf-presentation'];
-    expect(originalPetStreetPresentation).toBeDefined();
-
     expect(result.schema).toMatchObject({
       properties: {
-        pet_age: {
+        title: {
+          'x-jsf-errorMessage': {
+            required: 'Invoice title cannot be empty.',
+          },
           'x-jsf-presentation': {
-            ...originalPetAgePresentation,
-            'data-foo': 123,
+            dataName: 'title',
           },
         },
-        pet_address: {
+        total: {
+          'x-jsf-errorMessage': {
+            required: 'Invoice amount cannot be empty.',
+          },
+          'x-jsf-presentation': {
+            dataName: 'total',
+          },
+        },
+        taxes: {
+          'x-jsf-errorMessage': {
+            required: 'Taxes details cannot be empty.',
+          },
+          'x-jsf-presentation': {
+            dataName: 'taxes',
+          },
           properties: {
-            street: {
+            country: {
+              'x-jsf-errorMessage': {
+                required: 'Country cannot be empty.',
+              },
               'x-jsf-presentation': {
-                ...originalPetStreetPresentation,
-                'data-foo': 456,
+                dataName: 'taxes.country',
               },
             },
+            percentage: {
+              'x-jsf-errorMessage': {
+                required: 'Percentage cannot be empty.',
+              },
+              'x-jsf-presentation': {
+                dataName: 'taxes.percentage',
+              },
+            },
+          },
+        },
+      },
+    });
+  });
+
+  it('shorthands work in config.create', () => {
+    const result = modify(invoiceSchema, {
+      create: {
+        invoice_id: {
+          title: 'Invoice ID',
+          presentation: {
+            inputType: 'text',
+          },
+          errorMessage: {
+            pattern: 'Must have 5 characters.',
+          },
+        },
+      },
+    });
+
+    expect(result.schema).toMatchObject({
+      properties: {
+        invoice_id: {
+          title: 'Invoice ID',
+          'x-jsf-presentation': {
+            inputType: 'text',
+          },
+          'x-jsf-errorMessage': {
+            pattern: 'Must have 5 characters.',
           },
         },
       },