sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/components/SalesAndROI.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SalesAndROI = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ExportIcon = _interopRequireDefault(require("./icons/ExportIcon"));
+var _NoDataFoundMessage = require("./NoDataFoundMessage");
+var _CommonFunctions = require("./CommonFunctions");
+var _SalesAndROI = require("./SalesAndROI.style");
+const SalesAndROI = props => {
+  const {
+    title,
+    dotCut,
+    currencySign,
+    currencyType,
+    width,
+    height,
+    textColor,
+    salesData,
+    showBanner,
+    noDataText,
+    onBannerClick,
+    showBorderShadow
+  } = props;
+  const getTextBefore = dataItem => {
+    let newTextBefore = '';
+    if (dataItem.textBefore) {
+      newTextBefore = dataItem.textBefore;
+    } else if (currencySign) {
+      newTextBefore = (0, _CommonFunctions.getCurrencySign)(currencyType, dataItem.value);
+    } else {
+      newTextBefore = '';
+    }
+    return newTextBefore;
+  };
+  const displayItem = dataItem => {
+    var _dataItem$value;
+    return /*#__PURE__*/_react.default.createElement(_SalesAndROI.ItemContainer, {
+      id: "ItemContainer"
+    }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.ItemTitle, {
+      id: "ItemTitle"
+    }, dataItem.name), /*#__PURE__*/_react.default.createElement(_SalesAndROI.FormattedValue, {
+      id: "FormattedValue"
+    }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, {
+      id: "TextBeforeAndAfterValue"
+    }, getTextBefore(dataItem)), dotCut ? (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value) : (0, _CommonFunctions.getNumberWithCommas)(dataItem.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(dataItem.value) : '', /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, null, dataItem.textAfter)));
+  };
+  return /*#__PURE__*/_react.default.createElement(_SalesAndROI.ControlsContainer, {
+    id: "ControlsContainer",
+    height: height,
+    width: width,
+    textColor: textColor,
+    showBorderShadow: showBorderShadow
+  }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.TitleAndValueContainer, {
+    id: "TitleAndValueContainer"
+  }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.Title, {
+    id: "Title"
+  }, title), showBanner && /*#__PURE__*/_react.default.createElement(_SalesAndROI.OutBanner, {
+    id: "OutBanner",
+    onClick: () => onBannerClick({
+      eventName: 'onBannerClick'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
+    color: textColor
+  }), "View By Banner")), (salesData === null || salesData === void 0 ? void 0 : salesData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_SalesAndROI.ItemsContainer, {
+    id: "ItemsContainer"
+  }, salesData === null || salesData === void 0 ? void 0 : salesData.map(dataItem => displayItem(dataItem))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+    noDataText: noDataText
+  }));
+};
+exports.SalesAndROI = SalesAndROI;
+var _default = exports.default = SalesAndROI;
+SalesAndROI.defaultProps = {
+  title: 'SALES',
+  dotCut: false,
+  currencySign: false,
+  currencyType: 'USD',
+  salesData: [],
+  width: '100%',
+  height: '100%',
+  textColor: '#212121',
+  showBanner: true,
+  noDataText: '',
+  onBannerClick: () => {},
+  showBorderShadow: true
+};

package/dist/stories/components/SalesAndROI.style.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleAndValueContainer = exports.Title = exports.TextBeforeAndAfterValue = exports.OutBanner = exports.ItemsContainer = exports.ItemTitle = exports.ItemContainer = exports.FormattedValue = exports.ControlsContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
+  // position: relative;
+  display: flex;
+  flex-direction: column;
+  font-family: "Poppins", sans-serif;
+  color: ${props => props.textColor};
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: white;
+  box-shadow: ${props => props.showBorderShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null};
+  border-radius: 12px;
+`;
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;  
+  padding: 0; 
+`;
+const ItemsContainer = exports.ItemsContainer = _styledComponents.default.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* Two columns */
+  padding: 20px;
+  gap: 10px;
+  width: 90%;
+  height: 100%;
+`;
+const ItemContainer = exports.ItemContainer = _styledComponents.default.div`
+  display: flex;  
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+`;
+const Title = exports.Title = _styledComponents.default.h4`
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const ItemTitle = exports.ItemTitle = _styledComponents.default.h4`
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div`
+  font-weight: 500;
+  font-size: 40px;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  @media (max-width: 1536px) {
+    font-size: 24px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 20px;
+  }
+`;
+const OutBanner = exports.OutBanner = _styledComponents.default.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: ${props => props.textColor};
+  cursor: pointer;
+  @media (max-width: 1536px) {
+    font-size: 13px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+  > svg {
+    width: 14px;
+    height: 14px;
+    @media (max-width: 1536px) {
+      width: 13px;
+      height: 13px;
+    }
+    @media (max-width: 1366px) {
+      width: 12px;
+      height: 12px;
+    }
+  }
+`;
+const TextBeforeAndAfterValue = exports.TextBeforeAndAfterValue = _styledComponents.default.span`
+  font-weight: 500;
+  font-size: 16px;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 11px;
+  }
+`;

package/dist/stories/components/SalesSplit.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _framerMotion = require("framer-motion");
+var _SalesSplit = require("./SalesSplit.style");
+var _NoDataFoundMessage = require("./NoDataFoundMessage");
+const SalesSplit = props => {
+  const {
+    title,
+    data,
+    lowLimit,
+    barHeight
+  } = props;
+  const [tooltip, setTooltip] = (0, _react.useState)(null);
+  const [barHeightState, setBarHeightState] = (0, _react.useState)(barHeight);
+  const barRefs = (0, _react.useRef)([]); // Array to store refs for each bar
+  const barsContainerRef = (0, _react.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+
+  // Filter data based on lowLimit
+  const filteredData = data.filter(item => item.value >= lowLimit);
+
+  // Calculate the total value of all bars
+  const totalValue = filteredData.reduce((sum, item) => sum + item.value, 0);
+
+  // Reset tooltip when height changes
+  (0, _react.useEffect)(() => {
+    setBarHeightState(barHeight);
+    setTooltip(null);
+  }, [barHeight]);
+
+  // Function to render Tooltip
+  const renderTooltip = item => {
+    if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
+      const top = `${tooltipPosition.y}px`;
+      const left = `${tooltipPosition.x - 10}px`;
+      return /*#__PURE__*/_react.default.createElement(_SalesSplit.TooltipContainer, {
+        className: "TooltipContainer",
+        top: top,
+        left: left
+      }, item.label, ' ', "-", ' ', /*#__PURE__*/_react.default.createElement("span", null, Math.round(item.value / totalValue * 100), "%"));
+    }
+    return null;
+  };
+
+  // Function to render the bars and BarsContainer
+  const renderBars = () => /*#__PURE__*/_react.default.createElement(_SalesSplit.BarsContainer, {
+    ref: barsContainerRef,
+    className: "BarsContainer",
+    height: barHeightState
+  }, filteredData.map((item, index) => {
+    const barWidth = item.value / totalValue * 100;
+    return /*#__PURE__*/_react.default.createElement(_SalesSplit.BarWrapper, {
+      className: "BarWrapper"
+      // eslint-disable-next-line react/no-array-index-key
+      ,
+      key: index,
+      width: `${barWidth}%`,
+      height: barHeightState
+    }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_SalesSplit.BarContainer, {
+      ref: el => {
+        barRefs.current[index] = el;
+      } // Attach ref
+      ,
+      className: "BarContainer",
+      height: barHeightState,
+      color: item.color,
+      initial: {
+        width: '0%'
+      },
+      animate: {
+        width: '100%'
+      },
+      exit: {
+        width: '0%'
+      },
+      transition: {
+        duration: 0.4
+      },
+      onMouseEnter: e => {
+        var _barRefs$current$inde;
+        const barRect = (_barRefs$current$inde = barRefs.current[index]) === null || _barRefs$current$inde === void 0 ? void 0 : _barRefs$current$inde.getBoundingClientRect();
+        if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
+          setTooltip({
+            label: `${item.label} - ${Math.round(item.value / totalValue * 100)}%`
+          });
+          setTooltipPosition({
+            x: e.clientX,
+            y: e.clientY
+          });
+        }
+      },
+      onMouseLeave: e => {
+        var _barRefs$current$inde2;
+        const barRect = (_barRefs$current$inde2 = barRefs.current[index]) === null || _barRefs$current$inde2 === void 0 ? void 0 : _barRefs$current$inde2.getBoundingClientRect();
+        if (!barRect || e.clientX < barRect.x || e.clientX > barRect.x + barRect.width || e.clientY < barRect.y || e.clientY > barRect.y + barRect.height) {
+          setTooltip(null);
+        }
+      },
+      onMouseMove: e => {
+        var _barRefs$current$inde3;
+        const barRect = (_barRefs$current$inde3 = barRefs.current[index]) === null || _barRefs$current$inde3 === void 0 ? void 0 : _barRefs$current$inde3.getBoundingClientRect();
+        if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
+          setTooltipPosition({
+            x: e.clientX,
+            y: e.clientY
+          });
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_SalesSplit.BarLabel, {
+      className: "BarLabel"
+    }, Math.round(item.value / totalValue * 100), "%")), renderTooltip(item)));
+  }));
+
+  // Function to render the Legend Area
+  const renderLegend = () => /*#__PURE__*/_react.default.createElement(_SalesSplit.LegendContainer, {
+    className: "LegendContainer"
+  }, filteredData.map((item, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_SalesSplit.LegendItem, {
+    className: "LegendItem",
+    key: index
+  }, /*#__PURE__*/_react.default.createElement(_SalesSplit.LegendColorBox, {
+    className: "LegendColorBox",
+    style: {
+      backgroundColor: item.color
+    }
+  }), /*#__PURE__*/_react.default.createElement(_SalesSplit.LegendLabel, {
+    className: "LegendLabel"
+  }, item.label))));
+  return /*#__PURE__*/_react.default.createElement(_SalesSplit.SalesSplitContainer, {
+    className: "SalesSplitContainer"
+  }, !data || data.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+    className: "NoDataFoundMessage",
+    noDataText: ""
+  }) : /*#__PURE__*/_react.default.createElement(_SalesSplit.SalesSplitWrapper, {
+    className: "SalesSplitWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_SalesSplit.TitleContainer, {
+    className: "TitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_SalesSplit.Title, {
+    className: "Title"
+  }, title)), renderBars(), renderLegend()));
+};
+var _default = exports.default = SalesSplit;

package/dist/stories/components/SalesSplit.style.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipContainer = exports.TitleContainer = exports.Title = exports.SalesSplitWrapper = exports.SalesSplitContainer = exports.LegendLabel = exports.LegendItem = exports.LegendContainer = exports.LegendColorBox = exports.BarsContainer = exports.BarWrapper = exports.BarLabel = exports.BarContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _framerMotion = require("framer-motion");
+const SalesSplitContainer = exports.SalesSplitContainer = _styledComponents.default.div`
+
+  display: flex;  
+  flex-direction: column;  
+  justify-content: flex-start;  
+  position: relative;
+  height: ${props => props.height};
+  width: 100%;  
+  font-family: "Poppins", sans-serif;
+  
+`;
+
+// Wrapper with padding
+const SalesSplitWrapper = exports.SalesSplitWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;  
+  height: ${props => props.height};  
+`;
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; 
+  margin: 0 0 10px 0; 
+`;
+const Title = exports.Title = _styledComponents.default.h3`
+  user-select: none;
+  text-align: left;
+  margin: 0;
+  font-family: "Poppins", sans-serif;   
+  font-weight: 400;
+  font-size: 18px;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const BarsContainer = exports.BarsContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height:  ${props => props.height};
+`;
+const BarWrapper = exports.BarWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+  justify-content: flex-start;
+  align-items: stretch; /* Ensures full vertical stretch */
+  width: ${props => props.width};
+  height: ${props => props.height};
+`;
+const BarContainer = exports.BarContainer = (0, _styledComponents.default)(_framerMotion.motion.div)`
+  background-color: ${props => props.color};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${props => props.height};
+  width: 0%; /* Starts at 0% for animation */  
+`;
+const BarLabel = exports.BarLabel = _styledComponents.default.span`
+  color: white;
+  font-size: 14px;
+  font-weight: 400; 
+  user-select: none;
+`;
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
+  position: absolute;
+
+  top: ${props => props.top};
+  left: ${props => props.left};  
+  transition: left 0.8s ease, top 0.8s ease;
+
+  background-color: white;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 21px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: "Poppins", sans-serif;
+  user-select: none;
+
+  // Make the percentage bold 
+  span {
+     font-weight: bold;
+  }
+
+  // treeangle on the bottom
+  /* &:before {
+    content: "";
+    position: absolute;
+    bottom: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 12px solid white;
+  } */
+`;
+const LegendContainer = exports.LegendContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 24px; 
+  margin-top: 10px;  
+  width: 100%;  
+  flex-shrink: 0;  
+`;
+const LegendItem = exports.LegendItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+`;
+const LegendColorBox = exports.LegendColorBox = _styledComponents.default.div`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  background-color: ${props => props.color};
+  border-radius: 2px;
+`;
+const LegendLabel = exports.LegendLabel = _styledComponents.default.span`  
+  user-select: none;
+  font-family: "Poppins", sans-serif;
+  color: #212121;
+  font-weight: 400; 
+  font-size: 14px; 
+  @media (max-width: 1536px) {
+    font-size: 12px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
+  }
+`;

package/dist/stories/components/SearchInput.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SearchInput = require("./SearchInput.style");
+var _SearchIcon = _interopRequireDefault(require("./icons/SearchIcon"));
+const SearchInput = props => {
+  const {
+    placeholder,
+    onTyping,
+    width,
+    height,
+    className
+  } = props;
+  const handleInputChange = e => {
+    onTyping(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_SearchInput.TextFieldContainer, {
+    className: className,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.TextFieldInput, {
+    type: "search",
+    height: height,
+    placeholder: placeholder,
+    onChange: handleInputChange
+  }), /*#__PURE__*/_react.default.createElement(_SearchIcon.default, null));
+};
+var _default = exports.default = SearchInput;
+SearchInput.defaultProps = {
+  placeholder: 'Search',
+  width: '100%',
+  height: '40px',
+  onTyping: () => {},
+  className: ''
+};

package/dist/stories/components/SearchInput.style.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextFieldInput = exports.TextFieldContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div`
+    position: relative;
+    width: ${props => props.width};
+    > svg {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 10px;
+    
+    }
+`;
+const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input`
+  width: 100%;
+  height: ${props => props.height};
+  font-size: 14px;
+  font-weight: 400;
+  padding: 6px 16px;
+  border-radius: 8px;
+  border: 1px solid #B1B1B1;
+  background: transparent;
+  text-indent: 14px;
+  &:hover, 
+  &:focus {
+    border: 1px solid #212121;
+  }
+  &::placeholder {
+    color: #B1B1B1;
+  }
+`;