Initial release

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

README.md

@@ -1,2 +1,198 @@
 # formsy-material-ui
-A Formsy wrapper for Material-UI form components
+A [Formsy](https://github.com/christianalfoni/formsy-react) compatibility wrapper for [Material-UI](http://material-ui.com/) form components.
+
+##Usage
+
+###ES5:
+
+```js
+VAR FMUI = require('formsy-material-ui');
+var FormsyCheckbox = FMUI.Checkbox;
+var FormsyDate = FMUI.Date;
+var FormsyRadio = FMUI.Radio;
+var FormsySelect = FMUI.Select;
+var FormsyText = FMUI.Text;
+var FormsyTime = FMUI.Time;
+var FormsyToggle = FMUI.Toggle;
+```
+
+###ES6:
+
+```js
+let FMUI = require('formsy-material-ui');
+let {FormsyCheckbox, FormsyDate, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;
+```
+
+###Example:
+
+```jsx
+let FMUI = require('formsy-material-ui');
+let {FormsyCheckbox, FormsyDate, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;
+let { RaisedButton } = MUI;
+
+NewEventForm = React.createClass({
+
+  getDefaultProps: function () {
+    return {
+      errorMessages: {
+        wordsError: "Please only use letters",
+        numericError: "Please provide a number",
+        urlError: "Please provide a valid URL"
+      }
+    };
+  },
+
+  getInitialState: function () {
+    return {
+      canSumbit: false
+    };
+  },
+
+  getStyles () {
+    return {
+      form: {
+        float: 'left',
+        margin: 16,
+        width: 320
+      },
+      submit: {
+        float: 'left',
+        clear: 'left',
+        marginTop: 32
+      }
+    };
+  },
+
+  selectFieldItems: [
+    { payload: 'never', text: 'Never' },
+    { payload: 'nightly', text: 'Every Night' },
+    { payload: 'weeknights', text: 'Weeknights' },
+    { payload: 'weekends', text: 'Weekends' },
+    { payload: 'weekly', text: 'Weekly' }
+  ],
+
+  enableButton: function () {
+    this.setState({
+      canSubmit: true
+    });
+  },
+
+  disableButton: function () {
+    this.setState({
+      canSubmit: false
+    });
+  },
+
+  submitForm: function (model) {
+    console.log("Model: ", model);
+    Dispatcher.dispatch( { actionType: "CREATE_NEW_EVENT", data: model } );
+  },
+
+  notifyFormError: function (model) {
+    console.error('Form error:', model);
+  },
+
+  render: function () {
+    let styles = this.getStyles();
+    let { wordsError, numericError, urlError } = this.props.errorMessages;
+
+    return (
+      <div style={styles.form} className="none">
+        <Formsy.Form
+          onValid={this.enableButton}
+          onInvalid={this.disableButton}
+          onValidSubmit={this.submitForm}
+          onInvalidSubmit={this.notifyFormError}
+          style={styles.form}
+          mapping={this.mapInputs} >
+
+          <FormsyText
+            name='eventName'
+            validations='isWords'
+            validationError={wordsError}
+            required
+            hintText="What is the name of the event?"
+            floatingLabelText="Event name" />
+
+          <FormsyText
+            name='organiser'
+            validations='isWords'
+            validationError={wordsError}
+            required
+            hintText="Who is organising this event?"
+            floatingLabelText="Organiser" />
+
+          <FormsyText
+            name='locationName'
+            validations='isWords'
+            validationError={wordsError}
+            required
+            hintText="Where is the event being held?"
+            floatingLabelText="Location" />
+
+          <FormsySelect
+            name='select'
+            required
+            floatingLabelText="Label"
+            menuItems={this.selectFieldItems}/>
+
+          <FormsyDate
+            name='date'
+            required
+            floatingLabelText="Date" />
+
+          <FormsyTime
+            name='time'
+            required
+            floatingLabelText="Time" />
+
+          <FormsyCheckbox
+            name='checkbox'
+            value={false}
+            label="Checkbox" />
+
+          <FormsyToggle
+            name='toggle'
+            value={false}
+            label="Toggle" />
+
+          <FormsyRadioGroup name="shipSpeed" defaultSelected="not_light">
+            <FormsyRadio
+              value="light"
+              label="prepare for light speed"
+              style={{marginBottom:16}} />
+            <FormsyRadio
+              value="not_light"
+              label="light speed too slow"
+              style={{marginBottom:16}}/>
+            <FormsyRadio
+              value="ludicrous"
+              label="go to ludicrous speed"
+              style={{marginBottom:16}}
+              disabled={true}/>
+          </FormsyRadioGroup>
+
+          <RaisedButton
+            style={styles.submit}
+            type="submit"
+            label="Submit"
+            disabled={!this.state.canSubmit} />
+        </Formsy.Form>
+      </div>
+    );
+  }
+});
+```
+
+## Known Issues
+
+`required` is not being enforced on directly on the SelectField component, 
+it does correctly affect `canSubmit` state however, so use that to disable the submit button as in the example above.
+
+## Release History
+
+* 0.1.0 Initial release
+
+## Acknowledgements
+Based on an example from: https://github.com/rblakeley/pro-camper/blob/master/app/components/Form.js
+

formsy-material-ui.jsx

@@ -0,0 +1,141 @@
+'use strict';
+
+let React = require('react');
+let Formsy = require('formsy-react');
+let MUI = require('material-ui');
+
+let { Checkbox, DatePicker, RadioButtonGroup, SelectField, TextField, TimePicker, Toggle } = MUI;
+
+let FormComponentMixin = {
+  propTypes: {
+    name: React.PropTypes.string.isRequired,
+    validations: React.PropTypes.string,
+    validationError: React.PropTypes.string,
+    hintText: React.PropTypes.string,
+    floatingLabelText: React.PropTypes.string
+  },
+
+  handleChange: function (event) {
+    this.setValue(event.currentTarget.value);
+  },
+
+  handleValueChange: function (event, value) {
+    this.setValue(value);
+  }
+
+};
+
+let FormsyCheckbox = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin ],
+
+  render: function () {
+
+    return (
+      <Checkbox
+        {...this.props}
+        onChange={this.handleValueChange}
+        value={this.getValue()} />
+    );
+  }
+});
+
+let FormsyDate = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin ],
+
+  render: function () {
+    return (
+      <DatePicker
+        formatDate={(date) => date.toISOString().substring(0,10)}
+        {...this.props}
+        onChange={this.handleValueChange} />
+    );
+  }
+});
+
+let FormsyRadio = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin ],
+
+  // Material-UI replaces any component inside RadioButtonGroup with RadioButton, so no need to render it here
+  render: function () {}
+});
+
+let FormsyRadioGroup = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin ],
+
+  componentDidMount: function () {
+    this.setValue(this._radio.getSelectedValue());
+  },
+
+  render: function () {
+    return (
+      <RadioButtonGroup
+        {...this.props}
+        ref={(c) => this._radio = c}
+        onChange={this.handleValueChange} >
+        {this.props.children}
+      </RadioButtonGroup>
+    );
+  }
+});
+
+let FormsySelect = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin],
+
+  render: function () {
+    return (
+      <SelectField
+        {...this.props}
+        onChange={this.handleChange}
+        value={this.getValue()} />
+    );
+  }
+});
+
+let FormsyText = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin ],
+
+  render: function () {
+    return (
+      <TextField
+        {...this.props}
+        onChange={this.handleChange}
+        value={this.getValue()}
+        errorText={this.getErrorMessage()} />
+    );
+  }
+});
+
+let FormsyTime = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin ],
+
+  render: function () {
+    return (
+      <TimePicker
+        {...this.props}
+        onChange={this.handleValueChange} />
+    );
+  }
+});
+
+let FormsyToggle = React.createClass({
+  mixins: [ Formsy.Mixin, FormComponentMixin ],
+
+  render: function () {
+    return (
+      <Toggle
+        {...this.props}
+        onToggle={this.handleValueChange}
+        value={this.getValue()} />
+    );
+  }
+});
+
+module.exports = {
+  FormsyCheckbox: FormsyCheckbox,
+  FormsyDate: FormsyDate,
+  FormsyRadio: FormsyRadio,
+  FormsySelect: FormsySelect,
+  FormsyText: FormsyText,
+  FormsyTime: FormsyTime,
+  FormsyToggle: FormsyToggle
+};