sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/DownloadProgress/DownloadProgress.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ErrorIcon = require("../../icons/ErrorIcon");
-var _SucceededIcon = require("../../icons/SucceededIcon");
-var _ProgressBar = _interopRequireDefault(require("../ProgressBar/ProgressBar"));
-var _DownloadProgress = require("./DownloadProgress.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 = <_DownloadProgress.DownloadProgressContentContainer className="DownloadProgressContentContainer">
-            <_ProgressBar.default className="ProgressBar" color={progressBarColor} progressPercent={progressPercent} refreshInterval={refreshInterval} width="100%" />
-          </_DownloadProgress.DownloadProgressContentContainer>;
-        break;
-      case 'succeeded':
-        content = <_DownloadProgress.DownloadProgressContentContainer className="DownloadProgressContentContainer">
-            <_DownloadProgress.DownloadProgressStatusMessage className="DownloadProgressStatusMessage_succeeded">
-              {succeededMessage}
-            </_DownloadProgress.DownloadProgressStatusMessage>
-            <_SucceededIcon.SucceededIcon color="#92CF17" width="12px" height="12px" />
-          </_DownloadProgress.DownloadProgressContentContainer>;
-        break;
-      case 'failed':
-        content = <_DownloadProgress.DownloadProgressContentContainer className="DownloadProgressContentContainer">
-            <_DownloadProgress.DownloadProgressStatusMessage className="DownloadProgressStatusMessage_failed">
-              {failedMessage}
-            </_DownloadProgress.DownloadProgressStatusMessage>
-            <_DownloadProgress.DownloadProgressStatusMessage className="DownloadProgressStatusMessage_TryAgain" onClick={() => onTryAgainClick({
-            eventName: 'onTryAgainClick'
-          })}>
-              Try again
-            </_DownloadProgress.DownloadProgressStatusMessage>
-            <_ErrorIcon.ErrorIcon color="#FF3949" width="12px" height="12px" />
-          </_DownloadProgress.DownloadProgressContentContainer>;
-        break;
-      default:
-        content = '';
-        break;
-    }
-    return content;
-  };
-  return <_DownloadProgress.DownloadProgressMainContainer className={className} showShadow={showShadow}>
-      <_DownloadProgress.DownloadProgressTitle className="DownloadProgressTitle">
-        {title}
-      </_DownloadProgress.DownloadProgressTitle>
-      {displayProgressContent()}
-    </_DownloadProgress.DownloadProgressMainContainer>;
-};
-var _default = exports.default = DownloadProgress;
-DownloadProgress.propTypes = {
-  title: _propTypes.default.string,
-  succeededMessage: _propTypes.default.string,
-  failedMessage: _propTypes.default.string,
-  downloadStatus: _propTypes.default.string,
-  showShadow: _propTypes.default.bool,
-  progressPercent: _propTypes.default.number,
-  refreshInterval: _propTypes.default.number,
-  progressBarColor: _propTypes.default.string,
-  onTryAgainClick: _propTypes.default.func,
-  className: _propTypes.default.string
-};
-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'
-};

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

@@ -1,109 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Succeeded = exports.InProgress = exports.Failed = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DownloadProgress = _interopRequireDefault(require("./DownloadProgress"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG BI/DownloadProgress',
-  component: _DownloadProgress.default,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title text ',
-      defaultValue: ''
-    },
-    succeededMessage: {
-      name: 'succeededMessage',
-      control: {
-        type: 'text'
-      },
-      description: 'succeededMessage text ',
-      defaultValue: ''
-    },
-    downloadStatus: {
-      name: 'downloadStatus',
-      control: {
-        type: 'radio'
-      },
-      options: ['inProgress', 'succeeded', 'failed'],
-      description: 'succeededMessage text '
-    },
-    showShadow: {
-      name: 'showShadow',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show Shadow  '
-    },
-    progressPercent: {
-      name: 'progressPercent',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100
-      },
-      description: 'progressPercent - set this value to increase or decrease progress current value - in percent 0% - 100%. Allows control of the progressBar'
-    },
-    refreshInterval: {
-      name: 'refreshInterval',
-      control: {
-        type: 'number'
-      },
-      description: 'refreshInterval - in miliseconds - speed of progress bar'
-    },
-    onTryAgainClick: {
-      action: 'onTryAgainClick',
-      description: 'returns an event onTryAgainClick object when user clicks on a button'
-    },
-    className: {
-      name: 'className',
-      control: {
-        type: 'text'
-      },
-      description: 'title text ',
-      defaultValue: ''
-    }
-  }
-};
-const Template = args => <_DownloadProgress.default {...args} />;
-const InProgress = exports.InProgress = Template.bind({});
-InProgress.args = {
-  title: 'CPG presentation shopper marketing , supplier name ',
-  succeededMessage: 'File Downloaded',
-  failedMessage: 'Something went wrong',
-  downloadStatus: 'inProgress',
-  showShadow: true,
-  progressPercent: 0,
-  refreshInterval: 100,
-  progressBarColor: '#92CF17'
-};
-const Succeeded = exports.Succeeded = Template.bind({});
-Succeeded.args = {
-  title: 'CPG report shopper marketing, supplier name',
-  succeededMessage: 'File Downloaded',
-  failedMessage: 'Something went wrong',
-  downloadStatus: 'succeeded',
-  showShadow: false,
-  progressPercent: 0,
-  refreshInterval: 100,
-  progressBarColor: '#92CF17'
-};
-const Failed = exports.Failed = Template.bind({});
-Failed.args = {
-  title: 'CPG presentation shopper marketing , supplier name ',
-  succeededMessage: 'File Downloaded',
-  failedMessage: 'Something went wrong',
-  downloadStatus: 'failed',
-  showShadow: false,
-  progressPercent: 0,
-  refreshInterval: 100,
-  progressBarColor: '#92CF17'
-};

package/dist/components/DownloadProgress/DownloadProgress.style.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DownloadProgressTitle = exports.DownloadProgressStatusMessage = exports.DownloadProgressMainContainer = exports.DownloadProgressContentContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DownloadProgressMainContainer = exports.DownloadProgressMainContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-size: 12px;
-  font-weight: 400;
-  color: #212121;
-  line-height: 14px;
-  position: relative;
-  margin: 0;
-  padding: 10px;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: ${props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : ''};
-`;
-const DownloadProgressContentContainer = exports.DownloadProgressContentContainer = _styledComponents.default.div` 
-  display: flex;
-  align-items: center;
-  margin: 0 10px;
-  gap: 10px;
-`;
-const DownloadProgressTitle = exports.DownloadProgressTitle = _styledComponents.default.h3`  
-  font-weight: 400;
-  margin: 10px;  
-`;
-const DownloadProgressStatusMessage = exports.DownloadProgressStatusMessage = _styledComponents.default.h3`   
-  margin: 3px 0;
-  &.DownloadProgressStatusMessage_succeeded{
-    font-weight: 500;  
-  }
-  &.DownloadProgressStatusMessage_failed{
-    color: #7F7D7D;
-    font-weight: 400;  
-  }
-  &.DownloadProgressStatusMessage_TryAgain{
-    color: #1B30AA;
-    font-weight: 400;
-    text-decoration: underline;  
-    &:hover {
-    background-Color: #f1f1f1;
-    cursor: pointer;
-  } 
-  }
-`;

package/dist/components/Dropdown/Dropdown.js

@@ -1,199 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Dropdown = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _styles = require("@mui/material/styles");
-var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
-var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
-var _ArrowDropDownIcon = require("../../icons/ArrowDropDownIcon");
-var _Dropdown = require("./Dropdown.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const icon = <_CheckBoxOutlineBlank.default fontSize="small" />;
-const checkedIcon = <_CheckBox.default fontSize="small" />;
-
-// import './fonts/Poppins-Regular.ttf';
-
-/**
- *  SAG Dropdown
- */
-const Dropdown = ({
-  width = '100%',
-  size,
-  text,
-  shape,
-  placeHolder,
-  multiSelect,
-  showPopupIcon,
-  showSearchIcon,
-  options,
-  onChange,
-  onInputChange,
-  labelColor = '#1B30AA',
-  required,
-  inputRef,
-  defaultValue,
-  allowedInput = 'all',
-  reset = false,
-  disableClearable = false,
-  disabled = false,
-  dropdownListfontSize = '14px',
-  placeHolderFontSize = '14px'
-}) => {
-  /**
-   *  SAG Dropdown
-   */
-
-  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
-  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)();
-  (0, _react.useEffect)(() => {
-    const delayDebounceFn = setTimeout(() => {
-      onInputChange(currentInputValue);
-    }, 1000);
-    return () => clearTimeout(delayDebounceFn);
-  }, [currentInputValue]);
-  const theme = (0, _styles.createTheme)({
-    components: {
-      MuiFormLabel: {
-        styleOverrides: {
-          asterisk: {
-            color: '#db3131'
-          }
-        }
-      }
-    }
-  });
-
-  // Single Text Style
-  const getTextFieldStyleSingle = () => {
-    if (shape === 'round') {
-      // round
-      return {
-        '& .MuiOutlinedInput-root': {
-          borderRadius: '12px',
-          legend: {
-            marginLeft: '10px'
-          }
-        },
-        '& .MuiAutocomplete-inputRoot': {
-          paddingLeft: '10px !important',
-          borderRadius: '12px',
-          // 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"] .MuiAutocomplete-input:first-of-type': {
-            // Default left padding is 6px
-            paddingLeft: '10px'
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#E7E7E7'
-          },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor
-          },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : 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' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
-        },
-        '& .MuiInputLabel-outlined': {
-          paddingLeft: '10px',
-          color: disabled ? '#E7E7E7' : labelColor,
-          fontSize: '18px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: '6px',
-          background: 'white'
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  const onInputChangeHandler = (event, newInputValue) => {
-    setCurrentInputValue({
-      syntheticBaseEvent: event,
-      inputValue: newInputValue
-    });
-  };
-  const onChangeHandler = (event, newValue) => {
-    setSelectedOptionsState(newValue);
-    onChange({
-      syntheticBaseEvent: event,
-      newValue
-    });
-  };
-  const isInputAllowed = inputChar => {
-    const NUMERIC_REGEX = /^[0-9-]+$/;
-    const ALPHA_REGEX = /^[a-zA-Z]+$/;
-    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
-    switch (allowedInput) {
-      case 'all':
-        return true;
-      case 'alpha':
-        if (ALPHA_REGEX.test(inputChar)) return true;
-        return false;
-      case 'numeric':
-        if (NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      case 'alphaNumeric':
-        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      default:
-        return true;
-    }
-  };
-
-  // --------------------------------------- DROPDOWN SINGLE --------------------------------
-  const getAutocompleteSingle = () => {
-    return <_styles.ThemeProvider theme={theme}>
-        <_Autocomplete.default key={reset} onChange={(event, newValue) => {
-        onChangeHandler(event, newValue);
-      }} onInputChange={(event, newInputValue) => {
-        onInputChangeHandler(event, newInputValue);
-      }} disabled={disabled} disablePortal disableClearable={disableClearable} defaultValue={defaultValue} id="combo-box" options={options} popupIcon={showPopupIcon ? <_ArrowDropDownIcon.ArrowDropDownIcon width="0.5em" height="0.5em" /> : null} forcePopupIcon="auto" renderInput={params => <_TextField.default {...params} onKeyDown={event => {
-        if (!isInputAllowed(event.key)) {
-          event.preventDefault();
-        }
-      }} required={required} label={text} inputRef={inputRef || null} size={size} sx={getTextFieldStyleSingle()} placeholder={placeHolder} InputProps={{
-        ...params.InputProps,
-        style: {
-          fontSize: placeHolderFontSize,
-          fontFamily: 'Poppins'
-        },
-        startAdornment: showSearchIcon ? <_InputAdornment.default position="start">
-                    <_Search.default fontSize="medium" />
-                  </_InputAdornment.default> : null
-      }} />} ListboxProps={{
-        style: {
-          fontSize: dropdownListfontSize,
-          // default: 14px
-          fontFamily: 'Poppins'
-        }
-      }} />
-      </_styles.ThemeProvider>;
-  };
-
-  // --------------------------------- MAIN -------------------------------------
-  return <_Dropdown.DropdownContainer width={width}>
-      {getAutocompleteSingle()}
-    </_Dropdown.DropdownContainer>;
-};
-exports.Dropdown = Dropdown;
-var _default = exports.default = Dropdown;