react-notify-sdk 1.0.3 → 1.0.5

package/README.md

@@ -1,4 +1,4 @@
-# 🔔 Feature Message SDK
+# 🔔 React Notify SDK
 
 A plug-and-play React component that allows developers to show real-time, route-specific feature messages or alerts in their apps.
 

package/dist/NotifyProvider.js

@@ -1,35 +1,20 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotifyProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/FeatureMessage.tsx
-const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
-const clsx_1 = __importDefault(require("clsx"));
-const supabaseClient_1 = require("./supabase/supabaseClient");
-const NotifyProvider = ({ projectId, 
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import clsx from 'clsx';
+import { supabase } from './supabase/supabaseClient';
+export const NotifyProvider = ({ projectId, 
 //className,
 //style,
 disableDefaultStyles = false, }) => {
-    const [message, setMessage] = (0, react_1.useState)(null);
-    const location = (0, react_router_dom_1.useLocation)();
-    (0, react_1.useEffect)(() => {
+    const [message, setMessage] = useState(null);
+    const location = useLocation();
+    useEffect(() => {
         if (typeof window === 'undefined')
             return; // Skip on server
-        const fetchMessage = () => __awaiter(void 0, void 0, void 0, function* () {
-            const { data } = yield supabaseClient_1.supabase
+        const fetchMessage = async () => {
+            const { data } = await supabase
                 .from('feature_messages')
                 .select('*')
                 .eq('project_key', projectId)
@@ -39,9 +24,9 @@ disableDefaultStyles = false, }) => {
                 .limit(1)
                 .single();
             setMessage(data);
-        });
+        };
         fetchMessage();
-        const subscription = supabaseClient_1.supabase
+        const subscription = supabase
             .channel('feature_messages_channel')
             .on('postgres_changes', {
             event: '*',
@@ -55,35 +40,34 @@ disableDefaultStyles = false, }) => {
         })
             .subscribe();
         return () => {
-            supabaseClient_1.supabase.removeChannel(subscription);
+            supabase.removeChannel(subscription);
         };
     }, [location.pathname, projectId]);
     if (!message)
         return null;
-    const defaultClasses = `fixed ${message === null || message === void 0 ? void 0 : message.position}-4 left-1/2 transform -translate-x-1/2 z-50 w-[${message === null || message === void 0 ? void 0 : message.width}%] p-4 bg-[${message === null || message === void 0 ? void 0 : message.backgroundColor}] border border-[${message === null || message === void 0 ? void 0 : message.borderColor}] text-[${message === null || message === void 0 ? void 0 : message.textColor}] rounded-lg shadow`;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(!disableDefaultStyles && defaultClasses), style: disableDefaultStyles ?
+    const defaultClasses = `fixed ${message?.position}-4 left-1/2 transform -translate-x-1/2 z-50 w-[${message?.width}%] px-3 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;
+    return (_jsxs("div", { className: clsx(!disableDefaultStyles && defaultClasses), style: disableDefaultStyles ?
             {
                 position: 'fixed',
-                top: (message === null || message === void 0 ? void 0 : message.position) === 'top' ? '16px' : undefined,
-                bottom: (message === null || message === void 0 ? void 0 : message.position) === 'top' ? undefined : '16px',
+                top: message?.position === 'top' ? '16px' : undefined,
+                bottom: message?.position === 'top' ? undefined : '16px',
                 left: '50%',
                 transform: 'translateX(-50%)',
                 zIndex: 50,
-                width: `${message === null || message === void 0 ? void 0 : message.width}%`,
+                width: `${message?.width}%`,
                 padding: '1rem', // p-4 = 1rem
-                backgroundColor: message === null || message === void 0 ? void 0 : message.backgroundColor,
+                backgroundColor: message?.backgroundColor,
                 border: '1px solid', // Completed border style
             }
             :
-                {}, children: [(0, jsx_runtime_1.jsx)("strong", { className: `block mb-2 text-lg font-semibold text-[${message === null || message === void 0 ? void 0 : message.textColor}]`, style: {
+                {}, 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 === null || message === void 0 ? void 0 : message.backgroundColor}`,
-                }, children: message.title }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm text-[${message === null || message === void 0 ? void 0 : message.textColor}]`, style: {
+                    color: `${message?.backgroundColor}`,
+                }, children: message.title }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
                     fontSize: '0.875rem', // text-sm = 14px = 0.875rem
-                    color: `${message === null || message === void 0 ? void 0 : message.backgroundColor}`,
+                    color: `${message?.backgroundColor}`,
                 }, children: message.content })] }));
 };
-exports.NotifyProvider = NotifyProvider;

package/dist/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotifyProvider = void 0;
-var NotifyProvider_1 = require("./NotifyProvider");
-Object.defineProperty(exports, "NotifyProvider", { enumerable: true, get: function () { return NotifyProvider_1.NotifyProvider; } });
+export { NotifyProvider } from './NotifyProvider';

package/dist/supabase/supabaseClient.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.supabase = void 0;
-const supabase_js_1 = require("@supabase/supabase-js");
+import { createClient } from '@supabase/supabase-js';
 const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
 const supabaseKey = process.env.REACT_APP_SUPABASE_KEY;
 // Create a single supabase client for interacting with your database
-exports.supabase = (0, supabase_js_1.createClient)(supabaseUrl, supabaseKey);
+export const supabase = createClient(supabaseUrl, supabaseKey);

package/dist/types.d.ts

@@ -6,7 +6,6 @@ export type NotifyMessage = {
     content: string;
     position: string;
     positionValue: number;
-    twPosition: string;
     backgroundColor: string;
     borderColor: string;
     textColor: string;

package/dist/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/NotifyProvider.tsx

@@ -56,7 +56,7 @@ export const NotifyProvider = ({
 
   if (!message) return null;
 
-  const defaultClasses = `fixed ${message?.position}-4 left-1/2 transform -translate-x-1/2 z-50 w-[${message?.width}%] p-4 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;
+  const defaultClasses = `fixed ${message?.position}-4 left-1/2 transform -translate-x-1/2 z-50 w-[${message?.width}%] px-3 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;
 
   return (
     <div

package/src/types.ts

@@ -6,7 +6,6 @@ export type NotifyMessage = {
   content: string;
   position: string;
   positionValue: number;
-  twPosition: string;
   backgroundColor: string;
   borderColor: string;
   textColor: string;

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES6",
+    "target": "ESNext",
     //"module": "ESNext",
     "declaration": true,
-    "outDir": "dist",
+    "outDir": "./dist",
     //"strict": true,
     //"esModuleInterop": true,
     "jsx": "react-jsx", // ✅ This is required for React 17+ JSX
@@ -33,9 +33,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "ESNext",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */