@colisweb/rescript-toolkit 2.25.1 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.25.1",
+  "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/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"
+}