Merge a2233f8 into 621ece6

README.md

@@ -28,6 +28,7 @@ var UIToolkit = require('ui-toolkit');
 <UIToolkit.Reviews />
 <UIToolkit.Tile />
 <UIToolkit.Image />
+<UIToolkit.Input />
 ```
 
 If you would like to cherry pick which components to include in your project, you can use this method:

docs/assets/style.css

@@ -131,3 +131,32 @@ article {
 .toolkit-example button {
   margin:.25em;
 }
+
+
+/* Components */
+.toolkit-example .input-group {
+  width: 100%;
+}
+
+.toolkit-example .input-group-label {
+  width: 18%;
+}
+
+.toolkit-example .input-group-field {
+  border: 1px solid #dddddd;
+  outline: none;
+  padding: 0 8px;
+  border-radius: 2px;
+}
+
+.toolkit-example .input-group-error .input-group-field {
+  border: 1px solid #c7254e;
+  color: #c7254e;
+  background-color: #f9f2f4;
+}
+
+.toolkit-example .input-group-error .input-group-span {
+  color: #c7254e;
+  display: inline-block;
+  margin-left: 15px;
+}

docs/examples/Input.jsx

@@ -0,0 +1,43 @@
+var text_validator = /^([a-z]+(-| )?)+$/i;
+var text_error_message = 'Invalid Name';
+
+var password_validator = /^(?=.*\d)(?=.*[a-zA-Z])(?!.*[\W_\x7B-\xFF]).{6,15}$/;
+var password_error_message = 'Password must be 6-20 characters including at least 1 upper or lower alpha, and 1 digit.';
+
+var email_validator = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
+var email_error_message = 'Invalid Email';
+
+var example = (
+  <div>
+    <UIToolkit.Input
+      type='text'
+      name='sample_text'
+      id='sample_text'
+      label='Name: '
+      placeholder='Full Name'
+      validator={text_validator}
+      errorMessage={text_error_message}
+      />
+    <UIToolkit.Input
+      type='email'
+      name='sample_email'
+      id='sample_email'
+      label='Email Address: '
+      placeholder='me@email.com'
+      validator={email_validator}
+      errorMessage={email_error_message}
+      />
+    <UIToolkit.Input
+      type='password'
+      name='sample_password'
+      id='sample_password'
+      label='Password: '
+      placeholder='Enter a Password'
+      validator={password_validator}
+      errorMessage={password_error_message}
+      />
+  </div>
+
+);
+
+React.render(example, mountNode);

docs/src/Components.jsx

@@ -81,6 +81,26 @@ var Components = React.createClass({
           </ul>
         </article>
 
+        <article>
+          <h3 id="input">Input</h3>
+          <p>Custom Input for Text, Password &amp; Email Types</p>
+          <CustomComponent codeText={fs.readFileSync(__dirname + '/../examples/Input.jsx', 'utf8')} />
+          <h4>Attributes</h4>
+          <ul>
+            <li><code>type</code> String - Type of Input Field [ text | password  | email ]</li>
+            <li><code>name</code> String - Optional Name for Input Field</li>
+            <li><code>id</code> String - Optional ID for Input Field</li>
+            <li><code>label</code> String - Optional Label in front of Input Field</li>
+            <li><code>placeholder</code> String - Optional Placeholder for Input Field</li>
+            <li><code>defaultValue</code> String - Optional Default Value for Input Field</li>
+            <li><code>validator</code> String - Optional Regular Expression to Validate Input</li>
+            <li><code>errorMessage</code> String - Optional Error Message to show if <code>validator</code> returns false</li>
+            <li><code>disabled</code> Boolean - Whether to Disable the Input Field</li>
+            <li><code>readOnly</code> Boolean - Whether to set the Input Field to Read Only</li>
+            <li><code>required</code> Boolean - Whether to set the Input Field to be Required</li>
+          </ul>
+        </article>
+
       </section>
     );
   }

docs/src/Nav.jsx

@@ -22,6 +22,7 @@ var Nav = React.createClass({
               <li><a href="#rating">Rating</a></li>
               <li><a href="#image">Image</a></li>
               <li><a href="#tile">Tile</a></li>
+              <li><a href="#input">Input</a></li>
             </ul>
           </li>
         </ul>

src/components/input/__tests__/input-test.js

@@ -0,0 +1,67 @@
+/** @jsx React.DOM */
+
+var InputView = require('../code/views/inputView.jsx');
+
+describe('InputComponent', function() {
+
+  it('should render text input', function() {
+    var input = TestUtils.renderIntoDocument(
+      <InputView type="text" />
+    );
+
+    var renderedInput = TestUtils.findRenderedDOMComponentWithClass(input, 'component-input');
+    assert.isDefined(renderedInput);
+
+  });
+
+  it('should render password input', function() {
+    var input = TestUtils.renderIntoDocument(
+      <InputView type="password" />
+    );
+
+    var renderedInput = TestUtils.findRenderedDOMComponentWithClass(input, 'component-input');
+    assert.isDefined(renderedInput);
+
+  });
+
+  it('should render email input', function() {
+    var input = TestUtils.renderIntoDocument(
+      <InputView type="email" />
+    );
+
+    var renderedInput = TestUtils.findRenderedDOMComponentWithClass(input, 'component-input');
+    assert.isDefined(renderedInput);
+
+  });
+
+  it('should render input with label', function() {
+    var input = TestUtils.renderIntoDocument(
+      <InputView type="text" label="Full Name" />
+    );
+
+    var renderedInput = TestUtils.findRenderedDOMComponentWithClass(input, 'input-group-label');
+    assert.isDefined(renderedInput);
+
+  });
+
+  it('should render input as disabled', function() {
+    var input = TestUtils.renderIntoDocument(
+      <InputView type="text" disabled />
+    );
+
+    var renderedInput = TestUtils.findRenderedDOMComponentWithClass(input, 'component-input-field');
+    assert.equal(renderedInput.getDOMNode().getAttribute('disabled'), '');
+
+  });
+
+  it('should render input as readonly', function() {
+    var input = TestUtils.renderIntoDocument(
+      <InputView type="text" readOnly />
+    );
+
+    var renderedInput = TestUtils.findRenderedDOMComponentWithClass(input, 'component-input-field');
+    assert.equal(renderedInput.getDOMNode().getAttribute('readonly'), '');
+
+  });
+
+});

src/components/input/code/index.js

@@ -0,0 +1 @@
+module.exports = require('./views/inputView.jsx');

src/components/input/code/templates/inputTemplate.jsx

@@ -0,0 +1,49 @@
+var React = require('react');
+var classNames = require('classnames');
+
+module.exports = function (component){
+
+  var classes = classNames('input-group', {
+    'component-input': true,
+    'input-group-error': component.state.error || false,
+    'input-group-disabled': component.props.disabled || false
+  });
+
+  // the form label
+  var label;
+
+  if (component.props.label){
+    label = ( <label className="component-input-label input-group-label" htmlFor={component.props.id}>{component.props.label}</label > );
+  }
+
+  /**
+   * Create the span element used for containing messages
+   * related to the element.
+   */
+  var span;
+
+  if (component.state.error)
+  {
+    span = ( <span className="input-group-span component-input-error">{component.state.error}</span> );
+  }
+
+  return (
+    <div className={classes} ref={component.props.ref}>
+      {label}
+      <input
+        className="input-group-field component-input-field"
+        type={component.props.type}
+        valid={component.state.valid}
+        name={component.props.name}
+        id={component.props.id}
+        placeholder={component.props.placeholder}
+        onChange={component.changeHandler}
+        defaultValue={component.props.defaultValue}
+        disabled={component.props.disabled}
+        readOnly={component.props.readOnly}
+        required={component.props.required}
+        />
+      {span}
+    </div>
+  );
+};

src/components/input/code/views/inputView.jsx

@@ -0,0 +1,58 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    label: React.PropTypes.string,
+    type: React.PropTypes.oneOf(['text', 'password', 'email']),
+    placeholder: React.PropTypes.string,
+    defaultValue: React.PropTypes.string,
+    name: React.PropTypes.string,
+    id: React.PropTypes.string,
+    error: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    readOnly: React.PropTypes.bool,
+    required: React.PropTypes.bool,
+    valid: React.PropTypes.bool,
+    errorMessage: React.PropTypes.string,
+    onChange: React.PropTypes.func
+  },
+
+  getInitialState: function() {
+    return {
+      value: this.props.defaultValue || '',
+      error: null,
+      valid: true
+    }
+  },
+
+  getDefaultProps: function() {
+    return {
+      type: 'text',
+      disabled: false,
+      readOnly: false,
+      required: false,
+      onChange: this.changeHandler,
+      errorMessage: null
+    }
+  },
+
+  changeHandler: function(e) {
+
+    var is_valid = true;
+
+    if(typeof this.props.validator !== 'undefined'){
+      is_valid = this.props.validator.test(e.target.value);
+    }
+
+    if( !is_valid){
+      this.setState({ error : this.props.errorMessage });
+    }
+
+    this.setState({ valid : is_valid });
+  },
+
+  render: function() {
+    return require('../templates/inputTemplate.jsx')(this);
+  }
+});

src/components/input/index.js

@@ -0,0 +1 @@
+module.exports = require('./code/index');

src/components/input/scripts/build-dev.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -z "$VARIANT" ]; then VARIANT=''; fi
+if [ -z "$TEMPLATE_LANG" ]; then TEMPLATE_LANG='en'; fi
+
+echo "Building package for demo. Variant: '$VARIANT', language: '$TEMPLATE_LANG'."
+
+browserify -t [ redirectify --dir "$VARIANT" ] -t reactify dev/example.jsx -o dev/ui-component-email.js

src/components/input/scripts/build-dist.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -z "$VARIANT" ]; then VARIANT=''; fi
+if [ -z "$TEMPLATE_LANG" ]; then TEMPLATE_LANG='en'; fi
+
+echo "Building package for demo. Variant: '$VARIANT', language: '$TEMPLATE_LANG'."
+
+browserify -t [ redirectify --dir "$VARIANT" ] -t reactify index.js --standalone ui-component-email > dist/ui-component-email-standalone.js

src/ui-toolkit.js

@@ -7,5 +7,6 @@ UIToolkit.Rating = require('./components/rating');
 UIToolkit.Reviews = require('./components/reviews');
 UIToolkit.Tile = require('./components/tile');
 UIToolkit.Image = require('./components/image');
+UIToolkit.Input = require('./components/input');
 
 module.exports = UIToolkit;