@colisweb/rescript-toolkit 1.26.1 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "1.26.1",
+  "version": "1.28.0",
   "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.res

@@ -28,3 +28,4 @@ module Layout = Toolkit__Ui_Layout
 module SpinnerFullScreen = Toolkit__Ui_SpinnerFullScreen
 module MultiSelect = Toolkit__Ui_MultiSelect
 module Notice = Toolkit__Ui_Notice
+module NativeDatePicker = Toolkit__Ui_NativeDatePicker

package/src/ui/Toolkit__Ui_Checkbox.res

@@ -51,7 +51,7 @@ let make = (
     />
     <span
       className={cx([
-        "checkmark rounded border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center",
+        "checkmark rounded border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
         switch size {
         | #xs => "w-4 h-4"
         | #sm => "w-6 h-6"

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_MultiSelect.res

@@ -41,13 +41,20 @@ let make = (
     position=#bottom
     label={switch selectedOptions {
     | [] =>
-      <span className="flex flex-row gap-2 items-end">
-        placeholder <BsReactIcons.FaAngleDown />
-      </span>
+      <p className="flex flex-row gap-2 w-full items-center">
+        <span className="ml-1"> {placeholder} </span>
+        <span className="absolute inset-y-0 right-0 flex items-center px-2">
+          <BsReactIcons.FaAngleDown />
+        </span>
+      </p>
     | options =>
-      <span className="truncate">
-        {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->React.string}
-      </span>
+      <div
+        className="table table-fixed w-full"
+        title={options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")}>
+        <span className="table-cell truncate text-left">
+          {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->React.string}
+        </span>
+      </div>
     }}>
     <div className="py-2 pl-2 pr-1">
       {allowFilter

package/src/ui/Toolkit__Ui_NativeDatePicker.res

@@ -0,0 +1,23 @@
+@react.component
+let make = (~onChange, ~value=?, ~id=?, ~disabled=false, ~isInvalid=false, ~className="") =>
+  <div className="relative">
+    <input
+      ?id
+      value=?{value->Option.map(d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"))}
+      disabled
+      ariaDisabled={disabled}
+      onChange={event => {
+        let value = ReactEvent.Form.target(event)["value"]
+        onChange(Some(Js.Date.fromString(value))->Option.keep(BsDateFns.isValid))
+      }}
+      className={cx([
+        "h-[38px] border rounded transition-all duration-150 ease-in-out py-2 pl-4 pr-8 appearance-none w-full bg-white text-gray-800 leading-tight focus:outline-none focus:shadow-none focus:border-info-500 disabled:bg-gray-200 disabled:text-gray-700 focus:z30 relative border-gray-300",
+        switch isInvalid {
+        | true => "border-danger-500 shadow-danger-500"
+        | _ => "border-gray-300"
+        },
+        className,
+      ])}
+      type_="date"
+    />
+  </div>

package/src/ui/Toolkit__Ui_NativeDatePicker.resi

@@ -0,0 +1,9 @@
+@react.component
+let make: (
+  ~onChange: option<Js.Date.t> => unit,
+  ~value: Js.Date.t=?,
+  ~id: string=?,
+  ~disabled: bool=?,
+  ~isInvalid: bool=?,
+  ~className: string=?,
+) => React.element

package/src/ui/Toolkit__Ui_Select.res

@@ -32,7 +32,7 @@ let make = (
         onChange(value)
       }}>
       {placeholder->Option.mapWithDefault(React.null, placeholder =>
-        <option> {placeholder->React.string} </option>
+        <option value=""> {placeholder->React.string} </option>
       )}
       {options
       ->Array.mapWithIndex((i, (label, value, enabled)) =>
@@ -44,6 +44,6 @@ let make = (
     </select>
     <div
       className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-800">
-      <BsReactIcons.MdArrowDropDown className="w-6 h-6 z-30" />
+      <BsReactIcons.FaAngleDown />
     </div>
   </div>

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,95 @@ let show = (~title, ~description=?, ~closable=true, ~variant, ~timeout=5000, ())
       timeout: timeout,
     }),
   )
-let hide = () => store.dispatch(Hide)
+  id
+}
 
-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,
@@ -7,8 +8,8 @@ let show: (
   ~variant: variant,
   ~timeout: int=?, // default: 5000
   unit,
-) => unit
-let hide: unit => unit
+) => id
+let hide: id => unit
 
 module Provider: {
   @react.component

package/src/vendors/BsDateFns.res

@@ -88,6 +88,9 @@ external endOfMonth: Js.Date.t => Js.Date.t = "endOfMonth"
 
 // booleans
 
+@module("date-fns")
+external isValid: Js.Date.t => bool = "isValid"
+
 @module("date-fns")
 external isEqual: (Js.Date.t, Js.Date.t) => bool = "isEqual"
 

package/src/vendors/BsReactIcons.res

@@ -5887,3 +5887,9 @@ module GoPrimitiveDot = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "GoPrimitiveDot"
 }
+
+module FaFilter = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaFilter"
+}

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