Adding Button component

Author: vmarcosp

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.merlin
+/lib

.merlin

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/**/*_Stories.js"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ]
+}

.storybook/main.js

@@ -0,0 +1,10 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.storybook/preview.js

@@ -14,5 +14,10 @@
     }
   ],
   "suffix": ".bs.js",
-  "bs-dependencies": ["@rescript/react", "bs-css-emotion", "bs-css"]
+  "bs-dependencies": [
+    "@rescript/react",
+    "bs-css-emotion",
+    "bs-css",
+    "bs-storybook"
+  ]
 }

bsconfig.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "bs-css-emotion": "^2.5.1",
     "bs-platform": "8.4.2",
+    "bs-storybook": "mishaszu/bs-storybook",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -21,12 +22,24 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
     ]
   },
   "jest": {
@@ -49,5 +62,12 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@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"
+  }
 }

lib/bs/.bsbuild

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <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">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

lib/bs/.bsdeps

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

lib/bs/.compiler.log

@@ -1,6 +1,17 @@
-open Render
+open CssJs
 
-Helpers.require("./button.css")
+let button = (~block) =>
+  style(.[
+    background(Theme.Colors.blue->hex),
+    borderStyle(none),
+    color(Theme.Colors.white->hex),
+    height(5.5->rem),
+    minWidth(block ? 100.0->pct : 20.0->rem),
+    borderRadius(Theme.Radius.small),
+    cursor(pointer),
+    fontFamily(Theme.fontFamily),
+    fontSize(2.0->rem),
+  ])
 
 @react.component
-let make = () => <button> {s("Sign in")} </button>
+let make = (~children, ~block=false) => <button className={button(~block)}> children </button>

lib/bs/.ninja_log

@@ -0,0 +1,5 @@
+open CssJs
+
+let includeStyle = () => {
+  global(. "html, body, #root", [padding(zero), margin(zero), fontSize(10->px)])
+}