react-flow-modal 0.1.0

package/README.md

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

package/dist/index.cjs

@@ -0,0 +1,96 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ModalHost: () => ModalHost,
+  ModalProvider: () => ModalProvider,
+  useModal: () => useModal
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ModalProvider.tsx
+var import_react2 = require("react");
+
+// src/modalContext.ts
+var import_react = require("react");
+var ModalContext = (0, import_react.createContext)({
+  stack: [],
+  setStack: () => []
+});
+
+// src/ModalProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModalProvider = ({ children }) => {
+  const [stack, setStack] = (0, import_react2.useState)([]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, { value: { stack, setStack }, children });
+};
+
+// src/ModalHost.tsx
+var import_react4 = require("react");
+
+// src/useModalContext.ts
+var import_react3 = require("react");
+var useModalContext = () => {
+  const context = (0, import_react3.useContext)(ModalContext);
+  if (!context) {
+    throw new Error("useModalContext must be used within a ModalProvider");
+  }
+  return context;
+};
+
+// src/ModalHost.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ModalHost = () => {
+  const { stack } = useModalContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Fragment, { children: stack.map((item) => item) });
+};
+
+// src/useModal.tsx
+var import_react5 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var useModal = () => {
+  const { setStack } = useModalContext();
+  const pop = () => {
+    setStack((prev) => prev.slice(0, -1));
+  };
+  const push = (element) => {
+    setStack((prev) => [...prev, element]);
+  };
+  const open = (key, render) => {
+    return new Promise((resolve, reject) => {
+      const element = render((value) => {
+        resolve(value);
+        pop();
+      }, (reason) => {
+        reject(reason);
+        pop();
+      });
+      push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Fragment, { children: element }, key));
+    });
+  };
+  return { open };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalHost,
+  ModalProvider,
+  useModal
+});

package/dist/index.d.cts

@@ -0,0 +1,11 @@
+import React, { FC, PropsWithChildren } from 'react';
+
+declare const ModalProvider: FC<PropsWithChildren>;
+
+declare const ModalHost: FC;
+
+declare const useModal: () => {
+    open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => React.ReactNode) => Promise<T>;
+};
+
+export { ModalHost, ModalProvider, useModal };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import React, { FC, PropsWithChildren } from 'react';
+
+declare const ModalProvider: FC<PropsWithChildren>;
+
+declare const ModalHost: FC;
+
+declare const useModal: () => {
+    open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => React.ReactNode) => Promise<T>;
+};
+
+export { ModalHost, ModalProvider, useModal };

package/dist/index.js

@@ -0,0 +1,67 @@
+// src/ModalProvider.tsx
+import { useState } from "react";
+
+// src/modalContext.ts
+import { createContext } from "react";
+var ModalContext = createContext({
+  stack: [],
+  setStack: () => []
+});
+
+// src/ModalProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ModalProvider = ({ children }) => {
+  const [stack, setStack] = useState([]);
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { stack, setStack }, children });
+};
+
+// src/ModalHost.tsx
+import { Fragment } from "react";
+
+// src/useModalContext.ts
+import { useContext } from "react";
+var useModalContext = () => {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("useModalContext must be used within a ModalProvider");
+  }
+  return context;
+};
+
+// src/ModalHost.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ModalHost = () => {
+  const { stack } = useModalContext();
+  return /* @__PURE__ */ jsx2(Fragment, { children: stack.map((item) => item) });
+};
+
+// src/useModal.tsx
+import { Fragment as Fragment2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var useModal = () => {
+  const { setStack } = useModalContext();
+  const pop = () => {
+    setStack((prev) => prev.slice(0, -1));
+  };
+  const push = (element) => {
+    setStack((prev) => [...prev, element]);
+  };
+  const open = (key, render) => {
+    return new Promise((resolve, reject) => {
+      const element = render((value) => {
+        resolve(value);
+        pop();
+      }, (reason) => {
+        reject(reason);
+        pop();
+      });
+      push(/* @__PURE__ */ jsx3(Fragment2, { children: element }, key));
+    });
+  };
+  return { open };
+};
+export {
+  ModalHost,
+  ModalProvider,
+  useModal
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-flow-modal",
+  "version": "0.1.0",
+  "description": "Promise-based modal flows for React",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dohyeon-kr/react-flow-modal.git"
+  },
+  "keywords": [
+    "react",
+    "modal",
+    "async",
+    "promise",
+    "flow"
+  ],
+  "author": "Dohyeon Ju",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "packageManager": "pnpm@10.27.0"
+}