react-confirm 0.3.0-1 → 0.3.0-3

package/README.md

@@ -3,10 +3,14 @@ react-confirm is a lightweight library that simplifies the implementation of con
 
 One key feature of react-confirm is that it doesn't provide a specific view or component for the confirmation dialog, allowing you to easily customize the appearance of the dialog to match your application's design.
 
-In the [example](https://github.com/haradakunihiko/react-confirm/tree/master/example), [react-bootstrap](https://react-bootstrap-v3.netlify.app/components/modal/) and [material-ui](http://www.material-ui.com/#/components/dialog) are used with.
-
 [![npm version](https://badge.fury.io/js/react-confirm.svg)](https://badge.fury.io/js/react-confirm)
 
+## Examples
+- [react-bootstrap demo in codesandbox](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)
+- [chakra-ui(using context) demo in codesandbox](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
+- [react-bootstrap example](https://github.com/haradakunihiko/react-confirm/tree/master/example/react-bootstrap)
+- [material-ui example](https://github.com/haradakunihiko/react-confirm/tree/master/example/material-ui)
+
 ## Motivation
 React is a powerful library that allows for reactive rendering based on component state. However, managing temporary states like confirmation dialogs can quickly become complex. The question is: is it worth implementing these states within your app? The answer is not always a clear yes.
 
@@ -75,7 +79,7 @@ export function confirmWrapper(confirmation, options = {}) {
 
 ### Call it!
 Now, you can show dialog just like window.confirm with async-await. The most common example is onclick handler for submit buttons.
- 
+
 ```js
 import { confirmWrapper, confirm } from './confirm'
 
@@ -104,12 +108,12 @@ You can check more complex example in [codesandbox](https://codesandbox.io/s/rea
 ## Using with Context
 By default, this library renders the confirmation dialog without appending the component to your app's React component tree. While this can be useful, it may cause issues if you need to consume context in your component. To overcome this problem, you can use the `MountPoint` component to include your confirmation dialog within your app's tree, enabling it to access context and other data from the app.
 
-Create your own `createConfirmation` using `createConfirmationCreater` and `createReactTreeMounter`.
+Create your own `createConfirmation` function and `MountPoint` Component using `createConfirmationCreater` and `createReactTreeMounter`.
 
 ```js
 import { createConfirmationCreater, createReactTreeMounter, createMountPoint } from 'react-confirm';
 
-const mounter = createReactTreeMounter(); 
+const mounter = createReactTreeMounter();
 
 export const createConfirmation = createConfirmationCreater(mounter);
 export const MountPoint = createMountPoint(mounter);
@@ -135,16 +139,18 @@ export const confirm = createConfirmation(YourDialog);
 To render the confirmation dialog within the React component tree but in a different part of the DOM, you can pass a DOM element to the `createReactTreeMounter` function. This will use the `createPortal` method to render the confirmation dialog in the specified DOM element while keeping it within the React component tree.
 
 ```js
-const mounter = createReactTreeMounter(document.body); 
+const mounter = createReactTreeMounter(document.body);
 ```
 
 ### example
 Context example with Chakra-ui in [codesandbox](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
 
-## typescript
+## typescript usage
+Below, we present two possible ways to define a confirmation dialog component using react-confirm. You can choose either based on your preference.
 
-Experimentally added full typescript declaration files at `typescript` branch.
-
-see [typescript example](https://github.com/haradakunihiko/react-confirm/tree/typescript/example/ts-react-bootstrap).
+```ts
+const Confirmation1: React.FC<ConfirmDialogProps<Props, Response>> = (props) => (<Dialog></Dialog>)
+const Confirmation2: ConfirmDialog<Props, Response> = (props) => (<Dialog></Dialog>)
+```
 
-and try `npm install git@github.com:haradakunihiko/react-confirm.git#typescript` to use in your project.
+Ensure to specify both the dialog component's `Props` and the response value `Response` when using these types. These typings will be especially useful when defining functions to display the dialog.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm",
-  "version": "0.3.0-1",
+  "version": "0.3.0-3",
   "description": "Small library which makes your Dialog component callable",
   "main": "lib/index.js",
   "repository": {
@@ -18,26 +18,37 @@
   "homepage": "https://github.com/haradakunihiko/react-confirm",
   "files": [
     "lib",
-    "src"
+    "src",
+    "typescript"
   ],
   "scripts": {
     "clean": "rimraf lib",
     "build": "babel src --out-dir lib",
     "prepublish": "npm run clean && npm run build",
-    "test": "echo succeeded"
+    "test": "jest"
   },
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "react-dom": "18.x",
-    "react": "18.x"
+    "react": "18.x",
+    "react-dom": "18.x"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^29.5.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.13.11",
     "rimraf": "^3.0.2"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "typings": "typescript/index.d.ts"
 }

package/typescript/index.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+type ConfirmableProps<P, R> = {
+    dispose: () => void;
+    resolve: PromiseLike<R>;
+    reject: (reason?: any) => void;
+} & P;
+
+type ConfirmableDialog<P, R> = React.ComponentType<ConfirmableProps<P, R>>;
+
+export type ConfirmDialogProps<P, R> = {
+  dismiss: () => void;
+  proceed: (value: R) => void;
+  cancel: (value?: any) => void;
+  show: boolean;
+} & P;
+
+export type ConfirmDialog<P, R> = React.ComponentType<ConfirmDialogProps<P, R>> ;
+
+export declare function confirmable<P, R>(
+    component: ConfirmDialog<P, R>
+): ConfirmableDialog<P, R>;
+
+export declare function createConfirmation<P, R>(
+    component: ConfirmableDialog<P, R>,
+    unmountDelay?: number,
+    mountingNode?: HTMLElement,
+): (props: P) => Promise<R>;
+
+type Mounter = {
+  mount: (component: React.ComponentType, ) => string
+  unmount: (key: string) => void
+}
+
+type TreeMounter = {
+  options: {
+      setMountedCallback: (callback: any) => void
+      mountNode: Element | DocumentFragment
+  }
+} & Mounter;
+
+export declare function createReactTreeMounter(mountNode?: HTMLElement): TreeMounter;
+export declare function createMountPoint(moounter: TreeMounter): React.ComponentType;
+export declare function createDomTreeMounter(mountNode?: HTMLElement): Mounter;
+export declare function createConfirmationCreater(mounter: Mounter): typeof createConfirmation;