@colisweb/rescript-toolkit 2.36.2 → 2.38.0

package/.gitlab-ci.yml

@@ -1,5 +1,5 @@
 include:
-  - "https://colisweb-open-source.gitlab.io/ci-common/v13.11.1/templates/colisweb.yml"
+  - "https://colisweb-idl.gitlab.io/colisweb-open-source/ci-common/v13.18.1/templates/colisweb.yml"
 
 # -----------------------------------------------
 # Test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.36.2",
+  "version": "2.38.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",

package/src/hooks/Toolkit__Hooks.res

@@ -240,3 +240,31 @@ let useOnClickOutside = (ref: React.ref<Js.Nullable.t<Dom.element>>, handler) =>
     )
   }, (ref, handler))
 }
+
+let useIntersection = ReactUse.useIntersection
+
+let useIsVisibleOnViewport = (~options: option<ReactUse.intersectionOptions<'a>>=?, domRef) => {
+  let (isVisible, setIsVisible) = React.useState(() => false)
+  let intersection = useIntersection(
+    domRef,
+    options->Option.getWithDefault({
+      root: Js.Nullable.null,
+      rootMargin: "0px",
+      threshold: 1.,
+    }),
+  )
+
+  React.useEffect1(() => {
+    intersection
+    ->Js.Nullable.toOption
+    ->Option.forEach(intersection => {
+      if intersection.intersectionRatio >= 1. {
+        setIsVisible(_ => true)
+      }
+    })
+
+    None
+  }, [intersection])
+
+  isVisible
+}

package/src/ui/Toolkit__Ui_CopyWrapper.res

@@ -0,0 +1,30 @@
+open ReactIntl
+
+module Msg = {
+  @@intl.messages
+  let copied = {
+    id: "clipboard.copied",
+    defaultMessage: "Copied to clipboard",
+  }
+}
+
+@react.component
+let make = (~children, ~textToCopy, ~className="", ~intl) => {
+  let ref1Clipboard = Toolkit.Hooks.useClipboard(
+    textToCopy,
+    ~onCopyNotificationMessage=intl->Intl.formatMessage(Msg.copied),
+  )
+
+  <div className={cx(["rounded-md border border-info-500 bg-info-50", className])}>
+    <div className="relative w-full">
+      <div
+        className="absolute -right-2 top-1 p-1 bg-info-50 text-info-500"
+        onClick={_ => {
+          ref1Clipboard.copy()
+        }}>
+        <BsReactIcons.MdContentCopy size=10 />
+      </div>
+      <div className="py-1 px-2 pr-4"> {children} </div>
+    </div>
+  </div>
+}

package/src/vendors/BsReactIcons.res

@@ -5902,11 +5902,13 @@ module IoIosCloseCircle = {
 
 module AiFillEyeInvisible = {
   @module("react-icons/ai") @react.component
-  external make: (~size: int=?) => React.element = "AiFillEyeInvisible"
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "AiFillEyeInvisible"
 }
 module AiFillEye = {
   @module("react-icons/ai") @react.component
-  external make: (~size: int=?) => React.element = "AiFillEye"
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "AiFillEye"
 }
 
 module FaCalendarCheck = {
@@ -5920,3 +5922,55 @@ module FaUserCog = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "FaUserCog"
 }
+
+module FaRedo = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaRedo"
+}
+
+module FaWarehouse = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaWarehouse"
+}
+
+module FaRecycle = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaRecycle"
+}
+module FaPlug = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaRecycle"
+}
+module FaTools = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaTools"
+}
+
+module MdOutlineFileDownload = {
+  @module("react-icons/md") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "MdOutlineFileDownload"
+}
+
+module FaServer = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaServer"
+}
+module FaLockOpen = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaLockOpen"
+}
+module FaLock = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaLock"
+}
+
+module FaCog = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaCog"
+}

package/src/vendors/ReactUse.res

@@ -46,3 +46,17 @@ external useGetSet: (unit => 'a) => ('a, 'a => 'a) = "useGetSet"
 
 @module("react-use")
 external useHover: React.element => (React.element, bool) = "useHover"
+
+type intersectionObserver = {intersectionRatio: float}
+
+type intersectionOptions<'domElement> = {
+  root: Js.Nullable.t<'domElement>,
+  rootMargin: string,
+  threshold: float,
+}
+
+@module("react-use")
+external useIntersection: (
+  React.ref<'a>,
+  intersectionOptions<'domElement>,
+) => Js.Nullable.t<intersectionObserver> = "useIntersection"