sag_components 2.0.0-beta29 → 2.0.0-beta291

package/dist/stories/components/SalesAndROI.js

@@ -1,89 +0,0 @@
-"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

@@ -1,111 +0,0 @@
-"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

@@ -1,153 +0,0 @@
-"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

@@ -1,150 +0,0 @@
-"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

@@ -1,39 +0,0 @@
-"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

@@ -1,37 +0,0 @@
-"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;
-  }
-`;