react-modal-orchestrator 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# ModalLib
+# react-modal-orchestrator
 
 A centralized and flexible modal management system for React applications, now with lazy loading!
 
@@ -14,7 +14,7 @@ A centralized and flexible modal management system for React applications, now w
 ## Installation
 
 ```bash
-npm install modallib
+npm install react-modal-orchestrator
 ```
 
 ## Setup

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "react-modal-orchestrator",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js"
+  },
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build",

package/.idea/ModalLib.iml

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

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

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

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

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

package/.idea/misc.xml

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

@@ -1,8 +0,0 @@
-<?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/src/MODAL_README.md

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

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

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

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

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

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

package/src/types.ts

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

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "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"
-  }
-}