Merge pull request #30 from ahrefs/styled-ppx

Use `styled-ppx` for styling
ahrefs · Sep 4, 2024 · f83b610 · f83b610
2 parents 30f82c6 + 503954d
commit f83b610
Show file tree

Hide file tree

Showing 11 changed files with 1,086 additions and 602 deletions.
diff --git a/example/Demo.re b/example/Demo.re
@@ -1,60 +1,107 @@
 open Reshowcase.Entry;
 
+module Cn = {
+  let ifTrue = (cn, x) => x ? cn : "";
+};
+
+let spaceConcat = (x1, x2) =>
+  switch (x1, x2) {
+  | ("", x)
+  | (x, "") => x
+  | (x1, x2) => x1 ++ " " ++ x2
+  };
+
+let (+++) = spaceConcat;
+
+module Css = {
+  let button = [%cx
+    {|
+    color: #fff;
+    border: none;
+    padding: 10px;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: inherit;
+  |}
+  ];
+
+  let buttonHuge = [%cx {|
+    padding: 20px;
+    font-size: 30px;
+  |}];
+
+  let buttonDisabled = [%cx {|
+    cursor: default;
+    opacity: 0.5;
+  |}];
+
+  let buttonColor = color => {
+    let color = `hex(color);
+    [%cx {|
+      background-color: $(color);
+    |}];
+  };
+
+  let h1Size = size => {
+    let fontSize = `px(size);
+    [%cx {|
+      font-size: $(fontSize);
+    |}];
+  };
+
+  let code = [%cx
+    {|
+    white-space: pre;
+    padding: 0;
+    background-color: #f5f6f6;
+  |}
+  ];
+};
+
 demo(({addDemo: _, addCategory}) =>
   addCategory("Buttons", ({addDemo, addCategory: _}) => {
     addDemo("Normal", ({string, bool, _}) => {
       let disabled = bool("Disabled", false);
+      let color =
+        string(
+          "Color",
+          ~options=[|
+            ("Red", "E02020"),
+            ("Green", "6DD400"),
+            ("Blue", "0091FF"),
+          |],
+          "0091FF",
+        );
       <button
         disabled
-        style={ReactDOM.Style.make(
-          ~backgroundColor=
-            string(
-              "Color",
-              ~options=[|
-                ("Red", "#E02020"),
-                ("Green", "#6DD400"),
-                ("Blue", "#0091FF"),
-              |],
-              "#0091FF",
-            ),
-          ~color="#fff",
-          ~border="none",
-          ~padding="10px",
-          ~borderRadius="10px",
-          ~fontFamily="inherit",
-          ~fontSize="inherit",
-          ~opacity=if (disabled) {"0.5"} else {"1"},
-          ~cursor=if (disabled) {"default"} else {"pointer"},
-          (),
-        )}>
+        className={
+          Css.button
+          +++ Css.buttonDisabled->Cn.ifTrue(disabled)
+          +++ Css.buttonColor(color)
+        }>
         {string("Text", "hello")->React.string}
       </button>;
     });
     addDemo("Huge", ({string, bool, _}) => {
       let disabled = bool("Disabled", false);
+      let color =
+        string(
+          "Color",
+          ~options=[|
+            ("Red", "E02020"),
+            ("Green", "6DD400"),
+            ("Blue", "0091FF"),
+          |],
+          "0091FF",
+        );
       <button
         disabled
-        style={ReactDOM.Style.make(
-          ~backgroundColor=
-            string(
-              "Color",
-              ~options=[|
-                ("Red", "#E02020"),
-                ("Green", "#6DD400"),
-                ("Blue", "#0091FF"),
-              |],
-              "#0091FF",
-            ),
-          ~color="#fff",
-          ~border="none",
-          ~padding="20px",
-          ~borderRadius="10px",
-          ~fontFamily="inherit",
-          ~fontSize="30px",
-          ~opacity=if (disabled) {"0.5"} else {"1"},
-          ~cursor=if (disabled) {"default"} else {"pointer"},
-          (),
-        )}>
+        className={
+          Css.button
+          +++ Css.buttonHuge
+          +++ Css.buttonDisabled->Cn.ifTrue(disabled)
+          +++ Css.buttonColor(color)
+        }>
         {string("Text", "Hello")->React.string}
       </button>;
     });
@@ -64,18 +111,14 @@ demo(({addDemo: _, addCategory}) =>
 demo(({addDemo: _, addCategory}) =>
   addCategory("Typography", ({addDemo: _, addCategory}) => {
     addCategory("Headings", ({addDemo, addCategory: _}) => {
-      addDemo("H1", ({string, int, _}) =>
-        <h1
-          style={ReactDOM.Style.make(
-            ~fontSize=
-              {let size =
-                 int("Font size", {min: 0, max: 100, initial: 30, step: 1})->string_of_int;
-               {j|$(size)px|j}},
-            (),
-          )}>
+      addDemo("H1", ({string, int, _}) => {
+        let size =
+          int("Font size", {min: 0, max: 100, initial: 30, step: 1});
+
+        <h1 className={Css.h1Size(size)}>
           {string("Text", "hello")->React.string}
-        </h1>
-      );
+        </h1>;
+      });
       addDemo("H2", ({string, _}) =>
         <h2> {string("Text", "hello")->React.string} </h2>
       );
@@ -93,14 +136,34 @@ demo(({addDemo: _, addCategory}) =>
 
 demo(({addDemo, addCategory: _}) =>
   addDemo("Code example", _propsApi =>
-    <code
-      style={ReactDOM.Style.make(
-        ~whiteSpace="pre",
-        ~padding="0",
-        ~backgroundColor=Reshowcase.Layout.Color.lightGray,
-        (),
-      )}>
-      "\ndemo(({addDemo: _, addCategory}) => {\n  addCategory(\"Typography\", ({addDemo: _, addCategory}) => {\n    addCategory(\"Headings\", ({addDemo, addCategory: _}) => {\n      addDemo(\"H1\", ({string, int}) =>\n        <h1\n          style={ReactDOM.Style.make(\n            ~fontSize={\n              let size = int(\"Font size\", {min: 0, max: 100, initial: 30, step: 1})\n              j`$(size)px`\n            },\n            (),\n          )}>\n          {string(\"Text\", \"hello\")->React.string}\n        </h1>\n      )\n      addDemo(\"H2\", ({string}) => <h2> {string(\"Text\", \"hello\")->React.string} </h2>)\n    })\n\n    addCategory(\"Text\", ({addDemo, addCategory: _}) => {\n      addDemo(\"Paragraph\", ({string}) => <p> {string(\"Text\", \"hello\")->React.string} </p>)\n      addDemo(\"Italic\", ({string}) => <i> {string(\"Text\", \"hello\")->React.string} </i>)\n    })\n  })\n})\n\nstart()\n\n"
+    <code className=Css.code>
+      {js|open Reshowcase.Entry;
+
+demo(({addDemo: _, addCategory}) =>
+  addCategory("Typography", ({addDemo: _, addCategory}) => {
+    addCategory("Headings", ({addDemo, addCategory: _}) => {
+      addDemo("H1", ({string, int, _}) => {
+        let size =
+          int("Font size", {min: 0, max: 100, initial: 30, step: 1});
+
+        <h1 className={Css.h1Size(size)}>
+          {string("Text", "hello")->React.string}
+        </h1>;
+      });
+      addDemo("H2", ({string, _}) =>
+        <h2> {string("Text", "hello")->React.string} </h2>
+      );
+    });
+    addCategory("Text", ({addDemo, addCategory: _}) => {
+      addDemo("Paragraph", ({string, _}) =>
+        <p> {string("Text", "hello")->React.string} </p>
+      );
+      addDemo("Italic", ({string, _}) =>
+        <i> {string("Text", "hello")->React.string} </i>
+      );
+    });
+  })
+);|js}
       ->React.string
     </code>
   )

diff --git a/example/dune b/example/dune
@@ -1,7 +1,7 @@
 (melange.emit
  (target example)
  (alias example)
- (libraries reshowcase reason-react)
+ (libraries reshowcase reason-react styled-ppx.melange)
  (module_systems es6)
  (preprocess
-  (pps melange.ppx reason-react-ppx)))
+  (pps melange.ppx reason-react-ppx styled-ppx)))
diff --git a/package.json b/package.json
@@ -1,6 +1,13 @@
 {
   "license": "MIT",
+  "dependenciesComment": {
+    "//": "Below we define the deps used by bindings installed by opam",
+    "@emotion/cache": "For styled-ppx.melange",
+    "@emotion/css": "For styled-ppx.melange"
+  },
   "dependencies": {
+    "@emotion/cache": "^11.0.0",
+    "@emotion/css": "^11.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
     "webpack": "^5.76.1",

diff --git a/reshowcase.opam b/reshowcase.opam
@@ -16,6 +16,7 @@ depends: [
   "reason" {>= "3.10.0"}
   "reason-react" {>= "0.14.0"}
   "reason-react-ppx" {>= "0.14.0"}
+  "styled-ppx"
   "ocaml-lsp-server" {with-test}
   "opam-check-npm-deps" {with-test}
   "odoc" {with-doc}

diff --git a/src/HighlightTerms.re b/src/HighlightTerms.re
@@ -160,6 +160,14 @@ let getTextParts = (~text, ~terms) => {
   getMarkedAndUnmarkedParts(markRanges, text)->List.toArray;
 };
 
+module Css = {
+  open StyleVars;
+
+  let highlight = [%cx {|
+    background-color: $(Color.orange);
+  |}];
+};
+
 [@react.component]
 let make = (~text, ~terms) =>
   switch (terms) {
@@ -170,12 +178,7 @@ let make = (~text, ~terms) =>
     |> Array.mapi(~f=(item, index) =>
          switch (item) {
          | Marked(text) =>
-           <mark
-             key={Belt.Int.toString(index)}
-             style={ReactDOM.Style.make(
-               ~backgroundColor=Layout.Color.orange,
-               (),
-             )}>
+           <mark key={Belt.Int.toString(index)} className=Css.highlight>
              text->React.string
            </mark>
          | Unmarked(text) =>