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

package/components/Link/linkTheme.scss

@@ -0,0 +1,79 @@
+/**
+    Theme styles for Link component - visual appearance and branding
+**/
+
+.RCB-link {
+    // Primary appearance (default link styling)
+    &-primary {
+        color: #3e71f2;
+        
+        &:hover {
+            color: #3865d9;
+        }
+        
+        &:active {
+            color: #3e71f2;
+        }
+        
+        &:visited {
+            color: #6f42c1;
+        }
+    }
+    
+    // Secondary appearance
+    &-secondary {
+        color: #6c757d;
+        text-decoration: none;
+        
+        &:hover {
+            color: #495057;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #343a40;
+        }
+    }
+    
+    // Danger appearance
+    &-danger {
+        color: #dc3545;
+        text-decoration: none;
+        
+        &:hover {
+            color: #c82333;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #bd2130;
+        }
+    }
+    
+    // Success appearance
+    &-success {
+        color: #28a745;
+        text-decoration: none;
+        
+        &:hover {
+            color: #218838;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #1e7e34;
+        }
+    }
+    
+    // External link styling
+    &-external {
+        .RCB-link-external-icon {
+            color: currentColor;
+            opacity: 0.7;
+        }
+        
+        &:hover .RCB-link-external-icon {
+            opacity: 1;
+        }
+    }
+}

package/components/List/list.css

@@ -0,0 +1 @@
+.RCB-list{margin:0;padding:0}

package/components/List/listCore.scss

@@ -0,0 +1,6 @@
+.RCB {
+    &-list {
+        margin: 0;
+        padding: 0;
+    }
+}

package/components/Modal/modal.css

@@ -0,0 +1 @@
+.RCB-modal{position:absolute;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}

package/components/Modal/modalCore.scss

@@ -0,0 +1,58 @@
+.RCB {
+    &-modal {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2;
+
+        .modal-footer {
+            padding: 24px 24px;
+            margin: 20px -24px 0px;
+            border-radius: 0 0 8px 8px;
+            text-align: right;
+    
+            .RCB-btn {
+                margin-right: 14px;
+    
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    &-modal-body {
+        background: #FFF;
+        border-radius: 8px;
+        padding: 0px;
+    }
+
+    &-modal-header {
+        display: flex;
+        margin-bottom: 0px;
+        padding: 24px 24px 10px;
+    }
+
+    &-modal-title {
+        flex: 1;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: normal;
+    }
+
+    &-modal-close {
+        cursor: pointer;
+        &:before { 
+            content: "X";
+        }
+    }
+
+    &-modal-content {
+        padding: 24px 24px 0px;
+    }
+}

package/components/NoDataPlaceholder/noDataPlaceholderCore.scss

@@ -0,0 +1,33 @@
+.RCB-no-data-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.RCB-no-data-image {
+    margin-bottom: 16px;
+}
+
+.RCB-no-data-image img {
+    max-width: 120px;
+    max-height: 120px;
+    object-fit: contain;
+}
+
+.RCB-no-data-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.RCB-no-data-description {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+}
+
+

package/components/NotificationComponent/notificationComponent.css

@@ -0,0 +1 @@
+.RCB-notif{padding:10px}.RCB-notif-success{color:#129274;border:1px solid #2cb292;background-color:#b7d2cb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75190;background-color:#fff9fc}.RCB-notif-warning{color:#445870;border:solid 1px #f09c0a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #509DB9;background-color:#DFF6FF}

package/components/NotificationComponent/notificationTheme.scss

@@ -0,0 +1,38 @@
+.RCB {
+    &-notif {
+        padding: 10px;
+        border-radius: 3px;
+
+        &-success {
+            color: #6DB886;
+            border: solid 1px #6DB886;
+            background-color: #DEF9E7;
+        }
+
+        &-error {
+            color: #CA4646;
+            border: solid 1px #CA4646;
+            background-color: #FFE4E4;
+            ;
+        }
+
+        &-warning {
+            color: #D5A555;
+            border: solid 1px #D5A555;
+            background-color: #FFF8EC;
+        }
+
+        &-info {
+            color: #3E71F2;
+            border: solid 1px #3E71F2;
+            background-color: #E7EDFF;
+        }
+    }
+}
+
+.notif-wrapper{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}

package/components/PIDItemComponent/PIDItemComponent.js

@@ -0,0 +1,82 @@
+"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$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,
+    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,
+    _data$selectedItems = data.selectedItems,
+    serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems;
+
+  // 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 || {};
+  var updatedSelectedItems = paginationType !== 'SERVER' ? clientSelectedItems : serverSelectedItems || [];
+
+  // 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];
+
+  // Check if the item is selected    
+  var isItemSelected = updatedSelectedItems.find(function (item) {
+    return item[uniqueIdMap] === uniqueId;
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-list-item RCB-pid-dd-item ".concat(isItemSelected ? "selected" : ""),
+    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/PIDItemComponentCore.scss

@@ -0,0 +1,36 @@
+.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-product-image {
+    height: 35px;
+    margin-right: 5px;
+    -o-object-fit: contain;
+    object-fit: contain;
+    width: 30px;
+  }
+
+  .RCB-title {
+    font-size: 12px;
+    font-weight: 600;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  .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/PageLoader/pageLoaderCore.scss

@@ -0,0 +1,34 @@
+.page-loader {
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader-wrapper {
+  text-align: center;
+}
+
+.loader-header {
+  color: #17173A;
+  font-weight: 600;
+  font-size: 16px;
+  margin-top: 15px;
+}
+
+.loader-messages {
+  color: #6F6F8D;
+  margin-top: 5px;
+  font-weight: 400;
+  font-size: 14px;
+  transition: opacity 0.4s ease-in-out;
+
+  &.fade-in {
+    opacity: 1;
+  }
+
+  &.fade-out {
+    opacity: 0;
+  }
+}

package/components/ProgressBar/progressBarCore.scss

@@ -0,0 +1,22 @@
+.RCB {
+    &-progress-bar {
+        width: 100%;
+        position: relative;
+        background: #ccc;
+
+        &.custom-warning {
+            background: #FFCF5C;
+        }
+
+        &.custom-error {
+            background: #F05C5C;
+        }
+    }
+
+    &-progress-value {
+        height: 100%;
+        position: absolute;
+        top: 0;
+        background: #3d9565;
+    }
+}