add input component with auto-resize on input

web/app/components/input/index.js

@@ -0,0 +1,3 @@
+export { default } from './input';
+
+require('./input.scss');

web/app/components/input/input.jsx

@@ -0,0 +1,25 @@
+import { h, Component } from 'preact';
+
+export default class Input extends Component {
+  constructor(props) {
+    super(props);
+
+    this.autoResize = this.autoResize.bind(this);
+  }
+
+  autoResize() {
+    this.rootNode.style.height = '';
+    this.setState({ height: this.rootNode.scrollHeight });
+  }
+
+  render(props, { height }) {
+    return (
+      <textarea
+        className={b('input', props)}
+        onInput={this.autoResize}
+        style={{ height }}
+        ref={r => (this.rootNode = r)}
+      >{props.children}</textarea>
+    );
+  }
+}

web/app/components/input/input.scss

@@ -0,0 +1,24 @@
+.input {
+  $lineHeight: 1.4;
+  $fontSize: 16px;
+  $paddingVrt: 10px;
+  $height: $fontSize * $lineHeight + $paddingVrt * 2;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: $height;
+  min-height: $height;
+  padding: $paddingVrt 15px;
+  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  box-shadow: 0 0 0 1px #eee;
+  border: 0;
+  border-radius: 4px;
+  resize: none;
+
+  &:focus {
+    box-shadow: 0 0 0 1px #aaa;
+    outline: none;
+  }
+}