mytabworks-utils

It is a library of utilities which can help to front-end

• Validator
  • Basic Usage
  • Extend Rules Usage
  • Customize Rule Usage
  • Collection Field Usage
  • [Rules]
    • Main
    • Extensions
  • [API]
    • instance.fails(): boolean
    • instance.errors(): Map
    • Validator.make(data: object, rules: object): instance
    • Validator.validate(recieved: string|array, rules: string, label: string): object
    • Validator.rulesExtend(rules: object): void
• DoneTypingEvent
  • Usage
  • [API]
    • DoneTypingEvent(handler: function): object
• License

Validator

it is use to validate the user form fields, before it submiting into the server. the validation style is inspired by Laravel Validator.

Validator Basic Usage

import { Validator } from "mytabworks-utils";

const result = Validator.validate("sample_sadas@", "required|email|min:10|max:20", "Email")
console.log(result) 
/*{ isInvalid: true, message: "The Email must be a valid email"}*/

Validator Extend Rules Usage

To prevent Validator to be expensive in payload. it is decided to remove the rules that is not often to use and make them extendables

note! rules must be tight without spaces note! validator is reusable, when rules are extended, it only need to be extended once

import { Validator } from "mytabworks-utils";
import { max_size, min_size } from "mytabworks-utils/extend/rules";

Validator.rulesExtend({ max_size, min_size }) // extending max_size and min_size

const file = document.querySelector(`input[name="file"]`)
const received = file.files /*imagine files name is photo.jpeg and have 1000kb size*/
const rules = "required|max:2|mimes:jpeg,jpg|max_size:3000"
const label = file.name
const result = Validate.validate(received, rules, label)
console.log(result) 
/*{ isInvalid: false, message: null }*/ 

Validator Customize Rule Usage

Validator rules is extandable which is custom rules are applicable.

import { Validator } from "mytabworks-utils";
import { required_if, same } from "mytabworks-utils/extend/rules";

const strong_password = {
    regexp: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).+$/g,
    exe(
        received, /*it is the value of the field it received*/
        first_param, /*rules:first_param*/
        second_param /*rules:first_param=second_param*/
    ) {
        /*first_param and second_param are not needed for this validation*/
        /*note! must return true when it is INVALID*/
        return !this.regexp.test(received)
    },
    message: "The :attribute must have 1 small letter, 1 capital letter, 1 number, and 1 special character"
    /*note! the :attribute is replace with the label of the form field you validate*/
    /*note! if you have first_param in your rules you must put the same name as your validation like :strong_password in the message*/
    /*note! if you have second_param you must put :third_party in the message*/
}

Validator.rulesExtend({ required_if, same, strong_password })

const pass = document.querySelector(`input[name="pass"]`)
const recieved = pass.value /*imagine value is Secretp@ssw0rd*/
const rules = "required|min:8|strong_password"
/*required
must have minimum of 8 characters 
customize strong_password*/

const label = "Password"
const result = validator.validate(received, rules, label)
console.log(result) /*it passed the rules so isInvalid will be false*/
/*result is { isInvalid: false, message: null }*/

const confirm = document.querySelector(`input[name="confirm"]`)
const c_recieved = confirm.value /*imagine value is "" */
const c_rules = "required_if:pass=.+|same:pass"
/*required_if - the [name="pass"] has a value of has content(.+)*/
/*same - value to the [name="pass"] */


const c_label = "Confirm"
const c_result = validator.validate(c_received, c_rules, c_label)
console.log(c_result)
/*{ isInvalid: true, message: "The Confirm field is required when pass is .+." }*/

/*To correct the message above, you must put a Alias(@) on the required_if "value" and "value of value"*/
const c_rules = "required_if:pass@Password=.+@contain value|same:pass@Password"
const c_result2 = validator.validate(c_received, c_rules, c_label)
console.log(c_result2)
/*{ isInvalid: true, message: "The Confirm field is required when Password is contain value." }*/

Validator Collection Field Usage

it can validate collections of form fields.

const forms = {
    first_name: "john",
    last_name: "doe",
    email: "johndoe@gmail",
    web: "mytabworks.com",
    items: ["90293", "23223", "23232"]
}

const rules = {
    first_name: { 
        label: "First Name", 
        rules: "required|alpha" 
    },
    last_name: { 
        label: "Last Name", 
        rules: "required|alpha|min:3" 
    },
    email: { 
        label: "E-mail", 
        rules: "required|email"
    },
    web: { 
        label: "Website", 
        rules: "url"
    }
}

const validator = Validator.make(forms, rules)

if(validator.fails()) {

    const message = validator.errors()
 
    document.getElementById("first_name_error").textContent =  message.has("first_name") ? message.get("first_name") : ""
    document.getElementById("last_name_error").textContent = message.has("last_name") ? message.get("last_name") : ""
    document.getElementById("email_error").textContent = message.has("email") ? message.get("email") : ""
    document.getElementById("web_error").textContent = message.has("web") ? message.get("web") : ""

    //OR
    let collect = "<ul>"
    message.forEach((message, name) => {
        // do something
        collect += `<li>${message}</li>`
    })
    collect += "</ul>"

    document.getElementById("errors").innerHTML = collect
}

Validator Main Rules

The main validation rules which is commonly use. |NAME |USE |DESCRIPTION| MESSAGE | |-------------|---------------------------|-------------|-------------| | required | required | it will require the form field to be filled| The :attribute field is required | | email | email | it will validate if the field contain a valid e-mail| The :attribute field must be valid email| | min | min:6 | it will validate the minumum character, number, checkbox is checked, select(multiple) is selected, file(multiple) is selected | The :attribute field must be atleast :min (character, items, files) | | max | max:12 | it will validate the maximum character, number, checkbox is checked, select(multiple) is selected, file(multiple) is selected | The :attribute field may not be greater than :max (character, items, files) | | mimes | mimes:jpeg,pdf,rar | it will validate the specific mimes of the files which are allowed| The :attribute only allows :mimes| | alpha | alpha | it will validate if the field value is only contain letter | The :attribute may only contain letters|

Validator Extension Rules

The extension rules that can be extended by importing mytabworks-utils/extend/rules. these validation rules are excluded in the main rules because these are not often use in the form, so to reduce the payload mytabworks decided to remove these from the main list and became an extension when needed. |NAME |USE |DESCRIPTION| MESSAGE | |-------------|--------------------------- |-------------|-------------| | alpha_space | alpha_space | it will validate if the field only contain letters with spaces | The :attribute must contain alphabet with spaces | | alpha_num | alpha_num | it will validate if the field contain letters with numbers| The :attribute may only contain letters and numbers.| | alpha_dash | alpha_dash | it will validate if the field contain letters with numbers and dashes | The :attribute may only contain letters, numbers, and dashes.| | url | url | it will validate if the field contain valid url | The :attribute must be a valid url. | | max_size | max_size:1000 | it will validate if the field contain a maximum file size and the size must calculate in kilobytes| The :attribute may not be greater :max_size kilobytes.| | min_size | min_size:1000 | it will validate if the field contain a minimum file size and the size must calculate in kilobytes| The :attribute must be atleast :min_size kilobytes.| | required_if | required_if:target_field=target_expected_value | it will require the field, if the target field matches the expected value | The :attribute field is required when :required_if is :third_party. | | same | same:target_field | it will validate the field until the target field contain the same value | The :attribute and :same must match. |

DoneTypingEvent

it is use to fire the event after user done typing, that will save a lot of unessesary execution while typing, especially in React when using state

DoneTypingEvent Basic Usage

import { DoneTypingEvent } from "mytabworks-utils";

const typing = DoneTypingEvent(event => {
    /*triggered when done typing*/
    const value = event.target.value
}, 500) /*miliseconds to wait every enrty before it fire*/

export const Input () => (
    <input type="text" {...typing}>
)

Jest Test issue?

jest test SyntaxError: unexpected token export? no problem!

First solution

Add to your jest configuration the transformIgnorePatterns containing /node_modules/(?!(?:--repo-making-issue--))

"transformIgnorePatterns": [
    "/node_modules/(?!(?:mytabwork-utils))"
]

Second solution

First step

You need to change .babelsrc to babel.config.js. in case you dont have .babelsrc you can create babel.config.js, and copy your babel configuration in package.json then paste it in your babel.config.js. like below

module.exports = {
    "presets": [
        "react-app"
      ]
}

Second step

on package.json script test put the --transformIgnorePatterns '/node_modules/(?!(?:--repo-making-issue--))' after test.

"scripts": {
    "test": "react-app test --transformIgnorePatterns '/node_modules/(?!(?:mytabwork-utils))'"
}

it will work like a charm (^_^)y

License

MIT Licensed. Copyright (c) fernandto tabamo jr (Mytabworks) 2020.