sag_components 1.0.976 → 1.0.978

package/dist/stories/components/InputOld/InputOld.stories.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _InputOld = _interopRequireDefault(require("./InputOld"));
-// Input.stories.js
-// Update the path based on your actual file structure
-var _default = exports.default = {
-  title: 'SAG Core/InputOld',
-  component: _InputOld.default,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      name: 'label',
-      type: {
-        name: 'string'
-      },
-      description: 'Label for the input',
-      defaultValue: {
-        summary: 'Input Label'
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    value: {
-      name: 'value',
-      type: {
-        name: 'string'
-      },
-      description: 'Value of the input',
-      defaultValue: {
-        summary: ''
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    onChange: {
-      name: 'onChange',
-      type: {
-        name: 'function'
-      },
-      description: 'Callback function for input change',
-      defaultValue: {
-        summary: '() => {}'
-      },
-      control: {
-        type: null
-      }
-    },
-    borderRadius: {
-      name: 'borderRadius',
-      type: {
-        name: 'string'
-      },
-      description: 'Border radius of the input',
-      defaultValue: {
-        summary: ''
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    required: {
-      name: 'required',
-      type: {
-        name: 'boolean'
-      },
-      description: 'Indicates if the input is required',
-      defaultValue: {
-        summary: false
-      },
-      control: {
-        type: 'boolean'
-      }
-    }
-  }
-}; // Story for the default state
-const Default = exports.Default = {
-  args: {
-    label: 'Username',
-    borderRadius: '4px',
-    required: true,
-    width: '200px',
-    height: '40px',
-    placeholder: 'Enter your username',
-    disabled: false,
-    password: false,
-    error: false,
-    errorMessage: '',
-    type: 'text',
-    borderColor: '#000000',
-    textColor: '#000000'
-  }
-};

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

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const Container = exports.Container = _styledComponents.default.div`
-  position: relative;
-  margin-bottom: 20px;
-  width: ${props => props.width || '100%'};
-  height: ${props => props.height || '40px'};
-`;
-const StyledInput = exports.StyledInput = _styledComponents.default.input`
-  padding: 10px;
-  font-size: 16px;
-  border: 2px solid
-    ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor || '#bdbdbd'};
-  border-radius: ${props => props.borderRadius || '4px'};
-  outline: none;
-  width: ${props => props.width || '100%'};
-  height: ${props => props.height || '40px'};
-  transition: border-color 0.3s ease;
-  box-sizing: border-box;
-  color: ${props => props.disabled ? '#888' : props.textColor || '#333'};
-  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
-
-  &:focus {
-    border-color: ${props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2'};
-  }
-`;
-const StyledLabel = exports.StyledLabel = _styledComponents.default.label`
-  font-size: ${props => props.isFocused || props.hasValue ? '12px' : '16px'};
-  padding-inline-end: 5px;
-  padding-inline-start: 5px;
-  margin-right: 10px;
-  color: ${props => props.disabled ? '#888' : props.textColor || '#333'};
-  background-color: white;
-  position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
-  left: 10px;
-  transform: translateY(-50%);
-  transition: top 0.3s ease, font-size 0.3s ease;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-`;
-const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span`
-  color: red;
-  margin-left: 5px;
-`;
-const EyeIcon = exports.EyeIcon = _styledComponents.default.div`
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translateY(-50%);
-  cursor: pointer;
-  color: ${props => props.textColor || '#888'};
-
-  &:hover {
-    color: ${props => props.textColor || '#333'};
-  }
-`;
-const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div`
-  font-size: 12px;
-  color: red;
-  margin-top: 5px;
-`;

package/dist/stories/components/KpiFilter/KpiFilter.js

@@ -1,330 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.KpiFilter = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CheckBox = require("../CheckBox/CheckBox");
-var _CheckBoxButton = require("../CheckBoxButton/CheckBoxButton");
-var _KpiFilter = require("./KpiFilter.style");
-/* KpiFilter */
-const KpiFilter = props => {
-  let {
-    height
-  } = props;
-  const {
-    width,
-    mainTitle,
-    periodTitle,
-    kpiData,
-    buttonsIconColor,
-    buttonsBorderColor,
-    buttonsTextColorChecked,
-    buttonsTextColorUnchecked,
-    buttonsBackgroundColorChecked,
-    buttonsBackgroundColorUnchecked,
-    onClick,
-    onClickPeriod,
-    selectAllIgnoreList
-  } = props;
-  const DEFAULT_PERIOD = {
-    weeks4: true,
-    weeks8: false,
-    weeks13: false
-  };
-  const [KpiDataState, setKpiDataState] = (0, _react.useState)(kpiData);
-  const [periodState, setPeriodState] = (0, _react.useState)(DEFAULT_PERIOD);
-
-  // ------------------------- CheckBox Buttons OnClick Handler - Begin ------------------
-  (0, _react.useEffect)(() => {
-    const kpiSelectedData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
-      var _itemColumn$buttonsAr;
-      return (_itemColumn$buttonsAr = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr === void 0 ? void 0 : _itemColumn$buttonsAr.filter(itemButton => itemButton.checked === true || itemButton.secondButtonChecked === true);
-    });
-    const kpiSelectedButtonsLabels = [];
-    for (let i = 0; i < (kpiSelectedData === null || kpiSelectedData === void 0 ? void 0 : kpiSelectedData.length); i++) {
-      for (let j = 0; j < ((_kpiSelectedData$i = kpiSelectedData[i]) === null || _kpiSelectedData$i === void 0 ? void 0 : _kpiSelectedData$i.length); j++) {
-        var _kpiSelectedData$i;
-        if (kpiSelectedData[i][j].label && kpiSelectedData[i][j].checked === true) {
-          kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
-        }
-        if (kpiSelectedData[i][j].secondButtonLabel && kpiSelectedData[i][j].secondButtonChecked === true) {
-          kpiSelectedButtonsLabels.push(''.concat('', kpiSelectedData[i][j].label, ':', kpiSelectedData[i][j].secondButtonLabel));
-        }
-      }
-    }
-    onClick({
-      kpiSelectedButtonsLabels,
-      kpiData: KpiDataState
-    });
-  }, [KpiDataState]);
-  // ------------------------- Buttons OnClick Handler - End ------------------
-
-  const dispalyColumnButtons = function (data, height) {
-    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
-    if (!data || data.length === 0) return;
-    if (data && data.length > 0) {
-      return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonsContainer, {
-        id: "ButtonsContainer",
-        height: height,
-        paddingBottom: paddingBottom
-      }, data === null || data === void 0 ? void 0 : data.map(item => {
-        var _item$marginBottom;
-        return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
-          id: "ButtonContainer",
-          className: item.marginBottom ? 'marginBottom' : '',
-          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : '0px'
-        }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
-          backgroundColorChecked: buttonsBackgroundColorChecked,
-          backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
-          borderColor: buttonsBorderColor,
-          borderRadius: "12px",
-          checked: item.checked,
-          disabled: item.disabled,
-          fontSize: "12px",
-          height: "29px",
-          iconColor: buttonsIconColor,
-          iconSize: "12px",
-          label: item.label,
-          onClick: buttonClicked => {
-            const newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
-              var _itemColumn$buttonsAr2;
-              return {
-                ...itemColumn,
-                buttonsArray: (_itemColumn$buttonsAr2 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr2 === void 0 ? void 0 : _itemColumn$buttonsAr2.map(itemButton => itemButton.label === buttonClicked.label ? {
-                  ...itemButton,
-                  checked: buttonClicked.checked
-                } : {
-                  ...itemButton
-                })
-              };
-            });
-            setKpiDataState(newDataKpi);
-          },
-          textColorChecked: buttonsTextColorChecked,
-          textColorUnchecked: buttonsTextColorUnchecked,
-          width: "100%"
-        }), item.secondButtonLabel ? /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
-          backgroundColorChecked: buttonsBackgroundColorChecked,
-          backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
-          borderColor: buttonsBorderColor,
-          borderRadius: "12px",
-          checked: item.secondButtonChecked,
-          disabled: item.secondButtonDisabled,
-          fontSize: "12px",
-          height: "29px",
-          iconColor: buttonsIconColor,
-          iconSize: "12px",
-          label: ''.concat('', item.label, ':', item.secondButtonLabel),
-          displayLabel: item.secondButtonLabel,
-          onClick: buttonClicked => {
-            const newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
-              var _itemColumn$buttonsAr3;
-              return {
-                ...itemColumn,
-                buttonsArray: (_itemColumn$buttonsAr3 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr3 === void 0 ? void 0 : _itemColumn$buttonsAr3.map(itemButton => ''.concat('', itemButton.label, ':', itemButton.secondButtonLabel) === buttonClicked.label ? {
-                  ...itemButton,
-                  secondButtonChecked: buttonClicked.checked
-                } : {
-                  ...itemButton
-                })
-              };
-            });
-            setKpiDataState(newDataKpi);
-          },
-          textColorChecked: buttonsTextColorChecked,
-          textColorUnchecked: buttonsTextColorUnchecked,
-          width: "100%"
-        }) : '');
-      }));
-    }
-  };
-  const isIncludedInIgnoreList = label => {
-    if (selectAllIgnoreList && selectAllIgnoreList.length > 0) {
-      return selectAllIgnoreList.includes(label);
-    }
-    return false;
-  };
-  const setPeriodSelectAll = selectAllChecked => {
-    const periodCheckedArray = [];
-    const newPeriod = {
-      weeks4: selectAllChecked,
-      weeks8: selectAllChecked,
-      weeks13: selectAllChecked
-    };
-    setPeriodState(newPeriod);
-    if (selectAllChecked) {
-      periodCheckedArray.push('4 weeks', '8 weeks', '13 weeks');
-    }
-    onClickPeriod({
-      periodChecked: periodCheckedArray
-    });
-  };
-  const displayMainTitle = () => /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitleContainer, {
-    id: "MainTitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitle, {
-    id: "MainTitle"
-  }, mainTitle), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
-    id: "CheckBoxContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-    checked: false,
-    colorChecked: buttonsIconColor,
-    colorUnchecked: buttonsIconColor,
-    fontSize: "14px",
-    height: "20px",
-    width: "100%",
-    iconSize: "14px",
-    label: "Select All",
-    onClick: propsSelectAll => {
-      const newData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
-        var _itemColumn$buttonsAr4;
-        return {
-          ...itemColumn,
-          buttonsArray: (_itemColumn$buttonsAr4 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr4 === void 0 ? void 0 : _itemColumn$buttonsAr4.map(itemButton => ({
-            ...itemButton,
-            checked: !(isIncludedInIgnoreList(itemButton.label) || itemButton.checked && itemButton.disabled) ? propsSelectAll.checked : itemButton.checked,
-            secondButtonChecked: !(isIncludedInIgnoreList(itemButton.label) || itemButton.secondButtonChecked && itemButton.secondButtonDisabled) ? propsSelectAll.checked : itemButton.secondButtonChecked.checked
-          }))
-        };
-      });
-      setKpiDataState(newData);
-      setPeriodSelectAll(propsSelectAll.checked);
-    }
-  })));
-  const onClickPeriodHandler = checkBox => {
-    const {
-      label,
-      checked
-    } = checkBox;
-    let newPeriod;
-    const periodCheckedArray = [];
-    switch (label) {
-      case '4 weeks':
-        newPeriod = {
-          ...periodState,
-          weeks4: checked
-        };
-        break;
-      case '8 weeks':
-        newPeriod = {
-          ...periodState,
-          weeks8: checked
-        };
-        break;
-      case '13 weeks':
-        newPeriod = {
-          ...periodState,
-          weeks13: checked
-        };
-        break;
-      default:
-        newPeriod = {
-          ...periodState
-        };
-    }
-    setPeriodState(newPeriod);
-    if (newPeriod.weeks4) periodCheckedArray.push('4 weeks');
-    if (newPeriod.weeks8) periodCheckedArray.push('8 weeks');
-    if (newPeriod.weeks13) periodCheckedArray.push('13 weeks');
-    onClickPeriod({
-      periodChecked: periodCheckedArray
-    });
-  };
-  const displayPeriod = () => /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxPeriodContainer, {
-    id: "CheckBoxPeriodContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-    id: "CheckBox",
-    label: "4 weeks",
-    checked: periodState.weeks4,
-    colorChecked: buttonsIconColor,
-    colorUnchecked: buttonsIconColor,
-    fontSize: "14px",
-    height: "20px",
-    width: "100%",
-    iconSize: "14px",
-    disabled: false,
-    onClick: checkBox4Weeks => {
-      onClickPeriodHandler(checkBox4Weeks);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-    id: "CheckBox",
-    label: "8 weeks",
-    checked: periodState.weeks8,
-    colorChecked: buttonsIconColor,
-    colorUnchecked: buttonsIconColor,
-    fontSize: "12px",
-    height: "20px",
-    width: "100%",
-    iconSize: "14px",
-    disabled: false,
-    onClick: checkBox8Weeks => {
-      onClickPeriodHandler(checkBox8Weeks);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-    id: "CheckBox",
-    label: "13 weeks",
-    checked: periodState.weeks13,
-    colorChecked: buttonsIconColor,
-    colorUnchecked: buttonsIconColor,
-    fontSize: "12px",
-    height: "20px",
-    width: "100%",
-    iconSize: "14px",
-    disabled: false,
-    onClick: checkBox13Weeks => {
-      onClickPeriodHandler(checkBox13Weeks);
-    }
-  }));
-  const displayOneColumn = (item, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleAndButtonsContainer, {
-    id: "ColumnTitleAndButtonsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
-    id: "ColumnContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
-    id: "ColumnTitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
-    id: "ColumnTitle"
-  }, item.columnTitle)), dispalyColumnButtons(item.buttonsArray, height = '160px', '0px'), i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? /*#__PURE__*/_react.default.createElement(_KpiFilter.PeriodColumnTitle, null, periodTitle) : '', i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? displayPeriod() : '')), item.rightBorder ? /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnLineSeporatorContainer, {
-    id: "ColumnLineSeporatorContainer"
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnLineSeporator, {
-    id: "ColumnLineSeporator"
-  })) : '');
-  const displayColumns = () => {
-    if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) {
-      return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
-        id: "AllColumnsContainer"
-      }, KpiDataState.map((item, i) => displayOneColumn(item, i)));
-    }
-    return '';
-  };
-
-  //= ======================================== MAIN RETURN ====================================
-  return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainContainer, {
-    id: "MainContainer",
-    height: height,
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.PanelContainer, {
-    id: "PanelContainer"
-  }, displayMainTitle(), displayColumns()));
-  //= ======================================== MAIN RETURN END====================================
-};
-exports.KpiFilter = KpiFilter;
-var _default = exports.default = KpiFilter;
-KpiFilter.defaultProps = {
-  mainTitle: 'Select Table Columns',
-  periodTitle: 'Pre and Post Event Period',
-  kpiData: [],
-  width: '100%',
-  height: '100%',
-  buttonsIconColor: '#1B30AA',
-  buttonsBorderColor: '#1B30AA',
-  buttonsTextColorChecked: '#212121',
-  buttonsTextColorUnchecked: '#212121',
-  buttonsBackgroundColorChecked: '#E9F1FF',
-  buttonsBackgroundColorUnchecked: '#F2F2F2',
-  onClick: () => {},
-  // onClickIncludeBenchmark: () => {},
-  onClickPeriod: () => {},
-  selectAllIgnoreList: []
-};