Merge branch 'main' into esbuild

ahrefs · Sep 5, 2024 · e284770 · e284770
2 parents e4b6af2 + f83b610
commit e284770
Show file tree

Hide file tree

Showing 15 changed files with 1,045 additions and 1,022 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,5 +1,10 @@
 {
   "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": {
     "@craftamap/esbuild-plugin-html": "https://github.com/denis-ok/esbuild-plugin-html#79f512f447eb98efa6b6786875f617a095eaaf09",
     "esbuild": "^0.21.3"

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/Bindings.re b/src/Bindings.re
@@ -11,11 +11,9 @@ module URLSearchParams = {
 
   let toArray = (t, ()) => {
     let array = [||];
-    t->(
-         forEach((value, key) =>
-           Js.Array.push(array, ~value=(key, value))->ignore
-         )
-       );
+    t->forEach((value, key) =>
+      Js.Array.push(array, ~value=(key, value))->ignore
+    );
     array;
   };
 };
@@ -56,3 +54,14 @@ module LocalStorage = {
   [@mel.send] external removeItem: (t, string) => unit = "removeItem";
   external localStorage: t = "localStorage";
 };
+
+module Element = {
+  type t = Dom.element;
+
+  type options = {
+    behavior: string,
+    block: string,
+  };
+
+  [@mel.send] external scrollIntoView: (t, options) => unit = "scrollIntoView";
+};
diff --git a/src/Demos.re b/src/Demos.re
@@ -7,63 +7,54 @@ let rec dig = (demos: t, categories: list(string), demoName: string) =>
   switch (categories) {
   | [] =>
     demos
-    ->(Js.Dict.get(demoName))
-    ->(
-        Option.flatMap(entity =>
-          switch (entity) {
-          | Demo(demoUnit) => Some(demoUnit)
-          | Category(_) => None
-          }
-        )
+    ->Js.Dict.get(demoName)
+    ->Option.flatMap(entity =>
+        switch (entity) {
+        | Demo(demoUnit) => Some(demoUnit)
+        | Category(_) => None
+        }
       )
+
   | [categoryName, ...categories] =>
     demos
-    ->(Js.Dict.get(categoryName))
-    ->(
-        Option.flatMap(entity =>
-          switch (entity) {
-          | Category(demos) => dig(demos, categories, demoName)
-          | Demo(_) => None
-          }
-        )
+    ->Js.Dict.get(categoryName)
+    ->Option.flatMap(entity =>
+        switch (entity) {
+        | Category(demos) => dig(demos, categories, demoName)
+        | Demo(_) => None
+        }
       )
   };
 
 let findDemo = (urlSearchParams: URLSearchParams.t, demoName, demos: t) => {
   let categories =
     urlSearchParams
-    ->(URLSearchParams.toArray())
+    ->URLSearchParams.toArray()
     ->List.fromArray
-    ->(
-        List.keep(((key, _value)) =>
-          key->(Js.String.startsWith(~prefix="category"))
-        )
+    ->List.keep(((key, _value)) =>
+        key->Js.String.startsWith(~prefix="category")
       )
-    ->(
-        List.sort(((categoryNum1, _), (categoryNum2, _)) =>
-          String.compare(categoryNum1, categoryNum2)
-        )
+    ->List.sort(((categoryNum1, _), (categoryNum2, _)) =>
+        String.compare(categoryNum1, categoryNum2)
       )
-    ->(List.map(((_categoryNum, categoryName)) => categoryName));
+    ->List.map(((_categoryNum, categoryName)) => categoryName);
 
-  demos->(dig(categories, demoName));
+  demos->dig(categories, demoName);
 };
 
 let rec isNestedEntityMatchSearch = (demos: t, searchString) =>
   demos
   ->Js.Dict.entries
-  ->(
-      Array.some(((entityName, entity)) => {
-        let isEntityNameMatchSearch =
-          HighlightTerms.getMatchingTerms(~searchString, ~entityName)
-          ->Array.size
-          > 0;
+  ->Array.some(((entityName, entity)) => {
+      let isEntityNameMatchSearch =
+        HighlightTerms.getMatchingTerms(~searchString, ~entityName)
+        ->Array.size
+        > 0;
 
-        switch (entity) {
-        | Demo(_) => isEntityNameMatchSearch
-        | Category(demos) =>
-          isEntityNameMatchSearch
-          || isNestedEntityMatchSearch(demos, searchString)
-        };
-      })
-    );
+      switch (entity) {
+      | Demo(_) => isEntityNameMatchSearch
+      | Category(demos) =>
+        isEntityNameMatchSearch
+        || isNestedEntityMatchSearch(demos, searchString)
+      };
+    });
diff --git a/src/Entry.re b/src/Entry.re
@@ -8,7 +8,7 @@ let rootMap: Demos.t = Js.Dict.empty();
 let demo = (f): unit => {
   let internalAddDemo =
       (demoName: string, demoUnit: Configs.demoUnitProps => React.element) =>
-    rootMap->(Js.Dict.set(demoName, Demo(demoUnit)));
+    rootMap->Js.Dict.set(demoName, Demo(demoUnit));
 
   let rec internalAddCategory =
           (
@@ -17,10 +17,10 @@ let demo = (f): unit => {
             ~prevMap: Demos.t,
           ) => {
     let newCategory = Js.Dict.empty();
-    prevMap->(Js.Dict.set(categoryName, Category(newCategory)));
+    prevMap->Js.Dict.set(categoryName, Category(newCategory));
     let newAddDemo =
         (demoName: string, demoUnit: Configs.demoUnitProps => React.element) =>
-      newCategory->(Js.Dict.set(demoName, Demo(demoUnit)));
+      newCategory->Js.Dict.set(demoName, Demo(demoUnit));
 
     let newFunctions = {
       addDemo: newAddDemo,