fix: lot of stuff fixed, new tests, new apis, demo project added

.gitignore

@@ -1,5 +1,6 @@
 /coverage
-/demo/dist
+/demo/build
+/demo/node_modules
 /es6
 /lib
 /node_modules

DOCUMENTATION.md

@@ -26,15 +26,15 @@
 |---|---|---|---|
 | **isValid** | boolean | computed | Check if the form is valid. |
 | **isDirty** | boolean | computed | Check if the form is dirty. |
-| **validating** | boolean | observable | Check if the form is in validation state. |
-| **genericErrorMessage** | string | observable | Generic error message (not related to fields). |
+| **isPristine** | boolean | computed | Check if the form is pristine. |
+| **isEmpty** | boolean | computed | Check if the form is empty. |
+| **genericError** | string | observable | Generic error message (not related to fields). |
+| **genericErrorMessage** | string | observable | Alias of `genericError`. |
 
 
 | Method | Input | Output | Info |
 |---|---|---|---|
 | **syncValue()** | - | - | Synchronizes the value of the field `onChange` event. You must define the name of the field to use this method. |
-| **isValid()** | - | boolean | Check if the form is valid. |
-| **isDirty()** | - | boolean  | Check if the form is dirty. |
 | **fieldKeys()** | - | array | Get an array with all fields keys/names. |
 | **update(obj)** | object | - | Pass an object to update the form with new values. |
 | **values()** | - | object | Get an object with all fields values. |
@@ -47,20 +47,21 @@
 
 | Property | Type | MobX Type | Info |
 |---|---|---|---|
-| **isValid** | boolean | computed | Check if the form is valid. |
-| **isDirty** | boolean | computed | Check if the form is dirty. |
+| **isValid** | boolean | computed | Check if the field is valid. |
+| **isDirty** | boolean | computed | Check if the field is dirty. |
+| **isPristine** | boolean | computed | Check if the field is pristine. |
+| **isEmpty** | boolean | computed | Check if the field is empty. |
 | **key** | string | - | Field key (set on form constructor) |
 | **name** | string | - | Field name or key (set on form constructor) |
 | **label** | string | - | Field label name (set on form constructor) |
 | **value** | string, array, object, boolean | computed | Computed value of the field. |
 | **disabled** | boolean | - | The disabled state of the field. |
-| **errorMessage** | string | observable | Field error message. |
+| **error** | string | observable | Field error message. |
+| **errorMessage** | string | observable | Alias of `error`. |
 
 
 | Property | Input | Output | Info |
 |---|---|---|---|
-| **isValid()** | - | boolean | Check if the field is valid. |
-| **isDirty()** | - | boolean | Check if the field is dirty. |
 | **getValue()** | - | string, array, object, boolean | Get the field value. |
 | **setValue(val)** | string, array, object, boolean | - | Set the field value to the given value. |
 | **update(val)** | string, array, object, boolean | - | Alias of setValue(). |

README.md

@@ -8,8 +8,6 @@
 [![npm](https://img.shields.io/npm/v/mobx-ajv-form.svg)]()
 [![node](https://img.shields.io/node/v/mobx-ajv-form.svg)]()
 [![GitHub license](https://img.shields.io/github/license/foxhound87/mobx-ajv-form.svg)]()
-
-
 [![NPM](https://nodei.co/npm/mobx-ajv-form.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/mobx-ajv-form/)
 
 ---
@@ -25,7 +23,7 @@ npm i --save mobx-ajv-form
 
 ## Demo
 
-http://www.webpackbin.com/EJE_QL1OW
+http://www.webpackbin.com/EkiE6Fb9-
 
 ## Usage
 
@@ -123,10 +121,10 @@ const handleOnSubmit = (e) => {
   alert('Form is valid! Send the requrest here.');
 
   // get fields values
-  console.log('Form Values', form.values());
+  console.log('Form Values', form.values);
 
   // or show a custom generic error after a beckend call
-  form.invalidate('The user already exist.')
+  form.invalidate('The user already exist.');
 }
 
 const handleOnClear = (e) => {

demo/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"]
+}

demo/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+  }
+}

demo/.gitignore

@@ -0,0 +1,3 @@
+/build
+/node_modules
+npm-debug.log

demo/README.md

@@ -0,0 +1,37 @@
+# MobX Ajv Form Demo
+
+> This demo project is using the build files from the `lib` directory instead of install it into npm dependecies.
+
+
+### Install
+
+1. In the main project directory:
+
+  `npm install`
+
+  `npm run build`
+
+
+2. In the `demo` directory:
+
+  `npm install`
+
+  `npm run build`
+
+  `npm run start`
+
+
+### Development
+
+1. In the main project directory:
+
+  `npm install`
+
+  `npm run build`
+
+
+2. In the `demo` directory:
+
+  `npm install`
+
+  `npm run start:dev`

demo/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "mobx-ajv-form-demo",
+  "license": "MIT",
+  "version": "1.0.0",
+  "author": "Claudio Savino <[email protected]> (https://twitter.com/foxhound87)",
+  "description": "Easly manage Forms with MobX and automatic validation with AJV json-schema rules.",
+  "homepage": "https://www.npmjs.com/package/mobx-ajv-form",
+  "scripts": {
+    "build": "webpack -p",
+    "start:dev": "webpack-dev-server --port 8888",
+    "start": "node ./src/server.js"
+  },
+  "dependencies": {
+    "ejs": "2.5.1",
+    "express": "4.14.0",
+    "json-stringify-safe": "5.0.1",
+    "lodash": "4.15.0",
+    "mobx": "2.4.3",
+    "mobx-react": "3.5.5",
+    "react": "15.3.1",
+    "react-dom": "15.3.1"
+  },
+  "devDependencies": {
+    "babel-loader": "6.2.5",
+    "babel-preset-es2015": "6.13.2",
+    "babel-preset-react": "6.11.1",
+    "babel-preset-stage-0": "6.5.0",
+    "html-webpack-plugin": "2.22.0",
+    "json-loader": "0.5.4",
+    "webpack": "1.13.2",
+    "webpack-dev-server": "1.14.1"
+  }
+}

demo/src/DebugComponent.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import jsonStringifySafe from 'json-stringify-safe';
+import _ from 'lodash';
+
+const merge = (field) => ({
+  isValid: field.isValid,
+  isDirty: field.isDirty,
+  isPristine: field.isPristine,
+  isEmpty: field.isEmpty,
+  value: field.value,
+  error: field.error,
+});
+
+const toJson = (data) => {
+  const $data = jsonStringifySafe(data);
+  return JSON.stringify(JSON.parse($data), null, 2);
+};
+
+const parseFormData = (form) => {
+  const omit = ['fields', 'schema', 'extend', 'options'];
+  return toJson(_.merge(_.omit(form, omit), merge(form)));
+};
+
+const parseFieldData = (field) => {
+  const omit = [
+    '$valid',
+    '$value',
+    'form',
+    'related',
+    'label',
+    'name',
+    'key',
+    'disabled',
+    'errorMessage',
+    'validationFunctionsValues',
+    'validateProperty',
+  ];
+
+  return toJson(_.merge(_.omit(field, omit), merge(field)));
+};
+
+export const DebugForm = observer(({ form }) => (
+  <div>
+    <h4>Form</h4>
+    <pre>
+      {parseFormData(form)}
+    </pre>
+  </div>
+));
+
+export const DebugField = observer(({ field }) => (
+  <div>
+    <h4>{field.label}</h4>
+    <pre>
+      {parseFieldData(field)}
+    </pre>
+  </div>
+));

demo/src/FormComponent.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { DebugForm, DebugField } from './DebugComponent';
+
+const FormComponent = ({ form, events }) => (
+  <div className="container">
+    <div className="splitted-35 fixed container-left">
+      <form>
+        <a href="https://www.npmjs.com/package/mobx-ajv-form">
+          <h3>mobx-ajv-form</h3>
+        </a>
+        <div>
+          {form.fields.username.label}
+          <i>{form.fields.username.error}</i>
+        </div>
+        <input
+          type="text"
+          name={form.fields.username.name}
+          value={form.fields.username.value}
+          placeholder={form.fields.username.label}
+          onChange={form.syncValue}
+        />
+
+        <div>
+          {form.fields.email.label}
+          <i>{form.fields.email.error}</i>
+        </div>
+        <input
+          type="text"
+          name={form.fields.email.name}
+          value={form.fields.email.value}
+          placeholder={form.fields.email.label}
+          onChange={form.syncValue}
+        />
+
+        <div>
+          {form.fields.password.label}
+          <i>{form.fields.password.error}</i>
+        </div>
+        <input
+          type="password"
+          name={form.fields.password.name}
+          value={form.fields.password.value}
+          placeholder={form.fields.password.label}
+          onChange={form.syncValue}
+        />
+
+        <div>
+          <button
+            type="submit"
+            disabled={!form.isValid}
+            onClick={events.handleOnSubmit}
+          >Submit</button>
+          <button
+            type="submit"
+            onClick={events.handleOnClear}
+          >Clear</button>
+          <button
+            type="submit"
+            onClick={events.handleOnReset}
+          >Reset</button>
+        </div>
+
+        <p>{form.genericError}</p>
+
+      </form>
+    </div>
+    <div className="splitted-65 container-right">
+      <DebugForm form={form} />
+      <hr />
+      <DebugField field={form.fields.username} />
+      <DebugField field={form.fields.email} />
+      <DebugField field={form.fields.password} />
+    </div>
+  </div>
+);
+
+FormComponent.propTypes = {
+  events: React.PropTypes.object,
+  form: React.PropTypes.object,
+};
+
+export default observer(FormComponent);

demo/src/form.events.js

@@ -0,0 +1,45 @@
+import form from './form';
+
+/**
+  On Submit
+ */
+const handleOnSubmit = (e) => {
+  e.preventDefault();
+
+  // check if the form is valid, otherwise exit
+  if (!form.validate()) return;
+
+  alert('Form is valid! Send the requrest here.'); // eslint-disable-line
+
+  // get fields values
+  console.log('Form Values', form.values()); // eslint-disable-line
+
+  // or show a custom generic error after a beckend call
+  form.invalidate('The user already exist.');
+};
+
+/**
+  On Clear
+ */
+const handleOnClear = (e) => {
+  e.preventDefault();
+
+  // clear the form
+  form.clear();
+};
+
+/**
+  On Reset
+ */
+const handleOnReset = (e) => {
+  e.preventDefault();
+
+  // reset to the default initial values
+  form.reset();
+};
+
+export default {
+  handleOnReset,
+  handleOnClear,
+  handleOnSubmit,
+};

demo/src/form.js

@@ -0,0 +1,31 @@
+import Form from '../../lib';
+// import Form from 'mobx-ajv-form';
+
+// define a json schema
+const schema = {
+  type: 'object',
+  properties: {
+    username: { type: 'string', minLength: 6, maxLength: 20 },
+    email: { type: 'string', format: 'email', minLength: 5, maxLength: 20 },
+    password: { type: 'string', minLength: 6, maxLength: 20 },
+  },
+};
+
+// define fields
+const fields = {
+  username: {
+    label: 'Username',
+    value: 'SteveJobs',
+  },
+  email: {
+    label: 'Email',
+    value: '[email protected]',
+  },
+  password: {
+    label: 'Password',
+    value: 'thinkdifferent',
+  },
+};
+
+// create the form
+export default new Form({ fields, schema });