From 2cf4980ba4db79033f948a309d38cbe4cdf00cec Mon Sep 17 00:00:00 2001
From: jeremyscatigna <scatignaj@me.com>
Date: Tue, 29 Jan 2019 21:01:50 +0100
Subject: [PATCH 1/3] WIP implement Button + Input exemples

---
 examples/Controls.re | 85 ++++++++++++++++++++++++++++++++++++++++++++
 examples/Examples.re |  8 ++---
 2 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 examples/Controls.re

diff --git a/examples/Controls.re b/examples/Controls.re
new file mode 100644
index 000000000..1d8d4cd95
--- /dev/null
+++ b/examples/Controls.re
@@ -0,0 +1,85 @@
+open Revery.UI;
+open Revery.UI.Components;
+open Revery.Core;
+
+module Controls = {
+  let component = React.component("Controls");
+
+  type inputFields = {
+    first: string,
+    second: string,
+  };
+
+  let make = window =>
+    component(slots => {
+      let (count, setCount, slots) = React.Hooks.state(0, slots);
+      let ({first, second}: inputFields, setValue, _slots: React.Hooks.empty) =
+        React.Hooks.state({first: "", second: ""}, slots);
+
+      let increment = () => setCount(count + 1);
+
+      let containerStyle =
+        Style.[justifyContent(`Center), alignItems(`Center)];
+
+      let countContainer =
+        Style.[
+          width(200),
+          height(200),
+          alignItems(`Center),
+          justifyContent(`Center),
+        ];
+
+      let countStyle =
+        Style.[
+          fontSize(50),
+          margin(24),
+          color(Colors.white),
+          fontFamily("Roboto-Regular.ttf"),
+        ];
+
+      let textStyles =
+        Style.[
+          fontSize(30),
+          fontFamily("Roboto-Regular.ttf"),
+          color(Colors.black),
+          marginBottom(30),
+        ];
+
+      let countStr = string_of_int(count);
+      <View style=containerStyle>
+        <View style=countContainer>
+          <Text style=countStyle text=countStr />
+        </View>
+        <Button title="click me!" onClick=increment />
+        <Button disabled=true title="(disabled)" onClick=increment />
+        <Input
+          window
+          placeholder="Insert text here"
+          onChange={(~value) => setValue({first: value, second})}
+        />
+        <Input
+          window
+          placeholder="custom input"
+          placeholderColor=Colors.plum
+          cursorColor=Colors.white
+          onChange={(~value) => setValue({first, second: value})}
+          style=Style.[
+            backgroundColor(Colors.paleVioletRed),
+            color(Colors.white),
+            margin(20),
+            boxShadow(
+              ~xOffset=-5.,
+              ~yOffset=2.,
+              ~color=Colors.black,
+              ~blurRadius=20.,
+              ~spreadRadius=0.,
+            ),
+          ]
+        />
+      </View>;
+    });
+
+  let createElement = (~children as _, ()) => React.element(make());
+};
+
+let render = () => <Controls window />;
\ No newline at end of file
diff --git a/examples/Examples.re b/examples/Examples.re
index 24bdaecac..3fd46b74d 100644
--- a/examples/Examples.re
+++ b/examples/Examples.re
@@ -25,9 +25,7 @@ type state = {
 let state: state = {
   examples: [
     {name: "Animation", render: _w => Hello.render()},
-    {name: "Button", render: _ => DefaultButton.render()},
-    {name: "Checkbox", render: _ => CheckboxExample.render()},
-    {name: "Slider", render: _ => SliderExample.render()},
+    {name: "Controls", render: _ => Controls.render()},
     {name: "Border", render: _ => Border.render()},
     {name: "Overflow", render: _w => Overflow.render()},
     {name: "Calculator", render: w => Calculator.render(w)},
@@ -35,8 +33,6 @@ 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)},
-    {name: "Radio Button", render: _ => RadioButtonExample.render()},
     {name: "Game Of Life", render: _ => GameOfLife.render()},
   ],
   selectedExample: "Animation",
@@ -180,4 +176,4 @@ let init = app => {
   UI.start(win, render);
 };
 
-App.startWithState(state, reducer, init);
+App.startWithState(state, reducer, init);
\ No newline at end of file

From b36ecbde26634a2f998ae3ce417d13f7fc2e7368 Mon Sep 17 00:00:00 2001
From: jeremyscatigna <scatignaj@me.com>
Date: Wed, 30 Jan 2019 14:42:11 +0100
Subject: [PATCH 2/3] fix The type constructor inputFields would escape its
 scope error

---
 esy.lock/index.json  | 14 +++++++-------
 examples/Controls.re | 17 +++++------------
 examples/Examples.re |  4 +---
 package.json         | 11 +++++++----
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/esy.lock/index.json b/esy.lock/index.json
index e2863ba2d..db8c322dd 100644
--- a/esy.lock/index.json
+++ b/esy.lock/index.json
@@ -1,5 +1,5 @@
 {
-  "checksum": "1d81663c61856d7ddee79cf574285e40",
+  "checksum": "0cbd792b49053bb13fc29babeb98f050",
   "root": "revery@link:./package.json",
   "node": {
     "revery@link:./package.json": {
@@ -9,7 +9,7 @@
       "source": { "type": "link", "path": ".", "manifest": "package.json" },
       "overrides": [],
       "dependencies": [
-        "reason-glfw@3.2.1012@d41d8cd9",
+        "refmterr@3.1.10@d41d8cd9", "reason-glfw@3.2.1013@d41d8cd9",
         "reason-gl-matrix@0.9.9302@d41d8cd9",
         "reason-fontkit@2.0.6@d41d8cd9", "ocaml@4.7.1003@d41d8cd9",
         "flex@1.2.2@d41d8cd9", "@opam/lwt_ppx@opam:1.2.1@db1172a7",
@@ -66,14 +66,14 @@
       ],
       "devDependencies": []
     },
-    "reason-glfw@3.2.1012@d41d8cd9": {
-      "id": "reason-glfw@3.2.1012@d41d8cd9",
+    "reason-glfw@3.2.1013@d41d8cd9": {
+      "id": "reason-glfw@3.2.1013@d41d8cd9",
       "name": "reason-glfw",
-      "version": "3.2.1012",
+      "version": "3.2.1013",
       "source": {
         "type": "install",
         "source": [
-          "archive:https://registry.npmjs.org/reason-glfw/-/reason-glfw-3.2.1012.tgz#sha1:c1c4383a235a29090fd2ed6f790cd1e7ffdd17ef"
+          "archive:https://registry.npmjs.org/reason-glfw/-/reason-glfw-3.2.1013.tgz#sha1:042b0bdcde972a558c28bcfcefad0a2b1facd062"
         ]
       },
       "overrides": [],
@@ -120,7 +120,7 @@
       },
       "overrides": [],
       "dependencies": [
-        "refmterr@3.1.10@d41d8cd9", "reason-glfw@3.2.1012@d41d8cd9",
+        "refmterr@3.1.10@d41d8cd9", "reason-glfw@3.2.1013@d41d8cd9",
         "reason-gl-matrix@0.9.9302@d41d8cd9",
         "esy-harfbuzz@1.9.1005@d41d8cd9", "esy-freetype2@2.9.1006@d41d8cd9",
         "esy-cmake@0.3.5@d41d8cd9", "@opam/dune@opam:1.6.3@a7d7baed",
diff --git a/examples/Controls.re b/examples/Controls.re
index 1d8d4cd95..5ac2e0580 100644
--- a/examples/Controls.re
+++ b/examples/Controls.re
@@ -3,16 +3,16 @@ open Revery.UI.Components;
 open Revery.Core;
 
 module Controls = {
-  let component = React.component("Controls");
-
   type inputFields = {
     first: string,
     second: string,
   };
 
+  let component = React.component("Controls");
   let make = window =>
     component(slots => {
       let (count, setCount, slots) = React.Hooks.state(0, slots);
+
       let ({first, second}: inputFields, setValue, _slots: React.Hooks.empty) =
         React.Hooks.state({first: "", second: ""}, slots);
 
@@ -37,14 +37,6 @@ module Controls = {
           fontFamily("Roboto-Regular.ttf"),
         ];
 
-      let textStyles =
-        Style.[
-          fontSize(30),
-          fontFamily("Roboto-Regular.ttf"),
-          color(Colors.black),
-          marginBottom(30),
-        ];
-
       let countStr = string_of_int(count);
       <View style=containerStyle>
         <View style=countContainer>
@@ -79,7 +71,8 @@ module Controls = {
       </View>;
     });
 
-  let createElement = (~children as _, ()) => React.element(make());
+  let createElement = (~window, ~children as _, ()) =>
+    React.element(make(window));
 };
 
-let render = () => <Controls window />;
\ No newline at end of file
+let render = window => <Controls window />;
\ No newline at end of file
diff --git a/examples/Examples.re b/examples/Examples.re
index 3fd46b74d..37d090528 100644
--- a/examples/Examples.re
+++ b/examples/Examples.re
@@ -2,8 +2,6 @@ open Revery;
 open Revery.Core;
 /* open Revery.Math; */
 
-module SliderExample = Slider;
-
 open Revery.UI;
 open Revery.UI.Components;
 
@@ -25,7 +23,7 @@ type state = {
 let state: state = {
   examples: [
     {name: "Animation", render: _w => Hello.render()},
-    {name: "Controls", render: _ => Controls.render()},
+    {name: "Controls", render: w => Controls.render(w)},
     {name: "Border", render: _ => Border.render()},
     {name: "Overflow", render: _w => Overflow.render()},
     {name: "Calculator", render: w => Calculator.render(w)},
diff --git a/package.json b/package.json
index 70e4ee5a4..2c8ce3dbf 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,9 @@
   "version": "0.5.1",
   "description": "App toolkit built with Reason",
   "license": "MIT",
-  "bugs": { "url": "https://github.com/bryphe/revery/issues" },
+  "bugs": {
+    "url": "https://github.com/bryphe/revery/issues"
+  },
   "scripts": {
     "build": "esy b",
     "build:release": "esy b dune build --profile=release --root . -j4",
@@ -15,7 +17,7 @@
   },
   "homepage": "https://github.com/bryphe/revery#readme",
   "esy": {
-    "build": [ "dune build --root . -j4" ],
+    "build": ["refmterr dune build --root . -j4"],
     "install": [
       "esy-installer Revery.install", "esy-installer Revery_Core.install",
       "esy-installer Revery_Geometry.install",
@@ -37,7 +39,8 @@
     "@opam/lwt": "^4.0.0",
     "@opam/lwt_ppx": "^1.1.0",
     "@brisk/brisk-reconciler": "*",
-    "flex": "^1.2.2"
+    "flex": "^1.2.2",
+    "refmterr": "*"
   },
   "resolutions": {
     "@opam/cmdliner": "1.0.2",
@@ -54,4 +57,4 @@
     "@opam/dune": "^1.5.0",
     "@opam/odoc": "*"
   }
-}
+}
\ No newline at end of file

From 057b84df132fc54bcf0a1b9bd5b54fe70d43d3e1 Mon Sep 17 00:00:00 2001
From: jeremyscatigna <scatignaj@me.com>
Date: Thu, 31 Jan 2019 11:01:25 +0100
Subject: [PATCH 3/3] checkbox and slider implementation

---
 examples/Controls.re | 235 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 203 insertions(+), 32 deletions(-)

diff --git a/examples/Controls.re b/examples/Controls.re
index 5ac2e0580..c8ec0ad43 100644
--- a/examples/Controls.re
+++ b/examples/Controls.re
@@ -2,6 +2,8 @@ open Revery.UI;
 open Revery.UI.Components;
 open Revery.Core;
 
+open Revery.Math;
+
 module Controls = {
   type inputFields = {
     first: string,
@@ -13,13 +15,27 @@ module Controls = {
     component(slots => {
       let (count, setCount, slots) = React.Hooks.state(0, slots);
 
-      let ({first, second}: inputFields, setValue, _slots: React.Hooks.empty) =
+      let ({first, second}: inputFields, setValue, slots) =
         React.Hooks.state({first: "", second: ""}, slots);
 
+      let (text, setText, slots) = React.Hooks.state("Not Checked!", slots);
+
+      let (rotationX, setRotationX, slots) = React.Hooks.state(0., slots);
+      let (rotationY, setRotationY, slots) = React.Hooks.state(0., slots);
+      let (rotationZ, setRotationZ, _slots: React.Hooks.empty) =
+        React.Hooks.state(0., slots);
+
       let increment = () => setCount(count + 1);
 
       let containerStyle =
-        Style.[justifyContent(`Center), alignItems(`Center)];
+        Style.[justifyContent(`FlexStart), alignItems(`FlexStart)];
+
+      let topContainer =
+        Style.[
+          justifyContent(`Center),
+          alignItems(`Center),
+          flexDirection(`Row),
+        ];
 
       let countContainer =
         Style.[
@@ -29,45 +45,200 @@ module Controls = {
           justifyContent(`Center),
         ];
 
+      let inputContainer =
+        Style.[
+          width(200),
+          height(200),
+          alignItems(`Center),
+          justifyContent(`Center),
+        ];
+
+      let checkboxContainer =
+        Style.[
+          width(200),
+          height(200),
+          alignItems(`Center),
+          justifyContent(`Center),
+        ];
+
       let countStyle =
         Style.[
-          fontSize(50),
-          margin(24),
+          fontSize(30),
+          margin(15),
           color(Colors.white),
           fontFamily("Roboto-Regular.ttf"),
         ];
 
+      let textStyle =
+        Style.[
+          color(Colors.white),
+          width(100),
+          fontFamily("Roboto-Regular.ttf"),
+          fontSize(16),
+          margin(14),
+        ];
+
+      let controlsStyle =
+        Style.[
+          margin(10),
+          flexDirection(`Row),
+          justifyContent(`Center),
+          alignItems(`Center),
+        ];
+
+      let sliderContainerStyle =
+        Style.[
+          margin(10),
+          borderBottom(~width=1, ~color=Colors.darkGray),
+          flexDirection(`Row),
+          justifyContent(`Center),
+          alignItems(`Center),
+        ];
+
+      let verticalSliderContainerStyle =
+        Style.[
+          margin(10),
+          borderRight(~width=1, ~color=Colors.darkGray),
+          flexDirection(`Column),
+          justifyContent(`Center),
+          alignItems(`Center),
+        ];
+
+      let toDeg = r => 180. *. r /. pi;
+
+      let toDegString = r => r |> toDeg |> floor |> string_of_float;
+
+      let twoPi = 2. *. pi;
+
       let countStr = string_of_int(count);
       <View style=containerStyle>
-        <View style=countContainer>
-          <Text style=countStyle text=countStr />
+        <View style=topContainer>
+          <View style=countContainer>
+            <Text style=countStyle text=countStr />
+            <Button
+              width=150
+              height=50
+              fontSize=20
+              title="click me!"
+              onClick=increment
+            />
+            <Button
+              width=150
+              height=50
+              fontSize=20
+              disabled=true
+              title="(disabled)"
+              onClick=increment
+            />
+          </View>
+          <View style=inputContainer>
+            <Input
+              window
+              style=Style.[fontSize(20)]
+              placeholder="Insert text here"
+              onChange={(~value) => setValue({first: value, second})}
+            />
+            <Input
+              window
+              placeholder="custom input"
+              placeholderColor=Colors.plum
+              cursorColor=Colors.white
+              onChange={(~value) => setValue({first, second: value})}
+              style=Style.[
+                backgroundColor(Colors.paleVioletRed),
+                color(Colors.white),
+                fontSize(20),
+                boxShadow(
+                  ~xOffset=-5.,
+                  ~yOffset=2.,
+                  ~color=Colors.black,
+                  ~blurRadius=20.,
+                  ~spreadRadius=0.,
+                ),
+              ]
+            />
+          </View>
+          <View style=checkboxContainer>
+            <Checkbox
+              onChange={checked => {
+                let text = checked ? "Checked!" : "Not Checked!";
+                setText(text);
+              }}
+              style=Style.[marginBottom(10)]
+            />
+            <Text
+              text
+              style=Style.[
+                marginBottom(10),
+                fontFamily("Roboto-Regular.ttf"),
+                fontSize(20),
+              ]
+            />
+            <Checkbox
+              checkedColor=Colors.green
+              style=Style.[border(~width=2, ~color=Colors.green)]
+              checked=true
+            />
+            <Text
+              text="Default state: Checked"
+              style=Style.[
+                marginTop(10),
+                fontFamily("Roboto-Regular.ttf"),
+                fontSize(20),
+              ]
+            />
+          </View>
+        </View>
+        <View>
+          <Image
+            src="outrun-logo.png"
+            style=Style.[
+              width(200),
+              height(100),
+              transform([
+                Transform.RotateZ(Angle.from_radians(rotationZ)),
+                Transform.RotateY(Angle.from_radians(rotationY)),
+                Transform.RotateX(Angle.from_radians(rotationX)),
+              ]),
+            ]
+          />
+        </View>
+        <View style=controlsStyle>
+          <View style=verticalSliderContainerStyle>
+            <Text style=textStyle text="Rotation Y: " />
+            <Slider
+              vertical=true
+              onValueChanged=setRotationY
+              maximumValue=twoPi
+            />
+            <Text
+              style=textStyle
+              text={"Value: " ++ toDegString(rotationY)}
+            />
+          </View>
+          <View style=containerStyle>
+            <View style=sliderContainerStyle>
+              <Text style=textStyle text="Rotation X: " />
+              <Slider
+                onValueChanged=setRotationX
+                value=twoPi
+                maximumValue=twoPi
+              />
+              <Text
+                style=textStyle
+                text={"Value: " ++ toDegString(rotationX)}
+              />
+            </View>
+            <View style=sliderContainerStyle>
+              <Text style=textStyle text="Rotation Z: " />
+              <Slider onValueChanged=setRotationZ maximumValue=twoPi />
+              <Text
+                style=textStyle
+                text={"Value: " ++ toDegString(rotationZ)}
+              />
+            </View>
+          </View>
         </View>
-        <Button title="click me!" onClick=increment />
-        <Button disabled=true title="(disabled)" onClick=increment />
-        <Input
-          window
-          placeholder="Insert text here"
-          onChange={(~value) => setValue({first: value, second})}
-        />
-        <Input
-          window
-          placeholder="custom input"
-          placeholderColor=Colors.plum
-          cursorColor=Colors.white
-          onChange={(~value) => setValue({first, second: value})}
-          style=Style.[
-            backgroundColor(Colors.paleVioletRed),
-            color(Colors.white),
-            margin(20),
-            boxShadow(
-              ~xOffset=-5.,
-              ~yOffset=2.,
-              ~color=Colors.black,
-              ~blurRadius=20.,
-              ~spreadRadius=0.,
-            ),
-          ]
-        />
       </View>;
     });