From 340521e4bbf5df769cd96019a7324b1e26f88fe5 Mon Sep 17 00:00:00 2001
From: Stephan <57194608+stephan418@users.noreply.github.com>
Date: Wed, 5 Oct 2022 22:17:33 +0200
Subject: [PATCH] Add support for "outside elements" (Popups, Drawers, ...)

+ Add Drawer
+ Add new root in the HTML (should be included in production)
---
 .storybook/preview-body.html                  |  1 +
 .storybook/preview-head.html                  | 19 ++++++++++
 src/stories/Drawer.stories.tsx                | 15 ++++++++
 src/util/Drawer/Drawer.module.scss            | 13 +++++++
 src/util/Drawer/Drawer.tsx                    | 36 +++++++++++++++++++
 src/util/Drawer/index.ts                      |  3 ++
 .../OutsideElement/OutsideElement.module.scss |  9 +++++
 src/util/OutsideElement/OutsideElement.tsx    | 33 +++++++++++++++++
 8 files changed, 129 insertions(+)
 create mode 100644 .storybook/preview-body.html
 create mode 100644 src/stories/Drawer.stories.tsx
 create mode 100644 src/util/Drawer/Drawer.module.scss
 create mode 100644 src/util/Drawer/Drawer.tsx
 create mode 100644 src/util/Drawer/index.ts
 create mode 100644 src/util/OutsideElement/OutsideElement.module.scss
 create mode 100644 src/util/OutsideElement/OutsideElement.tsx

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
new file mode 100644
index 0000000..3937029
--- /dev/null
+++ b/.storybook/preview-body.html
@@ -0,0 +1 @@
+<div id="detleph-fg-context"></div>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index e551040..1b73a94 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,22 @@
 <script>
   window.global = window;
 </script>
+
+<style>
+  body {
+    height: 100vh;
+  }
+
+  #detleph-fg-context {
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+    overflow: hidden;
+  }
+
+  #detleph-fg-context:empty {
+    width: 0;
+    height: 0;
+  }
+</style>
diff --git a/src/stories/Drawer.stories.tsx b/src/stories/Drawer.stories.tsx
new file mode 100644
index 0000000..6dd1db6
--- /dev/null
+++ b/src/stories/Drawer.stories.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Drawer from "../util/Drawer";
+
+export default { title: "Drawer", component: Drawer } as ComponentMeta<typeof Drawer>;
+
+const Template: ComponentStory<typeof Drawer> = (args) => <Drawer {...args} />;
+
+export const DefaultDrawer = Template.bind({});
+
+DefaultDrawer.args = {
+  children: "Test",
+};
diff --git a/src/util/Drawer/Drawer.module.scss b/src/util/Drawer/Drawer.module.scss
new file mode 100644
index 0000000..7247c2a
--- /dev/null
+++ b/src/util/Drawer/Drawer.module.scss
@@ -0,0 +1,13 @@
+.drawer {
+  background: white;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+
+  position: absolute;
+
+  width: 100%;
+  height: 50%;
+  bottom: 0;
+
+  margin: 0;
+}
diff --git a/src/util/Drawer/Drawer.tsx b/src/util/Drawer/Drawer.tsx
new file mode 100644
index 0000000..c44acff
--- /dev/null
+++ b/src/util/Drawer/Drawer.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+
+import styles from "./Drawer.module.scss";
+import { OutsideElement } from "../OutsideElement/OutsideElement";
+
+interface DrawerProps {
+  open: boolean;
+  children: React.ReactNode;
+  onClose?: () => unknown;
+}
+
+const Drawer: React.FC<DrawerProps> = ({ open, children, onClose }) => {
+  return (
+    <OutsideElement open={open} onClose={onClose}>
+      <UIDrawer>{children}</UIDrawer>
+    </OutsideElement>
+  );
+};
+
+const UIDrawer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <motion.div
+      className={styles.drawer}
+      initial={{ y: "100vh" }}
+      animate={{ y: "0%" }}
+      exit={{ y: "100vh" }}
+      transition={{ type: "tween" }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default Drawer;
diff --git a/src/util/Drawer/index.ts b/src/util/Drawer/index.ts
new file mode 100644
index 0000000..e720d38
--- /dev/null
+++ b/src/util/Drawer/index.ts
@@ -0,0 +1,3 @@
+import Drawer from "./Drawer";
+
+export default Drawer;
diff --git a/src/util/OutsideElement/OutsideElement.module.scss b/src/util/OutsideElement/OutsideElement.module.scss
new file mode 100644
index 0000000..fd023aa
--- /dev/null
+++ b/src/util/OutsideElement/OutsideElement.module.scss
@@ -0,0 +1,9 @@
+.backdrop {
+  height: 100%;
+  width: 100%;
+
+  position: absolute;
+  background: #0000003f;
+
+  top: 0;
+}
diff --git a/src/util/OutsideElement/OutsideElement.tsx b/src/util/OutsideElement/OutsideElement.tsx
new file mode 100644
index 0000000..b9e8c07
--- /dev/null
+++ b/src/util/OutsideElement/OutsideElement.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+
+import styles from "./OutsideElement.module.scss";
+
+interface OutsideElementProps {
+  children: React.ReactNode;
+  open: boolean;
+  onClose?: () => unknown;
+}
+
+export const OutsideElement: React.FC<OutsideElementProps> = ({ children, open, onClose }) => {
+  return ReactDOM.createPortal(
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className={styles.backdrop}
+            key="backdrop"
+            onClick={() => onClose?.()}
+          ></motion.div>
+
+          {children}
+        </>
+      )}
+    </AnimatePresence>,
+    document.querySelector("#detleph-fg-context")!
+  );
+};