feat: umd support

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Claudio Savino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -33,16 +33,16 @@ const schema = {
 // define fields
 const fields = {
   username: {
-    value: 'SteveJobs',
     label: 'Username',
+    value: 'SteveJobs',
   },
   email: {
-    value: '[email protected]',
     label: 'Email',
+    value: '[email protected]',
   },
   password: {
-    value: 'thinkdifferent',
     label: 'Password',
+    value: 'thinkdifferent',
   },
 };
 
@@ -53,6 +53,7 @@ this.forms.register = new Form(fields, schema);
 Pass the form to a react component:
 
 ````
+// input
 <TextField
   name={form.fields.username.name}
   value={form.fields.username.value}
@@ -61,6 +62,23 @@ Pass the form to a react component:
   errorText={form.fields.username.errorMessage}
   onChange={form.syncValue}
 />
+
+// button
+<button
+  type="submit"
+  disabled={!form.valid}
+  className="btn btn-primary"
+  onClick={handleOnSubmit}
+>Register</button>
+
+// generic error message
+<div
+  className={cx(errorMessage, {
+    hide: !form.valid && form.genericErrorMessage,
+  })}
+>
+  {form.genericErrorMessage}
+</div>
 ````
 
 Deal with events:

package.json

@@ -2,10 +2,30 @@
   "name": "mobx-ajv-form",
   "license": "MIT",
   "version": "0.0.0-semantically-released",
-  "main": "lib/index.js",
   "author": "Claudio Savino <[email protected]> (https://twitter.com/foxhound87)",
   "description": "Easly manage Forms with MobX and automatic validation with AJV json-schema rules.",
-  "homepage": "",
+  "homepage": "https://www.npmjs.com/package/mobx-ajv-form",
+  "main": "lib/index.js",
+  "scripts": {
+    "clean:lib": "rm -rf lib",
+    "clean:umd": "rm -rf umd",
+    "clean:all": "npm run clean:lib && npm run clean:umd",
+    "clean:modules": "rm -rf ./node_modules && npm cache clean",
+    "lint": "eslint src --ext .jsx,.js",
+    "build": "npm-run-all --parallel build:*",
+    "build:main": "babel -d lib/ src/",
+    "build:umd": "webpack --output-filename index.umd.js",
+    "build:umdmin": "webpack --output-filename index.umd.min.js -p",
+    "prebuild": "npm run clean:all",
+    "commit": "git-cz",
+    "watch:build": "babel --watch -d lib/ src/",
+    "watch:test": "npm run test -- -w",
+    "test": "mocha tests/test.js --compilers js:babel-register",
+    "cover": "nyc npm test",
+    "coverage-check": "nyc check-coverage --satements 100 --branches 100 --functions 100 --lines 100",
+    "coverage-report": "cat ./coverage/lcov.info | codecov",
+    "release": "semantic-release pre && npm publish && semantic-release post"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/foxhound87/mobx-ajv-form.git"
@@ -26,21 +46,6 @@
   "engines": {
     "node": ">=4"
   },
-  "scripts": {
-    "clean:lib": "rm -rf lib",
-    "clean:modules": "rm -rf ./node_modules && npm cache clean",
-    "lint": "eslint src --ext .jsx,.js",
-    "build": "babel -d lib/ src/",
-    "prebuild": "npm run clean:lib",
-    "commit": "git-cz",
-    "watch:build": "babel --watch -d lib/ src/",
-    "watch:test": "npm run test -- -w",
-    "test": "mocha tests/test.js --compilers js:babel-register",
-    "cover": "nyc npm test",
-    "coverage-check": "nyc check-coverage --satements 100 --branches 100 --functions 100 --lines 100",
-    "coverage-report": "cat ./coverage/lcov.info | codecov",
-    "release": "semantic-release pre && npm publish && semantic-release post"
-  },
   "config": {
     "commitizen": {
       "path": "node_modules/cz-conventional-changelog"
@@ -52,11 +57,13 @@
   "dependencies": {
     "ajv": "4.1.3",
     "lodash": "4.13.1",
-    "mobx": "2.3.2"
+    "mobx": "2.3.2",
+    "path": "0.12.7"
   },
   "devDependencies": {
     "babel-cli": "6.10.1",
     "babel-eslint": "6.1.0",
+    "babel-loader": "6.2.4",
     "babel-plugin-transform-class-properties": "6.10.2",
     "babel-plugin-transform-decorators": "6.8.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
@@ -73,9 +80,11 @@
     "eslint-plugin-jsx-a11y": "1.5.3",
     "eslint-plugin-react": "5.2.2",
     "ghooks": "1.2.4",
+    "json-loader": "0.5.4",
     "mocha": "2.5.3",
     "npm-run-all": "2.2.0",
     "nyc": "6.6.1",
-    "semantic-release": "4.3.5"
+    "semantic-release": "4.3.5",
+    "webpack": "1.13.1"
   }
 }

src/form.field.js

@@ -12,7 +12,7 @@ export default class Field {
   @observable disabled = false;
   @observable valid = false;
   @observable errorMessage = null;
-  @observable interactive = true;
+  // @observable interactive = true;
   originalErrorMessage = null;
   validateFunction = null;
 
@@ -116,7 +116,7 @@ export default class Field {
     // not execute if no valid function or ajv rules
     if (!this.validateFunction && !this.form.ajvValidate) return false;
 
-    // invalidate if forced and not interacted with field
+    // invalidate if not forced and not interacted with field
     if (!force && !this.interacted) return this.setInvalid(showErrors);
 
     // Use "ajv" Rules

webpack.config.babel.js

@@ -0,0 +1,23 @@
+import { join } from 'path';
+
+const include = join(__dirname, 'src');
+
+export default {
+  devtool: 'source-map',
+  entry: './src/index',
+  output: {
+    path: join(__dirname, 'umd'),
+    libraryTarget: 'umd',
+    library: 'ReactiveForm',
+  },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loader: 'babel-loader',
+      include,
+    }, {
+      test: /\.json$/,
+      loader: 'json-loader',
+    }],
+  },
+};