sag_components 1.0.613 → 1.0.615

package/.history/package_20231122100718.json

@@ -0,0 +1,77 @@
+{
+  "name": "sag_components",
+  "version": "1.0.338",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-preset-react-app": "^10.0.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/.history/package_20231128125149.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.346",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-preset-react-app": "^10.0.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "bundler": {
+    "exportEntries": ["src/index.ts"],
+    "managerEntries": ["src/manager.ts"],
+    "previewEntries": ["src/preview.ts"]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/.history/package_20231128125208.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.346",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-preset-react-app": "^10.0.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "bundler": {
+    "exportEntries": ["src/index.js"],
+    "managerEntries": ["src/manager.js"],
+    "previewEntries": ["src/preview.js"]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/dist/stories/components/DropdownMulti.js

@@ -25,8 +25,8 @@ const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default,
 /**
  *  SAG DropdownMulti
  */
-const DropdownMulti = props => {
-  const {
+const DropdownMulti = _ref => {
+  let {
     name,
     width = '100%',
     size,
@@ -47,7 +47,11 @@ const DropdownMulti = props => {
     disabled = false,
     dropdownListfontSize = '14px',
     placeHolderFontSize = '14px'
-  } = props;
+  } = _ref;
+  /**
+   *  SAG DropdownMulti
+   */
+
   const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
   const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
@@ -188,10 +192,10 @@ const DropdownMulti = props => {
       width: "0.5em",
       height: "0.5em"
     }) : null,
-    renderOption: (props, option, _ref) => {
+    renderOption: (props, option, _ref2) => {
       let {
         selected
-      } = _ref;
+      } = _ref2;
       return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
         icon: icon,
         checkedIcon: checkedIcon,
@@ -253,7 +257,6 @@ const DropdownMulti = props => {
 
   // --------------------------------- MAIN -------------------------------------
   return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
-    className: "DropdownContainer",
     width: width
   }, getAutocompleteMulti());
 };

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

@@ -8,4 +8,6 @@ exports.DropdownContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
-const DropdownContainer = exports.DropdownContainer = _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);
+// import './font.css';
+
+const DropdownContainer = exports.DropdownContainer = _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/FilterButton.js

@@ -1,29 +1,33 @@
 "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.FilterButton = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _FilterButton = require("./FilterButton.style");
 var _FilterIcon = require("./icons/FilterIcon");
 const FilterButton = props => {
   const {
     color,
+    activeColor,
     height,
     buttonText,
     iconWidth,
     iconHeight,
     disabled,
+    openState,
     onButtonClick
   } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
   const onClickHandler = event => {
     onButtonClick(event);
+    setActiveState(!activeState);
   };
   return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
     height: height,
-    color: color,
+    color: activeState ? activeColor : color,
     disabled: disabled,
     onClick: event => {
       onClickHandler(event);
@@ -31,7 +35,7 @@ const FilterButton = props => {
   }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
     width: iconWidth,
     height: iconHeight,
-    color: color
+    color: activeState ? activeColor : color
   }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
 };
 exports.FilterButton = FilterButton;
@@ -40,8 +44,10 @@ FilterButton.defaultProps = {
   buttonText: 'Filter',
   height: '40px',
   color: '#212121',
+  activeColor: '#229E38',
   iconHeight: 12,
   iconWidth: 12,
+  openState: false,
   disabled: false,
   onButtonClick: () => {}
 };

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

@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
-const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid #B1B1B1;\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color);
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/FilterPanel.js

@@ -31,29 +31,18 @@ const FilterPanel = props => {
   } = props;
   const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
   const [Reset, setReset] = (0, _react.useState)(false);
+  const [PeriodPickerSelectedValue, setPeriodPickerSelectedValue] = (0, _react.useState)('');
   (0, _react.useEffect)(() => {
-    const newFieldsDataState = FieldsDataState.map(itemFieldsDataState => {
-      const foundItem = fieldsData.find(itemfieldsData => itemFieldsDataState.name === itemfieldsData.name);
-      return {
-        ...itemFieldsDataState,
-        ...(itemFieldsDataState.dropdownOptions ? {
-          dropdownOptions: foundItem !== null && foundItem !== void 0 && foundItem.dropdownOptions ? foundItem === null || foundItem === void 0 ? void 0 : foundItem.dropdownOptions : undefined
-        } : '')
-      };
-    });
-    setFieldsDataState(newFieldsDataState);
-    console.log('newFieldsDataState', newFieldsDataState);
+    setFieldsDataState(fieldsData);
   }, [fieldsData]);
   const onClickResetHandler = () => {
     const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
       ...itemField,
-      selectedValue: undefined,
-      ...(itemField.periodPickerSelectedValue ? {
-        periodPickerSelectedValue: undefined
-      } : '')
+      selectedValue: undefined
     }));
     setFieldsDataState(newFieldsDataState);
     setReset(!Reset);
+    setPeriodPickerSelectedValue('');
     onResetClick({
       eventName: 'onResetClick',
       fieldsData: newFieldsDataState
@@ -73,7 +62,7 @@ const FilterPanel = props => {
   };
   const displayPeriodPickerContent = item => {
     let content;
-    switch (item.periodPickerSelectedValue) {
+    switch (PeriodPickerSelectedValue) {
       case 'date':
         content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
           className: "DatePickerContainer"
@@ -175,7 +164,6 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: ''.concat(item.name, '_Year'),
           reset: Reset,
-          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -213,30 +201,7 @@ const FilterPanel = props => {
         });
         break;
       default:
-        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
-          className: "PeriodPickerContainer"
-        }, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
-          className: "Dropdown",
-          name: ''.concat(item.name, '_Default'),
-          reset: Reset,
-          showPopupIcon: false,
-          allowedInput: "all",
-          dropdownListfontSize: "14px",
-          labelColor: borderColor,
-          limitTagsOnMultiSelect: 2,
-          onInputChange: () => {},
-          shape: "round",
-          size: "large",
-          text: "Select Dates",
-          value: undefined,
-          required: false,
-          disabled: true,
-          placeHolder: "Select Dates",
-          placeHolderFontSize: "14px",
-          onChange: () => {},
-          options: [],
-          width: "100%"
-        }));
+        content = '';
     }
     return content;
   };
@@ -248,7 +213,6 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: item.name,
           reset: Reset,
-          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -256,7 +220,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
+          text: item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -288,7 +252,6 @@ const FilterPanel = props => {
           className: "DropdownMulti",
           name: item.name,
           reset: Reset,
-          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -296,7 +259,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
+          text: item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -330,7 +293,7 @@ const FilterPanel = props => {
           className: "RangePicker",
           borderColor: borderColor,
           borderRadius: "12px",
-          label: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
+          label: item.label,
           onChange: eventDatePicker => {
             const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
             const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
@@ -360,7 +323,6 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: item.name,
           reset: Reset,
-          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -368,7 +330,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: !item.periodPickerSelectedValue ? item.labelEmptyValue || item.label : item.label,
+          text: item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -376,12 +338,8 @@ const FilterPanel = props => {
           placeHolderFontSize: "14px",
           onChange: eventDropdownPeriodPicker => {
             var _eventDropdownPeriodP, _eventDropdownPeriodP2;
-            const newPeriodPickerSelectedValue = eventDropdownPeriodPicker !== null && eventDropdownPeriodPicker !== void 0 && (_eventDropdownPeriodP = eventDropdownPeriodPicker.newValue) !== null && _eventDropdownPeriodP !== void 0 && _eventDropdownPeriodP.value ? "".concat(eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : (_eventDropdownPeriodP2 = eventDropdownPeriodPicker.newValue) === null || _eventDropdownPeriodP2 === void 0 ? void 0 : _eventDropdownPeriodP2.value) : undefined;
-            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
-              ...itemField,
-              periodPickerSelectedValue: newPeriodPickerSelectedValue ? "".concat(newPeriodPickerSelectedValue) : undefined
-            } : itemField);
-            setFieldsDataState(newFieldsDataState);
+            const selectedValue = eventDropdownPeriodPicker !== null && eventDropdownPeriodPicker !== void 0 && (_eventDropdownPeriodP = eventDropdownPeriodPicker.newValue) !== null && _eventDropdownPeriodP !== void 0 && _eventDropdownPeriodP.value ? "".concat(eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : (_eventDropdownPeriodP2 = eventDropdownPeriodPicker.newValue) === null || _eventDropdownPeriodP2 === void 0 ? void 0 : _eventDropdownPeriodP2.value) : undefined;
+            setPeriodPickerSelectedValue(selectedValue);
           },
           options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
           width: "100%"
@@ -389,7 +347,6 @@ const FilterPanel = props => {
         break;
       default:
         content = '';
-        break;
     }
     return content;
   };