import { Validator } from "mytabworks-utils";

    const validator = new Validator()
    const email = document.getElementById("email") 
    const received = email.value // "sample@"
    const validations = "required|email|min:10|max:20" // validations are chainable
    const label = email.name // Email
    const email_result = validator.validate(received, validations, label)
    console.log(email_result) 
    // { isInvalid: true, message: "The Email must be a valid email"}

    import { Validator } from "mytabworks-utils";
    import { 
        max_size, 
        min_size
    } from "mytabworks-utils/extend/validations";
    
    Validator.extend({ max_size, min_size }) // extending max_size and min_size

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

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

    const strong_password = {
        regexp: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).+$/g,
        exe(
            received, /*it is the value of the input you put*/
            first_param, /*validations:first_param*/
            second_param /*validations:first_param=second_param*/
        ) {
            /*we don't need first_param and second_param for this validation*/
            /*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 validations 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.extend({ required_if, same, strong_password })

    const validator = new Validator()
    const pass = document.querySelector(`input[name="pass"]`)
    const p_recieved = pass.value /*imagine value is Secretp@ssw0rd*/
    const p_validations = "required|min:8|strong_password"
    /*required
    must have minimum of 8 characters 
    customize strong_password*/
    
    const p_label = "Password"
    const p_result = validator.validate(p_received, p_validations, p_label)
    console.log(p_result) /*it passed the validations so isInvalid will be false*/
    /*p_result is { isInvalid: false }*/

    const confirm = document.querySelector(`input[name="confirm"]`)
    const c_recieved = confirm.value /*imagine value is ""*/
    const c_validations = "required_if:pass=.+|same:pass@Password"
    /*required_if the [name="pass"] has a value of anything(.+)*/
    /*same value to the [name="pass"] with alias(@) of Password*/
    /*note! Alias(@) is for the real label of the [name="pass"] because sometimes input name and label are not the same*/
    
    const c_label = "Confirm"
    const c_result = validator.validate(c_received, c_validations, 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_validations = "required_if:pass@Password=.+@contain value|same:pass@Password"
    const c_result2 = validator.validate(c_received, c_validations, c_label)
    console.log(c_result2)
    /*{ isInvalid: true, message: "The Confirm field is required when Password is contain value." }*/

    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
    
    <input type="text" {...typing}>

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

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

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