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

package/components/Link/Link.stories.js

@@ -0,0 +1,489 @@
+"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.WithUnderlineOnHover = exports.WithTextDecoration = exports.Success = exports.Sizes = exports.Secondary = exports.PropValidationTests = exports.Primary = exports.Interactive = exports.ExternalLinks = exports.Disabled = exports.Danger = exports.ButtonLinks = exports.AllVariations = exports.AllAppearances = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Link = _interopRequireWildcard(require("./Link"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// Styles are loaded globally in .storybook/preview.js
+var _default = exports["default"] = {
+  title: 'Components/Link',
+  component: _Link["default"],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      story: {
+        inline: true
+      }
+    },
+    backgrounds: {
+      "default": 'light',
+      values: [{
+        name: 'light',
+        value: '#ffffff'
+      }, {
+        name: 'dark',
+        value: '#333333'
+      }]
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: Object.values(_Link.LinkAppearance),
+      description: 'The visual style of the link'
+    },
+    size: {
+      control: 'select',
+      options: Object.values(_Link.LinkSize),
+      description: 'The size of the link'
+    },
+    target: {
+      control: 'select',
+      options: Object.values(_Link.LinkTarget),
+      description: 'The target attribute for anchor links'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the link is disabled'
+    },
+    textDecoration: {
+      control: 'select',
+      options: ['underline', 'none', 'overline', 'line-through'],
+      description: 'Text decoration style for the link'
+    },
+    underlineOnHover: {
+      control: 'boolean',
+      description: 'Whether to show underline on hover (only if not already underlined)'
+    },
+    external: {
+      control: 'boolean',
+      description: 'Whether this is an external link (shows external icon)'
+    },
+    href: {
+      control: 'text',
+      description: 'URL for the link (renders as anchor tag when provided)'
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Link click handler'
+    },
+    'data-qa-id': {
+      control: 'text',
+      description: 'QA automation identifier for testing'
+    },
+    children: {
+      control: 'text',
+      description: 'Link content'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    }
+  }
+}; // Template for stories
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Link["default"], args);
+};
+
+// Primary link
+var Primary = exports.Primary = Template.bind({});
+Primary.args = {
+  children: 'Primary Link',
+  appearance: _Link.LinkAppearance.primary,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Secondary link
+var Secondary = exports.Secondary = Template.bind({});
+Secondary.args = {
+  children: 'Secondary Link',
+  appearance: _Link.LinkAppearance.secondary,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Danger link
+var Danger = exports.Danger = Template.bind({});
+Danger.args = {
+  children: 'Danger Link',
+  appearance: _Link.LinkAppearance.danger,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Success link
+var Success = exports.Success = Template.bind({});
+Success.args = {
+  children: 'Success Link',
+  appearance: _Link.LinkAppearance.success,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Link with text decoration
+var WithTextDecoration = exports.WithTextDecoration = Template.bind({});
+WithTextDecoration.args = {
+  children: 'Link with custom decoration',
+  textDecoration: 'underline',
+  appearance: _Link.LinkAppearance.primary,
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Link with underline on hover
+var WithUnderlineOnHover = exports.WithUnderlineOnHover = Template.bind({});
+WithUnderlineOnHover.args = {
+  children: 'Hover me to see underline',
+  appearance: _Link.LinkAppearance.primary,
+  underlineOnHover: true,
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// Link sizes
+var Sizes = exports.Sizes = function Sizes() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.SMALL,
+    appearance: _Link.LinkAppearance.primary
+  }, "Small Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.MEDIUM,
+    appearance: _Link.LinkAppearance.primary
+  }, "Medium Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.LARGE,
+    appearance: _Link.LinkAppearance.primary
+  }, "Large Link"));
+};
+
+// Disabled state
+var Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  children: 'Disabled Link',
+  disabled: true,
+  appearance: _Link.LinkAppearance.primary,
+  size: _Link.LinkSize.MEDIUM,
+  textDecoration: 'none',
+  onClick: undefined // Remove interactive behavior for display
+};
+
+// External links
+var ExternalLinks = exports.ExternalLinks = function ExternalLinks() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://google.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.primary
+  }, "External Link with Icon"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://github.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.secondary
+  }, "GitHub Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "/internal-page",
+    appearance: _Link.LinkAppearance.primary
+  }, "Internal Link"));
+};
+
+// All appearances
+var AllAppearances = exports.AllAppearances = function AllAppearances() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary
+  }, "Primary Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary
+  }, "Secondary Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger
+  }, "Danger Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success
+  }, "Success Link"));
+};
+
+// Button-style links (no href)
+var ButtonLinks = exports.ButtonLinks = function ButtonLinks() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    onClick: function onClick() {
+      return alert('Button link clicked!');
+    }
+  }, "Button Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary,
+    onClick: function onClick() {
+      return alert('Router link clicked!');
+    }
+  }, "Router Link"));
+};
+
+// Mixed states and variations
+var AllVariations = exports.AllVariations = function AllVariations() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Regular Links"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary
+  }, "Primary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary
+  }, "Secondary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger
+  }, "Danger"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success
+  }, "Success"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Links with Text Decoration"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "underline"
+  }, "Underlined"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "none"
+  }, "No decoration"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "overline"
+  }, "Overlined"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    textDecoration: "line-through"
+  }, "Line-through"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    underlineOnHover: true
+  }, "Underline on hover"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Disabled Links"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    disabled: true
+  }, "Primary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary,
+    disabled: true
+  }, "Secondary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger,
+    disabled: true
+  }, "Danger"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success,
+    disabled: true
+  }, "Success"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "External Links"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://example.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.primary
+  }, "Example.com"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: "https://github.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    appearance: _Link.LinkAppearance.secondary
+  }, "GitHub"))));
+};
+
+// Prop validation tests
+var PropValidationTests = exports.PropValidationTests = function PropValidationTests() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Text Decoration Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "none"
+  }, "None (default)"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "underline"
+  }, "Underline"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "overline"
+  }, "Overline"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    textDecoration: "line-through"
+  }, "Line-through"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Appearance Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary
+  }, "Primary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.secondary
+  }, "Secondary"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger
+  }, "Danger"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.success
+  }, "Success"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Size Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      alignItems: 'baseline'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.SMALL
+  }, "Small"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.MEDIUM
+  }, "Medium"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    size: _Link.LinkSize.LARGE
+  }, "Large"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Target Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.SELF,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Self"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.BLANK,
+    external: true,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Blank"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.PARENT,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Parent"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    target: _Link.LinkTarget.TOP,
+    onClick: undefined,
+    tabIndex: -1
+  }, "Top"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Boolean Props Validation"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    disabled: true
+  }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    external: true,
+    href: "javascript:void(0)",
+    target: _Link.LinkTarget.BLANK
+  }, "External"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    className: "custom-class"
+  }, "Custom Class"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 1rem 0'
+    }
+  }, "Combined Props Test"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.primary,
+    size: _Link.LinkSize.LARGE,
+    textDecoration: "underline",
+    href: "https://example.com",
+    target: _Link.LinkTarget.BLANK,
+    external: true
+  }, "All Props Combined"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    appearance: _Link.LinkAppearance.danger,
+    size: _Link.LinkSize.SMALL,
+    textDecoration: "line-through",
+    disabled: true
+  }, "Disabled with Decoration"))));
+};
+
+// Interactive example with all controls
+var Interactive = exports.Interactive = Template.bind({});
+Interactive.args = {
+  children: 'Interactive Link',
+  appearance: _Link.LinkAppearance.primary,
+  size: _Link.LinkSize.MEDIUM,
+  disabled: false,
+  textDecoration: 'none',
+  underlineOnHover: false,
+  external: false,
+  href: '',
+  target: _Link.LinkTarget.SELF,
+  'data-qa-id': 'interactive-link'
+};

package/components/Link/index.js

@@ -0,0 +1,28 @@
+"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
+});
+Object.defineProperty(exports, "LinkAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _Link.LinkAppearance;
+  }
+});
+Object.defineProperty(exports, "LinkSize", {
+  enumerable: true,
+  get: function get() {
+    return _Link.LinkSize;
+  }
+});
+Object.defineProperty(exports, "LinkTarget", {
+  enumerable: true,
+  get: function get() {
+    return _Link.LinkTarget;
+  }
+});
+exports["default"] = void 0;
+var _Link = _interopRequireWildcard(require("./Link"));
+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); }
+var _default = exports["default"] = _Link["default"];

package/components/Link/linkCore.css

@@ -0,0 +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: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/Link/linkTheme.css

@@ -0,0 +1 @@
+.RCB-link-primary{color:#3e71f2}.RCB-link-primary:hover{color:#3865d9}.RCB-link-primary:active{color:#3e71f2}.RCB-link-primary:visited{color:#6f42c1}.RCB-link-secondary{color:#6c757d;text-decoration:none}.RCB-link-secondary:hover{color:#495057;text-decoration:underline}.RCB-link-secondary:active{color:#343a40}.RCB-link-danger{color:#dc3545;text-decoration:none}.RCB-link-danger:hover{color:#c82333;text-decoration:underline}.RCB-link-danger:active{color:#bd2130}.RCB-link-success{color:#28a745;text-decoration:none}.RCB-link-success:hover{color:#218838;text-decoration:underline}.RCB-link-success:active{color:#1e7e34}.RCB-link-external .RCB-link-external-icon{color:currentColor;opacity:0.7}.RCB-link-external:hover .RCB-link-external-icon{opacity:1}

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, " ")));
+}