@colisweb/rescript-toolkit 2.70.1 → 2.71.0

package/playground/design/TailwindConfigColorsPreview.jsx

@@ -1,4 +1,4 @@
-import * as tailwindConfig from "../../src/tailwind/tailwind.config.js";
+import tailwindConfig from "../../src/tailwind/tailwind.config.cjs";
 
 const colors = tailwindConfig.theme.colors;
 
@@ -36,7 +36,7 @@ export default () => (
       return (
         <div className="mb-6" key={colorType}>
           <h3 className="text-xl font-bold mb-2">{colorType}</h3>
-          <div className="flex flex-col-gap-4">
+          <div className="flex gap-4">
             {typeof colors === "string" ? (
               <ColorPreview code={null} color={colors} />
             ) : (

package/playground/design/TailwindConfigFontsPreview.jsx

@@ -1,4 +1,4 @@
-import * as tailwindConfig from "../../src/tailwind/tailwind.config.js";
+import tailwindConfig from "../../src/tailwind/tailwind.config.cjs";
 
 const fontFamily = tailwindConfig.theme.fontFamily;
 const fontSize = tailwindConfig.theme.fontSize;

package/playground/hooks/Playground_Clipboard.res

@@ -0,0 +1,19 @@
+let resi = ""
+
+@module("@root/playground/hooks/Playground_Clipboard.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let clipboard = Toolkit.Hooks.useClipboard(
+    ~onCopyNotificationMessage="Copied !",
+    "copied content",
+  )
+
+  <div>
+    <Toolkit.Ui.Snackbar.Provider />
+    <Toolkit.Ui.Button onClick={_ => clipboard.copy()}>
+      {"Copy some content to the clipboard"->React.string}
+    </Toolkit.Ui.Button>
+  </div>
+}

package/playground/hooks/Playground_Disclosure.res

@@ -0,0 +1,24 @@
+let resi = ""
+
+@module("@root/playground/hooks/Playground_Disclosure.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let disclosure = Toolkit.Hooks.useDisclosure()
+
+  <div className="grid grid-cols-2 gap-4 w-64">
+    <div className="grid grid-rows-3 gap-4">
+      <Toolkit.Ui.Button onClick={_ => disclosure.toggle()}>
+        {"Toggle"->React.string}
+      </Toolkit.Ui.Button>
+      <Toolkit.Ui.Button onClick={_ => disclosure.show()}>
+        {"Show"->React.string}
+      </Toolkit.Ui.Button>
+      <Toolkit.Ui.Button onClick={_ => disclosure.hide()}>
+        {"Hide"->React.string}
+      </Toolkit.Ui.Button>
+    </div>
+    <p> {(disclosure.isOpen ? "Visible" : "hidden")->React.string} </p>
+  </div>
+}

package/playground/hooks/Playground_LazyLoad.res

@@ -0,0 +1,31 @@
+let resi = ""
+
+@module("@root/playground/hooks/Playground_LazyLoad.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let ref = React.useRef(Js.Nullable.null)
+  let intersection = ReactUse.useIntersection(
+    ref,
+    {
+      root: Js.Nullable.null,
+      rootMargin: "0px",
+      threshold: 1.,
+    },
+  )
+
+  <div
+    className={cx([
+      "h-[300px] w-64 overflow-scroll border",
+      switch intersection->Js.Nullable.toOption {
+      | Some({intersectionRatio}) if intersectionRatio < 1. => ""
+      | _ => "bg-info-100"
+      },
+    ])}>
+    <p className="h-[500px]">
+      {"The background will change when the text at the end will be visible in the viewport. Scroll down"->React.string}
+    </p>
+    <p ref={ReactDOM.Ref.domRef(ref)}> {"not visible"->React.string} </p>
+  </div>
+}

package/playground/hooks/Playground_MediaQueries.res

@@ -0,0 +1,11 @@
+let resi = ""
+
+@module("@root/playground/hooks/Playground_MediaQueries.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let result = Toolkit__Hooks.useMediaQuery()
+
+  <div> {result->Obj.magic->Js.Json.stringifyWithSpace(2)->React.string} </div>
+}

package/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

package/src/form/Toolkit__Form.res

@@ -190,8 +190,8 @@ module Make = (StateLenses: Config) => {
                         className="p-1 bg-neutral-300 rounded-r border border-gray-300 text-neutral-800"
                         onClick={_ => setShowPassword(v => !v)}>
                         {showPassword
-                          ? <BsReactIcons.AiFillEyeInvisible size={26} />
-                          : <BsReactIcons.AiFillEye size={26} />}
+                          ? <ReactIcons.AiFillEyeInvisible size={26} />
+                          : <ReactIcons.AiFillEye size={26} />}
                       </button>
                     </Toolkit__Ui_Tooltip>
                   | _ => React.null

package/src/router/Toolkit__Router.res

@@ -196,7 +196,7 @@ module Make = (Config: RouterConfig) => {
           {links
           ->Array.mapWithIndex((i, {route, text}) => {
             <React.Fragment key={i->Int.toString}>
-              {i > 0 ? <BsReactIcons.MdKeyboardArrowRight size=20 /> : React.null}
+              {i > 0 ? <ReactIcons.MdKeyboardArrowRight size=20 /> : React.null}
               {links->Toolkit__Primitives.Array.isLastIndex(i)
                 ? <p className="font-semibold"> text </p>
                 : <Link route className="hover:underline"> text </Link>}
@@ -368,7 +368,7 @@ module Make = (Config: RouterConfig) => {
             groupInfo.label
           </span>
           <span className={cx(["absolute right-0 mr-2", isNavOpen ? "opacity-100" : "opacity-0"])}>
-            <BsReactIcons.MdKeyboardArrowRight
+            <ReactIcons.MdKeyboardArrowRight
               size=24
               className={cx([
                 "transition-all ease-linear duration-200 transform",

package/src/ui/Toolkit__Ui_Alert.res

@@ -14,11 +14,11 @@ let make = (~title, ~description=?, ~status, ~className=?) =>
       className->Option.getWithDefault(""),
     ])}>
     {switch status {
-    | #success => <BsReactIcons.MdCheckCircle size=28 className="text-success-600 flex-shrink-0" />
-    | #error => <BsReactIcons.MdWarning size=28 className="text-danger-600 flex-shrink-0" />
+    | #success => <ReactIcons.MdCheckCircle size=28 className="text-success-600 flex-shrink-0" />
+    | #error => <ReactIcons.MdWarning size=28 className="text-danger-600 flex-shrink-0" />
     | #warning =>
-      <BsReactIcons.FaExclamationTriangle size=28 className="text-warning-600 flex-shrink-0" />
-    | #info => <BsReactIcons.FaExclamationCircle size=28 className="text-info-600 flex-shrink-0" />
+      <ReactIcons.FaExclamationTriangle size=28 className="text-warning-600 flex-shrink-0" />
+    | #info => <ReactIcons.FaExclamationCircle size=28 className="text-info-600 flex-shrink-0" />
     }}
     <div className="mx-3">
       <div

package/src/ui/Toolkit__Ui_Button.res

@@ -100,6 +100,11 @@ let buttonStyle = (
   cx([baseStyle, sizeStyle, colorStyle, disabledStyle])
 }
 
+module type Icon = {
+  @react.component
+  let make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element
+}
+
 @react.component
 let make = (
   ~size=#md,
@@ -119,10 +124,11 @@ let make = (
   ~type_: option<string>=?,
   ~className="",
   ~children=React.null,
-  ~leftIcon=?,
-  ~rightIcon=?,
+  ~leftIcon: option<module(Icon)>=?,
+  ~rightIcon: option<module(Icon)>=?,
+  ~iconClassName=?,
   ~buttonRef: option<ReactDOM.domRef>=?,
-) =>
+) => {
   <button
     ref=?{buttonRef}
     ?ariaLabel
@@ -141,8 +147,37 @@ let make = (
       buttonStyle(~color, ~variant, ~size, ~disabled, ()),
       variant === #pill ? "rounded-full" : "",
     ])}>
-    {leftIcon->Option.mapWithDefault(React.null, icon => <span className="mr-2"> icon </span>)}
+    {leftIcon->Option.mapWithDefault(React.null, icon => {
+      let module(Icon) = icon
+
+      <span className="mr-2">
+        <Icon
+          size={switch size {
+          | #xs => 12
+          | #sm => 16
+          | #md => 20
+          | #lg => 24
+          }}
+          className=?iconClassName
+        />
+      </span>
+    })}
     children
-    {rightIcon->Option.mapWithDefault(React.null, icon => <span className="ml-2"> icon </span>)}
+    {rightIcon->Option.mapWithDefault(React.null, icon => {
+      let module(Icon) = icon
+
+      <span className="ml-2">
+        <Icon
+          size={switch size {
+          | #xs => 14
+          | #sm => 18
+          | #md => 22
+          | #lg => 26
+          }}
+          className=?iconClassName
+        />
+      </span>
+    })}
     {isLoading ? <Spinner size=#sm color=#current className="ml-2" /> : React.null}
   </button>
+}

package/src/ui/Toolkit__Ui_Button.resi

@@ -34,7 +34,8 @@ let make: (
   ~type_: string=?,
   ~className: string=?,
   ~children: React.element=?,
-  ~leftIcon: React.element=?,
-  ~rightIcon: React.element=?,
+  ~leftIcon: module(ReactIcons.Icon)=?,
+  ~rightIcon: module(ReactIcons.Icon)=?,
+  ~iconClassName: string=?,
   ~buttonRef: ReactDOM.domRef=?,
 ) => React.element

package/src/ui/Toolkit__Ui_Card.res

@@ -53,10 +53,10 @@ module Message = {
   @react.component
   let make = (~variant, ~className="", ~children=React.null) => {
     let icon = switch variant {
-    | #info => <BsReactIcons.MdInfo className="w-6 h-6 mr-2 text-info-600" />
-    | #success => <BsReactIcons.MdCheckCircle className="w-6 h-6 mr-2 text-success-600" />
-    | #warning => <BsReactIcons.MdWarning className="w-6 h-6 mr-2 text-warning-600" />
-    | #error => <BsReactIcons.MdError className="w-6 h-6 mr-2 text-danger-600" />
+    | #info => <ReactIcons.MdInfo className="w-6 h-6 mr-2 text-info-600" />
+    | #success => <ReactIcons.MdCheckCircle className="w-6 h-6 mr-2 text-success-600" />
+    | #warning => <ReactIcons.MdWarning className="w-6 h-6 mr-2 text-warning-600" />
+    | #error => <ReactIcons.MdError className="w-6 h-6 mr-2 text-danger-600" />
     }
 
     let color = switch variant {

package/src/ui/Toolkit__Ui_Checkbox.res

@@ -70,7 +70,7 @@ let make = (
         checkboxClassName,
         isChecked ? checkedCheckboxClassName : "",
       ])}>
-      <BsReactIcons.FaCheck
+      <ReactIcons.FaCheck
         className="transform transition-all ease-in-out"
         size={switch size {
         | #xs => 14

package/src/ui/Toolkit__Ui_CopyWrapper.res

@@ -22,7 +22,7 @@ let make = (~children, ~textToCopy, ~className="", ~intl) => {
         onClick={_ => {
           ref1Clipboard.copy()
         }}>
-        <BsReactIcons.MdContentCopy size=10 />
+        <ReactIcons.MdContentCopy size=10 />
       </div>
       <div className="py-1 px-2 pr-4"> {children} </div>
     </div>

package/src/ui/Toolkit__Ui_Layout.res

@@ -39,13 +39,13 @@ module App = {
 
   module TopNavigationBar = {
     @react.component
-    let make = (~toggleMenu, ~username=?, ~onLogoClick, ~logout=?) => {
+    let make = (~toggleMenu, ~username=?, ~logoSrc=?, ~onLogoClick, ~logout=?) => {
       <div
         className="bg-white h-16 border-b flex items-center px-1 justify-between fixed top-0 left-0 w-full z-40">
         <div className="flex items-center px-1">
           <button
             onClick=toggleMenu className="text-neutral-800 hover:bg-neutral-300 rounded-full p-2">
-            <BsReactIcons.MdMenu size=32 />
+            <ReactIcons.MdMenu size=32 />
           </button>
           <a
             href="#"
@@ -54,7 +54,11 @@ module App = {
 
               onLogoClick()
             }}>
-            <img src="/assets/logo.svg" alt="Colisweb" className="w-16 ml-4" />
+            <img
+              src={logoSrc->Option.getWithDefault("/assets/logo.svg")}
+              alt="Colisweb"
+              className="w-16 ml-4"
+            />
           </a>
         </div>
         {switch (username, logout) {
@@ -67,10 +71,10 @@ module App = {
                 {username->React.string}
               </span>
               <div>
-                <BsReactIcons.MdAccountCircle size=28 />
+                <ReactIcons.MdAccountCircle size=28 />
               </div>
               <div>
-                <BsReactIcons.MdKeyboardArrowDown size=18 />
+                <ReactIcons.MdKeyboardArrowDown size=18 />
               </div>
             </div>}>
             <button
@@ -146,6 +150,7 @@ module App = {
     ~logout=?,
     ~onLogoClick,
     ~bottom=?,
+    ~logoSrc=?,
   ) => {
     let {isLg} = Toolkit__Hooks.useMediaQuery()
     let (isNavOpen, setOpen) = React.useState(() =>
@@ -173,7 +178,7 @@ module App = {
 
     <NavOpenContext.Provider value={isNavOpen}>
       <div>
-        <TopNavigationBar ?username ?logout toggleMenu onLogoClick />
+        <TopNavigationBar ?logoSrc ?username ?logout toggleMenu onLogoClick />
         <div className="flex">
           <LeftNavigationBar isNavOpen ?bottom hideMenu openMenu>
             {sideNavRender}

package/src/ui/Toolkit__Ui_ListboxInput.res

@@ -318,7 +318,7 @@ module ListboxInputOption = {
       onClick=itemProps.onClick
       className={cx([className, "pr-8", item === Placeholder ? "italic" : ""])}>
       {isSelected(item)
-        ? <BsReactIcons.MdCheck className="mr-4 w-6 h-6 flex-none" />
+        ? <ReactIcons.MdCheck className="mr-4 w-6 h-6 flex-none" />
         : <span className="mr-4 w-6 h-6 flex-none" />}
       <span className="truncate"> children </span>
     </Listbox.Option>
@@ -466,7 +466,7 @@ module ListboxInputSelect = {
             ->Option.mapWithDefault(placeholder, item => item->itemToString)
             ->React.string}
           </span>
-          <BsReactIcons.MdArrowDropDown className="ml-2 w-6 h-6 -my-1 flex-none" />
+          <ReactIcons.MdArrowDropDown className="ml-2 w-6 h-6 -my-1 flex-none" />
         </ListboxInputButton>
         <ListboxInputPopover className="-mt-12">
           <ListboxInputList ?onBlur>
@@ -633,7 +633,7 @@ module ListboxInputMultiSelect = {
             | items => items->Array.map(itemToString)->Js.Array.joinWith(", ", _)
             }->React.string}
           </span>
-          <BsReactIcons.MdArrowDropDown className="ml-2 w-6 h-6 -my-1 flex-none" />
+          <ReactIcons.MdArrowDropDown className="ml-2 w-6 h-6 -my-1 flex-none" />
         </ListboxInputButton>
         <ListboxInputPopover className="-mt-12">
           <ListboxInputList ?onBlur>

package/src/ui/Toolkit__Ui_Modal.res

@@ -87,7 +87,7 @@ let make = (
             "p-1 rounded-full modal-close-button",
             closeIconStyle(~type_),
           ])}>
-          <BsReactIcons.MdClose size=28 />
+          <ReactIcons.MdClose size=28 />
         </button>
       </header>
       <div className="px-1 sm:px-2 md:px-5"> body </div>

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -57,7 +57,7 @@ let make = (
       <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 />
+          <ReactIcons.FaAngleDown />
         </span>
       </p>
     | options =>

package/src/ui/Toolkit__Ui_Radio.res

@@ -45,7 +45,7 @@ let make = (
         | #lg => "w-10 h-10"
         },
       ])}>
-      <BsReactIcons.GoPrimitiveDot
+      <ReactIcons.GoPrimitiveDot
         className="transform transition-all ease-in-out"
         size={switch size {
         | #xs => 12

package/src/ui/Toolkit__Ui_Reference.res

@@ -1,7 +1,3 @@
-// ----------------------
-// This component require the presence of a Toolkit Ui Snackbar provider for onCopy notifications to work
-// ----------------------
-
 @react.component
 let make = (
   ~reference,
@@ -25,7 +21,7 @@ let make = (
       color=#info
       onClick={_ => refClipboard.copy()}
       ariaLabel="copy"
-      icon={<BsReactIcons.MdContentCopy size={copyButtonSize} />}
+      icon={<ReactIcons.MdContentCopy size={copyButtonSize} />}
       className="flex-shrink-0"
     />
   </div>

package/src/ui/Toolkit__Ui_Select.res

@@ -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.FaAngleDown />
+      <ReactIcons.FaAngleDown />
     </div>
   </div>

package/src/ui/Toolkit__Ui_Snackbar.res

@@ -87,7 +87,7 @@ module Item = {
       ])}>
       {closable
         ? <button className="absolute right-1" onClick={_ => hide(id)}>
-            <BsReactIcons.MdClose
+            <ReactIcons.MdClose
               size={24}
               className={cx([
                 {
@@ -104,9 +104,9 @@ module Item = {
       <div className="flex flex-row gap-3 relative">
         <div>
           {switch variant {
-          | #success => <BsReactIcons.MdCheckCircle size=28 className="text-success-600" />
-          | #warning => <BsReactIcons.MdWarning size=28 className="text-warning-600" />
-          | #danger => <BsReactIcons.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>

package/src/ui/Toolkit__Ui_Table.res

@@ -68,8 +68,8 @@ module Core = {
                               ? column.isSortedDesc->Option.mapWithDefault(React.null, v =>
                                   <span className="absolute right-0 top-0 mt-1">
                                     {v
-                                      ? <BsReactIcons.MdKeyboardArrowDown size=18 />
-                                      : <BsReactIcons.MdKeyboardArrowUp size=18 />}
+                                      ? <ReactIcons.MdKeyboardArrowDown size=18 />
+                                      : <ReactIcons.MdKeyboardArrowUp size=18 />}
                                   </span>
                                 )
                               : React.null}

package/src/ui/Toolkit__Ui_WeekDateFilter.res

@@ -155,7 +155,7 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
         color=#neutral
         onClick={_ => dispatch(PreviousTimeSlot)}
         ariaLabel="previous week"
-        icon={<BsReactIcons.MdKeyboardArrowLeft size=30 />}
+        icon={<ReactIcons.MdKeyboardArrowLeft size=30 />}
       />
       <div className="flex items-center mx-2">
         {BsDateFns.eachDayOfInterval({
@@ -207,7 +207,7 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
         color=#neutral
         onClick={_ => dispatch(NextTimeSlot)}
         ariaLabel="next week"
-        icon={<BsReactIcons.MdKeyboardArrowRight size=30 />}
+        icon={<ReactIcons.MdKeyboardArrowRight size=30 />}
       />
     </div>
     {children({timeslot, selectedDay})}

package/src/vendors/{BsReactIcons.res → ReactIcons.res}

@@ -1,3 +1,8 @@
+module type Icon = {
+  @react.component
+  let make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element
+}
+
 module Md3dRotation = {
   @module("react-icons/md") @react.component
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
@@ -6014,3 +6019,12 @@ module SiDatabricks = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "SiDatabricks"
 }
+module GiHook = {
+  @module("react-icons/gi") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "GiHook"
+}
+module BsPalette = {
+  @module("react-icons/bs") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "BsPalette"
+}

package/vite.config.js

@@ -8,6 +8,7 @@ import rehypeHighlight from "rehype-highlight";
 import rescriptHighlight from "./playground/utils/rescript-highlight";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeSlug from "rehype-slug";
+import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
 
 const appDirectory = fs.realpathSync(process.cwd());
 const isProduction = process.env.NODE_ENV === "production";
@@ -18,6 +19,7 @@ export default defineConfig({
     sourcemap: true,
   },
   plugins: [
+    viteCommonjs(),
     mdx({
       rehypePlugins: [
         [