[WIP] Consolidate some of the examples in one screen

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": [
-        "[email protected].1012@d41d8cd9",
+        "[email protected]@d41d8cd9", "[email protected].1013@d41d8cd9",
         "[email protected]@d41d8cd9",
         "[email protected]@d41d8cd9", "[email protected]@d41d8cd9",
         "[email protected]@d41d8cd9", "@opam/lwt_ppx@opam:1.2.1@db1172a7",
@@ -66,14 +66,14 @@
       ],
       "devDependencies": []
     },
-    "[email protected].1012@d41d8cd9": {
-      "id": "[email protected].1012@d41d8cd9",
+    "[email protected].1013@d41d8cd9": {
+      "id": "[email protected].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": [
-        "[email protected]@d41d8cd9", "[email protected].1012@d41d8cd9",
+        "[email protected]@d41d8cd9", "[email protected].1013@d41d8cd9",
         "[email protected]@d41d8cd9",
         "[email protected]@d41d8cd9", "[email protected]@d41d8cd9",
         "[email protected]@d41d8cd9", "@opam/dune@opam:1.6.3@a7d7baed",

examples/Controls.re

@@ -0,0 +1,249 @@
+open Revery.UI;
+open Revery.UI.Components;
+open Revery.Core;
+
+open Revery.Math;
+
+module 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.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(`FlexStart), alignItems(`FlexStart)];
+
+      let topContainer =
+        Style.[
+          justifyContent(`Center),
+          alignItems(`Center),
+          flexDirection(`Row),
+        ];
+
+      let countContainer =
+        Style.[
+          width(200),
+          height(200),
+          alignItems(`Center),
+          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(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=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>
+      </View>;
+    });
+
+  let createElement = (~window, ~children as _, ()) =>
+    React.element(make(window));
+};
+
+let render = window => <Controls window />;

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,18 +23,14 @@ 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: w => Controls.render(w)},
     {name: "Border", render: _ => Border.render()},
     {name: "Overflow", render: _w => Overflow.render()},
     {name: "Calculator", render: w => Calculator.render(w)},
     {name: "Flexbox", render: _ => Flexbox.render()},
     {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 +174,4 @@ let init = app => {
   UI.start(win, render);
 };
 
-App.startWithState(state, reducer, init);
+App.startWithState(state, reducer, init);

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": "*"
   }
-}
+}