@4i/modal-manager 1.0.0 → 1.0.2

package/lib/components/modal-provider.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var react_1 = __importStar(require("react"));
+var ModalManager_1 = __importDefault(require("../utils/service/ModalManager"));
+var ModalManager_2 = __importDefault(require("../utils/service/ModalManager"));
+var modal_list_1 = __importDefault(require("../utils/config/modal-list"));
+var ModalProvider = function (_a) {
+  var CustomComponent = _a.CustomComponent;
+  var _b = (0, react_1.useState)([]),
+    data = _b[0],
+    setData = _b[1];
+  var _c = (0, react_1.useState)([]),
+    names = _c[0],
+    setNames = _c[1];
+  var modalRef = (0, react_1.useRef)([]);
+  (0, react_1.useEffect)(function () {
+    var handleOpenModal = function (name, data) {
+      setData(function (prev) {
+        return __spreadArray(__spreadArray([], prev, true), [data], false);
+      });
+      setNames(function (prev) {
+        return __spreadArray(__spreadArray([], prev, true), [name], false);
+      });
+    };
+    var handleClose = function (position) {
+      if (position === "all") {
+        setData([]);
+        setNames([]);
+        return;
+      }
+      if (position === -1) {
+        // remove last
+        setData(function (prev) {
+          return prev.filter(function (_, index) {
+            return index !== prev.length - 1;
+          });
+        });
+        setNames(function (prev) {
+          return prev.filter(function (_, index) {
+            return index !== prev.length - 1;
+          });
+        });
+        return;
+      }
+      if (position === 0) {
+        // remove first
+        setData(function (prev) {
+          return prev.filter(function (_, index) {
+            return index !== 0;
+          });
+        });
+        setNames(function (prev) {
+          return prev.filter(function (_, index) {
+            return index !== 0;
+          });
+        });
+        return;
+      }
+      // remove position index
+      setData(function (prev) {
+        return prev.filter(function (_, index) {
+          return index !== prev.length - 1;
+        });
+      });
+      setNames(function (prev) {
+        return prev.filter(function (_, index) {
+          return index !== prev.length - 1;
+        });
+      });
+    };
+    ModalManager_1.default.addEventListener("change", handleOpenModal);
+    ModalManager_1.default.addEventListener("close", handleClose);
+    return function () {
+      ModalManager_1.default.removeEventListener("change", handleOpenModal);
+      ModalManager_1.default.removeEventListener("close", handleClose);
+    };
+  }, []);
+  var activeModals = names.map(function (name) {
+    var Component = modal_list_1.default[name] || function () {
+      return react_1.default.createElement(react_1.default.Fragment, null);
+    };
+    return Component;
+  });
+  var handleCloseModal = function (index, e) {
+    if (modalRef.current[index] && !modalRef.current[index].contains(e.target)) {
+      ModalManager_2.default.close(index);
+    }
+  };
+  var refReducer = function (index, value) {
+    modalRef.current[index] = value;
+  };
+  return activeModals.length !== 0 && activeModals.map(function (Component, i) {
+    var Modal = Component;
+    return react_1.default.createElement(react_1.default.Fragment, null, CustomComponent ? react_1.default.createElement(CustomComponent, __assign({
+      key: i
+    }, data[i])) : react_1.default.createElement("div", {
+      key: i,
+      className: "backdrop_modal_manager",
+      onClick: function (e) {
+        handleCloseModal(i, e);
+      }
+    }, react_1.default.createElement("div", {
+      ref: function (ref) {
+        refReducer(i, ref);
+      }
+    }, react_1.default.createElement(Modal, __assign({
+      key: i
+    }, data[i])))));
+  });
+};
+exports.default = ModalProvider;

package/lib/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setModalActions = exports.setModalList = exports.ModalProvider = exports.modal = exports.Manager = void 0;
+var Manager_1 = __importDefault(require("./utils/service/Manager"));
+exports.Manager = Manager_1.default;
+var ModalManager_1 = __importDefault(require("./utils/service/ModalManager"));
+exports.modal = ModalManager_1.default;
+var modal_provider_1 = __importDefault(require("./components/modal-provider"));
+exports.ModalProvider = modal_provider_1.default;
+var modal_list_1 = require("./utils/config/modal-list");
+Object.defineProperty(exports, "setModalList", {
+  enumerable: true,
+  get: function () {
+    return modal_list_1.setModalList;
+  }
+});
+var modal_actions_1 = require("./utils/config/modal-actions");
+Object.defineProperty(exports, "setModalActions", {
+  enumerable: true,
+  get: function () {
+    return modal_actions_1.setModalActions;
+  }
+});

package/lib/utils/config/modal-actions.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setModalActions = void 0;
+var modalActions = {};
+var setModalActions = function (actionList) {
+  modalActions = __assign(__assign({}, modalActions), actionList);
+};
+exports.setModalActions = setModalActions;
+exports.default = modalActions;

package/lib/utils/config/modal-list.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setModalList = void 0;
+var modalList = {};
+var setModalList = function (_modalList) {
+  modalList = __assign(__assign({}, modalList), _modalList);
+};
+exports.setModalList = setModalList;
+exports.default = modalList;

package/lib/utils/service/Manager.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var events_1 = require("events");
+var Constants = {
+  CHANGE: "change",
+  CLOSE: "close"
+};
+var Manager = /** @class */function () {
+  function Manager() {
+    this.name = "";
+    this.data = {};
+    this.emitter = new events_1.EventEmitter();
+  }
+  Manager.prototype.addEventListener = function (event, listener) {
+    this.emitter.addListener(event, listener);
+  };
+  Manager.prototype.removeEventListener = function (event, listener) {
+    this.emitter.removeListener(event, listener);
+  };
+  return Manager;
+}();
+exports.default = Manager;

package/lib/utils/service/ModalManager.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var __extends = this && this.__extends || function () {
+  var extendStatics = function (d, b) {
+    extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+    };
+    return extendStatics(d, b);
+  };
+  return function (d, b) {
+    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var Manager_1 = __importDefault(require("./Manager"));
+var uuid_1 = require("uuid");
+var constants = {
+  CHANGE: "change",
+  CLOSE: "close"
+};
+var ModalManager = /** @class */function (_super) {
+  __extends(ModalManager, _super);
+  function ModalManager() {
+    return _super.call(this) || this;
+  }
+  ModalManager.prototype.create = function (name, data) {
+    this.name = name;
+    this.data = data;
+    this.emitter.emit(constants.CHANGE);
+  };
+  ModalManager.prototype.call = function (name, data) {
+    if (data === void 0) {
+      data = {};
+    }
+    this.create(name, {
+      modalId: (0, uuid_1.v4)(),
+      data: data
+    });
+  };
+  ModalManager.prototype.close = function (position) {
+    this.emitter.emit(constants.CLOSE, position);
+  };
+  return ModalManager;
+}(Manager_1.default);
+var modal = new ModalManager();
+exports.default = modal;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel src -d lib"
+    "build": "npm run clean && tsc && babel src --out-dir lib && cp src/styles.css lib/",
+    "clean": "rm -rf lib"
   },
   "repository": {
     "type": "git",
@@ -28,8 +29,13 @@
   "devDependencies": {
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.5",
+    "@babel/plugin-transform-typescript": "^7.23.5",
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
-    "@types/node": "^20.10.2"
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/node": "^20.10.2",
+    "@types/react": "^18.2.40",
+    "@types/uuid": "^9.0.7",
+    "typescript": "^5.3.2"
   }
 }

package/src/components/modal-provider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ModalProviderProps {
+    CustomComponent?: React.ComponentType;
+}
+declare const ModalProvider: ({ CustomComponent }: ModalProviderProps) => false | React.JSX.Element[];
+export default ModalProvider;

package/src/components/modal-provider.js

@@ -0,0 +1,125 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ModalManager_1 = __importDefault(require("../utils/service/ModalManager"));
+var ModalManager_2 = __importDefault(require("../utils/service/ModalManager"));
+var modal_list_1 = __importDefault(require("../utils/config/modal-list"));
+var ModalProvider = function (_a) {
+    var CustomComponent = _a.CustomComponent;
+    var _b = (0, react_1.useState)([]), data = _b[0], setData = _b[1];
+    var _c = (0, react_1.useState)([]), names = _c[0], setNames = _c[1];
+    var modalRef = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(function () {
+        var handleOpenModal = function (name, data) {
+            setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), [data], false); });
+            setNames(function (prev) { return __spreadArray(__spreadArray([], prev, true), [name], false); });
+        };
+        var handleClose = function (position) {
+            if (position === "all") {
+                setData([]);
+                setNames([]);
+                return;
+            }
+            if (position === -1) {
+                // remove last
+                setData(function (prev) {
+                    return prev.filter(function (_, index) { return index !== prev.length - 1; });
+                });
+                setNames(function (prev) {
+                    return prev.filter(function (_, index) { return index !== prev.length - 1; });
+                });
+                return;
+            }
+            if (position === 0) {
+                // remove first
+                setData(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
+                setNames(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
+                return;
+            }
+            // remove position index
+            setData(function (prev) {
+                return prev.filter(function (_, index) { return index !== prev.length - 1; });
+            });
+            setNames(function (prev) {
+                return prev.filter(function (_, index) { return index !== prev.length - 1; });
+            });
+        };
+        ModalManager_1.default.addEventListener("change", handleOpenModal);
+        ModalManager_1.default.addEventListener("close", handleClose);
+        return function () {
+            ModalManager_1.default.removeEventListener("change", handleOpenModal);
+            ModalManager_1.default.removeEventListener("close", handleClose);
+        };
+    }, []);
+    var activeModals = names.map(function (name) {
+        var Component = modal_list_1.default[name] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
+        return Component;
+    });
+    var handleCloseModal = function (index, e) {
+        if (modalRef.current[index] &&
+            !modalRef.current[index].contains(e.target)) {
+            ModalManager_2.default.close(index);
+        }
+    };
+    var refReducer = function (index, value) {
+        modalRef.current[index] = value;
+    };
+    return (activeModals.length !== 0 &&
+        activeModals.map(function (Component, i) {
+            var Modal = Component;
+            return (react_1.default.createElement(react_1.default.Fragment, null, CustomComponent ? (react_1.default.createElement(CustomComponent, __assign({ key: i }, data[i]))) : (react_1.default.createElement("div", { key: i, className: "backdrop_modal_manager", onClick: function (e) {
+                    handleCloseModal(i, e);
+                } },
+                react_1.default.createElement("div", { ref: function (ref) {
+                        refReducer(i, ref);
+                    } },
+                    react_1.default.createElement(Modal, __assign({ key: i }, data[i])))))));
+        }));
+};
+exports.default = ModalProvider;

package/src/components/modal-provider.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
 import manager from "../utils/service/ModalManager";
-import "./backdrop.css";
 import modal from "../utils/service/ModalManager";
 import modalList from "../utils/config/modal-list";
 
@@ -8,18 +7,20 @@ interface ModalProviderProps {
   CustomComponent?: React.ComponentType;
 }
 
+type TData = { [key: string]: any };
+
 const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
-  const [data, setData] = useState([]);
-  const [names, setNames] = useState([]);
-  const modalRef = useRef([]);
+  const [data, setData] = useState<TData[]>([]);
+  const [names, setNames] = useState<string[]>([]);
+  const modalRef = useRef<any[]>([]);
 
   useEffect(() => {
-    const handleOpenModal = (name, data) => {
-      setData((prev) => [...prev, data]);
-      setNames((prev) => [...prev, name]);
+    const handleOpenModal = (name: string, data: TData) => {
+      setData((prev: TData[]) => [...prev, data]);
+      setNames((prev: string[]) => [...prev, name]);
     };
 
-    const handleClose = (position) => {
+    const handleClose = (position: number | string) => {
       if (position === "all") {
         setData([]);
         setNames([]);
@@ -28,8 +29,10 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
 
       if (position === -1) {
         // remove last
-        setData((prev) => prev.filter((_, index) => index !== prev.length - 1));
-        setNames((prev) =>
+        setData((prev: TData[]) =>
+          prev.filter((_, index) => index !== prev.length - 1)
+        );
+        setNames((prev: string[]) =>
           prev.filter((_, index) => index !== prev.length - 1)
         );
         return;
@@ -37,14 +40,18 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
 
       if (position === 0) {
         // remove first
-        setData((prev) => prev.filter((_, index) => index !== 0));
-        setNames((prev) => prev.filter((_, index) => index !== 0));
+        setData((prev: TData[]) => prev.filter((_, index) => index !== 0));
+        setNames((prev: string[]) => prev.filter((_, index) => index !== 0));
         return;
       }
 
       // remove position index
-      setData((prev) => prev.filter((_, index) => index !== prev.length - 1));
-      setNames((prev) => prev.filter((_, index) => index !== prev.length - 1));
+      setData((prev: TData[]) =>
+        prev.filter((_, index) => index !== prev.length - 1)
+      );
+      setNames((prev: string[]) =>
+        prev.filter((_, index) => index !== prev.length - 1)
+      );
     };
 
     manager.addEventListener("change", handleOpenModal);
@@ -55,12 +62,12 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
     };
   }, []);
 
-  const activeModals = names.map((name) => {
+  const activeModals = names.map((name: string) => {
     const Component = modalList[name] || (() => <></>);
     return Component;
   });
 
-  const handleCloseModal = (index, e) => {
+  const handleCloseModal = (index: number, e: any) => {
     if (
       modalRef.current[index] &&
       !modalRef.current[index].contains(e.target)
@@ -69,7 +76,7 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
     }
   };
 
-  const refReducer = (index, value) => {
+  const refReducer = (index: number, value: any) => {
     modalRef.current[index] = value;
   };
 

package/src/index.d.ts

@@ -0,0 +1,6 @@
+import Manager from "./utils/service/Manager";
+import modal from "./utils/service/ModalManager";
+import ModalProvider from "./components/modal-provider";
+import { setModalList } from "./utils/config/modal-list";
+import { setModalActions } from "./utils/config/modal-actions";
+export { Manager, modal, ModalProvider, setModalList, setModalActions };

package/src/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setModalActions = exports.setModalList = exports.ModalProvider = exports.modal = exports.Manager = void 0;
+var Manager_1 = __importDefault(require("./utils/service/Manager"));
+exports.Manager = Manager_1.default;
+var ModalManager_1 = __importDefault(require("./utils/service/ModalManager"));
+exports.modal = ModalManager_1.default;
+var modal_provider_1 = __importDefault(require("./components/modal-provider"));
+exports.ModalProvider = modal_provider_1.default;
+var modal_list_1 = require("./utils/config/modal-list");
+Object.defineProperty(exports, "setModalList", { enumerable: true, get: function () { return modal_list_1.setModalList; } });
+var modal_actions_1 = require("./utils/config/modal-actions");
+Object.defineProperty(exports, "setModalActions", { enumerable: true, get: function () { return modal_actions_1.setModalActions; } });

package/src/styles.css

@@ -0,0 +1,44 @@
+@keyframes bg_opacity_scale {
+  from {
+    transform: scale(0.8);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes bg_opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.backdrop_modal_manager {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  z-index: 1000;
+  opacity: 0;
+  animation: bg_opacity 150ms ease-in-out forwards;
+}
+
+.backdrop_modal_manager > div {
+  animation: bg_opacity_scale 150ms ease-in-out forwards;
+}
+
+.main_container_modal_manager {
+  opacity: 0;
+  animation: bg_opacity 250ms forwards;
+}

package/src/utils/config/modal-actions.d.ts

@@ -0,0 +1,6 @@
+declare let modalActions: {};
+interface ModalActions {
+    [key: string]: string;
+}
+export declare const setModalActions: (actionList: ModalActions) => void;
+export default modalActions;

package/src/utils/config/modal-actions.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setModalActions = void 0;
+var modalActions = {};
+var setModalActions = function (actionList) {
+    modalActions = __assign(__assign({}, modalActions), actionList);
+};
+exports.setModalActions = setModalActions;
+exports.default = modalActions;

package/src/utils/config/modal-list.d.ts

@@ -0,0 +1,6 @@
+export interface ModalList {
+    [key: string]: string;
+}
+declare let modalList: ModalList;
+export declare const setModalList: (_modalList: ModalList) => void;
+export default modalList;

package/src/utils/config/modal-list.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setModalList = void 0;
+var modalList = {};
+var setModalList = function (_modalList) {
+    modalList = __assign(__assign({}, modalList), _modalList);
+};
+exports.setModalList = setModalList;
+exports.default = modalList;

package/src/utils/config/modal-list.ts

@@ -1,9 +1,9 @@
-let modalList = {};
-
-interface ModalList {
+export interface ModalList {
   [key: string]: string;
 }
 
+let modalList: ModalList = {};
+
 export const setModalList = (_modalList: ModalList) => {
   modalList = { ...modalList, ..._modalList };
 };

package/src/utils/service/Manager.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="node" />
+import { EventEmitter } from "events";
+declare class Manager {
+    emitter: EventEmitter;
+    name: string;
+    data: {
+        [key: string]: any;
+    };
+    constructor();
+    addEventListener(event: string, listener: (...args: any[]) => void): void;
+    removeEventListener(event: string, listener: (...args: any[]) => void): void;
+}
+export default Manager;

package/src/utils/service/Manager.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var events_1 = require("events");
+var Constants = {
+    CHANGE: "change",
+    CLOSE: "close",
+};
+var Manager = /** @class */ (function () {
+    function Manager() {
+        this.name = "";
+        this.data = {};
+        this.emitter = new events_1.EventEmitter();
+    }
+    Manager.prototype.addEventListener = function (event, listener) {
+        this.emitter.addListener(event, listener);
+    };
+    Manager.prototype.removeEventListener = function (event, listener) {
+        this.emitter.removeListener(event, listener);
+    };
+    return Manager;
+}());
+exports.default = Manager;

package/src/utils/service/Manager.ts

@@ -15,6 +15,8 @@ class Manager {
   data: { [key: string]: any };
 
   constructor() {
+    this.name = "";
+    this.data = {};
     this.emitter = new EventEmitter();
   }
 

package/src/utils/service/ModalManager.d.ts

@@ -0,0 +1,11 @@
+import Manager from "./Manager";
+declare class ModalManager extends Manager {
+    constructor();
+    create(name: string, data: {
+        [key: string]: any;
+    }): void;
+    call(name: string, data?: any): void;
+    close(position?: number): void;
+}
+declare const modal: ModalManager;
+export default modal;

package/src/utils/service/ModalManager.js

@@ -0,0 +1,47 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Manager_1 = __importDefault(require("./Manager"));
+var uuid_1 = require("uuid");
+var constants = {
+    CHANGE: "change",
+    CLOSE: "close",
+};
+var ModalManager = /** @class */ (function (_super) {
+    __extends(ModalManager, _super);
+    function ModalManager() {
+        return _super.call(this) || this;
+    }
+    ModalManager.prototype.create = function (name, data) {
+        this.name = name;
+        this.data = data;
+        this.emitter.emit(constants.CHANGE);
+    };
+    ModalManager.prototype.call = function (name, data) {
+        if (data === void 0) { data = {}; }
+        this.create(name, { modalId: (0, uuid_1.v4)(), data: data });
+    };
+    ModalManager.prototype.close = function (position) {
+        this.emitter.emit(constants.CLOSE, position);
+    };
+    return ModalManager;
+}(Manager_1.default));
+var modal = new ModalManager();
+exports.default = modal;

package/src/utils/service/ModalManager.ts

@@ -11,7 +11,7 @@ class ModalManager extends Manager {
     super();
   }
 
-  create(name: string, data) {
+  create(name: string, data: { [key: string]: any }) {
     this.name = name;
     this.data = data;
     this.emitter.emit(constants.CHANGE);

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./src"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}