add input component and example (#205)

This is a v. basic implementation of an input component there's a fair bit that could be added (down the line I think) like some padding, Events (mouse, focus etc), but this is a starting point for that.

### Updated
* Position cursor on the left when placeholder is present
* Add padding so text isn't flush with border
* Added text cursor
* Added mouse focusing
* add props to allow for more styling

![input-2](https://user-images.githubusercontent.com/22454918/51420683-244e6680-1b8c-11e9-8fba-c5a4bfd81dc3.gif)

### Issues/Bugs discovered

* I've found that trying to use an effect based on state, when the effect has be specified as on mount means the state value is in a closure __I think__, though switching to `Always` means that a handler is never missed, example

```reason
let ... = React.Hooks.effect(
  Always, /* if always this handler overrides any other handler registered for the same event*/
  (event) => 
    Some(
     Event.subscribe(
       window.keyDown,
       ()  => {
        if (state.isFocused) {
          onChange(state.value) /* on mount this value is old */
         }
       }
    )
  )
```

examples/Examples.re

@@ -30,18 +30,18 @@ let state: state = {
     {name: "Box Shadow", render: _ => Boxshadow.render()},
     {name: "Focus", render: _ => Focus.render()},
     {name: "Stopwatch", render: _ => Stopwatch.render()},
+    {name: "Input", render: w => InputExample.render(w)},
   ],
   selectedExample: "Animation",
 };
 
 let noop = () => ();
 
 let getRenderFunctionSelector: (state, Window.t) => React.syntheticElement =
-  (s: state) => {
+  (s: state) =>
     List.filter(x => String.equal(x.name, s.selectedExample), state.examples)
     |> List.hd
     |> (a => a.render);
-  };
 
 module ExampleButton = {
   let component = React.component("ExampleButton");

examples/InputExample.re

@@ -0,0 +1,70 @@
+open Revery.UI;
+open Revery.Core;
+open Revery.UI.Components;
+
+let containerStyle =
+  Style.make(
+    ~position=LayoutTypes.Absolute,
+    ~top=0,
+    ~bottom=0,
+    ~left=0,
+    ~right=0,
+    ~alignItems=LayoutTypes.AlignCenter,
+    ~justifyContent=LayoutTypes.JustifyCenter,
+    ~flexDirection=LayoutTypes.Column,
+    ~backgroundColor=Colors.white,
+    (),
+  );
+
+module Example = {
+  type inputFields = {
+    first: string,
+    second: string,
+  };
+  let textStyles =
+    Style.make(
+      ~fontSize=30,
+      ~fontFamily="Roboto-Regular.ttf",
+      ~color=Colors.black,
+      ~marginBottom=30,
+      (),
+    );
+  let component = React.component("Example");
+
+  let make = window =>
+    component(slots => {
+      let ({first, second}, setValue, _slots: React.Hooks.empty) =
+        React.Hooks.state({first: "", second: ""}, slots);
+      let customShadow =
+        Style.BoxShadow.make(
+          ~xOffset=-5.,
+          ~yOffset=2.,
+          ~color=Colors.black,
+          ~blurRadius=20.,
+          (),
+        );
+
+      <View style=containerStyle>
+        <Input
+          window
+          placeholder="Insert text here"
+          onChange={(~value) => setValue({first: value, second})}
+        />
+        <Input
+          backgroundColor=Colors.paleVioletRed
+          color=Colors.white
+          margin=20
+          boxShadow=customShadow
+          window
+          placeholder="custom input"
+          placeholderColor=Colors.plum
+          onChange={(~value) => setValue({first, second: value})}
+        />
+      </View>;
+    });
+
+  let createElement = (~window, ~children as _, ()) =>
+    React.element(make(window));
+};
+
+let render = window => <Example window />;

src/Revery.re

@@ -3,13 +3,13 @@ module Geometry = Revery_Geometry;
 module Math = Revery_Math;
 module Shaders = Revery_Shaders;
 module UI = {
-    include Revery_UI;
+  include Revery_UI;
 
-    /* 
-       Include Components such that consumers access it via:
-       Revery.UI.Components
-     */
-    module Components = Revery_UI_Components;
+  /*
+     Include Components such that consumers access it via:
+     Revery.UI.Components
+   */
+  module Components = Revery_UI_Components;
 };
 module App = Core.App;
 module Window = Core.Window;

src/UI_Components/Button.re

@@ -59,7 +59,7 @@ let createElement =
       ~disabled=false,
       ~fontFamily="Roboto-Regular.ttf",
       (),
-    ) => {
+    ) =>
   React.element(
     make(
       ~title,
@@ -76,4 +76,3 @@ let createElement =
       (),
     ),
   );
-};