Added support for multiple environments. Added examples for every env…

…ironment. Updated docs README.md
acacha · Apr 14, 2017 · d120dd2 · d120dd2
1 parent eeb062f
commit d120dd2
Show file tree

Hide file tree

Showing 41 changed files with 1,517 additions and 6 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015"],
+  "plugins": ["babel-plugin-add-module-exports"]
+}
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,6 @@ node_modules/
 .idea/
 npm-debug.log
 dist/
+examples/browser/node_modules/
+examples/server/node_modules/
+examples/es6/node_modules/
diff --git a/README.md b/README.md
@@ -8,8 +8,17 @@ Form objects pattern implementation for Javascript.
 npm install acacha-forms --save
 ```
 
+Or you can use [unpkg](https://unpkg.com) in your html files:
+
+```html
+<script src="https://unpkg.com/acacha-forms/dist/acacha-forms.min.js"></script>
+```
+
 # Usage
 
+See also examples folder with full code examples
+
+## ES6 imports
 After package installation you could user this package using ES6 import:
 
 ```javascript
@@ -31,10 +40,83 @@ form.post('/register')
   })
   .catch( error => {
     console.log('Register error!')
+    console.log(form.errors.all())
   })
 ```
 
-# Form objects pattern
+## Node.js require
+
+After package installation you could user this package using ES6 import:
+
+```javascript
+import Form from 'acacha-forms'
+```
+
+Then you can create any form object using constructor, for example a Register User form:
+
+```javascript
+let form = new Form( { name: 'Sergi Tur', email: 'sergiturbadenas@gmail.com', password: '123456', password_confirmation: '123456', terms: 'true' } )
+```
+And the use form methods like post to submit form:
+
+```javascript
+form.post('/register')
+  .then( response => {
+    console.log('Register done!')
+    //do what you need to do if register is ok
+  })
+  .catch( error => {
+    console.log('Register error!')
+    console.log(form.errors.all())
+  })
+```
+
+## Browser 
+
+# Examples
+
+See examples folder. Three examples are provided:
+
+- **browser**: Example of how to use use this library in a simple web page.
+- **node**: Example of use use this library using node.js require.
+- **es6**: Example of use use this library using import es6 sintax (using [vuejs framework](https://vuejs.org/)).
+
+All three examples requires to work a "server". You can execute the server provider al **server folder** which uses [json-server](https://github.com/typicode/json-server).
+
+## Server
+
+First remember to run the server example. Run the server typing:
+
+```bash
+cd examples/server
+npm install
+node server.js
+```
+
+## Browser
+
+First remember to run the server example. Run the browser example typing:
+
+```bash
+cd examples/browser
+npm install
+```
+
+An open index.html file in your favourite browser.
+
+## es6
+
+First remember to run the server example. Run the es6 (with vue.js) example typing:
+
+```bash
+cd examples/es6
+npm install
+npm run dev
+```
+
+And open URL http://localhost:8080 
+
+# About Form objects pattern
 
 More info about this pattern at:
 
@@ -44,13 +126,13 @@ More info about this pattern at:
 - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
 
 
-# Other similar packages or software
+## Other similar packages or software
 
 - https://github.com/laracasts/Vue-Forms
 - https://github.com/edstevo/laravel-vue-form
 - [Laravel Spark](https://spark.laravel.com/) : see more info about forms at [docs](https://spark.laravel.com/docs/4.0/forms).
 
-# Laracasts
+## Laracasts
 
 This video series:
 
@@ -61,7 +143,7 @@ This video series:
 Inspired the creation of this package. Also [Laravel Spark](https://spark.laravel.com/) . 
 
 
- # Resources
+# Resources
 
 - [Form Objects at acacha.org wiki](http://acacha.org/mediawiki/Form_objects): in Catalan Language
 - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19

diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>AdminLTE 2 | Registration Page</title>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <!-- Bootstrap 3.3.6 -->
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
+    <!-- Ionicons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="node_modules/admin-lte/dist/css/AdminLTE.min.css">
+    <!-- iCheck -->
+    <link rel="stylesheet" href="node_modules/admin-lte/plugins/iCheck/square/blue.css">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+</head>
+<body class="hold-transition register-page">
+<div class="register-box">
+    <div class="register-logo">
+        <a href="#"><b>Admin</b>LTE</a>
+    </div>
+
+    <div class="register-box-body" id="error">
+        <p class="login-box-msg">Register a new membership</p>
+
+        <div class="alert alert-danger" id="errors" style="display: none">
+            <strong>Whoops!</strong> Some problemes detected <br><br>
+            <ul>
+            </ul>
+        </div>
+
+        <div class="alert alert-success" id="success" style="display: none">
+            <strong>Submited ok</strong> <br>
+        </div>
+
+        <form onsubmit="event.preventDefault(); register()" id="registerForm">
+            <div class="form-group has-feedback">
+                <input type="text" class="form-control" placeholder="Full name" name="name">
+                <span class="glyphicon glyphicon-user form-control-feedback"></span>
+            </div>
+            <div class="form-group has-feedback">
+                <input type="email" class="form-control" placeholder="Email" name="email">
+                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+            </div>
+            <div class="form-group has-feedback">
+                <input type="password" class="form-control" placeholder="Password" name="password">
+                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+            </div>
+            <div class="form-group has-feedback">
+                <input type="password" class="form-control" placeholder="Retype password" name="confirmation_password">
+                <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
+            </div>
+            <div class="row">
+                <div class="col-xs-8">
+                    <div class="checkbox icheck">
+                        <label>
+                            <input type="checkbox" name="terms"> I agree to the <a href="#">terms</a>
+                        </label>
+                    </div>
+                </div>
+                <!-- /.col -->
+                <div class="col-xs-4">
+                    <button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>
+                </div>
+                <!-- /.col -->
+            </div>
+        </form>
+
+    </div>
+    <!-- /.form-box -->
+</div>
+<!-- /.register-box -->
+
+<!-- jQuery 2.2.3 -->
+<script src="node_modules/admin-lte/plugins/jQuery/jquery-2.2.3.min.js"></script>
+<!-- Bootstrap 3.3.6 -->
+<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
+<!-- iCheck -->
+<script src="node_modules/admin-lte/plugins/iCheck/icheck.min.js"></script>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+<script src="../lib/acacha-forms.min.js"></script>
+<script>
+  $(function () {
+    $('input').iCheck({
+      checkboxClass: 'icheckbox_square-blue',
+      radioClass: 'iradio_square-blue',
+      increaseArea: '20%' // optional
+    });
+  });
+</script>
+<script src="./register.js"></script>
+</body>
+</html>
diff --git a/examples/browser/package.json b/examples/browser/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "browser-example-for-acacha-forms",
+  "version": "1.0.0",
+  "description": "An example app to demonstrate acacha-forms library usage with browser",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Sergi Tur Badenas <sergiturbadenas@gmail.com> (http://acacha.org)",
+  "license": "ISC",
+  "dependencies": {
+    "admin-lte": "^2.3.11",
+    "bootstrap": "^3.3.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/acacha/forms.git"
+  }
+}
diff --git a/examples/browser/register.js b/examples/browser/register.js
@@ -0,0 +1,48 @@
+/* globals AcachaForm FormData $ */
+
+/**
+ * Submit register form.
+ *
+ * @param errors
+ */
+function register () { // eslint-disable-line no-unused-vars
+  clearErrors()
+
+  const API_URL = 'http://localhost:3000/users'
+
+  let form = new AcachaForm(new FormData(document.getElementById('registerForm')))
+
+  form.post(API_URL)
+    .then(response => {
+      console.log('Register done!')
+      $('#success').show()
+    })
+    .catch(error => {
+      console.log('Register error! : ' + error)
+      console.log(form.errors)
+      showErrors(form.errors.all())
+    })
+}
+
+/**
+ * Clear errors.
+ *
+ * @param errors
+ */
+function clearErrors (errors) {
+  $('#success').hide()
+  $('#errors').hide()
+  $('#errors ul').empty()
+}
+
+/**
+ * Show errors.
+ *
+ * @param errors
+ */
+function showErrors (errors) {
+  $.each(errors, function (index, value) {
+    $('#errors ul').append('<li>' + value + '</li>')
+  })
+  $('#errors').show()
+}
diff --git a/examples/es6/.babelrc b/examples/es6/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}
diff --git a/examples/es6/.editorconfig b/examples/es6/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/examples/es6/.eslintignore b/examples/es6/.eslintignore
@@ -0,0 +1,2 @@
+build/*.js
+config/*.js
diff --git a/examples/es6/.eslintrc.js b/examples/es6/.eslintrc.js
@@ -0,0 +1,28 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    jquery: true
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}
diff --git a/examples/es6/.gitignore b/examples/es6/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/es6/.postcssrc.js b/examples/es6/.postcssrc.js
@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}