sag_components 1.0.556 → 1.0.558

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

@@ -25,7 +25,7 @@ const CollapseMenuItem = props => {
     id: "CollapseMenuItemContainer",
     onClick: handleToggle,
     style: {
-      cursor: "pointer"
+      cursor: 'pointer'
     }
   }, /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemIconContainer, {
     id: "CollapseMenuItemIconContainer"
@@ -41,10 +41,10 @@ const CollapseMenuItem = props => {
     id: "CollapseMenuItemSubTitle"
   }, subTitle)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemContentContainer, {
     id: "CollapseMenuItemContentContainer"
-  }, children ? children : ""));
+  }, children || ''));
 };
 var _default = exports.default = CollapseMenuItem;
 CollapseMenuItem.defaultProps = {
-  title: "",
-  subTitle: ""
+  title: '',
+  subTitle: ''
 };

package/dist/stories/components/ReportTable.js

@@ -27,7 +27,7 @@ const ReportTable = props => {
     }
     if (!useSelectButtons) {
       var _tableData$columnsHea;
-      //do not use select Buttons - remove the "button" from table data
+      // do not use select Buttons - remove the "button" from table data
       const newTableData = {
         columnsHeadings: [],
         rowsValues: []
@@ -43,28 +43,28 @@ const ReportTable = props => {
     }
     if (useSelectButtons) {
       var _tableData$columnsHea2, _newTableData$columns, _tableData$rowsValues;
-      //use select Buttons - add a "button" to table data
+      // use select Buttons - add a "button" to table data
 
       const newTableData = {
         columnsHeadings: [],
         rowsValues: []
       };
 
-      //columnsHeadings
+      // columnsHeadings
       tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea2 = tableData.columnsHeadings) === null || _tableData$columnsHea2 === void 0 ? void 0 : _tableData$columnsHea2.forEach(item => {
         newTableData.columnsHeadings.push(item);
       });
-      if (!((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === "button" && item.key === "button"))) {
+      if (!((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'button' && item.key === 'button'))) {
         newTableData.columnsHeadings.push({
-          label: "button",
-          key: "button"
+          label: 'button',
+          key: 'button'
         });
       }
 
-      //rowsValues
+      // rowsValues
       const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map((item, index) => useSelectButtons ? {
         ...item,
-        button: "button",
+        button: 'button',
         rowIndex: index
       } : item);
       newTableData.rowsValues = newRowValues;
@@ -75,85 +75,83 @@ const ReportTable = props => {
   const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
   const handleRowClick = row => {
     const {
-      ["button"]: propToRemove,
+      button: propToRemove,
       ...rest
     } = row;
     onSelectRowClick(rest);
   };
-  const displaySelectButton = rowData => {
-    return /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
-      id: "SelectButtonContainer"
-    }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
-      id: "SelectButtonSubContainer",
-      selectTextColor: selectTextColor,
-      onClick: () => handleRowClick(rowData)
-    }, "Select ", /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
-      id: "ArrowSelectIcon"
-    })));
-  };
+  const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
+    id: "SelectButtonContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
+    id: "SelectButtonSubContainer",
+    selectTextColor: selectTextColor,
+    onClick: () => handleRowClick(rowData)
+  }, "Select", ' ', /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
+    id: "ArrowSelectIcon"
+  })));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
     maxColumnsNumber: useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber,
     columnsNumber: columnsNumber
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
     tableWidthSize: tableWidthSize
-  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === "button" ? /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
     key: index
   }) : /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
     key: index
   }, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
     key: index,
     useColorLinearGradient: useColorLinearGradient
-  }, Object.values(rowData).map((value, dataIndex) => value === "button" ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
+  }, Object.values(rowData).map((value, dataIndex) => value === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
     key: index
   }, displaySelectButton(rowData)) : /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
     key: dataIndex
   }, value))))))), !disableInfo ? /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     color: "#1B30AA"
-  }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")) : "");
+  }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")) : '');
 };
 exports.ReportTable = ReportTable;
 var _default = exports.default = ReportTable;
 ReportTable.defaultProps = {
   tableData: {
     columnsHeadings: [{
-      label: "Event Name",
-      key: "eventName"
+      label: 'Event Name',
+      key: 'eventName'
     }, {
-      label: "Retailer",
-      key: "retailer"
+      label: 'Retailer',
+      key: 'retailer'
     }, {
-      label: "Total Cost",
-      key: "totalCost"
+      label: 'Total Cost',
+      key: 'totalCost'
     }, {
-      label: "Inc. Baseline Sales",
-      key: "incBaselineSales"
+      label: 'Inc. Baseline Sales',
+      key: 'incBaselineSales'
     }],
     rowsValues: [{
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "Food Lion",
-      incBaselineSales: "50K"
+      retailer: 'Large Selling Event P2 2023',
+      eventDescription: 'Food',
+      totalCost: 'Food Lion',
+      incBaselineSales: '50K'
     }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
+      retailer: 'Large Selling Event P2 2023',
+      eventDescription: 'Food',
+      totalCost: '$500K',
+      incBaselineSales: '50K'
     }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
+      retailer: 'Large Selling Event P2 2023',
+      eventDescription: 'Food',
+      totalCost: '$500K',
+      incBaselineSales: '50K'
     }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
+      retailer: 'Large Selling Event P2 2023',
+      eventDescription: 'Food',
+      totalCost: '$500K',
+      incBaselineSales: '50K'
     }]
   },
   maxColumnsNumber: 4,
   useColorLinearGradient: true,
   useSelectButtons: false,
   disableInfo: false,
-  selectTextColor: "#229E38",
+  selectTextColor: '#229E38',
   onSelectRowClick: () => {}
 };

package/dist/stories/components/TabMenu.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TabMenu = require("./TabMenu.style");
+const TabMenu = props => {
+  const {
+    tabs,
+    color,
+    onTabChange
+  } = props;
+  const [activeTab, setActiveTab] = (0, _react.useState)(1);
+  const handleTabChange = index => {
+    onTabChange(index);
+    setActiveTab(index);
+  };
+  return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, null, tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab, {
+    key: index,
+    isActive: index === activeTab,
+    className: index === activeTab ? 'active' : '',
+    color: color,
+    onClick: () => handleTabChange(index)
+  }, tab.title)), /*#__PURE__*/_react.default.createElement(_TabMenu.PresentationSlider, {
+    activeTab: activeTab,
+    color: color,
+    width: "".concat(100 / tabs.length, "%"),
+    role: "presentation"
+  }))), /*#__PURE__*/_react.default.createElement(_TabMenu.Body, {
+    id: "tabsBody"
+  }, tabs[activeTab].content));
+};
+TabMenu.defaultProps = {
+  color: '#229E38',
+  tabs: [
+  // { title: 'Tab 1', content: <ReportTable /> },
+  {
+    title: 'Tab 2',
+    content: 'Content for Tab 2'
+  }, {
+    title: 'Tab 3',
+    content: 'Content for Tab 3'
+  }],
+  onTabChange: () => {}
+};
+var _default = exports.default = TabMenu;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.PresentationSlider = exports.Nav = exports.Body = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: 'Poppins', sans-serif;\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  display: flex;\n  align-items: center;\n  position: relative;\n"])));
+const Tab = exports.Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  position: relative;\n  text-align: center;\n  padding: 8px 12px;\n  font-size: 16px;\n  color: #000000;\n  &.active {\n    font-weight: 600;\n    color: ", ";\n  }\n"])), props => props.color);
+const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background-color: #EAEAEA;\n    &::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        z-index: 1;\n        width: ", ";\n        height: 2px;\n        background-color: ", ";\n        transform: translateX(calc(100% * ", "));\n        transition: transform .35s ease;\n    }\n"])), props => props.width, props => props.color, props => props.activeTab);
+const Body = exports.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 24px 0;\n "])));

package/package.json

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