diff --git a/bsconfig.json b/bsconfig.json index aa71d32..1782370 100644 --- 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 index 16b5e34..1e98ab5 100644 --- 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 index 10bacda..c476f42 100644 --- 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 = () => { diff --git a/src/Post/components/ImageActions.re b/src/Post/components/ImageActions.re index a382a5f..932916a 100644 --- 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.( + dp, + paddingVertical: 10.->dp, + }) + }> dp, - ~paddingVertical=10.->dp, - (), - )}> - dp, ~justifyContent=`spaceBetween, ())}> - - - - - + style={ViewStyle({width: 90.->dp, justifyContent: `spaceBetween})}> + + + - ); -}; + + ; +}; \ No newline at end of file diff --git a/src/Post/components/ImageDescription.re b/src/Post/components/ImageDescription.re index d7a8f2c..26710ae 100644 --- 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) => - dp, ()))> + dp})}> Option.(description or "")->React.string diff --git a/src/Post/components/ImageHeader.re b/src/Post/components/ImageHeader.re index 3e0e8ad..34419d3 100644 --- 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.( - dp, - ~paddingVertical=10.->dp, - (), - )}> - - Js.log("Click Profile Image")}> - - - dp, - ~justifyContent=`center, - (), - )}> - - {j|$city, $country|j} - | _ => "" - } + dp, + paddingVertical: 10.->dp, + }) + }> + + Js.log("Click Profile Image")}> + + + dp, justifyContent: `center})}> + + {j|$city, $country|j} + | _ => "" } - /> - - - + } + /> + - ); -}; + + ; +}; \ No newline at end of file diff --git a/src/Post/components/ImageLikes.re b/src/Post/components/ImageLikes.re index affa0f6..4f0f635 100644 --- 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) => 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.( - dp, - ~paddingVertical=5.->dp, - (), - )}> - dp, ())}> - images->React.array - - - "Liked by "->React.string - - " and "->React.string - - + dp, paddingVertical: 5.->dp})}> + dp})}> + images->React.array - ); + + "Liked by "->React.string + + " and "->React.string + + + ; }; \ No newline at end of file diff --git a/src/Post/components/MoreButton.re b/src/Post/components/MoreButton.re index 860e5cf..3f6663e 100644 --- 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) => float_of_int->dp, - (), - )}> + style={ + ViewStyle({justifyContent: `center, width: size->float_of_int->dp}) + }> - ; + ; \ No newline at end of file diff --git a/src/Profile/Profile.re b/src/Profile/Profile.re index 44678ab..a76daba 100644 --- 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"}), ()) } /> { ~headerLeft= _ => 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()}> , @@ -55,4 +55,4 @@ let make = () => { }; [@genType] -let default = make; +let default = make; \ No newline at end of file diff --git a/src/Profile/components/ProfileInfo.re b/src/Profile/components/ProfileInfo.re index 83a62a4..c5f27d0 100644 --- 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; dp, - ~paddingVertical=12.->dp, - (), - ) - )> + style={ + ViewStyle({ + justifyContent: `spaceBetween, + paddingHorizontal: 12.->dp, + paddingVertical: 12.->dp, + }) + }> Js.log("Click Profile Image")}> diff --git a/src/Profile/components/StatBox.re b/src/Profile/components/StatBox.re index 0209534..7293928 100644 --- 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 index b1134b6..e681e6b 100644 --- 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, - ]), - ); \ No newline at end of file + makeProps(~style=list([style(centered), additionalStyle])); \ No newline at end of file diff --git a/src/components/EditButton.re b/src/components/EditButton.re index c8fe0af..523fab8 100644 --- a/src/components/EditButton.re +++ b/src/components/EditButton.re @@ -1,19 +1,18 @@ open ReactNative; let style = - Style.( - style( - ~alignItems=`center, - ~borderColor="#E6E6E6", - ~borderRadius=4., - ~borderWidth=1.5, - ~padding=5.->dp, - (), - ) + Styles.( + ViewStyle({ + alignItems: `center, + borderColor: "#E6E6E6", + borderRadius: 4., + borderWidth: 1.5, + padding: 5.->dp, + }) ); [@react.component] let make = () => Js.log("Pressed Edit Profile")}> "Edit Profile"->React.string - ; + ; \ No newline at end of file diff --git a/src/components/Horizontal.re b/src/components/Horizontal.re index f850faa..7749793 100644 --- a/src/components/Horizontal.re +++ b/src/components/Horizontal.re @@ -1,9 +1,8 @@ open ReactNative; -open Style; include View; let makeProps = Styled.view(style => style(~flexDirection=`row, ~display=`flex, ~alignItems=`center, ()) - ); + ); \ No newline at end of file diff --git a/src/config/Styles.re b/src/config/Styles.re new file mode 100644 index 0000000..4defeae --- /dev/null +++ b/src/config/Styles.re @@ -0,0 +1,12 @@ +include ReactNative.Style; +module ViewStyle = { + let make = ReactNative.Style.viewStyle; +}; + +module ImageStyle = { + let make = ReactNative.Style.imageStyle; +}; + +module TextStyle = { + let make = ReactNative.Style.textStyle; +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 666f7c0..ef8a74c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1160,6 +1160,11 @@ resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047" integrity sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw== +"@cem2ran/ppx_style@0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@cem2ran/ppx_style/-/ppx_style-0.0.3.tgz#db582e0b959618eefdde2601ca8c07bdce76e593" + integrity sha512-wmZji0IJJxg6JUwwQjqMDcZtCws0DiZZVfWXMA2NhYQ012nVGMbnayTr2tO1rkrH6oGrzky/vh3tcS4jOfKsHQ== + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"