Updating typography, input and link component

Author: vmarcosp

.storybook/preview-head.html

@@ -1,6 +1,9 @@
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
 <style>
+  * {
+    box-sizing: border-box;
+  }
   html {
     font-size: 10px;
   }

package.json

@@ -8,16 +8,16 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "bs-css-emotion": "^2.5.1",
-    "bs-platform": "8.4.2",
+    "rescript": "9.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "res:watch": "bsb -make-world -w",
-    "res:build": "bsb -make-world -clean",
-    "res:clean": "bsb -clean",
+    "res:watch": "rescript build -w",
+    "res:build": "rescript build -with-deps",
+    "res:clean": "rescript clean",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/components/Card/Card.res

@@ -1,13 +1,12 @@
 open CssJs
 
-let card = style(.[
-  //
+let card = style(. [
   background(Theme.Colors.lightBlue1->hex),
   borderRadius(Theme.Radius.medium),
   padding(3.2->rem),
 ])
 
 @react.component
 let make = (~children) => {
-  <div className={card}>children</div>
+  <div className={card}> children </div>
 }

src/components/Card/Card_Stories.bs.js

@@ -4,13 +4,8 @@ open Render
 storiesOf("Card", Helpers.storybookModule)
 ->add("Basic usage", () => {
   <Card>
-    <Typography level=#h1 variant=#title>
-      {"ReScript & React.js - Real World App"->s}
-    </Typography>
-
-    <Typography>
-      {"Texto"->s}
-    </Typography>
+    <Typography level=#1 variant=#title> {"ReScript & React.js - Real World App"->s} </Typography>
+    <Typography> {"Texto"->s} </Typography>
   </Card>
 })
 ->ignore

src/components/Card/Card_Stories.res

@@ -1,24 +1,24 @@
 type variant = [#title | #text]
-type level = [#h1 | #h2]
+type level = [#1 | #2]
 
 module Styles = {
   open CssJs
 
-  let h1 = style(.[
+  let h1 = style(. [
     fontSize(3.2->rem),
     fontFamily(Theme.fontFamily),
     fontWeight(#bold),
     color(Theme.Colors.black->hex),
   ])
 
-  let h2 = style(.[
+  let h2 = style(. [
     fontSize(2.8->rem),
     fontFamily(Theme.fontFamily),
     fontWeight(#bold),
     color(Theme.Colors.black->hex),
   ])
 
-  let text = style(.[
+  let text = style(. [
     fontSize(2.0->rem),
     fontFamily(Theme.fontFamily),
     letterSpacing(-0.02->em),
@@ -27,10 +27,10 @@ module Styles = {
 }
 
 @react.component
-let make = (~variant=#text, ~level: level=#h1, ~children) => {
+let make = (~variant=#text, ~level: level=#1, ~children) => {
   switch (variant, level) {
-  | (#title, #h1) => <h1 className={Styles.h1}> children </h1>
-  | (#title, #h2) => <h2 className={Styles.h2}> children </h2>
+  | (#title, #1) => <h1 className={Styles.h1}> children </h1>
+  | (#title, #2) => <h2 className={Styles.h2}> children </h2>
   | (#text, _) => <p className={Styles.text}> children </p>
   }
 }

src/components/Input/Input.bs.js

@@ -6,9 +6,9 @@ storiesOf("Typography", Helpers.storybookModule)
   <Typography> {`Don’t have an account?`->s} </Typography>
 })
 ->add("Title 1", () => {
-  <Typography variant=#title level=#h1> {`Title 1`->s} </Typography>
+  <Typography variant=#title level=#1> {`Title 1`->s} </Typography>
 })
 ->add("Title 2", () => {
-  <Typography variant=#title level=#h2> {`Title 2`->s} </Typography>
+  <Typography variant=#title level=#2> {`Title 2`->s} </Typography>
 })
 ->ignore

src/components/Link/Link.bs.js

@@ -1 +1,6 @@
 let s = React.string
+
+let map = (elements, fn) =>
+  elements
+  ->Belt.Array.mapWithIndex((key, element) => fn(element, key->Belt.Int.toString))
+  ->React.array

src/components/Typography/Typography.bs.js

@@ -1,10 +1,16 @@
 module Colors = {
+  open CssJs
+
   let blue = "477BFF"
   let white = "fff"
   let gray1 = "A6AABE"
   let gray2 = "AEB3C9"
   let black = "14103D"
   let lightBlue1 = "E2EAFF"
+  let blueGradient = linearGradient(
+    180.0->deg,
+    list{(0.0->pct, "477BFF"->hex), (100.0->pct, "306AFF"->hex)},
+  )
 }
 
 module Radius = {
@@ -17,8 +23,7 @@ module Radius = {
 
 module Spacing = {
   open CssJs
-
-  let xs = 0.8->rem
+  let make = (value: int) => value->Js.Int.toFloat->(v => v *. 0.6)->rem
 }
 
 let fontFamily = #custom("'DM Sans', sans-serif")

src/components/Typography/Typography.res

@@ -4516,11 +4516,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/bs-css/-/bs-css-14.0.1.tgz#983394472d825c590a8f91230bfcb082e9474670"
   integrity sha512-gNaKpU7sQKjyVCTgNa+ReHt0yAx19HcOYbGU4Sg7Jlv04NXK3FCvqffF60xb+x+jMMquOTLIj4VyQPiPSZ82Nw==
 
-[email protected]:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/bs-platform/-/bs-platform-8.4.2.tgz#778dabd1dfb3bc95e0086c58dabae74e4ebdee8a"
-  integrity sha512-9q7S4/LLV/a68CweN382NJdCCr/lOSsJR3oQYnmPK98ChfO/AdiA3lYQkQTp6T+U0I5Z5RypUAUprNstwDtMDQ==
-
 [email protected]:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -12299,6 +12294,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+[email protected]:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/rescript/-/rescript-9.1.3.tgz#1a0f41342acd8dc4e26fd1782d0997b8a7577698"
+  integrity sha512-TpfW3DakgCJtWbRvAek7cysuikBWarjqt8PrbFg0Rk3O+o4dt0inBdxyZe/+u3LOAWzyKK+2UlqC0xiCBgs6pQ==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"