@remoteoss/json-schema-form 0.11.4-beta.0 → 0.11.5-beta.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+#### 0.11.5-beta.0 (2024-08-22)
+
+##### Bug Fixes
+
+* **validation:**  Validate null field type correctly ([#91](https://github.com/remoteoss/json-schema-form/pull/91)) ([1cb8b61f](https://github.com/remoteoss/json-schema-form/commit/1cb8b61fec06d851832f9e76b3156d6f574b5d41))
+* **files:** accept object value with `name` property ([#91](https://github.com/remoteoss/json-schema-form/pull/91)) ([1cb8b61f](https://github.com/remoteoss/json-schema-form/commit/1cb8b61fec06d851832f9e76b3156d6f574b5d41))
+
+
 #### 0.11.4-beta.0 (2024-08-20)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.4-beta.0
- Generated: Tue, 20 Aug 2024 17:17:21 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.5-beta.0
+ Generated: Thu, 22 Aug 2024 09:27:45 GMT
 
  MIT License
 
@@ -553,7 +553,12 @@ var yupSchemas = {
   multiple: {
     select: (0, import_yup.array)().nullable(),
     "group-array": (0, import_yup.array)().nullable()
-  }
+  },
+  null: (0, import_yup.mixed)().typeError("The value must be null").test(
+    "matchesNullValue",
+    ({ value }) => `The value ${JSON.stringify(value)} is not valid.`,
+    (value) => value === void 0 || value === null
+  )
 };
 var yupSchemasToJsonTypes = {
   string: yupSchemas.text,
@@ -562,7 +567,7 @@ var yupSchemasToJsonTypes = {
   object: yupSchemas.fieldset,
   array: yupSchemas.multiple.select,
   boolean: yupSchemas.checkboxBool,
-  null: import_noop.default
+  null: yupSchemas.null
 };
 function getRequiredErrorMessage(inputType, { inlineError, configError }) {
   if (inlineError)
@@ -668,24 +673,26 @@ function buildYupSchema(field, config, logic) {
       () => errorMessage.pattern ?? errorMessageFromConfig.pattern ?? `Must have a valid format. E.g. ${randomPlaceholder}`
     );
   }
-  function isFile(files) {
-    return Array.isArray(files) ? files.every((file) => file instanceof File) : files instanceof File;
+  function isValidFileInput(files) {
+    return files === void 0 || files === null || files.every(
+      (file) => file instanceof File || Object.prototype.hasOwnProperty.call(file, "name")
+    );
   }
   function withFile(yupSchema) {
-    return yupSchema.test("isValidFile", "Not a valid file.", isFile);
+    return yupSchema.test("isValidFile", "Not a valid file.", isValidFileInput);
   }
   function withMaxFileSize(yupSchema) {
     return yupSchema.test(
       "isValidFileSize",
       errorMessage.maxFileSize ?? errorMessageFromConfig.maxFileSize ?? `File size too large. The limit is ${convertKbBytesToMB(propertyFields.maxFileSize)} MB.`,
-      (files) => isFile(files) && !files?.some((file) => convertBytesToKB(file.size) > propertyFields.maxFileSize)
+      (files) => isValidFileInput(files) && !files?.some((file) => convertBytesToKB(file.size) > propertyFields.maxFileSize)
     );
   }
   function withFileFormat(yupSchema) {
     return yupSchema.test(
       "isSupportedFormat",
       errorMessage.accept ?? errorMessageFromConfig.accept ?? `Unsupported file format. The acceptable formats are ${propertyFields.accept}.`,
-      (files) => isFile(files) && files.length > 0 ? files.some((file) => {
+      (files) => isValidFileInput(files) && files?.length > 0 ? files.some((file) => {
         const fileType = file.name.split(".").pop();
         return propertyFields.accept.includes(fileType.toLowerCase());
       }) : true
@@ -740,12 +747,13 @@ function buildYupSchema(field, config, logic) {
     validators[0] = () => withBaseSchema().of(buildGroupArraySchema());
   } else if (inputType === supportedTypes.FIELDSET) {
     validators[0] = () => withBaseSchema().shape(buildFieldSetSchema(propertyFields.fields));
-  } else if (inputType === supportedTypes.FILE) {
-    validators.push(withFile);
   }
   if (propertyFields.required) {
     validators.push(withRequired);
   }
+  if (inputType === supportedTypes.FILE) {
+    validators.push(withFile);
+  }
   if (typeof propertyFields.minimum !== "undefined") {
     validators.push(withMin);
   }

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.4-beta.0
- Generated: Tue, 20 Aug 2024 17:17:21 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.5-beta.0
+ Generated: Thu, 22 Aug 2024 09:27:45 GMT
 
  MIT License
 
@@ -516,7 +516,12 @@ var yupSchemas = {
   multiple: {
     select: array().nullable(),
     "group-array": array().nullable()
-  }
+  },
+  null: mixed().typeError("The value must be null").test(
+    "matchesNullValue",
+    ({ value }) => `The value ${JSON.stringify(value)} is not valid.`,
+    (value) => value === void 0 || value === null
+  )
 };
 var yupSchemasToJsonTypes = {
   string: yupSchemas.text,
@@ -525,7 +530,7 @@ var yupSchemasToJsonTypes = {
   object: yupSchemas.fieldset,
   array: yupSchemas.multiple.select,
   boolean: yupSchemas.checkboxBool,
-  null: noop
+  null: yupSchemas.null
 };
 function getRequiredErrorMessage(inputType, { inlineError, configError }) {
   if (inlineError)
@@ -631,24 +636,26 @@ function buildYupSchema(field, config, logic) {
       () => errorMessage.pattern ?? errorMessageFromConfig.pattern ?? `Must have a valid format. E.g. ${randomPlaceholder}`
     );
   }
-  function isFile(files) {
-    return Array.isArray(files) ? files.every((file) => file instanceof File) : files instanceof File;
+  function isValidFileInput(files) {
+    return files === void 0 || files === null || files.every(
+      (file) => file instanceof File || Object.prototype.hasOwnProperty.call(file, "name")
+    );
   }
   function withFile(yupSchema) {
-    return yupSchema.test("isValidFile", "Not a valid file.", isFile);
+    return yupSchema.test("isValidFile", "Not a valid file.", isValidFileInput);
   }
   function withMaxFileSize(yupSchema) {
     return yupSchema.test(
       "isValidFileSize",
       errorMessage.maxFileSize ?? errorMessageFromConfig.maxFileSize ?? `File size too large. The limit is ${convertKbBytesToMB(propertyFields.maxFileSize)} MB.`,
-      (files) => isFile(files) && !files?.some((file) => convertBytesToKB(file.size) > propertyFields.maxFileSize)
+      (files) => isValidFileInput(files) && !files?.some((file) => convertBytesToKB(file.size) > propertyFields.maxFileSize)
     );
   }
   function withFileFormat(yupSchema) {
     return yupSchema.test(
       "isSupportedFormat",
       errorMessage.accept ?? errorMessageFromConfig.accept ?? `Unsupported file format. The acceptable formats are ${propertyFields.accept}.`,
-      (files) => isFile(files) && files.length > 0 ? files.some((file) => {
+      (files) => isValidFileInput(files) && files?.length > 0 ? files.some((file) => {
         const fileType = file.name.split(".").pop();
         return propertyFields.accept.includes(fileType.toLowerCase());
       }) : true
@@ -703,12 +710,13 @@ function buildYupSchema(field, config, logic) {
     validators[0] = () => withBaseSchema().of(buildGroupArraySchema());
   } else if (inputType === supportedTypes.FIELDSET) {
     validators[0] = () => withBaseSchema().shape(buildFieldSetSchema(propertyFields.fields));
-  } else if (inputType === supportedTypes.FILE) {
-    validators.push(withFile);
   }
   if (propertyFields.required) {
     validators.push(withRequired);
   }
+  if (inputType === supportedTypes.FILE) {
+    validators.push(withFile);
+  }
   if (typeof propertyFields.minimum !== "undefined") {
     validators.push(withMin);
   }

package/dist/standalone.js

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2024 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.11.4-beta.0
- Generated: Tue, 20 Aug 2024 17:17:21 GMT
+ NPM Package: @remoteoss/json-schema-form@0.11.5-beta.0
+ Generated: Thu, 22 Aug 2024 09:27:45 GMT
 
  MIT License
 
@@ -12032,7 +12032,12 @@ var yupSchemas = {
   multiple: {
     select: array_default().nullable(),
     "group-array": array_default().nullable()
-  }
+  },
+  null: SchemaType().typeError("The value must be null").test(
+    "matchesNullValue",
+    ({ value }) => `The value ${JSON.stringify(value)} is not valid.`,
+    (value) => value === void 0 || value === null
+  )
 };
 var yupSchemasToJsonTypes = {
   string: yupSchemas.text,
@@ -12041,7 +12046,7 @@ var yupSchemasToJsonTypes = {
   object: yupSchemas.fieldset,
   array: yupSchemas.multiple.select,
   boolean: yupSchemas.checkboxBool,
-  null: import_noop.default
+  null: yupSchemas.null
 };
 function getRequiredErrorMessage(inputType, { inlineError, configError }) {
   if (inlineError)
@@ -12147,24 +12152,26 @@ function buildYupSchema(field, config, logic) {
       () => errorMessage.pattern ?? errorMessageFromConfig.pattern ?? `Must have a valid format. E.g. ${randomPlaceholder}`
     );
   }
-  function isFile(files) {
-    return Array.isArray(files) ? files.every((file) => file instanceof File) : files instanceof File;
+  function isValidFileInput(files) {
+    return files === void 0 || files === null || files.every(
+      (file) => file instanceof File || Object.prototype.hasOwnProperty.call(file, "name")
+    );
   }
   function withFile(yupSchema) {
-    return yupSchema.test("isValidFile", "Not a valid file.", isFile);
+    return yupSchema.test("isValidFile", "Not a valid file.", isValidFileInput);
   }
   function withMaxFileSize(yupSchema) {
     return yupSchema.test(
       "isValidFileSize",
       errorMessage.maxFileSize ?? errorMessageFromConfig.maxFileSize ?? `File size too large. The limit is ${convertKbBytesToMB(propertyFields.maxFileSize)} MB.`,
-      (files) => isFile(files) && !files?.some((file) => convertBytesToKB(file.size) > propertyFields.maxFileSize)
+      (files) => isValidFileInput(files) && !files?.some((file) => convertBytesToKB(file.size) > propertyFields.maxFileSize)
     );
   }
   function withFileFormat(yupSchema) {
     return yupSchema.test(
       "isSupportedFormat",
       errorMessage.accept ?? errorMessageFromConfig.accept ?? `Unsupported file format. The acceptable formats are ${propertyFields.accept}.`,
-      (files) => isFile(files) && files.length > 0 ? files.some((file) => {
+      (files) => isValidFileInput(files) && files?.length > 0 ? files.some((file) => {
         const fileType = file.name.split(".").pop();
         return propertyFields.accept.includes(fileType.toLowerCase());
       }) : true
@@ -12219,12 +12226,13 @@ function buildYupSchema(field, config, logic) {
     validators[0] = () => withBaseSchema().of(buildGroupArraySchema());
   } else if (inputType === supportedTypes.FIELDSET) {
     validators[0] = () => withBaseSchema().shape(buildFieldSetSchema(propertyFields.fields));
-  } else if (inputType === supportedTypes.FILE) {
-    validators.push(withFile);
   }
   if (propertyFields.required) {
     validators.push(withRequired);
   }
+  if (inputType === supportedTypes.FILE) {
+    validators.push(withFile);
+  }
   if (typeof propertyFields.minimum !== "undefined") {
     validators.push(withMin);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.11.4-beta.0",
+  "version": "0.11.5-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

@@ -29,6 +29,7 @@ import {
   schemaInputWithStatement,
   schemaInputTypeCheckbox,
   schemaInputTypeCheckboxBooleans,
+  schemaInputTypeNull,
   schemaWithOrderKeyword,
   schemaWithPositionDeprecated,
   schemaDynamicValidationConst,
@@ -60,6 +61,7 @@ import {
   schemaInputTypeNumberWithPercentage,
   schemaForErrorMessageSpecificity,
   jsfConfigForErrorMessageSpecificity,
+  schemaInputTypeFile,
 } from './helpers';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 
@@ -1578,6 +1580,48 @@ describe('createHeadlessForm', () => {
       });
     });
 
+    it('supports "null" field type', () => {
+      const { handleValidation, fields } = createHeadlessForm(schemaInputTypeNull, {
+        strictInputType: false,
+      });
+
+      expect(fields).toMatchObject([
+        {
+          name: 'name',
+          label: '(Optional) Name',
+          type: undefined,
+          jsonType: 'null',
+          schema: expect.any(Object),
+        },
+        {
+          name: 'username',
+          label: 'Username',
+          type: 'text',
+          jsonType: 'string',
+          inputType: 'text',
+          maxLength: 4,
+          schema: expect.any(Object),
+        },
+      ]);
+
+      // jsonType `null` fields do not have a corresponding inputType
+      expect(fields[0].inputType).toBeUndefined();
+
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(validateForm({})).toEqual({
+        username: 'Required field',
+      });
+
+      expect(validateForm({ username: 'hello', name: 'John' })).toEqual({
+        username: 'Please insert up to 4 characters',
+        name: 'The value "John" is not valid.',
+      });
+
+      expect(validateForm({ username: 'john' })).toBeUndefined();
+      expect(validateForm({ username: 'john', name: null })).toBeUndefined();
+    });
+
     it('supports oneOf pattern validation', () => {
       const result = createHeadlessForm(mockTelWithPattern);
 
@@ -2730,6 +2774,35 @@ describe('createHeadlessForm', () => {
           .validate(emptyFile)
       ).resolves.toEqual(emptyFile);
     });
+
+    it('it validates missing file correctly', () => {
+      const { handleValidation } = createHeadlessForm(
+        JSONSchemaBuilder().addInput({ fileInput: mockFileInput }).build()
+      );
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(validateForm({})).toBeUndefined();
+      expect(validateForm({ fileInput: null })).toBeUndefined();
+    });
+  });
+
+  describe('when a field file is required', () => {
+    it('it validates missing file correctly', () => {
+      const { handleValidation } = createHeadlessForm(schemaInputTypeFile);
+      const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+      expect(validateForm({})).toEqual({
+        a_file: 'Required field',
+      });
+
+      expect(
+        validateForm({
+          a_file: null,
+        })
+      ).toEqual({
+        a_file: 'Required field',
+      });
+    });
   });
 
   describe('when a field has accepted extensions', () => {
@@ -2789,8 +2862,39 @@ describe('createHeadlessForm', () => {
             .validate({ fileInput: [file] })
         ).resolves.toEqual(assertObj));
     });
+
     describe('and file is not instance of a File', () => {
-      it('should throw an error', async () =>
+      it('accepts if file object has name property', async () => {
+        expect(
+          object()
+            .shape({
+              fileInput: fields[0].schema,
+            })
+            .validate({ fileInput: [{ name: 'foo.pdf' }] })
+        ).resolves.toEqual({ fileInput: [{ name: 'foo.pdf' }] });
+      });
+
+      it('should validate format', async () =>
+        expect(
+          object()
+            .shape({
+              fileInput: fields[0].schema,
+            })
+            .validate({ fileInput: [{ name: 'foo.txt' }] })
+        ).rejects.toMatchObject({
+          errors: ['Unsupported file format. The acceptable formats are .png,.jpg,.jpeg,.pdf.'],
+        }));
+
+      it('should validate max size', async () =>
+        expect(
+          object()
+            .shape({
+              fileInput: fields[0].schema,
+            })
+            .validate({ fileInput: [{ name: 'foo.txt', size: 1024 * 1024 * 1024 }] })
+        ).rejects.toMatchObject({ errors: ['File size too large. The limit is 20 MB.'] }));
+
+      it('throw an error if invalid file object', async () =>
         expect(
           object()
             .shape({

package/src/tests/helpers.js

@@ -782,6 +782,25 @@ export const schemaInputWithStatement = {
   },
 };
 
+export const schemaHiddenInputWithStatement = {
+  properties: {
+    a_field_statement: {
+      type: 'null',
+      title: 'Company statement',
+      'x-jsf-presentation': {
+        inputType: 'hidden',
+        statement: {
+          title: 'Important statement',
+          description:
+            "This statement message will be shown at all times, irrespective of this field's visibility.",
+          inputType: 'statement',
+          severity: 'warning',
+        },
+      },
+    },
+  },
+};
+
 export const schemaInputWithExtra = {
   properties: {
     bonus: {
@@ -1141,6 +1160,23 @@ export const schemaInputTypeCheckboxBooleans = JSONSchemaBuilder()
   .setRequiredFields(['boolean_required'])
   .build();
 
+export const schemaInputTypeNull = {
+  additionalProperties: false,
+  type: 'object',
+  properties: {
+    name: {
+      type: 'null',
+      title: '(Optional) Name',
+    },
+    username: {
+      type: 'string',
+      title: 'Username',
+      maxLength: 4,
+    },
+  },
+  required: ['username'],
+};
+
 export const schemaCustomErrorMessageByField = {
   properties: {
     tabs: {