@unbxd-ui/unbxd-react-components 0.3.2-beta.1 → 0.3.2-beta.3

package/components/TabsComponent/tabsCore.scss

@@ -0,0 +1,59 @@
+.RCB {
+    &-tabs-container {
+        display: flex;
+    }
+
+    &-tab-title {
+        list-style-type: none;
+        padding: 10px;
+        cursor: pointer;
+
+        &.selected {
+            background: #FFF;
+            font-weight: bold;
+            border: 1px solid #cacaca;
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &-tabs-horizontal {
+        flex-direction: column;
+        
+        .RCB-tab-title {
+            display: inline-block;
+
+            &.selected {
+                border-bottom: 0;
+                bottom: -1px;
+            }
+        }
+    }
+
+    &-tabs-vertical {
+        .RCB-tab-title {
+            display: block;
+
+            &.selected {
+                border-right: 0;
+                right: -1px;
+            }
+        }
+    }
+
+    &-tab-content {
+        list-style-type: none;
+        border: 1px solid #cacaca;
+        padding: 10px;
+
+        &.selected {
+            display: block;
+        }
+    }
+
+    &-tab-disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        color: #ccc;
+    }
+}

package/components/ToastNotification/toastNotificationCore.scss

@@ -0,0 +1,273 @@
+.notification-outer-wrapper {
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 400px;
+  width: 100%;
+
+  // Default bottom-left position
+  &.bottom-left {
+    bottom: 20px;
+    left: 30px;
+
+    @media (max-width: 768px) {
+      bottom: 10px;
+      left: 10px;
+      right: 10px;
+      max-width: none;
+    }
+  }
+
+  // Top-left position
+  &.top-left {
+    top: 20px;
+    left: 30px;
+
+    @media (max-width: 768px) {
+      top: 10px;
+      left: 10px;
+      right: 10px;
+      max-width: none;
+    }
+  }
+
+  // Top-right position
+  &.top-right {
+    top: 20px;
+    right: 30px;
+
+    @media (max-width: 768px) {
+      top: 10px;
+      left: 10px;
+      right: 10px;
+      max-width: none;
+    }
+  }
+
+  // Bottom-right position
+  &.bottom-right {
+    bottom: 20px;
+    right: 30px;
+
+    @media (max-width: 768px) {
+      bottom: 10px;
+      left: 10px;
+      right: 10px;
+      max-width: none;
+    }
+  }
+
+  // For top positions, reverse the order so newest appears at top
+  &.top-left,
+  &.top-right {
+    flex-direction: column-reverse;
+  }
+
+  // Animation direction based on position
+  &.top-left .toast,
+  &.bottom-left .toast {
+    animation: slideInFromLeft 0.3s ease-out;
+  }
+
+  &.top-right .toast,
+  &.bottom-right .toast {
+    animation: slideInFromRight 0.3s ease-out;
+  }
+}
+
+.toast {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #fff;
+  margin-bottom: 8px;
+  min-height: 56px;
+  overflow: hidden;
+
+  &.success {
+
+    background-color: #E7EFE7;
+
+    .toast-success {
+      color: #10b981;
+
+      &::before {
+        content: "✓";
+        font-weight: bold;
+      }
+    }
+  }
+
+  &.error {
+    background-color: #FFE7E7;
+
+    .toast-error {
+      color: #ef4444;
+
+      &::before {
+        content: "✕";
+        font-weight: bold;
+      }
+    }
+  }
+
+  &.warning {
+    background-color: #FFF8E7;
+
+    .toast-warn {
+      color: #f59e0b;
+
+      &::before {
+        content: "⚠";
+        font-weight: bold;
+      }
+    }
+  }
+
+  &.info {
+    background-color: #E7EDFF;
+
+    .toast-info {
+      color: #3b82f6;
+
+      &::before {
+        content: "ℹ";
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.message-icon-box {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+
+  .message {
+    color: #17173A;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+    word-break: break-word;
+    flex: 1;
+  }
+}
+
+.toast-close {
+  background: none;
+  border: none;
+  color: #17173A;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 4px;
+  margin-left: 12px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+
+  &:hover {
+    color: #6b7280;
+  }
+
+}
+
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  transition: width 0.1s linear;
+
+  &.success {
+    background: #00C48C;
+  }
+
+  &.error {
+    background: #F05C5C;
+  }
+
+  &.warning {
+    background: #D5A555;
+  }
+
+  &.info {
+    background: #3E71F2;
+  }
+}
+
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutToLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideOutToRight {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: high) {
+  .toast {
+    border-width: 2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  .notification-outer-wrapper .toast {
+    animation: none !important;
+  }
+
+  .toast-progress {
+    transition: none;
+  }
+}

package/components/Tooltip/tooltipCore.scss

@@ -0,0 +1,207 @@
+/*.RCB {
+    &-tooltip {
+        display: inline-block;
+        position: relative;
+
+        .RCB-tooltip-body {
+            &.RCB-tooltip-hover {
+                display: inline-block;
+            }
+        
+            &.RCB-tooltip-click {
+                display: inline-block;
+            }
+        }
+    }
+
+    &-tooltip-body {
+        display: none;
+        position: absolute;
+        z-index: 1;
+
+        &.RCB-tooltip-right {
+            top: -10px;
+            &:before {
+                content: " ";
+                width: 0;
+                height: 0;
+                border-top: 10px solid transparent;
+                border-bottom: 10px solid transparent;
+                border-right: 10px solid #ffffff;
+                position: absolute;
+                left: -10px;
+                filter: drop-shadow(-1px 3px 1px #e5e7e8);
+            }
+        }
+    
+        &.RCB-tooltip-left {
+            right: 34px;
+            top: -14px;
+    
+            &:after {
+                content: " ";
+                width: 0;
+                height: 0;
+                border-top: 10px solid transparent;
+                border-bottom: 10px solid transparent;
+                border-left: 10px solid #ffffff;
+                position: absolute;
+                right: -10px;
+                top: 16px;
+                filter: drop-shadow(2px 2px 1px #e5e7e8);
+            }
+        }
+    
+        &.RCB-tooltip-top {
+    
+            &:after {
+                content: " ";
+                width: 0;
+                height: 0;
+                border-top: 10px solid #ffffff;
+                border-right: 10px solid transparent;
+                border-left: 10px solid transparent;
+                position: absolute;
+                top: 100%;
+                left: 50%;
+                filter: drop-shadow(0px 1px 1px #e5e7e8);
+            }
+        }
+    
+        &.RCB-tooltip-bottom {
+            top: 150%;
+            left: -125px;
+
+            &:after {
+                content: " ";
+                width: 0;
+                height: 0;
+                border-left: 10px solid transparent;
+                border-bottom: 10px solid #ffffff;
+                border-right: 10px solid transparent;
+                position: absolute;
+                bottom: 100%;
+                left: 50%;
+                filter: drop-shadow(0px -1px 1px #e5e7e8);
+            }
+        }
+    }
+}
+
+
+.demo-tooltip {
+    .RCB-tooltip-body {
+        min-width: 235px;
+    }
+    .RCB-tooltip-btn {
+        border: none;
+        background-color: transparent;
+    }
+}
+*/
+
+.RCB-tooltip {
+    display: inline-block;
+    position: relative;
+
+    &-btn {
+        display: inline-block;
+        cursor: pointer;
+
+        // Ensure the button doesn't interfere with tooltip positioning
+        position: relative;
+        z-index: 1;
+    }
+
+    &-body {
+        display: none; // Hidden by default
+        position: absolute;
+        background: #fff;
+        padding: 10px;
+        border-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        z-index: 1000;
+        max-width: 300px;
+        word-wrap: break-word;
+
+        // Add smooth transitions
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+
+        // Show tooltip when it has these classes
+        &.RCB-tooltip-hover,
+        &.RCB-tooltip-click {
+            display: block;
+            opacity: 1;
+        }
+
+        // Prevent text selection in tooltip
+        user-select: none;
+
+        // Ensure proper text rendering
+        line-height: 1.4;
+        color: #333;
+        font-size: 14px;
+    }
+
+    &-arrow {
+        width: 0;
+        height: 0;
+        border-style: solid;
+
+        // Prevent arrow from interfering with hover/click events
+        pointer-events: none;
+
+        // Ensure arrow is positioned correctly
+        position: absolute;
+
+        &-top {
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 10px solid #fff;
+            border-bottom: 0px solid transparent;
+            filter: drop-shadow(0 1px 1px #e5e7e8);
+        }
+
+        &-bottom {
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-bottom: 10px solid #fff;
+            border-top: 0px solid transparent;
+            filter: drop-shadow(0 -1px 1px #e5e7e8);
+
+            /*border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-top: 8px solid #fff;
+            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));*/
+        }
+
+        &-left {
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-right: 0px solid transparent;
+            border-left: 10px solid #fff;
+            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
+        }
+
+        &-right {
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-right: 10px solid #fff;
+            border-left: 0px solid transparent;
+            filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.1));
+        }
+    }
+}
+
+// Keep the demo styles for storybook
+.demo-tooltip {
+    .RCB-tooltip-body {
+        min-width: 235px;
+    }
+
+    .RCB-tooltip-btn {
+        border: none;
+        background-color: transparent;
+    }
+}

package/components/Tooltip/tooltipTheme.scss

@@ -0,0 +1,20 @@
+.RCB {
+    &-tooltip-btn {
+        display: inline-block;
+        font-style: italic;
+        font-size: 12px;
+        color: #9199AA;
+        background-color: #F8FAFB;
+        border: 1px solid #D0DDE2;
+        padding: 0px 6px;
+        border-radius: 50%;
+        text-align: center;
+    }
+
+    &-tooltip-body {
+        background: #FFF;
+        padding: 10px;
+        border-radius: 4px;
+        box-shadow: 0px 1px 7px 0px #ccc;
+    }
+}

package/components/UIDItemComponent/UIDItemComponent.js

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = UIDItemComponent;
 var _react = _interopRequireWildcard(require("react"));
+var _desktop = _interopRequireDefault(require("../../assets/desktop.svg"));
+var _mapPin = _interopRequireDefault(require("../../assets/map-pin.svg"));
+var _p = _interopRequireDefault(require("../../assets/p1.svg"));
+var _p2 = _interopRequireDefault(require("../../assets/p2.svg"));
+var _p3 = _interopRequireDefault(require("../../assets/p3.svg"));
+var _p4 = _interopRequireDefault(require("../../assets/p4.svg"));
+var _p5 = _interopRequireDefault(require("../../assets/p5.svg"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-// Assets are now served from public folder
-var desktop = "/assets/desktop.svg";
-var map = "/assets/map-pin.svg";
-var p1 = "/assets/p1.svg";
-var p2 = "/assets/p2.svg";
-var p3 = "/assets/p3.svg";
-var p4 = "/assets/p4.svg";
-var p5 = "/assets/p5.svg";
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // Assets imported from global src/assets folder
 function UIDItemComponent(props) {
   // Desrructure props that are needed for client as well as server pagination types.
   var _props$itemData = props.itemData,
@@ -29,6 +29,8 @@ function UIDItemComponent(props) {
     clientPaginationType = _props$paginationType === void 0 ? "" : _props$paginationType,
     _props$selectItem = props.selectItem,
     clientSelectItem = _props$selectItem === void 0 ? function () {} : _props$selectItem,
+    _props$selectedItems = props.selectedItems,
+    clientSelectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
     _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data,
     _props$index = props.index,
@@ -40,7 +42,9 @@ function UIDItemComponent(props) {
     _data$paginationType = data.paginationType,
     serverPaginationType = _data$paginationType === void 0 ? "" : _data$paginationType,
     _data$selectItem = data.selectItem,
-    serverSelectItem = _data$selectItem === void 0 ? function () {} : _data$selectItem;
+    serverSelectItem = _data$selectItem === void 0 ? function () {} : _data$selectItem,
+    _data$selectedItems = data.selectedItems,
+    serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems;
 
   // Determine the pagination type
   var paginationType = clientPaginationType ? "CLIENT" : serverPaginationType;
@@ -48,6 +52,12 @@ function UIDItemComponent(props) {
   // Update the item data and select item function based on the pagination type
   var updatedItemData = paginationType !== 'SERVER' ? itemData : items[index] || {};
   var updatedSelectItem = paginationType !== 'SERVER' ? clientSelectItem : serverSelectItem;
+  var updatedSelectedItems = paginationType !== 'SERVER' ? clientSelectedItems : serverSelectedItems || [];
+
+  // Check if the item is selected    
+  var isItemSelected = updatedSelectedItems.find(function (item) {
+    return item.user_id === updatedItemData.user_id;
+  });
 
   // Normalize the item data to fetch fields needed for the component to display.
   var _updatedItemData$user = updatedItemData.user_id,
@@ -94,12 +104,12 @@ function UIDItemComponent(props) {
     return [].concat(_toConsumableArray(platforms), _toConsumableArray(devices)).join(", ");
   }, [platforms, devices]);
   var getAvatarSrc = function getAvatarSrc(rank) {
-    var avatars = [p1, p2, p3, p4, p5];
+    var avatars = [_p["default"], _p2["default"], _p3["default"], _p4["default"], _p5["default"]];
     var avatarIndex = rank % 5;
     return avatars[avatarIndex];
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "RCB-list-item",
+    className: "RCB-list-item RCB-uid-dd-item ".concat(isItemSelected ? "selected" : ""),
     style: style,
     onClick: function onClick() {
       return updatedSelectItem(updatedItemData);
@@ -123,13 +133,13 @@ function UIDItemComponent(props) {
   }, locationMetadata && /*#__PURE__*/_react["default"].createElement("div", {
     className: "RCB-user-id-metadata-item RCB-location-metadata-item"
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: map,
+    src: _mapPin["default"],
     alt: "location",
     className: "RCB-location-icon"
   }), /*#__PURE__*/_react["default"].createElement("span", null, " ", locationMetadata)), locationMetadata && deviceMetadata && /*#__PURE__*/_react["default"].createElement("div", null, "|"), deviceMetadata && /*#__PURE__*/_react["default"].createElement("div", {
     className: "RCB-user-id-metadata-item"
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: desktop,
+    src: _desktop["default"],
     alt: "device",
     className: "RCB-device-icon"
   }), /*#__PURE__*/_react["default"].createElement("span", null, deviceMetadata))))), /*#__PURE__*/_react["default"].createElement("div", {

package/components/UIDItemComponent/UIDItemComponentCore.scss

@@ -0,0 +1,57 @@
+.RCB-user-id-dropdown-item {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  .RCB-avatar-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    .RCB-avatar-container-inner {
+      display: flex;
+      gap: 10px;
+    }
+    .RCB-avatar-img {
+      width: 55px;
+      aspect-ratio: 1;
+    }
+    .RCB-user-details {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    .RCB-user-id-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #273251;
+      line-height: 21.82px;
+    }
+    .RCB-user-id-description {
+      font-size: 14px;
+      font-weight: 400;
+      color: #3f5767;
+      letter-spacing: 0px;
+      line-height: 19px;
+    }
+  }
+
+  .RCB-user-id-metadata {
+    display: flex;
+    gap: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #687f8f;
+    .RCB-user-id-metadata-item {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+  }
+  .RCB-location-icon {
+    width: 16px;
+    height: 16px;
+  }
+  .RCB-device-icon {
+    width: 16px;
+    height: 16px;
+  }
+}