Switch from field components to input components

src/components/inputs/CheckboxInput.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import input from '../../config/input.js'
+import colors from '../../config/colors'
+import { margins } from '../../config/scales'
+
+class CheckboxInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.string,
+    style: React.PropTypes.object,
+    onChange: React.PropTypes.func,
+  }
+
+  render() {
+    const styles = {
+			root: {
+        ...input.base,
+        padding: 0,
+				position: 'relative',
+        textAlign: 'center ',
+				cursor: 'pointer'
+			},
+			input: {
+				position: 'absolute',
+				zIndex: -1,
+				opacity: 0
+			},
+			box: {
+				display: 'inline-block',
+        textAlign: 'center ',
+        height: 15,
+        width: 15,
+				marginRight: margins[1],
+				marginBottom: null,
+				backgroundColor: colors.gray,
+				borderRadius: 2,
+				borderStyle: 'solid',
+				borderWidth: 2,
+				borderColor: colors.gray,
+				transition: 'background-color .1s ease-out'
+			},
+			icon: {
+				display: this.props.value ? null : 'none',
+				width: '75%',
+				height: '75%',
+				marginTop: 1,
+				fill: colors.lowgray
+			}
+    }
+
+		return <label style={styles.root}>
+      <input
+				type="checkbox"
+				style={{
+          ...styles.input,
+					...this.props.style,
+				}}
+				onChange={e => {this.props.onChange(!this.props.value)}}
+				checked={this.props.value}
+			/>
+      <div style={styles.box}>
+        <svg
+          viewBox='0 0 32 32'
+          style={styles.icon}>
+          <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
+        </svg>
+		  </div>
+		</label>
+  }
+}
+
+export default CheckboxInput

src/components/inputs/NumberInput.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import input from '../../config/input.js'
+
+class NumberInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.number,
+    style: React.PropTypes.object,
+    default: React.PropTypes.number,
+    min: React.PropTypes.number,
+    max: React.PropTypes.number,
+    onChange: React.PropTypes.func,
+  }
+
+  onChange(e) {
+    const value = parseFloat(e.target.value)
+    /*TODO: we can do range validation already here?
+    if(this.props.min && value < this.props.min) return
+    if(this.props.max && value > this.props.max) return
+    */
+
+    if(isNaN(value)) {
+      this.props.onChange(this.props.default)
+    } else {
+      this.props.onChange(value)
+    }
+  }
+
+  render() {
+    let stepSize = null
+    if(this.props.max && this.props.min) {
+      stepSize = (this.props.max - this.props.min) / 10
+    }
+
+    return <input
+      style={{
+        ...input.input,
+        ...this.props.style
+      }}
+      type={"number"}
+      min={this.props.min}
+      max={this.props.max}
+      step={stepSize}
+      placeholder={this.props.default}
+      value={this.props.value}
+      onChange={this.onChange.bind(this)}
+    />
+  }
+}
+
+export default NumberInput