Use style-ppx

cem2ran · Apr 16, 2020 · 724ea06 · 724ea06
1 parent 3044aa6
commit 724ea06
Show file tree

Hide file tree

Showing 16 changed files with 139 additions and 158 deletions.
diff --git a/bsconfig.json b/bsconfig.json
@@ -12,7 +12,7 @@
     "reason-expo",
     "@reason-react-native/navigation"
   ],
-  "ppx-flags": ["@baransu/graphql_ppx_re/ppx"],
+  "ppx-flags": ["@baransu/graphql_ppx_re/ppx", "@cem2ran/ppx_style/ppx"],
   "sources": [
     {
       "dir": "src",

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@baransu/graphql_ppx_re": "0.7.1",
+    "@cem2ran/ppx_style": "0.0.3",
     "@react-native-community/masked-view": "0.1.6",
     "@react-navigation/core": "^5.3.3",
     "@react-navigation/native": "^5.1.5",

diff --git a/src/App.re b/src/App.re
@@ -1,21 +1,5 @@
-open ReactNative;
 open ReactNavigation;
 
-let styles =
-  Style.(
-    StyleSheet.create({
-      "container":
-        style(
-          ~flex=1.,
-          ~justifyContent=`center,
-          ~alignItems=`center,
-          ~backgroundColor="#F5FCFF",
-          (),
-        ),
-      "instructions": style(~textAlign=`center, ~color="#ffffff", ()),
-    })
-  );
-
 [@react.component]
 let app = () => {
   <Native.NavigationContainer>

diff --git a/src/Post/components/ImageActions.re b/src/Post/components/ImageActions.re
@@ -1,26 +1,26 @@
 open ReactNative;
+open Styles;
 
 [@react.component]
 let make = (~liked=true) => {
-  Style.(
+  <Horizontal
+    style={
+      ViewStyle({
+        justifyContent: `spaceBetween,
+        paddingHorizontal: 12.->dp,
+        paddingVertical: 10.->dp,
+      })
+    }>
     <Horizontal
-      style={Style.style(
-        ~justifyContent=`spaceBetween,
-        ~paddingHorizontal=12.->dp,
-        ~paddingVertical=10.->dp,
-        (),
-      )}>
-      <Horizontal
-        style={Style.style(~width=90.->dp, ~justifyContent=`spaceBetween, ())}>
-        <Icons.Ionicons
-          name={liked ? "md-heart" : "md-heart-empty"}
-          size=26
-          color={liked ? "#E06666" : "#333"}
-        />
-        <Icons.EvilIcons name="comment" size=32 color="#333" />
-        <Icons.Feather name="send" size=22 color="#777" />
-      </Horizontal>
-      <Icons.FontAwesome name="bookmark-o" size=24 color="grey" />
+      style={ViewStyle({width: 90.->dp, justifyContent: `spaceBetween})}>
+      <Icons.Ionicons
+        name={liked ? "md-heart" : "md-heart-empty"}
+        size=26
+        color={liked ? "#E06666" : "#333"}
+      />
+      <Icons.EvilIcons name="comment" size=32 color="#333" />
+      <Icons.Feather name="send" size=22 color="#777" />
     </Horizontal>
-  );
-};
+    <Icons.FontAwesome name="bookmark-o" size=24 color="grey" />
+  </Horizontal>;
+};
diff --git a/src/Post/components/ImageDescription.re b/src/Post/components/ImageDescription.re
@@ -1,9 +1,10 @@
 open ReactNative;
 open Typography;
+open Styles;
 
 [@react.component]
 let make = (~username, ~description) =>
-  <View style=Style.(style(~paddingHorizontal=12.->dp, ()))>
+  <View style={ViewStyle({paddingHorizontal: 12.->dp})}>
     <T4>
       <T4_Bold value={j|$username |j} />
       Option.(description or "")->React.string

diff --git a/src/Post/components/ImageHeader.re b/src/Post/components/ImageHeader.re
@@ -1,44 +1,37 @@
 open ReactNative;
 open Typography;
-
+open Styles;
 open PostData;
 
 [@react.component]
 let make = (~image as uri, ~location, ~username) => {
-  Style.(
-    <Horizontal
-      style={Style.style(
-        ~justifyContent=`spaceBetween,
-        ~paddingHorizontal=7.->dp,
-        ~paddingVertical=10.->dp,
-        (),
-      )}>
-      <Horizontal>
-        <TouchableWithoutFeedback
-          onPress={_ => Js.log("Click Profile Image")}>
-          <CircularImage
-            size=32.
-            source=Image.(Source.fromUriSource(uriSource(~uri, ())))
-          />
-        </TouchableWithoutFeedback>
-        <View
-          style={Style.style(
-            ~paddingLeft=7.->dp,
-            ~justifyContent=`center,
-            (),
-          )}>
-          <T2 value=username />
-          <T3
-            value={
-              switch (location) {
-              | Some({city: Some(city), country: Some(country)}) => {j|$city, $country|j}
-              | _ => ""
-              }
+  <Horizontal
+    style={
+      ViewStyle({
+        justifyContent: `spaceBetween,
+        paddingHorizontal: 7.->dp,
+        paddingVertical: 10.->dp,
+      })
+    }>
+    <Horizontal>
+      <TouchableWithoutFeedback onPress={_ => Js.log("Click Profile Image")}>
+        <CircularImage
+          size=32.
+          source=Image.(Source.fromUriSource(uriSource(~uri, ())))
+        />
+      </TouchableWithoutFeedback>
+      <View style={ViewStyle({paddingLeft: 7.->dp, justifyContent: `center})}>
+        <T2 value=username />
+        <T3
+          value={
+            switch (location) {
+            | Some({city: Some(city), country: Some(country)}) => {j|$city, $country|j}
+            | _ => ""
             }
-          />
-        </View>
-      </Horizontal>
-      <MoreButton />
+          }
+        />
+      </View>
     </Horizontal>
-  );
-};
+    <MoreButton />
+  </Horizontal>;
+};
diff --git a/src/Post/components/ImageLikes.re b/src/Post/components/ImageLikes.re
@@ -1,5 +1,5 @@
 open ReactNative;
-
+open Styles;
 open Typography;
 
 // NOTE: Mocked data for now as it doesn't seem like I can get
@@ -12,15 +12,14 @@ let make = (~likes, ~likedByUsers=[|"a", "b", "c"|]) => {
     likedByUsers->Belt.Array.mapWithIndex((idx, src) =>
       <CircularImage
         key=src
-        style=Style.(
-          style(
-            ~borderColor="white",
-            ~borderWidth=1.5,
-            ~marginLeft=(idx === 0 ? 0. : (-7.))->dp,
-            ~zIndex=length - idx,
-            (),
-          )
-        )
+        style={
+          ImageStyle({
+            borderColor: "white",
+            borderWidth: 1.5,
+            marginLeft: (idx === 0 ? 0. : (-7.))->dp,
+            zIndex: length - idx,
+          })
+        }
         size=20.
         source=Image.(
           Source.fromUriSource(
@@ -31,22 +30,16 @@ let make = (~likes, ~likedByUsers=[|"a", "b", "c"|]) => {
     );
   };
 
-  Style.(
-    <Horizontal
-      style={Style.style(
-        ~paddingHorizontal=12.->dp,
-        ~paddingVertical=5.->dp,
-        (),
-      )}>
-      <Horizontal style={Style.style(~width=50.->dp, ())}>
-        images->React.array
-      </Horizontal>
-      <T4>
-        "Liked by "->React.string
-        <T4_Bold value="baconbrix" />
-        " and "->React.string
-        <T4_Bold value={j|$likes others|j} />
-      </T4>
+  <Horizontal
+    style={ViewStyle({paddingHorizontal: 12.->dp, paddingVertical: 5.->dp})}>
+    <Horizontal style={ViewStyle({width: 50.->dp})}>
+      images->React.array
     </Horizontal>
-  );
+    <T4>
+      "Liked by "->React.string
+      <T4_Bold value="baconbrix" />
+      " and "->React.string
+      <T4_Bold value={j|$likes others|j} />
+    </T4>
+  </Horizontal>;
 };
diff --git a/src/Post/components/MoreButton.re b/src/Post/components/MoreButton.re
@@ -1,12 +1,11 @@
 open ReactNative;
-open Style;
+open Styles;
+
 [@react.component]
 let make = (~size=24) =>
   <View
-    style={Style.style(
-      ~justifyContent=`center,
-      ~width=size->float_of_int->dp,
-      (),
-    )}>
+    style={
+      ViewStyle({justifyContent: `center, width: size->float_of_int->dp})
+    }>
     <IonIcons name="ios-more" size color="grey" />
-  </View>;
+  </View>;
diff --git a/src/Profile/Profile.re b/src/Profile/Profile.re
@@ -1,5 +1,6 @@
 open ReactNative;
 open ReactNavigation;
+open Styles;
 
 include Stack.Make({
   type params = string;
@@ -24,7 +25,7 @@ let make = () => {
       name="Profile"
       component=HomeScreen.make
       options={_props =>
-        options(~headerStyle=Style.style(~backgroundColor="#fafafa", ()), ())
+        options(~headerStyle=ViewStyle({backgroundColor: "#fafafa"}), ())
       }
     />
     <Screen
@@ -35,15 +36,14 @@ let make = () => {
           ~headerLeft=
             _ =>
               <TouchableOpacity
-                style=Style.(
-                  style(
-                    ~width=32.->dp,
-                    ~height=32.->dp,
-                    ~alignItems=`center,
-                    ~justifyContent=`center,
-                    (),
-                  )
-                )
+                style={
+                  ViewStyle({
+                    width: 32.->dp,
+                    height: 32.->dp,
+                    alignItems: `center,
+                    justifyContent: `center,
+                  })
+                }
                 onPress={_ => props##navigation->Navigation.goBack()}>
                 <IonIcons name="ios-arrow-back" size=24 color="grey" />
               </TouchableOpacity>,
@@ -55,4 +55,4 @@ let make = () => {
 };
 
 [@genType]
-let default = make;
+let default = make;
diff --git a/src/Profile/components/ProfileInfo.re b/src/Profile/components/ProfileInfo.re
@@ -1,5 +1,6 @@
 open ReactNative;
 open PostData;
+open Styles;
 
 let description = {j|🏠 Chicago
 🚀 @draftbit co-founder
@@ -21,14 +22,13 @@ let make = (~id) => {
   | {data: Some(data)} =>
     let user = data##getPhotoById##user;
     <View
-      style=Style.(
-        style(
-          ~justifyContent=`spaceBetween,
-          ~paddingHorizontal=12.->dp,
-          ~paddingVertical=12.->dp,
-          (),
-        )
-      )>
+      style={
+        ViewStyle({
+          justifyContent: `spaceBetween,
+          paddingHorizontal: 12.->dp,
+          paddingVertical: 12.->dp,
+        })
+      }>
       <Horizontal>
         <TouchableWithoutFeedback
           onPress={_ => Js.log("Click Profile Image")}>

diff --git a/src/Profile/components/StatBox.re b/src/Profile/components/StatBox.re
@@ -1,9 +1,8 @@
 open ReactNative;
-
-let style = Style.(style(~alignItems=`center, ()));
-let valueStyle = Style.textStyle(~fontSize=17., ~fontWeight=`_700, ());
-let labelStyle =
-  Style.textStyle(~fontSize=13., ~fontWeight=`_500, ~color="#777", ());
+open Styles;
+let style = ViewStyle({alignItems: `center});
+let valueStyle = TextStyle({fontSize: 17., fontWeight: `_700});
+let labelStyle = TextStyle({fontSize: 13., fontWeight: `_500, color: "#777"});
 
 [@react.component]
 let make = (~value, ~label) => {

diff --git a/src/components/Background.re b/src/components/Background.re
@@ -1,18 +1,14 @@
 open ReactNative;
-open Style;
+open Styles;
 include View;
 
+let style = centered =>
+  ViewStyle({
+    backgroundColor: "#fff",
+    flex: 1.,
+    justifyContent: centered ? `center : `flexStart,
+    alignItems: centered ? `center : `flexStart,
+  });
+
 let makeProps = (~centered=false, ~style as additionalStyle=Style.style()) =>
-  makeProps(
-    ~style=
-      list([
-        style(
-          ~backgroundColor="#fff",
-          ~flex=1.,
-          ~justifyContent=centered ? `center : `flexStart,
-          ~alignItems=centered ? `center : `flexStart,
-          (),
-        ),
-        additionalStyle,
-      ]),
-  );
+  makeProps(~style=list([style(centered), additionalStyle]));