refactor(code-modal): use chakra modal with custom variant

gatsby-config.ts

@@ -205,6 +205,7 @@ const config: GatsbyConfig = {
       options: {
         resetCSS: true,
         isUsingColorMode: true,
+        portalZIndex: 1001,
       },
     },
     // Source assets

src/@chakra-ui/gatsby-plugin/components/Modal.ts

@@ -0,0 +1,46 @@
+import { StyleFunctionProps } from "@chakra-ui/react"
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Modal: ComponentStyleConfig = {
+  variants: {
+    code: (props: StyleFunctionProps) => ({
+      overlay: {
+        bg: "rgba(0, 0, 0, 0.7)",
+      },
+      dialog: {
+        maxW: "100vw",
+        marginTop: "auto",
+        marginBottom: 0,
+        maxHeight: "50%",
+        borderRadius: 0,
+      },
+      header: {
+        bg:
+          props.colorMode === "dark" ? "rgb(25, 25, 25)" : "rgb(247, 247, 247)",
+        borderColor:
+          props.colorMode == "dark" ? "rgb(242, 242, 242)" : "rgb(51, 51, 51)",
+        borderTop: "1px solid",
+        borderBottom: "1px solid",
+        textTransform: "uppercase",
+        fontWeight: "normal",
+        fontSize: "md",
+        fontFamily: "monospace",
+      },
+      closeButton: {
+        padding: 0,
+        width: "24px",
+        height: "24px",
+        borderRadius: 0,
+        color: "rgb(178, 178, 178)",
+        fontSize: "sm",
+        margin: 0,
+        top: 4,
+        right: 4,
+        bottom: 4,
+      },
+      body: {
+        padding: 0,
+      },
+    }),
+  },
+}

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./Link"
 export * from "./Button"
 export * from "./Tag"
+export * from "./Modal"

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -35,6 +35,8 @@ const theme: ThemeOverride = {
     heading:
       "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
     body: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+    monospace:
+      "SFMono-Regular, Consolas, 'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Menlo, Courier, monospace",
   },
   styles,
   ...foundations,

src/components/CodeModal.tsx

@@ -1,125 +1,40 @@
-import React, { useRef } from "react"
-import styled from "@emotion/styled"
-import { motion } from "framer-motion"
-
-import Icon from "./Icon"
-import { useOnClickOutside } from "../hooks/useOnClickOutside"
-import { useKeyPress } from "../hooks/useKeyPress"
-
-const StyledOverlay = styled(motion.div)`
-  position: fixed;
-  background: rgba(0, 0, 0, 0.7);
-  will-change: opacity;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-`
-
-const ModalContainer = styled.div`
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  position: fixed;
-  z-index: 1002;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  border-top: 1px solid ${(props) => props.theme.colors.text};
-`
-
-const StyledModal = styled.div`
-  position: relative;
-  height: auto;
-  cursor: auto;
-  max-height: 100%;
-  max-width: 600px;
-  background: ${(props) => props.theme.colors.codeBackground};
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px 0px;
-  width: 100%;
-`
-
-const ModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`
-
-const ModalClose = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  margin-top: -1px;
-  border-top: 1px solid ${(props) => props.theme.colors.text};
-  border-bottom: 1px solid ${(props) => props.theme.colors.text};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: ${(props) => props.theme.colors.ednBackground};
-`
-
-const Title = styled.div`
-  margin-left: 1.5rem;
-  text-transform: uppercase;
-  font-family: ${(props) => props.theme.fonts.monospace};
-`
-
-const ModalCloseIcon = styled(Icon)`
-  cursor: pointer;
-  margin: 1rem;
-`
-
-const Overlay = ({ isActive }) => (
-  <StyledOverlay
-    initial={false}
-    animate={{ opacity: isActive ? 1 : 0, zIndex: isActive ? 1001 : -1 }}
-    transition={{ duration: 0.2 }}
-  />
-)
-
+import React from "react"
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react"
 export interface IProps {
   children?: React.ReactNode
-  className?: string
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   title: string
 }
 
 const CodeModal: React.FC<IProps> = ({
   children,
-  className,
   isOpen,
   setIsOpen,
   title,
 }) => {
-  const ref = useRef<HTMLInputElement>(null)
-
-  // Close modal on outside clicks & `Escape` keypress
-  useOnClickOutside(ref, () => setIsOpen(false))
-  useKeyPress(`Escape`, () => setIsOpen(false))
-
   return (
-    <div className={className}>
-      <Overlay isActive={isOpen} />
-      {isOpen && (
-        <ModalContainer className="modal-component-container">
-          <StyledModal className="modal-component" ref={ref}>
-            <ModalContent className="modal-component-content">
-              {children}
-            </ModalContent>
-            <ModalClose onClick={() => setIsOpen(false)}>
-              <Title>{title}</Title>
-              <ModalCloseIcon name="close" />
-            </ModalClose>
-          </StyledModal>
-        </ModalContainer>
-      )}
-    </div>
+    <Modal
+      isOpen={isOpen}
+      scrollBehavior="inside"
+      variant="code"
+      onClose={() => setIsOpen(false)}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody>{children}</ModalBody>
+      </ModalContent>
+    </Modal>
   )
 }