Lack of examples

[VitorLuizC]

Would be nice to have a file with usage examples, recipes and other approaches using this library.

• TypeScript examples;
• How to modularize validations?
• How to use asynchronous validations?
• Components using it;

[VitorLuizC]

A TypeScript example

import React, { Component } from 'react';
import { Button, Container, Entry } from '../components';
import { observer } from 'mobx-react';
import FormStore, { Validators } from 'mobx-valite-form-store';

export type LoginEntries = {
  username: string;
  password: string;
};

export type LoginFormProps = {
  passwordRecoveryURL: string;
  onLogin: (entries: LoginEntries) => void;
};

const validators: Validators<LoginEntries> = {
  username: [
    (value: string) => !!value.trim() || 'Nome de usuário vazio.',
    (value: string) => value.length > 18 || 'Nome de usuário maior que o permitido.'
  ],
  password: [
    (value: string) => !!value.trim() || 'Senha vazia.',
    (value: string) => value !== '123456' || 'Senha de usuário muito fácil, use outra.'
  ]
};

@observer
export class LoginForm extends Component<LoginFormProps> {
  store: FormStore<LoginEntries> = new FormStore({}, validators);

  onPress = async () => {
    await this.store.validateEntries();
    if (this.store.isValid && !this.store.isLoading)
      return;
    this.props.onLogin(this.store.entries);
  };

  render () {
    return (
      <Container>
        <Entry
          label="Nome de Usuário"
          value={ this.store.entries.username }
          message={ this.store.errors.username }
          onChange={ (value) => this.store.setEntry('username', value) }
        />
      
        <Entry
          label="Senha"
          value={ this.store.entries.password }
          message={ this.store.errors.password }
          onChange={ (value) => this.store.setEntry('password', value) }
        />

        <Link to={ this.props.passwordRecoveryURL }>Esqueceu sua senha?</Link>

        <Button onPress={ this.onPress } isDisabled={ !this.store.isValid || this.store.isLoading }>
          Entrar
        </Button>
      </Container>
    );
  }
}