chore: improving DX

.env

@@ -1 +1,2 @@
 SKIP_PREFLIGHT_CHECK=true
+FAST_REFRESH=false

.storybook/preview-head.html

@@ -1,6 +1,12 @@
-<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">
+<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,17 +8,18 @@
     "@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",
+    "start:dev": "run-p start res:watch",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -67,6 +68,7 @@
     "@storybook/addon-links": "^6.2.9",
     "@storybook/node-logger": "^6.2.9",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.9"
+    "@storybook/react": "^6.2.9",
+    "npm-run-all": "^4.1.5"
   }
 }

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.res

@@ -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/Tabs/Tab_Stories.res

@@ -0,0 +1,7 @@
+open Storybook
+
+storiesOf("Tab", Helpers.storybookModule)
+->add("Basic usage", () => {
+  <div />
+})
+->ignore

src/components/Tabs/Tabs.res

@@ -0,0 +1,35 @@
+open Render
+
+module Styles = Tabs_Styles
+module Array = Belt.Array
+
+type tab<'tabId> = {
+  label: string,
+  id: 'tabId,
+}
+
+type tabs<'tabId> = array<tab<'tabId>>
+
+module Tab = {
+  @react.component
+  let make = (~label, ~onChange, ~id, ~active) =>
+    <li className={Styles.tab(~active)}>
+      <button onClick={_ => onChange(id)}> {label->s} </button>
+    </li>
+}
+
+module Panel = {
+  @react.component
+  let make = (~active, ~children) => {
+    active ? <div> children </div> : React.null
+  }
+}
+
+@react.component
+let make = (~tabs, ~onChange, ~current) => {
+  <ul className=Styles.tabs>
+    {tabs->map((tab, key) => {
+      <Tab key label=tab.label id=tab.id onChange active={current == tab.id} />
+    })}
+  </ul>
+}

src/components/Tabs/Tabs_Stories.res

@@ -0,0 +1,37 @@
+open Storybook
+open Render
+
+storiesOf("Tabs", Helpers.storybookModule)
+->add("Basic usage", () => {
+  let (tab, setTab) = React.useState(_ => 0)
+
+  let tabs: Tabs.tabs<int> = [
+    {
+      label: "Global feed",
+      id: 0,
+    },
+    {
+      label: "Your feed",
+      id: 1,
+    },
+  ]
+
+  <div>
+    <Tabs current={tab} tabs onChange={id => setTab(_ => id)} />
+    <br />
+    <div>
+      <Tabs.Panel active={tab === 0}>
+        <Card>
+          <Typography level=#1 variant=#title>
+            {"ReScript & React.js - Real World App"->s}
+          </Typography>
+          <Typography> {"Texto"->s} </Typography>
+        </Card>
+      </Tabs.Panel>
+      <Tabs.Panel active={tab === 1}>
+        <Card> <Typography variant=#title level=#2> {`The global feed...`->s} </Typography> </Card>
+      </Tabs.Panel>
+    </div>
+  </div>
+})
+->ignore