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

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}.view-more-link .RCB-inline-modal-btn{display:flex;justify-content:space-between}

package/components/Form/summarySelection.scss

@@ -0,0 +1,106 @@
+.summary-tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  width: calc(100% - 40px);
+
+  
+  .RCB-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    gap: 6px;
+  }
+  .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;
+  
+  &:active {
+    color: #0056b3;
+  }
+  .RCB-inline-modal-btn {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+

package/components/Form/variables.scss

@@ -0,0 +1,116 @@
+@import "../../../node_modules/@unbxd-ui/unbxd-style-dictionary/build/scss/_variables.scss";
+$base-font-color: $color-font-base;
+$pageheader-font-color: $color-font-base;
+$link-font-color: #3E71F2;
+$success-font-color: #2cb291;
+$error-font-color: #C13535;
+$thin-line-color: $color-border-tabs;
+$dashed-line-color: #A9B9C9;
+
+/* form styles */
+$form-label-color: #415867;
+$form-placeholder-color: #ACACAC;
+$form-dd-plaholder-color: #7F97A7;
+$color-background-button-primary-active: #3E71F2;
+$color-base-blue-cornflower-dark: #3865D9;
+$color-border-button-primary-hover: #3E71F2;
+$color-font-active: #3E71F2;
+$color-font-link: #3E71F2;
+$color-border-button-danger-hover: #ae3636;
+
+/* button styles */
+$primary-btn-bg: #3E71F2;
+$primary-btn-hover-bg: $color-background-button-primary-hover;
+$secondary-btn-bg: $color-background-button-secondary-base;
+$secondary-btn-color: $color-font-secondary;
+$danger-btn-bg: $color-base-red-dark;
+$danger-btn-hover-bg: $color-border-button-danger-hover;
+
+/* header styles */
+$site-switcher-bg: #F9FBFF;
+$site-switcher-color: $color-font-button-secondary;
+$header-bg-color: #F7F9FB;
+$header-font-color: #687F8F;
+$header-selected-bg: #FFF;
+$header-selected-color: $color-background-button-primary-active;
+$preview-btn-bg: #FFFFFF;
+$preview-btn-color: $color-font-link;
+$user-logo-bg: #F2F5F8;
+$user-logo-color: #3A4C59;
+$header-dd-color: #5D7483;
+
+/* horizontal navbar styles */
+$horiz-nav-color: $color-font-secondary;
+$level1-nav-selected-bg: $color-background-button-primary-base;
+$level1-nav-selected-color: #FFFFFF;
+
+/* vertical navbar styles */
+$vertical-nav-body-bg: #FFF;
+$vertical-nav-border: $color-border-tabs ;
+$vertical-nav-selected-bg: #FFF;
+$vertical-nav-color: $color-font-secondary;
+$vertical-nav-selected-color: $color-background-button-primary-base;
+
+$vertical-step-line-default : #dadada;
+
+/* modal styles */
+$modal-header-bg: #FFF;
+$modal-body-bg: #F7F9FB;
+
+/* App z-index levels
+
+page level modal : 50
+manage / profile dropdown : 40
+sticky header section : 30
+inline modals in body section : 20
+*/
+
+$pageModal-zIndex: 50;
+$headerDD-zIndex: 40;
+$stickyHeader-zIndex: 30;
+$bodyInlineModal-zIndex: 20;
+
+/* Login styles */
+$login-heading-color: #415867;
+$login-subheading-color: #289EAB;
+$login-message-color: #5D7483;
+$tnc-text-color: #8399AE;
+$unbxd-tnc-color: #289EAB;
+
+/* Feature Docs Component */
+$doc-title-color: #314857;
+$doc-subtitle-color: #415867;
+$doc-body-color: #5D7483;
+$doc-footer-bg: #F2F5F8;
+
+/* Steps widget styles */
+$step-header-color: #7F97A7;
+$step-selected-color: #314857;
+
+/* line icon text component styles */
+$round-color: #7F97A7;
+$line-color: $color-border-tabs;
+$disc-color: #5D7483;
+
+/* dataCenter style */
+$light-sky-blue: #67B8DC;
+$light-purpule: #6794DD;
+$dark-purpulr: #6771DC;
+
+/* integration landing page styles */
+$integration-page-bg: #F7F9FB;
+$integration-title-color: #314857;
+$integration-card-bg: #FFF;
+$integration-card-title-bg: #F2F5F8;
+$integration-card-title-color: #1D2E44;
+$integration-color: #5D7483;
+$integration-card-link: $color-font-link;
+
+/* yellow tag style */
+$color-yellow-border-tag: rgba(220, 137, 0, .16);
+$color-yellow-text-tag: #c58c2d;
+$color-yellow-background-tag: #fffaf2;
+
+/*misc colors */
+$color-light-blue: #C1CFF4;
+$color-border-grey: #DDE2EE;

package/components/InlineModal/inlineModal.css

@@ -0,0 +1 @@
+.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-btn{display:inline-block;background:#FFF;border:1px solid #eee;padding:10px;border-radius:3px;cursor:pointer}.RCB-inline-modal-body{position:absolute;background:#FFF;border:1px solid #efeeee;box-shadow:0 9px 12px 0 rgba(0,0,0,0.15);z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}

package/components/InlineModal/inlineModalCore.scss

@@ -0,0 +1,40 @@
+.RCB {
+    &-inline-modal {
+        position: relative;
+        display: inline-block;
+
+        &.hover-open {
+            .RCB-inline-modal-body {
+                display: none;
+            }
+        
+            &:hover {
+                .RCB-inline-modal-body {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    &-inline-modal-body {
+        background-color: #fff;
+        border: 1px solid #DDE2EE;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        box-shadow: 0px 5px 15px 0px rgba(23, 23, 58, 0.1490196078);
+        max-height: 300px;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+
+        &.RCB-align-left {
+            left: 0;
+        }
+
+        &.RCB-align-right {
+            right: 0;
+        }
+    }
+}

package/components/InlineModal/inlineModalTheme.scss

@@ -0,0 +1,16 @@
+.RCB {
+    &-inline-modal-btn {
+        display: inline-block;
+        background: #FFF;
+        border: 1px solid #eee;
+        padding: 10px;
+        border-radius: 3px;
+        cursor: pointer;
+    }
+
+    &-inline-modal-body {
+        background: #FFF;
+        border: 1px solid #efeeee;
+        box-shadow: 0 9px 12px 0 rgba(0,0,0,0.15);
+    }
+}

package/components/Link/linkCore.scss

@@ -0,0 +1,66 @@
+/**
+    Core styles for Link component - essential styles for functionality
+**/
+
+.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;
+    
+    &-disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+    
+    // Text decoration variations
+    &-underline {
+        text-decoration: underline;
+    }
+    
+    &-none {
+        text-decoration: none;
+    }
+    
+    &-overline {
+        text-decoration: overline;
+    }
+    
+    &-line-through {
+        text-decoration: line-through;
+    }
+    
+    &-underline-on-hover {
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    
+    &-external-icon {
+        margin-left: 4px;
+        font-size: 0.8em;
+        line-height: 1;
+        display: inline;
+    }
+    
+    // Size variations
+    &-small {
+        font-size: 12px;
+        line-height: 1.4;
+    }
+    
+    &-medium {
+        font-size: 14px;
+        line-height: 1.5;
+    }
+    
+    &-large {
+        font-size: 16px;
+        line-height: 1.6;
+    }
+}