@colisweb/rescript-toolkit 2.25.0 → 2.26.1

package/package.json

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

package/src/mock/MockOverlay.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 default = make

package/src/mock/MockOverlay.resi

@@ -0,0 +1,4 @@
+// @react.component
+// let make: (~worker: Msw.worker, ~children: React.element) => React.element
+
+let default: {"children": React.element, "worker": Msw.worker} => React.element

package/src/mock/index.md

@@ -0,0 +1,94 @@
+# Mock
+
+We use [msw](https://mswjs.io) for mocking API content.
+
+## Usage
+
+Install the package
+
+```
+yarn add msw --dev
+```
+
+### Wrap the App for dev only
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+import "@colisweb/rescript-toolkit/src/ui/styles.css";
+import { make as App } from "../lib/es6_global/src/App.bs";
+import { make as Spinner } from "@colisweb/rescript-toolkit/lib/es6_global/src/ui/Toolkit__Ui_SpinnerFullScreen.bs.js";
+import { make as AppWithMock } from "@colisweb/rescript-toolkit/lib/es6_global/src/mock/AppWithMock.bs";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+if (import.meta.env.DEV) {
+  import("../lib/es6_global/mocks/Mock.bs").then(({ worker }) => {
+    root.render(
+      <AppWithMock worker={worker}>
+        <App />
+      </AppWithMock>
+    );
+  });
+} else {
+  root.render(
+    <React.Suspense fallback={<Spinner />}>
+      <App />
+    </React.Suspense>
+  );
+}
+```
+
+### 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_DropdownList.res

@@ -7,6 +7,7 @@ type item = {
   icon: React.element,
   label: React.element,
   onClick: unit => unit,
+  className: string,
 }
 
 @react.component
@@ -142,12 +143,13 @@ let make = (
                     isXs ? "bg-white p-2 mx-2 shadow rounded-t-lg" : "",
                   ])}>
                   {items
-                  ->Array.mapWithIndex((i, {icon, label, onClick}) => {
+                  ->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}

package/src/ui/Toolkit__Ui_DropdownList.resi

@@ -7,6 +7,7 @@ type item = {
   icon: React.element,
   label: React.element,
   onClick: unit => unit,
+  className: string,
 }
 
 @react.component

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"
+}