react-notify-sdk 1.0.15 → 1.0.16

package/dist/NotifyMessage.js

@@ -6,7 +6,7 @@ const NotificationMessage = ({ message, device }) => {
             bottom: message?.position === 'bottom' ? '24px' : undefined,
             left: '50%',
             transform: 'translateX(-50%)',
-            zIndex: 20,
+            zIndex: 5,
             width: device === 'Mobile' ? '100%' : device === 'Tablet' ? '80%' : `${message?.width}%`,
             paddingTop: '4px', // p-4 = 1rem
             paddingBottom: '4px',

package/dist/NotifyProvider.js

@@ -6,28 +6,19 @@ import NotificationMessage from './NotifyMessage';
 import { styled } from "goober";
 import { supabase } from './supabase/supabaseClient';
 import useDeviceDetection from './UseDeviceDetection';
+import { fadeIn, fadeOut } from './animations';
 const FadeWrapper = styled("div") `
-  animation: fadeIn 0.4s ease-out, fadeOut 0.4s ease-in 2.6s;
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-0.5rem);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  @keyframes fadeOut {
-    from {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateY(-0.5rem);
-    }
-  }
+opacity: ${(props) => (props.visible ? 1 : 0)};
+animation: ${(props) => (props.visible ? fadeIn : fadeOut)} 0.3s ease forwards;
+transition: opacity 0.3s ease;
+position: fixed;
+bottom: 20px;
+left: 20px;
+background: #1f2937;
+color: white;
+padding: 12px 16px;
+border-radius: 8px;
+z-index: 1000;
 `;
 export const NotifyProvider = ({ projectId,
 //className,
@@ -35,6 +26,7 @@ export const NotifyProvider = ({ projectId,
 //disableDefaultStyles = true,
  }) => {
     const [message, setMessage] = useState(null);
+    const [visible, setVisible] = useState(false);
     const location = useLocation();
     const device = useDeviceDetection();
     useEffect(() => {
@@ -50,7 +42,15 @@ export const NotifyProvider = ({ projectId,
                 .order('created_at', { ascending: false })
                 .limit(1)
                 .single();
-            setMessage(data);
+            if (data) {
+                setMessage(data);
+                setVisible(true); // Fade in
+            }
+            else {
+                // Trigger fade out before removing message
+                setVisible(false);
+                setTimeout(() => setMessage(null), 300); // match fadeOut duration
+            }
         };
         fetchMessage();
         const subscription = supabase
@@ -63,6 +63,11 @@ export const NotifyProvider = ({ projectId,
             const msg = payload.new;
             if (msg.project_key === projectId && msg.route === location.pathname && msg.is_active) {
                 setMessage(msg);
+                setVisible(true);
+            }
+            else {
+                setVisible(false);
+                setTimeout(() => setMessage(null), 300);
             }
         })
             .subscribe();
@@ -73,5 +78,5 @@ export const NotifyProvider = ({ projectId,
     if (!message)
         return null;
     //const defaultClasses = `absolute ${message?.position}-6 left-1/2 transform -translate-x-1/2 z-20 w-full md:w-[${message?.width}%] px-3 py-1 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;
-    return (_jsx(FadeWrapper, { children: _jsx(NotificationMessage, { message: message, device: device }) }));
+    return (_jsx(FadeWrapper, { visible: visible, children: _jsx(NotificationMessage, { message: message, device: device }) }));
 };

package/dist/animations.d.ts

@@ -0,0 +1,2 @@
+export declare const fadeIn: string;
+export declare const fadeOut: string;

package/dist/animations.js

@@ -0,0 +1,10 @@
+// styles/animations.ts
+import { keyframes } from 'goober';
+export const fadeIn = keyframes `
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+export const fadeOut = keyframes `
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(10px); }
+`;

package/dist/index.js

@@ -1 +1,4 @@
+import { setup } from 'goober';
+import { createElement } from 'react';
+setup(createElement);
 export { NotifyProvider } from './NotifyProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",