react-notify-sdk 1.0.14 → 1.0.15

package/dist/NotifyMessage.d.ts

@@ -0,0 +1,7 @@
+import { NotifyMessage } from './types';
+interface NotifyMessageProps {
+    message: NotifyMessage;
+    device: string;
+}
+declare const NotificationMessage: ({ message, device }: NotifyMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationMessage;

package/dist/NotifyMessage.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const NotificationMessage = ({ message, device }) => {
+    return (_jsxs("div", { style: {
+            position: 'absolute',
+            top: message?.position === 'top' ? '24px' : undefined,
+            bottom: message?.position === 'bottom' ? '24px' : undefined,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 20,
+            width: device === 'Mobile' ? '100%' : device === 'Tablet' ? '80%' : `${message?.width}%`,
+            paddingTop: '4px', // p-4 = 1rem
+            paddingBottom: '4px',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            backgroundColor: message?.backgroundColor,
+            border: `1px solid ${message?.textColor}`, // Completed border style
+            borderRadius: "8px"
+        }, children: [_jsx("p", { className: `text-lg font-semibold text-[${message?.textColor}]`, style: {
+                    fontSize: '1.125rem', // text-lg = 18px = 1.125rem
+                    fontWeight: 600, // font-semibold = 600
+                    color: `${message?.textColor}`,
+                }, children: message.title }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
+                    marginTop: '8px',
+                    fontSize: '0.875rem', // text-sm = 14px = 0.875rem
+                    color: `${message?.textColor}`,
+                }, children: message.content })] }));
+};
+export default NotificationMessage;

package/dist/NotifyProvider.d.ts

@@ -1,2 +1,2 @@
 import { NotifyMessageProviderProps } from './types';
-export declare const NotifyProvider: ({ projectId, disableDefaultStyles, }: NotifyMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NotifyProvider: ({ projectId, }: NotifyMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/NotifyProvider.js

@@ -1,14 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 // src/FeatureMessage.tsx
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import clsx from 'clsx';
+import NotificationMessage from './NotifyMessage';
+import { styled } from "goober";
 import { supabase } from './supabase/supabaseClient';
 import useDeviceDetection from './UseDeviceDetection';
-export const NotifyProvider = ({ projectId, 
+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);
+    }
+  }
+`;
+export const NotifyProvider = ({ projectId,
 //className,
 //style,
-disableDefaultStyles = false, }) => {
+//disableDefaultStyles = true,
+ }) => {
     const [message, setMessage] = useState(null);
     const location = useLocation();
     const device = useDeviceDetection();
@@ -47,33 +72,6 @@ disableDefaultStyles = false, }) => {
     }, [location.pathname, 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 (_jsxs("div", { className: clsx(!disableDefaultStyles && defaultClasses), style: !disableDefaultStyles ?
-            {
-                position: 'absolute',
-                top: message?.position === 'top' ? '24px' : undefined,
-                bottom: message?.position === 'bottom' ? '24px' : undefined,
-                left: '50%',
-                transform: 'translateX(-50%)',
-                zIndex: 20,
-                width: device === 'Mobile' ? '100%' : device === 'Tablet' ? '80%' : `${message?.width}%`,
-                paddingTop: '4px', // p-4 = 1rem
-                paddingBottom: '4px',
-                paddingLeft: '12px',
-                paddingRight: '12px',
-                backgroundColor: message?.backgroundColor,
-                border: `1px solid ${message?.textColor}`, // Completed border style
-                borderRadius: "8px"
-            }
-            :
-                {}, children: [_jsx("strong", { className: `block mb-2 text-lg font-semibold text-[${message?.textColor}]`, style: {
-                    display: 'block',
-                    marginBottom: '0.5rem', // mb-2 = 0.5rem
-                    fontSize: '1.125rem', // text-lg = 18px = 1.125rem
-                    fontWeight: 600, // font-semibold = 600
-                    color: `${message?.textColor}`,
-                }, children: message.title }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
-                    fontSize: '0.875rem', // text-sm = 14px = 0.875rem
-                    color: `${message?.textColor}`,
-                }, children: message.content })] }));
+    //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 }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,8 @@
   "license": "ISC",
   "dependencies": {
     "@supabase/supabase-js": "^2.50.0",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "goober": "^2.1.16"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",