From 88cad48cd9e31b5fe48d1d7fe559b94efaf0a96c Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 20 Jan 2019 14:44:56 +0000
Subject: [PATCH] Convert even more examples...

---
 examples/DefaultButton.re |  35 ++++++-------
 examples/Flexbox.re       | 101 ++++++++++++++------------------------
 examples/Focus.re         |  52 +++++++++-----------
 examples/Overflow.re      |  64 ++++++++++++------------
 4 files changed, 107 insertions(+), 145 deletions(-)

diff --git a/examples/DefaultButton.re b/examples/DefaultButton.re
index 99c1192a9..f988eaf2d 100644
--- a/examples/DefaultButton.re
+++ b/examples/DefaultButton.re
@@ -5,36 +5,30 @@ open Revery.Core;
 module DefaultButtonWithCounter = {
   let component = React.component("DefaultButtonWithCounter");
 
-  let make = () => {
+  let make = () =>
     component(slots => {
       let (count, setCount, _slots: React.Hooks.empty) =
         React.Hooks.state(0, slots);
       let increment = () => setCount(count + 1);
 
       let containerStyle =
-        Style.make(
-          ~justifyContent=JustifyCenter,
-          ~alignItems=AlignCenter,
-          (),
-        );
+        Style.[justifyContent(`Center), alignItems(`Center)];
 
       let countContainer =
-        Style.make(
-          ~width=300,
-          ~height=300,
-          ~alignItems=LayoutTypes.AlignCenter,
-          ~justifyContent=LayoutTypes.JustifyCenter,
-          (),
-        );
+        Style.[
+          width(300),
+          height(300),
+          alignItems(`Center),
+          justifyContent(`Center),
+        ];
 
       let countStyle =
-        Style.make(
-          ~fontSize=50,
-          ~margin=24,
-          ~color=Colors.black,
-          ~fontFamily="Roboto-Regular.ttf",
-          (),
-        );
+        Style.[
+          fontSize(50),
+          margin(24),
+          color(Colors.black),
+          fontFamily("Roboto-Regular.ttf"),
+        ];
 
       let countStr = string_of_int(count);
       <View style=containerStyle>
@@ -45,7 +39,6 @@ module DefaultButtonWithCounter = {
         <Button disabled=true title="(disabled)" onClick=increment />
       </View>;
     });
-  };
 
   let createElement = (~children as _, ()) => React.element(make());
 };
diff --git a/examples/Flexbox.re b/examples/Flexbox.re
index cb3ec72d6..dd4c4c318 100644
--- a/examples/Flexbox.re
+++ b/examples/Flexbox.re
@@ -5,77 +5,67 @@ let parentWidth = 400;
 let childWidth = 300;
 
 let parentStyles =
-    (
-      ~alignment=LayoutTypes.AlignAuto,
-      ~direction=LayoutTypes.Row,
-      ~justify=LayoutTypes.JustifyCenter,
-      (),
-    ) =>
-  Style.make(
-    ~backgroundColor=Colors.green,
-    ~position=LayoutTypes.Relative,
-    ~width=parentWidth,
-    ~height=100,
-    ~alignItems=alignment,
-    ~justifyContent=justify,
-    ~flexDirection=direction,
-    (),
-  );
+    (~alignment as a=`Auto, ~direction as d=`Row, ~justify as j=`Center, ()) =>
+  Style.[
+    backgroundColor(Colors.green),
+    position(`Relative),
+    width(parentWidth),
+    height(100),
+    alignItems(a),
+    justifyContent(j),
+    flexDirection(d),
+  ];
 
 let childStyles =
-  Style.make(
-    ~backgroundColor=Colors.blue,
-    ~position=LayoutTypes.Relative,
-    ~width=childWidth,
-    ~height=40,
-    (),
-  );
+  Style.[
+    backgroundColor(Colors.blue),
+    position(`Relative),
+    width(childWidth),
+    height(40),
+  ];
 
 let defaultTextStyles =
-  Style.make(
-    ~fontSize=20,
-    ~fontFamily="Roboto-Regular.ttf",
-    ~color=Colors.white,
-    ~backgroundColor=Colors.blue,
-    (),
-  );
+  Style.[
+    fontSize(20),
+    fontFamily("Roboto-Regular.ttf"),
+    color(Colors.white),
+    backgroundColor(Colors.blue),
+  ];
 
-let parentColumnStyle = parentStyles(~direction=LayoutTypes.Column);
+let parentColumnStyle = parentStyles(~direction=`Column);
 let headerStyle =
-  Style.make(
-    ~marginTop=25,
-    ~marginBottom=25,
-    ~fontSize=30,
-    ~fontFamily="Roboto-Regular.ttf",
-    ~color=Colors.white,
-    (),
-  );
+  Style.[
+    marginTop(25),
+    marginBottom(25),
+    fontSize(30),
+    fontFamily("Roboto-Regular.ttf"),
+    color(Colors.white),
+  ];
 
 let horizontalStyles =
   <View>
     <Text style=headerStyle text="Flex Direction Row" />
-    <View style={parentColumnStyle(~alignment=LayoutTypes.AlignAuto, ())}>
+    <View style={parentColumnStyle(~alignment=`Auto, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Default Flex" />
       </View>
     </View>
-    <View style={parentColumnStyle(~alignment=LayoutTypes.AlignCenter, ())}>
+    <View style={parentColumnStyle(~alignment=`Center, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Center" />
       </View>
     </View>
-    <View
-      style={parentColumnStyle(~alignment=LayoutTypes.AlignFlexStart, ())}>
+    <View style={parentColumnStyle(~alignment=`FlexStart, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Flex Start" />
       </View>
     </View>
-    <View style={parentColumnStyle(~alignment=LayoutTypes.AlignFlexEnd, ())}>
+    <View style={parentColumnStyle(~alignment=`FlexEnd, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Flex End" />
       </View>
     </View>
-    <View style={parentColumnStyle(~alignment=LayoutTypes.AlignStretch, ())}>
+    <View style={parentColumnStyle(~alignment=`Stretch, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Flex Stretch" />
       </View>
@@ -85,32 +75,17 @@ let horizontalStyles =
 let verticalStyles =
   <View>
     <Text style=headerStyle text="Flex Direction Column" />
-    <View
-      style={parentStyles(
-        ~direction=LayoutTypes.Column,
-        ~justify=LayoutTypes.JustifyFlexStart,
-        (),
-      )}>
+    <View style={parentStyles(~direction=`Column, ~justify=`FlexStart, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Align Flex Start" />
       </View>
     </View>
-    <View
-      style={parentStyles(
-        ~direction=LayoutTypes.Column,
-        ~justify=LayoutTypes.JustifyCenter,
-        (),
-      )}>
+    <View style={parentStyles(~direction=`Column, ~justify=`Center, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Align Flex Center" />
       </View>
     </View>
-    <View
-      style={parentStyles(
-        ~direction=LayoutTypes.Column,
-        ~justify=LayoutTypes.JustifyFlexEnd,
-        (),
-      )}>
+    <View style={parentStyles(~direction=`Column, ~justify=`FlexEnd, ())}>
       <View style=childStyles>
         <Text style=defaultTextStyles text="Align Flex End" />
       </View>
diff --git a/examples/Focus.re b/examples/Focus.re
index a209b6b5f..e642d492c 100644
--- a/examples/Focus.re
+++ b/examples/Focus.re
@@ -13,22 +13,6 @@ module SimpleButton = {
 
       let increment = () => setCount(count + 1);
 
-      let wrapperStyle =
-        Style.make(
-          ~backgroundColor=Color.rgba(1., 1., 1., 0.1),
-          ~border=Style.Border.make(~width=2, ~color=Colors.white, ()),
-          ~margin=16,
-          (),
-        );
-
-      let textHeaderStyle =
-        Style.make(
-          ~color=Colors.white,
-          ~fontFamily="Roboto-Regular.ttf",
-          ~fontSize=20,
-          ~margin=4,
-          (),
-        );
       let txt = focused ? "Focused" : "Unfocused";
       let textContent = txt ++ " me: " ++ string_of_int(count);
       <Clickable
@@ -36,8 +20,21 @@ module SimpleButton = {
         tabindex=0
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}>
-        <View style=wrapperStyle>
-          <Text style=textHeaderStyle text=textContent />
+        <View
+          style=Style.[
+            backgroundColor(Color.rgba(1., 1., 1., 0.1)),
+            border({width: 2, color: Colors.white}),
+            margin(16),
+          ]>
+          <Text
+            style=Style.[
+              color(Colors.white),
+              fontFamily("Roboto-Regular.ttf"),
+              fontSize(20),
+              margin(4),
+            ]
+            text=textContent
+          />
         </View>
       </Clickable>;
     });
@@ -47,15 +44,14 @@ module SimpleButton = {
 
 let render = () =>
   <View
-    style={Style.make(
-      ~position=LayoutTypes.Absolute,
-      ~justifyContent=LayoutTypes.JustifyCenter,
-      ~alignItems=LayoutTypes.AlignCenter,
-      ~bottom=0,
-      ~top=0,
-      ~left=0,
-      ~right=0,
-      (),
-    )}>
+    style=Style.[
+      position(`Absolute),
+      justifyContent(`Center),
+      alignItems(`Center),
+      bottom(0),
+      top(0),
+      left(0),
+      right(0),
+    ]>
     <SimpleButton />
   </View>;
diff --git a/examples/Overflow.re b/examples/Overflow.re
index 664477cd8..3ad4dd0d7 100644
--- a/examples/Overflow.re
+++ b/examples/Overflow.re
@@ -3,35 +3,32 @@ 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.black,
-    (),
-  );
+  Style.[
+    position(`Absolute),
+    top(0),
+    bottom(0),
+    left(0),
+    right(0),
+    alignItems(`Center),
+    justifyContent(`Center),
+    flexDirection(`Column),
+    backgroundColor(Colors.black),
+  ];
 
 let outerBox =
-  Style.make(
-    ~width=75,
-    ~height=75,
-    ~overflow=LayoutTypes.Hidden,
-    ~backgroundColor=Colors.red,
-    (),
-  );
+  Style.[
+    width(75),
+    height(75),
+    overflow(LayoutTypes.Hidden),
+    backgroundColor(Colors.red),
+  ];
 
 let innerBox =
-  Style.make(
-    ~width=150,
-    ~height=150,
-    ~backgroundColor=Color.rgba(0., 1.0, 0., 0.5),
-    (),
-  );
+  Style.[
+    width(150),
+    height(150),
+    backgroundColor(Color.rgba(0., 1.0, 0., 0.5)),
+  ];
 
 module Sample = {
   let component = React.component("Sample");
@@ -41,18 +38,19 @@ module Sample = {
       let (hidden, setHidden, _slots: React.Hooks.empty) =
         React.Hooks.state(false, slots);
 
-      let outerStyle = {
-        ...outerBox,
-        overflow: hidden ? LayoutTypes.Hidden : LayoutTypes.Visible,
-      };
+      let outerStyle =
+        List.append(
+          outerBox,
+          [
+            Style.overflow(hidden ? LayoutTypes.Hidden : LayoutTypes.Visible),
+          ],
+        );
 
-      let onClick = _ => {
-        setHidden(!hidden);
-      };
+      let onClick = _ => setHidden(!hidden);
 
       <View style=containerStyle>
         <View style=outerStyle> <View style=innerBox /> </View>
-        <View style={Style.make(~marginTop=80, ())}>
+        <View style=Style.[marginTop(80)]>
           <Button fontSize=20 height=45 title="Toggle overflow" onClick />
         </View>
       </View>;