@bigbinary/neeto-commons-frontend 2.0.9 → 2.0.10

package/README.md

@@ -7,7 +7,7 @@ The commons frontend library for Neeto Applications.
 Install from npm:
 
 ```bash
-yarn add "@bigbinary/neeto-commons-frontend@2.0.9"
+yarn add "@bigbinary/neeto-commons-frontend@2.0.10"
 ```
 
 This package relies on the host project's tailwind configuration. So add

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -47,7 +47,9 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@bigbinary/neeto-icons": "^1.8.35",
-    "@bigbinary/neetoui": "^3.5.16",
+    "@bigbinary/neetoui": "^4.0.0",
+    "antd": "4.18.7",
+    "react-toastify": "^9.0.8",
     "@honeybadger-io/react": "2.0.1",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
@@ -96,7 +98,7 @@
   "dependencies": {},
   "peerDependencies": {
     "@bigbinary/neeto-icons": "^1.8.35",
-    "@bigbinary/neetoui": "^3.5.16",
+    "@bigbinary/neetoui": "^4.0.0",
     "@honeybadger-io/react": "2.0.1",
     "axios": "^0.27.2",
     "dayjs": "1.11.1",

package/react-utils.cjs.js

@@ -108,7 +108,8 @@ var DateFormat = ramda.fromPairs(ramda.keys(timeFormat).map(function (key) {
         _ref$typographyProps = _ref.typographyProps,
         typographyProps = _ref$typographyProps === void 0 ? {} : _ref$typographyProps;
     var dateDisplay = /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends$3({
-      component: "span"
+      component: "span",
+      style: "body2"
     }, typographyProps), timeFormat[key](date));
     return key === "extended" ? dateDisplay : /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, _extends$3({
       position: "top",
@@ -239,24 +240,19 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var _excluded = ["component", "condition", "path", "redirectRoute"];
+var _excluded = ["condition", "redirectRoute"];
 
 var PrivateRoute = function PrivateRoute(_ref) {
-  var Component = _ref.component,
-      condition = _ref.condition,
-      path = _ref.path,
+  var _ref$condition = _ref.condition,
+      condition = _ref$condition === void 0 ? globalProps.authenticated : _ref$condition,
       redirectRoute = _ref.redirectRoute,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  if (!condition) return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Redirect, {
+  return condition ? /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, props) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Redirect, {
     to: {
       pathname: redirectRoute
     }
   });
-  return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Route, _extends$3({
-    path: path,
-    component: Component
-  }, props));
 };
 
 function _arrayWithHoles(arr) {
@@ -470,6 +466,43 @@ var useFuncDebounce = function useFuncDebounce(func) {
   return debouncedFunc;
 };
 
+var useForceUpdate = function useForceUpdate() {
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      setValue = _useState2[1];
+
+  return function () {
+    return setValue(function (value) {
+      return value + 1;
+    });
+  };
+};
+
+var useIsElementVisibleInDom = function useIsElementVisibleInDom(target) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIntersecting = _useState2[0],
+      setIntersecting = _useState2[1];
+
+  var forceUpdate = useForceUpdate();
+  React.useEffect(function () {
+    if (!target) return forceUpdate();
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+
+      return setIntersecting(entry.isIntersecting);
+    }, options);
+    observer.observe(target);
+    return function () {
+      return observer.unobserve(target);
+    };
+  }, [target, options]);
+  return isIntersecting;
+};
+
 var getStorageValue = function getStorageValue(key, defaultValue) {
   var saved = localStorage.getItem(key);
   return JSON.parse(saved) || defaultValue;
@@ -682,7 +715,10 @@ var SvgNeetoLogo = function SvgNeetoLogo(props) {
   })))));
 };
 
-var ErrorPage = function ErrorPage() {
+var ErrorPage = function ErrorPage(_ref) {
+  var _ref$homeUrl = _ref.homeUrl,
+      homeUrl = _ref$homeUrl === void 0 ? "/" : _ref$homeUrl;
+
   var _useTranslation = reactI18next.useTranslation(),
       t = _useTranslation.t;
 
@@ -710,7 +746,7 @@ var ErrorPage = function ErrorPage() {
     className: "flex flex-row items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     style: "primary",
-    href: "/",
+    href: homeUrl,
     size: "large",
     label: t("neetoCommons.errorPage.goToHome")
   }))))));
@@ -1157,11 +1193,11 @@ function SignInForm(_ref) {
   var handleFormSubmit = _ref.handleFormSubmit;
 
   var emailFromSearchParams = function emailFromSearchParams() {
-    return new URLSearchParams(window.location.href).get("email");
+    return new URLSearchParams(window.location.search).get("email") || "";
   };
 
   var emailPrefilledInitialValues = function emailPrefilledInitialValues() {
-    return ramda.assocPath(["user", "email"], emailFromSearchParams() || "", INITIAL_FORM_VALUES);
+    return ramda.assoc("email", emailFromSearchParams(), INITIAL_FORM_VALUES);
   };
 
   if (formik.Button === undefined) {
@@ -1312,6 +1348,7 @@ exports.TimeFormat = TimeFormat;
 exports.createContext = createContext;
 exports.useDebounce = useDebounce;
 exports.useFuncDebounce = useFuncDebounce;
+exports.useIsElementVisibleInDom = useIsElementVisibleInDom;
 exports.useLocalStorage = useLocalStorage;
 exports.useOnClickOutside = useOnClickOutside;
 exports.usePrevious = usePrevious;

package/react-utils.d.ts

@@ -10,7 +10,7 @@ export const HoneybadgerErrorBoundary: React.FC<{
 }>;
 export function PrivateRoute(
   props: {
-    condition: boolean;
+    condition?: boolean;
     redirectRoute: string;
   } & RouteProps
 ): JSX.Element;
@@ -36,11 +36,17 @@ export const Sidebar: React.FC<{
   showAppSwitcher?: boolean;
 }>;
 
+type OptionsType = {
+  root?: Element | null,
+  rootMargin?: String,
+  threshold?: Number | Number[]
+}
+export function useIsElementVisibleInDom(target: Element | null, options?: OptionsType): Boolean
 export function useDebounce<T>(value: T, delay?: number): T;
 export function useFuncDebounce<F extends Function>(
   func: F,
   delay?: number
-): (F & { cancel: () => void };
+): F & { cancel: () => void };
 export function useLocalStorage<T>(
   key: string,
   initialValue?: T
@@ -72,7 +78,7 @@ export function createContext<T>(
   useContext: [T, (action: ActionType<T>) => void];
 };
 
-export const ErrorPage: React.FC<{}>;
+export const ErrorPage: React.FC<{ homeUrl?: string }>;
 export const LoginPage: React.FC<{
   handleSubmit: (data: {
     user: {

package/react-utils.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef, useReducer } from 'react';
 import { Typography, Tooltip, Button, Toastr } from '@bigbinary/neetoui';
-import { fromPairs, keys, values, mergeLeft, toLower, not, isNil, assocPath } from 'ramda';
+import { fromPairs, keys, values, mergeLeft, toLower, not, isNil, assoc } from 'ramda';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import { Honeybadger, HoneybadgerErrorBoundary as HoneybadgerErrorBoundary$1 } from '@honeybadger-io/react';
 import { useTranslation } from 'react-i18next';
-import { Redirect, Route, useLocation } from 'react-router-dom';
+import { Route, Redirect, useLocation } from 'react-router-dom';
 import { Settings, LeftArrow, Help, User } from '@bigbinary/neeto-icons';
 import { Sidebar as Sidebar$1, AppSwitcher } from '@bigbinary/neetoui/layouts';
 import i18next from 'i18next';
@@ -76,7 +76,8 @@ var DateFormat = fromPairs(keys(timeFormat).map(function (key) {
         _ref$typographyProps = _ref.typographyProps,
         typographyProps = _ref$typographyProps === void 0 ? {} : _ref$typographyProps;
     var dateDisplay = /*#__PURE__*/React__default.createElement(Typography, _extends$3({
-      component: "span"
+      component: "span",
+      style: "body2"
     }, typographyProps), timeFormat[key](date));
     return key === "extended" ? dateDisplay : /*#__PURE__*/React__default.createElement(Tooltip, _extends$3({
       position: "top",
@@ -207,24 +208,19 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var _excluded = ["component", "condition", "path", "redirectRoute"];
+var _excluded = ["condition", "redirectRoute"];
 
 var PrivateRoute = function PrivateRoute(_ref) {
-  var Component = _ref.component,
-      condition = _ref.condition,
-      path = _ref.path,
+  var _ref$condition = _ref.condition,
+      condition = _ref$condition === void 0 ? globalProps.authenticated : _ref$condition,
       redirectRoute = _ref.redirectRoute,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  if (!condition) return /*#__PURE__*/React__default.createElement(Redirect, {
+  return condition ? /*#__PURE__*/React__default.createElement(Route, props) : /*#__PURE__*/React__default.createElement(Redirect, {
     to: {
       pathname: redirectRoute
     }
   });
-  return /*#__PURE__*/React__default.createElement(Route, _extends$3({
-    path: path,
-    component: Component
-  }, props));
 };
 
 function _arrayWithHoles(arr) {
@@ -438,6 +434,43 @@ var useFuncDebounce = function useFuncDebounce(func) {
   return debouncedFunc;
 };
 
+var useForceUpdate = function useForceUpdate() {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      setValue = _useState2[1];
+
+  return function () {
+    return setValue(function (value) {
+      return value + 1;
+    });
+  };
+};
+
+var useIsElementVisibleInDom = function useIsElementVisibleInDom(target) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIntersecting = _useState2[0],
+      setIntersecting = _useState2[1];
+
+  var forceUpdate = useForceUpdate();
+  useEffect(function () {
+    if (!target) return forceUpdate();
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+
+      return setIntersecting(entry.isIntersecting);
+    }, options);
+    observer.observe(target);
+    return function () {
+      return observer.unobserve(target);
+    };
+  }, [target, options]);
+  return isIntersecting;
+};
+
 var getStorageValue = function getStorageValue(key, defaultValue) {
   var saved = localStorage.getItem(key);
   return JSON.parse(saved) || defaultValue;
@@ -650,7 +683,10 @@ var SvgNeetoLogo = function SvgNeetoLogo(props) {
   })))));
 };
 
-var ErrorPage = function ErrorPage() {
+var ErrorPage = function ErrorPage(_ref) {
+  var _ref$homeUrl = _ref.homeUrl,
+      homeUrl = _ref$homeUrl === void 0 ? "/" : _ref$homeUrl;
+
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
@@ -678,7 +714,7 @@ var ErrorPage = function ErrorPage() {
     className: "flex flex-row items-center justify-center"
   }, /*#__PURE__*/React__default.createElement(Button, {
     style: "primary",
-    href: "/",
+    href: homeUrl,
     size: "large",
     label: t("neetoCommons.errorPage.goToHome")
   }))))));
@@ -1125,11 +1161,11 @@ function SignInForm(_ref) {
   var handleFormSubmit = _ref.handleFormSubmit;
 
   var emailFromSearchParams = function emailFromSearchParams() {
-    return new URLSearchParams(window.location.href).get("email");
+    return new URLSearchParams(window.location.search).get("email") || "";
   };
 
   var emailPrefilledInitialValues = function emailPrefilledInitialValues() {
-    return assocPath(["user", "email"], emailFromSearchParams() || "", INITIAL_FORM_VALUES);
+    return assoc("email", emailFromSearchParams(), INITIAL_FORM_VALUES);
   };
 
   if (Button$1 === undefined) {
@@ -1270,4 +1306,4 @@ function SignIn(_ref) {
   })));
 }
 
-export { DateFormat, ErrorPage, HoneybadgerErrorBoundary, SignIn as LoginPage, PrivateRoute, Sidebar, TimeFormat, createContext, useDebounce, useFuncDebounce, useLocalStorage, useOnClickOutside, usePrevious, useUpdateEffect };
+export { DateFormat, ErrorPage, HoneybadgerErrorBoundary, SignIn as LoginPage, PrivateRoute, Sidebar, TimeFormat, createContext, useDebounce, useFuncDebounce, useIsElementVisibleInDom, useLocalStorage, useOnClickOutside, usePrevious, useUpdateEffect };

package/utils.cjs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var axios = require('axios');
 var ramda = require('ramda');
+var neetoui = require('@bigbinary/neetoui');
 var i18next = require('i18next');
 var require$$0 = require('util');
 var dayjs = require('dayjs');
@@ -2633,8 +2634,6 @@ var copyToClipboard = /*#__PURE__*/function () {
         showToastr,
         _ref2$message,
         message,
-        _require,
-        Toastr,
         textArea,
         _args = arguments;
 
@@ -2643,27 +2642,21 @@ var copyToClipboard = /*#__PURE__*/function () {
         switch (_context.prev = _context.next) {
           case 0:
             _ref2 = _args.length > 1 && _args[1] !== undefined ? _args[1] : {}, _ref2$showToastr = _ref2.showToastr, showToastr = _ref2$showToastr === void 0 ? true : _ref2$showToastr, _ref2$message = _ref2.message, message = _ref2$message === void 0 ? i18next__default["default"].t("neetoCommons.toastr.success.copiedToClipboard") : _ref2$message;
-
-            /*
-              This is a workaround to prevent the jest tests from failing. Once the issue in neetoUI
-              https://github.com/bigbinary/neeto-ui/issues/1175 is resolved, this import can be moved to the top of the file.
-              */
-            _require = require("@bigbinary/neetoui"), Toastr = _require.Toastr;
-            _context.prev = 2;
+            _context.prev = 1;
 
             if (!(navigator.clipboard && window.isSecureContext)) {
-              _context.next = 8;
+              _context.next = 7;
               break;
             }
 
-            _context.next = 6;
+            _context.next = 5;
             return navigator.clipboard.writeText(text);
 
-          case 6:
-            _context.next = 18;
+          case 5:
+            _context.next = 17;
             break;
 
-          case 8:
+          case 7:
             textArea = document.createElement("textarea");
             textArea.value = text;
             textArea.style.top = "0";
@@ -2675,22 +2668,22 @@ var copyToClipboard = /*#__PURE__*/function () {
             document.execCommand("copy");
             document.body.removeChild(textArea);
 
-          case 18:
-            showToastr && Toastr.success(message);
-            _context.next = 24;
+          case 17:
+            showToastr && neetoui.Toastr.success(message);
+            _context.next = 23;
             break;
 
-          case 21:
-            _context.prev = 21;
-            _context.t0 = _context["catch"](2);
-            Toastr.error(_context.t0);
+          case 20:
+            _context.prev = 20;
+            _context.t0 = _context["catch"](1);
+            neetoui.Toastr.error(_context.t0);
 
-          case 24:
+          case 23:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[2, 21]]);
+    }, _callee, null, [[1, 20]]);
   }));
 
   return function copyToClipboard(_x) {

package/utils.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { values, curry, toPairs, pipe, omit, isEmpty } from 'ramda';
+import { Toastr } from '@bigbinary/neetoui';
 import i18next from 'i18next';
 import require$$0 from 'util';
 import dayjs from 'dayjs';
@@ -2620,8 +2621,6 @@ var copyToClipboard = /*#__PURE__*/function () {
         showToastr,
         _ref2$message,
         message,
-        _require,
-        Toastr,
         textArea,
         _args = arguments;
 
@@ -2630,27 +2629,21 @@ var copyToClipboard = /*#__PURE__*/function () {
         switch (_context.prev = _context.next) {
           case 0:
             _ref2 = _args.length > 1 && _args[1] !== undefined ? _args[1] : {}, _ref2$showToastr = _ref2.showToastr, showToastr = _ref2$showToastr === void 0 ? true : _ref2$showToastr, _ref2$message = _ref2.message, message = _ref2$message === void 0 ? i18next.t("neetoCommons.toastr.success.copiedToClipboard") : _ref2$message;
-
-            /*
-              This is a workaround to prevent the jest tests from failing. Once the issue in neetoUI
-              https://github.com/bigbinary/neeto-ui/issues/1175 is resolved, this import can be moved to the top of the file.
-              */
-            _require = require("@bigbinary/neetoui"), Toastr = _require.Toastr;
-            _context.prev = 2;
+            _context.prev = 1;
 
             if (!(navigator.clipboard && window.isSecureContext)) {
-              _context.next = 8;
+              _context.next = 7;
               break;
             }
 
-            _context.next = 6;
+            _context.next = 5;
             return navigator.clipboard.writeText(text);
 
-          case 6:
-            _context.next = 18;
+          case 5:
+            _context.next = 17;
             break;
 
-          case 8:
+          case 7:
             textArea = document.createElement("textarea");
             textArea.value = text;
             textArea.style.top = "0";
@@ -2662,22 +2655,22 @@ var copyToClipboard = /*#__PURE__*/function () {
             document.execCommand("copy");
             document.body.removeChild(textArea);
 
-          case 18:
+          case 17:
             showToastr && Toastr.success(message);
-            _context.next = 24;
+            _context.next = 23;
             break;
 
-          case 21:
-            _context.prev = 21;
-            _context.t0 = _context["catch"](2);
+          case 20:
+            _context.prev = 20;
+            _context.t0 = _context["catch"](1);
             Toastr.error(_context.t0);
 
-          case 24:
+          case 23:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[2, 21]]);
+    }, _callee, null, [[1, 20]]);
   }));
 
   return function copyToClipboard(_x) {