@colisweb/rescript-toolkit 3.7.3 → 4.0.0

package/locale/fr.json

@@ -54,6 +54,11 @@
     "defaultMessage": "Le champ est requis.",
     "message": "Le champ est requis."
   },
+  {
+    "id": "_491a4e71",
+    "defaultMessage": "Tapez au moins {minSearchLength, plural, one {1 caractère} other {# caractères}}",
+    "message": "Tapez au moins {minSearchLength, plural, one {1 caractère} other {# caractères}}"
+  },
   {
     "id": "_49a79a00",
     "defaultMessage": "Samedi",
@@ -69,6 +74,16 @@
     "defaultMessage": "Non",
     "message": "Non"
   },
+  {
+    "id": "_6ef34790",
+    "defaultMessage": "Une erreur est survenue lors de la recherche",
+    "message": "Une erreur est survenue lors de la recherche"
+  },
+  {
+    "id": "_703b9075",
+    "defaultMessage": "Valeur non valide.",
+    "message": "Valeur non valide."
+  },
   {
     "id": "_7790a47d",
     "defaultMessage": "<lat></lat>, <lng></lng>",
@@ -149,6 +164,11 @@
     "defaultMessage": "Champs requis",
     "message": "Champs requis"
   },
+  {
+    "id": "_d5fb916f",
+    "defaultMessage": "Aucun résultat pour cette recherche",
+    "message": "Aucun résultat pour cette recherche"
+  },
   {
     "id": "_d7f4a16b",
     "defaultMessage": "Ce nom est deja utilisé dans un autre forfait",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "3.7.3",
+  "version": "4.0.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -31,20 +31,9 @@
     "@colisweb/react-day-picker": "7.4.16",
     "@colisweb/restorative": "1.0.0",
     "@datadog/browser-rum": "4.26.0",
-    "@headlessui/react": "^1.7.14",
-    "@reach/accordion": "0.18.0",
-    "@reach/alert-dialog": "0.18.0",
+    "@headlessui/react": "1.7.14",
+    "@headlessui/tailwindcss": "^0.1.3",
     "@reach/auto-id": "0.18.0",
-    "@reach/combobox": "0.18.0",
-    "@reach/dialog": "0.18.0",
-    "@reach/disclosure": "0.18.0",
-    "@reach/listbox": "0.18.0",
-    "@reach/menu-button": "0.18.0",
-    "@reach/popover": "0.18.0",
-    "@reach/portal": "0.18.0",
-    "@reach/tabs": "0.18.0",
-    "@reach/tooltip": "0.18.0",
-    "@reach/visually-hidden": "0.18.0",
     "@rescript/react": "0.11.0",
     "@tailwindcss/line-clamp": "0.4.2",
     "autoprefixer": "10.4.13",
@@ -70,7 +59,7 @@
     "react-helmet": "6.1.0",
     "react-icons": "4.7.1",
     "react-intl": "6.2.5",
-    "react-portal": "^4.2.2",
+    "react-portal": "4.2.2",
     "react-select": "5.7.0",
     "react-table": "7.8.0",
     "react-use": "17.4.0",
@@ -83,7 +72,7 @@
     "sanitize-html": "1.27.4",
     "swr": "2.0.0",
     "tailwindcss": "3.2.4",
-    "use-local-storage-state": "^18.1.2"
+    "use-local-storage-state": "18.1.2"
   },
   "devDependencies": {
     "@babel/core": "7.20.5",

package/src/form/Toolkit__Form.res

@@ -41,10 +41,11 @@ module Make = (StateLenses: Config) => {
       ~schema=Validation.Schema([]),
       ~onSubmit=?,
       ~onSubmitFail=ignore,
-      ~i18n=ReSchemaI18n.default,
       ~validationStrategy=OnDemand,
       (),
-    ): api =>
+    ): api => {
+      let intl = useIntl()
+    
       use(
         ~initialState,
         ~schema,
@@ -61,11 +62,12 @@ module Make = (StateLenses: Config) => {
           ->ignore
         },
         ~onSubmitFail,
-        ~i18n,
+        ~i18n=Toolkit__FormValidationFunctions.i18n(intl),
         ~validationStrategy,
         (),
       )
   }
+  }
 
   module CustomValidation = {
     let optionNonEmpty = (intl, lense) => Form.Validation.Custom(
@@ -97,9 +99,9 @@ module Make = (StateLenses: Config) => {
           form.submit()
         }}>
         children
-        <ReachUi.VisuallyHidden>
+        <Toolkit__Ui_VisuallyHidden>
           <input type_="submit" hidden=true />
-        </ReachUi.VisuallyHidden>
+        </Toolkit__Ui_VisuallyHidden>
       </form>
     }
   }
@@ -205,6 +207,7 @@ module Make = (StateLenses: Config) => {
                   switch type_ {
                   | "password" =>
                     <Toolkit__Ui_Tooltip
+                      tooltipClassName={"min-w-[200px] text-center"}
                       label={showPassword
                         ? <ReactIntl.FormattedMessage defaultMessage="Masquer le mot de passe" />
                         : <ReactIntl.FormattedMessage defaultMessage="Afficher le mot de passe" />}>

package/src/form/Toolkit__FormValidationFunctions.res

@@ -44,6 +44,7 @@ module Msg = {
     defaultMessage: "Cette valeur ne peut être supérieure à {value}.",
   }
   let optionNonEmpty = {defaultMessage: "Champ requis"}
+  let invalidValue = {defaultMessage: "Valeur non valide."}
 }
 
 let toReSchemaResult = (opt: option<string>): ReSchema.fieldState =>

package/src/hooks/Toolkit__Hooks.res

@@ -12,7 +12,18 @@ module SafeIncrement = {
 }
 
 let useIsFirstMount = ReactUse.useFirstMountState
-let useUpdateEffect = ReactUse.useUpdateEffect
+let useUpdateEffect = (fn, deps) => {
+  let isFirstMount = useIsFirstMount()
+
+  React.useEffect1(() =>
+    if !isFirstMount {
+      fn()
+    } else {
+      None
+    }
+  , deps)
+}
+
 let useIsMounted = ReactUse.useMountedState
 let useTimeoutFn = ReactUse.useTimeoutFn
 let useDebounce = ReactUse.useDebounce
@@ -26,7 +37,20 @@ let useUpdate = () => {
   React.useCallback1(() => setState(SafeIncrement.increment), [])
 }
 
-let useGetSet = ReactUse.useGetSet
+let useGetSet = initialStateGetter => {
+  let state = React.useRef(initialStateGetter())
+  let update = useUpdate()
+
+  React.useMemo1(() => (
+    // get
+    () => state.current,
+    // set
+    newStateGetter => {
+      state.current = newStateGetter(state.current)
+      update()
+    },
+  ), [])
+}
 let usePrevious = ReactUse.usePrevious
 let useInitialPrevious = value => {
   let previousRef = React.useRef(value)
@@ -294,3 +318,145 @@ external useLocalStorageState: (
   string,
   localstorageStateOptions<'state>,
 ) => ('state, ('state => 'state) => unit) = "default"
+
+// ----------------------
+// useIsMounted
+// ----------------------
+
+let useIsMounted = () => {
+  let mountedRef = React.useRef(false)
+  let get = React.useCallback0(() => mountedRef.current)
+
+  React.useEffect(() => {
+    mountedRef.current = true
+    Some(() => mountedRef.current = false)
+  })
+
+  get
+}
+
+external promiseErrorToJsObj: Js.Promise.error => Js.Exn.t = "%identity"
+
+let usePromise = (~debounce=true, fn, deps) => {
+  let lastCallId = React.useRef(0)
+  let canceled = React.useRef(false)
+  let (state, set) = React.useState(() => NotAsked)
+  let isMounted = useIsMounted()
+
+  let trigger = React.useCallback1(args => {
+    lastCallId.current = lastCallId.current->SafeIncrement.increment
+
+    let callId = lastCallId.current
+    set(_ => Loading)
+
+    canceled.current = false
+
+    fn(args)->Promise.map(result => {
+      let isCanceled = (debounce ? callId !== lastCallId.current : false) || canceled.current
+
+      if isMounted() && !isCanceled {
+        set(_ => Done(result))
+      }
+
+      (result, isCanceled)
+    })
+  }, deps)
+
+  let cancel = React.useCallback0(() => canceled.current = true)
+
+  (state, trigger, cancel)
+}
+
+// V2
+// This version is triggered by dependency tracking
+// (which is the way to go with Suspense)
+// instead of arguments
+
+let usePromiseV2 = (~debounce=true, fn, deps) => {
+  let lastCallId = React.useRef(0)
+  let canceled = React.useRef(false)
+  let (state, set) = React.useState(() => NotAsked)
+  let isMounted = useIsMounted()
+
+  let trigger = React.useCallback1(() => {
+    lastCallId.current = lastCallId.current->SafeIncrement.increment
+
+    fn()
+    ->Option.map(promise => {
+      let callId = lastCallId.current
+      set(_ => Loading)
+      canceled.current = false
+      promise->Promise.map(
+        result => {
+          let isCanceled = (debounce ? callId !== lastCallId.current : false) || canceled.current
+
+          if isMounted() && !isCanceled {
+            set(_ => Done(result))
+          }
+
+          (result, isCanceled)
+        },
+      )
+    })
+    ->ignore
+  }, deps)
+
+  let cancel = React.useCallback0(() => {
+    canceled.current = true
+    ()
+  })
+
+  React.useEffect1(() => {
+    trigger()
+    None
+  }, deps)
+
+  (state, cancel)
+}
+
+// V3
+// This version is triggered by dependency tracking
+// (which is the way to go with Suspense)
+// instead of arguments
+
+let usePromiseV3 = (~debounce=true, fn, deps) => {
+  let lastCallId = React.useRef(0)
+  let canceled = React.useRef(false)
+  let (state, set) = React.useState(() => NotAsked)
+  let isMounted = useIsMounted()
+
+  let trigger = React.useCallback1(() => {
+    lastCallId.current = lastCallId.current->SafeIncrement.increment
+
+    fn()
+    ->Option.map(promise => {
+      let callId = lastCallId.current
+      set(_ => Loading)
+      canceled.current = false
+      promise->Promise.map(
+        result => {
+          let isCanceled = (debounce ? callId !== lastCallId.current : false) || canceled.current
+
+          if isMounted() && !isCanceled {
+            set(_ => Done(result))
+          }
+
+          (result, isCanceled)
+        },
+      )
+    })
+    ->ignore
+  }, deps)
+
+  let cancel = React.useCallback0(() => {
+    canceled.current = true
+    ()
+  })
+
+  React.useEffect1(() => {
+    trigger()
+    None
+  }, deps)
+
+  (state, cancel)
+}

package/src/tailwind/tailwind.config.cjs

@@ -151,7 +151,10 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/line-clamp")],
+  plugins: [
+    require("@tailwindcss/line-clamp"),
+    require("@headlessui/tailwindcss")({ prefix: "ui" }),
+  ],
   content: [
     "public/index.html",
     "lib/es6_global/src/**/**.(c)?js",
@@ -159,6 +162,8 @@ module.exports = {
     "src/main.jsx",
     "node_modules/@colisweb/rescript-toolkit/lib/es6_global/src/**/**.(c)?js",
     "node_modules/@colisweb/rescript-toolkit/src/**/**.(c)?js",
+    "node_modules/@colisweb/api-components/lib/es6_global/src/**/**.(c)?js",
+    "node_modules/@colisweb/api-components/src/**/**.(c)?js",
     "playground/**/*.(c)?js",
     "lib/es6_global/playground/**/*.(c)?js",
   ],

package/src/ui/Toolkit__Ui.res

@@ -8,7 +8,6 @@ module Spread = Toolkit__Ui_Spread
 module DatetimeInput = Toolkit__Ui_DatetimeInput
 module TextInput = Toolkit__Ui_TextInput
 module Tooltip = Toolkit__Ui_Tooltip
-module TooltipV2 = Toolkit__Ui_TooltipV2
 module Switch = Toolkit__Ui_Switch
 module Radio = Toolkit__Ui_Radio
 module Checkbox = Toolkit__Ui_Checkbox
@@ -36,4 +35,4 @@ module NativeDatePicker = Toolkit__Ui_NativeDatePicker
 module ErrorBoundary = Toolkit__Ui_ErrorBoundary
 module WeekDateFilter = Toolkit__Ui_WeekDateFilter
 module Coordinates = Toolkit__Ui_Coordinates
-module Modal2 = Toolkit__Ui_Modal2
+module Autocomplete = Toolkit__Ui_Autocomplete

package/src/ui/Toolkit__Ui_Autocomplete.res

@@ -0,0 +1,182 @@
+open ReactIntl
+
+@@intl.messages
+let searchError = {defaultMessage: "Une erreur est survenue lors de la recherche"}
+
+type rec suggestions<'value> = HeadlessUi__Combobox.suggestions<'value>
+and suggestion<'value> = HeadlessUi__Combobox.suggestion<'value>
+
+type renderProps<'value, 'error> = {
+  setSearch: (((string, bool)) => (string, bool)) => unit,
+  setSuggestions: (
+    option<result<HeadlessUi.Combobox.suggestions<'value>, 'error>> => option<
+      result<HeadlessUi.Combobox.suggestions<'value>, 'error>,
+    >
+  ) => unit,
+}
+
+@react.component
+let make = (
+  ~onSelect: option<suggestion<'value>> => unit,
+  ~isInvalid=false,
+  ~value: option<suggestion<'value>>,
+  ~onSearch,
+  ~emptySearchMessage=?,
+  ~containerClassName="",
+  ~emptySearchClassName="",
+  ~errorSearchClassName="",
+  ~inputClassName="",
+  ~optionsContainerClassName="",
+  ~inputId=?,
+  ~optionClassName="",
+  ~placeholder=?,
+  ~autoFocus=?,
+  ~minSearchLength=3,
+  ~additionnalOption=?,
+  ~children: option<renderProps<'value, 'error> => React.element>=?,
+) => {
+  let (search, setSearch) = React.useState(() =>
+    value->Option.mapWithDefault(("", false), v => {
+      (v.label, true)
+    })
+  )
+  let (search, isDefaultValue) = search
+  let (suggestions, setSuggestions) = React.useState((): option<
+    result<HeadlessUi.Combobox.suggestions<'value>, 'error>,
+  > => None)
+  let (searching, setSearching) = React.useState(() => false)
+  let intl = useIntl()
+
+  let onInputChange = event => {
+    let query = ReactEvent.Form.target(event)["value"]
+
+    setSearch(_ => (query, false))
+  }
+
+  let (_, _) = Toolkit__Hooks.useDebounce2(() => {
+    if !isDefaultValue {
+      switch search {
+      | "" => ()
+      | search if search->String.length < minSearchLength =>
+        setSuggestions(_ => Some(Error("QUERY_TOO_SMALL")))
+      | search =>
+        setSearching(_ => true)
+
+        onSearch(search)
+        ->Promise.tapOk(suggestions => {
+          setSearching(_ => false)
+          setSuggestions(_ => Some(Ok(suggestions)))
+        })
+        ->Promise.tapError(_ => {
+          setSuggestions(_ => Some(Error(intl->Intl.formatMessage(searchError))))
+          setSearching(_ => false)
+        })
+        ->ignore
+      }
+    }
+  }, 400, (search, isDefaultValue))
+
+  <div className={cx(["relative", containerClassName])}>
+    <HeadlessUi.Combobox
+      onChange={selectedValue => {
+        onSelect(selectedValue->Js.Nullable.toOption)
+      }}
+      value={value->Js.Nullable.fromOption}
+      nullable={true}>
+      <div
+        className="relative z-0 w-full cursor-default overflow-hidden rounded bg-white text-left  focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+        <HeadlessUi.Combobox.Input
+          ?placeholder
+          ?autoFocus
+          id=?inputId
+          onChange=onInputChange
+          className={cx([
+            "w-full border py-2 rounded pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0",
+            isInvalid ? "border-danger-500" : "border-gray-300",
+            inputClassName,
+          ])}
+          displayValue={selectedValue => {
+            selectedValue->Js.Nullable.toOption->Option.mapWithDefault("", ({label}) => label)
+          }}
+        />
+        {searching
+          ? <Toolkit__Ui_Spinner
+              size=#sm color=#primary className="absolute right-[10px] top-[10px] z-30"
+            />
+          : React.null}
+      </div>
+      {switch suggestions {
+      | None => React.null
+      | Some(suggestions) =>
+        <HeadlessUi.Transition
+          className="relative z-10"
+          enter="transition duration-100 ease-out"
+          enterFrom="transform scale-95 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-95 opacity-0">
+          <HeadlessUi.Combobox.Options
+            className={cx([
+              "absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",
+              optionsContainerClassName,
+            ])}>
+            {switch suggestions {
+            | Error("QUERY_TOO_SMALL") =>
+              <p className="p-2 text-sm">
+                <FormattedMessage
+                  defaultMessage="Tapez au moins {minSearchLength, plural, one {1 caractère} other {# caractères}}"
+                  values={"minSearchLength": minSearchLength}
+                />
+              </p>
+            | Error(err) =>
+              <p className={cx(["p-2 text-danger-500", errorSearchClassName])}>
+                {err->React.string}
+              </p>
+            | Ok([]) =>
+              <div className="p-2">
+                <p className={cx(["text-sm", emptySearchClassName])}>
+                  {emptySearchMessage->Option.getWithDefault(
+                    <FormattedMessage defaultMessage="Aucun résultat pour cette recherche" />,
+                  )}
+                </p>
+                {additionnalOption->Option.getWithDefault(React.null)}
+              </div>
+            | Ok(suggestions) =>
+              <>
+                {suggestions
+                ->Array.mapWithIndex((i, suggestion) => {
+                  <HeadlessUi.Combobox.OptionRender
+                    \"as"={Node(HeadlessUi__Shared.fragment)}
+                    key={`${suggestion.label}-${i->Int.toString}`}
+                    value={suggestion}>
+                    {({active, selected}) => {
+                      <li
+                        className={cx([
+                          "relative cursor-default select-none py-2 px-4",
+                          `autocompleteSuggestion e2e-autocompleteSuggestion-${i->Int.toString}`,
+                          active ? "bg-primary-700 text-white" : "bg-white text-neutral-900",
+                          selected ? "font-semibold" : "",
+                          optionClassName,
+                        ])}>
+                        {suggestion.label->React.string}
+                      </li>
+                    }}
+                  </HeadlessUi.Combobox.OptionRender>
+                })
+                ->React.array}
+                {additionnalOption->Option.getWithDefault(React.null)}
+              </>
+            }}
+          </HeadlessUi.Combobox.Options>
+        </HeadlessUi.Transition>
+      }}
+    </HeadlessUi.Combobox>
+    {children->Option.mapWithDefault(React.null, children =>
+      children({
+        setSearch,
+        setSuggestions,
+      })
+    )}
+  </div>
+}

package/src/ui/Toolkit__Ui_DropdownList.res

@@ -39,60 +39,64 @@ let make = (
       Js.Global.setTimeout(() => {
         buttonRef.current
         ->Js.Nullable.toOption
-        ->Option.forEach(dom => {
-          let buttonRect = dom->Browser.DomElement.getBoundingClientRect
-          let dropdownRect =
-            dropdownRef.current
-            ->Js.Nullable.toOption
-            ->Option.map(Browser.DomElement.getBoundingClientRect)
+        ->Option.forEach(
+          dom => {
+            let buttonRect = dom->Browser.DomElement.getBoundingClientRect
+            let dropdownRect =
+              dropdownRef.current
+              ->Js.Nullable.toOption
+              ->Option.map(Browser.DomElement.getBoundingClientRect)
 
-          let calculatedTop = switch position {
-          | #bottom => buttonRect.top +. buttonRect.height +. 10.
-          | #top => {
-              let base = buttonRect.top -. 10.
-              switch dropdownRect {
-              | None => base
-              | Some({height}) => {
-                  let newBase = base -. height /. 2.
-                  newBase < 0. ? buttonRect.top +. buttonRect.height +. 10. : newBase
+            let calculatedTop = switch position {
+            | #bottom => buttonRect.top +. buttonRect.height +. 10.
+            | #top => {
+                let base = buttonRect.top -. 10.
+                switch dropdownRect {
+                | None => base
+                | Some({height}) => {
+                    let newBase = base -. height /. 2.
+                    newBase < 0. ? buttonRect.top +. buttonRect.height +. 10. : newBase
+                  }
                 }
               }
             }
-          }
 
-          let calculatedLeft = {
-            let baseContainerCenter = buttonRect.left +. buttonRect.width /. 2.
+            let calculatedLeft = {
+              let baseContainerCenter = buttonRect.left +. buttonRect.width /. 2.
 
-            switch dropdownRect {
-            | None => baseContainerCenter
-            | Some({width}) => {
-                let baseCalculated = baseContainerCenter -. width /. 2.
-                let hasOverflowLeft = baseCalculated < 0.
-                let hasOverflowRight =
-                  baseContainerCenter +. width /. 2. > Browser.innerWidth->Int.toFloat
+              switch dropdownRect {
+              | None => baseContainerCenter
+              | Some({width}) => {
+                  let baseCalculated = baseContainerCenter -. width /. 2.
+                  let hasOverflowLeft = baseCalculated < 0.
+                  let hasOverflowRight =
+                    baseContainerCenter +. width /. 2. > Browser.innerWidth->Int.toFloat
 
-                if hasOverflowLeft {
-                  0.
-                } else if hasOverflowRight {
-                  let tmp = baseContainerCenter +. width /. 2.
+                  if hasOverflowLeft {
+                    0.
+                  } else if hasOverflowRight {
+                    let tmp = baseContainerCenter +. width /. 2.
 
-                  baseCalculated -. (tmp -. Browser.innerWidth->Int.toFloat)
-                } else {
-                  baseCalculated
+                    baseCalculated -. (tmp -. Browser.innerWidth->Int.toFloat)
+                  } else {
+                    baseCalculated
+                  }
                 }
               }
             }
-          }
 
-          setAdjustmentStyle(_ => Some(
-            ReactDOM.Style.make(
-              ~top=`${calculatedTop->Js.Float.toString}px`,
-              ~left=`${calculatedLeft->Js.Float.toString}px`,
-              ~opacity="1",
-              (),
-            ),
-          ))
-        })
+            setAdjustmentStyle(
+              _ => Some(
+                ReactDOM.Style.make(
+                  ~top=`${calculatedTop->Js.Float.toString}px`,
+                  ~left=`${calculatedLeft->Js.Float.toString}px`,
+                  ~opacity="1",
+                  (),
+                ),
+              ),
+            )
+          },
+        )
       }, 16)->ignore
     } else {
       setAdjustmentStyle(_ => None)
@@ -121,7 +125,7 @@ let make = (
       className={cx([buttonClassName, "dropdown-button"])}>
       label
       {isOpen
-        ? <ReachUi.Portal>
+        ? <Toolkit__Ui_Portal>
             <div
               ref={ReactDOM.Ref.domRef(dropdownRef)}
               className={cx([
@@ -152,14 +156,15 @@ let make = (
                         className,
                       ])}
                       key={i->Int.toString}>
-                      {icon} {label}
+                      {icon}
+                      {label}
                     </div>
                   })
                   ->React.array}
                 </div>
               </div>
             </div>
-          </ReachUi.Portal>
+          </Toolkit__Ui_Portal>
         : React.null}
     </Toolkit__Ui_Button>
   </div>