Schema-JSON-Form-atter

Schema JSON Form-atter its a library that's able to build, standarize, and schematize forms facing to its storage and validation. Build a FormSchema anyway you want, statically or with a CMS. Convert it to an storable object and store it the way you want. Convert it to a validation schema the way you want with the library you want (native support for yup) and validate the payload from the form that you created. On the other side get a JSON from anywhere, then turn it to a FormSchema and map it the way you want to UI Components.

How to install

• npm

npm install schema-json-form-atter

• yarn

yarn add schema-json-form-atter

• pnpm

pnpm add schema-json-form-atter

Table of Contents

• Fragments
  • Examples
    • toObject(): JsonObject
    • static fromJSON(obj: JsonObject, fromJSONParser?: FromJSONParser): Fragment
  • InputFragment
    • Example
  • BlockFragment
    • Example
  • Defining new Fragments
  • FromJSONParser
• Validations
• SchemaTransformer
  • public addTransformer(type: string, transformer: (validation: InputValidation, currentSchema: T) => T):void
  • public addTypeMapper(type: string, mapper: () => T):void
  • yup
  • Adding other validation libraries
• FormSchema
  • yup
  • Adding other validation libraries

Fragments

Fragments are the base of the Form-atter. Every Fragment should be in some point mapped to an UI Component some examples:

Examples

const inputFragment = new InputFragment('INPUT_TEXT','test-input-name','string',[
  {
    type: 'VALIDATION_REQUIRED',
    msg: 'This field is required'
  }
  //some validations
],{
  defaultValue: 'default',
  placeholder: 'Test',
  //some other custom props that you want to define
})

//this input fragment represents an Input component with
//custom props that can be mapped to a UI element and schema validation object.

const blockFragment = new BlockFragment(
  'BLOCK_ROW','test-row',
  [inputFragment] /*Array filled with childrens*/,
  undefined /*Some custom validation*/
)

toObject(): JsonObject

Serialize the class to JSON compatible object.

static fromJSON(obj: JsonObject, fromJSONParser?: FromJSONParser): Fragment

Parses incoming JSON to a new Fragment.

InputFragment

An InputFragment its a special Fragment that stands for input component in forms. This Fragments will also be used to generate the form schema. In case you need there's the options property to pass special options related to UI or behavior such the following:

• placeholder
• default value
• label
• options for select
• loadOptions service with keywords

Some validations can be added to the Input Fragment.

Example

const inputFragment = new InputFragment('INPUT_TEXT','test-input-name','string',[
  {
    type: 'VALIDATION_REQUIRED',
    msg: 'This field is required'
  }
  //some validations
],{
  defaultValue: 'default',
  placeholder: 'Test',
  //some other custom props that you want to define
})

//this input fragment represents an Input component with
//custom props that can be mapped to a UI element and schema validation object.

BlockFragment

A BlockFragment it's an all purpose Fragment that it's intended to be mapped to whatever you want. It can be used as layout passing fields prop to render childrens of a block element.

Example

const blockFragment = new BlockFragment(
  'BLOCK_ROW','test-row',
  [inputFragment] /*Array filled with childrens*/,
  undefined /*Some custom validation*/
)

Defining new Fragments

To define a new fragment you should implement a new class that inherits class Fragment. Instead of definig a new class for UI components use BlockFragment. A new Fragment that can be defined is for Example MetaFragment, that stores in some way meta info about the form or the parent BlockFragment component.

FromJSONParser

A FromJSONParser its an object that stands to get the way any Fragment-like class is parsed from JSON. It's defined a FromJSONParser by default defaultFromJSONParser .

Validations

Some custom validations are defined by default but any new validation can be casted from somthing like:

const validation = {
  type: 'CUSTOM_VALIDATION_{test}',
  options:{
    //anything can be here
  }
}

Anything can be used as a validation as long as you add a way to handle it later.

SchemaTransformer

A SchemaTransformer it's an object intended to convert an Input to a Validation-like structure. It have a typeMapper that converts an input type to a base validation-like object withot any more restrictions than the type itself. It also have a validationTransformer that apply each validation to a validation-like object and return another object with the current validation applied.

public addTransformer(type: string, transformer: (validation: InputValidation, currentSchema: T) => T):void

Add a transformer to the validationTransformer

public addTypeMapper(type: string, mapper: () => T):void

Add a type to the typeMapper

yup

By default the Form-atter is integrated with yup for validation. Simply call

const transformer = YupSchemaTransformer()

Adding other validation libraries

If you want to integrate a new library for validation for example Joi. Just create a new TypeMapper and a new ValidationTransformer and create a new instance of SchemaTransformer using them.

FormSchema

A FormSchema is the main form component. It have fields for composing the form.

{
  "_id": "5a9b1b9e3d1e86653a79b1b9",
  "name": "Sample Form",
  "options": {
    "autoSubmit": true,
    "toLink": true
  },
  "fields": [
    {
      "_id": "1",
      "name": "email",
      "type": "INPUT_TEXT",
      "validation":[
        {
          "type": "VALIDATION_EMAIL",
          "msg": "Should be an email"
        }
      ],
      "dataType": "string",
      "options":{
        "placeholder": "Email",
        "label": "Email",
        "helperText": "please enter your email"
      },
      "excludeFromValidation": false,
      "FRAGMENT_TYPE": "INPUT"
    },
    {
      "_id": "2",
      "name": "age",
      "type": "INPUT_NUMBER",
      "validation":[
        {
          "type": "VALIDATION_MIN",
          "msg": "Should have at least 0 years",
          "value": 0
        },
        {
          "type": "VALIDATION_MAX",
          "value": 100,
          "msg": "Are you a human?"
        }
      ],
      "dataType": "number",
      "options":{
        "defaultValue": 18,
        "placeholder": "Age",
        "label": "Age"
      },
      "excludeFromValidation": false,
      "FRAGMENT_TYPE": "INPUT"
    }
  ]
}

Call FormSchema.fromJSON(json) to create a form from an incoming JSON-like object. Also can be serialized to an object calling form.toObject(). Calling form.toSchema(transformer) transform the form into a Validation-like object.

yup

By default the Form-atter is integrated with yup for validation. Simply call

const formSchema = FormYupSchema(...)
const schema = formSchema.toSchema()

Adding other validation libraries

If you want to integrate a new library for validation for example Joi. Just create a new FormSchema class that inherit from FormSchema and call it using previously defined SchemaTransformer while overriding methods.