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

package/components/PIDItemComponent/PIDItemComponent.stories.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithoutTitle = exports.WithDefaultImage = exports.WithArrayImage = exports.MultipleProducts = exports.LongTitle = exports.Default = exports.CustomKeyMapping = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PIDItemComponent = _interopRequireDefault(require("./PIDItemComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, 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); }
+var meta = {
+  title: 'Components/PIDItemComponent',
+  component: _PIDItemComponent["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Props object containing itemData and keysMap configuration'
+    }
+  }
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    props: {
+      itemData: {
+        uniqueId: 'PROD-12345',
+        imageUrl: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300',
+        title: 'Premium Wireless Headphones with Noise Cancellation'
+      },
+      keysMap: {
+        uniqueIdMap: 'uniqueId',
+        imageUrlMap: 'imageUrl',
+        titleMap: 'title'
+      }
+    }
+  }
+};
+var WithArrayImage = exports.WithArrayImage = {
+  args: {
+    props: {
+      itemData: {
+        uniqueId: 'PROD-67890',
+        imageUrl: ['https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300', 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300'],
+        title: 'Smartwatch with Fitness Tracking'
+      },
+      keysMap: {
+        uniqueIdMap: 'uniqueId',
+        imageUrlMap: 'imageUrl',
+        titleMap: 'title'
+      }
+    }
+  }
+};
+var WithDefaultImage = exports.WithDefaultImage = {
+  args: {
+    props: {
+      itemData: {
+        uniqueId: 'PROD-11111',
+        imageUrl: '',
+        title: 'Product Without Image'
+      },
+      keysMap: {
+        uniqueIdMap: 'uniqueId',
+        imageUrlMap: 'imageUrl',
+        titleMap: 'title'
+      }
+    }
+  }
+};
+var WithoutTitle = exports.WithoutTitle = {
+  args: {
+    props: {
+      itemData: {
+        uniqueId: 'PROD-22222',
+        imageUrl: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=300',
+        title: ''
+      },
+      keysMap: {
+        uniqueIdMap: 'uniqueId',
+        imageUrlMap: 'imageUrl',
+        titleMap: 'title'
+      }
+    }
+  }
+};
+var LongTitle = exports.LongTitle = {
+  args: {
+    props: {
+      itemData: {
+        uniqueId: 'PROD-99999',
+        imageUrl: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=300',
+        title: 'This is a very long product title that should be clipped or truncated to fit within the available space without breaking the layout'
+      },
+      keysMap: {
+        uniqueIdMap: 'uniqueId',
+        imageUrlMap: 'imageUrl',
+        titleMap: 'title'
+      }
+    }
+  }
+};
+var CustomKeyMapping = exports.CustomKeyMapping = {
+  args: {
+    props: {
+      itemData: {
+        product_id: 'CUSTOM-001',
+        product_image: 'https://images.unsplash.com/photo-1560343090-f0409e92791a?w=300',
+        product_name: 'Laptop with Custom Key Mapping'
+      },
+      keysMap: {
+        uniqueIdMap: 'product_id',
+        imageUrlMap: 'product_image',
+        titleMap: 'product_name'
+      }
+    }
+  }
+};
+var MultipleProducts = exports.MultipleProducts = {
+  render: function render() {
+    var products = [{
+      itemData: {
+        uniqueId: 'PROD-001',
+        imageUrl: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300',
+        title: 'Premium Wireless Headphones'
+      }
+    }, {
+      itemData: {
+        uniqueId: 'PROD-002',
+        imageUrl: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300',
+        title: 'Smart Watch'
+      }
+    }, {
+      itemData: {
+        uniqueId: 'PROD-003',
+        imageUrl: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=300',
+        title: 'Professional Camera'
+      }
+    }, {
+      itemData: {
+        uniqueId: 'PROD-004',
+        imageUrl: 'https://images.unsplash.com/photo-1560343090-f0409e92791a?w=300',
+        title: 'Gaming Laptop'
+      }
+    }];
+    var keysMap = {
+      uniqueIdMap: 'uniqueId',
+      imageUrlMap: 'imageUrl',
+      titleMap: 'title'
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '300px',
+        border: '1px solid #ddd',
+        borderRadius: '8px'
+      }
+    }, products.map(function (product, index) {
+      return /*#__PURE__*/_react["default"].createElement(_PIDItemComponent["default"], {
+        key: index,
+        props: _objectSpread(_objectSpread({}, product), {}, {
+          keysMap: keysMap
+        })
+      });
+    }));
+  }
+};

package/components/PIDItemComponent/PIDItemComponentCore.css

@@ -0,0 +1 @@
+.RCB-pid-dd-item{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;padding-bottom:8px;padding-left:13px;padding-top:8px;width:100%}.RCB-pid-dd-item .RCB-pid-product-image{height:35px;margin-right:5px;-o-object-fit:contain;object-fit:contain;width:30px}.RCB-pid-dd-item .RCB-title{font-size:12px;font-weight:600;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.RCB-pid-dd-item .RCB-pid-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;text-transform:none;font-size:12px}

package/components/PIDItemComponent/index.js

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

package/components/UIDItemComponent/UIDItemComponent.js

@@ -0,0 +1,138 @@
+"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"] = UIDItemComponent;
+var _react = _interopRequireWildcard(require("react"));
+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 UIDItemComponent(props) {
+  // Desrructure props that are needed for client as well as server pagination types.
+  var _props$itemData = props.itemData,
+    itemData = _props$itemData === void 0 ? {} : _props$itemData,
+    _props$paginationType = props.paginationType,
+    clientPaginationType = _props$paginationType === void 0 ? "" : _props$paginationType,
+    _props$selectItem = props.selectItem,
+    clientSelectItem = _props$selectItem === void 0 ? function () {} : _props$selectItem,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$index = props.index,
+    index = _props$index === void 0 ? 0 : _props$index,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style;
+  var _data$items = data.items,
+    items = _data$items === void 0 ? [] : _data$items,
+    _data$paginationType = data.paginationType,
+    serverPaginationType = _data$paginationType === void 0 ? "" : _data$paginationType,
+    _data$selectItem = data.selectItem,
+    serverSelectItem = _data$selectItem === void 0 ? function () {} : _data$selectItem;
+
+  // Determine the pagination type
+  var paginationType = clientPaginationType ? "CLIENT" : serverPaginationType;
+
+  // 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;
+
+  // Normalize the item data to fetch fields needed for the component to display.
+  var _updatedItemData$user = updatedItemData.user_id,
+    user_id = _updatedItemData$user === void 0 ? '' : _updatedItemData$user,
+    _updatedItemData$user2 = updatedItemData.user_behavior,
+    user_behavior = _updatedItemData$user2 === void 0 ? {} : _updatedItemData$user2,
+    _updatedItemData$enga = updatedItemData.engagement_metrics,
+    engagement_metrics = _updatedItemData$enga === void 0 ? {} : _updatedItemData$enga,
+    _updatedItemData$devi = updatedItemData.device_info,
+    device_info = _updatedItemData$devi === void 0 ? {} : _updatedItemData$devi,
+    _updatedItemData$loca = updatedItemData.location_info,
+    location_info = _updatedItemData$loca === void 0 ? {} : _updatedItemData$loca,
+    _updatedItemData$rank = updatedItemData.rank,
+    rank = _updatedItemData$rank === void 0 ? 0 : _updatedItemData$rank;
+  var _user_behavior$user_t = user_behavior.user_types,
+    user_types = _user_behavior$user_t === void 0 ? "" : _user_behavior$user_t,
+    _user_behavior$sessio = user_behavior.session_count,
+    session_count = _user_behavior$sessio === void 0 ? 0 : _user_behavior$sessio,
+    _user_behavior$total_ = user_behavior.total_events,
+    total_events = _user_behavior$total_ === void 0 ? 0 : _user_behavior$total_;
+  var _engagement_metrics$c = engagement_metrics.clicks,
+    clicks = _engagement_metrics$c === void 0 ? 0 : _engagement_metrics$c,
+    _engagement_metrics$o = engagement_metrics.orders,
+    orders = _engagement_metrics$o === void 0 ? 0 : _engagement_metrics$o,
+    _engagement_metrics$r = engagement_metrics.revenue,
+    revenue = _engagement_metrics$r === void 0 ? "0.0" : _engagement_metrics$r;
+  var _device_info$platform = device_info.platforms,
+    platforms = _device_info$platform === void 0 ? [] : _device_info$platform,
+    _device_info$devices = device_info.devices,
+    devices = _device_info$devices === void 0 ? [] : _device_info$devices;
+  var _location_info$region = location_info.regions,
+    regions = _location_info$region === void 0 ? [] : _location_info$region,
+    _location_info$countr = location_info.countries,
+    countries = _location_info$countr === void 0 ? [] : _location_info$countr,
+    _location_info$cities = location_info.cities,
+    cities = _location_info$cities === void 0 ? [] : _location_info$cities;
+  var locationMetadata = (0, _react.useMemo)(function () {
+    if (regions.length > 0) return regions[0];
+    if (countries.length > 0) return countries[0];
+    if (cities.length > 0) return cities[0];
+    return "";
+  }, [regions, countries, cities]);
+  var deviceMetadata = (0, _react.useMemo)(function () {
+    return [].concat(_toConsumableArray(platforms), _toConsumableArray(devices)).join(", ");
+  }, [platforms, devices]);
+  var getAvatarSrc = function getAvatarSrc(rank) {
+    var avatars = [p1, p2, p3, p4, p5];
+    var avatarIndex = rank % 5;
+    return avatars[avatarIndex];
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-list-item",
+    style: style,
+    onClick: function onClick() {
+      return updatedSelectItem(updatedItemData);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-list-item-content RCB-user-id-dropdown-item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-avatar-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-avatar-container-inner"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: getAvatarSrc(rank),
+    alt: "user",
+    className: "RCB-avatar-img"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-user-details"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-user-id-title"
+  }, "User #", rank, ": ", user_id), /*#__PURE__*/_react["default"].createElement("div", {
+    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: map,
+    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,
+    alt: "device",
+    className: "RCB-device-icon"
+  }), /*#__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), ".")))));
+}

package/components/UIDItemComponent/UIDItemComponent.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _UIDItemComponent = _interopRequireDefault(require("./UIDItemComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'Components/UIDItemComponent',
+  component: _UIDItemComponent["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Props object containing itemData and other configuration'
+    }
+  }
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    props: {
+      itemData: {
+        user_id: 'user_12345',
+        user_behavior: {
+          user_types: 'returning',
+          session_count: 15,
+          total_events: 142
+        },
+        engagement_metrics: {
+          clicks: 48,
+          orders: 3,
+          revenue: '249.99'
+        },
+        device_info: {
+          platforms: ['Desktop'],
+          devices: ['Chrome']
+        },
+        location_info: {
+          regions: ['California'],
+          countries: ['USA'],
+          cities: ['San Francisco']
+        },
+        rank: 1
+      }
+    }
+  }
+};

package/components/UIDItemComponent/UIDItemComponentCore.css

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

package/components/UIDItemComponent/index.js

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