josenanodev-react-components-library 0.0.9 → 0.0.10

package/dist/cjs/components/SideBar/SideBar.css

@@ -0,0 +1,50 @@
+.side-bar {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 2;
+  background-color: rgb(253, 253, 253);
+  box-shadow: 5px 0px 15px 0px rgb(206 206 206);
+  transition: all 0.5s ease-in-out;
+  animation: fade-in-side-bar 1s ease-in;
+}
+
+.side-bar .sidebar-close-button {
+  position: absolute;
+  top: 0;
+  height: 30px;
+  width: 30px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  transition: all 0.3s;
+  color: dimgray;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.side-bar .sidebar-close-button:hover {
+  color: var(--primary-color);
+}
+
+.side-bar .sidebar-close-button svg.open{
+  transform: rotate(0deg);
+  transition: all 0.5s;
+}
+
+.side-bar .sidebar-close-button svg.close{
+  transform: rotate(180deg);
+  transition: all 0.5s;
+}
+
+@keyframes fade-in-side-bar {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/cjs/components/SideBar/SideBar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./SideBar.css";
+import { SideBarPropsType } from "./types";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, }: SideBarPropsType) => JSX.Element;
+export default SideBar;

package/dist/cjs/components/SideBar/SideBar.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+require("./SideBar.css");
+//Hooks
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+const useResizeObserver_1 = __importDefault(require("../../hooks/useResizeObserver"));
+//Icons
+const bs_1 = require("react-icons/bs");
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, }) => {
+    //Refs
+    const sideBarRef = (0, react_1.useRef)(null);
+    //Hooks
+    const [elementWidth] = (0, useResizeObserver_1.default)(sideBarRef);
+    (0, useOutsideClick_1.default)(sideBarRef, () => {
+        if (outBoundClickClosesSideBar)
+            if (closeAction) {
+                closeAction();
+            }
+            else {
+                setOpenState(false);
+            }
+    });
+    //useState
+    const [openState, setOpenState] = (0, react_1.useState)(open);
+    return (react_1.default.createElement("div", { ref: sideBarRef, className: "side-bar", style: {
+            [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
+                ? `calc(100% - ${elementWidth}px)`
+                : closeAction
+                    ? "100%"
+                    : `calc(100% - 30px)`,
+        } },
+        react_1.default.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
+                if (closeAction) {
+                    closeAction();
+                }
+                else {
+                    setOpenState(!openState);
+                }
+            } }, side === "left" ? (react_1.default.createElement(bs_1.BsChevronLeft, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" })) : (react_1.default.createElement(bs_1.BsChevronRight, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" }))),
+        children));
+};
+exports.default = SideBar;

package/dist/cjs/components/SideBar/types.d.ts

@@ -0,0 +1,7 @@
+export interface SideBarPropsType {
+  side: "left" | "right";
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesSideBar?: boolean;
+}

package/dist/cjs/hooks/useOutsideClick.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function): void;
+export default useOutsideClick;

package/dist/cjs/hooks/useOutsideClick.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+function useOutsideClick(elementRef, onOutsideClickAction) {
+    (0, react_1.useEffect)(() => {
+        /**
+         * Alert if clicked on outside of element
+         */
+        function handleClickOutside(event) {
+            if (elementRef.current && !elementRef.current.contains(event.target)) {
+                onOutsideClickAction();
+            }
+        }
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [elementRef, onOutsideClickAction]);
+}
+exports.default = useOutsideClick;

package/dist/cjs/hooks/useResizeObserver.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * @returns Array [elementWidth, elementHeight], that represent the current
+ * values of width and height of elementRef
+ */
+declare function useResizeObserver(elementRef: React.MutableRefObject<HTMLElement | null>): number[];
+export default useResizeObserver;

package/dist/cjs/hooks/useResizeObserver.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * @returns Array [elementWidth, elementHeight], that represent the current
+ * values of width and height of elementRef
+ */
+function useResizeObserver(elementRef) {
+    const [elementWidth, setElementWidth] = (0, react_1.useState)(0);
+    const [elementHeight, setElementHeight] = (0, react_1.useState)(0);
+    const observer = (0, react_1.useRef)(new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        setElementWidth(width);
+        setElementHeight(height);
+    }));
+    (0, react_1.useEffect)(() => {
+        if (elementRef.current !== null) {
+            observer.current.observe(elementRef.current);
+        }
+        const observerCurrentForCleanUp = observer.current;
+        const elementRefCurrentForCleanUp = elementRef.current;
+        return () => {
+            if (elementRefCurrentForCleanUp !== null) {
+                observerCurrentForCleanUp.unobserve(elementRefCurrentForCleanUp);
+            }
+        };
+    }, [elementRef, observer]);
+    return [elementWidth, elementHeight];
+}
+exports.default = useResizeObserver;

package/dist/esm/components/SideBar/SideBar.css

@@ -0,0 +1,50 @@
+.side-bar {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 2;
+  background-color: rgb(253, 253, 253);
+  box-shadow: 5px 0px 15px 0px rgb(206 206 206);
+  transition: all 0.5s ease-in-out;
+  animation: fade-in-side-bar 1s ease-in;
+}
+
+.side-bar .sidebar-close-button {
+  position: absolute;
+  top: 0;
+  height: 30px;
+  width: 30px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  transition: all 0.3s;
+  color: dimgray;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.side-bar .sidebar-close-button:hover {
+  color: var(--primary-color);
+}
+
+.side-bar .sidebar-close-button svg.open{
+  transform: rotate(0deg);
+  transition: all 0.5s;
+}
+
+.side-bar .sidebar-close-button svg.close{
+  transform: rotate(180deg);
+  transition: all 0.5s;
+}
+
+@keyframes fade-in-side-bar {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/esm/components/SideBar/SideBar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./SideBar.css";
+import { SideBarPropsType } from "./types";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, }: SideBarPropsType) => JSX.Element;
+export default SideBar;

package/dist/esm/components/SideBar/SideBar.js

@@ -0,0 +1,44 @@
+import React, { useRef, useState } from "react";
+import "./SideBar.css";
+//Hooks
+import useOutsideClick from "../../hooks/useOutsideClick";
+import useResizeObserver from "../../hooks/useResizeObserver";
+//Icons
+import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, }) => {
+    //Refs
+    const sideBarRef = useRef(null);
+    //Hooks
+    const [elementWidth] = useResizeObserver(sideBarRef);
+    useOutsideClick(sideBarRef, () => {
+        if (outBoundClickClosesSideBar)
+            if (closeAction) {
+                closeAction();
+            }
+            else {
+                setOpenState(false);
+            }
+    });
+    //useState
+    const [openState, setOpenState] = useState(open);
+    return (React.createElement("div", { ref: sideBarRef, className: "side-bar", style: {
+            [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
+                ? `calc(100% - ${elementWidth}px)`
+                : closeAction
+                    ? "100%"
+                    : `calc(100% - 30px)`,
+        } },
+        React.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
+                if (closeAction) {
+                    closeAction();
+                }
+                else {
+                    setOpenState(!openState);
+                }
+            } }, side === "left" ? (React.createElement(BsChevronLeft, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" })) : (React.createElement(BsChevronRight, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" }))),
+        children));
+};
+export default SideBar;

package/dist/esm/components/SideBar/types.d.ts

@@ -0,0 +1,7 @@
+export interface SideBarPropsType {
+  side: "left" | "right";
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesSideBar?: boolean;
+}

package/dist/esm/hooks/useOutsideClick.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function): void;
+export default useOutsideClick;

package/dist/esm/hooks/useOutsideClick.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+function useOutsideClick(elementRef, onOutsideClickAction) {
+    useEffect(() => {
+        /**
+         * Alert if clicked on outside of element
+         */
+        function handleClickOutside(event) {
+            if (elementRef.current && !elementRef.current.contains(event.target)) {
+                onOutsideClickAction();
+            }
+        }
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [elementRef, onOutsideClickAction]);
+}
+export default useOutsideClick;

package/dist/esm/hooks/useResizeObserver.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * @returns Array [elementWidth, elementHeight], that represent the current
+ * values of width and height of elementRef
+ */
+declare function useResizeObserver(elementRef: React.MutableRefObject<HTMLElement | null>): number[];
+export default useResizeObserver;

package/dist/esm/hooks/useResizeObserver.js

@@ -0,0 +1,28 @@
+import { useState, useRef, useEffect } from "react";
+/**
+ * @returns Array [elementWidth, elementHeight], that represent the current
+ * values of width and height of elementRef
+ */
+function useResizeObserver(elementRef) {
+    const [elementWidth, setElementWidth] = useState(0);
+    const [elementHeight, setElementHeight] = useState(0);
+    const observer = useRef(new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        setElementWidth(width);
+        setElementHeight(height);
+    }));
+    useEffect(() => {
+        if (elementRef.current !== null) {
+            observer.current.observe(elementRef.current);
+        }
+        const observerCurrentForCleanUp = observer.current;
+        const elementRefCurrentForCleanUp = elementRef.current;
+        return () => {
+            if (elementRefCurrentForCleanUp !== null) {
+                observerCurrentForCleanUp.unobserve(elementRefCurrentForCleanUp);
+            }
+        };
+    }, [elementRef, observer]);
+    return [elementWidth, elementHeight];
+}
+export default useResizeObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "josenanodev-react-components-library",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "author": "Jose Carlos Cardenas Martinez",
   "description": "Libreria de componentes React personales",
   "license": "MIT",
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.17.12",
+    "@babel/runtime": "^7.20.7",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-interactions": "^6.5.15",