react-flow-modal 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-modal",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Promise-based modal flows for React",
   "repository": {
     "type": "git",
@@ -23,9 +23,6 @@
       "require": "./dist/index.cjs"
     }
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "build": "tsup",
     "prepublishOnly": "pnpm build"

package/src/ModalHost.tsx

@@ -0,0 +1,12 @@
+import React, { FC, Fragment } from 'react';
+import { useModalContext } from './useModalContext';
+
+export const ModalHost: FC = () => {
+    const { stack } = useModalContext();
+
+    return (
+        <Fragment>
+            {stack.map((item) => (item))}
+        </Fragment>
+    );
+};

package/src/ModalProvider.tsx

@@ -0,0 +1,12 @@
+import React, { FC, PropsWithChildren, useState } from "react";
+import { ModalContext } from "./modalContext";
+
+export const ModalProvider: FC<PropsWithChildren> = ({ children }) => {
+    const [stack, setStack] = useState<React.ReactNode[]>([]);
+
+    return (
+        <ModalContext.Provider value={{ stack, setStack }}>
+            {children}
+        </ModalContext.Provider>
+    );
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { ModalProvider } from './ModalProvider';
+export { ModalHost } from './ModalHost';
+export { useModal } from './useModal';

package/src/modalContext.ts

@@ -0,0 +1,9 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+export const ModalContext = createContext<{
+    stack: React.ReactNode[];
+    setStack: Dispatch<SetStateAction<React.ReactNode[]>>
+}>({
+    stack: [],
+    setStack: () => [] as React.ReactNode[],
+});

package/src/useModal.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from "react";
+import { useModalContext } from "./useModalContext";
+
+export const useModal = () => {
+    const { setStack } = useModalContext();
+
+    const pop = () => {
+        setStack((prev) => prev.slice(0, -1));
+    };
+
+    const push = (element: React.ReactNode) => {
+        setStack((prev) => [...prev, element]);
+    };
+
+    /**
+     * 모달을 열고 닫는 함수
+     * @caution 모달을 열고 닫는 함수는 비동기 함수이므로, 모달을 열고 닫는 함수를 호출하면, 반드시 resolve 또는 reject 함수를 호출해야 합니다. 
+     * 그렇지 않으면 pending 상태가 되어 무한 대기 상태가 됩니다.
+     * @param key - 모달의 고유 키
+     * @param render - 모달을 렌더링하는 함수
+     * @returns - 모달 컴포넌트가 반환하는 값을 반환하는 Promise
+     */
+    const open = <T,>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => React.ReactNode) => {
+        return new Promise<T>((resolve, reject) => {
+            const element = render((value) => {
+                resolve(value);
+                pop();
+            }, (reason) => {
+                reject(reason);
+                pop();
+            });
+            push(<Fragment key={key}>{element}</Fragment>);
+        });
+    };
+
+    return { open };
+};

package/src/useModalContext.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ModalContext } from "./modalContext";
+
+export const useModalContext = () => {
+    const context = useContext(ModalContext);
+
+    if (!context) {
+        throw new Error('useModalContext must be used within a ModalProvider');
+    }
+
+    return context;
+};

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+
+    "jsx": "react-jsx",
+
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": false,
+
+    "strict": true,
+    "skipLibCheck": true,
+
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+});