@remoteoss/json-schema-form 0.1.1-dev.20230619163824 → 0.3.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.20230619163824",
+  "version": "0.3.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"

package/src/tests/createHeadlessForm.test.js

@@ -16,6 +16,7 @@ import {
   schemaInputTypeSelectMultiple,
   schemaInputTypeSelectMultipleOptional,
   schemaInputTypeNumber,
+  schemaInputTypeNumberZeroMaximum,
   schemaInputTypeDate,
   schemaInputTypeEmail,
   schemaInputWithStatement,
@@ -435,10 +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(fieldValidator.isValidSync('CI007')).toBe(true);
+      expect(fieldValidator.isValidSync(true)).toBe(false);
+      expect(fieldValidator.isValidSync(1)).toBe(false);
+      expect(fieldValidator.isValidSync(0)).toBe(false);
 
       expect(handleValidation({ id_number: 1 }).formErrors).toEqual({
         id_number: 'id_number must be a `string` type, but the final value was: `1`.',
@@ -1843,6 +1844,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', () => {

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?',