@colisweb/rescript-toolkit 4.29.3 → 5.0.0

package/src/ui/Toolkit__Ui_Notice.res

@@ -11,7 +11,7 @@ let make = (
   let (style, setStyle) = React.useState(() => None)
   let noticeRef = React.useRef(Js.Nullable.null)
 
-  React.useEffect2(() => {
+  React.useEffect(() => {
     let timeoutId = ref(None)
 
     baseElementRef.current
@@ -22,21 +22,29 @@ let make = (
       if visible {
         setVisibility(_ => true)
 
-        setStyle(_ => {
-          setElementReady(_ => true)
+        setStyle(
+          _ => {
+            setElementReady(_ => true)
+            Some(
+              ReactDOM.Style.make(
+                ~top=`${Js.Float.toString(y +. height)}px`,
+                ~left=`${(x +. width /. 2.)->Js.Float.toString}px`,
+                (),
+              ),
+            )
+          },
+        )
+      } else {
+        timeoutId :=
           Some(
-            ReactDOM.Style.make(
-              ~top=`${Js.Float.toString(y +. height)}px`,
-              ~left=`${(x +. width /. 2.)->Js.Float.toString}px`,
-              (),
+            Js.Global.setTimeout(
+              () => {
+                setElementReady(_ => false)
+                setVisibility(_ => visible)
+              },
+              500,
             ),
           )
-        })
-      } else {
-        timeoutId := Some(Js.Global.setTimeout(() => {
-              setElementReady(_ => false)
-              setVisibility(_ => visible)
-            }, 500))
         setCustomClassName(_ => "opacity-0")
       }
     })
@@ -44,7 +52,7 @@ let make = (
     Some(() => timeoutId.contents->Option.forEach(Js.Global.clearTimeout))
   }, (baseElementRef, visible))
 
-  React.useEffect1(() => {
+  React.useEffect(() => {
     let timeoutId = ref(None)
 
     if elementReady {
@@ -55,24 +63,27 @@ let make = (
     Some(() => timeoutId.contents->Option.forEach(Js.Global.clearTimeout))
   }, [elementReady])
 
-  React.useEffect2(() => {
+  React.useEffect(() => {
     if visibility {
       noticeRef.current
       ->Js.Nullable.toOption
       ->Option.forEach(dom => {
         let {left, right} = dom->Browser.DomElement.getBoundingClientRect
 
-        setStyle(style =>
-          style->Option.map(style => {
-            ReactDOM.Style.combine(
-              style,
-              ReactDOM.Style.make(
-                ~marginLeft=left < 0. ? `${-.left->Js.Float.toString}px` : "",
-                ~marginRight=right < 0. ? `${-.right->Js.Float.toString}px` : "",
-                (),
-              ),
-            )
-          })
+        setStyle(
+          style =>
+            style->Option.map(
+              style => {
+                ReactDOM.Style.combine(
+                  style,
+                  ReactDOM.Style.make(
+                    ~marginLeft=left < 0. ? `${-.left->Js.Float.toString}px` : "",
+                    ~marginRight=right < 0. ? `${-.right->Js.Float.toString}px` : "",
+                    (),
+                  ),
+                )
+              },
+            ),
         )
       })
     }

package/src/ui/Toolkit__Ui_Portal.res

@@ -12,7 +12,7 @@ let make = (~children) => {
   let node = React.useRef(createElement("div")).current
   let (defaultNode, setDefaultNode) = React.useState(() => None)
 
-  React.useEffect1(() => {
+  React.useEffect(() => {
     switch defaultNode {
     | None => {
         appendToBody(node)

package/src/ui/Toolkit__Ui_PortalDropdown.res

@@ -36,7 +36,7 @@ let make = (
 
   let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
 
-  React.useEffect1(() => {
+  React.useEffect(() => {
     if isOpen {
       ()
     } else {
@@ -52,7 +52,7 @@ let make = (
       type_="button"
       color=buttonColor
       buttonRef={ReactDOM.Ref.domRef(buttonRef)}
-      onClick={event => {
+      onClick={_ => {
         onButtonClick->Option.forEach(fn => fn())
         isOpen ? hide() : toggle()
       }}
@@ -76,10 +76,12 @@ let make = (
                     let dropdown = ref->Browser.DomElement.getBoundingClientRect
                     let left = left +. width /. 2. -. dropdown.width /. 2.
 
-                    let adjustmentStyle = ReactDOM.Style.make(
-                      ~top=`${(top +. height)->Js.Float.toString}px`,
-                      ~opacity="1",
-                    )
+                    let adjustmentStyle =
+                      ReactDOM.Style.make(
+                        ~top=`${(top +. height)->Js.Float.toString}px`,
+                        ~opacity="1",
+                        ...
+                      )
                     let adjustmentStyle = switch left {
                     | left if left < 0. => adjustmentStyle(~left="8px", ())
                     | left if left +. dropdown.width > Browser.innerWidth->Int.toFloat =>

package/src/ui/Toolkit__Ui_RadioGroup.res

@@ -11,7 +11,7 @@ let make = (~onChange, ~elements: array<element>, ~defaultValue=?, ~inline=false
   let name = "radio-" ++ ReachUi_AutoId.use("")
   let (value, setValue) = React.useState(() => defaultValue->Option.getWithDefault(""))
 
-  React.useEffect1(() => {
+  React.useEffect(() => {
     onChange(value)
     None
   }, [value])

package/src/ui/Toolkit__Ui_SearchListbox.res

@@ -18,7 +18,6 @@ let make = (
   ~compare: compare<'value>,
   ~onChange: option<Listbox.selectOption<'value> => unit>=?,
   ~placeholder=?,
-  ~searchPlaceholder as _=?,
   ~defaultOption: option<Listbox.selectOption<'value>>=?,
   ~isDisabled=?,
   ~value=?,
@@ -49,11 +48,11 @@ let make = (
       ?name
       defaultValue=?{defaultOption->Obj.magic}>
       {props => {
-        <>
+        <React.Fragment>
           <Listbox.Button
             className="relative flex flex-row items-center justify-between w-full cursor-default rounded-md font-semibold bg-white py-2 pl-3 pr-4 text-left border border-gray-300">
             {props => {
-              <>
+              <React.Fragment>
                 <span className="table-cell truncate text-left">
                   {switch (props.value, placeholder) {
                   | (None, Some(p)) => p->React.string
@@ -62,7 +61,7 @@ let make = (
                   }}
                 </span>
                 <ReactIcons.FaAngleDown size={20} />
-              </>
+              </React.Fragment>
             }}
           </Listbox.Button>
           <HeadlessUi.Transition
@@ -119,7 +118,7 @@ let make = (
               ->React.array}
             </Listbox.Options>
           </HeadlessUi.Transition>
-        </>
+        </React.Fragment>
       }}
     </Listbox>
   </div>

package/src/ui/Toolkit__Ui_SelectWithValidation.res

@@ -111,7 +111,7 @@ let make = (
   let deferredSearch = React.useDeferredValue(search)
   let allowFilter = options->Array.length > 5 && allowFilter
 
-  React.useEffect2(() => {
+  React.useEffect(() => {
     switch (previousDefaultValue, defaultValue) {
     | (Some(Some(v)), Some(v2)) if v !== v2 => setSelectedOption(_ => defaultValue)
     | _ => ()

package/src/ui/Toolkit__Ui_Snackbar.res

@@ -62,14 +62,14 @@ module Item = {
 
     let (mounted, setMounted) = React.useState(() => false)
 
-    React.useEffect0(() => {
+    React.useEffect(() => {
       setMounted(_ => true)
 
       let timeoutId = Js.Global.setTimeout(() => {
         hide(id)
       }, timeout)
       Some(() => Js.Global.clearTimeout(timeoutId))
-    })
+    }, [])
 
     <div
       style={ReactDOM.Style.make(~pointerEvents="all", ())}

package/src/ui/Toolkit__Ui_Switch.res

@@ -20,7 +20,7 @@ let make = (
   let (isChecked, setIsChecked) = React.useState(() => checked->Option.getWithDefault(false))
   let previousChecked = Toolkit__Hooks.usePrevious(checked)
 
-  React.useEffect2(() => {
+  React.useEffect(() => {
     checked->Option.forEach(checked => {
       switch (previousChecked, checked) {
       | (Some(Some(c1)), c2) if c1 != c2 => setIsChecked(_ => c2)

package/src/ui/Toolkit__Ui_TextInput.res

@@ -1,5 +1,5 @@
 @react.component
-let make = React.forwardRef((
+let make = (
   ~id: string,
   ~accept: option<string>=?,
   ~name: option<string>=?,
@@ -25,10 +25,10 @@ let make = React.forwardRef((
   ~isInvalid: option<bool>=?,
   ~className: string="",
   ~style: option<ReactDOM.style>=?,
-  ref,
+  ~inputRef=?,
 ) =>
   <input
-    ref=?{ref->Js.Nullable.toOption->Option.map(ReactDOM.Ref.domRef)}
+    ref=?{inputRef->Option.map(ReactDOM.Ref.domRef)}
     className={cx([
       className,
       "appearance-none outline-none transition duration-150 ease-in-out block w-full bg-white text-gray-800 border rounded py-2 px-4 leading-tight focus:z30 relative disabled:bg-gray-200 disabled:text-gray-700",
@@ -67,4 +67,3 @@ let make = React.forwardRef((
     ?onBlur
     ?onKeyDown
   />
-)

package/src/ui/Toolkit__Ui_TextareaInput.res

@@ -16,7 +16,7 @@ let autoExpand: Dom.element => unit = %raw(`
   `)
 
 @react.component
-let make = React.forwardRef((
+let make = (
   ~id,
   ~name=?,
   ~value=?,
@@ -31,33 +31,12 @@ let make = React.forwardRef((
   ~onChange: option<ReactEvent.Form.t => unit>=?,
   ~isInvalid=?,
   ~className="",
-  ref_,
 ) => {
-  let ownRef = React.useRef(Js.Nullable.null)
-  let textareaRef = switch ref_->Js.Nullable.toOption {
-  | Some(ref_) => ref_
-  | _ => ownRef
-  }
-
-  React.useLayoutEffect1(() => {
-    if textareaRef.current->Js.Nullable.toOption->Option.isSome {
-      textareaRef.current->Js.Nullable.toOption->Option.map(autoExpand)->ignore
-    }
-    None
-  }, [textareaRef])
-
   let onChange = event => {
-    if textareaRef.current->Js.Nullable.toOption->Option.isSome {
-      Js.Global.setTimeout(
-        () => textareaRef.current->Js.Nullable.toOption->Option.map(autoExpand)->ignore,
-        0,
-      )->ignore
-    }
     onChange->Option.map(onChange => onChange(event))->ignore
   }
 
   <textarea
-    ref={ReactDOM.Ref.callbackDomRef(ref_ => textareaRef.current = ref_)}
     style={ReactDOM.Style.make(
       ~height="auto",
       ~minHeight="38px",
@@ -86,4 +65,4 @@ let make = React.forwardRef((
     ?onBlur
     ?onKeyDown
   />
-})
+}

package/src/ui/Toolkit__Ui_Tooltip.res

@@ -20,7 +20,7 @@ let make = (
   let (children, isHover) = ReactUse.useHover(children)
   let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
 
-  React.useEffect2(() => {
+  React.useEffect(() => {
     if isHover {
       ref.current
       ->Js.Nullable.toOption

package/src/ui/Toolkit__Ui_WeekDateFilter.res

@@ -11,7 +11,7 @@ type action =
   | NextTimeSlot
   | UpdateSelectedDay(option<Js.Date.t>)
 
-@decco
+@spice
 type queryParams = {
   start: Toolkit__Decoders.Option.t<Toolkit__Decoders.Date.t>,
   selectedDay: Toolkit__Decoders.Option.t<Toolkit__Decoders.Date.t>,

package/src/unleash/Toolkit__Unleash.res

@@ -1,10 +1,10 @@
-@decco
+@spice
 type strategy<'parameters> = {
   name: string,
   parameters: 'parameters,
 }
 
-@decco
+@spice
 type config<'strategy> = {
   name: string,
   description: string,
@@ -13,7 +13,7 @@ type config<'strategy> = {
 }
 
 module type Config = {
-  @decco
+  @spice
   type argument
   type input
   type output
@@ -23,14 +23,14 @@ module type Config = {
 }
 
 module MakeFeature = (C: Config) => {
-  @decco
+  @spice
   type t = config<C.argument>
 
   let exec = (var: C.input) =>
-    Axios.get(C.envUrl ++ C.featureName,~config={Axios.makeConfig()}, ())
+    Axios.get(C.envUrl ++ C.featureName, ~config={Axios.makeConfig()}, ())
     ->Promise.Js.toResult
     ->Promise.flatMapOk(({data}) => {
       Promise.resolved(t_decode(data))
     })
-    ->Promise.mapOk(C.exec(var))
+    ->Promise.mapOk(C.exec(var, ...))
 }

package/src/unleash/index.md

@@ -8,7 +8,7 @@
 
 ```rescript
 module OutdatedApplicationConfig = {
-  [@decco]
+  [@spice]
   type parameters = {version: string};
   type input = unit;
   type output = bool;

package/src/utils/Toolkit__Utils.res

@@ -25,3 +25,23 @@ let durationMinutesToHourMinutesString = (durationMinutes: float) => {
     `${h < 10. ? "0" : ""}${h->Js.Float.toFixed}:${min < 10. ? "0" : ""}${min->Js.Float.toFixed}`
   }
 }
+
+module type Enum = {
+  type t
+  let t_decode: Js.Json.t => result<t, Spice.decodeError>
+  let t_encode: t => Js.Json.t
+}
+
+let encodeEnumToString = (type enum, enumValue: enum, enum: module(Enum with type t = enum)) => {
+  let module(Enum) = enum
+
+  (enumValue->Enum.t_encode->Obj.magic: string)
+}
+
+let decodeEnumFromString = (type enum, str: string, enum: module(Enum with type t = enum)) => {
+  let module(Enum) = enum
+  switch str->Obj.magic->Enum.t_decode {
+  | Ok(v) => Some(v)
+  | Error(_) => None
+  }
+}