sag_components 1.0.256 → 1.0.257

package/dist/stories/components/OneColumnContainer.js

@@ -43,16 +43,15 @@ var OneColumnContainer = exports.OneColumnContainer = function OneColumnContaine
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hover = _useState2[0],
     setHover = _useState2[1];
-  var _useState3 = (0, _react.useState)(200),
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     offsetWidth = _useState4[0],
     setOffsetWidth = _useState4[1];
   var anotherRef = (0, _react.useRef)(null);
-  // useEffect(() => {
-  //   setOffsetWidth(anotherRef.current.offsetWidth);
-  //   console.log(anotherRef.current.offsetWidth);
-  // }, [anotherRef]);
-
+  (0, _react.useEffect)(function () {
+    setOffsetWidth(anotherRef.current.offsetWidth);
+    console.log(anotherRef.current.offsetWidth);
+  }, [anotherRef]);
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
     className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
     width: width,
@@ -68,7 +67,7 @@ var OneColumnContainer = exports.OneColumnContainer = function OneColumnContaine
       display: display,
       gridTemplateColumns: gridTemplateColumns
     },
-    ref: nodeRef
+    ref: anotherRef
   }, console.log(anotherRef), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
     id: "loadingDiv"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {

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

@@ -21,11 +21,11 @@ var Controls = exports.Controls = _styledComponents.default.div(_templateObject2
 var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  background: white;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  padding: 6px 10px;\n  margin: 0;\n"])));
 var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  width: max-content; // fit-content;  \n  line-height: normal;\n  margin: 0;\n"])));
 var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
-var Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n"])));
+var Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
 var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
-var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n"])));
-var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 2.225rem;\n"])));
-var DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  margin-top: auto;\n"])));
+var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+var DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  margin-top: auto;\n  padding: 0 20px;\n"])));
 var DoughnutChart = exports.DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 40%;\n  flex-basis: 40%;\n  min-height: 6rem;\n"])));
 var LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  padding-left: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
 var LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.375rem;\n"])));
@@ -34,5 +34,5 @@ var LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _style
 var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
   return props.color;
 });
-var LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.875rem;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n"])));
+var LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  gap: 5px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
 var LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  white-space: nowrap;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.256",
+  "version": "1.0.257",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -15,9 +15,9 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.0",
+    "@babel/preset-typescript": "^7.23.2",
     "@storybook/addon-a11y": "^7.4.6",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
@@ -49,20 +49,18 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/material": "^5.14.11",
-    "@mui/styled-engine-sc": "^5.14.11",
-    "@mui/x-date-pickers": "^6.16.0",
+    "@mui/icons-material": "^5.14.13",
+    "@mui/material": "^5.14.13",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@mui/x-date-pickers": "^6.16.2",
     "@storybook/addon-designs": "^7.0.5",
     "babel-plugin-react-css-modules": "^5.2.6",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
     "hoopy": "^0.1.4",
-    "react-ace": "^10.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-css-modules": "^4.7.11",
-    "react-hook-form": "^7.46.2",
     "react-loading-skeleton": "^3.3.1",
     "react-scripts": "5.0.1",
     "recharts": "^2.6.2",

package/dist/stories/components/CodeEditor.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-require("ace-builds/src-noconflict/mode-mysql");
-require("ace-builds/src-noconflict/theme-monokai");
-require("ace-builds/src-noconflict/ext-language_tools");
-require("ace-builds/src-noconflict/snippets/mysql");
-// CodeEditor.js
-
-var CodeEditor = function CodeEditor(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
-    style: {
-      height: "200px"
-    },
-    mode: "mysql",
-    theme: "monokai",
-    value: value,
-    onChange: onChange,
-    name: "code-editor",
-    editorProps: {
-      $blockScrolling: true
-    },
-    setOptions: {
-      enableBasicAutocompletion: true,
-      enableLiveAutocompletion: true,
-      enableSnippets: true,
-      showLineNumbers: true,
-      tabSize: 1
-    }
-  });
-};
-var _default = exports.default = CodeEditor;

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

@@ -1,12 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AceEditorContent = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-var _templateObject;
-var AceEditorContent = exports.AceEditorContent = (0, _styledComponents.default)(_reactAce.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n"])));

package/dist/stories/components/Modal.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Modal = require("./Modal.style");
-var Modal = function Modal(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    children = _ref.children;
-  if (!isOpen) return null;
-  return /*#__PURE__*/_react.default.createElement(_Modal.ModalOverlay, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalContent, null, children, /*#__PURE__*/_react.default.createElement(_Modal.CloseButton, {
-    onClick: onClose
-  }, "Close")));
-};
-var _default = exports.default = Modal;

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

@@ -1,17 +0,0 @@
-"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.SubmitButton = exports.ModalOverlay = exports.ModalContent = exports.CloseButton = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index:999999;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  animation: ", " 0.3s ease-in-out;\n"])), fadeIn);
-var ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #fff;\n  overflow: scroll;\n  padding: 20px;\n  border-radius: 8px;\n  width: 50%;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.5s ease-in-out;\n"])), fadeIn);
-var CloseButton = exports.CloseButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));
-var SubmitButton = exports.SubmitButton = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  margin-right: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));

package/dist/stories/components/TotalCostModal.js

@@ -1,143 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Modal = _interopRequireDefault(require("./Modal"));
-var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
-var _TextField = _interopRequireDefault(require("./TextField"));
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _reactHookForm = require("react-hook-form");
-var _Modal2 = require("./Modal.style");
-var TotalCostModal = function TotalCostModal(_ref) {
-  var title = _ref.title,
-    isModalOpen = _ref.isModalOpen,
-    setModalOpen = _ref.setModalOpen,
-    setResult = _ref.setResult;
-  var _useState = (0, _react.useState)([{
-      id: "title",
-      label: "Title",
-      type: "text"
-    }, {
-      id: "dotCut",
-      label: "Do Cut",
-      type: "select",
-      options: ["true", "false"]
-    }, {
-      id: "currency",
-      label: "Currency",
-      type: "select",
-      options: ["true", "false"]
-    }, {
-      id: "currencyType",
-      label: "Currency Type",
-      type: "select",
-      options: ["USD", "EUR", "ILS", "GBP", "JPY"]
-    }, {
-      id: "width",
-      label: "Width",
-      type: "text"
-    }, {
-      id: "height",
-      label: "Height",
-      type: "text"
-    }, {
-      id: "textColor",
-      label: "Text Color",
-      type: "text"
-    }, {
-      id: "noDataText",
-      label: "No Data Text",
-      type: "text"
-    }]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    params = _useState2[0],
-    setParams = _useState2[1];
-  var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    code = _useState4[0],
-    setCode = _useState4[1];
-  var _useForm = (0, _reactHookForm.useForm)(),
-    register = _useForm.register,
-    handleSubmit = _useForm.handleSubmit,
-    watch = _useForm.watch,
-    control = _useForm.control,
-    errors = _useForm.formState.errors;
-  var onSubmit = function onSubmit(data) {
-    return setResult(data);
-  };
-  return /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/_react.default.createElement(_Modal.default, {
-    isOpen: isModalOpen,
-    onClose: function onClose() {
-      return setModalOpen(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gap: "10px",
-      display: "grid"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
-    value: code,
-    onChange: setCode
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gap: "10px",
-      display: "grid",
-      gridTemplateColumns: "auto auto auto"
-    }
-  }, params.map(function (item) {
-    if (item.type === "text") {
-      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
-        control: control,
-        name: item.id,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
-            allowedInput: "all",
-            height: "100%",
-            label: item.label,
-            multiline: true,
-            placeHolder: "Type...",
-            shape: "round",
-            size: "small",
-            width: "300px"
-          }));
-        }
-      });
-    } else {
-      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
-        control: control,
-        name: item.id,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
-            allowedInput: "all",
-            labelColor: "#1B30AA",
-            limitTagsOnMultiSelect: 0,
-            onInputChange: function onInputChange(e) {
-              var _e$inputValue;
-              console.log("e", e);
-              field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
-            },
-            options: item.options,
-            placeHolder: "Type...",
-            shape: "round",
-            size: "small",
-            text: item.label,
-            width: "300px"
-          }));
-        }
-      });
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
-    type: "submit"
-  })));
-};
-var _default = exports.default = TotalCostModal;