@unbxd-ui/unbxd-react-components 0.2.221 → 0.3.1

package/components/Tooltip/Tooltip.stories.js

@@ -3,21 +3,386 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SimpleUsage = void 0;
+exports["default"] = exports.RichContent = exports.ResponsiveBehavior = exports.ProgrammaticControl = exports.LongContent = exports.DirectionsDemo = exports.Default = exports.CustomStyling = exports.CollisionDetection = exports.ClickActivated = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var CustomActivator = function CustomActivator() {
-  return /*#__PURE__*/_react["default"].createElement("span", null, "Hover over me");
-};
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-    tooltipActivator: /*#__PURE__*/_react["default"].createElement(CustomActivator, null)
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: "https://cdn1.iconfinder.com/data/icons/hawcons/32/700231-icon-61-warning-512.png",
-    width: 20
-  }), "This is a sample tooltip");
-};
-var _default = exports["default"] = {
-  title: "Tooltip"
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'Components/Tooltip',
+  component: _Tooltip["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['right', 'bottom', 'left', 'top'],
+      description: 'Preferred direction for tooltip placement. Will auto-adjust based on available space.'
+    },
+    activatorAction: {
+      control: 'radio',
+      options: ['click', 'hover'],
+      description: 'Action that triggers the tooltip'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    },
+    TooltipActivator: {
+      control: false,
+      description: 'Custom component to act as the tooltip activator'
+    },
+    children: {
+      control: false,
+      description: 'Tooltip content'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Custom activator components
+var InfoIcon = function InfoIcon() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '20px',
+      height: '20px',
+      borderRadius: '50%',
+      backgroundColor: '#3E71F2',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '14px',
+      cursor: 'pointer'
+    }
+  }, "i");
+};
+var QuestionIcon = function QuestionIcon() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '20px',
+      height: '20px',
+      borderRadius: '50%',
+      backgroundColor: '#6c757d',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '14px',
+      cursor: 'pointer'
+    }
+  }, "?");
+};
+
+// Default story with hover action (now defaults to top)
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '100px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "top"
+    }, "This is a default tooltip that appears on hover (top direction)"));
+  }
+};
+
+// Story demonstrating preferred directions
+var DirectionsDemo = exports.DirectionsDemo = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '100px',
+        padding: '100px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", null, "Prefers Right"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "right"
+    }, "Tooltip prefers right direction")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", null, "Prefers Left"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "left"
+    }, "Tooltip prefers left direction")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", null, "Prefers Top"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "top"
+    }, "Tooltip prefers top direction")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", null, "Prefers Bottom"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "bottom"
+    }, "Tooltip prefers bottom direction")));
+  }
+};
+
+// Story demonstrating collision detection and auto-adjustment
+var CollisionDetection = exports.CollisionDetection = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'relative',
+        width: '100%',
+        height: '400px',
+        border: '2px dashed #ccc',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '10px',
+        left: '10px',
+        color: '#666',
+        fontSize: '12px'
+      }
+    }, "Viewport boundaries - tooltips will auto-adjust"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '20px',
+        left: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "top"
+    }, "Top-left corner: Will switch to bottom/right due to space constraints")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '20px',
+        right: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "right"
+    }, "Top-right corner: Will switch to left/bottom due to space constraints")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        bottom: '20px',
+        left: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "bottom"
+    }, "Bottom-left corner: Will switch to top/right due to space constraints")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        bottom: '20px',
+        right: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "left"
+    }, "Bottom-right corner: Will switch to top/left due to space constraints")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "top"
+    }, "Center: Should maintain preferred direction")));
+  }
+};
+
+// Story with click action
+var ClickActivated = exports.ClickActivated = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '100px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      activatorAction: "click",
+      TooltipActivator: InfoIcon,
+      direction: "bottom"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, "This tooltip is activated by clicking")));
+  }
+};
+
+// Story with custom activator and rich content
+var RichContent = exports.RichContent = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '100px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      TooltipActivator: QuestionIcon,
+      direction: "bottom"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '15px',
+        maxWidth: '250px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", {
+      style: {
+        margin: '0 0 10px 0',
+        color: '#333'
+      }
+    }, "Help Information"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '0 0 10px 0',
+        lineHeight: '1.4'
+      }
+    }, "This tooltip contains rich HTML content with styling and formatting."), /*#__PURE__*/_react["default"].createElement("ul", {
+      style: {
+        margin: '0',
+        paddingLeft: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("li", null, "Dynamic positioning"), /*#__PURE__*/_react["default"].createElement("li", null, "Collision detection"), /*#__PURE__*/_react["default"].createElement("li", null, "Viewport awareness")))));
+  }
+};
+
+// Story showing custom styling
+var CustomStyling = exports.CustomStyling = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '100px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      TooltipActivator: function TooltipActivator() {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            padding: '8px 12px',
+            backgroundColor: '#28a745',
+            color: 'white',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontSize: '14px'
+          }
+        }, "Hover me");
+      },
+      direction: "right"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '12px',
+        backgroundColor: '#28a745',
+        color: 'white',
+        borderRadius: '4px',
+        boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
+        fontSize: '14px'
+      }
+    }, "Custom styled tooltip with dynamic positioning")));
+  }
+};
+
+// Story demonstrating programmatic control
+var ProgrammaticControl = exports.ProgrammaticControl = {
+  render: function render() {
+    var tooltipRef = _react["default"].useRef();
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '100px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        var _tooltipRef$current;
+        return (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.hideToolTip();
+      },
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#dc3545',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        marginRight: '10px'
+      }
+    }, "Hide Tooltip"), /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: '14px',
+        color: '#666'
+      }
+    }, "Click the icon below, then use this button to hide it")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      ref: tooltipRef,
+      activatorAction: "click",
+      TooltipActivator: InfoIcon,
+      direction: "bottom"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, "This tooltip can be controlled programmatically")));
+  }
+};
+
+// Story demonstrating responsive behavior
+var ResponsiveBehavior = exports.ResponsiveBehavior = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '20px',
+        padding: '10px',
+        backgroundColor: '#f8f9fa',
+        borderRadius: '4px',
+        fontSize: '14px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Resize the window"), " to see how tooltips adapt to different viewport sizes"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "left"
+    }, "Left tooltip that adapts to viewport"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "top"
+    }, "Top tooltip that adapts to viewport"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "right"
+    }, "Right tooltip that adapts to viewport"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "bottom"
+    }, "Bottom tooltip that adapts to viewport")));
+  }
+};
+
+// Story with long content to test positioning
+var LongContent = exports.LongContent = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '100px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "bottom"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        maxWidth: '300px',
+        padding: '15px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", {
+      style: {
+        margin: '0 0 10px 0'
+      }
+    }, "Long Content Example"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '0 0 10px 0',
+        lineHeight: '1.4'
+      }
+    }, "This is a tooltip with much longer content to demonstrate how the dynamic positioning system handles larger tooltip bodies. The system will automatically calculate the best position based on available space and viewport boundaries."), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '0',
+        lineHeight: '1.4'
+      }
+    }, "The arrow will always point correctly to the activator element regardless of the final position chosen by the collision detection system."))));
+  }
 };

package/components/Tooltip/index.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var _default = exports["default"] = _Tooltip["default"];

package/components/Tooltip/tooltipCore.css

@@ -1 +1 @@
-.RCB-tooltip{display:inline-block;position:relative}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-hover{display:inline-block}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-click{display:inline-block}.RCB-tooltip-body{display:none;position:absolute;z-index:1}
+.RCB-tooltip{display:inline-block;position:relative}.RCB-tooltip-btn{display:inline-block;cursor:pointer;position:relative;z-index:1}.RCB-tooltip-body{display:none;position:absolute;background:#fff;padding:10px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:1000;max-width:300px;word-wrap:break-word;opacity:0;transition:opacity 0.2s ease-in-out;user-select:none;line-height:1.4;color:#333;font-size:14px}.RCB-tooltip-body.RCB-tooltip-hover,.RCB-tooltip-body.RCB-tooltip-click{display:block;opacity:1}.RCB-tooltip-arrow{width:0;height:0;border-style:solid;pointer-events:none;position:absolute}.RCB-tooltip-arrow-top{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;border-bottom:0px solid transparent;filter:drop-shadow(0 1px 1px #e5e7e8)}.RCB-tooltip-arrow-bottom{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-top:0px solid transparent;filter:drop-shadow(0 -1px 1px #e5e7e8)}.RCB-tooltip-arrow-left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:0px solid transparent;border-left:10px solid #fff;filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.1))}.RCB-tooltip-arrow-right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;border-left:0px solid transparent;filter:drop-shadow(-2px 2px 2px rgba(0,0,0,0.1))}.demo-tooltip .RCB-tooltip-body{min-width:235px}.demo-tooltip .RCB-tooltip-btn{border:none;background-color:transparent}

package/components/Tooltip/tooltipTheme.css

@@ -1 +1 @@
-.RCB-tooltip-btn{display:inline-block;font-style:italic;font-size:12px;color:#9199AA;background-color:#F8FAFB;border:1px solid #D0DDE2;padding:0px 6px;border-radius:50%;text-align:center}.RCB-tooltip-body{background:#FFF;padding:10px;border-radius:4px;box-shadow:0px 1px 7px 0px #ccc;margin-left:15px}
+.RCB-tooltip-btn{display:inline-block;font-style:italic;font-size:12px;color:#9199AA;background-color:#F8FAFB;border:1px solid #D0DDE2;padding:0px 6px;border-radius:50%;text-align:center}.RCB-tooltip-body{background:#FFF;padding:10px;border-radius:4px;box-shadow:0px 1px 7px 0px #ccc}

package/components/common/NoDataDropdown.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var NoDataDropdown = function NoDataDropdown(props) {
+  var noDataTitle = props.noDataTitle,
+    _props$searchQuery = props.searchQuery,
+    searchQuery = _props$searchQuery === void 0 ? "" : _props$searchQuery,
+    _props$feature = props.feature,
+    feature = _props$feature === void 0 ? [] : _props$feature,
+    _props$noDataUrl = props.noDataUrl,
+    noDataUrl = _props$noDataUrl === void 0 ? "" : _props$noDataUrl,
+    _props$noDataUrlText = props.noDataUrlText,
+    noDataUrlText = _props$noDataUrlText === void 0 ? "" : _props$noDataUrlText;
+  var queryNotFound = function queryNotFound(searchQuery) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "query-not-found"
+    }, "Couldn't find", /*#__PURE__*/_react["default"].createElement("div", {
+      className: "dd-search-query"
+    }, " \"", searchQuery, "\" "));
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "nodata-wrapper-dd flex-center-column"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "nodata-dd-icon"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "nodata-content"
+  }, !searchQuery && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "nodata__title"
+  }, " ", noDataTitle, " "), searchQuery && queryNotFound(searchQuery), feature.length > 0 && /*#__PURE__*/_react["default"].createElement("div", null, " ", "in ".concat(feature, " Fields"), " ")), noDataUrl && noDataUrlText && /*#__PURE__*/_react["default"].createElement("a", {
+    href: noDataUrl,
+    target: "_blank",
+    className: "nodata-redirect-link"
+  }, " ", noDataUrlText, " "));
+};
+NoDataDropdown.propTypes = {
+  noDataTitle: _propTypes["default"].string,
+  searchQuery: _propTypes["default"].string,
+  noDataUrl: _propTypes["default"].string,
+  noDataUrlText: _propTypes["default"].string
+};
+NoDataDropdown.defaultProps = {
+  noDataTitle: "No Data Available"
+};
+var _default = exports["default"] = NoDataDropdown;

package/components/common/common.css

@@ -0,0 +1 @@
+.nodata-wrapper-dd{padding:16px}.nodata-wrapper-dd .nodata-content{color:#6F6F8D;font-family:"Nunito Sans", "Helvetica Neue", "Helvetica", "Roboto", "sans-serif";font-size:14px;font-weight:600}.nodata-wrapper-dd .nodata-content .dd-search-query{color:#17173A}