sag_components 1.0.571 → 1.0.573

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/FilterPanel.js

@@ -11,26 +11,20 @@ var _Select = require("./Select");
 var _Datepicker = require("./Datepicker");
 var _SagButton = _interopRequireDefault(require("./SagButton"));
 var _FilterPanel = require("./FilterPanel.style");
-//import { FormSelect } from "./CampaignTool/FormSelect";
-
-// import { FormProvider, useForm } from "react-hook-form";
-
 const FilterPanel = props => {
-  let {
-    width,
-    height
-  } = props;
   const {
     fieldsData,
     borderColor,
     okButtonBackgroundColor,
     onOkClick,
     onResetClick,
-    onChange
+    onChange,
+    width,
+    height
   } = props;
   const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
 
-  //const useFormMethods = useForm({ mode: "onChange" });
+  // const useFormMethods = useForm({ mode: "onChange" });
 
   const divRef = (0, _react.useRef)(null);
   const [divHeight, setDivHeight] = (0, _react.useState)(0);
@@ -40,8 +34,8 @@ const FilterPanel = props => {
         top,
         bottom
       } = divRef.current.getBoundingClientRect();
-      const height = bottom - top;
-      setDivHeight(height);
+      const customHeight = bottom - top;
+      setDivHeight(customHeight);
     }
   }, [height]);
   const onClickResetHandler = event => {
@@ -54,7 +48,7 @@ const FilterPanel = props => {
 
     setFieldsDataState(newFieldsDataState);
     onResetClick({
-      eventName: "onResetClick",
+      eventName: 'onResetClick',
       fieldsData: newFieldsDataState
     });
   };
@@ -62,12 +56,11 @@ const FilterPanel = props => {
     const foundOption = options === null || options === void 0 ? void 0 : options.find(itemOption => itemOption.value === selectedValue);
     if (foundOption) {
       return foundOption.label;
-    } else {
-      return null;
     }
+    return null;
   };
   const displayFields = function (data, height) {
-    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
+    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
     if (data && data.length > 0) {
       return /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldsContainer, {
         id: "FieldsContainer",
@@ -75,11 +68,9 @@ const FilterPanel = props => {
         paddingBottom: paddingBottom
       }, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldContainer, {
         id: "FieldContainer"
-      }, item.inputType === "dropdown" ? /*#__PURE__*/_react.default.createElement(_Select.Select, {
+      }, item.inputType === 'dropdown' ? /*#__PURE__*/_react.default.createElement(_Select.Select, {
         id: "Select",
-        name: item.name
-        //   control={useFormMethods.control}
-        ,
+        name: item.name,
         value: item.selectedValue || undefined,
         errorMessage: "",
         label: item.label,
@@ -95,7 +86,6 @@ const FilterPanel = props => {
             selectedLabel: findOptionLabel(item.dropdownOptions, props.target.value)
           } : itemField);
           setFieldsDataState(newFieldsDataState);
-          // //onChange callback:
           onChange({
             fieldsData: newFieldsDataState,
             changedItem: {
@@ -109,7 +99,7 @@ const FilterPanel = props => {
         options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
         height: "52px",
         width: "100%"
-      }) : item.inputType === "datepicker" ? /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
+      }) : item.inputType === 'datepicker' ? /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
         id: "DatePickerContainer"
       }, /*#__PURE__*/_react.default.createElement(_Datepicker.Datepicker, {
         id: "Datepicker",
@@ -125,9 +115,7 @@ const FilterPanel = props => {
             ...itemField,
             selectedValue: props.newValue
           } : itemField);
-          console.log("Datepicker", newFieldsDataState);
           setFieldsDataState(newFieldsDataState);
-          //onChange callback:
           onChange({
             fieldsData: newFieldsDataState,
             changedItem: {
@@ -141,25 +129,25 @@ const FilterPanel = props => {
         text: item.label,
         height: "52px",
         width: "100%"
-      })) : "")));
+      })) : '')));
     }
   };
   return /*#__PURE__*/_react.default.createElement(_FilterPanel.MainContainer, {
-    id: "MainContainer"
+    id: "MainContainer",
+    height: height,
+    width: width
   }, /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
     id: "ControlsContainer",
     ref: divRef,
-    className: "modal-content",
-    height: height,
-    width: width
-    //onClick={(e) => e.stopPropagation()}
+    className: "modal-content"
+    // onClick={(e) => e.stopPropagation()}
   }, /*#__PURE__*/_react.default.createElement(_FilterPanel.AllFieldsContainer, {
     id: "AllFieldsContainer"
-  }, displayFields(FieldsDataState, height = "160px", "20px")), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
+  }, displayFields(FieldsDataState, '160px', '20px')), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
     id: "ButtonsContainer"
   }, /*#__PURE__*/_react.default.createElement(_SagButton.default, {
     textColor: "#ffffff",
-    backgroundColor: okButtonBackgroundColor || "#ffffff",
+    backgroundColor: okButtonBackgroundColor || '#ffffff',
     borderColor: borderColor,
     onClickColor: "#B1B1B1",
     radius: "12px",
@@ -170,7 +158,7 @@ const FilterPanel = props => {
     fontWeight: "500",
     disabled: false,
     onClick: e => onOkClick({
-      eventName: "onOkClick",
+      eventName: 'onOkClick',
       fieldsData: FieldsDataState
     })
   }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
@@ -190,10 +178,10 @@ const FilterPanel = props => {
 };
 var _default = exports.default = FilterPanel;
 FilterPanel.defaultProps = {
-  width: "800px",
-  height: "600px",
-  okButtonBackgroundColor: "#229E38",
-  borderColor: "#066768",
+  width: '800px',
+  height: '600px',
+  okButtonBackgroundColor: '#229E38',
+  borderColor: '#066768',
   onOkClick: () => {},
-  onCancelClick: () => {}
+  onResetClick: () => {}
 };

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

@@ -8,10 +8,10 @@ exports.PanelContainer = exports.MainContainer = exports.InputCommit = exports.F
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  background-color: #fefefe;\n  padding: 20px;\n  border-radius: 10px;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])), props => props.height, props => props.width);
-const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  flex-direction: row-reverse; \n  padding: 20px 20px 0 0;\n  gap: 20px;\n  \n"])));
-const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;  \n  border:  ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n  height: 40px;\n  width: 100px;\n  cursor: pointer;\n   \n   &:hover {\n    background-Color: #f1f1f1;\n  } \n \n"])), props => "1px solid ".concat(props.borderColor));
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n"])), props => props.height, props => props.width);
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  background-color: #fefefe;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  flex-direction: row-reverse; \n  padding: 20px 20px 0 0;\n  gap: 20px;\n"])));
+const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;  \n  border:  ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  height: 40px;\n  width: 100px;\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n   \n   &:hover {\n    background-Color: #f1f1f1;\n  } \n"])), props => "1px solid ".concat(props.borderColor));
 const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 0 10px ;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
 const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
 const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: wrap;\n  padding: 10px;\n  gap: 20px;\n  width: 100%;\n \n"])));

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

@@ -8,7 +8,7 @@ exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.PresentationSlid
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: 'Poppins', sans-serif;\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 10px;\n"])));
+const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: 'Poppins', sans-serif;\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: wrap;\n"])));
 const Nav = exports.Nav = _styledComponents.default.nav(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([" \n  display: inline-block;\n"])));
 const Tabs = exports.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
 const Tab = exports.Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  position: relative;\n  text-align: center;\n  flex: 1;\n  padding: 8px 12px;\n  font-size: 16px;\n  color: #000000;\n  &.active {\n    font-weight: 600;\n    color: ", ";\n  }\n"])), props => props.color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.571",
+  "version": "1.0.573",
   "description": "",
   "main": "dist/index.js",
   "scripts": {