@colisweb/rescript-toolkit 2.44.0 → 2.45.0

package/bsconfig.json

@@ -23,8 +23,6 @@
   "suffix": ".bs.js",
   "namespace": false,
   "bs-dependencies": [
-    "bs-css",
-    "bs-css-emotion",
     "@rescript/react",
     "reason-promise",
     "decco",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.44.0",
+  "version": "2.45.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",
@@ -41,8 +41,6 @@
     "autoprefixer": "10.4.7",
     "axios": "0.24.0",
     "bs-axios": "0.0.43",
-    "bs-css": "13.4.0",
-    "bs-css-emotion": "2.4.0",
     "case": "1.6.3",
     "click-outside-hook": "1.1.0",
     "copy-to-clipboard": "3.3.1",

package/src/ui/Toolkit__Ui_ButtonGroup.res

@@ -4,39 +4,9 @@ let make = (~children, ~className="", ~size: [#md | #xl]=#md) => {
   <div
     className={cx([
       className,
-      "flex justify-center items-center rounded-full font-display bg-gray-200",
+      "flex justify-center items-center rounded-full font-display bg-gray-200 cw-ButtonGroup",
       isMd ? "h-6" : "h-10",
       isMd ? "text-sm" : "text-xl",
-      {
-        open Css
-        style(list{
-          selector(
-            "& > button",
-            list{
-              whiteSpace(#nowrap),
-              height(100.->pct),
-              padding2(~v=0.75->rem, ~h=isMd ? 0.75->rem : 1.->rem),
-              display(#flex),
-              alignItems(#center),
-              justifyContent(#center),
-              borderRadius(2.->rem),
-              selector("&:hover", list{backgroundColor("3DDEF3"->hex)}),
-            },
-          ),
-          selector(
-            "& > button.selected",
-            list{
-              background(
-                linearGradient(
-                  270.->deg,
-                  list{(0.->pct, "11a3b6"->hex), (100.->pct, "27d0dc"->hex)},
-                ),
-              ),
-              color(white),
-            },
-          ),
-        })
-      },
     ])}>
     children
   </div>

package/src/ui/Toolkit__Ui_Card.res

@@ -79,13 +79,7 @@ module Footer = {
 @react.component
 let make = (~className="", ~children=React.null, ~customMinHeight=200) =>
   <div
-    className={cx([
-      className,
-      "rounded-lg shadow-sm bg-white p-6",
-      {
-        open Css
-        style(list{minHeight(customMinHeight->px)})
-      },
-    ])}>
+    style={ReactDOMStyle.make(~minHeight=`${customMinHeight->Int.toString}px`, ())}
+    className={cx([className, "rounded-lg shadow-sm bg-white p-6"])}>
     children
   </div>

package/src/ui/Toolkit__Ui_Checkbox.res

@@ -1,19 +1,5 @@
 type size = [#xs | #sm | #md | #lg]
 
-module Styles = {
-  open Css
-
-  let label = style(list{
-    selector("& > input + .checkmark", list{backgroundColor(hex("fff"))}),
-    selector(
-      "& > input:checked + .checkmark",
-      list{backgroundColor(hex("15cbe3")), borderColor(hex("15cbe3"))},
-    ),
-    selector("& > input + .checkmark > *", list{opacity(0.)}),
-    selector("& > input:checked + .checkmark > *", list{opacity(1.)}),
-  })
-}
-
 @react.component
 let make = (
   ~value,
@@ -45,8 +31,7 @@ let make = (
 
   <label
     className={cx([
-      Styles.label,
-      "items-center",
+      "items-center cw-Checkbox",
       inverseLabel ? "inline-flex flex-row-reverse justify-end" : "flex flex-row",
       disabled->Option.getWithDefault(false)
         ? "cursor-not-allowed opacity-75 text-gray-600"
@@ -58,7 +43,7 @@ let make = (
       type_="checkbox"
       value
       ?defaultChecked
-      className="hidden"
+      className="hidden peer"
       onChange={event => {
         let target = ReactEvent.Form.target(event)
         let checked = target["checked"]
@@ -73,7 +58,8 @@ let make = (
     />
     <span
       className={cx([
-        "checkmark rounded border text-white border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
+        "peer-checked:bg-primary-500 peer-checked:border-primary-500",
+        "bg-white rounded border text-white border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
         switch size {
         | #xs => "w-4 h-4"
         | #sm => "w-6 h-6"

package/src/ui/Toolkit__Ui_Modal.res

@@ -2,19 +2,6 @@ type size = [#xs | #sm | #md | #lg | #custom(int)]
 type color = [#primary | #success | #danger | #neutral]
 type style = [#default | #colored(color)]
 
-let sizeRule = size => {
-  let value = switch size {
-  | #xs => 480
-  | #sm => 600
-  | #md => 768
-  | #lg => 900
-  | #custom(value) => value
-  }
-
-  open Css
-  style(list{width(pct(100.)), important(maxWidth(px(value)))})
-}
-
 let modalStyle = (~type_) =>
   switch type_ {
   | #default => "rounded"
@@ -51,23 +38,6 @@ let closeIconStyle = (~type_) =>
   | #colored(_) => "hover:bg-white hover:text-black text-white"
   }
 
-let blockBody = () => {
-  open Css
-  global("body", list{overflow(#hidden)})
-}
-let resetBody = () => {
-  open Css
-  global("body", list{overflow(#auto)})
-}
-{
-  open Css
-  global("[data-reach-dialog-overlay]", list{important(background(rgba(74, 115, 120, #num(0.5))))})
-}
-{
-  open Css
-  global("[data-reach-dialog-content]", list{important(background(transparent))})
-}
-
 @react.component
 let make = (
   ~isVisible,
@@ -79,7 +49,28 @@ let make = (
   ~footer=?,
   ~ariaLabel="",
 ) =>
-  <ReachUi.Dialog ariaLabel isOpen=isVisible onDismiss=hide className={sizeRule(size)}>
+  <ReachUi.Dialog
+    ariaLabel
+    isOpen=isVisible
+    onDismiss=hide
+    style={ReactDOMStyle.make(
+      ~maxWidth={
+        let value = switch size {
+        | #xs => 480
+        | #sm => 600
+        | #md => 768
+        | #lg => 900
+        | #custom(value) => value
+        }
+        `${value->Int.toString}px`
+      },
+      (),
+    )}
+    className={cx([
+      {
+        "w-full "
+      },
+    ])}>
     <div className={cx(["bg-white pb-5 z-40 shadow-lg w-full", modalStyle(~type_)])}>
       <header
         className={cx([

package/src/ui/Toolkit__Ui_ProgressBar.res

@@ -4,6 +4,7 @@ type color = [#success | #danger | #warning | #info]
 let make = (~progression: float, ~color: color=#success) =>
   <div className="flex flex-row w-full h-2 bg-neutral-300 rounded-lg">
     <div
+      style={ReactDOMStyle.make(~width=`${progression->Float.toString}%`, ())}
       className={cx([
         "h-full rounded-lg",
         switch color {
@@ -12,7 +13,6 @@ let make = (~progression: float, ~color: color=#success) =>
         | #warning => "bg-warning-500"
         | #info => "bg-info-500"
         },
-        Css.style(list{Css.width(progression->#percent)}),
       ])}
     />
   </div>

package/src/ui/Toolkit__Ui_Radio.res

@@ -1,20 +1,5 @@
 type size = [#xs | #sm | #md | #lg]
 
-module Styles = {
-  open Css
-
-  let label = style(list{
-    selector("& > input + .checkmark", list{backgroundColor(hex("fff"))}),
-    selector("& > input:focus + .checkmark", list{unsafe("boxShadow", "0px 0px 4px #15CBE3")}),
-    selector(
-      "& > input:checked + .checkmark",
-      list{backgroundColor(hex("15cbe3")), borderColor(hex("15cbe3"))},
-    ),
-    selector("& > input + .checkmark > *", list{opacity(0.)}),
-    selector("& > input:checked + .checkmark > *", list{opacity(1.)}),
-  })
-}
-
 @react.component
 let make = (
   ~value,
@@ -28,7 +13,6 @@ let make = (
 ) =>
   <label
     className={cx([
-      Styles.label,
       "flex items-center",
       disabled->Option.getWithDefault(false)
         ? "cursor-not-allowed opacity-75 text-gray-600"
@@ -38,7 +22,7 @@ let make = (
     <input
       type_="radio"
       value
-      className="opacity-0 w-0 h-0"
+      className="opacity-0 w-0 h-0 peer"
       onChange={event => {
         let target = ReactEvent.Form.target(event)
         let value = target["value"]
@@ -51,6 +35,8 @@ let make = (
     />
     <span
       className={cx([
+        "bg-white peer-focus:shadow-sm peer-focus:shadow-primary-500",
+        "peer-checked:border-primary-500 peer-checked:bg-primary-500",
         "checkmark rounded-full border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center",
         switch size {
         | #xs => "w-4 h-4"

package/src/ui/Toolkit__Ui_Tooltip.res

@@ -38,32 +38,23 @@ let make = (
     {isVisible && canBeShowed
       ? <ReachUi.Portal>
           <div
-            className={cx([
-              "absolute w-0 h-0 border-gray-800",
-              triangleClassName,
-              {
-                open Css
-                style(list{
-                  unsafe("borderLeft", "10px solid transparent !important"),
-                  unsafe("borderRight", "10px solid transparent !important"),
-                  unsafe("borderBottom", "10px solid"),
-                  left(
-                    triggerRect
-                    ->Js.Nullable.toOption
-                    ->Option.mapWithDefault(0, triggerRect =>
-                      triggerRect.left - 10 + triggerRect.width / 2
-                    )
-                    ->px,
-                  ),
-                  top(
-                    triggerRect
-                    ->Js.Nullable.toOption
-                    ->Option.mapWithDefault(0, triggerRect => triggerRect.bottom + scrollY)
-                    ->px,
-                  ),
-                })
-              },
-            ])}
+            style={ReactDOMStyle.make(
+              ~borderLeft="10px solid transparent",
+              ~borderRight="10px solid transparent",
+              ~borderBottom="10px solid",
+              ~left=`${triggerRect
+                ->Js.Nullable.toOption
+                ->Option.mapWithDefault(0, triggerRect =>
+                  triggerRect.left - 10 + triggerRect.width / 2
+                )
+                ->Int.toString}px`,
+              ~top=`${triggerRect
+                ->Js.Nullable.toOption
+                ->Option.mapWithDefault(0, triggerRect => triggerRect.bottom + scrollY)
+                ->Int.toString}px`,
+              (),
+            )}
+            className={cx(["absolute w-0 h-0 border-gray-800", triangleClassName])}
           />
         </ReachUi.Portal>
       : React.null}
@@ -71,10 +62,10 @@ let make = (
       ? <Toolkit__Ui_Spread props=tooltip>
           <TooltipPopup
             label
+            style={ReactDOMStyle.make(~maxWidth=`${maxWidth->Int.toString}px`, ())}
             className={cx([
               "px-3 py-2 bg-gray-800 rounded text-white text-sm z-40 whitespace-pre-wrap",
               tooltipClassName,
-              Css.style(list{Css.maxWidth(maxWidth->Css.px)}),
             ])}
             position=centered
           />

package/src/ui/styles.css

@@ -39,12 +39,13 @@ body,
 
 [data-reach-dialog-content] {
   padding: 0 !important;
+  background: transparent;
   margin: 10vh auto;
   outline: 0;
 }
 
 [data-reach-dialog-overlay] {
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(74, 115, 120, 0.5);
   z-index: 40;
   position: fixed;
   top: 0;
@@ -376,4 +377,20 @@ input[type=number] {
   color: #15373a;
 }
 
+.cw-ButtonGroup > button {
+  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3
+}
+.cw-ButtonGroup > button:hover {
+  @apply bg-primary-300
+}
+
+.cw-ButtonGroup > button.selected {
+  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
+  color: white;
+}
+
+.cw-Checkbox > input:checked + .checkmark > * {
+  @apply opacity-100
+}
+
 /* purgecss end ignore */

package/src/vendors/reach-ui/ReachUi_Tooltip.res

@@ -28,6 +28,7 @@ module TooltipPopup = {
   external make: (
     ~className: string=?,
     ~position: (triggerRect, triggerRect) => position,
+    ~style: ReactDOMStyle.t=?,
     ~label: React.element,
   ) => React.element = "TooltipPopup"
 }