react-flow-modal 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-modal",
-  "version": "0.1.0",
+  "version": "0.2.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,
+});

package/README.md

@@ -1,100 +0,0 @@
-# react-flow-modal
-
-Promise-based modal flows for React.
-
-`react-flow-modal` lets you treat modals as async flows using
-`Promise` and `async/await`, without coupling your UI to state-driven logic.
-
----
-
-## Installation
-
-```bash
-pnpm add react-flow-modal
-# or
-npm install react-flow-modal
-# or
-yarn add react-flow-modal
-```
-
-## Basic Usage
-
-```JSX
-import { ModalProvider, ModalHost, useModal } from "react-flow-modal";
-
-function App() {
-    const modal = useModal();
-
-    const onClick = async () => {
-        const result = await modal.open("confirm", 
-        (resolve, reject) => (
-            <ConfirmModal
-                onConfirm={() => resolve(true)}
-                onCancel={() => resolve(false)}
-            />
-        ));
-
-        // Resolving or rejecting the promise will also remove the modal from the stack
-
-        console.log(result);
-    };
-
-    return <button onClick={onClick}>Open modal</button>;
-}
-
-export default function Root() {
-  return (
-    <ModalProvider>
-      <App />
-      <ModalHost />
-    </ModalProvider>
-  );
-}
-```
-
-## API
-
-### open
-```TS
-open<T>(
-  key: string,
-  render: (
-    resolve: (value: T) => void,
-    reject: (reason?: unknown) => void
-  ) => React.ReactNode
-): Promise<T>
-```
-
-## Important
-
-> ⚠️ Make sure to always resolve or reject the promise.
-> Leaving it pending will block the async flow.
-
-## Why react-flow-modal?
-
-Most modal libraries are state-driven:
-```JSX
-setOpen(true);
-```
-
-This makes modal control implicit and tightly coupled to rendering.
-
-react-flow-modal treats modals as explicit async control points:
-
-```JSX
-const result = await open(...);
-```
-
-This keeps control flow readable, composable, and testable.
-
-## Features
-
-- Headless API (no styles, no UI constraints)
-- Promise-based modal control
-- Stack-based modal rendering
-- Fully controlled by user events
-- Works naturally with async / await
-
-## License
-
-MIT