From 9625c8a1b7fe0892c6c635e66ccfc80ead8a10df Mon Sep 17 00:00:00 2001
From: Deveshi Dwivedi <deveshigurgaon@gmail.com>
Date: Sat, 22 Jun 2024 10:09:13 +0530
Subject: [PATCH] add modal manager, animations, state management and hooks

---
 .../animations/ModalManagar.animations.ts     | 14 +++++++++++
 common/constants/easings.ts                   |  1 +
 common/recoil/modal/index.ts                  |  5 ++++
 common/recoil/modal/modal.atom.tsx            | 12 ++++++++++
 common/recoil/modal/modal.hooks.tsx           | 23 +++++++++++++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 common/components/modal/animations/ModalManagar.animations.ts
 create mode 100644 common/constants/easings.ts
 create mode 100644 common/recoil/modal/index.ts
 create mode 100644 common/recoil/modal/modal.atom.tsx
 create mode 100644 common/recoil/modal/modal.hooks.tsx

diff --git a/common/components/modal/animations/ModalManagar.animations.ts b/common/components/modal/animations/ModalManagar.animations.ts
new file mode 100644
index 0000000..83ed243
--- /dev/null
+++ b/common/components/modal/animations/ModalManagar.animations.ts
@@ -0,0 +1,14 @@
+import { DEFAULT_EASE } from "@/common/constants/easings";
+
+const transition= {ease: DEFAULT_EASE};
+
+export const bgAnimation = {
+    closed: {opacity: 0, transition},
+    opened: {opacity: 1, transition},
+};
+
+export const modalAnimation = {
+    closed: {y:-100, transition},
+    opened: {y:0, transition},
+    exited: {y:100, transition},
+};
\ No newline at end of file
diff --git a/common/constants/easings.ts b/common/constants/easings.ts
new file mode 100644
index 0000000..1dc34b6
--- /dev/null
+++ b/common/constants/easings.ts
@@ -0,0 +1 @@
+export const DEFAULT_EASE= [0.6, 0.01, -0.05, 0.9];
\ No newline at end of file
diff --git a/common/recoil/modal/index.ts b/common/recoil/modal/index.ts
new file mode 100644
index 0000000..3204ee4
--- /dev/null
+++ b/common/recoil/modal/index.ts
@@ -0,0 +1,5 @@
+import { modalAtom } from "./modal.atom";
+import useModal from "./modal.hooks";
+
+export default modalAtom;
+export {useModal};
\ No newline at end of file
diff --git a/common/recoil/modal/modal.atom.tsx b/common/recoil/modal/modal.atom.tsx
new file mode 100644
index 0000000..823bf92
--- /dev/null
+++ b/common/recoil/modal/modal.atom.tsx
@@ -0,0 +1,12 @@
+import { atom } from "recoil";
+
+export const modalAtom = atom <{
+    modal: JSX.Element | JSX.Element[];
+    opened: boolean;
+}>({
+    key: "modal",
+    default: {
+        modal:<></>,
+        opened: false,
+    },
+});
diff --git a/common/recoil/modal/modal.hooks.tsx b/common/recoil/modal/modal.hooks.tsx
new file mode 100644
index 0000000..10157df
--- /dev/null
+++ b/common/recoil/modal/modal.hooks.tsx
@@ -0,0 +1,23 @@
+import { useSetRecoilState } from "recoil";
+import { modalAtom } from "./modal.atom";
+
+const useModal = () => {
+    const setModal= useSetRecoilState(modalAtom);
+    const openModal = (modal: JSX.Element | JSX.Element[]) => {
+        setModal({
+            modal,
+            opened: true,
+        });
+    };
+
+    const closeModal = () => 
+        setModal({
+            modal: <></>,
+            opened: false,
+        });
+
+        return {openModal, closeModal};
+    
+};
+
+export default useModal;