react-confirm 0.3.0-2 → 0.3.0-4

package/README.md

@@ -23,7 +23,10 @@ react-confirm library offers several benefits:
 - The library provides flexibility in designing the dialog. There is no limitation in the type of components you can use, whether it be input forms or multiple buttons. You can even check out the demo site to see examples of how to customize the dialog.
 
 ## Demo
-https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/1_typescript)
+
+Please note that interactions with the sample dialogs output details to the console. Review the console output while interacting with the dialogs to observe the behavior and outcomes.
+
 
 ## Versions
 
@@ -79,7 +82,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'
 
@@ -106,14 +109,16 @@ const handleOnClick2 = async () => {
 You can check more complex example in [codesandbox](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)
 
 ## Using with Context
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/2_typescript_using_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);
@@ -139,16 +144,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
-
-Experimentally added full typescript declaration files at `typescript` branch.
+## 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.
 
-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-2",
+  "version": "0.3.0-4",
   "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;