@colisweb/rescript-toolkit 5.15.5 → 5.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.15.5",
+  "version": "5.16.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -35,6 +35,11 @@
     "@greenlabs/ppx-spice": "0.2.1",
     "@headlessui/react": "1.7.18",
     "@headlessui/tailwindcss": "0.2.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "1.1.2",
     "@reach/auto-id": "0.18.0",
     "@rescript/react": "0.12.0",
     "autoprefixer": "10.4.17",

package/src/form/Toolkit__Form.res

@@ -128,19 +128,20 @@ module Make = (StateLenses: Config) => {
                   switch type_ {
                   | "password" =>
                     <Toolkit__Ui_Tooltip
-                      tooltipClassName={"min-w-[200px] text-center"}
-                      label={showPassword
+                      contentClassName={"min-w-[200px] text-center"}
+                      tooltipContent={showPassword
                         ? <ReactIntl.FormattedMessage defaultMessage="Masquer le mot de passe" />
-                        : <ReactIntl.FormattedMessage defaultMessage="Afficher le mot de passe" />}>
-                      <button
+                        : <ReactIntl.FormattedMessage defaultMessage="Afficher le mot de passe" />}
+                      triggerContent={<button
                         type_="button"
                         className="p-1 bg-neutral-300 rounded-r border border-gray-300 text-neutral-800"
                         onClick={_ => setShowPassword(v => !v)}>
                         {showPassword
                           ? <ReactIcons.AiFillEyeInvisible size={26} />
                           : <ReactIcons.AiFillEye size={26} />}
-                      </button>
-                    </Toolkit__Ui_Tooltip>
+                      </button>}
+                    />
+
                   | _ => React.null
                   }
                 })}

package/src/hooks/Toolkit__Hooks.res

@@ -163,7 +163,7 @@ let useClipboard = (~onCopyNotificationMessage: option<string>=?, value: string)
   let (hasCopied, setHasCopied) = React.useState(() => false)
   let onCopy = React.useCallback(() => {
     onCopyNotificationMessage->Option.forEach(message =>
-      Toolkit__Ui_Snackbar.show(~title=message, ~variant=#success, ())->ignore
+      Toolkit__Ui_Snackbar.show(~title=message, ~variant=Success, ())->ignore
     )
 
     let didCopy = CopyToClipboard.copy(value)

package/src/ui/Toolkit__Ui.res

@@ -40,3 +40,6 @@ module WeekDateFilter = Toolkit__Ui_WeekDateFilter
 module Coordinates = Toolkit__Ui_Coordinates
 module Autocomplete = Toolkit__Ui_Autocomplete
 module WeekdayNavigation = Toolkit__Ui_WeekdayNavigation
+module Popover = Toolkit__Ui_Popover
+module DropdownMenu = Toolkit__Ui_DropdownMenu
+module ScrollArea = Toolkit__Ui_ScrollArea

package/src/ui/Toolkit__Ui_DropdownMenu.res

@@ -0,0 +1,93 @@
+open Radix
+type item = {
+  label: React.element,
+  rightSlot?: React.element,
+}
+
+type itemContent = {
+  ...DropdownMenu.Item.options,
+  ...item,
+}
+type subTrigger = {...DropdownMenu.SubTrigger.options, ...item}
+
+type content =
+  | Item(itemContent)
+  | Separator
+  | Label(React.element)
+  | SubItems(subTrigger, array<itemContent>)
+
+%%private(let renderRightSlot = rightSlot => <div className="RightSlot"> rightSlot </div>)
+
+@react.component
+let make = (
+  ~trigger,
+  ~triggerOptions: option<DropdownMenu.Trigger.options>=?,
+  ~rootOptions: option<DropdownMenu.Root.options>=?,
+  ~contentOptions: option<DropdownMenu.Content.options>=?,
+  ~content: array<content>,
+) => {
+  <DropdownMenu.Root {...(rootOptions->Option.getWithDefault({})->Obj.magic)}>
+    <DropdownMenu.Trigger {...(triggerOptions->Option.getWithDefault({})->Obj.magic)}>
+      trigger
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
+        {...(contentOptions->Option.getWithDefault({})->Obj.magic)}
+        className="DropdownMenuContent"
+        sideOffset={contentOptions
+        ->Option.flatMap(v => v.sideOffset)
+        ->Option.getWithDefault(5)}>
+        {content
+        ->Array.mapWithIndex((i, content) => {
+          switch content {
+          | Label(element) =>
+            <DropdownMenu.Label
+              key={i->Int.toString ++ "dropdown-menu-item"} className="DropdownMenuLabel">
+              element
+            </DropdownMenu.Label>
+          | Separator =>
+            <DropdownMenu.Separator
+              key={i->Int.toString ++ "dropdown-menu-item"} className="DropdownMenuSeparator"
+            />
+          | Item(item) =>
+            <DropdownMenu.Item
+              key={i->Int.toString ++ "dropdown-menu-item"}
+              className="DropdownMenuItem"
+              disabled=?{item.disabled}
+              onSelect=?{item.onSelect}>
+              {item.label}
+              {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
+            </DropdownMenu.Item>
+
+          | SubItems(item, subContent) =>
+            <DropdownMenu.Sub key={i->Int.toString ++ "dropdown-menu-item"}>
+              <DropdownMenu.SubTrigger className="DropdownMenuSubTrigger" disabled=?{item.disabled}>
+                {item.label}
+                {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
+              </DropdownMenu.SubTrigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.SubContent
+                  className="DropdownMenuSubContent" sideOffset={2} alignOffset={-5}>
+                  {subContent
+                  ->Array.mapWithIndex((j, item) => {
+                    <DropdownMenu.Item
+                      key={i->Int.toString ++ j->Int.toString ++ "dropdown-menu-item"}
+                      disabled=?{item.disabled}
+                      onSelect=?{item.onSelect}
+                      className="DropdownMenuItem">
+                      {item.label}
+                      {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
+                    </DropdownMenu.Item>
+                  })
+                  ->React.array}
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Sub>
+          }
+        })
+        ->React.array}
+        <DropdownMenu.Arrow className="DropdownMenuArrow" />
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
+}

package/src/ui/Toolkit__Ui_Popover.res

@@ -0,0 +1,57 @@
+open Radix
+
+type color =
+  | White
+  | Black
+  | Neutral
+  | Primary
+
+@react.component
+let make = (
+  ~trigger,
+  ~triggerAsChild=false,
+  ~content,
+  ~color=White,
+  ~rootOptions: option<Popover.Root.options>=?,
+  ~contentOptions: option<Popover.Content.options>=?,
+) => {
+  let defaultContent: Popover.Content.props = {
+    children: <>
+      content
+      <Popover.Close
+        className="absolute w-6 h-6 right-2 top-2 inline-flex items-center justify-center rounded-full hover:bg-primary-500/25">
+        <ReactIcons.MdClose />
+      </Popover.Close>
+      <Popover.Arrow
+        className={switch color {
+        | White => "fill-white"
+        | Neutral => "fill-neutral-800"
+        | Black => "fill-neutral-900"
+        | Primary => "fill-primary-700"
+        }}
+      />
+    </>,
+  }
+  <Popover.Root {...(rootOptions->Option.getWithDefault({})->Obj.magic)}>
+    <Popover.Trigger asChild=triggerAsChild> trigger </Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content
+        {...contentOptions->Option.mapWithDefault(defaultContent, options => {
+          ...options->Obj.magic,
+          children: defaultContent.children,
+        })}
+        className={cx([
+          "rounded-lg w-72 p-4 shadow-lg z-50 cw-PopoverContent",
+          switch color {
+          | White => "bg-white text-neutral-800"
+          | Neutral => "bg-neutral-800 text-white"
+          | Black => "bg-neutral-900 text-white"
+          | Primary => "bg-primary-700 text-white"
+          },
+          contentOptions->Option.flatMap(v => v.className)->Option.getWithDefault(""),
+        ])}
+        sideOffset={contentOptions->Option.flatMap(v => v.sideOffset)->Option.getWithDefault(5)}
+      />
+    </Popover.Portal>
+  </Popover.Root>
+}

package/src/ui/Toolkit__Ui_ScrollArea.res

@@ -0,0 +1,14 @@
+open Radix
+@react.component
+let make = (~children, ~className="") => {
+  <ScrollArea.Root className={cx(["ScrollAreaRoot", className])}>
+    <ScrollArea.Viewport className="ScrollAreaViewport"> children </ScrollArea.Viewport>
+    <ScrollArea.Scrollbar className="ScrollAreaScrollbar" orientation=Vertical>
+      <ScrollArea.Thumb className="ScrollAreaThumb" />
+    </ScrollArea.Scrollbar>
+    <ScrollArea.Scrollbar className="ScrollAreaScrollbar" orientation=Horizontal>
+      <ScrollArea.Thumb className="ScrollAreaThumb" />
+    </ScrollArea.Scrollbar>
+    <ScrollArea.Corner className="ScrollAreaCorner" />
+  </ScrollArea.Root>
+}

package/src/ui/Toolkit__Ui_Snackbar.res

@@ -1,3 +1,5 @@
+open Radix
+
 type rec state = {list: array<options>}
 and options = {
   id: id,
@@ -9,7 +11,7 @@ and options = {
   timeout: int,
 }
 and id
-and variant = [#success | #warning | #danger]
+and variant = Success | Warning | Danger
 
 type action =
   | Show(options)
@@ -60,41 +62,37 @@ module Item = {
   let make = (~options) => {
     let {id, isVisible, variant, title, content, closable, timeout} = options
 
-    let (mounted, setMounted) = React.useState(() => false)
-
     React.useEffect(() => {
-      setMounted(_ => true)
-
       let timeoutId = Js.Global.setTimeout(() => {
         hide(id)
       }, timeout)
       Some(() => Js.Global.clearTimeout(timeoutId))
     }, [])
 
-    <div
-      style={ReactDOM.Style.make(~pointerEvents="all", ())}
+    <Toast.Root
+      open_={isVisible}
+      onOpenChange={v => v ? () : hide(id)}
       className={cx([
-        "rounded shadow transition duration-500 ease-in-out mt-3 p-3 pl-3 pr-10 transform cw-snackbar",
-        mounted ? "-translate-y-14" : "!opacity-0",
-        isVisible ? "opacity-100" : "opacity-0  translate-x-[200px]",
+        "transition duration-500 ease-in-out mt-3 p-3 pl-3 pr-10 transform cw-snackbar ToastRoot",
         {
           switch variant {
-          | #success => "bg-success-100 cw-snackbar--success"
-          | #warning => "bg-warning-100 cw-snackbar--warning"
-          | #danger => "bg-danger-100 cw-snackbar--danger"
+          | Success => "bg-success-100 cw-snackbar--success"
+          | Warning => "bg-warning-100 cw-snackbar--warning"
+          | Danger => "bg-danger-100 cw-snackbar--danger"
           }
         },
       ])}>
       {closable
-        ? <button className="absolute right-1" onClick={_ => hide(id)}>
+        ? <button className="absolute top-2 right-1 " onClick={_ => hide(id)}>
             <ReactIcons.MdClose
               size={24}
               className={cx([
+                "rounded-full",
                 {
                   switch variant {
-                  | #success => "text-neutral-700"
-                  | #warning => "text-warning-700"
-                  | #danger => "text-danger-700"
+                  | Success => "text-neutral-700 hover:bg-neutral-300"
+                  | Warning => "text-warning-700 hover:bg-warning-300"
+                  | Danger => "text-danger-700 hover:bg-danger-300"
                   }
                 },
               ])}
@@ -104,27 +102,29 @@ module Item = {
       <div className="flex flex-row gap-3 relative">
         <div>
           {switch variant {
-          | #success => <ReactIcons.MdCheckCircle size=28 className="text-success-600" />
-          | #warning => <ReactIcons.MdWarning size=28 className="text-warning-600" />
-          | #danger => <ReactIcons.MdError size=28 className="text-danger-600" />
+          | Success => <ReactIcons.MdCheckCircle size=28 className="text-success-600" />
+          | Warning => <ReactIcons.MdWarning size=28 className="text-warning-600" />
+          | Danger => <ReactIcons.MdError size=28 className="text-danger-600" />
           }}
         </div>
-        <div>
+        <Toast.Title className={"ToastTitle"}>
           <p
             className={cx([
-              "text-lg cw-snackbar-title",
+              "text-lg cw-snackbar-title mb-1",
               switch variant {
-              | #success => "text-neutral-700"
-              | #warning => "text-warning-700"
-              | #danger => "text-danger-700"
+              | Success => "text-neutral-700"
+              | Warning => "text-warning-700"
+              | Danger => "text-danger-700"
               },
             ])}>
             {title->React.string}
           </p>
-        </div>
+        </Toast.Title>
       </div>
-      {content->Option.getWithDefault(React.null)}
-    </div>
+      {content->Option.mapWithDefault(React.null, content => {
+        <Toast.Description className="ToastDescription"> content </Toast.Description>
+      })}
+    </Toast.Root>
   }
 }
 
@@ -133,15 +133,13 @@ module Provider = {
   let make = () => {
     let {list} = store.useStore()
 
-    <Toolkit__Ui_Portal>
-      <div
-        className="z-[2147483647] pointer-events-none 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>
-    </Toolkit__Ui_Portal>
+    <Radix.Toast.Provider swipeDirection={Right}>
+      {list
+      ->Array.map(e => {
+        <Item key={e.id->Obj.magic} options=e />
+      })
+      ->React.array}
+      <Toast.Viewport className="ToastViewport" />
+    </Radix.Toast.Provider>
   }
 }

package/src/ui/Toolkit__Ui_Snackbar.resi

@@ -1,4 +1,4 @@
-type variant = [#success | #warning | #danger]
+type variant = Success | Warning | Danger
 type id
 
 let show: (

package/src/ui/Toolkit__Ui_Tag.res

@@ -23,6 +23,7 @@ let make = (
   ~tooltipClassName=?,
   ~children,
 ) => {
+  let disclosure = Toolkit__Hooks.useDisclosure()
   let sizeStyle = x =>
     switch x {
     | #xs => "text-xs leading-4 px-1"
@@ -59,11 +60,12 @@ let make = (
       }
     }
 
-  <Toolkit__Ui_Tooltip
-    canBeShowed={tooltipLabel->Option.isSome}
-    label={tooltipLabel->Option.getWithDefault(React.null)}
-    ?tooltipClassName>
-    <div
+  <Toolkit__Ui_Tooltip.Controlled
+    open_={disclosure.isOpen}
+    onOpenChange={_ => tooltipLabel->Option.isSome ? disclosure.toggle() : ()}
+    tooltipContent={tooltipLabel->Option.getWithDefault(React.null)}
+    contentClassName=?tooltipClassName
+    triggerContent={<div
       className={cx([
         className,
         "inline-flex self-center rounded font-semibold max-w-xs",
@@ -71,6 +73,6 @@ let make = (
         sizeStyle(size),
       ])}>
       <span className="truncate"> children </span>
-    </div>
-  </Toolkit__Ui_Tooltip>
+    </div>}
+  />
 }

package/src/ui/Toolkit__Ui_Tooltip.res

@@ -1,90 +1,69 @@
-type position = [
-  | #bottom
-  | #right
-  | #top
-  | #left
-]
+open Radix
+
+type color =
+  | White
+  | Black
 
 @react.component
 let make = (
-  ~label: React.element,
-  ~children,
-  ~tooltipClassName="",
-  ~containerClassName="",
-  ~triangleClassName="",
-  ~position=#bottom,
-  ~canBeShowed=true,
+  ~triggerContent,
+  ~tooltipContent,
+  ~side: Tooltip.side=Top,
+  ~sideOffset=5,
+  ~contentClassName="",
+  ~color=White,
+  ~defaultOpen=?,
 ) => {
-  let ref = React.useRef(Js.Nullable.null)
-  let (position, setPosition) = React.useState(() => position)
-  let (children, isHover) = ReactUse.useHover(children)
-  let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
-
-  React.useEffect(() => {
-    if isHover {
-      ref.current
-      ->Js.Nullable.toOption
-      ->Option.forEach(dom => {
-        let {left, width, right, top} = dom->Browser.DomElement.getBoundingClientRect
-
-        let overflowFromRight = left +. width > Browser.innerWidth->Float.fromInt
-        let overflowFromLeft = left <= 0.
-
-        let overflowCorrection = {
-          if overflowFromRight {
-            Some(-.(width -. (Browser.innerWidth->Int.toFloat -. left)))
-          } else if overflowFromLeft {
-            Some(-.left)
-          } else {
-            None
-          }
-        }
-
-        switch position {
-        | #left if left < 0. => setPosition(_ => #right)
-        | #right if right < 0. => setPosition(_ => #left)
-        | #top if top < 0. => setPosition(_ => #bottom)
-        | _ => ()
-        }
-
-        setAdjustmentStyle(
-          _ => Some(
-            ReactDOM.Style.make(
-              ~marginLeft=overflowCorrection->Option.mapWithDefault(
-                "",
-                correction => `${correction->Js.Float.toString}px`,
-              ),
-              ~opacity="1",
-              (),
-            ),
-          ),
-        )
-      })
-    } else {
-      setAdjustmentStyle(_ => None)
-    }
-    None
-  }, (isHover, ref))
-
-  <div className={cx(["relative", containerClassName])}>
-    children
-    {isHover && canBeShowed
-      ? <div
-          ref={ReactDOM.Ref.domRef(ref)}
+  <Tooltip.Provider>
+    <Tooltip.Root ?defaultOpen delayDuration={0}>
+      <Tooltip.Trigger> {triggerContent} </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          side
+          sideOffset
           className={cx([
-            "dropdown",
-            "absolute z-20 text-sm p-2 transform transition duration-150 ease-in-out shadow rounded font-normal bg-gray-800 text-white opacity-0",
-            switch position {
-            | #bottom => "left-1/2 top-full  -translate-x-1/2 mt-2"
-            | #top => "left-1/2 bottom-full -translate-x-1/2 mb-2"
-            | #left => "right-full top-1/2 -translate-y-1/2 ml-2"
-            | #right => "left-full top-1/2 -translate-y-1/2 ml-2"
-            },
-            tooltipClassName,
-          ])}
-          style={adjustmentStyle->Option.getWithDefault(ReactDOM.Style.make())}>
-          label
-        </div>
-      : React.null}
-  </div>
+            "TooltipContent",
+            `TooltipContent--${(color :> string)}`,
+            contentClassName,
+          ])}>
+          {tooltipContent}
+          <Tooltip.Arrow className="TooltipArrow" />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+}
+
+module Controlled = {
+  @react.component
+  let make = (
+    ~triggerContent,
+    ~tooltipContent,
+    ~side: Tooltip.side=Top,
+    ~sideOffset=5,
+    ~contentClassName="",
+    ~color=White,
+    ~open_,
+    ~onOpenChange,
+    ~defaultOpen=?,
+  ) => {
+    <Tooltip.Provider>
+      <Tooltip.Root ?defaultOpen delayDuration={0} open_ onOpenChange>
+        <Tooltip.Trigger> {triggerContent} </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            side
+            sideOffset
+            className={cx([
+              "TooltipContent",
+              `TooltipContent--${(color :> string)}`,
+              contentClassName,
+            ])}>
+            {tooltipContent}
+            <Tooltip.Arrow className="TooltipArrow" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  }
 }