@4i/modal-manager 1.0.9 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "description": "",
   "main": "src/index.ts",
   "scripts": {
@@ -14,7 +14,9 @@
   },
   "keywords": [
     "modal",
-    "manager"
+    "manager",
+    "react",
+    "typescript"
   ],
   "author": "Toni",
   "license": "ISC",
@@ -22,10 +24,7 @@
     "url": "https://github.com/tonichiga/modal-manager/issues"
   },
   "homepage": "https://github.com/tonichiga/modal-manager#readme",
-  "dependencies": {
-    "react": "^18.2.0",
-    "uuid": "^9.0.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.5",

package/readme.md

@@ -0,0 +1,281 @@
+# 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
+
+#### Instance methods:
+
+##### .call(action, props)
+
+Call a modal by its action name and pass props to it.
+
+##### .close('all')
+
+Close all modals.
+
+##### .close(-1)
+
+Close last modals.
+
+##### .close(0)
+
+Close first modals.
+
+##### .close() (default)
+
+Close last modals.
+
+##### .addEventListener(event, callback)
+
+Add an event listener to the modal manager.
+
+##### .removeEventListener(event, callback)
+
+Remove an event listener from the modal manager.
+
+#### 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
+import { Manager } from "@4i/modal-manager";
+
+import { Manager } from "@4i/modal-manager";
+import { v4 as uuidv4 } from "uuid";
+
+export const constants = {
+  OPEN: "open-bottom-modal",
+  CLOSE: "close-bottom-modal",
+};
+
+class CustomModalManager extends Manager {
+  name: string;
+  data: any;
+
+  constructor() {
+    super();
+    this.name = "";
+    this.data = {};
+  }
+
+  create(name: string, data) {
+    this.name = name;
+    this.data = data;
+    this.emitter.emit(constants.OPEN, this.name, this.data);
+  }
+
+  call(name: string, data: any = {}) {
+    this.create(name, { modalId: uuidv4(), data });
+  }
+
+  close(position?: number | string) {
+    this.emitter.emit(constants.CLOSE, position);
+  }
+}
+
+const customModalManager = new CustomModalManager();
+
+export default customModalManager;
+```
+
+#### Custom Provider
+
+```javascript
+import { memo, useEffect, useRef, useState } from "react";
+import bottomModal, { constants } from "../../service/BottomModal";
+import widgets from "../../config/modal/modal-list";
+
+const initialData = {
+  data: null,
+};
+
+const BottomModalProvider = () => {
+  const [data, setData] = useState(initialData);
+  const [name, setName] = useState < string > null;
+  const modalRef = useRef < HTMLDivElement > null;
+
+  useEffect(() => {
+    function handleOpenModal(name, data) {
+      console.log("LOG", name);
+      setName(name);
+      setData(data);
+    }
+
+    function handleClose() {
+      console.log("LOG", "close");
+      setName(null);
+      setData(initialData);
+    }
+
+    bottomModal.addEventListener(constants.OPEN, handleOpenModal);
+    bottomModal.addEventListener(constants.CLOSE, handleClose);
+
+    return () => {
+      bottomModal.removeEventListener(constants.OPEN, handleOpenModal);
+      bottomModal.removeEventListener(constants.CLOSE, handleClose);
+    };
+  }, []);
+
+  const handleCloseModal = (e: any) => {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      console.log("LOG", "close");
+      bottomModal.close();
+    }
+  };
+
+  const Widget = widgets[name];
+
+  return (
+    <>
+      {name && Widget && (
+        <div
+          onClick={handleCloseModal}
+          className="animate-backdrop fixed z-[1000] h-full w-full  overflow-hidden flex items-end"
+        >
+          <div className="animate-fromBottom w-full" ref={modalRef}>
+            <Widget {...data.data} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default memo(BottomModalProvider);
+```
+
+### 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";
+import { modal } from "@4i/modal-manager";
+
+// Get props
+const ModalPrompts = ({ title, content }) => {
+  const handleClose = () => {
+    modal.close();
+  };
+
+  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 onClick={handleClose}>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,10 +1,9 @@
 import React from "react";
-type ModalList = {
+export type ModalList = {
     [key: string]: React.ComponentType;
 };
 interface ModalProviderProps {
-    CustomComponent?: React.ComponentType;
-    modalList: ModalList;
+    modalList: any;
 }
-declare const ModalProvider: ({ CustomComponent, modalList }: ModalProviderProps) => false | React.JSX.Element[];
+declare const ModalProvider: ({ modalList }: ModalProviderProps) => false | React.JSX.Element[];
 export default ModalProvider;

package/src/components/modal-provider.js

@@ -50,11 +50,10 @@ var react_1 = __importStar(require("react"));
 var ModalManager_1 = __importDefault(require("../utils/ModalManager"));
 var ModalManager_2 = __importDefault(require("../utils/ModalManager"));
 var ModalProvider = function (_a) {
-    var CustomComponent = _a.CustomComponent, modalList = _a.modalList;
+    var 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); });
@@ -111,17 +110,17 @@ var ModalProvider = function (_a) {
     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("div", { key: i, onClick: function (e) {
+    return (data.length !== 0 &&
+        data.map(function (item, i) {
+            var Modal = activeModals[i] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
+            return (react_1.default.createElement("div", { key: item.modalId, onClick: function (e) {
                     handleCloseModal(i, e);
                 } },
                 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]))))));
+                        react_1.default.createElement(Modal, __assign({}, item.data))))));
         }));
 };
 exports.default = ModalProvider;

package/src/components/modal-provider.tsx

@@ -2,21 +2,19 @@ import React, { useEffect, useRef, useState } from "react";
 import manager from "../utils/ModalManager";
 import modal from "../utils/ModalManager";
 
-type ModalList = { [key: string]: React.ComponentType };
+export type ModalList = { [key: string]: React.ComponentType };
 
 interface ModalProviderProps {
-  CustomComponent?: React.ComponentType;
-  modalList: ModalList;
+  modalList: any;
 }
 
 type TData = { [key: string]: any };
 
-const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
+const ModalProvider = ({ 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]);
@@ -85,13 +83,13 @@ const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
   };
 
   return (
-    activeModals.length !== 0 &&
-    activeModals.map((Component, i) => {
-      const Modal = Component;
+    data.length !== 0 &&
+    data.map((item, i) => {
+      const Modal = activeModals[i] || (() => <></>);
 
       return (
         <div
-          key={i}
+          key={item.modalId}
           onClick={(e) => {
             handleCloseModal(i, e);
           }}
@@ -102,7 +100,7 @@ const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
                 refReducer(i, ref);
               }}
             >
-              <Modal key={i} {...data[i]} />
+              <Modal {...item.data} />
             </div>
           </div>
         </div>

package/src/utils/ModalManager.d.ts

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

package/src/utils/ModalManager.js

@@ -19,7 +19,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var Manager_1 = __importDefault(require("./Manager"));
-var uuid_1 = require("uuid");
+function uniqueID() {
+    return Math.floor(Math.random() * Date.now());
+}
 var constants = {
     CHANGE: "change",
     CLOSE: "close",
@@ -29,14 +31,13 @@ var ModalManager = /** @class */ (function (_super) {
     function ModalManager() {
         return _super.call(this) || this;
     }
-    ModalManager.prototype.create = function (name, data) {
+    ModalManager.prototype.create = function (name, payload) {
         this.name = name;
-        this.data = data;
+        this.data = payload;
         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 });
+        this.create(name, { modalId: uniqueID(), data: data });
     };
     ModalManager.prototype.close = function (position) {
         this.emitter.emit(constants.CLOSE, position);

package/src/utils/ModalManager.ts

@@ -1,5 +1,8 @@
 import Manager from "./Manager";
-import { v4 as uuidv4 } from "uuid";
+
+function uniqueID() {
+  return Math.floor(Math.random() * Date.now());
+}
 
 const constants = {
   CHANGE: "change",
@@ -11,14 +14,14 @@ class ModalManager extends Manager {
     super();
   }
 
-  create(name: string, data: { [key: string]: any }) {
+  create<T>(name: string, payload: { modalId: number; data?: T }) {
     this.name = name;
-    this.data = data;
+    this.data = payload;
     this.emitter.emit(constants.CHANGE, this.name, this.data);
   }
 
-  call(name: string, data: any = {}) {
-    this.create(name, { modalId: uuidv4(), data });
+  call<T>(name: string, data?: T) {
+    this.create<T>(name, { modalId: uniqueID(), data });
   }
 
   close<T>(position?: T) {