Nutella Peanut-Butter Marshmallow
    Have ideas to improve npm?Join in the discussion! »

    @comparaonline/ui-validator

    0.0.23 • Public • Published

    @comparaonline/ui-validator

    A package to centralized all validators function, used across the apps.

    To getting started with this package, it's so easy, it consist in a couple of steps that you must to follow to use this package.

    ⚡️ Install the package. ⤴️ Register your validators. ⭐️ Use your validators.

    • First at all, execute the following command:
    yarn add @comparaonline/ui-validator
    

    or

    npm install @comparaonline/ui-validator
    

    Notes

    validateSyncWith introduced in the last version 0.0.19+, now we have validateSyncWith to execute validators in sync way and validateWith that will execute code in async way

    • Then into your project, you must create a file called setup-validators.ts
    // setup-validators.ts file
    import * as Validator from "@comparaonline/ui-validator";
     
    // then let's import all the validators needed for your app
    import {
      required,
      ValidatorError as RequiredError
    } from "@comparaonline/ui-validator/commons/required";
    import {
      InRange,
      ValidatorError as InRangeError
    } from "@comparaonline/ui-validator/commons/range";
    import {
      oneOf,
      ValidatorError as oneOfError
    } from "@comparaonline/ui-validator/commons/oneOf";
     
    // then let's register our validators
    Validator.register(required, "required");
    Validator.register(InRange, "range");
    Validator.oneOf(InRange, "oneOf");
     
    // finally let's register our validators errors
    Validator.registerError(
      RequiredError,
      "This is our message error for required fields"
    );
    Validator.registerError(
      InRangeError,
      "This is our message error for out of range fields"
    );
    Validator.registerError(
      oneOfError,
      "This is our message error for oneOf fields"
    );

    Once your have completed the setup, now you can use the validators, so go into your React compoment and use them as follow:

    // SomeReactComponent.ts file
    import React from 'react';
    import TextField from '@material-ui/core/TextField';
    import { validateWith } from '@comparaonline/ui-validator';
     
    // simple usage
    const Field = () => {
      return (
        <TextField
          fieldProps={{
            validate: validateWith('required'['range', { max: 10, min: 5 }]['oneOf', { options: ['Option1', 'Option2', 'Option3'] }]);
          }}
        />
      );
    }
     
    // advance usage
    const Field = () => {
      return (
        <TextField
          fieldProps={{
            validate: validateWith(
              'required',
              ['range', { max: 10, min: 5 }],
              ['oneOf', { options: ['Option1', 'Option2', 'Option3'], error: 'this error will override the main error setup into setup validators file, {{value}} <= is the input value itself to be mapped inside here' }]
              );
          }}
        />
      );
    }
     

    This package keep simple validator function as

    Required

    usage

    import {
      Required,
      ValidatorError
    } from "@comparaonline/ui-validator/commons/required";

    This function will check that the value passed to be checked is not falsy values as null, undefined, false, '',

    Email

    usage

    import { isEmail } from "@comparaonline/ui-validator/commons/email";

    This function will check that the value passed to be checked is a valid email

    Truly

    usage

    import { isTruly } from "@comparaonline/ui-validator/commons/truly";

    This function will check that the value passed to be checked is consider as a true value by Boolean constructor

    values consider as truly are: 'not empty string', 1, {}, Function, [], true.

    Falsy

    usage

    import { isFalsy } from "@comparaonline/ui-validator/commons/falsy";

    This function will check that the value passed to be checked is consider as a false value by Boolean constructor

    values consider as truly are: '', 0, null, undefined, NaN, false.

    date

    usage 🔥 validator with arguments

    import { ageRange } from "@comparaonline/ui-validator/commons/date";

    This function will check if the value passed in into range of ages.

    This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

    {
      minAge: 18,
      maxAge: 40,
      error: 'error message to override the default one',
      parser: (value: string, options: object, values?: object): Date => {},
      variables: { /* string key:value pair */ }
    }

    max

    usage 🔥 validator with arguments

    import { ageRange } from "@comparaonline/ui-validator/commons/date";

    This function will check if the value passed is not grather than maxinum number.

    This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

    {
      max: 18,
      error: 'error message to override the default one',
      variables: { /* string key:value pair */ }
    }

    min

    usage 🔥 validator with arguments

    import { ageRange } from "@comparaonline/ui-validator/commons/date";

    This function will check if the value passed is not lower than minimun number.

    This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

    {
      min: 18,
      error: 'error message to override the default one',
      variables: { /* string key:value pair */ }
    }

    match

    usage 🔥 validator with arguments

    import { ageRange } from "@comparaonline/ui-validator/commons/date";

    This function will check if the value passed match with the regexp.

    This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

    {
      regexp: /([a-z]?)/,
      error: 'error message to override the default one',
      variables: { /* string key:value pair */ }
    }

    oneOf

    usage 🔥 validator with arguments

    import { ageRange } from "@comparaonline/ui-validator/commons/date";

    This function will check if the value passed match with one of the options

    This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

    {
      options: ['option1', 'option2', ...],
      error: 'error message to override the default one',
      variables: { /* string key:value pair */ }
    }

    InRange

    usage 🔥 validator with arguments

    import { ageRange } from "@comparaonline/ui-validator/commons/date";

    This function will check if the value is into range of numbers

    This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

    {
      max: 100,
      min: 50,
      error: 'error message to override the default one',
      variables: { /* string key:value pair */ }
    }

    Considerations

    Each variables object passed for validator with arguments, can be mapped to the error message, if you can display the variables into the error string, you must wrap the variable name into double curly braces, for example

    {
      variables: {
        format: 'DD/MM/YYYY',
      },
      error: 'You must follow the format: {{format}}'
    }

    if the error is reached then it will output: You must follow the format: DD/MM/YYYY

    Install

    npm i @comparaonline/ui-validator

    DownloadsWeekly Downloads

    28

    Version

    0.0.23

    License

    MIT

    Unpacked Size

    228 kB

    Total Files

    73

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar