sag_components 1.0.443 → 1.0.445

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

@@ -28,7 +28,7 @@ const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default,
 const DropdownMulti = _ref => {
   let {
     name,
-    width = "100%",
+    width = '100%',
     size,
     text,
     shape,
@@ -38,15 +38,15 @@ const DropdownMulti = _ref => {
     options,
     onChange,
     onInputChange,
-    labelColor = "#1B30AA",
+    labelColor = '#1B30AA',
     required,
     inputRef,
-    allowedInput = "all",
+    allowedInput = 'all',
     reset = false,
     disableClearable = false,
     disabled = false,
-    dropdownListfontSize = "14px",
-    placeHolderFontSize = "14px"
+    dropdownListfontSize = '14px',
+    placeHolderFontSize = '14px'
   } = _ref;
   /**
    *  SAG DropdownMulti
@@ -54,9 +54,6 @@ const DropdownMulti = _ref => {
 
   const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
   const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
-  (0, _react.useEffect)(() => {
-    console.log("selectedOptionsState", selectedOptionsState);
-  }, [selectedOptionsState]);
   (0, _react.useEffect)(() => {
     setSelectedOptionsState([]);
   }, [reset]);
@@ -71,7 +68,7 @@ const DropdownMulti = _ref => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: "#db3131"
+            color: '#db3131'
           }
         }
       }
@@ -80,51 +77,51 @@ const DropdownMulti = _ref => {
 
   // ---------------------------- Multi Text Style -----------------------------------------
   const getTextFieldStyleMulti = () => {
-    if (shape === "round") {
+    if (shape === 'round') {
       // round
       return {
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "12px",
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
           legend: {
-            marginLeft: "10px"
+            marginLeft: '10px'
           }
         },
-        "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "10px !important",
-          borderRadius: "12px",
+        '& .MuiAutocomplete-inputRoot': {
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
           // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
           '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
             // Default left padding is 6px
-            paddingLeft: "10px"
+            paddingLeft: '10px'
           },
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#E7E7E7"
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
           },
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
           },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
           }
         },
-        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
+        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
           // Default transform is "translate(14px, 20px) scale(1)""
           // This lines up the label with the initial cursor position in the input
           // after changing its padding-left.
-          transform: "translate(14px, 18px) scale(1);",
-          fontSize: "14px",
-          color: disabled ? "#E7E7E7" : currentInputValue && currentInputValue.length > 0 ? "#212121" : "#757575"
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
         },
-        "& .MuiInputLabel-outlined": {
-          paddingLeft: "10px",
-          color: disabled ? "#E7E7E7" : labelColor,
-          fontSize: "18px"
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : labelColor,
+          fontSize: '18px'
         },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "1px",
-          paddingLeft: "4px",
-          paddingRight: "6px",
-          background: "white"
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: '6px',
+          background: 'white'
         }
       };
     }
@@ -144,7 +141,6 @@ const DropdownMulti = _ref => {
     // });
 
     const newSelectedOptions = newValue === null || newValue === void 0 ? void 0 : newValue.filter((value, index, self) => index === self.findIndex(item => item.id === value.id && item.label === value.label));
-    console.log("onChangeHandler", newSelectedOptions);
     setSelectedOptionsState(newSelectedOptions);
     onChange({
       syntheticBaseEvent: event,
@@ -156,15 +152,15 @@ const DropdownMulti = _ref => {
     const ALPHA_REGEX = /^[a-zA-Z]+$/;
     const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
-      case "all":
+      case 'all':
         return true;
-      case "alpha":
+      case 'alpha':
         if (ALPHA_REGEX.test(inputChar)) return true;
         return false;
-      case "numeric":
+      case 'numeric':
         if (NUMERIC_REGEX.test(inputChar)) return true;
         return false;
-      case "alphaNumeric":
+      case 'alphaNumeric':
         if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
         return false;
       default:
@@ -203,55 +199,51 @@ const DropdownMulti = _ref => {
       return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
         icon: icon,
         checkedIcon: checkedIcon,
-        checked: isOptionChecked(option) //{selected} //
+        checked: isOptionChecked(option)
       }), option.label);
     },
-    renderInput: params => {
-      // console.log("params", params);
-      return (
-        /*#__PURE__*/
-        //showSearchIcon &&
-        _react.default.createElement(_TextField.default, Object.assign({}, params, {
-          variant: "outlined",
-          label: text,
-          size: size,
-          sx: getTextFieldStyleMulti(),
-          placeholder: placeHolder,
-          InputProps: {
-            ...params.InputProps,
-            style: {
-              fontSize: placeHolderFontSize,
-              fontFamily: "Poppins"
-            }
+    renderInput: params =>
+    /*#__PURE__*/
+    // showSearchIcon &&
+    _react.default.createElement(_TextField.default, Object.assign({}, params, {
+      variant: "outlined",
+      label: text,
+      size: size,
+      sx: getTextFieldStyleMulti(),
+      placeholder: placeHolder,
+      InputProps: {
+        ...params.InputProps,
+        style: {
+          fontSize: placeHolderFontSize,
+          fontFamily: 'Poppins'
+        }
 
-            //   endAdornment: (
-            //     <>
-            //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
-            //         <span key={index} style={{ margin: '0 5px' }}>
-            //           {option.label}
-            //         </span>
-            //       ))}
-            //       {params.InputProps.endAdornment}
+        //   endAdornment: (
+        //     <>
+        //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
+        //         <span key={index} style={{ margin: '0 5px' }}>
+        //           {option.label}
+        //         </span>
+        //       ))}
+        //       {params.InputProps.endAdornment}
 
-            //     </>
-            //   ),
-          },
+        //     </>
+        //   ),
+      },
 
-          onKeyDown: event => {
-            if (!isInputAllowed(event.key)) {
-              event.preventDefault();
-            }
-          },
-          inputRef: inputRef || null,
-          required: required
-        }))
-      );
-    },
+      onKeyDown: event => {
+        if (!isInputAllowed(event.key)) {
+          event.preventDefault();
+        }
+      },
+      inputRef: inputRef || null,
+      required: required
+    })),
     ListboxProps: {
       style: {
         fontSize: dropdownListfontSize,
-        //default: 14px
-        fontFamily: "Poppins"
+        // default: 14px
+        fontFamily: 'Poppins'
       }
     }
   }));
@@ -259,9 +251,8 @@ const DropdownMulti = _ref => {
     var _Object$values;
     if (selectedOptionsState && (_Object$values = Object.values(selectedOptionsState)) !== null && _Object$values !== void 0 && _Object$values.map(itemFilter => itemFilter.label).includes(option.label)) {
       return true;
-    } else {
-      return false;
     }
+    return false;
   };
 
   // --------------------------------- MAIN -------------------------------------

package/dist/stories/components/IconButton.js

@@ -34,11 +34,12 @@ const IconButton = props => {
     onCancelClick
   } = props;
   const [progress, setProgress] = (0, _react.useState)(0);
+  let interval;
   const incrementProgress = () => {
     if (showProcess && progress <= 90) {
-      const interval = setInterval(() => {
+      interval = setInterval(() => {
         setProgress(prevProgress => {
-          const newProgress = prevProgress + 3;
+          const newProgress = prevProgress + 2;
           if (newProgress >= 90) {
             clearInterval(interval);
           }
@@ -47,6 +48,7 @@ const IconButton = props => {
       }, 500);
     } else {
       setProgress(0);
+      clearInterval(interval);
     }
   };
   (0, _react.useEffect)(() => {

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

@@ -10,6 +10,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  text-align: center;\n"])));
-const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  text-decoration: none;\n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  position: relative;\n  transition: all .3s;\n  ", "\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      pointer-events: none;\n      &:after {\n        content: ", ";\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-wrap: nowrap;\n        position: absolute;\n        background: linear-gradient(\n          to right,\n          #5FCC70 ", "%,\n          #B1B1B1 ", "%,\n          #B1B1B1 100%\n        );\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        border-width: 0;\n        z-index: 9;\n      }\n    "])), props => props.buttonText, props.progress, props.progress + 1, props => props.borderRadius));
+const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  text-decoration: none;\n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  position: relative;\n  transition: all .3s;\n  ", "\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      pointer-events: none;\n      &:after {\n        content: 'In progress';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-wrap: nowrap;\n        position: absolute;\n        background: linear-gradient(\n          to right,\n          #5FCC70 ", "%,\n          #B1B1B1 ", "%,\n          #B1B1B1 100%\n        );\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        border-width: 0;\n        z-index: 9;\n      }\n    "])), props.progress, props.progress + 1, props => props.borderRadius));
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 const CancelClick = exports.CancelClick = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inherit;\n  font-family: \"Lato\", sans-serif;;\n  font-size: 14px;\n  color: #568202;\n  cursor: pointer;\n  margin-top: 5px;\n"])));