Migrate components/ to rescript

Author: ryyppy

components/AnsiPre.re renamed to components/AnsiPre.res

@@ -1,11 +1,13 @@
-open Util.ReactStuff;
-open Ansi;
+// This file was automatically converted to ReScript from 'AnsiPre.re'
+// Check the output and make sure to delete the original file
+open Util.ReactStuff
+open Ansi
 
 type colorTarget =
   | Fg
-  | Bg;
+  | Bg
 
-let mapColor = (~target: colorTarget, c: Color.t): string => {
+let mapColor = (~target: colorTarget, c: Color.t): string =>
   switch (target, c) {
   | (Fg, Black) => "text-black"
   | (Fg, Red) => "text-fire"
@@ -23,35 +25,30 @@ let mapColor = (~target: colorTarget, c: Color.t): string => {
   | (Bg, Magenta) => "bg-berry"
   | (Bg, Cyan) => "bg-dark-code-2"
   | (Bg, White) => "bg-snow-dark"
-  };
-};
+  }
 
 let renderSgrString = (~key: string, sgrStr: SgrString.t): React.element => {
-  let {SgrString.content, params} = sgrStr;
+  let {SgrString.content: content, params} = sgrStr
 
-  let className =
-    Belt.Array.reduce(params, "", (acc, p) => {
-      switch (p) {
-      | Sgr.Bold => acc ++ " bold"
-      | Fg(c) => acc ++ " " ++ mapColor(~target=Fg, c)
-      | Bg(c) => acc ++ " " ++ mapColor(~target=Bg, c)
-      | _ => acc
-      }
-    });
+  let className = Belt.Array.reduce(params, "", (acc, p) =>
+    switch p {
+    | Sgr.Bold => acc ++ " bold"
+    | Fg(c) => acc ++ (" " ++ mapColor(~target=Fg, c))
+    | Bg(c) => acc ++ (" " ++ mapColor(~target=Bg, c))
+    | _ => acc
+    }
+  )
 
-  <span key className> content->s </span>;
-};
+  <span key className> {content->s} </span>
+}
 
-[@react.component]
+@react.component
 let make = (~className=?, ~children: string) => {
-  let spans =
-    Ansi.parse(children)
-    ->SgrString.fromTokens
-    ->Belt.Array.mapWithIndex((i, str) => {
-        let key = Belt.Int.toString(i);
-        renderSgrString(~key, str);
-      });
+  let spans = Ansi.parse(children)->SgrString.fromTokens->Belt.Array.mapWithIndex((i, str) => {
+    let key = Belt.Int.toString(i)
+    renderSgrString(~key, str)
+  })
 
   // Note: pre is essential here, otherwise whitespace and newlines are not respected
-  <pre ?className> spans->ate </pre>;
-};
+  <pre ?className> {spans->ate} </pre>
+}

components/ApiIntro.re

@@ -0,0 +1,2 @@
+@react.component
+let make = (~children) => <div className="my-10"> children </div>

components/ApiIntro.res

@@ -0,0 +1,53 @@
+// This file was automatically converted to ReScript from 'ApiMarkdown.re'
+// Check the output and make sure to delete the original file
+open Util.ReactStuff
+
+/*
+   This module is intended for the ODOC like documentation layout.
+   It hides the h2 tags and does
+ */
+open Markdown
+
+module InvisibleAnchor = {
+  @react.component
+  let make = (~id: string) => {
+    let style = ReactDOMRe.Style.make(~position="absolute", ~top="-1rem", ())
+    <span className="relative" ariaHidden=true> <a id style /> </span>
+  }
+}
+
+module H1 = {
+  @react.component
+  let make = (~children) =>
+    <h1 className="text-6xl leading-1 mb-2 font-sans font-medium text-night-dark"> children </h1>
+}
+
+module H2 = {
+  // We will currently hide the headline, to keep the structure,
+  // but having an Elm like documentation
+  @react.component
+  let make = (~id, ~children) => <>
+    <div className="border-b border-gray-10 mb-10 mt-20" /> <Markdown.H2 id> children </Markdown.H2>
+  </>
+}
+
+let default = Mdx.Components.t(
+  ~intro=Intro.make,
+  ~p=P.make,
+  ~li=Li.make,
+  ~h1=H1.make,
+  ~h2=H2.make,
+  ~h3=H3.make,
+  ~h4=H4.make,
+  ~h5=H5.make,
+  ~ul=Ul.make,
+  ~ol=Ol.make,
+  ~a=A.make,
+  ~thead=Thead.make,
+  ~th=Th.make,
+  ~td=Td.make,
+  ~pre=Pre.make,
+  ~inlineCode=InlineCode.make,
+  ~code=Code.make,
+  (),
+)

components/ApiMarkdown.re

@@ -1,9 +1,8 @@
-open Util.ReactStuff;
+open Util.ReactStuff
 
-[@react.component]
-let make = (~children) => {
+@react.component
+let make = (~children) =>
   <button
     className="transition-colors duration-200 inline-block text-base text-fire hover:text-white hover:bg-fire rounded border border-fire-80 px-5 py-2">
     children
-  </button>;
-};
+  </button>