sag_components 1.0.421 → 1.0.423

package/dist/stories/components/TotalBenchmarkAreachart.js

@@ -10,9 +10,9 @@ var _recharts = require("recharts");
 var _ArrowUpIcon = require("./icons/ArrowUpIcon");
 var _ArrowDownIcon = require("./icons/ArrowDownIcon");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
-var _CommonFunctions = require("./CommonFunctions");
 var _Benchmark = require("./Benchmark");
 var _TotalBenchmarkAreachart = require("./TotalBenchmarkAreachart.style");
+var _CommonFunctions = require("./CommonFunctions");
 /* TotalBenchmarkAreachart */
 const TotalBenchmarkAreachart = props => {
   const {
@@ -36,16 +36,14 @@ const TotalBenchmarkAreachart = props => {
     opacity,
     value1Title,
     value2Title,
-    noDataText,
-    startWeekRange = 0,
-    endWeekRange = 0
+    noDataText
   } = props;
   const DEFAULT_ROOT_FONT = 16;
   const DEFAULT_COMPONENT_WIDTH = 250;
   const DEFAULT_COMPONENT_HEIGHT = 280;
-  const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px"));
+  const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
   const anotherRef = (0, _react.useRef)(null);
-  const [activeLabel, setActiveLabel] = (0, _react.useState)("");
+  const [activeLabel, setActiveLabel] = (0, _react.useState)('');
   const controlsContainerRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const {
@@ -54,16 +52,16 @@ const TotalBenchmarkAreachart = props => {
     setRootFont(getRootFont(offsetWidth));
   }, [width]);
   const getRootFont = width => {
-    const relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
-    const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
+    const relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
+    const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
     return fontRoot;
   };
-  const getSizeFactor = () => rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
+  const getSizeFactor = () => rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
   const getArrowSign = arrowSign => {
     if (!arrowSign) {
-      return "";
+      return '';
     }
-    if (arrowSign === "up") {
+    if (arrowSign === 'up') {
       return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
         id: "DetailsRowArrowContainer",
         value: value
@@ -80,49 +78,24 @@ const TotalBenchmarkAreachart = props => {
       height: 25 * getSizeFactor()
     }));
   };
-  const CustomTick = item => {
-    var _payload$value, _payload$value2, _payload$value3;
-    const {
+  const CustomTick = _ref => {
+    let {
       x,
       y,
       stroke,
       payload
-    } = item;
-    const currentWeek = (payload === null || payload === void 0 ? void 0 : (_payload$value = payload.value) === null || _payload$value === void 0 ? void 0 : _payload$value.length) > 1 ? payload === null || payload === void 0 ? void 0 : (_payload$value2 = payload.value) === null || _payload$value2 === void 0 ? void 0 : _payload$value2.substring(1, payload === null || payload === void 0 ? void 0 : (_payload$value3 = payload.value) === null || _payload$value3 === void 0 ? void 0 : _payload$value3.length) : 0;
-    console.log("payload?.value", currentWeek);
-    if (!(0, _CommonFunctions.isNumericValue)(currentWeek) || !(0, _CommonFunctions.isNumericValue)(startWeekRange) || !(0, _CommonFunctions.isNumericValue)(endWeekRange)) {
-      return;
-    }
-    const currentWeekNumeric = Number(currentWeek);
-    const startWeekRangeNumeric = Number(startWeekRange);
-    const endWeekRangeNumeric = Number(endWeekRange);
+    } = _ref;
     return /*#__PURE__*/_react.default.createElement("g", {
       transform: "translate(".concat(x, ",").concat(y, ")")
-    }, currentWeekNumeric === startWeekRangeNumeric ? /*#__PURE__*/_react.default.createElement("rect", {
+    }, activeLabel === payload.value && /*#__PURE__*/_react.default.createElement("rect", {
       x: -15,
       y: 0,
-      width: "70",
+      width: "40",
       height: "18",
       rx: 9,
-      fill: xselectedColor
-      //fillOpacity="0.30"
-    }) : currentWeekNumeric > startWeekRangeNumeric && currentWeekNumeric < endWeekRangeNumeric ? /*#__PURE__*/_react.default.createElement("rect", {
-      x: -30,
-      y: 0,
-      width: "80",
-      height: "18",
-      rx: 9,
-      fill: xselectedColor
-      //fillOpacity="0.30"
-    }) : currentWeekNumeric === endWeekRangeNumeric ? /*#__PURE__*/_react.default.createElement("rect", {
-      x: -30,
-      y: 0,
-      width: "55",
-      height: "18",
-      rx: 9,
-      fill: xselectedColor
-      // fillOpacity="0.30"
-    }) : "", /*#__PURE__*/_react.default.createElement("text", {
+      fill: xselectedColor,
+      fillOpacity: "0.30"
+    }), /*#__PURE__*/_react.default.createElement("text", {
       x: 0,
       y: 14,
       dx: -10,
@@ -130,27 +103,18 @@ const TotalBenchmarkAreachart = props => {
       fontSize: "14px"
     }, payload.value));
   };
-  const CustomTooltip = _ref => {
+  const CustomTooltip = _ref2 => {
     let {
       active,
       payload,
       label
-    } = _ref;
+    } = _ref2;
     if (active && payload && payload.length) {
       setActiveLabel(label);
       return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipTitle, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value1Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value))), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value2Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[1].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[1].value))));
     }
     return null;
   };
-  const getEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataContainer, {
-    id: "EventWeeksLegendDataContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendColorRectangle, {
-    id: "EventWeeksLegendColorRectangle",
-    color: xselectedColor
-  }), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendTitle, {
-    id: "EventWeeksLegendTitle",
-    width: width
-  }, "Event weeks"));
   return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
@@ -165,9 +129,9 @@ const TotalBenchmarkAreachart = props => {
     id: "Title"
   }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ValueAndBenchmarkContainer, {
     id: "ValueAndBenchmarkContainer"
-  }, value !== undefined && value != null ? getArrowSign(arrowSign) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
+  }, value !== undefined && value != null ? getArrowSign(arrowSign) : '', /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
     id: "FormattedValue"
-  }, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? "No Data" : ""), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
+  }, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? 'No Data' : ''), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
     id: "BenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
     id: "Benchmark",
@@ -181,7 +145,7 @@ const TotalBenchmarkAreachart = props => {
     linearGradientUnderAvarageColor: "#FDB1B1",
     underAvarageColor: "#FD5959",
     backgroundColor: "#F2F2F2"
-  })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
+  })) : '')), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
     ref: anotherRef,
     id: "AreaChartContainer"
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
@@ -233,9 +197,9 @@ const TotalBenchmarkAreachart = props => {
     tick: item => /*#__PURE__*/_react.default.createElement(CustomTick, item),
     tickLine: false,
     style: {
-      fontWeight: "700",
-      stroke: "#D0D0D0",
-      strokeWidth: "1px"
+      fontWeight: '700',
+      stroke: '#D0D0D0',
+      strokeWidth: '1px'
     }
   }), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
     strokeDasharray: "3 3"
@@ -253,86 +217,84 @@ const TotalBenchmarkAreachart = props => {
     fill: "url(#colorValue2)"
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), getEventWeeksLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
 exports.TotalBenchmarkAreachart = TotalBenchmarkAreachart;
 var _default = exports.default = TotalBenchmarkAreachart;
 TotalBenchmarkAreachart.defaultProps = {
-  title: "String",
+  title: 'String',
   value: 300,
-  arrowSign: "$",
+  arrowSign: '$',
   addingBenchmark: true,
-  benchmarkTotalValue: "",
+  benchmarkTotalValue: '',
   benchmarkValue: null,
   areaChartData: [{
-    title: "W20",
+    title: 'W20',
     value1: 542366,
     value2: 247715
   }, {
-    title: "W21",
+    title: 'W21',
     value1: 699511,
     value2: 252313
   }, {
-    title: "W22",
+    title: 'W22',
     value1: 403092,
     value2: 260822
   }, {
-    title: "W23",
+    title: 'W23',
     value1: 396184,
     value2: 264325
   }, {
-    title: "W24",
+    title: 'W24',
     value1: 415317,
     value2: 269243
   }, {
-    title: "W25",
+    title: 'W25',
     value1: 568376,
     value2: 269592
   }, {
-    title: "W26",
+    title: 'W26',
     value1: 1078121,
     value2: 269949
   }, {
-    title: "W27",
+    title: 'W27',
     value1: 347930,
     value2: 270735
   }, {
-    title: "W28",
+    title: 'W28',
     value1: 346258,
     value2: 271200
   }, {
-    title: "W29",
+    title: 'W29',
     value1: 350184,
     value2: 270324
   }, {
-    title: "W30",
+    title: 'W30',
     value1: 312790,
     value2: 266821
   }, {
-    title: "W31",
+    title: 'W31',
     value1: 335076,
     value2: 267064
   }, {
-    title: "W32",
+    title: 'W32',
     value1: 311037,
     value2: 266821
   }],
-  width: "100%",
-  height: "100%",
-  textcolor: "#212121",
-  areaChart1Color: "#BD9EFF",
-  areaChart2Color: "#96B4FF",
-  xselectedColor: "#42977A",
-  fillChart1Color: "rgba(34, 158, 56, 0.20)",
-  fillChart2Color: "rgba(255, 84, 84, 0.2)",
-  startOffset: "17.04%",
-  endOffset: "17.04%",
-  opacity: "191",
-  value1Title: "Actual Sales",
-  value2Title: "Baseline Sales",
-  noDataText: "",
-  startWeekRange: 0,
-  endWeekRange: 0
+  width: '100%',
+  height: '100%',
+  textcolor: '#212121',
+  areaChart1Color: '#BD9EFF',
+  areaChart2Color: '#96B4FF',
+  xselectedColor: '#42977A',
+  fillChart1Color: 'rgba(34, 158, 56, 0.20)',
+  fillChart2Color: 'rgba(255, 84, 84, 0.2)',
+  startOffset: '17.04%',
+  endOffset: '17.04%',
+  opacity: '191',
+  value1Title: 'Actual Sales',
+  value2Title: 'Baseline Sales',
+  noDataText: ''
 };

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.EventWeeksLegendTitle = exports.EventWeeksLegendDataContainer = exports.EventWeeksLegendColorRectangle = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
+exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
 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, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height);
-const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  /* justify-content: space-between; */\n  background: #ffffff;\n  border-radius: 12px;\n  flex-basis: 100%;\n"])));
-const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: auto;\n  width: 100%;\n  height: 50%;\n"])));
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background: #ffffff;\n  border-radius: 12px;\n  flex-basis: 100%;\n"])));
+const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 50%;\n"])));
 const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  background: #ffffff;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
 const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n"])));
 const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: normal;\n"])));
@@ -20,8 +20,5 @@ const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledC
 const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-end;\n  width: 22px;\n  @media (max-width: 1366px) {\n    width: 12px;\n  }\n  @media (max-width: 1536px) {\n    width: 14px;\n  }\n"])));
 const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n"])));
 const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n"])));
-const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;\n"])));
-const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1.5rem;\n"])));
-const EventWeeksLegendDataContainer = exports.EventWeeksLegendDataContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  margin-top: 10px;\n  align-items: center;\n"])));
-const EventWeeksLegendTitle = exports.EventWeeksLegendTitle = _styledComponents.default.h4(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  margin: 0 0 0 5px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
-const EventWeeksLegendColorRectangle = exports.EventWeeksLegendColorRectangle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.5rem;\n  min-width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 2px;\n  background: ", ";\n"])), props => props.color);
+const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;  \n"])));
+const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1.5rem;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.421",
+  "version": "1.0.423",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-designs": "^7.0.7",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-links": "^7.4.6",
@@ -35,24 +35,24 @@
     "babel-preset-react-app": "^10.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "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",
     "react-scripts": "^5.0.1",
     "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^13.3.3",
     "style-loader": "^3.3.3"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.16",
-    "@mui/x-date-pickers": "^6.18.0",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/material": "^5.15.2",
+    "@mui/x-date-pickers": "^6.18.6",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
     "prop-types": "^15.8.1",