@unbxd-ui/unbxd-react-components 0.3.0 → 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/Link.js

@@ -0,0 +1,139 @@
+"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"] = exports.LinkTarget = exports.LinkSize = exports.LinkAppearance = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _excluded = ["children", "className", "disabled", "appearance", "size", "onClick", "href", "target", "textDecoration", "underlineOnHover", "external", "data-qa-id"];
+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); }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/** LinkAppearance enum */
+var LinkAppearance = exports.LinkAppearance = {
+  primary: "primary",
+  secondary: "secondary",
+  danger: "danger",
+  success: "success"
+};
+
+/** LinkSize enum */
+var LinkSize = exports.LinkSize = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+
+/** LinkTarget enum */
+var LinkTarget = exports.LinkTarget = {
+  SELF: "_self",
+  BLANK: "_blank",
+  PARENT: "_parent",
+  TOP: "_top"
+};
+
+/**
+ * 
+ * Displays a Link component that looks and behaves like a traditional link
+ */
+var Link = function Link(props) {
+  var children = props.children,
+    className = props.className,
+    disabled = props.disabled,
+    appearance = props.appearance,
+    size = props.size,
+    onClick = props.onClick,
+    href = props.href,
+    target = props.target,
+    textDecoration = props.textDecoration,
+    underlineOnHover = props.underlineOnHover,
+    external = props.external,
+    dataQaId = props["data-qa-id"],
+    restProps = _objectWithoutProperties(props, _excluded);
+  var linkClassName = ["RCB-link", "RCB-link-".concat(appearance), "RCB-link-".concat(size), "RCB-link-".concat(textDecoration), underlineOnHover && textDecoration !== "underline" && "RCB-link-underline-on-hover", disabled && "RCB-link-disabled", external && "RCB-link-external", className].filter(Boolean).join(" ");
+  var handleClick = function handleClick(e) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  var linkProps = _objectSpread({
+    className: linkClassName,
+    onClick: handleClick
+  }, restProps);
+
+  // Always render as anchor tag for proper link appearance and semantics
+  // If no href provided, use href="#" and prevent default to handle as click handler
+  var linkHref = href || (onClick && !disabled ? "#" : undefined);
+  var handleLinkClick = function handleLinkClick(e) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    // Prevent navigation for click handlers without href and execute onClick
+    if (!href && onClick) {
+      e.preventDefault();
+      onClick(e);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement("a", _extends({}, linkProps, {
+    href: disabled ? undefined : linkHref,
+    target: target,
+    rel: target === LinkTarget.BLANK ? "noopener noreferrer" : undefined,
+    onClick: handleLinkClick,
+    role: !href && onClick ? "button" : undefined,
+    tabIndex: disabled ? -1 : undefined,
+    "data-qa-id": dataQaId
+  }), children, external && target === LinkTarget.BLANK && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "RCB-link-external-icon",
+    "aria-hidden": "true"
+  }, " \u2197"));
+};
+Link.propTypes = {
+  /** Add any additional classes to Link component */
+  className: _propTypes["default"].string,
+  /** Boolean indicating whether the link should render as disabled */
+  disabled: _propTypes["default"].bool,
+  /** Text decoration style for the link */
+  textDecoration: _propTypes["default"].oneOf(["underline", "none", "overline", "line-through"]),
+  /** Boolean indicating whether to show underline on hover (only if not already underlined) */
+  underlineOnHover: _propTypes["default"].bool,
+  /** Boolean indicating whether this is an external link (adds external icon) */
+  external: _propTypes["default"].bool,
+  /** URL for the link */
+  href: _propTypes["default"].string,
+  /** QA automation identifier */
+  "data-qa-id": _propTypes["default"].string,
+  /** Target for the link when href is provided */
+  target: _propTypes["default"].oneOf(Object.values(LinkTarget)),
+  appearance: _propTypes["default"].oneOf(Object.values(LinkAppearance)),
+  /** String indicating the size of the Link */
+  size: _propTypes["default"].oneOf(Object.values(LinkSize)),
+  /** Link onClick handler */
+  onClick: _propTypes["default"].func,
+  /** Link content */
+  children: _propTypes["default"].node.isRequired
+};
+Link.defaultProps = {
+  onClick: undefined,
+  appearance: LinkAppearance.primary,
+  size: LinkSize.MEDIUM,
+  className: "",
+  disabled: false,
+  textDecoration: "none",
+  underlineOnHover: false,
+  external: false,
+  target: LinkTarget.SELF
+};
+var _default = exports["default"] = Link;