feat: add Drawer component

lib/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,53 @@
+import { useRef, useEffect } from "react";
+import { backdrop, drawer, drawerContainer } from "./drawer.css";
+import { IDrawerProps } from "./drawer.types";
+import "./drawer.global.styles.css";
+
+const Drawer = ({
+  isOpen,
+  children,
+  className,
+  onClose,
+  position = "right",
+}: IDrawerProps): JSX.Element => {
+  const bodyRef = useRef(document.querySelector("body"));
+  // prevent body from scrolling when drawer is open
+  useEffect(() => {
+    const updatePageScroll = () => {
+      if (isOpen) {
+        if (bodyRef.current) bodyRef.current.style.overflow = "hidden";
+      } else {
+        if (bodyRef.current) bodyRef.current.style.overflow = "";
+      }
+    };
+    updatePageScroll();
+  }, [isOpen]);
+
+  // close drawer on esc
+  useEffect(() => {
+    const onKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener("keyup", onKeyPress);
+    }
+
+    return () => {
+      window.removeEventListener("keyup", onKeyPress);
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <div className={`${drawerContainer} ${isOpen && "open"} ${className}`}>
+      <div className={`${drawer} ${position}`} role="dialog">
+        {children}
+      </div>
+      <div role="presentation" className={backdrop} onClick={onClose} />
+    </div>
+  );
+};
+
+export { Drawer };

lib/src/components/Drawer/drawer.css.ts

@@ -0,0 +1,28 @@
+import { style } from "@vanilla-extract/css";
+
+export const drawerContainer = style({});
+
+export const drawer = style({
+  background: "#fff",
+  width: "30%",
+  height: "100%",
+  overflow: "auto",
+  position: "fixed",
+  boxShadow: `0 0 15px rgba(0, 0, 0, 0.5)`,
+  transition: "transform 0.3s ease",
+  zIndex: "1000",
+});
+
+export const backdrop = style({
+  visibility: "hidden",
+  opacity: 0,
+  backgroundColor: `rgba(0, 0, 0, 0.5)`,
+  transition: "opacity 0.3s ease, visibility 0.3s ease",
+  width: "100%",
+  height: "100%",
+  top: "0",
+  left: "0",
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: "0",
+});

lib/src/components/Drawer/drawer.global.styles.css.ts

@@ -0,0 +1,59 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { backdrop, drawer, drawerContainer } from "./drawer.css";
+
+globalStyle(`${drawer}.left`, {
+  top: 0,
+  left: 0,
+  transform: "translateX(-100%)",
+});
+
+globalStyle(`${drawer}.right`, {
+  top: 0,
+  right: 0,
+  transform: "translateX(100%)",
+});
+
+globalStyle(`${drawer}.top`, {
+  top: 0,
+  left: 0,
+  right: 0,
+  width: "100%",
+  transform: "translateY(-100%)",
+  height: "40%",
+});
+
+globalStyle(`${drawer}.bottom`, {
+  bottom: 0,
+  left: 0,
+  right: 0,
+  width: "100%",
+  transform: "translateY(100%)",
+  height: "40%",
+});
+
+globalStyle(`${drawerContainer}.open .left`, {
+  transform: "translateX(0)",
+});
+
+globalStyle(`${drawerContainer}.open .right`, {
+  transform: "translateX(0)",
+});
+
+globalStyle(`${drawerContainer}.open .bottom`, {
+  transform: "translateY(0)",
+});
+
+globalStyle(`${drawerContainer}.open .top`, {
+  transform: "translateY(0)",
+});
+
+globalStyle(`${drawerContainer}.open ${drawer}`, {
+  boxShadow: `0 0 15px rgba(0, 0, 0, 0.5)`,
+});
+
+globalStyle(`${drawerContainer}.open ${backdrop}`, {
+  visibility: "visible",
+  opacity: 1,
+  pointerEvents: "auto",
+  zIndex: "999",
+});

lib/src/components/Drawer/drawer.types.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export interface IDrawerProps {
+  isOpen: boolean;
+  children: ReactNode;
+  onClose: () => void;
+  position?: "left" | "right" | "top" | "bottom";
+  className?: string;
+}

lib/src/components/Drawer/index.ts

@@ -0,0 +1 @@
+export * from "./Drawer";

lib/src/index.ts

@@ -25,4 +25,5 @@ export * from "./components/NativeSelect";
 export * from "./components/Popover";
 export * from "./components/Tooltip";
 export * from "./components/Alert";
-export * from "./components/Loader";
+export * from "./components/Loader";
+export * from "./components/Drawer";