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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 metincansiper
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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",
   "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",
@@ -66,5 +70,10 @@
   "dependencies": {
     "events": "^3.3.0",
     "use-debounce": "^10.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/metincansiper/react-bounded-overlay-manager"
   }
 }