Modal Component: Adds Spec and Portal Component

docs/docs/components/modal.mdx

@@ -0,0 +1,22 @@
+# Modal (Spec)
+
+## Notes
+
+- use Create Portal for Markup
+- Proper settings to control the trigger
+- Proper way to adjust size, position, etc.
+- Overlay Customization and option to not show it
+- Lock scroll when modal is visible
+- Close on ClickOutside
+- Close on EscapeKey
+- use `<dialog>` element instead of `<div>`
+
+| Attributes            |        Values        | Optional ? |
+| :-------------------- | :------------------: | ---------: |
+| `isOpen`              | boolean (true/false) |         No |
+| `onClose`             |       function       |        Yes |
+| `onOpen`              |       function       |        Yes |
+| `size`                |        string        |        Yes |
+| `showOverlay`         |       boolean        |        Yes |
+| `closeOnOutsideClick` |       boolean        |        Yes |
+| `overlayStyles`       |     Style Object     |        Yes |

lib/src/components/Portal/Portal.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { PortalType } from "./portal.types";
+
+const Portal = ({ children }: PortalType): JSX.Element => {
+  const portalRoot = document.body;
+  const mountElement = useMemo(() => document.createElement("dialog"), []);
+  mountElement.setAttribute("open", "true");
+  mountElement.style.cssText = "padding:0;border:0";
+
+  useEffect(() => {
+    portalRoot.appendChild(mountElement);
+    return () => {
+      portalRoot.removeChild(mountElement);
+    };
+  }, [mountElement, portalRoot]);
+  return createPortal(children, mountElement);
+};
+
+export { Portal };

lib/src/components/Portal/portal.types.ts

@@ -0,0 +1,3 @@
+export interface PortalType {
+  children: React.ReactNode;
+}

lib/src/hooks/useBodyScrollLock.tsx

@@ -0,0 +1,13 @@
+import { useLayoutEffect } from "react";
+
+const useLockBodyScroll = (value: boolean): void => {
+  useLayoutEffect((): (() => void) => {
+    value
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+
+    return () => (document.body.style.overflow = "auto");
+  }, []);
+};
+
+export { useLockBodyScroll };

lib/src/hooks/useClickOutside.tsx

@@ -0,0 +1,33 @@
+import { RefObject, useEffect } from "react";
+
+type AnyEvent = MouseEvent | TouchEvent;
+
+function useClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: (event: AnyEvent) => void
+): void {
+  useEffect(() => {
+    const listener = (event: AnyEvent) => {
+      const el = ref?.current;
+
+      // Do nothing if clicking ref's element or descendent elements
+      if (!el || el.contains(event.target as Node)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener(`mousedown`, listener);
+    document.addEventListener(`touchstart`, listener);
+
+    return () => {
+      document.removeEventListener(`mousedown`, listener);
+      document.removeEventListener(`touchstart`, listener);
+    };
+
+    // Reload only if ref or handler changes
+  }, [ref, handler]);
+}
+
+export { useClickOutside };