flux_on_rails 1.0.0

data/lib/generators/flux_on_rails/templates/dispatchers/app-dispatcher.js

@@ -0,0 +1,29 @@
+//= require dispatcher
+
+var AppDispatcher = $.extend(new Dispatcher(), {
+
+  /**
+   * @param {object} action The details of the action, including the action's
+   * type and additional data coming from the server.
+   */
+  handleServerAction: function(action) {
+    var payload = {
+      source: 'SERVER_ACTION',
+      action: action
+    };
+    this.dispatch(payload);
+  },
+
+  /**
+   * @param {object} action The details of the action, including the action's
+   * type and additional data coming from the view.
+   */
+  handleViewAction: function(action) {
+    var payload = {
+      source: 'VIEW_ACTION',
+      action: action
+    };
+    this.dispatch(payload);
+  }
+
+});

data/lib/generators/flux_on_rails/templates/form-for.js

@@ -0,0 +1 @@
+//= require ./react-form-for-object/src/form-for

data/lib/generators/flux_on_rails/templates/react-form-for-object/.bower.json

@@ -0,0 +1,15 @@
+{
+  "name": "react-form-for-object",
+  "homepage": "https://github.com/edshadi/react-form-for",
+  "version": "1.0.0",
+  "_release": "1.0.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.0",
+    "commit": "4eb5230dc74fd4f7e9127246303ce431462cd7d1"
+  },
+  "_source": "git://github.com/edshadi/react-form-for.git",
+  "_target": "~1.0.0",
+  "_originalSource": "react-form-for-object",
+  "_direct": true
+}

data/lib/generators/flux_on_rails/templates/react-form-for-object/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory" : "bower_components"
+}

data/lib/generators/flux_on_rails/templates/react-form-for-object/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+bower_components

data/lib/generators/flux_on_rails/templates/react-form-for-object/README.md

@@ -0,0 +1,94 @@
+## React Form For Object
+
+No-effort, simple ReactJS form builder for Javascript objects.
+
+Simply pass FormFor a javascript object and it will display the form and handle
+data for you. You can always override defaults by passing FormFor options.
+
+There is a full working example [here](./example)
+
+### Install
+```bash
+bower install react-form-for-object
+```
+
+### Usage
+FormFor will determine the type of input based on the your object. We do our best
+to detect the type of the input you're looking for. However, some things are harder to detect such as textarea. We give you the option to override them in the options by passing a type (see example below).
+
+Supply a submit handler with onSubmit key in the options. On submit, FormFor will pass all of the form data to the callback you provided.
+
+Supply a cancel handler with onCancel key in the options. If you don't want a cancel button,
+simply don't supply an onCancel handler.
+
+FormFor will display all errors supplied to it in the errors prop.
+
+If we can't successfully detect the type of value from an object attribute, we default
+to text input.
+
+By default, id attributes are built as hidden input.
+
+```javascript
+var todo = {
+  name: "Clean my room",
+  description: "My room needs some serious cleaning",
+  completed: false,
+  list: "Home"
+}
+var formOptions: {
+  onSubmit: function(data, utils) {console.log(data)},
+  onCancel: function(data) { //do something like change state to editing false }
+  description: { type: 'textarea' },
+  list: { type: 'select', values: [{value:"Home", show: "Home"}, {value:"Work", show: "Work"}] }
+}
+
+<FormFor object={todo} options={formOptions} errors={[]} />
+
+```
+#### How to use the options
+Each attribute on your object can have its own options/overrides. In your option object,
+use the name of the attribute as the key (see example above). Currently you can supply the following options:
+
+- type: 'textarea', 'select' (please see supported inputs below). Please keep in mind that you don't have to supply any options for FormFor to work, only supply them to override what we give you
+based on your object attributes.
+- className
+- value
+- onSubmit
+- onCancel
+
+
+### Input support
+
+- text
+- checkbox
+- number
+- hidden
+- select
+- password
+- textarea
+- date
+- datetime
+- email
+- submit
+- color
+
+### Utilities
+When we call your submitHandler, we pass it a utils object that will have
+some useful functions that you could use. Currently, we support the following
+utility functions:
+- clearInputs: use this to clear all input fields after success.
+
+## Examples
+A working example can be found [here](./example)
+
+## TODO
+- file
+- image
+- month
+- radio
+- range
+- reset
+- search
+- tel
+- url
+- week

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/checkbox-input.react.js

@@ -0,0 +1,11 @@
+var CheckboxInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="checkbox" defaultChecked={data.defaultChecked} className={data.className} value={data.value} />
+    );
+  }
+
+});
+
+module.exports = CheckboxInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/color-input.react.js

@@ -0,0 +1,11 @@
+var ColorInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} name={data.name} type="color" defaultValue={data.defaultValue} className={data.className} />
+    );
+  }
+
+});
+
+module.exports = ColorInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/date-input.react.js

@@ -0,0 +1,11 @@
+var DateInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="date" defaultValue={data.defaultValue} placeholder={data.placeholder} className={data.className} />
+    );
+  }
+
+});
+
+module.exports = DateInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/datetime-input.react.js

@@ -0,0 +1,11 @@
+var DatetimeInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="datetime-local" defaultValue={data.defaultValue} className={data.className} />
+    );
+  }
+
+});
+
+module.exports = DatetimeInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/email-input.react.js

@@ -0,0 +1,11 @@
+var EmailInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="email" defaultValue={data.defaultValue} placeholder={data.placeholder} className={data.className} />
+    );
+  }
+
+});
+
+module.exports = EmailInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/form-errors.react.js

@@ -0,0 +1,13 @@
+var FormErrors = React.createClass({
+  render: function() {
+    var errors = [];
+    this.props.errors.forEach(function(err) {
+      errors.push(<li>{err}</li>)
+    })
+    return (
+      <ul className="form-errors">{errors}</ul>
+    );
+  }
+});
+
+module.exports = FormErrors;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/form-for.react.js

@@ -0,0 +1,78 @@
+var Input = require('./input.react');
+var FormErrors = require('./form-errors.react');
+module.exports = FormFor = React.createClass({
+  render: function() {
+    if(Object.keys(this.props.object).length === 0) return(<div />);
+    return (
+      <form onSubmit={this.handleSubmit} className="form-for">
+        <FormErrors errors={this.props.errors} />
+        {this.inputs()}
+        <input type="submit"  value={this.submitText()} className="btn btn-default"/>
+      {this.renderCancelButton()}
+      </form>
+    );
+  },
+  inputs: function() {
+    var object = this.props.object;
+    var inputs = [];
+    Object.keys(object).forEach(function(key, i) {
+      var value = object[key];
+      var dataForInput = {value: value, name: key}
+      var options = this.options()[key] || {};
+      inputs.push(<Input key={key} ref={key} data={dataForInput} options={options}/>);
+    }.bind(this));
+    return inputs;
+  },
+  options: function() {
+    return this.props.options || {};
+  },
+  submitText: function() {
+    var submit = this.options().submit;
+    if(submit && submit.value) return submit.value
+    submit = this.props.object.id ? 'Update' : 'Create';
+    if(this.options().objectName) submit = submit + ' ' + this.options().objectName;
+    return submit;
+  },
+  handleSubmit: function(e) {
+    e.preventDefault();
+    var submitHandler = this.options().onSubmit
+    if(submitHandler) {
+      var data = {};
+      Object.keys(this.refs).forEach(function(ref) {
+        var value = this.getInputValue(ref);
+        data[ref] = value;
+      }.bind(this));
+      submitHandler(data, {clearInputs: this.clearInputs});
+    } else {
+      console.log("You must pass an onSubmit function in your options.");
+    }
+  },
+  renderCancelButton: function() {
+    if(!this.options().onCancel) return;
+    return(<input type="button" value="Cancel" onClick={this.handleCancel} />);
+  },
+  handleCancel: function() {
+    this.clearInputs();
+    this.options().onCancel();
+  },
+  getInputValue: function(ref) {
+    // find the ref component
+    // find the refs of the found component
+    // find the input ref from the found component
+    // get the getDOMNode and the value
+    if(this.refs[ref] && this.refs[ref].refs && this.refs[ref].refs.input && this.refs[ref].refs.input.getDOMNode) {
+      var input = this.refs[ref].refs.input.getDOMNode();
+      if(input.type === "checkbox") return input.checked;
+      return input.value;
+    }
+  },
+  // Utility function to clear inputs.
+  clearInputs: function() {
+    Object.keys(this.refs).forEach(function(ref) {
+      if(this.refs[ref] && this.refs[ref].refs && this.refs[ref].refs.input && this.refs[ref].refs.input.getDOMNode) {
+        this.refs[ref].refs.input.getDOMNode().value = "";
+      }
+    }.bind(this));
+  }
+
+});

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/hidden-input.react.js

@@ -0,0 +1,10 @@
+var HiddenInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="hidden" value={data.value} className={data.className} />
+    );
+  }
+
+});
+module.exports = HiddenInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/input.react.js

@@ -0,0 +1,92 @@
+var TextInput = require('./text-input.react');
+var CheckboxInput = require('./checkbox-input.react');
+var NumberInput = require('./number-input.react');
+var HiddenInput = require('./hidden-input.react');
+var SelectInput = require('./select-input.react');
+var PasswordInput = require('./password-input.react');
+var TextareaInput = require('./textarea-input.react');
+var DateInput = require('./date-input.react');
+var ColorInput = require('./color-input.react');
+var DatetimeInput = require('./datetime-input.react');
+var EmailInput = require('./email-input.react');
+var TimeInput = require('./time-input.react');
+var Input = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <div>
+        <div className="form-group">
+          {this.input()}
+        </div>
+      </div>
+    );
+  },
+  input: function() {
+    var data = this.props.data;
+    switch(this.type()) {
+      case 'boolean':
+        return(<span><CheckboxInput ref="input" data={{name: data.name, defaultChecked: data.value, className: this.props.options.className, value: data.value}} /><span>{this.placeholder()}</span></span>)
+        break;
+      case 'number':
+        return(<NumberInput ref="input" data={{name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}} />)
+        break;
+      case 'color':
+        return(<ColorInput ref="input" data={{name: data.name, defaultValue: data.value, className: this.props.options.className}} />)
+        break;
+      case 'email':
+        return(<EmailInput ref="input" data={{name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}} />)
+        break;
+      case 'date':
+        return(<DateInput ref="input" data={{name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}} />)
+        break;
+      case 'datetime':
+        return(<DatetimeInput ref="input" data={{name: data.name, defaultValue: data.value, className: this.props.options.className}} />)
+        break;
+      case 'time':
+        return(<TimeInput ref="input" data={{name: data.name, defaultValue: data.value, className: this.props.options.className}} />)
+        break;
+      case 'hidden':
+        return(<HiddenInput ref="input" data={{name: data.name, value: data.value, placeholder: this.placeholder(), className: this.props.options.className}} />)
+        break;
+      case 'select':
+        return(<SelectInput ref="input" data={{name: data.name, value: data.value, values: this.props.options.values , className: this.props.options.className}} />)
+        break;
+      case 'password':
+        return(<PasswordInput ref="input" data={{name: data.name, defaultChecked: data.value, placeholder: this.placeholder(), className: this.props.options.className}} />)
+        break;
+      case 'textarea':
+        return(<TextareaInput ref="input" data={{name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}} />)
+        break;
+      default:
+        return(<TextInput ref="input" data={{name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}} />)
+    }
+
+  },
+  type: function() {
+    var type = typeof(this.props.data.value);
+    if(this.props.options.type) type = this.props.options.type;
+    if(this.isId()) type = 'hidden';
+    if(this.isPassword()) type = 'password';
+    if(this.isEmail()) type = 'email';
+    return type;
+  },
+  isId: function() {
+    if(this.props.data.name === 'id') return true;
+    return false;
+  },
+  isPassword: function() {
+    if(this.props.data.name === 'password' || this.props.data.name === 'password_confirmation') return true;
+    return false;
+  },
+  isEmail: function() {
+    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if(this.props.data.name === 'email' || re.test(this.props.data.value)) return true;
+    return false;
+  },
+  placeholder: function() {
+    var name = this.props.options.placeholder || this.props.data.name;
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  }
+});
+
+module.exports = Input;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/number-input.react.js

@@ -0,0 +1,11 @@
+var NumberInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="number" defaultValue={data.defaultValue} placeholder={data.placeholder} className={data.className}/>
+    );
+  }
+
+});
+
+module.exports = NumberInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/options-for-select.react.js

@@ -0,0 +1,10 @@
+var OptionForSelect = React.createClass({
+
+  render: function() {
+    return (
+      <option value={this.props.value}>{this.props.show}</option>
+    );
+  }
+
+});
+module.exports = OptionForSelect;