Support 'number' and 'boolean' prop types.

src/components/PropField.js

@@ -4,6 +4,7 @@ const stylesheet = {
   input: {
     display: 'table-cell',
     boxSizing: 'border-box',
+    verticalAlign: 'middle',
     height: '26px',
     width: '100%',
     outline: 'none',
@@ -43,12 +44,17 @@ export default class PropField extends React.Component {
   constructor(props) {
     super(props);
     this._onChange = this.onChange.bind(this);
+    this._onChangeBool = this.onChangeBool.bind(this);
   }
 
   onChange(e) {
     this.props.onChange(this.props.name, e.target.value);
   }
 
+  onChangeBool(e) {
+    this.props.onChange(this.props.name, e.target.checked);
+  }
+
   render() {
     const type = this.props.type;
 
@@ -76,6 +82,31 @@ export default class PropField extends React.Component {
       );
     }
 
+    if (type === 'number') {
+      inputElem = (
+        <input
+          id={this.props.name}
+          style={stylesheet.input}
+          value={this.props.value}
+          type="number"
+          onChange={this._onChange}
+        />
+      );
+    }
+
+    if (type === 'boolean') {
+      inputElem = (
+        <input
+          id={this.props.name}
+          style={stylesheet.input}
+          checked={this.props.value}
+          value={this.props.value}
+          type="checkbox"
+          onChange={this._onChangeBool}
+        />
+      );
+    }
+
     return (
       <div style={stylesheet.field}>
         <label htmlFor={this.props.name} style={stylesheet.label}>
@@ -89,7 +120,11 @@ export default class PropField extends React.Component {
 
 PropField.propTypes = {
   name: React.PropTypes.string.isRequired,
-  value: React.PropTypes.string.isRequired,
-  type: React.PropTypes.string,
   onChange: React.PropTypes.func.isRequired,
+  type: React.PropTypes.oneOf(['text', 'object', 'number', 'boolean']),
+  value: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number,
+    React.PropTypes.bool,
+  ]).isRequired
 };

src/stories/Button.js

@@ -9,10 +9,11 @@ const buttonStyles = {
   padding: '3px 10px',
 };
 
-const Button = ({ onClick, style, color = '#FFFFFF', children = 'Button' }) => (
+const Button = ({ onClick, style, color = '#FFFFFF', width = 70, children = 'Button', disabled = false }) => (
   <button
-    style={{ ...buttonStyles, ...style, ...{ backgroundColor: color } }}
+    style={{ ...buttonStyles, ...style, ...{ backgroundColor: color, width: `${width}px` } }}
     onClick={onClick}
+    disabled={disabled}
   >
     {children}
   </button>
@@ -22,6 +23,8 @@ Button.propTypes = {
   children: React.PropTypes.string.isRequired,
   onClick: React.PropTypes.func,
   color: React.PropTypes.string,
+  number: React.PropTypes.number,
+  disabled: React.PropTypes.bool,
   style: React.PropTypes.object,
 };
 

src/stories/index.js

@@ -8,7 +8,6 @@ storiesOf('Button', module)
   .add('default view', wrap(() => (
     <Button
       onClick={ action('button clicked') }
-      color={createKnob('color', '#fff')}
       style={createKnob('style', { width: '70px' }, 'object')}
     >
       {createKnob('children', 'Hello')}
@@ -18,6 +17,8 @@ storiesOf('Button', module)
     <Button
       onClick={ action('button clicked') }
       color={createKnob('color', '#abc')}
+      width={createKnob('width(px)', 70, 'number')}
+      disabled={createKnob('disabled', false, 'boolean')}
     >
       {createKnob('text', 'Hello')}
     </Button>