@4i/modal-manager 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "main": "src/index.ts",
   "scripts": {

package/readme.md

@@ -0,0 +1,151 @@
+# Modal manager
+
+[![npm version](https://badge.fury.io/js/%404i%2Fmodal-manager.svg)](https://badge.fury.io/js/%404i%2Fmodal-manager)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Usage in Managing Multiple Modals, Popups, Notifications
+
+This package simplifies the management of multiple modals, popups, notifications, and similar UI elements within a project. It achieves this by leveraging events, maintaining a centralized list of modals, and assigning actions to them.
+
+## Installation
+
+```bash
+npm install @4i/modal-manager
+```
+
+## Usage
+
+#### Define Modal Actions:
+
+In your project, define modal actions as keys in the modalAction object. Each key represents a specific modal or UI element.
+
+```javascript
+export const modalAction = {
+  MODAL_PROMPT: "modal-prompt",
+  // Additional modal actions...
+};
+```
+
+#### Create Modal List:
+
+Create a list of modals in the list object, where keys are modal actions, and values are the corresponding modal components.
+
+```javascript
+const list = {
+  [modalAction.MODAL_PROMPT]: ModalPrompts,
+  // Additional modals...
+};
+```
+
+#### Call modals
+
+Call modals in your components by invoking modal.call with the desired modal action.
+
+```javascript
+modal.call(modalAction.MODAL_PROMPT, {
+  // Recieve props in your modal component
+  title: "Modal title",
+  content: "Modal content",
+});
+```
+
+#### Extensibility
+
+If desired, you can inherit from the Manager class to create your own classes for handling custom notifications, popups, and more. And then pass your custom class to the CustomProvider component using ModalProvider as an example
+
+````javascript
+
+```javascript
+import { Manager } from "@4i/modal-manager";
+
+class CustomManager extends Manager {
+  // Custom methods and logic here
+}
+
+const customManager = new CustomManager();
+````
+
+### index.js
+
+```javascript
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import ModalPrompts from "./modals/prompt";
+import { ModalProvider } from "@4i/modal-manager";
+import "@4i/modal-manager/src/styles.css";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+// Define your modal actions here
+export const modalAction = {
+  MODAL_PROMPT: "modal-prompt",
+};
+
+// Your modal list should be an object with modal names
+// as keys and modal components as values.
+const list = {
+  [modalAction.MODAL_PROMPT]: ModalPrompts,
+};
+
+root.render(
+  <React.StrictMode>
+    <App />
+    <ModalProvider modalList={list} />
+  </React.StrictMode>
+);
+```
+
+### App.js
+
+```javascript
+import { modalAction } from ".";
+import "./App.css";
+import { modal } from "@4i/modal-manager";
+
+const App = () => {
+  const handleClick = () => {
+    // Call the modal by its action name
+    modal.call(modalAction.MODAL_PROMPT, {
+      // You can pass any props to your modal component
+      title: "Modal title",
+      content: "Modal content",
+    });
+  };
+
+  return (
+    <div className="app">
+      <button
+        onClick={handleClick}
+        className="w-[200px] h-[80px] mx-auto bg-teal-800 text-white"
+      >
+        Click to call modal
+      </button>
+    </div>
+  );
+};
+
+export default App;
+```
+
+### ModalPrompts.js
+
+```javascript
+import React from "react";
+
+// Get props
+const ModalPrompts = ({ title, content }) => {
+  return (
+    <div className="w-[400px] h-[300px] bg-slate-50 p-[24px] flex flex-col justify-center items-center">
+      <h1>{title}</h1>
+      <p>{content}</p>
+      <button>Close</button>
+    </div>
+  );
+};
+
+export default ModalPrompts;
+```
+
+Feel free to tailor this documentation to better fit your package's specific features and capabilities.

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

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

package/src/components/modal-provider.js

@@ -47,14 +47,14 @@ var __importDefault = (this && this.__importDefault) || function (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 ModalManager_1 = __importDefault(require("../utils/ModalManager"));
+var ModalManager_2 = __importDefault(require("../utils/ModalManager"));
 var ModalProvider = function (_a) {
-    var CustomComponent = _a.CustomComponent;
+    var CustomComponent = _a.CustomComponent, modalList = _a.modalList;
     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)([]);
+    console.log("OPEN MODAL", names, data, modalList);
     (0, react_1.useEffect)(function () {
         var handleOpenModal = function (name, data) {
             setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), [data], false); });
@@ -98,10 +98,11 @@ var ModalProvider = function (_a) {
         };
     }, []);
     var activeModals = names.map(function (name) {
-        var Component = modal_list_1.default[name] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
+        var Component = modalList[name] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
         return Component;
     });
     var handleCloseModal = function (index, e) {
+        console.log(index);
         if (modalRef.current[index] &&
             !modalRef.current[index].contains(e.target)) {
             ModalManager_2.default.close(index);
@@ -113,13 +114,14 @@ var ModalProvider = function (_a) {
     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) {
+            return (react_1.default.createElement("div", { key: i, 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])))))));
+                react_1.default.createElement("div", { className: "backdrop_modal_manager" },
+                    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,19 +1,22 @@
 import React, { useEffect, useRef, useState } from "react";
-import manager from "../utils/service/ModalManager";
-import modal from "../utils/service/ModalManager";
-import modalList from "../utils/config/modal-list";
+import manager from "../utils/ModalManager";
+import modal from "../utils/ModalManager";
+
+type ModalList = { [key: string]: React.ComponentType };
 
 interface ModalProviderProps {
   CustomComponent?: React.ComponentType;
+  modalList: ModalList;
 }
 
 type TData = { [key: string]: any };
 
-const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
+const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
   const [data, setData] = useState<TData[]>([]);
   const [names, setNames] = useState<string[]>([]);
   const modalRef = useRef<any[]>([]);
 
+  console.log("OPEN MODAL", names, data, modalList);
   useEffect(() => {
     const handleOpenModal = (name: string, data: TData) => {
       setData((prev: TData[]) => [...prev, data]);
@@ -68,6 +71,7 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
   });
 
   const handleCloseModal = (index: number, e: any) => {
+    console.log(index);
     if (
       modalRef.current[index] &&
       !modalRef.current[index].contains(e.target)
@@ -86,27 +90,22 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
       const Modal = Component;
 
       return (
-        <>
-          {CustomComponent ? (
-            <CustomComponent key={i} {...data[i]} />
-          ) : (
+        <div
+          key={i}
+          onClick={(e) => {
+            handleCloseModal(i, e);
+          }}
+        >
+          <div className="backdrop_modal_manager">
             <div
-              key={i}
-              className="backdrop_modal_manager"
-              onClick={(e) => {
-                handleCloseModal(i, e);
+              ref={(ref) => {
+                refReducer(i, ref);
               }}
             >
-              <div
-                ref={(ref) => {
-                  refReducer(i, ref);
-                }}
-              >
-                <Modal key={i} {...data[i]} />
-              </div>
+              <Modal key={i} {...data[i]} />
             </div>
-          )}
-        </>
+          </div>
+        </div>
       );
     })
   );

package/src/index.d.ts

@@ -1,6 +1,4 @@
-import Manager from "./utils/service/Manager";
-import modal from "./utils/service/ModalManager";
+import Manager from "./utils/Manager";
+import modal from "./utils/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 };
+export { Manager, modal, ModalProvider };

package/src/index.js

@@ -3,14 +3,10 @@ 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.ModalProvider = exports.modal = exports.Manager = void 0;
+var Manager_1 = __importDefault(require("./utils/Manager"));
 exports.Manager = Manager_1.default;
-var ModalManager_1 = __importDefault(require("./utils/service/ModalManager"));
+var ModalManager_1 = __importDefault(require("./utils/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/index.ts

@@ -1,7 +1,5 @@
-import Manager from "./utils/service/Manager";
-import modal from "./utils/service/ModalManager";
+import Manager from "./utils/Manager";
+import modal from "./utils/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 };
+export { Manager, modal, ModalProvider };

package/src/utils/{service/Manager.d.ts → Manager.d.ts}

@@ -9,8 +9,5 @@ declare class Manager {
     constructor();
     addEventListener(event: string, listener: (...args: any[]) => void): void;
     removeEventListener(event: string, listener: (...args: any[]) => void): void;
-    emitChange(): void;
-    close(...closeList: number[]): void;
-    emitClose<T>(closeList?: T): void;
 }
 export default Manager;

package/src/utils/{service/Manager.js → Manager.js}

@@ -1,10 +1,6 @@
 "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 = "";
@@ -17,21 +13,6 @@ var Manager = /** @class */ (function () {
     Manager.prototype.removeEventListener = function (event, listener) {
         this.emitter.removeListener(event, listener);
     };
-    Manager.prototype.emitChange = function () {
-        this.emitter.emit(constants.CHANGE, this.name, this.data);
-    };
-    Manager.prototype.close = function () {
-        var closeList = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            closeList[_i] = arguments[_i];
-        }
-        this.name = null;
-        this.data = {};
-        this.emitClose(closeList);
-    };
-    Manager.prototype.emitClose = function (closeList) {
-        this.emitter.emit(constants.CLOSE, closeList);
-    };
     return Manager;
 }());
 exports.default = Manager;

package/src/utils/{service/Manager.ts → Manager.ts}

@@ -1,10 +1,5 @@
 import { EventEmitter } from "events";
 
-const constants = {
-  CHANGE: "change",
-  CLOSE: "close",
-};
-
 type TData = {
   [key: string]: any;
 };
@@ -27,17 +22,6 @@ class Manager {
   removeEventListener(event: string, listener: (...args: any[]) => void) {
     this.emitter.removeListener(event, listener);
   }
-  emitChange() {
-    this.emitter.emit(constants.CHANGE, this.name, this.data);
-  }
-  close(...closeList: number[]) {
-    this.name = null;
-    this.data = {};
-    this.emitClose(closeList);
-  }
-  emitClose<T>(closeList?: T) {
-    this.emitter.emit(constants.CLOSE, closeList);
-  }
 }
 
 export default Manager;

package/src/utils/{service/ModalManager.d.ts → ModalManager.d.ts}

@@ -5,7 +5,7 @@ declare class ModalManager extends Manager {
         [key: string]: any;
     }): void;
     call(name: string, data?: any): void;
-    emitClose<T>(position?: T): void;
+    close<T>(position?: T): void;
 }
 declare const modal: ModalManager;
 export default modal;

package/src/utils/{service/ModalManager.js → ModalManager.js}

@@ -32,13 +32,13 @@ var ModalManager = /** @class */ (function (_super) {
     ModalManager.prototype.create = function (name, data) {
         this.name = name;
         this.data = data;
-        this.emitChange();
+        this.emitter.emit(constants.CHANGE, this.name, this.data);
     };
     ModalManager.prototype.call = function (name, data) {
         if (data === void 0) { data = {}; }
         this.create(name, { modalId: (0, uuid_1.v4)(), data: data });
     };
-    ModalManager.prototype.emitClose = function (position) {
+    ModalManager.prototype.close = function (position) {
         this.emitter.emit(constants.CLOSE, position);
     };
     return ModalManager;

package/src/utils/{service/ModalManager.ts → ModalManager.ts}

@@ -14,14 +14,14 @@ class ModalManager extends Manager {
   create(name: string, data: { [key: string]: any }) {
     this.name = name;
     this.data = data;
-    this.emitChange();
+    this.emitter.emit(constants.CHANGE, this.name, this.data);
   }
 
   call(name: string, data: any = {}) {
     this.create(name, { modalId: uuidv4(), data });
   }
 
-  emitClose<T>(position?: T) {
+  close<T>(position?: T) {
     this.emitter.emit(constants.CLOSE, position);
   }
 }

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

@@ -1,6 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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-actions.ts

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

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

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

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

@@ -1,20 +0,0 @@
-"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,11 +0,0 @@
-export interface ModalList {
-  [key: string]: (...args: any[]) => any;
-}
-
-let modalList: ModalList = {};
-
-export const setModalList = (_modalList: ModalList) => {
-  modalList = { ...modalList, ..._modalList };
-};
-
-export default modalList;