strapi-plugin-notifier 1.0.0

package/dist/_chunks/Index-DI2t9tlH.mjs

@@ -0,0 +1,310 @@
+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 { 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,
+  message: n.message ?? "",
+  type: n.type ?? "info",
+  read: n.read,
+  createdAt: n.createdAt,
+  url: n.url
+});
+const useNotificationActions = () => {
+  const { get, put, del } = useFetchClient();
+  const [isLoading, setIsLoading] = useState(false);
+  const [pagination, setPagination] = useState(null);
+  const currentPage = useRef(1);
+  const fetchPage = useCallback(
+    async (page, append = false) => {
+      const { pageSize } = getConfig();
+      setIsLoading(true);
+      try {
+        const { data } = await get(
+          `/notifier/notifications?page=${page}&pageSize=${pageSize}`
+        );
+        if (Array.isArray(data?.data)) {
+          const incoming = data.data.map(toStoreItem);
+          if (append) {
+            setNotifications([...getNotifications(), ...incoming]);
+          } else {
+            setNotifications(incoming);
+          }
+          setPagination(data.pagination ?? null);
+          currentPage.current = page;
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [get]
+  );
+  const fetchAll = useCallback(() => fetchPage(1, false), [fetchPage]);
+  const loadMore = useCallback(() => {
+    if (!pagination || currentPage.current >= pagination.pageCount) return;
+    fetchPage(currentPage.current + 1, true);
+  }, [fetchPage, pagination]);
+  const handleMarkAsRead = useCallback(
+    async (id) => {
+      markAsRead(id);
+      try {
+        await put(`/notifier/notifications/${id}/read`);
+      } catch {
+      }
+    },
+    [put]
+  );
+  const handleMarkAllAsRead = useCallback(async () => {
+    markAllAsRead();
+    try {
+      await put("/notifier/notifications/read-all");
+    } catch {
+    }
+  }, [put]);
+  const handleClear = useCallback(
+    async (id) => {
+      clearNotification(id);
+      try {
+        await del(`/notifier/notifications/${id}`);
+      } catch {
+      }
+    },
+    [del]
+  );
+  const handleClearAll = useCallback(async () => {
+    clearAll();
+    try {
+      await del("/notifier/notifications");
+    } catch {
+    }
+  }, [del]);
+  const hasMore = pagination ? currentPage.current < pagination.pageCount : false;
+  return {
+    fetchAll,
+    loadMore,
+    handleMarkAsRead,
+    handleMarkAllAsRead,
+    handleClear,
+    handleClearAll,
+    isLoading,
+    hasMore
+  };
+};
+const FILTERS = ["all", "unread", "info", "success", "warning", "error"];
+const FILTER_LABELS = {
+  all: "All",
+  unread: "Unread",
+  info: "Info",
+  success: "Success",
+  warning: "Warning",
+  error: "Error"
+};
+function InboxHeader({
+  filter,
+  onFilterChange,
+  onMarkAllAsRead,
+  onClearAll
+}) {
+  return /* @__PURE__ */ jsxs(Box, { paddingBottom: 4, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Notifications" }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", onClick: onMarkAllAsRead, children: "Mark all as read" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "danger-light",
+            size: "S",
+            onClick: onClearAll,
+            children: "Clear all"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", children: FILTERS.map((f) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onFilterChange(f),
+        style: {
+          padding: "4px 12px",
+          borderRadius: "16px",
+          border: "1px solid",
+          borderColor: filter === f ? "#4945ff" : "#dcdce4",
+          backgroundColor: filter === f ? "#f0f0ff" : "transparent",
+          color: filter === f ? "#4945ff" : "#32324d",
+          cursor: "pointer",
+          fontSize: "12px",
+          fontWeight: filter === f ? 600 : 400,
+          transition: "all 0.15s"
+        },
+        children: FILTER_LABELS[f]
+      },
+      f
+    )) })
+  ] });
+}
+const useNotifications = () => {
+  const [notifications, setNotifications2] = useState(getNotifications);
+  useEffect(() => subscribeToNotifications(setNotifications2), []);
+  return notifications;
+};
+const UNREAD_BG = {
+  info: "#f0f0ff",
+  success: "#f0fff4",
+  warning: "#fffbf0",
+  error: "#fff5f5"
+};
+function NotificationItem({
+  notification,
+  onMarkAsRead,
+  onClear
+}) {
+  const config = usePluginConfig();
+  const accent = config.theme.accent[notification.type];
+  const handleClick = () => {
+    if (!notification.read) onMarkAsRead(notification.id);
+    if (notification.url) {
+      if (notification.url.startsWith("http")) {
+        window.open(notification.url, "_blank", "noopener,noreferrer");
+      } else {
+        window.location.href = notification.url;
+      }
+    }
+  };
+  const handleDismiss = (e) => {
+    e.stopPropagation();
+    onClear(notification.id);
+  };
+  const bg = !notification.read ? UNREAD_BG[notification.type] : "transparent";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      onClick: handleClick,
+      style: {
+        borderLeft: `4px solid ${accent}`,
+        backgroundColor: bg,
+        cursor: notification.url ? "pointer" : "default",
+        transition: "background 0.15s"
+      },
+      padding: 4,
+      children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "omega",
+                fontWeight: notification.read ? "normal" : "bold",
+                style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: notification.title
+              }
+            ),
+            notification.url && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "↗" })
+          ] }),
+          notification.message && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: 2 }, children: notification.message }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", style: { marginTop: 4 }, children: new Date(notification.createdAt).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Dismiss",
+            onClick: handleDismiss,
+            variant: "ghost",
+            size: "S",
+            children: /* @__PURE__ */ jsx(Cross, {})
+          }
+        )
+      ] })
+    }
+  );
+}
+const MESSAGES = {
+  all: "No notifications yet.",
+  unread: "No unread notifications.",
+  info: "No info notifications.",
+  success: "No success notifications.",
+  warning: "No warning notifications.",
+  error: "No error notifications."
+};
+function EmptyInbox({ filter = "all" }) {
+  return /* @__PURE__ */ jsx(Box, { padding: 8, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", children: MESSAGES[filter] }) });
+}
+const applyFilter = (items, filter) => {
+  if (filter === "all") return items;
+  if (filter === "unread") return items.filter((n) => !n.read);
+  return items.filter((n) => n.type === filter);
+};
+function NotificationList({
+  filter,
+  onMarkAsRead,
+  onClear,
+  isLoading,
+  hasMore,
+  onLoadMore
+}) {
+  const notifications = useNotifications();
+  const filtered = applyFilter(notifications, filter);
+  if (isLoading && notifications.length === 0) {
+    return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { small: true, children: "Loading notifications…" }) });
+  }
+  if (filtered.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyInbox, { filter });
+  }
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    filtered.map((n) => /* @__PURE__ */ jsx(
+      NotificationItem,
+      {
+        notification: n,
+        onMarkAsRead,
+        onClear
+      },
+      n.id
+    )),
+    hasMore && /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onLoadMore, loading: isLoading, children: isLoading ? "Loading…" : "Load more" }) })
+  ] });
+}
+function Index() {
+  const [filter, setFilter] = useState("all");
+  const {
+    fetchAll,
+    loadMore,
+    handleMarkAsRead,
+    handleMarkAllAsRead,
+    handleClear,
+    handleClearAll,
+    isLoading,
+    hasMore
+  } = useNotificationActions();
+  useEffect(() => {
+    fetchAll();
+  }, []);
+  return /* @__PURE__ */ jsxs(Box, { padding: 8, style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      InboxHeader,
+      {
+        filter,
+        onFilterChange: setFilter,
+        onMarkAllAsRead: handleMarkAllAsRead,
+        onClearAll: handleClearAll
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NotificationList,
+      {
+        filter,
+        onMarkAsRead: handleMarkAsRead,
+        onClear: handleClear,
+        isLoading,
+        hasMore,
+        onLoadMore: loadMore
+      }
+    )
+  ] });
+}
+export {
+  Index as default
+};

package/dist/_chunks/SettingsPage-BdBxZMqP.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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 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(() => {
+    get("/notifier/settings").then(({ data }) => {
+      if (data) setSettings(data);
+    }).catch(() => {
+    });
+  }, [get]);
+  const handleSave = async () => {
+    setSaveError(null);
+    setIsSaving(true);
+    try {
+      const { data } = await put("/notifier/settings", { data: settings });
+      if (data) setSettings(data);
+    } catch (e) {
+      setSaveError(e?.message ?? "Failed to save settings.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      await del("/notifier/settings");
+      const { data } = await get("/notifier/settings");
+      if (data) setSettings(data);
+    } finally {
+      setIsResetting(false);
+    }
+  };
+  const set = (path, value) => {
+    setSettings((prev) => {
+      const next = JSON.parse(JSON.stringify(prev));
+      const keys = path.split(".");
+      let obj = next;
+      for (let i = 0; i < keys.length - 1; i++) obj = obj[keys[i]];
+      obj[keys[keys.length - 1]] = value;
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Notifier Settings" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleReset, loading: isResetting, children: "Reset to defaults" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleSave, loading: isSaving, children: "Save" })
+      ] })
+    ] }),
+    saveError && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: saveError }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", paddingBottom: 4, as: "h2", children: "Retention" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.NumberInput,
+          {
+            label: "Max age (days)",
+            hint: "Notifications older than this will be deleted by the nightly cron.",
+            value: settings.retention.maxDays,
+            onValueChange: (v) => set("retention.maxDays", v),
+            style: { flex: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.NumberInput,
+          {
+            label: "Max per user",
+            hint: "Cap on notifications stored per user. Oldest are removed first.",
+            value: settings.retention.maxPerUser,
+            onValueChange: (v) => set("retention.maxPerUser", v),
+            style: { flex: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, marginTop: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", paddingBottom: 4, as: "h2", children: "Delivery" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.NumberInput,
+          {
+            label: "Poll interval (ms)",
+            hint: "How often the Bell polls the server for new notifications.",
+            value: settings.delivery.pollIntervalMs,
+            onValueChange: (v) => set("delivery.pollIntervalMs", v),
+            style: { flex: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.NumberInput,
+          {
+            label: "Page size",
+            hint: "Number of notifications loaded per page in the inbox.",
+            value: settings.delivery.pageSize,
+            onValueChange: (v) => set("delivery.pageSize", v),
+            style: { flex: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, marginTop: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", paddingBottom: 4, as: "h2", children: "Theme" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", paddingBottom: 3, children: "Accent colours (hex)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 4, wrap: "wrap", children: ["info", "success", "warning", "error"].map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            label: type.charAt(0).toUpperCase() + type.slice(1),
+            value: settings.ui.theme.accent[type],
+            onChange: (e) => set(`ui.theme.accent.${type}`, e.target.value),
+            style: { flex: 1 }
+          },
+          type
+        )) })
+      ] })
+    ] })
+  ] });
+}
+exports.default = SettingsPage;

package/dist/_chunks/SettingsPage-DIKfBfvo.mjs

@@ -0,0 +1,137 @@
+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";
+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 } = useFetchClient();
+  const [settings, setSettings] = useState(DEFAULT);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  useEffect(() => {
+    get("/notifier/settings").then(({ data }) => {
+      if (data) setSettings(data);
+    }).catch(() => {
+    });
+  }, [get]);
+  const handleSave = async () => {
+    setSaveError(null);
+    setIsSaving(true);
+    try {
+      const { data } = await put("/notifier/settings", { data: settings });
+      if (data) setSettings(data);
+    } catch (e) {
+      setSaveError(e?.message ?? "Failed to save settings.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      await del("/notifier/settings");
+      const { data } = await get("/notifier/settings");
+      if (data) setSettings(data);
+    } finally {
+      setIsResetting(false);
+    }
+  };
+  const set = (path, value) => {
+    setSettings((prev) => {
+      const next = JSON.parse(JSON.stringify(prev));
+      const keys = path.split(".");
+      let obj = next;
+      for (let i = 0; i < keys.length - 1; i++) obj = obj[keys[i]];
+      obj[keys[keys.length - 1]] = value;
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 6, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Notifier Settings" }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleReset, loading: isResetting, children: "Reset to defaults" }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSave, loading: isSaving, children: "Save" })
+      ] })
+    ] }),
+    saveError && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: saveError }) }),
+    /* @__PURE__ */ jsxs(Box, { background: "neutral0", padding: 6, hasRadius: true, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "delta", paddingBottom: 4, as: "h2", children: "Retention" }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: "Max age (days)",
+            hint: "Notifications older than this will be deleted by the nightly cron.",
+            value: settings.retention.maxDays,
+            onValueChange: (v) => set("retention.maxDays", v),
+            style: { flex: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: "Max per user",
+            hint: "Cap on notifications stored per user. Oldest are removed first.",
+            value: settings.retention.maxPerUser,
+            onValueChange: (v) => set("retention.maxPerUser", v),
+            style: { flex: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { background: "neutral0", padding: 6, hasRadius: true, marginTop: 4, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "delta", paddingBottom: 4, as: "h2", children: "Delivery" }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: "Poll interval (ms)",
+            hint: "How often the Bell polls the server for new notifications.",
+            value: settings.delivery.pollIntervalMs,
+            onValueChange: (v) => set("delivery.pollIntervalMs", v),
+            style: { flex: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: "Page size",
+            hint: "Number of notifications loaded per page in the inbox.",
+            value: settings.delivery.pageSize,
+            onValueChange: (v) => set("delivery.pageSize", v),
+            style: { flex: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { background: "neutral0", padding: 6, hasRadius: true, marginTop: 4, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "delta", paddingBottom: 4, as: "h2", children: "Theme" }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(Box, { paddingTop: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", paddingBottom: 3, children: "Accent colours (hex)" }),
+        /* @__PURE__ */ jsx(Flex, { gap: 4, wrap: "wrap", children: ["info", "success", "warning", "error"].map((type) => /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            label: type.charAt(0).toUpperCase() + type.slice(1),
+            value: settings.ui.theme.accent[type],
+            onChange: (e) => set(`ui.theme.accent.${type}`, e.target.value),
+            style: { flex: 1 }
+          },
+          type
+        )) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  SettingsPage as default
+};