@colisweb/rescript-toolkit 2.0.0 → 2.3.1

package/package.json

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

package/src/router/Toolkit__Router.res

@@ -5,16 +5,21 @@ module type RouterConfig = {
 }
 
 module Make = (Config: RouterConfig) => {
+  type contextState = {
+    currentRoute: Config.t,
+    previousRoute: option<Config.t>,
+  }
   let navigate = (route: Config.t) => RescriptReactRouter.push(route->Config.toString)
 
   let replace = (route: Config.t) => RescriptReactRouter.replace(route->Config.toString)
 
-  let routerContext = React.createContext(
-    RescriptReactRouter.dangerouslyGetInitialUrl()->Config.make,
-  )
+  let routerContext = React.createContext({
+    currentRoute: RescriptReactRouter.dangerouslyGetInitialUrl()->Config.make,
+    previousRoute: None,
+  })
 
   module RouterContextProvider = {
-    let makeProps = (~value: Config.t, ~children, ()) =>
+    let makeProps = (~value: contextState, ~children, ()) =>
       {
         "value": value,
         "children": children,
@@ -30,6 +35,8 @@ module Make = (Config: RouterConfig) => {
         RescriptReactRouter.dangerouslyGetInitialUrl()->Config.make
       )
 
+      let previousRoute = Toolkit__Hooks.usePrevious(currentRoute)
+
       React.useLayoutEffect1(() => {
         let watcherID = RescriptReactRouter.watchUrl(url =>
           setCurrentRoute(_ => url |> Config.make)
@@ -37,7 +44,14 @@ module Make = (Config: RouterConfig) => {
         Some(() => RescriptReactRouter.unwatchUrl(watcherID))
       }, [setCurrentRoute])
 
-      <RouterContextProvider value=currentRoute> {children(~currentRoute)} </RouterContextProvider>
+      let contextValue: contextState = {
+        previousRoute: previousRoute,
+        currentRoute: currentRoute,
+      }
+
+      <RouterContextProvider value={contextValue}>
+        {children(~currentRoute)}
+      </RouterContextProvider>
     }
   }
 
@@ -47,7 +61,7 @@ module Make = (Config: RouterConfig) => {
     routeA->Config.toString === routeB->Config.toString
 
   let useIsCurrentRoute = (route: Config.t): bool => {
-    let currentRoute = React.useContext(routerContext)
+    let {currentRoute} = React.useContext(routerContext)
     isRouteEqual(currentRoute, route)
   }
 
@@ -214,6 +228,7 @@ module Make = (Config: RouterConfig) => {
       ~links: array<link>,
       ~isNavOpen: bool,
       ~onLinkClick=() => (),
+      ~openMenu,
     ) => {
       let (isOpen, setIsOpen) = React.useState(() => false)
 
@@ -227,7 +242,12 @@ module Make = (Config: RouterConfig) => {
       }, [isNavOpen])
 
       <>
-        <button onClick=toggle className={cx([commonClassName, "flex items-center w-full"])}>
+        <button
+          onClick={_ => {
+            openMenu()
+            toggle()
+          }}
+          className={cx([commonClassName, "flex items-center w-full sidenav-link"])}>
           <span className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}>
             groupInfo.icon
           </span>
@@ -247,6 +267,12 @@ module Make = (Config: RouterConfig) => {
               ])}
             />
           </span>
+          {isNavOpen
+            ? React.null
+            : <div
+                className="sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap">
+                groupInfo.label
+              </div>}
         </button>
         <div
           className={cx([

package/src/ui/Toolkit__Ui_Layout.res

@@ -84,10 +84,17 @@ module App = {
     type sideNavRender = {
       onLinkClick: unit => unit,
       isNavOpen: bool,
+      openMenu: unit => unit,
     }
 
     @react.component
-    let make = (~isNavOpen, ~bottom=?, ~hideMenu, ~children: sideNavRender => React.element) => {
+    let make = (
+      ~isNavOpen,
+      ~bottom=?,
+      ~hideMenu,
+      ~children: sideNavRender => React.element,
+      ~openMenu,
+    ) => {
       let {isLg} = Toolkit__Hooks.useMediaQuery()
 
       let onLinkClick = () => isLg ? () : hideMenu()
@@ -99,17 +106,13 @@ module App = {
             "lg:flex border-r px-2 py-3 fixed flex-col bg-white justify-between transition-all duration-300 ease-in-out z-40",
             isNavOpen ? "w-64 overflow-y-auto" : "w-16 hidden sidenav--closed",
           ])}>
-          {children({onLinkClick: onLinkClick, isNavOpen: isNavOpen})}
+          {children({onLinkClick: onLinkClick, isNavOpen: isNavOpen, openMenu: openMenu})}
           {bottom->Option.mapWithDefault(React.null, content =>
             <div className={!isNavOpen ? "overflow-hidden" : ""}>
               <div
                 className={cx([
-                  "flex flex-col justify-end transition-all duration-300 ease-in-out",
+                  "flex flex-col justify-end transition-all duration-300 ease-in-out w-[14.75rem]",
                   isNavOpen ? "opacity-100" : "opacity-0",
-                  {
-                    open Css
-                    style(list{width(14.75->rem)})
-                  },
                 ])}>
                 content
               </div>
@@ -161,12 +164,15 @@ module App = {
     )
 
     let hideMenu = React.useCallback(_ => setOpen(_ => false))
+    let openMenu = React.useCallback(_ => setOpen(_ => true))
 
     <NavOpenContext.Provider value={isNavOpen}>
       <div>
         <TopNavigationBar username logout logoutLabel toggleMenu onLogoClick />
         <div className="flex">
-          <LeftNavigationBar isNavOpen ?bottom hideMenu> sideNavRender </LeftNavigationBar>
+          <LeftNavigationBar isNavOpen ?bottom hideMenu openMenu>
+            {sideNavRender}
+          </LeftNavigationBar>
           <main
             className={cx([
               className,

package/src/vendors/ReactErrorBoundary.res

@@ -0,0 +1,13 @@
+type fallbackProps = {
+  error: Js.Exn.t,
+  resetErrorBoundary: unit => unit,
+}
+
+@module("react-error-boundary") @react.component
+external make: (
+  ~fallback: React.element=?,
+  ~fallbackComponent: fallbackProps => React.element=?,
+  ~fallbackRender: fallbackProps => React.element=?,
+  ~children: React.element,
+  ~resetKeys: array<'a>=?,
+) => React.element = "ErrorBoundary"