@colisweb/rescript-toolkit 2.24.0 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.24.0",
+  "version": "2.26.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",

package/src/mock/AppWithMock.res

@@ -0,0 +1,43 @@
+let localStorageKey = "@colisweb/mock"
+
+@react.component
+let make = (~worker: Msw.worker, ~children) => {
+  let (mockEnabled, setMock) = React.useState(() =>
+    Browser.LocalStorage.getItem(localStorageKey)
+    ->Js.Nullable.toOption
+    ->Option.mapWithDefault(false, bool_of_string)
+  )
+
+  React.useEffect1(() => {
+    if mockEnabled {
+      worker->Msw.start
+      Browser.LocalStorage.setItem(localStorageKey, Js.Nullable.return("true"))
+    } else {
+      worker->Msw.stop
+      Browser.LocalStorage.removeItem(localStorageKey)
+    }
+
+    None
+  }, [mockEnabled])
+
+  <React.Suspense fallback={<Toolkit__Ui_SpinnerFullScreen />}>
+    <label
+      className={`fixed top-2 left-1/2 flex flex-row gap-2 items-center justify-center ${mockEnabled
+          ? "bg-success-100 border-success-400 text-success-700"
+          : "bg-neutral-100"} p-1 border rounded-lg z-50 cursor-pointer`}>
+      <span> {"Mock"->React.string} </span>
+      <input
+        type_={"checkbox"}
+        checked={mockEnabled}
+        onChange={event => {
+          let checked = (event->ReactEvent.Form.target)["checked"]
+
+          setMock(_ => checked)
+        }}
+      />
+    </label>
+    {children}
+  </React.Suspense>
+}
+
+let defaul = make

package/src/mock/AppWithMock.resi

@@ -0,0 +1,2 @@
+@react.component
+let make: (~worker: Msw.worker, ~children: React.element) => React.element

package/src/mock/index.md

@@ -0,0 +1,65 @@
+# Mock
+
+We use [msw](https://mswjs.io) for mocking API content.
+
+## Usage
+
+Install the package
+
+```
+yarn add msw --dev
+```
+
+Define the mock
+
+```rescript
+/* Mock_Page_X.res */
+
+open Identifiers
+
+let mocks = [
+  Msw.Rest.get(
+    "https://api.url",
+    (req, res, ctx) => {
+      open ColiswebApi.V5.Transporter.GetContactsWithParameters.Config
+      let _emptyResponse = []
+      let defaultResponse = [
+        {
+          id: ContactIdString.make("1"),
+          firstName: "Thomas",
+          lastName: "Deconinck",
+          email: "dck@colisweb.com",
+          primaryPhone: "0123456789",
+          parameters: {
+            id: ParameterId.make("1"),
+            email: true,
+            sms: true,
+            call: true,
+          },
+          carrier: None,
+        }
+      ]
+
+      let transporterId = req.params["transporterId"]
+
+      switch transporterId {
+      | "9" => res(Msw.Ctx.json(ctx, defaultResponse))
+      | _ => ()
+      }
+    },
+  ),
+  Msw.Rest.put(
+    "https://api.url",
+    (_req, res, ctx) => {
+      res(Msw.Ctx.status(ctx, 200))
+    },
+  ),
+]
+```
+
+Define the worker with the mock at the top of your app.
+
+```rescript
+/* Mock.res */
+let worker = Msw.setupWorker([]->Array.concat(Mock_Page_X.mocks))
+```

package/src/ui/Toolkit__Ui.res

@@ -25,6 +25,7 @@ module Reference = Toolkit__Ui_Reference
 module RichText = Toolkit__Ui_RichText
 module ProgressBar = Toolkit__Ui_ProgressBar
 module Dropdown = Toolkit__Ui_Dropdown
+module DropdownList = Toolkit__Ui_DropdownList
 module Layout = Toolkit__Ui_Layout
 module SpinnerFullScreen = Toolkit__Ui_SpinnerFullScreen
 module MultiSelect = Toolkit__Ui_MultiSelect

package/src/ui/Toolkit__Ui_DropdownList.res

@@ -0,0 +1,166 @@
+type position = [
+  | #bottom
+  | #top
+]
+
+type item = {
+  icon: React.element,
+  label: React.element,
+  onClick: unit => unit,
+  className: string,
+}
+
+@react.component
+let make = (
+  ~label: React.element,
+  ~dropdownClassName="",
+  ~buttonClassName="",
+  ~containerClassName="",
+  ~defaultIsOpen=false,
+  ~buttonColor: Toolkit__Ui_Button.color=#white,
+  ~buttonSize: Toolkit__Ui_Button.size=#md,
+  ~buttonVariant: Toolkit__Ui_Button.variant=#default,
+  ~position=#bottom,
+  ~items: array<item>,
+) => {
+  let dropdownRef = React.useRef(Js.Nullable.null)
+  let buttonRef = React.useRef(Js.Nullable.null)
+  let (position, _setPosition) = React.useState(() => position)
+  let {isOpen, hide, toggle} = Toolkit__Hooks.useDisclosure(~defaultIsOpen, ())
+  let {isXs} = Toolkit__Hooks.useMediaQuery()
+
+  Toolkit__Hooks.useOnClickOutside(dropdownRef, _ => {
+    hide()
+  })
+  let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
+
+  React.useEffect1(() => {
+    if isOpen && !isXs {
+      Js.Global.setTimeout(() => {
+        buttonRef.current
+        ->Js.Nullable.toOption
+        ->Option.forEach(dom => {
+          let buttonRect = dom->Browser.DomElement.getBoundingClientRect
+          let dropdownRect =
+            dropdownRef.current
+            ->Js.Nullable.toOption
+            ->Option.map(Browser.DomElement.getBoundingClientRect)
+
+          let calculatedTop = switch position {
+          | #bottom => buttonRect.top +. buttonRect.height +. 10.
+          | #top => {
+              let base = buttonRect.top -. 10.
+              switch dropdownRect {
+              | None => base
+              | Some({height}) => {
+                  let newBase = base -. height /. 2.
+                  newBase < 0. ? buttonRect.top +. buttonRect.height +. 10. : newBase
+                }
+              }
+            }
+          }
+
+          let calculatedLeft = {
+            let baseContainerCenter = buttonRect.left +. buttonRect.width /. 2.
+
+            switch dropdownRect {
+            | None => baseContainerCenter
+            | Some({width}) => {
+                let baseCalculated = baseContainerCenter -. width /. 2.
+                let hasOverflowLeft = baseCalculated < 0.
+                let hasOverflowRight =
+                  baseContainerCenter +. width /. 2. > Browser.innerWidth->Int.toFloat
+
+                if hasOverflowLeft {
+                  0.
+                } else if hasOverflowRight {
+                  let tmp = baseContainerCenter +. width /. 2.
+
+                  baseCalculated -. (tmp -. Browser.innerWidth->Int.toFloat)
+                } else {
+                  baseCalculated
+                }
+              }
+            }
+          }
+
+          setAdjustmentStyle(_ => Some(
+            ReactDOM.Style.make(
+              ~top=`${calculatedTop->Js.Float.toString}px`,
+              ~left=`${calculatedLeft->Js.Float.toString}px`,
+              ~opacity="1",
+              (),
+            ),
+          ))
+        })
+      }, 16)->ignore
+    } else {
+      setAdjustmentStyle(_ => None)
+    }
+    None
+  }, [isOpen, isXs])
+
+  <div className={cx(["relative", containerClassName])}>
+    <Toolkit__Ui_Button
+      variant=buttonVariant
+      buttonRef={ReactDOM.Ref.domRef(buttonRef)}
+      size=buttonSize
+      type_="button"
+      color=buttonColor
+      onClick={event => {
+        switch dropdownRef.current->Js.Nullable.toOption {
+        | None => toggle()
+        | Some(domRef) => {
+            let isInDropdown = ReactEvent.Mouse.currentTarget(event)["contains"](. domRef)
+            if !isInDropdown {
+              toggle()
+            }
+          }
+        }
+      }}
+      className={cx([buttonClassName, "dropdown-button"])}>
+      label
+      {isOpen
+        ? <ReachUi.Portal>
+            <div
+              ref={ReactDOM.Ref.domRef(dropdownRef)}
+              className={cx([
+                "dropdown",
+                "top-0 left-0 p-2 transform transition-opacity duration-150 ease-in-out shadow rounded text-base font-normal text-neutral-700",
+                isXs ? "fixed !w-full !h-full z-40" : "absolute z-20 bg-white w-60 opacity-0",
+                dropdownClassName,
+              ])}
+              style={adjustmentStyle->Option.getWithDefault(ReactDOM.Style.make())}>
+              {isXs
+                ? <div
+                    className="bg-neutral-500 absolute left-0 top-0 w-full h-full opacity-50 z-30"
+                  />
+                : React.null}
+              <div className={cx([isXs ? "z-40 absolute left-0 bottom-0  w-full" : ""])}>
+                <div
+                  className={cx([
+                    "flex flex-col",
+                    isXs ? "bg-white p-2 mx-2 shadow rounded-t-lg" : "",
+                  ])}>
+                  {items
+                  ->Array.mapWithIndex((i, {icon, label, onClick, className}) => {
+                    <div
+                      onClick={_ => onClick()}
+                      className={cx([
+                        "flex flex-row gap-4 items-center py-2 hover:bg-neutral-100 focus:bg-neutral-100 cursor-pointer",
+                        i == 0 ? "" : "border-t",
+                        className,
+                      ])}
+                      key={i->Int.toString}>
+                      {icon} {label}
+                    </div>
+                  })
+                  ->React.array}
+                </div>
+              </div>
+            </div>
+          </ReachUi.Portal>
+        : React.null}
+    </Toolkit__Ui_Button>
+  </div>
+}

package/src/ui/Toolkit__Ui_DropdownList.resi

@@ -0,0 +1,25 @@
+type position = [
+  | #bottom
+  | #top
+]
+
+type item = {
+  icon: React.element,
+  label: React.element,
+  onClick: unit => unit,
+  className: string,
+}
+
+@react.component
+let make: (
+  ~label: React.element,
+  ~dropdownClassName: string=?,
+  ~buttonClassName: string=?,
+  ~containerClassName: string=?,
+  ~defaultIsOpen: bool=?,
+  ~buttonColor: Toolkit__Ui_Button.color=?,
+  ~buttonSize: Toolkit__Ui_Button.size=?,
+  ~buttonVariant: Toolkit__Ui_Button.variant=?,
+  ~position: position=?,
+  ~items: array<item>,
+) => React.element

package/src/vendors/Browser.res

@@ -3,6 +3,8 @@ module LocalStorage = {
   external getItem: string => Js.Nullable.t<string> = "localStorage.getItem"
   @val
   external setItem: (string, Js.Nullable.t<string>) => unit = "localStorage.setItem"
+  @val
+  external removeItem: string => unit = "localStorage.removeItem"
 }
 
 module Location = {

package/src/vendors/Browser.resi

@@ -1,6 +1,7 @@
 module LocalStorage: {
   let getItem: string => Js.Nullable.t<string>
   let setItem: (string, Js.Nullable.t<string>) => unit
+  let removeItem: string => unit
 }
 
 module Location: {

package/src/vendors/Msw.res

@@ -0,0 +1,32 @@
+type mock
+type worker
+
+@module("msw") @variadic
+external setupWorker: array<mock> => worker = "setupWorker"
+
+@send
+external start: worker => unit = "start"
+@send
+external stop: worker => unit = "stop"
+
+module Ctx = {
+  type t
+
+  @send
+  external json: (t, 'a) => 'b = "json"
+  @send
+  external status: (t, 'a) => 'b = "status"
+}
+
+module Rest = {
+  type req<'params> = {params: 'params}
+
+  @module("msw") @scope("rest")
+  external get: (string, (req<'params>, @uncurry ('z => 't), Ctx.t) => 'a) => mock = "get"
+  @module("msw") @scope("rest")
+  external put: (string, (req<'params>, @uncurry ('z => 't), Ctx.t) => 'a) => mock = "put"
+  @module("msw") @scope("rest")
+  external post: (string, (req<'params>, @uncurry ('z => 't), Ctx.t) => 'a) => mock = "post"
+  @module("msw") @scope("rest")
+  external delete: (string, (req<'params>, @uncurry ('z => 't), Ctx.t) => 'a) => mock = "delete"
+}