@colisweb/rescript-toolkit 2.1.0 → 2.4.0

package/.gitlab-ci.yml

@@ -4,12 +4,12 @@ include:
 # -----------------------------------------------
 # Test
 # -----------------------------------------------
-test compilation:
+rescript compilation:
   tags:
     - aws
   extends: .rules-except-for-tags
   stage: test
-  image: node:lts-buster
+  image: node:lts-bullseye
   cache:
     key: "yarn-$CI_COMMIT_REF_SLUG"
     paths:
@@ -29,7 +29,7 @@ version:
 # Publish npm
 # -----------------------------------------------
 publish rescript-toolkit:
-  image: node:lts-buster
+  image: node:lts-bullseye
   extends: .rules-only-for-tags
   tags:
     - aws
@@ -49,7 +49,7 @@ pages:
   tags:
     - aws
   stage: deploy
-  image: node:lts-buster
+  image: node:lts-bullseye
   script:
     - export NPM_TOKEN=${NPM_TOKEN:-undefined}
     - yarn

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.1.0",
+  "version": "2.4.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",
     "watch": "rescript build -w",
     "dev": "rescript build -w",
-    "test": "rescript build",
+    "test": "rescript build -with-deps",
     "build:reacticons": "node tools/extract-react-icons.js",
     "build:datetimeinput": "node tools/build-datepicker-style.js",
     "storybook": "STORYBOOK=true start-storybook -p 6006 --no-manager-cache",
@@ -24,20 +24,20 @@
   "dependencies": {
     "@colisweb/react-day-picker": "7.4.16",
     "@reach/accordion": "0.16.1",
-    "@reach/alert-dialog": "0.16.0",
+    "@reach/alert-dialog": "0.16.2",
     "@reach/auto-id": "0.16.0",
-    "@reach/combobox": "0.16.1",
-    "@reach/dialog": "0.16.0",
-    "@reach/disclosure": "0.16.0",
-    "@reach/listbox": "0.16.1",
-    "@reach/menu-button": "0.16.1",
-    "@reach/popover": "0.16.0",
-    "@reach/portal": "0.16.0",
-    "@reach/tabs": "0.16.1",
-    "@reach/tooltip": "0.16.0",
+    "@reach/combobox": "0.16.5",
+    "@reach/dialog": "0.16.2",
+    "@reach/disclosure": "0.16.2",
+    "@reach/listbox": "0.16.2",
+    "@reach/menu-button": "0.16.2",
+    "@reach/popover": "0.16.2",
+    "@reach/portal": "0.16.2",
+    "@reach/tabs": "0.16.4",
+    "@reach/tooltip": "0.16.2",
     "@reach/visually-hidden": "0.16.0",
     "@rescript/react": "0.10.3",
-    "autoprefixer": "10.3.6",
+    "autoprefixer": "10.4.0",
     "axios": "0.24.0",
     "bs-axios": "0.0.43",
     "bs-css": "13.4.0",
@@ -45,36 +45,34 @@
     "case": "1.6.3",
     "click-outside-hook": "1.1.0",
     "copy-to-clipboard": "3.3.1",
-    "date-fns": "2.24.0",
+    "date-fns": "2.27.0",
     "decco": "1.5.0",
     "dedent": "0.7.0",
     "downshift": "5.2.5",
-    "highlight.js": "10.7.2",
     "lenses-ppx": "6.1.10",
     "list-selectors": "2.0.0",
-    "postcss": "8.2.13",
+    "postcss": "8.4.5",
     "postcss-loader": "4.2.0",
     "postcss-preset-env": "6.7.0",
-    "prismjs": "1.23.0",
-    "react-datepicker": "3.8.0",
+    "prismjs": "1.25.0",
     "react-icons": "4.3.1",
-    "react-select": "4.3.1",
+    "react-select": "5.2.1",
     "react-table": "7.7.0",
     "react-use": "17.3.1",
-    "reason-promise": "1.1.4",
+    "reason-promise": "1.1.5",
     "reason-react": "0.9.1",
     "reschema": "1.3.1",
     "rescript": "9.1.4",
     "rescript-classnames": "6.0.0",
-    "rescript-logger": "2.0.0",
-    "rescript-react-update": "4.0.0",
+    "rescript-logger": "2.0.2",
+    "rescript-react-update": "5.0.0",
     "restorative": "0.4.0-beta.1",
-    "string.prototype.matchall": "4.0.5",
-    "swr": "1.0.1",
-    "tailwindcss": "2.2.19"
+    "swr": "1.1.1",
+    "tailwindcss": "3.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.16.0",
+    "highlight.js": "11.3.1",
+    "@babel/core": "7.16.5",
     "@storybook/addon-actions": "6.1.21",
     "@storybook/addon-essentials": "6.1.21",
     "@storybook/addon-knobs": "6.1.21",
@@ -82,11 +80,11 @@
     "@storybook/addons": "6.1.21",
     "@storybook/react": "6.1.21",
     "@storybook/theming": "6.1.21",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.2.3",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-is": "17.0.2",
-    "sass": "1.42.1"
+    "sass": "1.45.0"
   }
 }

package/postcss.config.js

@@ -1,6 +1,5 @@
 const path = require("path");
 const glob = require("glob");
-const matchAll = require("string.prototype.matchall");
 
 const tailwindConfig = path.join(__dirname, "src/tailwind/tailwind.config.js");
 

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/tailwind/tailwind.config.js

@@ -1,55 +1,6 @@
-const { colors: defaultColors } = require("tailwindcss/defaultTheme");
-const plugin = require("tailwindcss/plugin");
-
-const flexGapPlugin = plugin(({ addUtilities, theme, variants }) => {
-  const newUtilities = Object.keys(theme("spacing")).reduce(
-    (acc, key) => ({
-      ...acc,
-      [`.flex-gap-${key}`]: {
-        marginBottom: "-" + theme(`spacing.${key}`),
-        marginLeft: "-" + theme(`spacing.${key}`),
-        [` > *`]: {
-          paddingBottom: theme(`spacing.${key}`),
-          paddingLeft: theme(`spacing.${key}`),
-        },
-      },
-      [`.flex-col-gap-${key}`]: {
-        marginLeft: "-" + theme(`spacing.${key}`),
-        [` > *`]: {
-          paddingLeft: theme(`spacing.${key}`),
-        },
-      },
-      [`.flex-row-gap-${key}`]: {
-        marginBottom: "-" + theme(`spacing.${key}`),
-        [` > *`]: {
-          paddingBottom: theme(`spacing.${key}`),
-        },
-      },
-    }),
-    {}
-  );
-
-  addUtilities(newUtilities, variants("flexGap"));
-});
-
-const boxShadowColorPlugin = plugin(({ addUtilities, theme, variants }) => {
-  const newUtilities = Object.keys(theme("colors")).reduce(
-    (acc, key) =>
-      theme("colors")[key][500]
-        ? {
-            ...acc,
-            [`.shadow-${key}-500`]: {
-              boxShadow: `${theme("colors")[key][500]} 0px 0px 0px 1px;`,
-            },
-          }
-        : acc,
-    {}
-  );
-  addUtilities(newUtilities, variants("boxShadowColor"));
-});
+const defaultColors = require("tailwindcss/colors");
 
 module.exports = {
-  mode: "jit",
   theme: {
     extend: {
       screens: {
@@ -189,29 +140,7 @@ module.exports = {
       },
     },
   },
-
-  variants: {
-    textColor: ["responsive", "hover", "focus", "disabled"],
-    backgroundColor: [
-      "responsive",
-      "hover",
-      "focus",
-      "disabled",
-      "active",
-      "even",
-    ],
-    margin: ["responsive", "last"],
-    padding: ["responsive", "last"],
-    borderWidth: ["responsive", "last"],
-    zIndex: ["responsive", "focus"],
-    width: ["responsive", "hover"],
-    overflow: ["responsive", "hover"],
-    /* Custom */
-    flexGap: ["responsive"],
-    boxShadowColor: ["responsive", "hover", "focus"],
-  },
-  plugins: [flexGapPlugin, boxShadowColorPlugin],
-  purge: [
+  content: [
     "public/index.html",
     "lib/es6_global/src/**/**.js",
     "src/**/**.js",

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/ui/Toolkit__Ui_Table.res

@@ -60,7 +60,8 @@ module Core = {
                         className="px-2 pt-2 border-b border-r border-gray-300 h-20"
                         key={"thead-thd" ++ index->Int.toString}>
                         <Toolkit__Ui_Spread props={column.getSortByToggleProps()}>
-                          <p className="font-semibold text-sm mb-1 text-primary-800 pr-2 relative">
+                          <div
+                            className="font-semibold text-sm mb-1 text-primary-800 pr-2 relative">
                             {column.render("header", ())}
                             {column.isSorted
                               ? column.isSortedDesc->Option.mapWithDefault(React.null, v =>
@@ -71,7 +72,7 @@ module Core = {
                                   </span>
                                 )
                               : React.null}
-                          </p>
+                          </div>
                         </Toolkit__Ui_Spread>
                         <Toolkit__Ui_Spread props={column.getResizerProps()}>
                           <div className={"resizer" ++ (column.isResizing ? " isResizing" : "")} />

package/src/ui/styles.css

@@ -225,10 +225,11 @@ iframe:not([tabindex="-1"]):focus,
 
 .cw-Tabs [data-selected] {
   background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
-  @apply text-white;
+  color: white;
 }
 .cw-Tabs [data-selected]:hover {
-  @apply text-white bg-primary-500;
+  color: white;
+  @apply bg-primary-500;
 }
 
 .cw-Tabs [data-reach-tab] {