@remoteoss/json-schema-form 0.1.1-dev.20230616112349 → 0.2.0-beta.0

package/json-schema-form.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Shorthand to lookup for keys with `x-jsf-*` preffix.
+ */
+export function pickXKey(node: Object, key: 'presentation' | 'errorMessage'): Object | undefined;
+
+type ValidationTypes =
+  | 'type'
+  | 'minimum'
+  | 'maximum'
+  | 'minLength'
+  | 'maxLength'
+  | 'pattern'
+  | 'maxFileSize'
+  | 'accept'
+  | 'required';
+
+type JSFConfig = {
+  /**
+   * Initial json values to prefill the form fields.
+   * This influences the initial visibility of conditional fields.
+   */
+  initialValues?: Record<string, unknown>;
+  /**
+   * It inforces all json properties (fields) to have x-jsf-presentation.inputType.
+    @default true 
+  */
+  strictInputType?: boolean;
+  /**
+   * Customize the output of a given named Field.
+   * Useful if you want to enhance the UI/UX of a particular field.
+   * @example
+   * { has_pet: { "optionsDirection": "horizontal" } }
+   */
+  customProperties?: {
+    description?: (description: string, field: $TSFixMe) => string | string;
+    [key: string]: unknown;
+  };
+  /**
+   * Customize the config for each inputType
+   */
+  inputTypes?: {
+    /**
+     * Customize the error error message of this input type.
+     * @example
+     * { required: "This number is required." }
+     */
+    errorMessage?: Partial<Record<ValidationTypes, string>>;
+  };
+};
+type Fields = Record<string, unknown>[]; //TODO: Type the field based on the given JSON Schema properties.
+
+type $TSFixMe = any;
+
+/**
+ * Returns the Yup schema structure of given fields.
+ * These fields must be the same from
+ * const { fields } = createHeadlessForm()
+ */
+export function buildCompleteYupSchema(fields: Fields, config: JSFConfig): $TSFixMe; //TODO: We need to update Yup to 1.0 which supports TS.
+
+type HeadlessFormOutput = {
+  /**
+   * List of Fields. Each Field corresponds to a form input from the json schema.
+   * @example
+   * [
+      {
+        name: "has_pet",
+        label: "Has Pet",
+        options: [
+          { label: "Yes", value: "yes" },
+          { label: "No", value: "no" }
+        ],
+        required: true,
+        inputType: "radio",
+        jsonType: "string",
+        description: "Do you have a pet?",
+        errorMessage: {},
+        isVisible: true
+      },
+      {
+        type: "text",
+        label: "Pet's name",
+        description: "What's your pet's name?",
+        required: false,
+        inputType: "text",
+        jsonType: "string",
+        isVisible: false
+      }
+   * ]
+   */
+  fields: Fields;
+  /**
+   * Validates given values and returns the respective errors.
+   * @example
+   * const { formErrors } = handleValidation({ has_pet: "yes" });
+   * console.log(formErrors) // { pet_name: "Required field." }
+   */
+  handleValidation: (values: Record<string, unknown>) => {
+    yupError: $TSFixMe;
+    formErrors: $TSFixMe;
+  };
+  isError: boolean;
+  error?: Error;
+};
+
+type JSONSchemaObjectType = Record<string, unknown>;
+
+/**
+ * Generates the Headless form based on the provided JSON schema
+ */
+export function createHeadlessForm(
+  /** A JSON Schema of type object */
+  jsonSchema: JSONSchemaObjectType,
+  customConfig?: JSFConfig
+): HeadlessFormOutput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.1.1-dev.20230616112349",
+  "version": "0.2.0-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",
@@ -11,10 +11,12 @@
   },
   "main": "dist/index.cjs",
   "module": "dist/index.js",
+  "typings": "./json-schema-form.d.ts",
   "files": [
     "dist",
     "src/tests",
     "json-schema-form.schema.json",
+    "json-schema-form.d.ts",
     "README.md",
     "CHANGELOG.md",
     "LICENSE.md"
@@ -22,7 +24,6 @@
   "scripts": {
     "build": "node scripts/build.js",
     "test": "jest",
-    "test:watch": "jest --watchAll",
     "lint": "eslint \"src/**/*.{js,ts}\"",
     "format": "npm run format:prettier && npm run format:eslint",
     "prepare": "husky install",
@@ -47,7 +48,7 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "randexp": "^0.5.3",
-    "yup": "^0.30.0"
+    "yup": "^0.29.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.5",

package/src/tests/createHeadlessForm.test.js

@@ -16,6 +16,7 @@ import {
   schemaInputTypeSelectMultiple,
   schemaInputTypeSelectMultipleOptional,
   schemaInputTypeNumber,
+  schemaInputTypeNumberZeroMaximum,
   schemaInputTypeDate,
   schemaInputTypeEmail,
   schemaInputWithStatement,
@@ -419,7 +420,7 @@ describe('createHeadlessForm', () => {
 
   describe('field support', () => {
     it('support "text" field type', () => {
-      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeText);
+      const { fields } = createHeadlessForm(schemaInputTypeText);
 
       expect(fields[0]).toMatchObject({
         description: 'The number of your national identification (max 10 digits)',
@@ -435,14 +436,10 @@ describe('createHeadlessForm', () => {
       });
 
       const fieldValidator = fields[0].schema;
-      expect(fieldValidator.isValidSync('CI007', { strict: true })).toBe(true);
-      expect(fieldValidator.isValidSync(true, { strict: true })).toBe(false);
-      expect(fieldValidator.isValidSync(1, { strict: true })).toBe(false);
-      expect(fieldValidator.isValidSync(0, { strict: true })).toBe(false);
-
-      expect(handleValidation({ id_number: 1 }).formErrors).toEqual({
-        id_number: 'id_number must be a `string` type, but the final value was: `1`.',
-      });
+      expect(fieldValidator.isValidSync('CI007')).toBe(true);
+      expect(fieldValidator.isValidSync(true)).toBe(true); // @BUG RMT-446 - cannot be a bool
+      expect(fieldValidator.isValidSync(1)).toBe(true); // @BUG RMT-446 - cannot be a number
+      expect(fieldValidator.isValidSync(0)).toBe(true); // @BUG RMT-446 - cannot be a number
 
       expect(() => fieldValidator.validateSync('')).toThrowError('Required field');
     });
@@ -1843,6 +1840,19 @@ describe('createHeadlessForm', () => {
         ).resolves.toEqual(assertObj);
       });
     });
+    describe('and maximum is set to zero', () => {
+      it('shows the correct validation', () => {
+        const { handleValidation } = createHeadlessForm(schemaInputTypeNumberZeroMaximum);
+        const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+        expect(validateForm({ tabs: '0' })).toBeUndefined();
+        expect(validateForm({ tabs: '-10' })).toBeUndefined();
+
+        expect(validateForm({ tabs: 1 })).toEqual({
+          tabs: 'Must be smaller or equal to 0',
+        });
+      });
+    });
   });
 
   describe('when a field has a maxLength of 10', () => {
@@ -2317,7 +2327,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'no',
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
             },
             mandatory_group_array: 'no',
           })
@@ -2332,7 +2342,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
             },
             mandatory_group_array: 'no',
           })
@@ -2348,7 +2358,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
             },
             mandatory_group_array: 'yes',
             a_group_array: [{ full_name: 'adfs' }],
@@ -2359,7 +2369,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_tabs: 'yes',
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
               tabs: 2,
             },
             mandatory_group_array: 'no',
@@ -2450,7 +2460,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number'],
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
             },
           })
         ).toBeUndefined();
@@ -2459,7 +2469,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
             },
           })
         ).toEqual({
@@ -2472,7 +2482,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
               tabs: 2,
             },
           })
@@ -2487,7 +2497,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number'],
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
             },
           })
         ).toBeUndefined();
@@ -2496,7 +2506,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
             },
           })
         ).toEqual({
@@ -2509,7 +2519,7 @@ describe('createHeadlessForm', () => {
           validateForm({
             validate_fieldset: ['id_number', 'all'],
             a_fieldset: {
-              id_number: '123',
+              id_number: 123,
               tabs: 2,
             },
           })

package/src/tests/helpers.js

@@ -46,6 +46,21 @@ export const mockNumberInput = {
   type: 'number',
 };
 
+export const schemaInputTypeNumberZeroMaximum = {
+  properties: {
+    tabs: {
+      title: 'Tabs',
+      description: 'How many open tabs do you have?',
+      'x-jsf-presentation': {
+        inputType: 'number',
+      },
+      minimum: -100,
+      maximum: 0,
+      type: 'number',
+    },
+  },
+};
+
 export const mockNumberInputWithPercentage = {
   title: 'Shares',
   description: 'What % of shares do you own?',