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

package/components/Form/stories/ServerPaginatedDropdown.stories.js

@@ -4,10 +4,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.MultiSelect = exports.Default = void 0;
+exports["default"] = exports.PIDServerDropdown = exports.MultiSelect = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _dataLoader = _interopRequireDefault(require("../../../core/dataLoader"));
+var _PIDItemComponent = _interopRequireDefault(require("../../PIDItemComponent/PIDItemComponent"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+var _SummarySelection = _interopRequireDefault(require("../SummarySelection"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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."); }
@@ -182,6 +184,136 @@ var Default = exports.Default = {
     })));
   }
 };
+var PIDServerDropdown = exports.PIDServerDropdown = {
+  args: {
+    showSearch: true,
+    searchPlaceholder: 'Search with id only',
+    searchAttribute: 'id',
+    multiSelect: false,
+    idAttribute: 'id',
+    nameAttribute: 'name',
+    pageSize: 20,
+    maxHeight: 180,
+    perPageKey: '_limit',
+    pageNoKey: '_page',
+    ddItemHeight: 60,
+    paginationType: 'SERVER'
+  },
+  argTypes: {
+    showSearch: {
+      control: 'boolean',
+      description: 'Enable search functionality'
+    },
+    searchPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for search input'
+    },
+    searchAttribute: {
+      control: 'text',
+      description: 'Field to search against'
+    },
+    multiSelect: {
+      control: 'boolean',
+      description: 'Allow multiple selections'
+    },
+    idAttribute: {
+      control: 'text',
+      description: 'Field to use as unique identifier'
+    },
+    nameAttribute: {
+      control: 'text',
+      description: 'Field to display as item label'
+    },
+    pageSize: {
+      control: 'number',
+      description: 'Number of items per page'
+    },
+    maxHeight: {
+      control: 'number',
+      description: 'Maximum height of dropdown list'
+    },
+    perPageKey: {
+      control: 'text',
+      description: 'Query parameter for items per page'
+    },
+    pageNoKey: {
+      control: 'text',
+      description: 'Query parameter for page number'
+    },
+    ddItemHeight: {
+      control: 'number',
+      description: 'Height of each dropdown item'
+    },
+    paginationType: {
+      control: 'select',
+      options: ['SERVER', 'CLIENT'],
+      description: 'Type of pagination'
+    }
+  },
+  render: function render(args) {
+    var _React$useState3 = _react["default"].useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedValue = _React$useState4[0],
+      setSelectedValue = _React$useState4[1];
+    var ddRef = _react["default"].useRef(null);
+    var valuesResponseFormatter = function valuesResponseFormatter(response) {
+      return {
+        entries: response.map(function (user) {
+          return {
+            name: user.name,
+            id: user.id,
+            imageUrl: "https://images.unsplash.com/photo-1560343090-f0409e92791a?w=300"
+          };
+        }),
+        total: response.length ? 10 : 0
+      };
+    };
+    var keysMap = {
+      uniqueIdMap: 'id',
+      imageUrlMap: 'imageUrl',
+      titleMap: 'name'
+    };
+    var PageLoader = function PageLoader(_ref2) {
+      var className = _ref2.className;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "loading-spinner ".concat(className || '')
+      });
+    };
+    var NoDataComponent = function NoDataComponent() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          padding: '10px',
+          textAlign: 'center',
+          color: '#666',
+          fontSize: '14px'
+        }
+      }, "No matching results found");
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px',
+        height: '150px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({}, args, {
+      ref: ddRef,
+      className: "users-dd demo-dropdown",
+      name: "usersDD",
+      requestId: "getUsers",
+      DropdownItem: _PIDItemComponent["default"],
+      responseFormatter: valuesResponseFormatter,
+      value: selectedValue,
+      keysMap: keysMap,
+      onChange: function onChange(value) {
+        return setSelectedValue(value);
+      },
+      LoaderComponent: /*#__PURE__*/_react["default"].createElement(PageLoader, {
+        className: "search-loader"
+      }),
+      NoDataComponent: NoDataComponent,
+      paginationType: "SERVER"
+    })));
+  }
+};
 var MultiSelect = exports.MultiSelect = {
   args: _objectSpread(_objectSpread({}, Default.args), {}, {
     multiSelect: true,
@@ -190,10 +322,10 @@ var MultiSelect = exports.MultiSelect = {
   }),
   argTypes: Default.argTypes,
   render: function render(args) {
-    var _React$useState3 = _react["default"].useState([]),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedValues = _React$useState4[0],
-      setSelectedValues = _React$useState4[1];
+    var _React$useState5 = _react["default"].useState([]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      selectedValues = _React$useState6[0],
+      setSelectedValues = _React$useState6[1];
     var ddRef = _react["default"].useRef(null);
     var valuesResponseFormatter = function valuesResponseFormatter(response) {
       return {
@@ -206,47 +338,8 @@ var MultiSelect = exports.MultiSelect = {
         total: response.length ? 10 : 0
       };
     };
-    var ValueDropdownItem = function ValueDropdownItem(props) {
-      var index = props.index,
-        data = props.data;
-      var items = data.items;
-      if (items.length === 0) {
-        return null;
-      }
-      var itemData = data.items[index];
-      if (!itemData) return null;
-      var isSelected = selectedValues.some(function (val) {
-        return val.id === itemData.id;
-      });
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          width: '300px'
-        },
-        className: "RCB-list-item"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: function onClick() {
-          if (isSelected) {
-            setSelectedValues(selectedValues.filter(function (val) {
-              return val.id !== itemData.id;
-            }));
-          } else {
-            setSelectedValues([].concat(_toConsumableArray(selectedValues), [itemData]));
-          }
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        type: "checkbox",
-        checked: isSelected,
-        readOnly: true
-      }), /*#__PURE__*/_react["default"].createElement("span", null, "Name: ".concat(itemData.name, ", Id: ").concat(itemData.id)))));
-    };
-    var PageLoader = function PageLoader(_ref2) {
-      var className = _ref2.className;
+    var PageLoader = function PageLoader(_ref3) {
+      var className = _ref3.className;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "loading-spinner ".concat(className || '')
       });
@@ -261,48 +354,21 @@ var MultiSelect = exports.MultiSelect = {
         }
       }, "No matching results found");
     };
-    var SelectionSummary = function SelectionSummary() {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '4px'
-        }
-      }, selectedValues.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '4px'
-        }
-      }, selectedValues.map(function (value) {
-        return /*#__PURE__*/_react["default"].createElement("span", {
-          key: value.id,
-          style: {
-            background: '#e2e8f0',
-            padding: '2px 8px',
-            borderRadius: '4px',
-            fontSize: '14px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '4px'
-          }
-        }, value.name, /*#__PURE__*/_react["default"].createElement("button", {
-          onClick: function onClick(e) {
-            e.stopPropagation();
-            setSelectedValues(selectedValues.filter(function (val) {
-              return val.id !== value.id;
-            }));
-          },
-          style: {
-            border: 'none',
-            background: 'none',
-            padding: '0',
-            cursor: 'pointer',
-            fontSize: '14px',
-            color: '#666'
-          }
-        }, "\xD7"));
-      })) : /*#__PURE__*/_react["default"].createElement("span", null, "Select users"));
+    var handleDelete = function handleDelete(value) {
+      setSelectedValues(selectedValues.filter(function (val) {
+        return val.id !== value;
+      }));
+    };
+    var onCheckboxChange = function onCheckboxChange(val) {
+      var item = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var findItemWithId = arguments.length > 2 ? arguments[2] : undefined;
+      if (findItemWithId()) {
+        setSelectedValues(selectedValues.filter(function (val) {
+          return val.id !== item.id;
+        }));
+      } else {
+        setSelectedValues([].concat(_toConsumableArray(selectedValues), [item]));
+      }
     };
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
@@ -314,13 +380,19 @@ var MultiSelect = exports.MultiSelect = {
       className: "users-dd demo-dropdown",
       name: "usersDD",
       requestId: "getUsers",
-      DropdownItem: ValueDropdownItem,
-      SelectionSummary: SelectionSummary,
+      selectedItems: selectedValues,
+      onDelete: handleDelete,
+      selectionKey: "name",
+      deleteKey: "id",
+      isDeletable: true,
+      showAllTags: false,
+      count: 3,
+      onChange: onCheckboxChange
+      // DropdownItem={ValueDropdownItem}
+      ,
+      SelectionSummary: _SummarySelection["default"],
       responseFormatter: valuesResponseFormatter,
       value: selectedValues,
-      onChange: function onChange(value) {
-        return setSelectedValues(value);
-      },
       LoaderComponent: /*#__PURE__*/_react["default"].createElement(PageLoader, {
         className: "search-loader"
       }),

package/components/Form/summarySelection.css

@@ -0,0 +1 @@
+.summary-tags-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:calc(100% - 40px)}.summary-tags-wrapper .RCB-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.summary-tags-wrapper .light-close-icon{font-size:12px;color:#6f6f8d;cursor:pointer;margin-left:6px}.merch-dd-icon{position:absolute;right:15px;top:16px}.merch-tag-box{display:flex;align-items:center;justify-content:center;border:1px solid #dae1e9;border-radius:4px;background-color:#ffffff;padding:5px 10px 5px 10px;font-size:12px;text-transform:capitalize}.new-summary-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.summary-pill-tag{margin-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;border-radius:4px;border:1px solid #dae1e9;background-color:#ffffff;padding:5px 10px 5px 10px;font-size:12px;text-transform:capitalize;display:flex;align-items:center;justify-content:center;max-height:28px;min-width:36px;margin-left:6px}.custom-attribute{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center}.filters-sub-header{color:#616e7a;font-size:14px;font-weight:600;line-height:19.1px;padding-top:20px}.view-more-link{color:#3E71F2;cursor:pointer;font-size:14px;text-decoration:none;padding-left:10px;white-space:nowrap;display:inline-flex;align-items:center;flex-shrink:0}.view-more-link:active{color:#0056b3}.RCB-inline-modal-btn{display:flex;justify-content:space-between}

package/components/Link/linkCore.css

@@ -1 +1 @@
-.RCB-link{display:inline;cursor:pointer;font-family:inherit;transition:color 0.2s ease, text-decoration 0.2s ease;background:none;border:none;padding:0;margin:0;font-weight:500}.RCB-link:focus{outline:2px solid #3E71F2;outline-offset:2px}.RCB-link-disabled{cursor:not-allowed;opacity:0.6}.RCB-link-underline{text-decoration:underline}.RCB-link-none{text-decoration:none}.RCB-link-overline{text-decoration:overline}.RCB-link-line-through{text-decoration:line-through}.RCB-link-underline-on-hover:hover{text-decoration:underline}.RCB-link-external-icon{margin-left:4px;font-size:0.8em;line-height:1;display:inline}.RCB-link-small{font-size:12px;line-height:1.4}.RCB-link-medium{font-size:14px;line-height:1.5}.RCB-link-large{font-size:16px;line-height:1.6}
+.RCB-link{display:inline;cursor:pointer;font-family:inherit;transition:color 0.2s ease, text-decoration 0.2s ease;background:none;border:none;padding:0;margin:0;font-weight:600}.RCB-link-disabled{cursor:not-allowed;opacity:0.6}.RCB-link-underline{text-decoration:underline}.RCB-link-none{text-decoration:none}.RCB-link-overline{text-decoration:overline}.RCB-link-line-through{text-decoration:line-through}.RCB-link-underline-on-hover:hover{text-decoration:underline}.RCB-link-external-icon{margin-left:4px;font-size:0.8em;line-height:1;display:inline}.RCB-link-small{font-size:12px;line-height:1.4}.RCB-link-medium{font-size:14px;line-height:1.5}.RCB-link-large{font-size:16px;line-height:1.6}

package/components/PIDItemComponent/PIDItemComponent.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PIDItemComponent;
+var _react = _interopRequireDefault(require("react"));
+var _lazyLoadImage = _interopRequireDefault(require("../../core/lazyLoadImage"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function PIDItemComponent(props) {
+  var DEFAULT_IMAGE = "https://libraries.unbxdapi.com/sdk-assets/defaultImage.svg";
+
+  // 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$keysMap = props.keysMap,
+    clientKeysMap = _props$keysMap === void 0 ? {} : _props$keysMap,
+    _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,
+    _data$keysMap = data.keysMap,
+    serverKeysMap = _data$keysMap === void 0 ? {} : _data$keysMap;
+
+  // 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;
+  var updatedKeysMap = paginationType !== 'SERVER' ? clientKeysMap : serverKeysMap || {};
+
+  // Destructue the items value with its respective keys map provided in the props
+  var _updatedKeysMap$uniqu = updatedKeysMap.uniqueIdMap,
+    uniqueIdMap = _updatedKeysMap$uniqu === void 0 ? "uniqueId" : _updatedKeysMap$uniqu,
+    _updatedKeysMap$image = updatedKeysMap.imageUrlMap,
+    imageUrlMap = _updatedKeysMap$image === void 0 ? "imageUrl" : _updatedKeysMap$image,
+    _updatedKeysMap$title = updatedKeysMap.titleMap,
+    titleMap = _updatedKeysMap$title === void 0 ? "title" : _updatedKeysMap$title;
+  var title = updatedItemData[titleMap];
+  var imageUrl = Array.isArray(updatedItemData[imageUrlMap]) ? updatedItemData[imageUrlMap][0] : updatedItemData[imageUrlMap] ? updatedItemData[imageUrlMap] : DEFAULT_IMAGE;
+  var uniqueId = updatedItemData[uniqueIdMap];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-list-item RCB-pid-dd-item",
+    style: style,
+    onClick: function onClick() {
+      return updatedSelectItem(updatedItemData);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_lazyLoadImage["default"], {
+    id: uniqueId,
+    key: uniqueId,
+    className: "RCB-pid-product-image",
+    src: imageUrl
+  }), /*#__PURE__*/_react["default"].createElement("div", null, title && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "RCB-title",
+    title: title
+  }, title), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "RCB-pid-id show small-text text-transform-none clip-content"
+  }, " ID: ", uniqueId, " ")));
+}

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"];