sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/CommonFunctions.js

@@ -3,48 +3,80 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
-var getCurrencySign = function getCurrencySign(currencyTypeToConvert, value) {
-  if (!currencyTypeToConvert) return "";
-  var currencySign = "";
-  var currencyFormatter = new Intl.NumberFormat("en-US", {
-    style: "currency",
+exports.isNumericValue = exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
+const getCurrencySign = (currencyTypeToConvert, value) => {
+  if (value === undefined || value === null) {
+    return '';
+  }
+  // eslint-disable-next-line no-restricted-globals
+  if (isNaN(parseFloat(value))) {
+    return '';
+  }
+  if (!currencyTypeToConvert) return '';
+  let currencySign = '';
+  const currencyFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
     currency: currencyTypeToConvert
   });
-  currencySign = currencyFormatter.format(value).substring(0, 1);
+  currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
   return currencySign;
 };
 exports.getCurrencySign = getCurrencySign;
-var getFormattedUnits = function getFormattedUnits(num) {
+const getFormattedUnits = num => {
+  if (num === undefined || num === null) {
+    return '';
+  }
+  // eslint-disable-next-line no-restricted-globals
+  if (isNaN(parseFloat(num))) {
+    return '';
+  }
   if (Math.abs(num) >= 1000000000) {
-    return "B";
+    return 'B';
   }
   if (Math.abs(num) >= 1000000) {
-    return "M";
+    return 'M';
   }
   if (Math.abs(num) >= 1000) {
-    return "K";
+    return 'K';
   }
-  return "";
+  return '';
 };
 exports.getFormattedUnits = getFormattedUnits;
-var getFormattedValue = function getFormattedValue(num) {
+const getFormattedValue = num => {
+  if (num === undefined || num === null) {
+    return null;
+  }
+  // eslint-disable-next-line no-restricted-globals
+  if (isNaN(parseFloat(num))) {
+    return null;
+  }
   if (Math.abs(num) >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, '');
   }
   if (Math.abs(num) >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, "");
+    return (num / 1000000).toFixed(1).replace(/\.0$/, '');
   }
   if (Math.abs(num) >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, "");
+    return (num / 1000).toFixed(1).replace(/\.0$/, '');
   }
   return num;
 };
 exports.getFormattedValue = getFormattedValue;
-var getNumberWithCommas = function getNumberWithCommas(x) {
-  x = x.toString();
-  var pattern = /(-?\d+)(\d{3})/;
-  while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
-  return x;
+const getNumberWithCommas = x => {
+  let param = x.toString();
+  const pattern = /(-?\d+)(\d{3})/;
+  while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
+  return param;
+};
+exports.getNumberWithCommas = getNumberWithCommas;
+const isNumericValue = num => {
+  if (num === undefined || num === null) {
+    return false;
+  }
+  // eslint-disable-next-line no-restricted-globals
+  if (isNaN(parseFloat(num))) {
+    return false;
+  }
+  return true;
 };
-exports.getNumberWithCommas = getNumberWithCommas;
+exports.isNumericValue = isNumericValue;

package/dist/stories/components/Datepicker/Datepicker.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Datepicker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _DatePicker = require("@mui/x-date-pickers/DatePicker");
+var _demo = require("@mui/x-date-pickers/internals/demo");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _Datepicker = require("./Datepicker.style");
+var _CalendarIcon = require("../../icons/CalendarIcon");
+/**
+ *  SAG Datepicker
+ */
+const Datepicker = _ref => {
+  let {
+    width = '100%',
+    text,
+    format = 'MMM DD, YYYY',
+    shape,
+    onChange,
+    value,
+    disableClearable,
+    disabled = false,
+    labelColor = '#1B30AA'
+  } = _ref;
+  /**
+   *  SAG Datepicker
+   */
+
+  const [valueState, setvalueState] = _react.default.useState(null);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      setvalueState((0, _dayjs.default)(value));
+    } else {
+      setvalueState(null);
+    }
+  }, [value]);
+  (0, _react.useEffect)(() => {}, [valueState]);
+  const getTextFieldStyle = () => {
+    if (shape === 'round') {
+      // round
+      return {
+        '& .MuiInputLabel-inputRoot': {
+          fontFamily: 'Poppins',
+          fontSize: '14px',
+          fontWidth: 400,
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
+          width
+          // color: labelColor,
+        },
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
+          fontFamily: 'Poppins',
+          fontSize: '14px',
+          fontWidth: 400,
+          width,
+          // color: labelColor,
+          legend: {
+            marginLeft: '10px'
+          },
+          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
+          '&[class*="MuiOutlinedInput-root"] .MuiInputLabel-input:first-of-type': {
+            // Default left padding is 6px
+            paddingLeft: '10px'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
+            // color: labelColor,
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
+            // color: labelColor,
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+            // color: labelColor,
+          }
+        },
+        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
+          // Default transform is "translate(14px, 20px) scale(1)""
+          // This lines up the label with the initial cursor position in the input
+          // after changing its padding-left.
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575'
+        },
+        '& .MuiInputLabel-outlined': {
+          fontFamily: 'Poppins',
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575',
+          fontWidth: 400,
+          fontSize: '18px'
+        },
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: 0,
+          background: 'white'
+          // color: labelColor,
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_Datepicker.DatepickerContainer, {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
+    dateAdapter: _AdapterDayjs.AdapterDayjs,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
+    components: ['DatePicker'],
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+    value: valueState,
+    clearable: true,
+    disabled: disabled,
+    onChange: newValue => {
+      setvalueState(newValue);
+      onChange({
+        newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
+      });
+    },
+    sx: getTextFieldStyle(),
+    label: text,
+    slots: {
+      openPickerIcon: _CalendarIcon.CalendarIcon
+    },
+    slotProps: {
+      textField: {
+        fullWidth: true
+      },
+      actionBar: {
+        actions: ['clear']
+      }
+    },
+    format: format
+  }))));
+};
+exports.Datepicker = Datepicker;
+var _default = exports.default = Datepicker;

package/dist/stories/components/Datepicker/Datepicker.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SmallSquare = exports.RegularFormat = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Datepicker = require("./Datepicker");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG Core/Datepicker',
+  component: _Datepicker.Datepicker,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: {
+        type: 'text'
+      },
+      description: 'width of the input field',
+      defaultValue: '300px'
+    },
+    text: {
+      name: 'text',
+      control: {
+        type: 'text'
+      },
+      description: 'text inside of the input field',
+      defaultValue: 'Search...'
+    },
+    shape: {
+      control: {
+        type: 'radio'
+      },
+      options: ['round', 'square'],
+      description: 'shape: round/square'
+    },
+    format: {
+      name: 'format',
+      control: {
+        type: 'text'
+      },
+      description: 'valid date format '
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'returns an option (object) selected by the user'
+    },
+    value: {
+      name: 'value',
+      control: {
+        type: 'text'
+      },
+      description: 'set value (correct date format)'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    }
+  }
+};
+const SmallSquare = exports.SmallSquare = {
+  args: {
+    width: '300px',
+    text: 'From',
+    shape: 'round',
+    format: 'MMM DD, YYYY',
+    value: '2023-08-16',
+    disabled: false,
+    labelColor: '#066768'
+  }
+};
+const RegularFormat = exports.RegularFormat = {
+  args: {
+    width: '100%',
+    text: 'From',
+    shape: 'round',
+    format: 'YYYY-MM-DD',
+    value: '2023-08-16',
+    disabled: false,
+    labelColor: '#066768'
+  }
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatepickerContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+// import './font.css';
+
+const DatepickerContainer = exports.DatepickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  text-align: left;\n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);

package/dist/stories/components/Datepicker.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Datepicker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _DatePicker = require("@mui/x-date-pickers/DatePicker");
+var _demo = require("@mui/x-date-pickers/internals/demo");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _Datepicker = require("./Datepicker.style");
+var _CalendarIcon = require("./icons/CalendarIcon");
+/**
+ *  SAG Datepicker
+ */
+const Datepicker = _ref => {
+  let {
+    width = '100%',
+    text,
+    format = 'MMM DD, YYYY',
+    shape,
+    onChange,
+    value,
+    disableClearable,
+    disabled = false,
+    labelColor = '#1B30AA'
+  } = _ref;
+  /**
+   *  SAG Datepicker
+   */
+
+  const [valueState, setvalueState] = _react.default.useState(null);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      setvalueState((0, _dayjs.default)(value));
+    } else {
+      setvalueState(null);
+    }
+  }, [value]);
+  (0, _react.useEffect)(() => {}, [valueState]);
+  const getTextFieldStyle = () => {
+    if (shape === 'round') {
+      // round
+      return {
+        '& .MuiInputLabel-inputRoot': {
+          fontFamily: 'Poppins',
+          fontSize: '14px',
+          fontWidth: 400,
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
+          width
+          // color: labelColor,
+        },
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
+          fontFamily: 'Poppins',
+          fontSize: '14px',
+          fontWidth: 400,
+          width,
+          // color: labelColor,
+          legend: {
+            marginLeft: '10px'
+          },
+          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
+          '&[class*="MuiOutlinedInput-root"] .MuiInputLabel-input:first-of-type': {
+            // Default left padding is 6px
+            paddingLeft: '10px'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
+            // color: labelColor,
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
+            // color: labelColor,
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+            // color: labelColor,
+          }
+        },
+        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
+          // Default transform is "translate(14px, 20px) scale(1)""
+          // This lines up the label with the initial cursor position in the input
+          // after changing its padding-left.
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575'
+        },
+        '& .MuiInputLabel-outlined': {
+          fontFamily: 'Poppins',
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575',
+          fontWidth: 400,
+          fontSize: '18px'
+        },
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: 0,
+          background: 'white'
+          // color: labelColor,
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_Datepicker.DatepickerContainer, {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
+    dateAdapter: _AdapterDayjs.AdapterDayjs,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
+    components: ['DatePicker'],
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+    value: valueState,
+    clearable: true,
+    disabled: disabled,
+    onChange: newValue => {
+      setvalueState(newValue);
+      onChange({
+        newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
+      });
+    },
+    sx: getTextFieldStyle(),
+    label: text,
+    slots: {
+      openPickerIcon: _CalendarIcon.CalendarIcon
+    },
+    slotProps: {
+      textField: {
+        fullWidth: true
+      },
+      actionBar: {
+        actions: ['clear']
+      }
+    },
+    format: format
+  }))));
+};
+exports.Datepicker = Datepicker;
+var _default = exports.default = Datepicker;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatepickerContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+// import './font.css';
+
+const DatepickerContainer = exports.DatepickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  text-align: left;\n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);

package/dist/stories/components/DownloadProgress/DownloadProgress.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ErrorIcon = require("../../icons/ErrorIcon");
+var _SucceededIcon = require("../../icons/SucceededIcon");
+var _ProgressBar = _interopRequireDefault(require("../ProgressBar/ProgressBar"));
+var _DownloadProgress = require("./DownloadProgress.style");
+const DownloadProgress = props => {
+  const {
+    title,
+    succeededMessage,
+    failedMessage,
+    downloadStatus,
+    showShadow,
+    progressPercent,
+    refreshInterval,
+    progressBarColor,
+    onTryAgainClick,
+    className
+  } = props;
+  const [DownloadStatus, setDownloadStatus] = (0, _react.useState)(downloadStatus);
+  (0, _react.useEffect)(() => {
+    setDownloadStatus(downloadStatus);
+  }, [downloadStatus]);
+  const displayProgressContent = () => {
+    let content = '';
+    switch (DownloadStatus) {
+      case 'inProgress':
+        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+          className: "ProgressBar",
+          color: progressBarColor,
+          progressPercent: progressPercent,
+          refreshInterval: refreshInterval,
+          width: "100%"
+        }));
+        break;
+      case 'succeeded':
+        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_succeeded"
+        }, succeededMessage), /*#__PURE__*/_react.default.createElement(_SucceededIcon.SucceededIcon, {
+          color: "#92CF17",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      case 'failed':
+        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_failed"
+        }, failedMessage), /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_TryAgain",
+          onClick: () => onTryAgainClick({
+            eventName: 'onTryAgainClick'
+          })
+        }, "Try again"), /*#__PURE__*/_react.default.createElement(_ErrorIcon.ErrorIcon, {
+          color: "#FF3949",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return content;
+  };
+  return /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressMainContainer, {
+    className: className,
+    showShadow: showShadow
+  }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressTitle, {
+    className: "DownloadProgressTitle"
+  }, title), displayProgressContent());
+};
+var _default = exports.default = DownloadProgress;
+DownloadProgress.defaultProps = {
+  title: 'CPG presentation shopper marketing, supplier name ',
+  succeededMessage: 'File Downloaded',
+  failedMessage: 'Something went wrong',
+  downloadStatus: 'inProgress',
+  showShadow: true,
+  progressPercent: 0,
+  refreshInterval: 100,
+  progressBarColor: '#92CF17',
+  onTryAgainClick: () => {},
+  className: 'DownloadProgressMainContainer'
+};