chore(refactor): move portal component to shared package

Author: kuroji-fusky

apps/web/src/components/Modals/ModalBase/Overlay.tsx

@@ -4,17 +4,23 @@ import { cn } from "@mav/shared/utils"
 import dynamic from "next/dynamic"
 import { useEffect } from "react"
 
-const Portal = dynamic(() => import("./Portal"), { ssr: false })
+const Portal = dynamic(
+  () => import("@mav/ui/components/layouts").then((c) => c.Portal),
+  {
+    ssr: false
+  }
+)
+
+interface OverlayProps {
+  state?: unknown
+  toggler?: React.Dispatch<React.SetStateAction<boolean>>
+}
 
 export default function Overlay({
   children,
   state,
   toggler
-}: {
-  children?: React.ReactNode
-  state?: unknown
-  toggler?: React.Dispatch<React.SetStateAction<boolean>>
-}) {
+}: React.PropsWithChildren<OverlayProps>) {
   useEffect(() => {
     const bodyStyle = document.body.style
 
@@ -29,7 +35,7 @@ export default function Overlay({
   return (
     <Portal>
       <div
-        onClick={toggler as () => any}
+        onClick={toggler as () => void}
         className={cn(
           "fixed inset-0 z-[99] bg-black/60 transition-all duration-[350ms]",
           state ? "opacity-100" : "pointer-events-none opacity-0"

apps/web/src/components/Modals/ModalBase/Portal.tsx

@@ -0,0 +1,14 @@
+import { createPortal } from "react-dom"
+
+interface PortalProps {
+  style?: React.CSSProperties
+}
+
+export function Portal(props: React.PropsWithChildren<PortalProps>) {
+  return createPortal(
+    <div data-mav-portal="" style={props.style ?? undefined}>
+      {props.children}
+    </div>,
+    document.body
+  )
+}

packages/ui/components/layouts/Portal.tsx

@@ -4,4 +4,6 @@ export * from "./Group/Group"
 export * from "./Group/GroupContainer"
 export * from "./MarginGutter"
 
+export * from "./Portal"
+
 export type * from "./Masthead/Masthead.types"