feat: Created an animated Tip button

src/utils/helperFunctions.ts

@@ -1,3 +1,7 @@
 export function random(min: number, max: number) {
   return Math.random() * (max - min) + min;
 }
+
+export function randomItem(...args: any[]) {
+  return args[Math.floor(Math.random() * args.length)];
+}

src/utils/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./storeHooks";
 export * from "./useResizeListener";
+export * from "./usePressHolder";

src/utils/hooks/usePressHolder.ts

@@ -0,0 +1,40 @@
+import { useRef } from "react";
+
+
+export const usePressHolder = (onHold: () => any, holdThreshold: number = 400) => {
+    const ref = useRef({
+        cntr: 0,
+        timerID: 0,
+        previousTimestamp: -1
+    });
+
+    const onPressDown = () => {
+        requestAnimationFrame(timer)
+    }
+
+
+    const onPressUp = () => {
+
+        cancelAnimationFrame(ref.current.timerID);
+        ref.current.cntr = 0;
+        ref.current.previousTimestamp = -1;
+    }
+
+    function timer(timestamp: number) {
+        if (ref.current.previousTimestamp === -1) ref.current.previousTimestamp = timestamp;
+
+        const dt = timestamp - ref.current.previousTimestamp;
+        ref.current.previousTimestamp = timestamp;
+
+        if (ref.current.cntr < holdThreshold) {
+            ref.current.cntr += dt;
+        } else {
+            onHold();
+        }
+
+        ref.current.timerID = requestAnimationFrame(timer);
+    }
+
+    return { onPressUp, onPressDown }
+
+}

src/utils/storybookDecorators.tsx

@@ -0,0 +1,30 @@
+import { DecoratorFn } from '@storybook/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import Modal from 'src/Components/Modals/Modal/Modal';
+
+export const ModalsDecorator: DecoratorFn = (Story) => {
+  const onClose = () => { };
+  return (
+    <motion.div
+      className="w-screen fixed inset-0 overflow-x-hidden z-[2020]"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{
+        opacity: 0,
+        transition: { ease: "easeInOut" },
+      }}
+    >
+      <AnimatePresence>
+        <Modal onClose={onClose}  >
+          <Story onClose={onClose} />
+        </Modal>
+      </AnimatePresence>
+    </motion.div>
+  );
+}
+
+export const centerDecorator: DecoratorFn = (Story) => {
+  return <div className="min-h-screen flex justify-center items-center">
+    <Story />
+  </div>
+}