react-modal-orchestrator 1.0.0

package/.idea/ModalLib.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/copilot.data.migration.agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.ask.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AskMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.edit.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EditMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/misc.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MaterialThemeProjectNewConfig">
+    <option name="metadata">
+      <MTProjectMetadataState>
+        <option name="migrated" value="true" />
+        <option name="pristineConfig" value="false" />
+        <option name="userId" value="1f7785cf:191c2f026d3:-7ffe" />
+      </MTProjectMetadataState>
+    </option>
+  </component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="temurin-17" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ModalLib.iml" filepath="$PROJECT_DIR$/.idea/ModalLib.iml" />
+    </modules>
+  </component>
+</project>

package/README.md

@@ -0,0 +1,134 @@
+# ModalLib
+
+A centralized and flexible modal management system for React applications, now with lazy loading!
+
+`ModalLib` provides a clean, decoupled architecture for managing modals. Instead of controlling modal state with `useState` in every component, you can register all your modals in one place and trigger them from anywhere in your application. By using `React.lazy`, modal components are only loaded when they are first opened, reducing your application's initial bundle size.
+
+## Core Concepts
+
+- **ModalOrchestrator**: A provider component that wraps your application and powers the entire modal system.
+- **ModalHandler**: A component that listens for active modals and renders them. It now includes `React.Suspense` to handle lazy-loaded components.
+- **Modal Dictionary**: A simple JavaScript object where you map a unique name to each dynamically imported modal component.
+- **`useContext` for Control**: Use React's `useContext` hook to access the `openModal` and `closeModal` functions from anywhere in your component tree.
+
+## Installation
+
+```bash
+npm install modallib
+```
+
+## Setup
+
+First, you need to wrap your application with the `ModalOrchestrator` and place the `ModalHandler` within it.
+
+### 1. Create a Lazy-Loaded Modal Dictionary
+
+To take advantage of code-splitting, define your modal dictionary using `React.lazy`. This tells React to load the component code only when it's first rendered.
+
+Create a file (e.g., `modals.ts`) to define and register your modals.
+
+```javascript
+// components/MyFirstModal.tsx
+import React, { useContext } from 'react';
+import { ModalContext } from 'modallib';
+
+// Note: The component must be a default export for React.lazy to work
+export const MyFirstModal = ({ title }) => {
+  const { closeModal } = useContext(ModalContext);
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>This is my first modal!</p>
+      <button onClick={closeModal}>Close</button>
+    </div>
+  );
+};
+export default MyFirstModal;
+
+
+// modals.ts
+import React from 'react';
+
+export const modalDictionary = {
+  MY_FIRST_MODAL: React.lazy(() => import('./components/MyFirstModal')),
+  // ... register other lazy-loaded modals here
+};
+```
+
+### 2. Wrap Your App
+
+In your main application file (e.g., `App.tsx`), import the `ModalOrchestrator`, `ModalHandler`, and your modal dictionary.
+
+```javascript
+// App.tsx
+import { ModalOrchestrator, ModalHandler } from 'modallib';
+import { modalDictionary } from './modals';
+
+function App() {
+  return (
+    <ModalOrchestrator modals={modalDictionary}>
+      {/* Your application components */}
+      <h1>My App</h1>
+      <TriggerButton />
+
+      {/* 
+        Place the handler at the top level.
+        You can customize the loading fallback in your own Suspense boundary
+        if you don't like the default "Loading..." text.
+      */}
+      <ModalHandler />
+    </ModalOrchestrator>
+  );
+}
+```
+
+## Usage
+
+### Opening a Modal
+
+To open a modal, import `ModalContext`, get the `openModal` function from the context, and call it with the registered name of the modal you want to open.
+
+```javascript
+// components/TriggerButton.tsx
+import React, { useContext } from 'react';
+import { ModalContext } from 'modallib';
+
+const TriggerButton = () => {
+  const { openModal } = useContext(ModalContext);
+
+  const handleClick = () => {
+    // Open the modal and pass props to it
+    openModal('MY_FIRST_MODAL', { title: 'Hello World!' });
+  };
+
+  return <button onClick={handleClick}>Open Modal</button>;
+};
+```
+
+### Closing a Modal
+
+The `ModalHandler` automatically provides a `closeModal` function to your modal component via context. Use the `useContext` hook to access it.
+
+```javascript
+// components/MyFirstModal.tsx
+import React, { useContext } from 'react';
+import { ModalContext } from 'modallib';
+
+// Ensure the component is a default export
+const MyFirstModal = ({ title }) => {
+  const { closeModal } = useContext(ModalContext); // Get closeModal from context
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <button onClick={closeModal}>Close Me</button>
+    </div>
+  );
+};
+
+export default MyFirstModal;
+```
+
+## License
+
+This project is licensed under the ISC License.

package/dist/Modal/ModalHandler.d.ts

@@ -0,0 +1,2 @@
+declare const ModalHandler: () => import("react/jsx-runtime").JSX.Element | null;
+export default ModalHandler;

package/dist/Modal/ModalHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHandler.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalHandler.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY,sDAYjB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/dist/Modal/ModalHandler.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, Suspense } from "react";
+import { ModalDispatchContext, ModalStateContext } from "../contexts/ModalContext";
+const ModalHandler = () => {
+    const { modal, ModalComponent } = useContext(ModalStateContext);
+    const { closeModal } = useContext(ModalDispatchContext);
+    if (!modal || !ModalComponent)
+        return null;
+    if (modal)
+        document.body.style.removeProperty("overflow");
+    return (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ModalComponent, Object.assign({ onClose: closeModal }, modal.props)) }));
+};
+export default ModalHandler;
+//# sourceMappingURL=ModalHandler.js.map

package/dist/Modal/ModalHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHandler.js","sourceRoot":"","sources":["../../src/Modal/ModalHandler.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAC,oBAAoB,EAAE,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAEjF,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAChE,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAExD,IAAI,CAAC,KAAK,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAC3C,IAAI,KAAK;QAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,KAAC,QAAQ,IAAC,QAAQ,EAAE,uCAAqB,YACvC,KAAC,cAAc,kBAAC,OAAO,EAAE,UAAU,IAAM,KAAK,CAAC,KAAK,EAAI,GAC/C,CACZ,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC"}

package/dist/Modal/ModalOrchestrator.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import { type GenericObjectType } from "../types";
+declare const ModalOrchestrator: ({ modals, children, }: {
+    modals: GenericObjectType;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ModalOrchestrator;

package/dist/Modal/ModalOrchestrator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOrchestrator.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalOrchestrator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAGhD,QAAA,MAAM,iBAAiB,GAAI,uBAGxB;IACD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAmBA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/Modal/ModalOrchestrator.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModal } from "../hooks/useModal";
+import {} from "../types";
+import { ModalDispatchContext, ModalStateContext } from "../contexts/ModalContext";
+const ModalOrchestrator = ({ modals, children, }) => {
+    const { modal, ModalComponent, openModal, closeModal } = useModal(modals);
+    const state = useMemo(() => ({ modal, ModalComponent }), [modal, ModalComponent]);
+    const dispatch = useMemo(() => ({ openModal, closeModal }), [openModal, closeModal]);
+    return (_jsx(ModalStateContext.Provider, { value: state, children: _jsx(ModalDispatchContext.Provider, { value: dispatch, children: children }) }));
+};
+export default ModalOrchestrator;
+//# sourceMappingURL=ModalOrchestrator.js.map

package/dist/Modal/ModalOrchestrator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOrchestrator.js","sourceRoot":"","sources":["../../src/Modal/ModalOrchestrator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,OAAO,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAwB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAC,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElF,MAAM,iBAAiB,GAAG,CAAC,EACzB,MAAM,EACN,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAE1E,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EACjC,CAAC,KAAK,EAAE,cAAc,CAAC,CACxB,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EACjC,CAAC,SAAS,EAAE,UAAU,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACtC,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC3C,QAAQ,GACqB,GACL,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/contexts/ModalContext.d.ts

@@ -0,0 +1,12 @@
+export declare const ModalStateContext: import("react").Context<Pick<{
+    ModalComponent: import("react").FC<any> | null;
+    modal: import("../types").GenericModal | null;
+    openModal: (name: string, props?: object) => void;
+    closeModal: () => void;
+}, "modal" | "ModalComponent">>;
+export declare const ModalDispatchContext: import("react").Context<Pick<{
+    ModalComponent: import("react").FC<any> | null;
+    modal: import("../types").GenericModal | null;
+    openModal: (name: string, props?: object) => void;
+    closeModal: () => void;
+}, "closeModal" | "openModal">>;

package/dist/contexts/ModalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ModalContext.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB;;;mCAQ2D,CAAC;;+BANlF,CAAC;AAGT,eAAO,MAAM,oBAAoB;;;mCAGwD,CAAC;;+BADlF,CAAC"}

package/dist/contexts/ModalContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { useModal } from "../hooks/useModal";
+// This context will hold the stateful values that cause re-renders.
+export const ModalStateContext = createContext(null);
+// This context will hold the stable dispatch functions.
+export const ModalDispatchContext = createContext(null);
+//# sourceMappingURL=ModalContext.js.map

package/dist/contexts/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../src/contexts/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,oEAAoE;AACpE,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAE5C,IAAK,CAAC,CAAC;AAET,wDAAwD;AACxD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAE/C,IAAK,CAAC,CAAC"}

package/dist/hooks/useModal.d.ts

@@ -0,0 +1,19 @@
+import { type FC } from "react";
+import { type GenericModal, type GenericObjectType } from "../types";
+/**
+ * A custom hook to manage modals in a React application.
+ * It allows opening and closing modals, and keeps track of the modal stack.
+ *
+ * @param {GenericObjectType} modals - An object containing modal components.
+ * @returns {Object} - An object containing the current modal component, openModal and closeModal functions.
+ */
+type UseModalReturnType = {
+    ModalComponent: FC<any> | null;
+    modal: GenericModal | null;
+    openModal: (name: string, props?: object) => void;
+    closeModal: () => void;
+};
+export declare const smallGreyFont = "color: grey; font-size: 85%";
+export declare const keyFont = "color: orange;font-weight: bold;";
+export declare const useModal: (modals: GenericObjectType) => UseModalReturnType;
+export {};

package/dist/hooks/useModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoB,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAErE;;;;;;GAMG;AAEH,KAAK,kBAAkB,GAAG;IACxB,cAAc,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC/B,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AACF,eAAO,MAAM,aAAa,gCAAgC,CAAC;AAC3D,eAAO,MAAM,OAAO,qCAAqC,CAAC;AAE1D,eAAO,MAAM,QAAQ,GAAI,QAAQ,iBAAiB,KAAG,kBA4CpD,CAAC"}

package/dist/hooks/useModal.js

@@ -0,0 +1,45 @@
+import { useRef, useState } from "react";
+import {} from "../types";
+export const smallGreyFont = "color: grey; font-size: 85%";
+export const keyFont = "color: orange;font-weight: bold;";
+export const useModal = (modals) => {
+    const modalStack = useRef([]); // For purpose of keeping track of the modal stack, especially when there are multiple modals open
+    const [modal, setModal] = useState(null);
+    const ModalLookup = Object.assign({}, modals);
+    const modalName = modal ? modal.name : "";
+    const ModalComponent = ModalLookup[modalName];
+    const openModal = (name, props = {}) => {
+        // Check if the modal is already open
+        const existingModal = modalStack.current.find((modal) => modal.name === name);
+        if (existingModal) {
+            // If the modal is already open, just update its props
+            // additionally we don't need try/catch here, because we already know the modal name exists
+            existingModal.props = Object.assign(Object.assign({}, existingModal.props), props);
+            setModal(existingModal);
+            return;
+        }
+        try {
+            if (name in ModalLookup) {
+                modalStack.current.push({ name, props });
+                setModal({ name, props });
+            }
+            else {
+                console.log("%cModalManager %copening:", keyFont, smallGreyFont, name);
+                console.log("%cModalStack", smallGreyFont, modalStack.current);
+                throw new Error(`Modal with name "${name}" does not exist in ModalLookup.`);
+            }
+        }
+        catch (error) {
+            console.log("Failed to open modal:", error);
+            console.error("Failed to open modal:", error);
+        }
+    };
+    const closeModal = () => {
+        var _a;
+        console.log("closeModal");
+        modalStack.current.pop();
+        setModal((_a = modalStack.current[modalStack.current.length - 1]) !== null && _a !== void 0 ? _a : null);
+    };
+    return { ModalComponent, modal, openModal, closeModal };
+};
+//# sourceMappingURL=useModal.js.map

package/dist/hooks/useModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.js","sourceRoot":"","sources":["../../src/hooks/useModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAA6C,MAAM,UAAU,CAAC;AAgBrE,MAAM,CAAC,MAAM,aAAa,GAAG,6BAA6B,CAAC;AAC3D,MAAM,CAAC,MAAM,OAAO,GAAG,kCAAkC,CAAC;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAyB,EAAsB,EAAE;IACxE,MAAM,UAAU,GAAG,MAAM,CAAiB,EAAE,CAAC,CAAC,CAAC,kGAAkG;IACjJ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAC9D,MAAM,WAAW,qBAA2B,MAAM,CAAE,CAAC;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1C,MAAM,cAAc,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE;QAC7C,qCAAqC;QACrC,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAC3C,CAAC,KAAmB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAC7C,CAAC;QACF,IAAI,aAAa,EAAE,CAAC;YAClB,sDAAsD;YACtD,2FAA2F;YAC3F,aAAa,CAAC,KAAK,mCAAQ,aAAa,CAAC,KAAK,GAAK,KAAK,CAAE,CAAC;YAC3D,QAAQ,CAAC,aAAa,CAAC,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,IAAI,IAAI,IAAI,WAAW,EAAE,CAAC;gBACxB,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;gBACzC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACJ,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;gBACvE,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,aAAa,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;gBACjE,MAAM,IAAI,KAAK,CACb,oBAAoB,IAAI,kCAAkC,CAC3D,CAAC;YACJ,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;YAC5C,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;;QACtB,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAC1B,UAAU,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACzB,QAAQ,CAAC,MAAA,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,CAAC;IACtE,CAAC,CAAC;IAEF,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAC1D,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ModalOrchestrator } from './Modal/ModalOrchestrator';
+export { default as ModalHandler } from './Modal/ModalHandler';
+export { ModalDispatchContext, ModalStateContext } from './contexts/ModalContext';

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as ModalOrchestrator } from './Modal/ModalOrchestrator';
+export { default as ModalHandler } from './Modal/ModalHandler';
+export { ModalDispatchContext, ModalStateContext } from './contexts/ModalContext';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+export type GenericObjectType = {
+    [key: string]: any;
+};
+export type GenericModal = {
+    name: string;
+    props?: Record<string, any>;
+};

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/B,CAAC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-modal-orchestrator",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "modal",
+    "suspense"
+  ],
+  "author": "Rudi Wever: rwever@ford.com",
+  "license": "ISC",
+  "description": "A centralized and flexible modal management system for React applications.",
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}

package/src/MODAL_README.md

@@ -0,0 +1,97 @@
+# What to do when creating a modal.
+
+# 1. Create a new file named `MyModalComponent.tsx` in the component folder.
+
+code template:
+
+(do not pass: isOpen or setIsOpen args)
+
+- set the `ModalWindow` isOpen to true
+- use `closeModal` from `ModalContext` to close the modal
+
+```javascript
+const ModalComponent = () => {
+  const { closeModal } = useContext(ModalContext);
+
+  return (
+    <AEMPage pagePath={pagePath} aemHost={getAEMHost()}>
+      <ModalWindow variant={"large"} isOpen={true} onClose={closeModal}>
+        <ModalHeader onClose={closeModal}>
+          <div className={styles.modalHeader}>
+            MODAL HEADER
+          </div>
+          <button onClick={()=> closeModal()}>CLOSE</button>
+        </ModalHeader>
+        <ModalBody>
+          <div>
+            MODAL BODY
+          </div>
+        </ModalBody>
+        <ModalFooter placement="right">
+          <div>
+            MODAL FOOTER
+          </div>
+        </ModalFooter>
+      </ModalWindow>
+    </AEMPage>
+  );
+};
+export default ModalComponent;
+```
+
+# 2. Add the new modal to the constant `modals` in `ModalDictionary.tsx`.
+# 3. Add a definition to the RenderingDictionary.
+
+When adding the new modal to `bootstrap` for local rendering
+- the aemComponent and/or localComponent should be the ModalHandler
+- the modal will be prefixed with an alias to the group, to specify which modal it is
+
+# 4. How to trigger your modal?
+
+- use the `openModal` method from `ModalContext` to trigger the modal; `openModal` takes the name of the modal as defined in the
+  modalDictionary, optionally you can also pass in props to the modal when you are opening it.
+
+```javascript
+const { openModal } = useContext(ModalContext);
+
+const handleClick = () => openModal("PST_MODAL", {
+  data: "myDatal"
+});
+```
+
+## What if my modal needs data?
+It is not recommended to access state and/or functionality using the`useContext` hook from within your modal component (this includes accessing context from any custom hooks employed by the modal component).  It is very likely that the provider supplying the context will not be available when the modal is rendered, leading to errors. Instead, you should use 
+optional props of the `openModal` method, allowing your modal to receive data when it is rendered. The props will be accessible in the modal component through the `props` argument.  The only `useContext` hook you should use in your modal component is the `ModalContext` to access the `closeModal` method.
+
+When passing optional props to the modal, you can access them in the modal component like this:
+
+```javascript
+const ModalComponent = ({data}: {data:string}) => {
+  console.log(data); // "myData"  <<==== ACCESSING THE DATA PASSED TO THE MODAL
+  const { closeModal } = useContext(ModalContext); // <<==== ONLY useContext hook useage. ACCESSING THE CLOSE MODAL FUNCTION
+  const { data } = modalProps;
+
+  return (
+    <AEMPage pagePath={pagePath} aemHost={getAEMHost()}>
+      <ModalWindow variant={"large"} isOpen={true} onClose={closeModal}>
+        <ModalHeader onClose={closeModal}>
+          <div className={styles.modalHeader}>
+            MODAL HEADER
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <div>
+            MODAL BODY with data: {data}
+          </div>
+        </ModalBody>
+        <ModalFooter placement="right">
+          <div>
+            MODAL FOOTER
+          </div>
+        </ModalFooter>
+      </ModalWindow>
+    </AEMPage>
+  );
+};
+export default ModalComponent;
+```

package/src/Modal/ModalHandler.tsx

@@ -0,0 +1,17 @@
+import { useContext, Suspense } from "react";
+import {ModalDispatchContext, ModalStateContext} from "../contexts/ModalContext";
+
+const ModalHandler = () => {
+  const { modal, ModalComponent } = useContext(ModalStateContext);
+  const { closeModal } = useContext(ModalDispatchContext);
+
+  if (!modal || !ModalComponent) return null;
+  if (modal) document.body.style.removeProperty("overflow");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ModalComponent onClose={closeModal} {...modal.props} />
+    </Suspense>
+  );
+};
+export default ModalHandler;

package/src/Modal/ModalOrchestrator.tsx

@@ -0,0 +1,33 @@
+import { type ReactNode, useMemo } from "react";
+import {useModal} from "../hooks/useModal";
+import {type GenericObjectType} from "../types";
+import {ModalDispatchContext, ModalStateContext } from "../contexts/ModalContext";
+
+const ModalOrchestrator = ({
+  modals,
+  children,
+}: {
+  modals: GenericObjectType;
+  children: ReactNode;
+}) => {
+  const { modal, ModalComponent, openModal, closeModal } = useModal(modals);
+
+  const state = useMemo(
+    () => ({ modal, ModalComponent }),
+    [modal, ModalComponent],
+  );
+  const dispatch = useMemo(
+    () => ({ openModal, closeModal }),
+    [openModal, closeModal],
+  );
+
+  return (
+    <ModalStateContext.Provider value={state}>
+      <ModalDispatchContext.Provider value={dispatch}>
+        {children}
+      </ModalDispatchContext.Provider>
+    </ModalStateContext.Provider>
+  );
+};
+
+export default ModalOrchestrator;

package/src/contexts/ModalContext.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { useModal } from "../hooks/useModal";
+
+type ModalContextType = ReturnType<typeof useModal>;
+
+// This context will hold the stateful values that cause re-renders.
+export const ModalStateContext = createContext<
+  Pick<ModalContextType, "modal" | "ModalComponent">
+>(null!);
+
+// This context will hold the stable dispatch functions.
+export const ModalDispatchContext = createContext<
+  Pick<ModalContextType, "openModal" | "closeModal">
+>(null!);

package/src/hooks/useModal.tsx

@@ -0,0 +1,65 @@
+import { type FC, useRef, useState } from "react";
+import { type GenericModal, type GenericObjectType } from "../types";
+
+/**
+ * A custom hook to manage modals in a React application.
+ * It allows opening and closing modals, and keeps track of the modal stack.
+ *
+ * @param {GenericObjectType} modals - An object containing modal components.
+ * @returns {Object} - An object containing the current modal component, openModal and closeModal functions.
+ */
+
+type UseModalReturnType = {
+  ModalComponent: FC<any> | null;
+  modal: GenericModal | null;
+  openModal: (name: string, props?: object) => void;
+  closeModal: () => void;
+};
+export const smallGreyFont = "color: grey; font-size: 85%";
+export const keyFont = "color: orange;font-weight: bold;";
+
+export const useModal = (modals: GenericObjectType): UseModalReturnType => {
+  const modalStack = useRef<GenericModal[]>([]); // For purpose of keeping track of the modal stack, especially when there are multiple modals open
+  const [modal, setModal] = useState<GenericModal | null>(null);
+  const ModalLookup: GenericObjectType = { ...modals };
+  const modalName = modal ? modal.name : "";
+  const ModalComponent = ModalLookup[modalName];
+
+  const openModal = (name: string, props = {}) => {
+    // Check if the modal is already open
+    const existingModal = modalStack.current.find(
+      (modal: GenericModal) => modal.name === name,
+    );
+    if (existingModal) {
+      // If the modal is already open, just update its props
+      // additionally we don't need try/catch here, because we already know the modal name exists
+      existingModal.props = { ...existingModal.props, ...props };
+      setModal(existingModal);
+      return;
+    }
+
+    try {
+      if (name in ModalLookup) {
+        modalStack.current.push({ name, props });
+        setModal({ name, props });
+      } else {
+          console.log("%cModalManager %copening:", keyFont, smallGreyFont, name);
+          console.log("%cModalStack", smallGreyFont, modalStack.current);
+        throw new Error(
+          `Modal with name "${name}" does not exist in ModalLookup.`,
+        );
+      }
+    } catch (error) {
+      console.log("Failed to open modal:", error);
+      console.error("Failed to open modal:", error);
+    }
+  };
+
+  const closeModal = () => {
+    console.log("closeModal");
+    modalStack.current.pop();
+    setModal(modalStack.current[modalStack.current.length - 1] ?? null);
+  };
+
+  return { ModalComponent, modal, openModal, closeModal };
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as ModalOrchestrator } from './Modal/ModalOrchestrator';
+export { default as ModalHandler } from './Modal/ModalHandler';
+export { ModalDispatchContext, ModalStateContext } from './contexts/ModalContext';

package/src/types.ts

@@ -0,0 +1,7 @@
+export type GenericObjectType = {
+    [key: string]: any;
+};
+export type GenericModal = {
+    name: string;
+    props?: Record<string, any>;
+};

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "./dist",
+    "strict": true,
+    "target": "ESNext"
+  }
+}