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>
   }
 }