@unbxd-ui/unbxd-react-components 0.3.3 → 0.3.4

package/components/PulseVersionToggler/PulseVersionToggler.stories.js

@@ -0,0 +1,295 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithCustomTooltipComponents = exports.StartingWithV2 = exports.StartingWithV1 = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PulseVersionToggler = _interopRequireDefault(require("./PulseVersionToggler"));
+require("./pulse-version-toggler.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var meta = {
+  title: 'Components/PulseVersionToggler',
+  component: _PulseVersionToggler["default"],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A floating button component for toggling between different versions (v1/v2) with API integration, cookie management, and loading states.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names'
+    },
+    endpoint: {
+      control: 'text',
+      description: 'API endpoint for version toggle'
+    },
+    cookieName: {
+      control: 'text',
+      description: 'Name of the cookie to track version'
+    },
+    queryParamKey: {
+      control: 'text',
+      description: 'Key name for the version parameter in API request'
+    },
+    tooltipMessageOn: {
+      control: 'text',
+      description: 'Tooltip message when v2 is active (can be string or function)'
+    },
+    tooltipMessageOff: {
+      control: 'text',
+      description: 'Tooltip message when v1 is active (can be string or function)'
+    },
+    successMessage: {
+      control: 'text',
+      description: 'Success message after version switch (can be string or function)'
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message when version switch fails (can be string or function)'
+    },
+    reloadDelay: {
+      control: 'number',
+      description: 'Delay in milliseconds before page reload after successful switch'
+    },
+    shouldFallbackToV2: {
+      control: 'boolean',
+      description: 'Initial state when no cookie exists - true for v2, false for v1'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Default Story
+var Default = exports.Default = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver',
+    queryParamKey: 'version',
+    shouldFallbackToV2: true
+  },
+  render: function render(args) {
+    // Mock fetch for Storybook (without Jest)
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], args), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Floating Version Toggle Button"), /*#__PURE__*/_react["default"].createElement("p", null, "This button appears in the bottom-right corner of the page."), /*#__PURE__*/_react["default"].createElement("p", null, "Hover over the button to see the tooltip and click to toggle between versions."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Note:"), " In Storybook, the API calls are mocked and page reload is disabled.")));
+  }
+};
+
+// With Custom Tooltip Components
+var WithCustomTooltipComponents = exports.WithCustomTooltipComponents = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver',
+    queryParamKey: 'version',
+    shouldFallbackToV2: true
+  },
+  render: function render(args) {
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+
+    // Custom tooltip component for v2 (on state)
+    var TooltipV2Component = function TooltipV2Component(currentVersion, targetVersion) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          background: '#10b981',
+          color: 'white',
+          padding: '2px 8px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          fontWeight: 'bold'
+        }
+      }, currentVersion.toUpperCase()), /*#__PURE__*/_react["default"].createElement("span", null, "You're on the new experience")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          fontSize: '13px',
+          color: '#666'
+        }
+      }, "Click to switch back to ", targetVersion.toUpperCase(), " (Classic)"));
+    };
+
+    // Custom tooltip component for v1 (off state)
+    var TooltipV1Component = function TooltipV1Component(currentVersion, targetVersion) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          background: '#3b82f6',
+          color: 'white',
+          padding: '2px 8px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          fontWeight: 'bold'
+        }
+      }, currentVersion.toUpperCase()), /*#__PURE__*/_react["default"].createElement("span", null, "You're on the classic version")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          fontSize: '13px',
+          color: '#666'
+        }
+      }, "\u2728 Try the new ", targetVersion.toUpperCase(), " experience!"));
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], _extends({}, args, {
+      tooltipMessageOn: TooltipV2Component,
+      tooltipMessageOff: TooltipV1Component
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Custom Tooltip Components"), /*#__PURE__*/_react["default"].createElement("p", null, "This example demonstrates passing React components as tooltip messages."), /*#__PURE__*/_react["default"].createElement("p", null, "The tooltips include custom styling with badges, icons, and multi-line content."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Features:")), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Version badges with different colors"), /*#__PURE__*/_react["default"].createElement("li", null, "Multi-line content with descriptions"), /*#__PURE__*/_react["default"].createElement("li", null, "Custom typography and spacing"), /*#__PURE__*/_react["default"].createElement("li", null, "Dynamic content based on current/target version"))));
+  }
+};
+
+// Starting with V1 (shouldFallbackToV2 = false)
+var StartingWithV1 = exports.StartingWithV1 = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver_v1',
+    queryParamKey: 'version',
+    shouldFallbackToV2: false
+  },
+  render: function render(args) {
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], args), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Starting with V1 (Classic)"), /*#__PURE__*/_react["default"].createElement("p", null, "This example sets ", /*#__PURE__*/_react["default"].createElement("code", null, "shouldFallbackToV2"), " to ", /*#__PURE__*/_react["default"].createElement("code", null, "false"), "."), /*#__PURE__*/_react["default"].createElement("p", null, "When no cookie exists, the component will default to ", /*#__PURE__*/_react["default"].createElement("strong", null, "V1"), " (classic version)."), /*#__PURE__*/_react["default"].createElement("p", null, "The button will show \"V1\" and allow users to switch to V2."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Use case:"), " Perfect for users who should see the classic version by default.")));
+  }
+};
+
+// Starting with V2 (shouldFallbackToV2 = true)
+var StartingWithV2 = exports.StartingWithV2 = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver_v2',
+    queryParamKey: 'version',
+    shouldFallbackToV2: true
+  },
+  render: function render(args) {
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], args), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Starting with V2 (New Experience)"), /*#__PURE__*/_react["default"].createElement("p", null, "This example sets ", /*#__PURE__*/_react["default"].createElement("code", null, "shouldFallbackToV2"), " to ", /*#__PURE__*/_react["default"].createElement("code", null, "true"), "."), /*#__PURE__*/_react["default"].createElement("p", null, "When no cookie exists, the component will default to ", /*#__PURE__*/_react["default"].createElement("strong", null, "V2"), " (new version)."), /*#__PURE__*/_react["default"].createElement("p", null, "The button will show \"V2\" with the active state and allow users to switch back to V1."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Use case:"), " Perfect for users who should see the new experience by default.")));
+  }
+};

package/components/PulseVersionToggler/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _PulseVersionToggler = _interopRequireDefault(require("./PulseVersionToggler"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _PulseVersionToggler["default"];

package/components/PulseVersionToggler/pulse-version-toggler.css

@@ -0,0 +1 @@
+.RCB-pulse-toggler{position:fixed;right:-5px;top:50%;transform:translateY(-50%);z-index:9999;display:flex;align-items:center;transition:right 0.3s ease}.RCB-pulse-toggler.RCB-pulse-toggler-visible{right:0}.RCB-pulse-toggler-btn-text{font-size:10px}.RCB-pulse-toggler-btn{border:none;border-radius:8px 0 0 8px;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;letter-spacing:0.5px;color:#fff;background-color:#8a8a8a;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color 0.2s ease;box-shadow:-2px 2px 8px rgba(0,0,0,0.15);padding:6px 10px}.RCB-pulse-toggler-btn:hover{background-color:#6e6e6e}.RCB-pulse-toggler-btn:disabled{cursor:not-allowed;opacity:0.7}.RCB-pulse-toggler-btn.active{background-color:#3E71F2}.RCB-pulse-toggler-btn.active:hover{background-color:#3865D9}.RCB-pulse-toggler-tooltip{position:absolute;right:45px;top:50%;transform:translateY(-50%);background:#fff;color:#333;padding:10px 14px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);font-size:13px;line-height:1.5;width:220px;white-space:normal;pointer-events:none}.RCB-pulse-toggler-tooltip-arrow{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #fff}.RCB-pulse-toggler-loader-wrap{display:flex;align-items:center;gap:8px}.RCB-pulse-toggler-loader{display:inline-block;width:16px;height:16px;border:2px solid #e0e0e0;border-top-color:#3E71F2;border-radius:50%;animation:RCB-pulse-spin 0.6s linear infinite;flex-shrink:0}@keyframes RCB-pulse-spin{to{transform:rotate(360deg)}}

package/components/PulseVersionToggler/pulse-version-toggler.scss

@@ -0,0 +1,106 @@
+.RCB-pulse-toggler {
+  position: fixed;
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  transition: right 0.3s ease;
+
+  &.RCB-pulse-toggler-visible {
+    right: 0;
+  }
+
+  &-btn-text {
+    font-size: 10px;
+  }
+
+  &-btn {
+    border: none;
+    border-radius: 8px 0 0 8px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    font-family: inherit;
+    letter-spacing: 0.5px;
+    color: #fff;
+    background-color: #8a8a8a;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 6px 10px;
+
+    &:hover {
+      background-color: #6e6e6e;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    &.active {
+      background-color: #3E71F2;
+
+      &:hover {
+        background-color: #3865D9;
+      }
+    }
+  }
+
+  &-tooltip {
+    position: absolute;
+    right: 45px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #fff;
+    color: #333;
+    padding: 10px 14px;
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    font-size: 13px;
+    line-height: 1.5;
+    width: 220px;
+    white-space: normal;
+    pointer-events: none;
+
+    &-arrow {
+      position: absolute;
+      right: -6px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 0;
+      height: 0;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      border-left: 6px solid #fff;
+    }
+  }
+
+  &-loader-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &-loader {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #e0e0e0;
+    border-top-color: #3E71F2;
+    border-radius: 50%;
+    animation: RCB-pulse-spin 0.6s linear infinite;
+    flex-shrink: 0;
+  }
+}
+
+@keyframes RCB-pulse-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/components/UIDItemComponent/UIDItemComponent.js

@@ -6,13 +6,7 @@ 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"));
+var _icon = _interopRequireDefault(require("../../core/icon"));
 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(); }
@@ -36,7 +30,9 @@ function UIDItemComponent(props) {
     _props$index = props.index,
     index = _props$index === void 0 ? 0 : _props$index,
     _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style;
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$avatars = props.avatars,
+    clientAvatars = _props$avatars === void 0 ? [] : _props$avatars;
   var _data$items = data.items,
     items = _data$items === void 0 ? [] : _data$items,
     _data$paginationType = data.paginationType,
@@ -44,10 +40,13 @@ function UIDItemComponent(props) {
     _data$selectItem = data.selectItem,
     serverSelectItem = _data$selectItem === void 0 ? function () {} : _data$selectItem,
     _data$selectedItems = data.selectedItems,
-    serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems;
+    serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems,
+    _data$avatars = data.avatars,
+    serverAvatars = _data$avatars === void 0 ? [] : _data$avatars;
 
   // Determine the pagination type
   var paginationType = clientPaginationType ? "CLIENT" : serverPaginationType;
+  var avatars = paginationType !== 'SERVER' ? clientAvatars : serverAvatars;
 
   // Update the item data and select item function based on the pagination type
   var updatedItemData = paginationType !== 'SERVER' ? itemData : items[index] || {};
@@ -104,8 +103,7 @@ function UIDItemComponent(props) {
     return [].concat(_toConsumableArray(platforms), _toConsumableArray(devices)).join(", ");
   }, [platforms, devices]);
   var getAvatarSrc = function getAvatarSrc(rank) {
-    var avatars = [_p["default"], _p2["default"], _p3["default"], _p4["default"], _p5["default"]];
-    var avatarIndex = rank % 5;
+    var avatarIndex = rank % avatars.length;
     return avatars[avatarIndex];
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -132,16 +130,14 @@ function UIDItemComponent(props) {
     className: "RCB-user-id-metadata"
   }, locationMetadata && /*#__PURE__*/_react["default"].createElement("div", {
     className: "RCB-user-id-metadata-item RCB-location-metadata-item"
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: _mapPin["default"],
-    alt: "location",
-    className: "RCB-location-icon"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    icon: "map-pin",
+    size: "16px"
   }), /*#__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["default"],
-    alt: "device",
-    className: "RCB-device-icon"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    icon: "desktop",
+    size: "16px"
   }), /*#__PURE__*/_react["default"].createElement("span", null, deviceMetadata))))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "RCB-user-id-description"
   }, "This user is a ", /*#__PURE__*/_react["default"].createElement("b", null, user_types), " visitor with", " ", /*#__PURE__*/_react["default"].createElement("b", null, session_count), " sessions and ", /*#__PURE__*/_react["default"].createElement("b", null, total_events), " ", "events. They made ", /*#__PURE__*/_react["default"].createElement("b", null, clicks), " clicks, placed ", /*#__PURE__*/_react["default"].createElement("b", null, orders), " ", "order(s) worth ", /*#__PURE__*/_react["default"].createElement("b", null, "$", revenue), ".")))));