strapi-plugin-notifier 1.0.2 → 1.0.3

package/dist/_chunks/{Index-CiDBgkGf.js → Index-C5mgbISF.js}

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const designSystem = require("@strapi/design-system");
-require("react-dom/client");
+const strapiAdmin = require("@strapi/admin/strapi-admin");
+const index = require("./index-DrwLcZBZ.js");
 const icons = require("@strapi/icons");
-const index = require("./index-7WJGsVEY.js");
-require("@strapi/icons/symbols");
 const toStoreItem = (n) => ({
   id: String(n.id),
   title: n.title,
@@ -17,11 +16,11 @@ const toStoreItem = (n) => ({
   url: n.url
 });
 const useNotificationActions = () => {
-  const { get, put, del } = index.useFetchClient();
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [pagination, setPagination] = React.useState(null);
-  const currentPage = React.useRef(1);
-  const fetchPage = React.useCallback(
+  const { get, put, del } = strapiAdmin.useFetchClient();
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [pagination, setPagination] = react.useState(null);
+  const currentPage = react.useRef(1);
+  const fetchPage = react.useCallback(
     async (page, append = false) => {
       const { pageSize } = index.getConfig();
       setIsLoading(true);
@@ -45,12 +44,12 @@ const useNotificationActions = () => {
     },
     [get]
   );
-  const fetchAll = React.useCallback(() => fetchPage(1, false), [fetchPage]);
-  const loadMore = React.useCallback(() => {
+  const fetchAll = react.useCallback(() => fetchPage(1, false), [fetchPage]);
+  const loadMore = react.useCallback(() => {
     if (!pagination || currentPage.current >= pagination.pageCount) return;
     fetchPage(currentPage.current + 1, true);
   }, [fetchPage, pagination]);
-  const handleMarkAsRead = React.useCallback(
+  const handleMarkAsRead = react.useCallback(
     async (id) => {
       index.markAsRead(id);
       try {
@@ -60,14 +59,14 @@ const useNotificationActions = () => {
     },
     [put]
   );
-  const handleMarkAllAsRead = React.useCallback(async () => {
+  const handleMarkAllAsRead = react.useCallback(async () => {
     index.markAllAsRead();
     try {
       await put("/notifier/notifications/read-all");
     } catch {
     }
   }, [put]);
-  const handleClear = React.useCallback(
+  const handleClear = react.useCallback(
     async (id) => {
       index.clearNotification(id);
       try {
@@ -77,7 +76,7 @@ const useNotificationActions = () => {
     },
     [del]
   );
-  const handleClearAll = React.useCallback(async () => {
+  const handleClearAll = react.useCallback(async () => {
     index.clearAll();
     try {
       await del("/notifier/notifications");
@@ -150,8 +149,8 @@ function InboxHeader({
   ] });
 }
 const useNotifications = () => {
-  const [notifications, setNotifications] = React.useState(index.getNotifications);
-  React.useEffect(() => index.subscribeToNotifications(setNotifications), []);
+  const [notifications, setNotifications] = react.useState(index.getNotifications);
+  react.useEffect(() => index.subscribeToNotifications(setNotifications), []);
   return notifications;
 };
 const UNREAD_BG = {
@@ -270,7 +269,7 @@ function NotificationList({
   ] });
 }
 function Index() {
-  const [filter, setFilter] = React.useState("all");
+  const [filter, setFilter] = react.useState("all");
   const {
     fetchAll,
     loadMore,
@@ -281,7 +280,7 @@ function Index() {
     isLoading,
     hasMore
   } = useNotificationActions();
-  React.useEffect(() => {
+  react.useEffect(() => {
     fetchAll();
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, style: { height: "100%" }, children: [

package/dist/_chunks/{Index-DI2t9tlH.mjs → Index-DOQrGurB.mjs}

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { Box, Flex, Typography, Button, IconButton, Loader } from "@strapi/design-system";
-import "react-dom/client";
+import { useFetchClient } from "@strapi/admin/strapi-admin";
+import { g as getConfig, s as setNotifications, a as getNotifications, m as markAsRead, b as markAllAsRead, c as clearNotification, d as clearAll, e as subscribeToNotifications, u as usePluginConfig } from "./index-7hrPEwa_.mjs";
 import { Cross } from "@strapi/icons";
-import { u as useFetchClient, g as getConfig, s as setNotifications, a as getNotifications, m as markAsRead, b as markAllAsRead, c as clearNotification, d as clearAll, e as subscribeToNotifications, f as usePluginConfig } from "./index-CNYabBMJ.mjs";
-import "@strapi/icons/symbols";
 const toStoreItem = (n) => ({
   id: String(n.id),
   title: n.title,

package/dist/_chunks/{SettingsPage-DIKfBfvo.mjs → SettingsPage-CRsuB4cw.mjs}

@@ -1,10 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Box, Flex, Typography, Button, NumberInput, Divider, TextInput } from "@strapi/design-system";
-import "react-dom/client";
-import "@strapi/icons";
-import { u as useFetchClient } from "./index-CNYabBMJ.mjs";
-import "@strapi/icons/symbols";
+import { useFetchClient } from "@strapi/admin/strapi-admin";
 const DEFAULT = {
   retention: { maxDays: 90, maxPerUser: 500 },
   delivery: { pollIntervalMs: 3e4, pageSize: 20 },

package/dist/_chunks/{SettingsPage-BdBxZMqP.js → SettingsPage-Cft7agRa.js}

@@ -1,24 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const designSystem = require("@strapi/design-system");
-require("react-dom/client");
-require("@strapi/icons");
-const index = require("./index-7WJGsVEY.js");
-require("@strapi/icons/symbols");
+const strapiAdmin = require("@strapi/admin/strapi-admin");
 const DEFAULT = {
   retention: { maxDays: 90, maxPerUser: 500 },
   delivery: { pollIntervalMs: 3e4, pageSize: 20 },
   ui: { theme: { accent: { info: "#4945ff", success: "#5cb85c", warning: "#f0ad4e", error: "#ee5e52" } } }
 };
 function SettingsPage() {
-  const { get, put, del } = index.useFetchClient();
-  const [settings, setSettings] = React.useState(DEFAULT);
-  const [isSaving, setIsSaving] = React.useState(false);
-  const [isResetting, setIsResetting] = React.useState(false);
-  const [saveError, setSaveError] = React.useState(null);
-  React.useEffect(() => {
+  const { get, put, del } = strapiAdmin.useFetchClient();
+  const [settings, setSettings] = react.useState(DEFAULT);
+  const [isSaving, setIsSaving] = react.useState(false);
+  const [isResetting, setIsResetting] = react.useState(false);
+  const [saveError, setSaveError] = react.useState(null);
+  react.useEffect(() => {
     get("/notifier/settings").then(({ data }) => {
       if (data) setSettings(data);
     }).catch(() => {

package/dist/_chunks/index-7hrPEwa_.mjs

@@ -0,0 +1,221 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { useFetchClient } from "@strapi/admin/strapi-admin";
+let items = [];
+let countSubscribers = [];
+let itemSubscribers = [];
+const getUnreadCount = () => items.filter((n) => !n.read).length;
+const broadcastCount = () => {
+  const n = getUnreadCount();
+  countSubscribers.forEach((fn) => fn(n));
+};
+const broadcastItems = () => {
+  const snapshot = [...items];
+  itemSubscribers.forEach((fn) => fn(snapshot));
+  broadcastCount();
+};
+const getNotificationCount = () => getUnreadCount();
+const getNotifications = () => [...items];
+const subscribeToCount = (fn) => {
+  countSubscribers.push(fn);
+  return () => {
+    countSubscribers = countSubscribers.filter((s) => s !== fn);
+  };
+};
+const subscribeToNotifications = (fn) => {
+  itemSubscribers.push(fn);
+  return () => {
+    itemSubscribers = itemSubscribers.filter((s) => s !== fn);
+  };
+};
+const setNotifications = (next) => {
+  items = next;
+  broadcastItems();
+};
+const markAsRead = (id) => {
+  items = items.map((n) => n.id === id ? { ...n, read: true } : n);
+  broadcastItems();
+};
+const markAllAsRead = () => {
+  items = items.map((n) => ({ ...n, read: true }));
+  broadcastItems();
+};
+const clearNotification = (id) => {
+  items = items.filter((n) => n.id !== id);
+  broadcastItems();
+};
+const clearAll = () => {
+  items = [];
+  broadcastItems();
+};
+const useNotificationCount = () => {
+  const [count, setCount] = useState(getNotificationCount);
+  useEffect(() => subscribeToCount(setCount), []);
+  return count;
+};
+const DEFAULT_CONFIG = {
+  pollIntervalMs: 3e4,
+  pageSize: 20,
+  theme: {
+    accent: {
+      info: "#4945ff",
+      success: "#5cb85c",
+      warning: "#f0ad4e",
+      error: "#ee5e52"
+    }
+  }
+};
+let config = DEFAULT_CONFIG;
+let subscribers = [];
+const getConfig = () => config;
+const setConfig = (next) => {
+  config = { ...DEFAULT_CONFIG, ...next, theme: { accent: { ...DEFAULT_CONFIG.theme.accent, ...next?.theme?.accent } } };
+  subscribers.forEach((fn) => fn(config));
+};
+const subscribeToConfig = (fn) => {
+  subscribers.push(fn);
+  return () => {
+    subscribers = subscribers.filter((s) => s !== fn);
+  };
+};
+const usePluginConfig = () => {
+  const [config2, setConfig2] = useState(getConfig);
+  useEffect(() => subscribeToConfig(setConfig2), []);
+  return config2;
+};
+const toStoreNotification = (n) => ({
+  id: String(n.id),
+  title: n.title,
+  message: n.message ?? "",
+  type: n.type ?? "info",
+  read: n.read,
+  createdAt: n.createdAt,
+  url: n.url
+});
+function Bell() {
+  const count = useNotificationCount();
+  const config2 = usePluginConfig();
+  const { get } = useFetchClient();
+  const configLoaded = useRef(false);
+  useEffect(() => {
+    if (configLoaded.current) return;
+    configLoaded.current = true;
+    get("/notifier/config").then(({ data }) => {
+      if (data) setConfig(data);
+    }).catch(() => {
+    });
+  }, [get]);
+  useEffect(() => {
+    const poll = async () => {
+      try {
+        const { data } = await get(`/notifier/notifications?page=1&pageSize=${config2.pageSize}`);
+        if (Array.isArray(data?.data)) {
+          setNotifications(data.data.map(toStoreNotification));
+        }
+      } catch {
+      }
+    };
+    poll();
+    const id = setInterval(poll, config2.pollIntervalMs);
+    return () => clearInterval(id);
+  }, [get, config2.pollIntervalMs, config2.pageSize]);
+  return /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        width: "1.5em",
+        height: "1.5em",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+          /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+        ]
+      }
+    ),
+    count > 0 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-label": `${count} unread notification${count === 1 ? "" : "s"}`,
+        style: {
+          position: "absolute",
+          top: "-5px",
+          right: "-6px",
+          backgroundColor: "#ee5e52",
+          color: "#fff",
+          borderRadius: "9px",
+          fontSize: "9px",
+          fontWeight: 700,
+          height: "13px",
+          minWidth: "13px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0 2px",
+          lineHeight: 1,
+          pointerEvents: "none"
+        },
+        children: count > 99 ? "99+" : count
+      }
+    )
+  ] });
+}
+const pluginId = "notifier";
+const index = {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: Bell,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: "Notifications"
+      },
+      permissions: [],
+      Component: () => import("./Index-DOQrGurB.mjs")
+    });
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: `${pluginId}.settings.section`,
+          defaultMessage: "Notifier"
+        }
+      },
+      [
+        {
+          intlLabel: {
+            id: `${pluginId}.settings.page`,
+            defaultMessage: "Configuration"
+          },
+          id: `${pluginId}.settings`,
+          to: `/settings/${pluginId}`,
+          Component: () => import("./SettingsPage-CRsuB4cw.mjs"),
+          permissions: [
+            { action: `plugin::${pluginId}.settings.read`, subject: null }
+          ]
+        }
+      ]
+    );
+    app.registerPlugin({
+      id: pluginId,
+      name: "Notifier"
+    });
+  }
+};
+export {
+  getNotifications as a,
+  markAllAsRead as b,
+  clearNotification as c,
+  clearAll as d,
+  subscribeToNotifications as e,
+  getConfig as g,
+  index as i,
+  markAsRead as m,
+  setNotifications as s,
+  usePluginConfig as u
+};

package/dist/_chunks/index-DrwLcZBZ.js

@@ -0,0 +1,220 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const strapiAdmin = require("@strapi/admin/strapi-admin");
+let items = [];
+let countSubscribers = [];
+let itemSubscribers = [];
+const getUnreadCount = () => items.filter((n) => !n.read).length;
+const broadcastCount = () => {
+  const n = getUnreadCount();
+  countSubscribers.forEach((fn) => fn(n));
+};
+const broadcastItems = () => {
+  const snapshot = [...items];
+  itemSubscribers.forEach((fn) => fn(snapshot));
+  broadcastCount();
+};
+const getNotificationCount = () => getUnreadCount();
+const getNotifications = () => [...items];
+const subscribeToCount = (fn) => {
+  countSubscribers.push(fn);
+  return () => {
+    countSubscribers = countSubscribers.filter((s) => s !== fn);
+  };
+};
+const subscribeToNotifications = (fn) => {
+  itemSubscribers.push(fn);
+  return () => {
+    itemSubscribers = itemSubscribers.filter((s) => s !== fn);
+  };
+};
+const setNotifications = (next) => {
+  items = next;
+  broadcastItems();
+};
+const markAsRead = (id) => {
+  items = items.map((n) => n.id === id ? { ...n, read: true } : n);
+  broadcastItems();
+};
+const markAllAsRead = () => {
+  items = items.map((n) => ({ ...n, read: true }));
+  broadcastItems();
+};
+const clearNotification = (id) => {
+  items = items.filter((n) => n.id !== id);
+  broadcastItems();
+};
+const clearAll = () => {
+  items = [];
+  broadcastItems();
+};
+const useNotificationCount = () => {
+  const [count, setCount] = react.useState(getNotificationCount);
+  react.useEffect(() => subscribeToCount(setCount), []);
+  return count;
+};
+const DEFAULT_CONFIG = {
+  pollIntervalMs: 3e4,
+  pageSize: 20,
+  theme: {
+    accent: {
+      info: "#4945ff",
+      success: "#5cb85c",
+      warning: "#f0ad4e",
+      error: "#ee5e52"
+    }
+  }
+};
+let config = DEFAULT_CONFIG;
+let subscribers = [];
+const getConfig = () => config;
+const setConfig = (next) => {
+  config = { ...DEFAULT_CONFIG, ...next, theme: { accent: { ...DEFAULT_CONFIG.theme.accent, ...next?.theme?.accent } } };
+  subscribers.forEach((fn) => fn(config));
+};
+const subscribeToConfig = (fn) => {
+  subscribers.push(fn);
+  return () => {
+    subscribers = subscribers.filter((s) => s !== fn);
+  };
+};
+const usePluginConfig = () => {
+  const [config2, setConfig2] = react.useState(getConfig);
+  react.useEffect(() => subscribeToConfig(setConfig2), []);
+  return config2;
+};
+const toStoreNotification = (n) => ({
+  id: String(n.id),
+  title: n.title,
+  message: n.message ?? "",
+  type: n.type ?? "info",
+  read: n.read,
+  createdAt: n.createdAt,
+  url: n.url
+});
+function Bell() {
+  const count = useNotificationCount();
+  const config2 = usePluginConfig();
+  const { get } = strapiAdmin.useFetchClient();
+  const configLoaded = react.useRef(false);
+  react.useEffect(() => {
+    if (configLoaded.current) return;
+    configLoaded.current = true;
+    get("/notifier/config").then(({ data }) => {
+      if (data) setConfig(data);
+    }).catch(() => {
+    });
+  }, [get]);
+  react.useEffect(() => {
+    const poll = async () => {
+      try {
+        const { data } = await get(`/notifier/notifications?page=1&pageSize=${config2.pageSize}`);
+        if (Array.isArray(data?.data)) {
+          setNotifications(data.data.map(toStoreNotification));
+        }
+      } catch {
+      }
+    };
+    poll();
+    const id = setInterval(poll, config2.pollIntervalMs);
+    return () => clearInterval(id);
+  }, [get, config2.pollIntervalMs, config2.pageSize]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        width: "1.5em",
+        height: "1.5em",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+        ]
+      }
+    ),
+    count > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-label": `${count} unread notification${count === 1 ? "" : "s"}`,
+        style: {
+          position: "absolute",
+          top: "-5px",
+          right: "-6px",
+          backgroundColor: "#ee5e52",
+          color: "#fff",
+          borderRadius: "9px",
+          fontSize: "9px",
+          fontWeight: 700,
+          height: "13px",
+          minWidth: "13px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0 2px",
+          lineHeight: 1,
+          pointerEvents: "none"
+        },
+        children: count > 99 ? "99+" : count
+      }
+    )
+  ] });
+}
+const pluginId = "notifier";
+const index = {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: Bell,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: "Notifications"
+      },
+      permissions: [],
+      Component: () => Promise.resolve().then(() => require("./Index-C5mgbISF.js"))
+    });
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: `${pluginId}.settings.section`,
+          defaultMessage: "Notifier"
+        }
+      },
+      [
+        {
+          intlLabel: {
+            id: `${pluginId}.settings.page`,
+            defaultMessage: "Configuration"
+          },
+          id: `${pluginId}.settings`,
+          to: `/settings/${pluginId}`,
+          Component: () => Promise.resolve().then(() => require("./SettingsPage-Cft7agRa.js")),
+          permissions: [
+            { action: `plugin::${pluginId}.settings.read`, subject: null }
+          ]
+        }
+      ]
+    );
+    app.registerPlugin({
+      id: pluginId,
+      name: "Notifier"
+    });
+  }
+};
+exports.clearAll = clearAll;
+exports.clearNotification = clearNotification;
+exports.getConfig = getConfig;
+exports.getNotifications = getNotifications;
+exports.index = index;
+exports.markAllAsRead = markAllAsRead;
+exports.markAsRead = markAsRead;
+exports.setNotifications = setNotifications;
+exports.subscribeToNotifications = subscribeToNotifications;
+exports.usePluginConfig = usePluginConfig;

package/dist/admin/index.js

@@ -1,4 +1,3 @@
 "use strict";
-require("react");
-const index = require("../_chunks/index-7WJGsVEY.js");
+const index = require("../_chunks/index-DrwLcZBZ.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,5 +1,4 @@
-import "react";
-import { i } from "../_chunks/index-CNYabBMJ.mjs";
+import { i } from "../_chunks/index-7hrPEwa_.mjs";
 export {
   i as default
 };

package/dist/server/index.js

@@ -454,7 +454,7 @@ const settings = {
     }
   ]
 };
-const adminRoutes = [notification, config, settings];
+const adminRoutes = { notification, config, settings };
 const index = {
   register,
   bootstrap,

package/dist/server/index.mjs

@@ -453,7 +453,7 @@ const settings = {
     }
   ]
 };
-const adminRoutes = [notification, config, settings];
+const adminRoutes = { notification, config, settings };
 const index = {
   register,
   bootstrap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-notifier",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A highly configurable notification inbox plugin for the Strapi v5 admin panel",
   "keywords": [
     "strapi",
@@ -61,12 +61,15 @@
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
+    "@strapi/admin": "^5.0.0",
     "@strapi/design-system": "^2.0.0",
     "@strapi/icons": "^2.0.0",
     "@strapi/strapi": "^5.0.0",
     "framer-motion": "*",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0 <=22.x.x",