react-bounded-overlay-manager 1.0.0-beta.1 → 1.0.0-beta.2

package/README.md

@@ -1,30 +1,49 @@
-# React + TypeScript + Vite
+# React Bounded Overlay Manager
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Overview
 
-Currently, two official plugins are available:
+`React Bounded Overlay Manager` is a React library designed to create and manage overlay components within a specified bounding container. It offers flexible positioning, dynamic show/hide behavior, customizable event handling, and an API for extended control.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Key Features
 
-## Expanding the ESLint configuration
+- **Flexible Positioning**: Utilize `position` and `offset` parameters within the Overlay component to achieve precise and strategic placement of overlays.
+- **Dynamic Visibility**: Effortlessly configure the appearance and disappearance of overlays in response to user interactions, enhancing user experience and interface responsiveness.
+- **Customizable Event Handling**: Tailor overlay visibility to align with specific application requirements. This includes the ability to control when overlays appear or disappear based on user interactions, system events, or custom triggers. Configure these settings to suit your application's behavior and user experience needs.
+- **Extended Control via API**: Access the API for comprehensive control over overlay behavior, extending beyond the capabilities offered by component properties.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Installation
 
-- Configure the top-level `parserOptions` property like this:
+```bash
+npm install react-bounded-overlay-manager
+```
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+## Basic Example
+
+```jsx
+import React, { useRef } from 'react';
+import BoundedOverlayManager, { Overlay, PredefinedPosition } from 'react-bounded-overlay-manager';
+
+const BasicExample = () => {
+  const boundingComponentRef = useRef(null);
+
+  return (
+    <div>
+      <div ref={boundingComponentRef} style={{ width: '70vw', height: '50vh', border: '1px solid black' }}>
+        Hover over this div to display overlays.
+      </div>
+      <BoundedOverlayManager boundingComponentRef={boundingComponentRef}>
+        <Overlay position={PredefinedPosition.BOTTOM_CENTER}>
+          <button>Overlay Button</button>
+        </Overlay>
+        <!-- more overlays here -->
+      </BoundedOverlayManager>
+    </div>
+  );
+};
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Learn More
+For more detailed information on how to utilize `React Bounded Overlay Manager` to its fullest, explore the [documentation](https://metincansiper.github.io/react-bounded-overlay-manager)
+
+## For Developers
+If you are interested in contributing to the project or want to build and test the library, please refer to our [Developer Guide](./readme_supplements/DEVELOPER_GUIDE.md) for detailed instructions on setup, development, testing, and deployment.

package/dist/{index-7ofMxoL9.js → index-6HDrCuH_.mjs}

@@ -1,4 +1,4 @@
-import { g as W, b as U, d as Dl, e as Ul } from "./react.esm-GKFzux-6.js";
+import { g as W, b as U, d as Dl, e as Ul } from "./react.esm-GKFzux-6.mjs";
 var Vl = (e) => {
   const r = e.match(/^[ \t]*(?=\S)/gm);
   return r ? r.reduce((t, o) => Math.min(t, o.length), 1 / 0) : 0;

package/dist/src/components/test/BoundedOverlayManager.test.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { s as i, a as m } from "../../../react.esm-GKFzux-6.js";
+import { s as i, a as m } from "../../../react.esm-GKFzux-6.mjs";
 import u from "../BoundedOverlayManager.js";
-import "../../../index-7ofMxoL9.js";
+import "../../../index-6HDrCuH_.mjs";
 jest.mock("../../context/OverlayManagerContext", () => ({
   OverlayManagerContextProvider: ({ children: t, boundingComponentRef: e }) => (e == null || e(), t)
 }));

package/dist/src/components/test/BoundedOverlayManagerContent.test.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import c from "react";
-import { a as s } from "../../../react.esm-GKFzux-6.js";
-import "../../../index-7ofMxoL9.js";
+import { a as s } from "../../../react.esm-GKFzux-6.mjs";
+import "../../../index-6HDrCuH_.mjs";
 import n from "../BoundedOverlayManagerContent.js";
 import { useOverlayManagerContext as v } from "../../context/OverlayManagerContext.js";
 import d from "../../hooks/useTimedEventManager.js";

package/dist/src/components/test/Overlay.test.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a as r } from "../../../react.esm-GKFzux-6.js";
-import "../../../index-7ofMxoL9.js";
+import { a as r } from "../../../react.esm-GKFzux-6.mjs";
+import "../../../index-6HDrCuH_.mjs";
 import n, { overlayClassName as c } from "../Overlay.js";
 import t from "../../enum/PredefinedPosition.js";
 import { useOverlayManagerContext as f } from "../../context/OverlayManagerContext.js";

package/dist/src/components/test/OverlaysContainer.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import r, { overlaysContainerClassName as d, overlaysContainerContentClassName as h } from "../OverlaysContainer.js";
-import "../../../index-7ofMxoL9.js";
-import { a as i } from "../../../react.esm-GKFzux-6.js";
+import "../../../index-6HDrCuH_.mjs";
+import { a as i } from "../../../react.esm-GKFzux-6.mjs";
 const u = (s) => s.querySelector("[role='overlays-container']"), l = (s) => s.querySelector("[role='overlays-container-content']");
 describe("OverlaysContainer", () => {
   const s = "Mock Child", c = "mock-child-id", o = /* @__PURE__ */ t("div", { "data-testid": c, children: s });

package/dist/src/context/OverlayManagerContext.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { createContext as s, useContext as v, useState as i, useEffect as u } from "react";
-import { e as x } from "../../events-B7I8KoZ9.js";
+import { e as x } from "../../events-B7I8KoZ9.mjs";
 const r = s(void 0), E = () => {
   const e = v(r);
   if (e === void 0)

package/dist/src/context/test/OverlayManagerContext.test.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { c as m, a as o, s as r } from "../../../react.esm-GKFzux-6.js";
+import { c as m, a as o, s as r } from "../../../react.esm-GKFzux-6.mjs";
 import { OverlayManagerContextProvider as s, useOverlayManagerContext as c } from "../OverlayManagerContext.js";
-import { e as a } from "../../../events-B7I8KoZ9.js";
+import { e as a } from "../../../events-B7I8KoZ9.mjs";
 const i = () => {
   const { overlayManagerEventEmitter: e, boundingComponentRef: n } = c();
   return /* @__PURE__ */ d("div", { children: [

package/dist/src/hooks/test/useApiUpdateHandler.test.js

@@ -1,4 +1,4 @@
-import { r, w as n } from "../../../react.esm-GKFzux-6.js";
+import { r, w as n } from "../../../react.esm-GKFzux-6.mjs";
 import d from "../useApiUpdateHandler.js";
 jest.mock("../../api/BoundedOverlayManagerApi", () => ({
   __esModule: !0,

package/dist/src/hooks/test/useForwardBoundingComponentEvents.test.js

@@ -1,4 +1,4 @@
-import { r as o } from "../../../react.esm-GKFzux-6.js";
+import { r as o } from "../../../react.esm-GKFzux-6.mjs";
 import { useOverlayManagerContext as m } from "../../context/OverlayManagerContext.js";
 import a from "../useForwardBoundingComponentEvents.js";
 import { makeEventOnlyMockComponentRef as s } from "./util.js";

package/dist/src/hooks/test/useForwardOverlayEvents.test.js

@@ -1,4 +1,4 @@
-import { r as o, w as m } from "../../../react.esm-GKFzux-6.js";
+import { r as o, w as m } from "../../../react.esm-GKFzux-6.mjs";
 import { useOverlayManagerContext as i } from "../../context/OverlayManagerContext.js";
 import r from "../useForwardOverlayEvents.js";
 import { makeEventOnlyMockComponentRef as s } from "./util.js";

package/dist/src/hooks/test/useFullscreenChange.test.js

@@ -1,4 +1,4 @@
-import { r as c, w as u } from "../../../react.esm-GKFzux-6.js";
+import { r as c, w as u } from "../../../react.esm-GKFzux-6.mjs";
 import r from "../useFullscreenChange.js";
 describe("useFullscreenChange", () => {
   const n = jest.fn(), l = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"], a = (e, t) => {

package/dist/src/hooks/test/useOverlayManagerEvents.test.js

@@ -1,8 +1,8 @@
-import { r as o } from "../../../react.esm-GKFzux-6.js";
+import { r as o } from "../../../react.esm-GKFzux-6.mjs";
 import a from "../useOverlayManagerEvents.js";
 import p from "../../timer/TimedEventManager.js";
 import { useOverlayManagerContext as O } from "../../context/OverlayManagerContext.js";
-import { e as y } from "../../../events-B7I8KoZ9.js";
+import { e as y } from "../../../events-B7I8KoZ9.mjs";
 jest.mock("../../context/OverlayManagerContext");
 describe("useOverlayManagerEvents", () => {
   let e, u, r, m;

package/dist/src/hooks/test/useResizeObserver.test.js

@@ -1,4 +1,4 @@
-import { r as a, w as i } from "../../../react.esm-GKFzux-6.js";
+import { r as a, w as i } from "../../../react.esm-GKFzux-6.mjs";
 import o from "../useResizeObserver.js";
 jest.mock("use-debounce", () => ({
   useDebouncedCallback: jest.fn((t) => t)

package/dist/src/hooks/test/useScrollOnDocument.test.js

@@ -1,4 +1,4 @@
-import { r as t, w as d } from "../../../react.esm-GKFzux-6.js";
+import { r as t, w as d } from "../../../react.esm-GKFzux-6.mjs";
 import l from "../useScrollOnDocument.js";
 jest.mock("use-debounce", () => ({
   useDebouncedCallback: jest.fn((e) => e)

package/dist/src/hooks/test/useTimedEventManager.test.js

@@ -1,4 +1,4 @@
-import { r as o } from "../../../react.esm-GKFzux-6.js";
+import { r as o } from "../../../react.esm-GKFzux-6.mjs";
 import r from "../useTimedEventManager.js";
 import c, { NO_TIMEOUT as m } from "../../timer/TimedEventManager.js";
 const i = jest.fn();

package/dist/src/hooks/test/useWindowResize.test.js

@@ -1,4 +1,4 @@
-import { r as t, w as l } from "../../../react.esm-GKFzux-6.js";
+import { r as t, w as l } from "../../../react.esm-GKFzux-6.mjs";
 import s from "../useWindowResize.js";
 jest.mock("use-debounce", () => ({
   useDebouncedCallback: jest.fn((e) => e)

package/dist/src/hooks/test/util.js

@@ -1,4 +1,4 @@
-import { e as o } from "../../../events-B7I8KoZ9.js";
+import { e as o } from "../../../events-B7I8KoZ9.mjs";
 const r = () => {
   const t = new o.EventEmitter();
   return {

package/dist/src/hooks/useResizeObserver.js

@@ -1,5 +1,5 @@
 import { useEffect as f } from "react";
-import { c as t } from "../../index.module-WXM1Xk0w.js";
+import { c as t } from "../../index.module-WXM1Xk0w.mjs";
 function b(e, { handleResize: s }) {
   const r = t(s, 1);
   f(() => {

package/dist/src/hooks/useScrollOnDocument.js

@@ -1,5 +1,5 @@
 import { useEffect as t } from "react";
-import { c as r } from "../../index.module-WXM1Xk0w.js";
+import { c as r } from "../../index.module-WXM1Xk0w.mjs";
 const l = ({ handleScroll: o }) => {
   const e = r(o, 1);
   t(() => (document.addEventListener("scroll", e), () => {

package/dist/src/hooks/useWindowResize.js

@@ -1,5 +1,5 @@
 import { useEffect as o } from "react";
-import { c as r } from "../../index.module-WXM1Xk0w.js";
+import { c as r } from "../../index.module-WXM1Xk0w.mjs";
 const s = ({ handleResize: n }) => {
   const e = r(n, 1);
   o(() => (window.addEventListener("resize", e), () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-bounded-overlay-manager",
   "private": false,
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -15,7 +15,10 @@
     "preview": "vite preview",
     "test": "jest",
     "storybook": "storybook dev -p 6007",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test:browser": "cypress run --component",
+    "build-and-deploy-storybook": "npm run build-storybook && npm run deploy-storybook",
+    "deploy-storybook": "node deploy-storybook.mjs"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -47,6 +50,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.15",
+    "gh-pages": "^6.1.1",
     "glob": "^10.3.10",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",