@colisweb/rescript-toolkit 2.68.1 → 2.69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.68.1",
+  "version": "2.69.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -81,7 +81,8 @@
     "rescript-react-update": "5.0.0",
     "sanitize-html": "1.27.4",
     "swr": "2.0.0",
-    "tailwindcss": "3.2.4"
+    "tailwindcss": "3.2.4",
+    "use-local-storage-state": "^18.1.2"
   },
   "devDependencies": {
     "@babel/core": "7.20.5",

package/src/hooks/Toolkit__Hooks.res

@@ -286,3 +286,11 @@ let useQueryParams = (~decoder, ~defaultParams) => {
     [queryString],
   )
 }
+
+type localstorageStateOptions<'state> = {defaultValue?: 'state, storageSync?: bool}
+
+@module("use-local-storage-state")
+external useLocalStorageState: (
+  string,
+  localstorageStateOptions<'state>,
+) => ('state, ('state => 'state) => unit) = "default"

package/src/mock/MockOverlay.res

@@ -2,18 +2,22 @@ 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)
+  let (mockEnabled, setMock) = Toolkit__Hooks.useLocalStorageState(
+    localStorageKey,
+    {
+      defaultValue: false,
+    },
   )
+  let (workerStarted, setWorkerStarted) = React.useState(() => false)
 
   React.useLayoutEffect1(() => {
     if mockEnabled {
       worker->Msw.start
+      setWorkerStarted(_ => true)
       Browser.LocalStorage.setItem(localStorageKey, Js.Nullable.return("true"))
     } else {
       worker->Msw.stop
+      setWorkerStarted(_ => false)
       Browser.LocalStorage.removeItem(localStorageKey)
     }
 
@@ -36,7 +40,11 @@ let make = (~worker: Msw.worker, ~children) => {
         }}
       />
     </label>
-    {children}
+    {switch (mockEnabled, workerStarted) {
+    | (false, _) => children
+    | (true, false) => React.null
+    | (true, true) => children
+    }}
   </React.Suspense>
 }
 

package/src/ui/Toolkit__Ui_Table.res

@@ -50,7 +50,7 @@ module Core = {
     <div className={cx([className, "flex flex-auto w-full overflow-x-auto relative"])}>
       <Toolkit__Ui_Spread props={table.getTableProps()}>
         <table className="border-b border-gray-300 w-full h-full">
-          <thead className="block h-20">
+          <thead className="block xl:h-20">
             <tr className="flex">
               {table.headers
               ->Array.mapWithIndex((index, column) => {
@@ -58,7 +58,7 @@ module Core = {
                   ? <Toolkit__Ui_Spread
                       key={"thead-th" ++ index->Int.toString} props={column.getHeaderProps()}>
                       <td
-                        className="px-2 pt-2 border-b border-r border-gray-300 h-20"
+                        className="px-2 pt-2 border-b border-r border-gray-300 xl:h-20"
                         key={"thead-thd" ++ index->Int.toString}>
                         <Toolkit__Ui_Spread props={column.getSortByToggleProps()}>
                           <div

package/src/vendors/Zendesk.res

@@ -0,0 +1,19 @@
+@val
+external cmd2: (string, string) => unit = "window.zE"
+@val
+external cmd3: (string, string, 'a) => unit = "window.zE"
+
+type onLoadCallback = unit => unit
+type key = string
+
+let load: (key, onLoadCallback) => unit = %raw(`
+  function (key, cb) {
+    var d = document;
+    var s = d.createElement('script');
+    s.id = 'ze-snippet';
+    s.src = 'https://static.zdassets.com/ekr/snippet.js?key='+ key;
+    s.async = 1;
+    s.addEventListener("load", cb);
+    d.getElementsByTagName('head')[0].appendChild(s);
+  }
+`)