Overview

Intention

The main aim of the library is to facilitate creating data driven UI in React.js with both front-end and back-end data sources.

Use cases:

  1. Easily implement data driven spreadsheets(grids) with capabilities of:
  2. Implement form validation: Form Service + Validator
    • synchronous client side validation in React
    • async server side validation
    • typical validation Rules out of the box
    • complex validation rules for dependent fields(e.g. combination of fields ‘name’ + ‘surname’ must be unique)

Library Elements

<UIKernel.Grid
  model={model}
  cols={columns}
  ref={(grid) => this.grid = grid}
  {/*some other props*/}
/>

//somewhere else
this.grid.someGridMethod();
  1. GRID - means for creating data driven spreadsheets. It consists of independent front-end end back-end parts:
  2. Forms - means for managing your your React forms behaviour
    • At front-end there is
    • At backend there is useful express.js API which helps to implement REST API for synchronization of form data model between front-end and back-end parts of your app. But it isn’t mandatory to use express.js for this purposes as well.
  3. Validator - provides a handy way to validate your form fields(wherever at front-end or back-end)

  4. Editors - several frequently used React widgets(DatePicker, SuggestBox, etc.)

  5. Lists data model and corresponding express.js API which helps to implement provision of data for lists widgets like Select and SuggestBox.

Module structure

UIKernel library has the following structure:

UIKernel = {
  gridExpressApi,
  listExpressApi,
  formExpressApi,
  createValidator,
  toCSV,
  applyGridFilters,
  Grid,
  Form,
  createValidator.create,
  exportGridData,
  toJSON,
  Models: {
    Grid: {
      Xhr,
      Collection
    },
    Events,
    Form,
    FormXhr,
    ValidationErrors,
    List: {
      Xhr
    }
  },
  AbstractModels: {
    Form,
    Grid,
    List
  },
  Adapters: {
    Grid: {
      ToFormUpdate,
      ToFormCreate
    }
  },
  Editors: {
    Select,
    SuggestBox,
    DatePicker,
    Checkbox,
    Number
  },
  ArgumentsError,
  ThrottleError,
  Validators: {
    boolean,
    date,
    enum,
    set,
    float,
    regExp,
    notNull,
    number,
    notEmpty
  }
}