@overlastic/react 0.5.0 → 0.6.1

package/README.md

@@ -1,183 +1,29 @@
-# @overlastic/react
+<p align="center">
+  <a href="https://overlastic.vercel.app/" target="blank">
+    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg" width="120" alt="Nest Logo" />
+  </a>
+</p>
 
-@overlastic/react is used to define Overlay components in react and supports both imperative and declarative usage!
+<p align="center">
+ A create modal | dialog | popup promise deferred library
+</p>
 
-## Install
+<p align="center">
+  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/v/@overlastic/react.svg" alt="NPM Version" /></a>
+  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/l/@overlastic/react.svg" alt="Package License" /></a>
+  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/dm/@overlastic/react.svg" alt="NPM Downloads" /></a>
+</p>
 
-With pnpm:
-```sh
-pnpm add @overlastic/react
-```
-
-With yarn:
-```sh
-yarn add @overlastic/react
-```
-
-## Usage
-
-### Step 1: Define Component
-
-```tsx
-// overlay.tsx
-export function Component(props) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    // Duration of overlay duration, helps prevent premature component destruction
-    duration: 200,
-  })
-
-  return (
-    <div className={visible && 'is--visible'}>
-      <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
-    </div>
-  )
-}
-```
-
-### Step 2: Create Overlay
-
-You can convert the component into a modal dialog box by using the `defineOverlay` method, which allows you to call it in Javascript / Typescript.
-```ts
-import { defineOverlay } from '@overlastic/react'
-import { Component } from './overlay'
-
-// Convert to imperative callback
-const callback = defineOverlay(Component)
-// Call the component and get the resolve callback value
-const value = await callback({ title: 'callbackOverlay' })
-// value === "callbackOverlay:confirmed"
-```
-
-You can also directly call the component through `renderOverlay`, bypassing the `defineOverlay` method.
-
-```ts
-import { renderOverlay } from '@overlastic/react'
-import { Component } from './overlay'
-
-const value = await renderOverlay(Component, {
-  title: 'useOverlayDefine'
-})
-// value === "useOverlayDefine:confirmed"
-```
-
-## Injection Holder
-
-In addition to using `defineOverlay` and `renderOverlay` to create popup components, you can also use useOverlayHolder to create popup components within a component and inherit the current context of the application.
-
-```tsx
-import { useOverlayHolder } from '@overlastic/react'
-import { OverlayComponent } from './overlay'
-
-export function Main() {
-  // Use useOverlayHolder(Component) to create a component holder that supports the current context.
-  const [holder, overlayApi] = useOverlayHolder(OverlayComponent)
-
-  function open() {
-    // Open the popup component
-    overlayApi()
-      .then((result) => {})
-  }
-  return (
-    <>
-      <div onClick={open}> open </div>
-      {/* Mount the holder */}
-      {holder}
-    </>
-  )
-}
-```
-
-## Define Component
-
-Components created using `@overlastic/react` support both imperative and declarative methods of calling. In addition to imperative methods, these components can also be used in JSX.
+## Description
 
-> This is an optional option that is very useful when porting old components.
+Create messages or dialog overlays using Overlastic in React APP.
 
-```tsx
-// If using Typescript, use PropsWithOverlays to define props type
-import type { PropsWithOverlays } from '@overlastic/react'
-import { useOverlayDefine } from '@overlastic/react'
+## Installation
 
-export function Component(props: PropsWithOverlays<{ /* ...you props */ }>) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    // pass props to useOverlayDefine for processing
-    props
-  })
-
-  return (
-    <div className={visible && 'is--visible'}>
-      ...
-    </div>
-  )
-}
+```bash
+$ npm install --save @overlastic/react
 ```
 
-Once the Overlay component has received props, the popup layer component can be used in JSX.
-
-```tsx
-import { useState } from 'react'
-import { Component } from './overlay'
-
-export function Main() {
-  const [visible, setVisible] = useState(false)
-
-  function openOverlay() {
-    setVisible(true)
-  }
-
-  function onResolve(value) {
-    setVisible(false)
-  }
-
-  function onReject(value) {
-    setVisible(false)
-  }
-
-  return (
-    <Component visible={visible} onResolve={onResolve} onReject={onReject} />
-  )
-}
-```
+## Quick Start
 
-If you want to replace other fields and event names, you can do so using the `model` and `events` config of useOverlayDefine.
-
-```jsx
-function Component(props: { onOn?: Function, onNook?: Function, open: boolean }) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    events: { resolve: 'onOk', reject: 'onNook' },
-    model: 'open',
-    props,
-  })
-  // ...
-}
-```
-
-## Customized
-
-You can use `@overlastic/react` to modify existing components or component libraries
-
-Take [antd(drawer)](https://ant.design/components/drawer-cn) as an example：
-
-```tsx
-import type { PropsWithOverlays } from '@overlastic/react'
-import { useOverlayDefine } from '@overlastic/react'
-import { Button, Drawer } from 'antd'
-
-function MyDrawer(props: PropsWithOverlays<{ title: string }>) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    duration: 200,
-    props,
-  })
-
-  return (
-    <Drawer title={props.title} onClose={reject} open={visible}>
-      {/* Custom contents.... */}
-      <Button type="primary" onClick={() => resolve(`${props.title}:confirmed`)}>
-        Confirm
-      </Button>
-    </Drawer>
-  )
-}
-
-export default MyDrawer
-```
+[Overview & Tutorial](https://overlastic.vercel.app/react/)

package/dist/index.cjs

@@ -23,9 +23,9 @@ __export(src_exports, {
   OverlayProvider: () => OverlayProvider,
   defineOverlay: () => defineOverlay,
   renderOverlay: () => renderOverlay,
-  useOverlay: () => useOverlay,
-  useOverlayDefine: () => useOverlayDefine,
-  useOverlayHolder: () => useOverlayHolder
+  useDefineOverlay: () => useDefineOverlay,
+  useOverlayHolder: () => useOverlayHolder,
+  useOverlayInject: () => useOverlayInject
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -54,7 +54,7 @@ function defineAnonymousComponent(component) {
 }
 
 // src/composable/define.ts
-function useOverlayDefine(options = {}) {
+function useDefineOverlay(options = {}) {
   const { immediate = true, duration = 0, automatic = true } = options;
   const context = (0, import_react2.useContext)(ScriptsContext);
   const dec = Reflect.get(context, "in_dec");
@@ -123,14 +123,15 @@ var import_pascal_case = require("pascal-case");
 var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
-function useOverlayHolder(Component, options = {}) {
+function useOverlayHolder(component, options = {}) {
   const { callback, scripts, props, refresh } = useRefreshMetadata();
   const name = (0, import_core3.defineName)(options.id, options.autoIncrement);
   function render() {
     const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
+    const Comp = component;
     const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: name, children: [
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...props }),
       " "
     ] });
     return options.root !== false && root ? (0, import_react_dom.createPortal)(content, root) : content;
@@ -173,7 +174,7 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/overlay.tsx
+// src/composable/inject.tsx
 var import_core4 = require("@overlastic/core");
 var import_react5 = require("react");
 var import_pascal_case2 = require("pascal-case");
@@ -196,7 +197,7 @@ var { define } = (0, import_core4.createConstructor)((Instance, props, options)
   }
   render(InstanceWithProvider, props);
 }, { container: false });
-function useOverlay(Instance) {
+function useOverlayInject(Instance) {
   const { render, vanish } = (0, import_react5.useContext)(InstancesContext);
   return define(Instance, { render, vanish });
 }
@@ -254,7 +255,7 @@ function OverlayProvider(props) {
   OverlayProvider,
   defineOverlay,
   renderOverlay,
-  useOverlay,
-  useOverlayDefine,
-  useOverlayHolder
+  useDefineOverlay,
+  useOverlayHolder,
+  useOverlayInject
 });

package/dist/index.d.cts

@@ -1,7 +1,7 @@
-import * as react from 'react';
 import { Dispatch, SetStateAction, FC, PropsWithChildren } from 'react';
 import * as _overlastic_core from '@overlastic/core';
 import { ImperativeOverlay, MountOptions } from '@overlastic/core';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type PropsWidthOverlays<P = unknown> = P & {
@@ -24,7 +24,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface OverlayDefineOptions {
+interface DefineOverlayOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -50,13 +50,13 @@ interface OverlayDefineOptions {
      */
     automatic?: boolean;
 }
-interface ProgramsReturn {
+interface DefineOverlayReturn {
     /** the notification reject, modify visible, and destroy it after the duration ends */
-    reject: Function;
+    reject: (reason?: any) => void;
     /** the notification resolve, modify visible, and destroy it after the duration ends */
-    resolve: Function;
+    resolve: (value?: any) => void;
     /** destroy the current instance (immediately) */
-    vanish: Function;
+    vanish: () => void;
     /** visible control popup display and hide */
     visible: boolean;
     /** visible dispatch change */
@@ -64,20 +64,20 @@ interface ProgramsReturn {
     /** current deferred */
     deferred?: Promise<any>;
 }
-declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+declare function useDefineOverlay(options?: DefineOverlayOptions): DefineOverlayReturn;
 
 type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
-declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
+declare function useOverlayHolder<Props, Resolved = void>(component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
 
 interface Options {
     render: (instance: FC, props: any) => void;
     vanish: (instance: FC) => void;
 }
-declare function useOverlay<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+declare function useOverlayInject<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
 
-declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, unknown>;
-declare const renderOverlay: <Props, Resolved = void>(instance: react.FC<any>, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
+declare const defineOverlay: <Props, Resolved = void>(instance: React.FC<Props>, options?: GlobalMountOptions | undefined) => ImperativeOverlay<Props, Resolved, unknown>;
+declare const renderOverlay: <Props, Resolved = void>(instance: React.FC<Props>, props?: Props | undefined, options?: GlobalMountOptions | undefined) => Promise<Resolved>;
 
 declare function OverlayProvider(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
 
-export { type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };
+export { type DefineOverlayOptions, type DefineOverlayReturn, type InjectionHolder, OverlayProvider, type PropsWidthOverlays, defineOverlay, renderOverlay, useDefineOverlay, useOverlayHolder, useOverlayInject };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import * as react from 'react';
 import { Dispatch, SetStateAction, FC, PropsWithChildren } from 'react';
 import * as _overlastic_core from '@overlastic/core';
 import { ImperativeOverlay, MountOptions } from '@overlastic/core';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type PropsWidthOverlays<P = unknown> = P & {
@@ -24,7 +24,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface OverlayDefineOptions {
+interface DefineOverlayOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -50,13 +50,13 @@ interface OverlayDefineOptions {
      */
     automatic?: boolean;
 }
-interface ProgramsReturn {
+interface DefineOverlayReturn {
     /** the notification reject, modify visible, and destroy it after the duration ends */
-    reject: Function;
+    reject: (reason?: any) => void;
     /** the notification resolve, modify visible, and destroy it after the duration ends */
-    resolve: Function;
+    resolve: (value?: any) => void;
     /** destroy the current instance (immediately) */
-    vanish: Function;
+    vanish: () => void;
     /** visible control popup display and hide */
     visible: boolean;
     /** visible dispatch change */
@@ -64,20 +64,20 @@ interface ProgramsReturn {
     /** current deferred */
     deferred?: Promise<any>;
 }
-declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+declare function useDefineOverlay(options?: DefineOverlayOptions): DefineOverlayReturn;
 
 type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
-declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
+declare function useOverlayHolder<Props, Resolved = void>(component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
 
 interface Options {
     render: (instance: FC, props: any) => void;
     vanish: (instance: FC) => void;
 }
-declare function useOverlay<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+declare function useOverlayInject<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
 
-declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, unknown>;
-declare const renderOverlay: <Props, Resolved = void>(instance: react.FC<any>, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
+declare const defineOverlay: <Props, Resolved = void>(instance: React.FC<Props>, options?: GlobalMountOptions | undefined) => ImperativeOverlay<Props, Resolved, unknown>;
+declare const renderOverlay: <Props, Resolved = void>(instance: React.FC<Props>, props?: Props | undefined, options?: GlobalMountOptions | undefined) => Promise<Resolved>;
 
 declare function OverlayProvider(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
 
-export { type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };
+export { type DefineOverlayOptions, type DefineOverlayReturn, type InjectionHolder, OverlayProvider, type PropsWidthOverlays, defineOverlay, renderOverlay, useDefineOverlay, useOverlayHolder, useOverlayInject };

package/dist/index.global.js

@@ -32220,9 +32220,9 @@ var OverlaysReact = (() => {
     OverlayProvider: () => OverlayProvider,
     defineOverlay: () => defineOverlay,
     renderOverlay: () => renderOverlay,
-    useOverlay: () => useOverlay,
-    useOverlayDefine: () => useOverlayDefine,
-    useOverlayHolder: () => useOverlayHolder
+    useDefineOverlay: () => useDefineOverlay,
+    useOverlayHolder: () => useOverlayHolder,
+    useOverlayInject: () => useOverlayInject
   });
 
   // ../@core/src/define/global.ts
@@ -32357,7 +32357,7 @@ var OverlaysReact = (() => {
   }
 
   // src/composable/define.ts
-  function useOverlayDefine(options = {}) {
+  function useDefineOverlay(options = {}) {
     const { immediate = true, duration = 0, automatic = true } = options;
     const context2 = (0, import_react2.useContext)(ScriptsContext);
     const dec = Reflect.get(context2, "in_dec");
@@ -32484,14 +32484,15 @@ var OverlaysReact = (() => {
   var import_react4 = __toESM(require_react(), 1);
   var import_react_dom = __toESM(require_react_dom(), 1);
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
-  function useOverlayHolder(Component, options = {}) {
+  function useOverlayHolder(component, options = {}) {
     const { callback, scripts, props, refresh } = useRefreshMetadata();
     const name = defineName(options.id, options.autoIncrement);
     function render() {
       const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
+      const Comp = component;
       const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: name, children: [
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...props }),
         " "
       ] });
       return options.root !== false && root ? (0, import_react_dom.createPortal)(content, root) : content;
@@ -32534,7 +32535,7 @@ var OverlaysReact = (() => {
     return { callback, scripts, props, refresh };
   }
 
-  // src/composable/overlay.tsx
+  // src/composable/inject.tsx
   var import_react5 = __toESM(require_react(), 1);
   var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
   var { define } = createConstructor((Instance, props, options) => {
@@ -32555,7 +32556,7 @@ var OverlaysReact = (() => {
     }
     render(InstanceWithProvider, props);
   }, { container: false });
-  function useOverlay(Instance) {
+  function useOverlayInject(Instance) {
     const { render, vanish } = (0, import_react5.useContext)(InstancesContext);
     return define(Instance, { render, vanish });
   }

package/dist/index.js

@@ -23,7 +23,7 @@ function defineAnonymousComponent(component) {
 }
 
 // src/composable/define.ts
-function useOverlayDefine(options = {}) {
+function useDefineOverlay(options = {}) {
   const { immediate = true, duration = 0, automatic = true } = options;
   const context = useContext(ScriptsContext);
   const dec = Reflect.get(context, "in_dec");
@@ -92,14 +92,15 @@ import { pascalCase } from "pascal-case";
 import { useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
-function useOverlayHolder(Component, options = {}) {
+function useOverlayHolder(component, options = {}) {
   const { callback, scripts, props, refresh } = useRefreshMetadata();
   const name = defineName(options.id, options.autoIncrement);
   function render() {
     const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
+    const Comp = component;
     const content = /* @__PURE__ */ jsxs("div", { id: name, children: [
       " ",
-      /* @__PURE__ */ jsx(Component, { ...props }),
+      /* @__PURE__ */ jsx(Comp, { ...props }),
       " "
     ] });
     return options.root !== false && root ? createPortal(content, root) : content;
@@ -142,7 +143,7 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/overlay.tsx
+// src/composable/inject.tsx
 import { createConstructor } from "@overlastic/core";
 import { useContext as useContext2 } from "react";
 import { pascalCase as pascalCase2 } from "pascal-case";
@@ -165,7 +166,7 @@ var { define } = createConstructor((Instance, props, options) => {
   }
   render(InstanceWithProvider, props);
 }, { container: false });
-function useOverlay(Instance) {
+function useOverlayInject(Instance) {
   const { render, vanish } = useContext2(InstancesContext);
   return define(Instance, { render, vanish });
 }
@@ -222,7 +223,7 @@ export {
   OverlayProvider,
   defineOverlay,
   renderOverlay,
-  useOverlay,
-  useOverlayDefine,
-  useOverlayHolder
+  useDefineOverlay,
+  useOverlayHolder,
+  useOverlayInject
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/react",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -32,7 +32,7 @@
     "pascal-case": "3.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@overlastic/core": "^0.5.0"
+    "@overlastic/core": "^0.6.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",