Adding box, link and typography

Author: vmarcosp

.bsb.lock

@@ -0,0 +1 @@
+19168

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<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>
+  html {
+    font-size: 10px;
+  }
+</style>

src/App.bs.js

@@ -1,8 +1,6 @@
-open Render
-
 GlobalStyles.includeStyle()
 
 @react.component
 let make = () => {
-  <div> <Button> {s("Sign in")} </Button> </div>
+  <div> <Link> {`Text`->React.string} </Link> </div>
 }

src/App.res

@@ -10,5 +10,3 @@ type decorator = chapter => React.element
 external storiesOf: (string, storybookModule) => section = "storiesOf"
 
 @send external add: (section, string, chapter) => section = "add"
-
-@send external addDecorator: (section, decorator) => section = "addDecorator"

src/MyText.js

@@ -0,0 +1,50 @@
+module Int = Js.Int
+
+type spacing = (int, int, int, int)
+
+let toRem = value => value->Int.toFloat *. 0.8 |> Css.rem
+
+let margins = ((top, left, bottom, right)) =>
+  CssJs.margin4(~top=top->toRem, ~left=left->toRem, ~bottom=bottom->toRem, ~right=right->toRem)
+
+let paddings = ((top, left, bottom, right)) =>
+  CssJs.padding4(~top=top->toRem, ~left=left->toRem, ~bottom=bottom->toRem, ~right=right->toRem)
+
+let box = (
+  ~direction as direction_,
+  ~align,
+  ~justify,
+  ~block as block_,
+  ~fullHeight,
+  ~margin as marginT,
+  ~padding as paddingT,
+) => {
+  open CssJs
+
+  style(.[
+    display(#flex),
+    flexDirection(direction_),
+    alignItems(align),
+    justifyContent(justify),
+    width(block_ ? 100.0->pct : auto),
+    height(fullHeight ? 100.0->pct : auto),
+    margins(marginT),
+    paddings(paddingT),
+  ])
+}
+
+@react.component
+let make = (
+  ~children,
+  ~direction=#row,
+  ~align=#center,
+  ~justify=#center,
+  ~block=true,
+  ~fullHeight=false,
+  ~margin=(0, 0, 0, 0),
+  ~padding=(0, 0, 0, 0),
+) => {
+  <div className={box(~direction, ~align, ~justify, ~block, ~margin, ~padding, ~fullHeight)}>
+    children
+  </div>
+}

src/bindings/Storybook.res

@@ -1,5 +1,9 @@
 open CssJs
 
+  style(.[
+  display(#flexx)
+])
+
 let button = (~block) =>
   style(.[
     background(Theme.Colors.blue->hex),
@@ -14,4 +18,5 @@ let button = (~block) =>
   ])
 
 @react.component
-let make = (~children, ~block=false) => <button className={button(~block)}> children </button>
+let make = (~children, ~block=false, ~onClick) =>
+  <button onClick className={button(~block)}> children </button>