@colisweb/rescript-toolkit 1.26.2 → 1.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "1.26.2",
+  "version": "1.28.1",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",
@@ -23,7 +23,6 @@
   "license": "MIT",
   "dependencies": {
     "@colisweb/react-day-picker": "7.4.16",
-    "@openapi-contrib/openapi-schema-to-json-schema": "3.0.4",
     "@reach/accordion": "0.16.1",
     "@reach/alert-dialog": "0.16.0",
     "@reach/auto-id": "0.16.0",
@@ -38,15 +37,15 @@
     "@reach/tooltip": "0.16.0",
     "@reach/visually-hidden": "0.16.0",
     "@rescript/react": "0.10.3",
-    "autoprefixer": "10.3.4",
-    "axios": "0.21.4",
+    "autoprefixer": "10.3.6",
+    "axios": "0.22.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",
-    "date-fns": "2.23.0",
+    "date-fns": "2.24.0",
     "decco": "1.5.0",
     "dedent": "0.7.0",
     "downshift": "5.2.5",
@@ -58,7 +57,7 @@
     "postcss-preset-env": "6.7.0",
     "prismjs": "1.23.0",
     "react-datepicker": "3.8.0",
-    "react-icons": "4.2.0",
+    "react-icons": "4.3.1",
     "react-select": "4.3.1",
     "react-table": "7.7.0",
     "react-use": "17.3.1",
@@ -71,8 +70,8 @@
     "rescript-react-update": "4.0.0",
     "restorative": "0.4.0-beta.1",
     "string.prototype.matchall": "4.0.5",
-    "swr": "0.4.2",
-    "tailwindcss": "2.2.11"
+    "swr": "1.0.1",
+    "tailwindcss": "2.2.16"
   },
   "devDependencies": {
     "@babel/core": "7.15.5",
@@ -88,6 +87,6 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-is": "17.0.2",
-    "sass": "1.39.0"
+    "sass": "1.42.1"
   }
 }

package/src/fetcher/Toolkit__Fetcher.res

@@ -4,16 +4,13 @@ module type Config = {
 }
 
 module Make = (Config: Config) => {
-  let updateData = (key: Config.Request.argument, ~shouldRevalidate=false, ~data): unit =>
-    Toolkit__Hooks.updateFetcherData(Config.key(key), data, shouldRevalidate)
-
   let trigger = (key: Config.Request.argument): unit =>
     Toolkit__Hooks.triggerFetcher(Config.key(key))
 
   let key: Config.Request.argument => array<string> = Config.key
 
   let use = (
-    ~options: option<Toolkit__Hooks.fetcherOptions>=?,
+    ~options: option<Swr.fetcherOptions>=?,
     key: option<Config.Request.argument>,
   ): Toolkit__Hooks.fetcher<Config.Request.response> =>
     Toolkit__Hooks.useFetcher(~options?, key->Option.map(Config.key), () => {
@@ -23,7 +20,7 @@ module Make = (Config: Config) => {
     })
 
   let useOptional = (
-    ~options: option<Toolkit__Hooks.fetcherOptions>=?,
+    ~options: option<Swr.fetcherOptions>=?,
     key: option<Config.Request.argument>,
   ): Toolkit__Hooks.fetcher<option<Config.Request.response>> =>
     Toolkit__Hooks.useOptionalFetcher(~options?, key->Option.map(Config.key), () => {

package/src/hooks/Toolkit__Hooks.res

@@ -57,18 +57,12 @@ let useInitialPreviousDistinct = (~compare=(a, b) => a === b, value) => {
 // useFetcher
 // ----------------------
 
-type fetcherOptions = BsSwr.fetcherOptions
-
-let fetcherOptions = BsSwr.fetcherOptions
-
 type fetcher<'data> = ('data, bool, unit => Promise.t<result<bool, Js.Promise.error>>)
 
-let updateFetcherData = BsSwr.mutate
-
-let triggerFetcher = BsSwr.trigger
+let triggerFetcher = Swr.trigger
 
-let useFetcher = (~options: option<fetcherOptions>=?, key: 'key, fn: 'fn): fetcher<'data> => {
-  let fetcher = BsSwr.useSwr(
+let useFetcher = (~options: option<Swr.fetcherOptions>=?, key: 'key, fn: 'fn): fetcher<'data> => {
+  let {data, isValidating, mutate} = Swr.useSwr(
     key,
     fn,
     Js.Obj.assign(
@@ -80,18 +74,13 @@ let useFetcher = (~options: option<fetcherOptions>=?, key: 'key, fn: 'fn): fetch
     ),
   )
 
-  (
-    fetcher.data->Obj.magic,
-    fetcher.isValidating,
-    () =>
-      fetcher.revalidate(BsSwr.revalidateOptions())->Promise.Js.fromBsPromise->Promise.Js.toResult,
-  )
+  (data->Obj.magic, isValidating, () => Promise.Js.fromBsPromise(mutate(.))->Promise.Js.toResult)
 }
 
-let useOptionalFetcher = (~options: option<fetcherOptions>=?, key: 'key, fn: 'fn): fetcher<
+let useOptionalFetcher = (~options: option<Swr.fetcherOptions>=?, key: 'key, fn: 'fn): fetcher<
   'data,
 > => {
-  let fetcher = BsSwr.useSwrOptional(
+  let {data, isValidating, mutate} = Swr.useSwrOptional(
     key,
     fn,
     Js.Obj.assign(
@@ -103,12 +92,7 @@ let useOptionalFetcher = (~options: option<fetcherOptions>=?, key: 'key, fn: 'fn
     ),
   )
 
-  (
-    fetcher.data->Obj.magic,
-    fetcher.isValidating,
-    () =>
-      fetcher.revalidate(BsSwr.revalidateOptions())->Promise.Js.fromBsPromise->Promise.Js.toResult,
-  )
+  (data->Obj.magic, isValidating, () => mutate(.)->Promise.Js.fromBsPromise->Promise.Js.toResult)
 }
 
 // ----------------------
@@ -148,7 +132,7 @@ let useClipboard = (~onCopyNotificationMessage: option<string>=?, value: string)
   let (hasCopied, setHasCopied) = React.useState(() => false)
   let onCopy = React.useCallback1(() => {
     onCopyNotificationMessage->Option.forEach(message =>
-      Toolkit__Ui_Snackbar.show(~title=message, ~variant=#success, ())
+      Toolkit__Ui_Snackbar.show(~title=message, ~variant=#success, ())->ignore
     )
 
     let didCopy = BsCopyToClipboard.copy(value)

package/src/ui/Toolkit__Ui_Dropdown.res

@@ -11,6 +11,7 @@ let make = (
   ~children,
   ~dropdownClassName="",
   ~buttonClassName="",
+  ~containerClassName="",
   ~defaultIsOpen=false,
   ~buttonColor: Toolkit__Ui_Button.color=#white,
   ~buttonSize: Toolkit__Ui_Button.size=#md,
@@ -53,7 +54,7 @@ let make = (
     None
   }, (isOpen, ref))
 
-  <div className="relative">
+  <div className={cx(["relative", containerClassName])}>
     <Toolkit__Ui_Button
       variant=buttonVariant
       size=buttonSize

package/src/ui/Toolkit__Ui_Dropdown.resi

@@ -11,6 +11,7 @@ let make: (
   ~children: React.element,
   ~dropdownClassName: string=?,
   ~buttonClassName: string=?,
+  ~containerClassName: string=?,
   ~defaultIsOpen: bool=?,
   ~buttonColor: Toolkit__Ui_Button.color=?,
   ~buttonSize: Toolkit__Ui_Button.size=?,

package/src/ui/Toolkit__Ui_Snackbar.res

@@ -1,30 +1,43 @@
-type rec state = {
-  isVisible: bool,
-  options: option<options>,
-}
+type rec state = {list: array<options>}
 and options = {
+  id: id,
+  isVisible: bool,
   title: string,
   description: option<React.element>,
   closable: bool,
   variant: variant,
   timeout: int,
 }
+and id
 and variant = [#success | #warning | #danger]
 
 type action =
   | Show(options)
-  | Hide
+  | Hide(id)
+  | Remove(id)
 
-let store = Restorative.createStore({isVisible: false, options: None}, (state, action) =>
+let store = Restorative.createStore({list: []}, (state, action) =>
   switch action {
-  | Show(options) => {isVisible: true, options: Some(options)}
-  | Hide => {...state, isVisible: false}
+  | Show(options) => {list: state.list->Array.concat([options])}
+  | Hide(id) => {
+      list: state.list->Array.map(e =>
+        if e.id === id {
+          {...e, isVisible: false}
+        } else {
+          e
+        }
+      ),
+    }
+  | Remove(id) => {list: state.list->Array.keep(e => e.id !== id)}
   }
 )
 
-let show = (~title, ~description=?, ~closable=true, ~variant, ~timeout=5000, ()) =>
+let show = (~title, ~description=?, ~closable=true, ~variant, ~timeout=5000, ()) => {
+  let id: id = Js.Math.random()->Js.Float.toString->Obj.magic
   store.dispatch(
     Show({
+      id: id,
+      isVisible: true,
       title: title,
       description: description,
       closable: closable,
@@ -32,76 +45,94 @@ let show = (~title, ~description=?, ~closable=true, ~variant, ~timeout=5000, ())
       timeout: timeout,
     }),
   )
-let hide = () => store.dispatch(Hide)
+}
 
-module Provider = {
+let remove = id => store.dispatch(Remove(id))
+let hide = id => {
+  store.dispatch(Hide(id))
+  Js.Global.setTimeout(() => {
+    remove(id)
+  }, 160)->ignore
+}
+
+module Item = {
   @react.component
-  let make = () => {
-    let {isVisible, options} = store.useStore()
-    let timeoutRef = React.useRef(None)
+  let make = (~options) => {
+    let {id, isVisible, variant, title, description, closable, timeout} = options
 
-    React.useEffect1(() => {
-      if isVisible {
-        timeoutRef.current->Option.map(timeoutRef => timeoutRef->Js.Global.clearTimeout)->ignore
+    let (mounted, setMounted) = React.useState(() => false)
 
-        let id = Js.Global.setTimeout(
-          () => hide(),
-          options->Option.mapWithDefault(5000, option => option.timeout),
-        )
+    React.useEffect0(() => {
+      setMounted(_ => true)
+      let timeoutId = Js.Global.setTimeout(() => {
+        hide(id)
+      }, timeout)
+      Some(() => Js.Global.clearTimeout(timeoutId))
+    })
 
-        timeoutRef.current = Some(id)
-      }
-      None
-    }, [isVisible])
+    <div
+      className={cx([
+        "bg-white p-3 rounded shadow transition duration-500 ease-in-out mt-3 transform",
+        {
+          open Css
+          style(list{bottom(40->px)})
+        },
+        mounted ? "-translate-y-14 opacity-1" : "opacity-0",
+        isVisible ? "opacity-100 z-50" : "opacity-0  translate-x-[200px]",
+        {
+          switch variant {
+          | #success => "bg-success-500 text-white"
+          | #warning => "bg-warning-500 text-white"
+          | #danger => "bg-danger-500 text-white"
+          }
+        },
+      ])}>
+      <div className="flex flex-gap-3">
+        <div>
+          {switch variant {
+          | #success => <BsReactIcons.MdCheckCircle size=28 />
+          | #warning => <BsReactIcons.MdWarning size=28 />
+          | #danger => <BsReactIcons.MdError size=28 />
+          }}
+        </div>
+        <div>
+          <strong> {title->React.string} </strong>
+          {description->Option.mapWithDefault(React.null, description =>
+            <p
+              className={cx([
+                "text-sm",
+                {
+                  open Css
+                  style(list{maxWidth(250->px)})
+                },
+              ])}>
+              description
+            </p>
+          )}
+        </div>
+        {closable
+          ? <button className="self-start" onClick={_ => hide(id)}>
+              <BsReactIcons.MdClose />
+            </button>
+          : React.null}
+      </div>
+    </div>
+  }
+}
+
+module Provider = {
+  @react.component
+  let make = () => {
+    let {list} = store.useStore()
 
     <ReachUi.Portal>
       <div
-        className={cx([
-          "absolute bg-white p-3 rounded shadow transition duration-500 ease-in-out right-0 mr-6 transform",
-          {
-            open Css
-            style(list{bottom(40->px)})
-          },
-          isVisible ? "opacity-100 translate-y-0 z-50" : "opacity-0 translate-y-10",
-          options->Option.mapWithDefault("", options =>
-            switch options.variant {
-            | #success => "bg-success-500 text-white"
-            | #warning => "bg-warning-500 text-white"
-            | #danger => "bg-danger-500 text-white"
-            }
-          ),
-        ])}>
-        {options->Option.mapWithDefault(React.null, options =>
-          <div className="flex flex-gap-3">
-            <div>
-              {switch options.variant {
-              | #success => <BsReactIcons.MdCheckCircle size=28 />
-              | #warning => <BsReactIcons.MdWarning size=28 />
-              | #danger => <BsReactIcons.MdError size=28 />
-              }}
-            </div>
-            <div>
-              <strong> {options.title->React.string} </strong>
-              {options.description->Option.mapWithDefault(React.null, description =>
-                <p
-                  className={cx([
-                    "text-sm",
-                    {
-                      open Css
-                      style(list{maxWidth(250->px)})
-                    },
-                  ])}>
-                  description
-                </p>
-              )}
-            </div>
-            {options.closable
-              ? <button className="self-start" onClick={_ => hide()}>
-                  <BsReactIcons.MdClose />
-                </button>
-              : React.null}
-          </div>
-        )}
+        className="fixed right-0 top-0 transform translate-y-14 h-full p-4 flex flex-col items-end justify-end">
+        {list
+        ->Array.map(e => {
+          <Item key={e.id->Obj.magic} options=e />
+        })
+        ->React.array}
       </div>
     </ReachUi.Portal>
   }

package/src/ui/Toolkit__Ui_Snackbar.resi

@@ -1,4 +1,5 @@
 type variant = [#success | #warning | #danger]
+type id
 
 let show: (
   ~title: string,
@@ -8,7 +9,6 @@ let show: (
   ~timeout: int=?, // default: 5000
   unit,
 ) => unit
-let hide: unit => unit
 
 module Provider: {
   @react.component

package/src/vendors/{BsSwr.res → Swr.res}

@@ -1,7 +1,7 @@
 type revalidateOptions
 
 @obj
-external revalidateOptions: (
+external makeRevalidateOptions: (
   ~retryCount: option<int>=?,
   ~dedupe: option<bool>=?,
   unit,
@@ -10,10 +10,10 @@ external revalidateOptions: (
 type fetcherOptions
 
 @obj
-external fetcherOptions: (
+external makeFetcherOptions: (
   ~suspense: bool=?,
   ~fetcher: 'fetcher=?,
-  ~initialData: 'data=?,
+  ~fallbackData: 'data=?,
   ~revalidateOnFocus: bool=?,
   ~revalidateOnMount: bool=?,
   ~revalidateOnReconnect: bool=?,
@@ -43,7 +43,7 @@ type fetcher<'data> = {
   data: option<'data>,
   error: option<Js.Exn.t>,
   isValidating: bool,
-  revalidate: revalidateOptions => Js.Promise.t<bool>,
+  mutate: (. unit) => Js.Promise.t<bool>,
 }
 
 @module("swr")
@@ -54,11 +54,20 @@ external useSwrOptional: ('key, 'fn, 'fetcherOptions) => fetcher<option<'data>>
 
 @module("swr") external trigger: 'key => unit = "trigger"
 
-@module("swr") external mutate: ('key, 'data, bool) => unit = "mutate"
-
-@module("swr") external mutate0: 'key => unit = "mutate"
-
 type cache
 @module("swr") external cache: cache = "cache"
 @send external clear: cache => unit = "clear"
 @send external delete: (cache, 'key) => unit = "delete"
+
+module SwrConfig = {
+  type t
+
+  @send
+  external mutate0: (t, 'key) => unit = "mutate"
+
+  @send
+  external mutate: (t, 'key, 'data, bool) => unit = "mutate"
+}
+
+@module("swr")
+external useSWRConfig: unit => SwrConfig.t = "useSWRConfig"

package/src/vendors/Msw.res

@@ -1,96 +0,0 @@
-type mockedResponse
-external mockedResponse: 'a => Js.Null.t<mockedResponse> = "%identity"
-
-@get external body: mockedResponse => string = "body"
-
-type responseTransformer = mockedResponse => mockedResponse
-
-type headers
-@send external setHeader: (headers, string, 'value) => unit = "set"
-@send external getHeader: (headers, string) => 'value = "get"
-
-type params
-
-type request = {
-  url: string,
-  method: string,
-  headers: headers,
-  params: params,
-}
-
-type context
-
-type response
-
-@send
-external response: (
-  response,
-  Js.null<'a>,
-  array<responseTransformer>,
-) => Js.Null.t<mockedResponse> = "apply"
-let response = (res, responseTransformers) => response(res, Js.null, responseTransformers)
-
-type responseResolver = (request, response, context) => Js.Promise.t<Js.Null.t<mockedResponse>>
-
-@send
-external status: (context, string) => responseTransformer = "status"
-
-@send external json: (context, 'data) => responseTransformer = "json"
-
-@send external text: (context, 'data) => responseTransformer = "text"
-
-@send external xml: (context, 'data) => responseTransformer = "xml"
-
-@send external delay: (context, int) => responseTransformer = "delay"
-
-type requestHandler
-
-type rest = {
-  get: (string, responseResolver) => requestHandler,
-  post: (string, responseResolver) => requestHandler,
-  put: (string, responseResolver) => requestHandler,
-  patch: (string, responseResolver) => requestHandler,
-  delete: (string, responseResolver) => requestHandler,
-  options: (string, responseResolver) => requestHandler,
-}
-
-@module("msw") external rest: rest = "rest"
-
-@module("msw")
-external restDict: Js.Dict.t<(string, responseResolver) => requestHandler> = "rest"
-
-type worker
-
-@module("msw") @variadic
-external setupWorker: array<requestHandler> => worker = "setupWorker"
-
-@send external start: worker => unit = "start"
-
-@send external stop: worker => unit = "stop"
-
-@send @variadic
-external use: (worker, array<requestHandler>) => unit = "use"
-
-@send external restoreHandlers: worker => unit = "restoreHandlers"
-
-@send @variadic
-external resetHandlers: (worker, array<requestHandler>) => unit = "resetHandlers"
-
-module Node = {
-  type server
-
-  @module("msw/node") @variadic
-  external setupServer: array<requestHandler> => server = "setupServer"
-
-  @send external listen: server => unit = "listen"
-
-  @send external close: server => unit = "close"
-
-  @send @variadic
-  external use: (server, array<requestHandler>) => unit = "use"
-
-  @send external restoreHandlers: server => unit = "restoreHandlers"
-
-  @send @variadic
-  external resetHandlers: (server, array<requestHandler>) => unit = "resetHandlers"
-}