@variamosple/variamos-components 0.1.2 → 0.2.0

package/dist/Components/AuthWrapper/index.js

@@ -1,16 +1,17 @@
 import { jsx as o, Fragment as u } from "react/jsx-runtime";
-import d, { useEffect as c } from "react";
+import d, { useEffect as m } from "react";
 import { Spinner as f } from "react-bootstrap";
 import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as p } from "../../Context/RouterContext.js";
 import { useSession as l } from "../../Context/SessionContext.js";
-const P = ({
+import "../../Context/NotificationContext.js";
+const v = ({
   redirectPath: i,
-  children: m
+  children: c
 }) => {
   const [a, h] = d.useState(!1), { isAuthenticated: t, isLoading: r } = l(), { navigate: n } = p();
-  return c(() => {
+  return m(() => {
     if (!r && !t && !a) {
       const e = window.location.href, s = new URLSearchParams();
       s.set("redirectTo", encodeURIComponent(e)), h(!0), setTimeout(
@@ -18,7 +19,7 @@ const P = ({
         300
       );
     }
-  }, [t, r, i, n, a]), c(() => {
+  }, [t, r, i, n, a]), m(() => {
     const e = new URL(window.location.href);
     e.searchParams.has("authToken") && (localStorage.setItem("authToken", e.searchParams.get("authToken")), e.searchParams.delete("authToken"), window.history.replaceState({}, "", e));
   }, []), r || !t ? /* @__PURE__ */ o("div", { className: "d-flex justify-content-center align-items-center w-100 h-100", children: /* @__PURE__ */ o(
@@ -28,8 +29,8 @@ const P = ({
       variant: "primary",
       style: { width: "3rem", height: "3rem", borderWidth: "0.5rem" }
     }
-  ) }) : /* @__PURE__ */ o(u, { children: m });
+  ) }) : /* @__PURE__ */ o(u, { children: c });
 };
 export {
-  P as AuthWrapper
+  v as AuthWrapper
 };

package/dist/Components/Header/HeaderOptions.js

@@ -5,10 +5,11 @@ import "../../Context/AnalyticsContext.js";
 import { useMenu as C } from "../../Context/MenuContext.js";
 import { useRouter as b } from "../../Context/RouterContext.js";
 import { useSession as x } from "../../Context/SessionContext.js";
+import "../../Context/NotificationContext.js";
 import { mapToWebTarget as L } from "../../Model/Router.js";
 import { Events as y } from "../../Common/Events.js";
 import { BugFormModal as U } from "./BugFormModal.js";
-const u = {}, O = ({ adminApiUrl: B }) => {
+const u = {}, Q = ({ adminApiUrl: B }) => {
   const { user: o, isAuthenticated: m, logout: P } = x(), { options: l } = C(), { navigate: A } = b(), [R, c] = h(!1), [k] = h([
     "Editor",
     "Model",
@@ -91,5 +92,5 @@ const u = {}, O = ({ adminApiUrl: B }) => {
   ] });
 };
 export {
-  O as HeaderOptions
+  Q as HeaderOptions
 };

package/dist/Components/Header/MenuItem.js

@@ -5,8 +5,9 @@ import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as C } from "../../Context/RouterContext.js";
 import { useSession as N } from "../../Context/SessionContext.js";
+import "../../Context/NotificationContext.js";
 import { mapToWebTarget as m } from "../../Model/Router.js";
-const y = ({
+const z = ({
   title: e,
   type: w,
   location: g,
@@ -46,5 +47,5 @@ const y = ({
   )) });
 };
 export {
-  y as MenuItemComponent
+  z as MenuItemComponent
 };

package/dist/Components/Header/SubHeader.js

@@ -5,8 +5,9 @@ import "../../Context/AnalyticsContext.js";
 import { useMenu as N } from "../../Context/MenuContext.js";
 import { useRouter as v } from "../../Context/RouterContext.js";
 import { useSession as R } from "../../Context/SessionContext.js";
-const H = () => {
-  const { navigate: f } = v(), { subMenu: n } = N(), { user: r } = R(), t = w(() => {
+import "../../Context/NotificationContext.js";
+const L = () => {
+  const { navigate: p } = v(), { subMenu: n } = N(), { user: r } = R(), t = w(() => {
     const l = (r == null ? void 0 : r.roles) || [], m = (r == null ? void 0 : r.permissions) || [];
     return n ? n.filter((o) => {
       var a, c;
@@ -19,20 +20,20 @@ const H = () => {
         (e) => m.includes(e)
       )), i;
     }) : [];
-  }, [n, r]), p = (l) => () => {
-    f(l);
+  }, [n, r]), f = (l) => () => {
+    p(l);
   };
   return t.length ? /* @__PURE__ */ s(h, { className: "py-1 shadow-sm bg-white", children: /* @__PURE__ */ s(g, { children: /* @__PURE__ */ s(d, { className: "d-flex justify-content-center w-100 gap-3", children: t.map((l) => /* @__PURE__ */ s(
     d.Link,
     {
       as: "button",
       className: "btn btn-link p-0",
-      onClick: p(l.location),
+      onClick: f(l.location),
       children: l.title
     },
     l.location
   )) }) }) }) : null;
 };
 export {
-  H as SubHeader
+  L as SubHeader
 };

package/dist/Components/Header/index.js

@@ -4,10 +4,11 @@ import "../../Context/AnalyticsContext.js";
 import { useMenu as f } from "../../Context/MenuContext.js";
 import { useRouter as g } from "../../Context/RouterContext.js";
 import { useSession as N } from "../../Context/SessionContext.js";
+import "../../Context/NotificationContext.js";
 import { HeaderOptions as k } from "./HeaderOptions.js";
 import { MenuItemComponent as n } from "./MenuItem.js";
 import { SubHeader as b } from "./SubHeader.js";
-const M = ({
+const B = ({
   logoUrl: a,
   logoAlt: m = "App logo",
   signInUrl: s,
@@ -42,5 +43,5 @@ const M = ({
   ] });
 };
 export {
-  M as Header
+  B as Header
 };

package/dist/Components/NotAuthorized/index.js

@@ -4,7 +4,8 @@ import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as a } from "../../Context/RouterContext.js";
 import "../../Context/SessionContext.js";
-const u = ({ homePath: e }) => {
+import "../../Context/NotificationContext.js";
+const h = ({ homePath: e }) => {
   const { navigate: r } = a();
   return /* @__PURE__ */ o(i, { className: "d-flex flex-column justify-content-center align-items-center vh-100 text-center", children: [
     /* @__PURE__ */ t("h1", { className: "display-1 fw-bold text-danger", children: "403" }),
@@ -13,5 +14,5 @@ const u = ({ homePath: e }) => {
   ] });
 };
 export {
-  u as NotAuthorized
+  h as NotAuthorized
 };

package/dist/Components/Notifications/NotificationBell.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface NotificationBellProps {
+    onClick?: () => void;
+    className?: string;
+}
+export declare const NotificationBell: React.FC<NotificationBellProps>;

package/dist/Components/Notifications/NotificationBell.js

@@ -0,0 +1,36 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Button as a, Badge as n } from "react-bootstrap";
+import { Bell as s } from "react-bootstrap-icons";
+import { useNotifications as l } from "../../Context/NotificationContext.js";
+const f = ({
+  onClick: o,
+  className: i = ""
+}) => {
+  const { unreadCount: t } = l();
+  return /* @__PURE__ */ r(
+    a,
+    {
+      variant: "link",
+      onClick: o,
+      className: `position-relative p-2 text-dark ${i}`,
+      "aria-label": "Notifications",
+      style: { boxShadow: "none" },
+      children: [
+        /* @__PURE__ */ e(s, { size: 22 }),
+        t > 0 && /* @__PURE__ */ e(
+          n,
+          {
+            pill: !0,
+            bg: "danger",
+            className: "position-absolute translate-middle-y start-50 top-0 border border-white",
+            style: { fontSize: "0.65rem", padding: "0.25em 0.5em" },
+            children: t > 99 ? "99+" : t
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  f as NotificationBell
+};

package/dist/Components/Notifications/NotificationDrawer.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface NotificationDrawerProps {
+    show: boolean;
+    onClose: () => void;
+}
+export declare const NotificationDrawer: React.FC<NotificationDrawerProps>;

package/dist/Components/Notifications/NotificationDrawer.js

@@ -0,0 +1,166 @@
+import { jsxs as i, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { useState as b, useEffect as z } from "react";
+import { Offcanvas as o, Button as r, Nav as l, Spinner as C, ListGroup as N } from "react-bootstrap";
+import { ArrowLeft as L, Gear as R, Inbox as E, Trash as g, CheckAll as I, CircleFill as K } from "react-bootstrap-icons";
+import { useNotifications as B } from "../../Context/NotificationContext.js";
+import { NotificationSettings as F } from "./NotificationSettings.js";
+const _ = {
+  review_assigned: {
+    title: "Language Review Assigned",
+    body: "You have been assigned to review the translation for {{languageName}}."
+  },
+  project_created: {
+    title: "Project Created",
+    body: "The project '{{projectName}}' has been created successfully."
+  },
+  test_template: {
+    title: "Notification Test",
+    body: "Hello {{name}}, this is a real-time notification test."
+  }
+}, P = ({
+  show: c,
+  onClose: y
+}) => {
+  const {
+    notifications: d,
+    isLoading: u,
+    fetchNotifications: v,
+    markAsRead: k,
+    markAllAsRead: w,
+    emptyTrash: S
+  } = B(), [a, T] = b("inbox"), [m, h] = b(!1);
+  z(() => {
+    c && v(a);
+  }, [c, a]);
+  const f = (t, n) => {
+    let s = t;
+    for (const p of Object.keys(n))
+      s = s.replace(new RegExp(`{{${p}}}`, "g"), String(n[p]));
+    return s;
+  }, j = (t) => {
+    const n = _[t.templateKey] || {
+      title: "New Alert",
+      body: `Notification template: ${t.templateKey}`
+    };
+    return {
+      title: f(n.title, t.variables),
+      body: f(n.body, t.variables)
+    };
+  }, A = (t) => new Date(t).toLocaleDateString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  return /* @__PURE__ */ i(o, { show: c, onHide: y, placement: "end", className: "text-dark", children: [
+    /* @__PURE__ */ e(o.Header, { closeButton: !0, className: "border-bottom", children: /* @__PURE__ */ e(o.Title, { className: "d-flex align-items-center w-100", children: m ? /* @__PURE__ */ i(x, { children: [
+      /* @__PURE__ */ e(
+        r,
+        {
+          variant: "link",
+          className: "p-0 me-2 text-dark",
+          onClick: () => h(!1),
+          "aria-label": "Back",
+          children: /* @__PURE__ */ e(L, { size: 20 })
+        }
+      ),
+      /* @__PURE__ */ e("span", { children: "Settings" })
+    ] }) : /* @__PURE__ */ i("div", { className: "d-flex justify-content-between align-items-center w-100 me-3", children: [
+      /* @__PURE__ */ e("span", { children: "Notifications" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          variant: "link",
+          className: "p-0 text-secondary",
+          onClick: () => h(!0),
+          "aria-label": "Notification Settings",
+          style: { boxShadow: "none" },
+          children: /* @__PURE__ */ e(R, { size: 20 })
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(o.Body, { className: "p-0 d-flex flex-column h-100", children: m ? /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(F, {}) }) : /* @__PURE__ */ i(x, { children: [
+      /* @__PURE__ */ i(
+        l,
+        {
+          variant: "tabs",
+          activeKey: a,
+          onSelect: (t) => T(t),
+          className: "px-3 pt-2 bg-light border-bottom",
+          children: [
+            /* @__PURE__ */ e(l.Item, { children: /* @__PURE__ */ i(l.Link, { eventKey: "inbox", className: "d-flex align-items-center", children: [
+              /* @__PURE__ */ e(E, { className: "me-2" }),
+              "Inbox"
+            ] }) }),
+            /* @__PURE__ */ e(l.Item, { children: /* @__PURE__ */ i(l.Link, { eventKey: "trash", className: "d-flex align-items-center", children: [
+              /* @__PURE__ */ e(g, { className: "me-2" }),
+              "Trash"
+            ] }) })
+          ]
+        }
+      ),
+      d.length > 0 && /* @__PURE__ */ e("div", { className: "d-flex justify-content-end align-items-center p-2 bg-light border-bottom px-3", children: a === "inbox" ? /* @__PURE__ */ i(
+        r,
+        {
+          variant: "link",
+          size: "sm",
+          className: "p-0 text-primary text-decoration-none d-flex align-items-center",
+          onClick: w,
+          children: [
+            /* @__PURE__ */ e(I, { className: "me-1", size: 18 }),
+            "Mark all as read"
+          ]
+        }
+      ) : /* @__PURE__ */ i(
+        r,
+        {
+          variant: "link",
+          size: "sm",
+          className: "p-0 text-danger text-decoration-none d-flex align-items-center",
+          onClick: S,
+          children: [
+            /* @__PURE__ */ e(g, { className: "me-1", size: 16 }),
+            "Empty Trash"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "flex-grow-1 overflow-auto", children: u ? /* @__PURE__ */ e("div", { className: "text-center py-5", children: /* @__PURE__ */ e(C, { animation: "border", variant: "primary" }) }) : d.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-5 text-muted", children: /* @__PURE__ */ e("p", { className: "mb-0", children: a === "inbox" ? "Your inbox is empty!" : "No deleted notifications." }) }) : /* @__PURE__ */ e(N, { variant: "flush", children: d.map((t) => {
+        const { title: n, body: s } = j(t);
+        return /* @__PURE__ */ e(
+          N.Item,
+          {
+            className: `p-3 border-bottom position-relative ${a === "inbox" && !t.isRead ? "bg-light" : ""}`,
+            style: { transition: "background-color 0.2s" },
+            children: /* @__PURE__ */ i("div", { className: "d-flex justify-content-between align-items-start", children: [
+              /* @__PURE__ */ i("div", { className: "pe-3", children: [
+                /* @__PURE__ */ e(
+                  "h6",
+                  {
+                    className: `mb-1 ${a === "inbox" && !t.isRead ? "font-weight-bold text-dark" : "text-secondary"}`,
+                    style: { fontSize: "0.95rem" },
+                    children: n
+                  }
+                ),
+                /* @__PURE__ */ e("p", { className: "text-muted small mb-2", children: s }),
+                /* @__PURE__ */ e("span", { className: "text-muted", style: { fontSize: "0.75rem" }, children: A(t.createdAt) })
+              ] }),
+              a === "inbox" && !t.isRead && /* @__PURE__ */ e(
+                r,
+                {
+                  variant: "link",
+                  className: "p-0 text-primary border-0",
+                  onClick: () => k(t.id),
+                  title: "Mark as read",
+                  style: { boxShadow: "none" },
+                  children: /* @__PURE__ */ e(K, { size: 10, className: "text-primary" })
+                }
+              )
+            ] })
+          },
+          t.id
+        );
+      }) }) })
+    ] }) })
+  ] });
+};
+export {
+  P as NotificationDrawer
+};

package/dist/Components/Notifications/NotificationSettings.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const NotificationSettings: React.FC;

package/dist/Components/Notifications/NotificationSettings.js

@@ -0,0 +1,68 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Spinner as u, Alert as b, Card as c, Form as s } from "react-bootstrap";
+import { useNotifications as y } from "../../Context/NotificationContext.js";
+const N = () => {
+  const { preferences: n, updatePreferences: i, isLoading: o } = y(), a = (e) => {
+    n && i({ [e]: !n[e] });
+  }, d = (e) => {
+    if (!n) return;
+    const h = n.mutedEventTypes.includes(e) ? n.mutedEventTypes.filter((p) => p !== e) : [...n.mutedEventTypes, e];
+    i({ mutedEventTypes: h });
+  };
+  if (o && !n)
+    return /* @__PURE__ */ t("div", { className: "text-center py-4", children: /* @__PURE__ */ t(u, { animation: "border", size: "sm" }) });
+  if (!n)
+    return /* @__PURE__ */ t(b, { variant: "warning", children: "Unable to load notification preferences." });
+  const m = [
+    { key: "review_assigned", label: "Review Assignments (Relectures)" },
+    { key: "project_created", label: "Project Creations" },
+    { key: "system_alert", label: "System Alerts" }
+  ];
+  return /* @__PURE__ */ t(c, { className: "border-0 shadow-sm", children: /* @__PURE__ */ l(c.Body, { className: "p-3", children: [
+    /* @__PURE__ */ t("h6", { className: "mb-3 text-secondary font-weight-bold", children: "Notification Channels" }),
+    /* @__PURE__ */ l(s.Group, { className: "mb-3", children: [
+      /* @__PURE__ */ t(
+        s.Check,
+        {
+          type: "switch",
+          id: "channel-inapp",
+          label: "In-App Notifications (Real-Time)",
+          checked: n.inAppEnabled,
+          onChange: () => a("inAppEnabled"),
+          className: "mb-2"
+        }
+      ),
+      /* @__PURE__ */ t(
+        s.Check,
+        {
+          type: "switch",
+          id: "channel-email",
+          label: "Email Alerts",
+          checked: n.emailEnabled,
+          onChange: () => a("emailEnabled")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("hr", {}),
+    /* @__PURE__ */ t("h6", { className: "mb-3 text-secondary font-weight-bold", children: "Mute Event Types" }),
+    /* @__PURE__ */ t("p", { className: "text-muted small mb-3", children: "Check events you do NOT want to receive notifications for." }),
+    /* @__PURE__ */ t(s.Group, { children: m.map((e) => {
+      const r = n.mutedEventTypes.includes(e.key);
+      return /* @__PURE__ */ t(
+        s.Check,
+        {
+          type: "checkbox",
+          id: `mute-${e.key}`,
+          label: e.label,
+          checked: r,
+          onChange: () => d(e.key),
+          className: "mb-2 text-dark"
+        },
+        e.key
+      );
+    }) })
+  ] }) });
+};
+export {
+  N as NotificationSettings
+};

package/dist/Components/Notifications/index.d.ts

@@ -0,0 +1,3 @@
+export * from './NotificationBell';
+export * from './NotificationDrawer';
+export * from './NotificationSettings';

package/dist/Components/Notifications/index.js

@@ -0,0 +1,8 @@
+import { NotificationBell as i } from "./NotificationBell.js";
+import { NotificationDrawer as e } from "./NotificationDrawer.js";
+import { NotificationSettings as a } from "./NotificationSettings.js";
+export {
+  i as NotificationBell,
+  e as NotificationDrawer,
+  a as NotificationSettings
+};

package/dist/Components/ProtectedRoute/index.js

@@ -4,29 +4,30 @@ import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
 import { useRouter as h } from "../../Context/RouterContext.js";
 import { useSession as d } from "../../Context/SessionContext.js";
-const F = ({
-  notAuthorizedPath: e,
+import "../../Context/NotificationContext.js";
+const L = ({
+  notAuthorizedPath: r,
   allowedPermissions: i = [],
-  children: c
+  children: p
 }) => {
-  var m;
-  const { isAuthenticated: n, isLoading: r, user: t } = d(), { navigate: s } = h();
+  var s;
+  const { isAuthenticated: e, isLoading: n, user: t } = d(), { navigate: m } = h();
   return g(() => {
-    if (!r && n) {
+    if (!n && e) {
       const o = (t == null ? void 0 : t.permissions) || [];
-      !i.length || o.some((p) => i.includes(p)) || s(e);
+      !i.length || o.some((c) => i.includes(c)) || m(r);
     }
   }, [
-    r,
     n,
     e,
-    s,
+    r,
+    m,
     t,
     i
-  ]), i.length > 0 && !((m = t == null ? void 0 : t.permissions) != null && m.some(
+  ]), i.length > 0 && !((s = t == null ? void 0 : t.permissions) != null && s.some(
     (o) => i.includes(o)
-  )) ? null : /* @__PURE__ */ f(u, { children: c });
+  )) ? null : /* @__PURE__ */ f(u, { children: p });
 };
 export {
-  F as ProtectedRoute
+  L as ProtectedRoute
 };

package/dist/Components/index.d.ts

@@ -5,3 +5,4 @@ export * from './Header';
 export * from './NotAuthorized';
 export * from './Paginator';
 export * from './ProtectedRoute';
+export * from './Notifications';

package/dist/Components/index.js

@@ -1,16 +1,22 @@
 import { AuthWrapper as t } from "./AuthWrapper/index.js";
-import { confirmationModalDefaultProps as p } from "./ConfirmationModal/index.js";
-import { Footer as m } from "./Footer/index.js";
-import { Header as x } from "./Header/index.js";
-import { NotAuthorized as i } from "./NotAuthorized/index.js";
-import { Paginator as n } from "./Paginator/index.js";
-import { ProtectedRoute as c } from "./ProtectedRoute/index.js";
+import { confirmationModalDefaultProps as f } from "./ConfirmationModal/index.js";
+import { Footer as p } from "./Footer/index.js";
+import { Header as m } from "./Header/index.js";
+import { NotAuthorized as n } from "./NotAuthorized/index.js";
+import { Paginator as d } from "./Paginator/index.js";
+import { ProtectedRoute as u } from "./ProtectedRoute/index.js";
+import { NotificationBell as P } from "./Notifications/NotificationBell.js";
+import { NotificationDrawer as h } from "./Notifications/NotificationDrawer.js";
+import { NotificationSettings as A } from "./Notifications/NotificationSettings.js";
 export {
   t as AuthWrapper,
-  m as Footer,
-  x as Header,
-  i as NotAuthorized,
-  n as Paginator,
-  c as ProtectedRoute,
-  p as confirmationModalDefaultProps
+  p as Footer,
+  m as Header,
+  n as NotAuthorized,
+  P as NotificationBell,
+  h as NotificationDrawer,
+  A as NotificationSettings,
+  d as Paginator,
+  u as ProtectedRoute,
+  f as confirmationModalDefaultProps
 };

package/dist/Context/NotificationContext.d.ts

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from 'react';
+export interface NotificationItem {
+    id: string;
+    templateKey: string;
+    variables: Record<string, any>;
+    metadata: Record<string, any>;
+    isRead: boolean;
+    createdAt: string;
+}
+export interface UserNotificationPreferences {
+    emailEnabled: boolean;
+    inAppEnabled: boolean;
+    mutedEventTypes: string[];
+}
+interface NotificationContextType {
+    notifications: NotificationItem[];
+    unreadCount: number;
+    preferences: UserNotificationPreferences | null;
+    isLoading: boolean;
+    fetchNotifications: (folder?: "inbox" | "trash", page?: number, limit?: number) => Promise<void>;
+    markAsRead: (id: string) => Promise<void>;
+    markAllAsRead: () => Promise<void>;
+    emptyTrash: () => Promise<void>;
+    fetchPreferences: () => Promise<void>;
+    updatePreferences: (updates: Partial<UserNotificationPreferences>) => Promise<void>;
+}
+export interface NotificationProviderProps {
+    apiUrl: string;
+    children: ReactNode;
+}
+export declare const NotificationProvider: FC<NotificationProviderProps>;
+export declare const useNotifications: () => NotificationContextType;
+export {};