@bydata/react-supertabs 1.1.0

package/README.md

@@ -0,0 +1,257 @@
+# React SuperTabs
+
+**SuperTabs** is a powerful and user-friendly tab management component. It enables seamless navigation by opening modules as tabs, with support for sub-tabs, smooth transitions. An experimental _keep-alive_ feature ensures components stay active across tab switches for enhanced usability.
+
+### SuperTabs Features
+------
+-   **Tab-based Navigation**: Open modules as tabs for an intuitive and efficient navigation experience.
+-   **Sub-Tabs Support**: Create nested sub-tabs within a main tab for hierarchical organization.
+-   **Smooth Transitions**: Enjoy a polished user experience with fluid tab-switching animations.
+-   **Keep-Alive (Experimental)**: Maintain the state of components across tab switches for seamless interaction (experimental feature).
+
+### Installation and usage
+------
+
+#### Basic
+
+>**Import TabProvider and wrap it around the main wrapper**
+
+ - This is needed to access useTabContext.
+ - Make sure to pass `SITE_PREFIX` and `SITE_PAGES` (From Navigation.js)
+ - `homeUrl` is optional and defaults to "/"
+ - `persistTabsAfterLogin` is optional and defaults to "false"
+    - Used to preserve tab state upon login.
+ - `entityIdentifierKey` is optional and defaults to 'organization_id',
+    - Used to identify the organization / client id
+ - `preventHomeRedirect` is optional and defaults to false,
+    - This will open a menu on click of home button instead of redirecting 
+ - `handleOpenTab` async function to open the tab in backend
+    - expects the following keys in return
+    - { status: 1, tabId, children: undefined }
+ - `handleCloseTab` async function to open the tab in backend
+    - expects the following keys in return
+    - { status: 1, current_tab_id: 123 }
+ - `handleReorderTabs` async function to open the tab in backend
+    - { status: 1 }
+ - `getTabs` async function to open the tab in backend async () => { },
+    - expects the following keys in return
+    - { status: 1, tabs: [], current_tab: {} || null, hasNoTabs }
+    - hasNoTabs = user for whom there are no tabs open
+ - `getUserDetails` function which return the user details from user token
+ - `hasPrivilege` function which checks if the user has the privilege passed in function param
+ - `alertService` An object containing different methods for displaying toast alerts.
+    - can call success, warning, error, info, alert methods.
+    - super-notifier - NPM package can be used here
+    - https://www.npmjs.com/package/super-notifier
+
+```
+Eg. 
+const SITE_PREFIX = 'teamLink_'
+const API_BASE_URL = 'https://api.teamlink.com/data_stream'
+const SITE_PAGES = [{
+	title:  "Organization",
+	url:  "/app/organization",
+	privilege:  "ORGANIZATION",
+	id:  1,
+},
+{
+	title:  "Recruiter",
+	url:  "/app/recruiter/f-home",
+	privilege:  "RECRUITER",
+	showAddButton:  true,
+    customAddButtons: [
+      {
+        name: "Data Grid",
+        id: 1,
+      },
+      {
+        name: "Trend Master",
+        id: 2,
+      }
+    ],
+	containsSubTabs:  true,
+	id:  2,
+}]
+
+// showAddButton - can be added if the module needs plus button.
+// containsSubTabs - can be added if the tab includes sub tabs.
+// customAddButtons - These buttons will be added in the sub tab list. Clicking on the button will trigger the binded callback with object as param.
+
+import { TabProvider } from 'components/SuperTabs/TabContext';
+<TabProvider
+    SITE_PREFIX={SITE_PREFIX}
+    SITE_PAGES={SITE_PAGES}
+    homeUrl="/app"
+    getTabs={getTabs}
+    handleOpenTab={handleOpenTab}
+    handleCloseTab={handleCloseTab}
+    handleReorderTabs={handleReorderTabs}
+    alertService={alertService}
+>
+    <Main />
+</TabProvider>
+```
+
+>**Render the component within the App's header**
+```
+import { useTabContext } from "components/SuperTabs/TabContext";
+
+<header>
+    <SuperTabs />
+</header>
+```
+
+>**Wrap the hyperlink as follows:**
+
+Each tab should contain all the necessary information to be stored.
+
+Mandatory Fields:
+-   `id`
+-   `name`
+-   `url`
+
+For Avatar:
+-   `showAvatar` must be set to `true`
+-   The following fields must be provided:
+    -   `firstName`
+    -   `lastName`
+    -   `imgSrc`
+
+```
+// Tab object Examples
+
+{
+    id: 1,
+    name: 'title',
+    url: '/recruiter/f-1`
+}
+
+{
+    id: 100,
+    url: '/profile/100`
+    firstName: 'John',
+    lastName: 'Doe',
+    showAvatar: true,
+    imgSrc: img_url,
+    department,
+    designation,
+    department_id,
+}
+```
+```
+import SuperLink from "components/SuperTabs/SuperLink";
+<SuperLink tab={page} isSubTab={false}>
+    {page.title}
+</SuperLink>
+```
+
+OR
+
+```
+import { useTabContext } from "components/SuperTabs/TabContext";
+const { openSuperTabOnRowClick } = useTabContext();
+
+function handleRowClick(e) {
+    const tab = { id: e.id, name: e.name, url: `/recruiter/f-${e.id}` };
+    // isSubTab defaults to true
+    openSuperTabOnRowClick({ tab, isSubTab });
+}
+```
+
+>**Bind the callback for the plus button to each module during the initial render.**
+
+If a module requires a plus button for adding a new tab, you can include the following:
+```
+import { emitter } from "components/SuperTabs/SuperTabs";
+import { useTabContext } from "components/SuperTabs/TabContext";
+
+const { openSuperTabOnRowClick } = useTabContext();
+
+const handleTabAddBtn = useCallback(() => {
+    openSuperTabOnRowClick({
+        tab: {
+            id: 123,
+            name: `New Funnel`,
+            url: `/recruiter/f-${123}`,
+        },
+        isSubTab: true,
+    });
+}, [openSuperTabOnRowClick]);
+
+useEffect(() => {
+    const unsub = emitter.emit("bindCallback", {
+        id: 2, // Same id provided for this module in navigation.js
+        callback: handleTabAddBtn,
+    });
+    return unsub;
+}, [handleTabAddBtn]);
+```
+
+> Note: The logo of the home tab can be updated by targeting the `brand-logo` class.
+
+-----
+
+#### Advanced
+
+>**Cleanup**
+
+When a tab is closed, it may be necessary to clean up some data. The `superTabClose` event can be utilized for this purpose.
+
+```
+import { emitter } from  'components/SuperTabs/SuperTabs';
+
+useEffect(() => {
+	const  unsub  =  emitter.subscribe('superTabClose', ({ appId, isSubTab, tab }) => {
+		// Same id provided for this module in navigation.js
+		if (appId === 2 && isSubTab) {
+			// handle clean up here
+		}
+	})
+	return unsub;
+}, []);
+```
+
+>**Not Available page**
+- If a profile is deleted, the tab will remain open. To address this, we can display a "Page Not Available" message.
+
+```
+import  NotAvailable  from  'components/SuperTabs/NotAvailable';
+
+<NotAvailable  subTabName='Profile' />
+```
+
+>**Keep Alive  (Experimental)**
+
+```
+import { withKeepAlive } from  "components/SuperTabs/KeepAlive";
+
+// Same id provided for this module in navigation.js
+export  default  withKeepAlive(Component, Unique ID);
+
+Eg.
+const  Component  = () => {
+	return <div>Component</div>
+}
+
+export  default  withKeepAlive(Component, 2);
+```
+Keep Alive Cleanup
+```
+// This can be incorporated into a component that is always rendered, such as the header.
+
+import { useAliveScope } from  "components/SuperTabs/KeepAlive";
+import  { emitter } from  "components/SuperTabs/SuperTabs";
+
+const { drop } =  useAliveScope();
+
+useEffect(() => {
+	const unsub = emitter.subscribe('superTabClose', (e) => {
+		const { appId, isSubTab } =  e;
+		if (appId && !isSubTab) {
+			// drop the cache of the tab
+			drop(appId);
+		}
+	})
+	return unsub;
+}, []);
+```

package/dist/ClickOutsideListener.js

@@ -0,0 +1,72 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var ClickOutsideListener = exports["default"] = /*#__PURE__*/function (_React$Component) {
+  function ClickOutsideListener(props) {
+    var _this;
+    _classCallCheck(this, ClickOutsideListener);
+    _this = _callSuper(this, ClickOutsideListener, [props]);
+    _this.domRef = /*#__PURE__*/_react["default"].createRef();
+    _this.listener = _this.listener.bind(_this);
+    return _this;
+  }
+  _inherits(ClickOutsideListener, _React$Component);
+  return _createClass(ClickOutsideListener, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.listener, true);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.listener, true);
+    }
+  }, {
+    key: "isClickedOutside",
+    value: function isClickedOutside(e) {
+      // e.stopPropagation();
+      // If the event target doesn't match bail - analysis view - save and filter panel fix
+      // if(e.target.matches('button') || e.target.matches('svg') || e.target.matches('rect') || e.target.matches('polyline') || e.target.matches('span')) return false;
+      // console.log(e.target);
+      // console.log(this.domRef.current);
+      // console.log(this.domRef.current.contains(e.target));
+
+      if (this.domRef.current && !this.domRef.current.contains(e.target)) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "listener",
+    value: function listener(e) {
+      if (this.isClickedOutside(e)) {
+        this.props.onOutsideClick(e);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.domRef
+      }, this.props.children);
+    }
+  }]);
+}(_react["default"].Component);

package/dist/Constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transitionDurationExtended = exports.transitionDuration = exports.fontStyle = exports.ToolbarButtonWidth = exports.SubTabWrapperPadding = exports.SubTabPadding = exports.SubTabGap = exports.StackButtonWidth = exports.MarginLeft = exports.MainTabGap = exports.HomeTabWidth = exports.CloseButtonWidth = exports.AvatarSize = void 0;
+var transitionDuration = exports.transitionDuration = 300;
+var transitionDurationExtended = exports.transitionDurationExtended = 800;
+var HomeTabWidth = exports.HomeTabWidth = 36;
+var MainTabGap = exports.MainTabGap = 2;
+var SubTabGap = exports.SubTabGap = 6;
+var MarginLeft = exports.MarginLeft = 5;
+var SubTabPadding = exports.SubTabPadding = 20;
+var SubTabWrapperPadding = exports.SubTabWrapperPadding = MarginLeft * 2;
+var StackButtonWidth = exports.StackButtonWidth = 32 + MarginLeft;
+var AvatarSize = exports.AvatarSize = 20 + SubTabGap;
+var ToolbarButtonWidth = exports.ToolbarButtonWidth = 24;
+var CloseButtonWidth = exports.CloseButtonWidth = 20; // 24-4px is for the right padding adjustment
+
+var fontStyle = exports.fontStyle = '600 12px "Open Sans", "Poppins", sans-serif'; // "same as supertabs.scss global font style"

package/dist/NotAvailable.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _TabContext = require("./TabContext");
+var _Utils = require("./Utils");
+require("./NotAvailable.scss");
+var NotAvailable = function NotAvailable(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    _ref$subTabName = _ref.subTabName,
+    subTabName = _ref$subTabName === void 0 ? 'Page' : _ref$subTabName;
+  var _useTabContext = (0, _TabContext.useTabContext)(),
+    activeSubTab = _useTabContext.activeSubTab;
+  var heading = title !== null && title !== void 0 ? title : (0, _Utils.getTitle)(activeSubTab);
+  var subHeading = description !== null && description !== void 0 ? description : "".concat(subTabName, " is not available");
+  return /*#__PURE__*/React.createElement("div", {
+    className: "not-availble-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "not-available-content"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "title"
+  }, heading.replace('Loading...', 'Untitled')), /*#__PURE__*/React.createElement("p", {
+    className: "description"
+  }, subHeading)));
+};
+var _default = exports["default"] = NotAvailable;

package/dist/NotAvailable.scss

@@ -0,0 +1,30 @@
+.not-availble-wrapper {
+    display: grid;
+    place-items: center;
+    height: 100%;
+
+    .not-available-content {
+        display: grid;
+        justify-items: center;
+        gap: 20px;
+    }
+
+    .title,
+    .description {
+        font-family: 'Open sans', sans-serif;
+        margin: 0;
+        color: var(--tab-text-normal);
+    }
+
+    .title {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 1.5;
+    }
+
+    .description {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1;
+    }
+}

package/dist/Readme.md

@@ -0,0 +1,258 @@
+
+# SuperTabs
+
+**SuperTabs** is a powerful and user-friendly tab management component. It enables seamless navigation by opening modules as tabs, with support for sub-tabs, smooth transitions. An experimental _keep-alive_ feature ensures components stay active across tab switches for enhanced usability.
+
+### SuperTabs Features
+------
+-   **Tab-based Navigation**: Open modules as tabs for an intuitive and efficient navigation experience.
+-   **Sub-Tabs Support**: Create nested sub-tabs within a main tab for hierarchical organization.
+-   **Smooth Transitions**: Enjoy a polished user experience with fluid tab-switching animations.
+-   **Keep-Alive (Experimental)**: Maintain the state of components across tab switches for seamless interaction (experimental feature).
+
+### Installation and usage
+------
+
+#### Basic
+
+>**Import TabProvider and wrap it around the main wrapper**
+
+ - This is needed to access useTabContext.
+ - Make sure to pass `SITE_PREFIX` and `SITE_PAGES` (From Navigation.js)
+ - `homeUrl` is optional and defaults to "/"
+ - `persistTabsAfterLogin` is optional and defaults to "false"
+    - Used to preserve tab state upon login.
+ - `entityIdentifierKey` is optional and defaults to 'organization_id',
+    - Used to identify the organization / client id
+ - `preventHomeRedirect` is optional and defaults to false,
+    - This will open a menu on click of home button instead of redirecting 
+ - `handleOpenTab` async function to open the tab in backend
+    - expects the following keys in return
+    - { status: 1, tabId, children: undefined }
+ - `handleCloseTab` async function to open the tab in backend
+    - expects the following keys in return
+    - { status: 1, current_tab_id: 123 }
+ - `handleReorderTabs` async function to open the tab in backend
+    - { status: 1 }
+ - `getTabs` async function to open the tab in backend async () => { },
+    - expects the following keys in return
+    - { status: 1, tabs: [], current_tab: {} || null, hasNoTabs }
+    - hasNoTabs = user for whom there are no tabs open
+ - `getUserDetails` function which return the user details from user token
+ - `hasPrivilege` function which checks if the user has the privilege passed in function param
+ - `alertService` An object containing different methods for displaying toast alerts.
+    - can call success, warning, error, info, alert methods.
+    - super-notifier - NPM package can be used here
+    - https://www.npmjs.com/package/super-notifier
+
+```
+Eg. 
+const SITE_PREFIX = 'teamLink_'
+const API_BASE_URL = 'https://api.teamlink.com/data_stream'
+const SITE_PAGES = [{
+	title:  "Organization",
+	url:  "/app/organization",
+	privilege:  "ORGANIZATION",
+	id:  1,
+},
+{
+	title:  "Recruiter",
+	url:  "/app/recruiter/f-home",
+	privilege:  "RECRUITER",
+	showAddButton:  true,
+    customAddButtons: [
+      {
+        name: "Data Grid",
+        id: 1,
+      },
+      {
+        name: "Trend Master",
+        id: 2,
+      }
+    ],
+	containsSubTabs:  true,
+	id:  2,
+}]
+
+// showAddButton - can be added if the module needs plus button.
+// containsSubTabs - can be added if the tab includes sub tabs.
+// customAddButtons - These buttons will be added in the sub tab list. Clicking on the button will trigger the binded callback with object as param.
+
+import { TabProvider } from 'components/SuperTabs/TabContext';
+<TabProvider
+    SITE_PREFIX={SITE_PREFIX}
+    SITE_PAGES={SITE_PAGES}
+    homeUrl="/app"
+    getTabs={getTabs}
+    handleOpenTab={handleOpenTab}
+    handleCloseTab={handleCloseTab}
+    handleReorderTabs={handleReorderTabs}
+    alertService={alertService}
+>
+    <Main />
+</TabProvider>
+```
+
+>**Render the component within the App's header**
+```
+import { useTabContext } from "components/SuperTabs/TabContext";
+
+<header>
+    <SuperTabs />
+</header>
+```
+
+>**Wrap the hyperlink as follows:**
+
+Each tab should contain all the necessary information to be stored.
+
+Mandatory Fields:
+-   `id`
+-   `name`
+-   `url`
+
+For Avatar:
+-   `showAvatar` must be set to `true`
+-   The following fields must be provided:
+    -   `firstName`
+    -   `lastName`
+    -   `imgSrc`
+
+```
+// Tab object Examples
+
+{
+    id: 1,
+    name: 'title',
+    url: '/recruiter/f-1`
+}
+
+{
+    id: 100,
+    url: '/profile/100`
+    firstName: 'John',
+    lastName: 'Doe',
+    showAvatar: true,
+    imgSrc: img_url,
+    department,
+    designation,
+    department_id,
+}
+```
+```
+import SuperLink from "components/SuperTabs/SuperLink";
+<SuperLink tab={page} isSubTab={false}>
+    {page.title}
+</SuperLink>
+```
+
+OR
+
+```
+import { useTabContext } from "components/SuperTabs/TabContext";
+const { openSuperTabOnRowClick } = useTabContext();
+
+function handleRowClick(e) {
+    const tab = { id: e.id, name: e.name, url: `/recruiter/f-${e.id}` };
+    // isSubTab defaults to true
+    openSuperTabOnRowClick({ tab, isSubTab });
+}
+```
+
+>**Bind the callback for the plus button to each module during the initial render.**
+
+If a module requires a plus button for adding a new tab, you can include the following:
+```
+import { emitter } from "components/SuperTabs/SuperTabs";
+import { useTabContext } from "components/SuperTabs/TabContext";
+
+const { openSuperTabOnRowClick } = useTabContext();
+
+const handleTabAddBtn = useCallback(() => {
+    openSuperTabOnRowClick({
+        tab: {
+            id: 123,
+            name: `New Funnel`,
+            url: `/recruiter/f-${123}`,
+        },
+        isSubTab: true,
+    });
+}, [openSuperTabOnRowClick]);
+
+useEffect(() => {
+    const unsub = emitter.emit("bindCallback", {
+        id: 2, // Same id provided for this module in navigation.js
+        callback: handleTabAddBtn,
+    });
+    return unsub;
+}, [handleTabAddBtn]);
+```
+
+> Note: The logo of the home tab can be updated by targeting the `brand-logo` class.
+
+-----
+
+#### Advanced
+
+>**Cleanup**
+
+When a tab is closed, it may be necessary to clean up some data. The `superTabClose` event can be utilized for this purpose.
+
+```
+import { emitter } from  'components/SuperTabs/SuperTabs';
+
+useEffect(() => {
+	const  unsub  =  emitter.subscribe('superTabClose', ({ appId, isSubTab, tab }) => {
+		// Same id provided for this module in navigation.js
+		if (appId === 2 && isSubTab) {
+			// handle clean up here
+		}
+	})
+	return unsub;
+}, []);
+```
+
+>**Not Available page**
+- If a profile is deleted, the tab will remain open. To address this, we can display a "Page Not Available" message.
+
+```
+import  NotAvailable  from  'components/SuperTabs/NotAvailable';
+
+<NotAvailable  subTabName='Profile' />
+```
+
+>**Keep Alive  (Experimental)**
+
+```
+import { withKeepAlive } from  "components/SuperTabs/KeepAlive";
+
+// Same id provided for this module in navigation.js
+export  default  withKeepAlive(Component, Unique ID);
+
+Eg.
+const  Component  = () => {
+	return <div>Component</div>
+}
+
+export  default  withKeepAlive(Component, 2);
+```
+Keep Alive Cleanup
+```
+// This can be incorporated into a component that is always rendered, such as the header.
+
+import { useAliveScope } from  "components/SuperTabs/KeepAlive";
+import  { emitter } from  "components/SuperTabs/SuperTabs";
+
+const { drop } =  useAliveScope();
+
+useEffect(() => {
+	const unsub = emitter.subscribe('superTabClose', (e) => {
+		const { appId, isSubTab } =  e;
+		if (appId && !isSubTab) {
+			// drop the cache of the tab
+			drop(appId);
+		}
+	})
+	return unsub;
+}, []);
+```