@variamosple/variamos-components 0.2.5 → 0.4.0

package/dist/Components/Notifications/NotificationDrawer.js

@@ -1,201 +1,149 @@
-import { jsxs as i, jsx as e, Fragment as N } from "react/jsx-runtime";
-import { useState as y, useEffect as L } from "react";
-import { Offcanvas as d, Button as r, Nav as c, Spinner as E } from "react-bootstrap";
-import { ArrowLeft as M, Gear as H, Inbox as I, Trash as b, CheckAll as K, CircleFill as R } from "react-bootstrap-icons";
-import { useNotifications as _ } from "../../Context/NotificationContext.js";
-import { NotificationSettings as B } from "./NotificationSettings.js";
-const F = {
-  review_assigned: {
-    title: "Language Review Assigned",
-    body: "You have been assigned to review the translation for {{languageName}}."
+import { jsxs as t, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { useState as p, useEffect as y } from "react";
+import { Offcanvas as c, Button as d, Nav as s, Spinner as S } from "react-bootstrap";
+import { ArrowLeft as w, Gear as A, Inbox as z, Trash as b, CheckAll as C } from "react-bootstrap-icons";
+import { useNotifications as I } from "../../Context/NotificationContext.js";
+import { NotificationCard as L } from "./NotificationCard.js";
+import { NotificationSettings as T } from "./NotificationSettings.js";
+const j = (i) => i === "inbox" || i === "trash", B = ({
+  folder: i,
+  isLoading: m,
+  notifications: a,
+  onMarkAsRead: f,
+  onDelete: l
+}) => m ? /* @__PURE__ */ e("div", { className: "text-center py-5", children: /* @__PURE__ */ e(S, { animation: "border", variant: "primary" }) }) : a.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-5 text-muted", children: /* @__PURE__ */ e("p", { className: "mb-0", children: i === "inbox" ? "Your inbox is empty!" : "No deleted notifications." }) }) : /* @__PURE__ */ e("div", { className: "px-3", children: a.map((o) => /* @__PURE__ */ e(
+  L,
+  {
+    item: o,
+    inInbox: i === "inbox",
+    onMarkAsRead: f,
+    onDelete: l
   },
-  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."
-  },
-  admin_alert: {
-    title: "{{title}}",
-    body: "{{body}}"
-  }
-}, G = ({
-  show: m,
-  onClose: u
+  o.id
+)) }), G = ({
+  show: i,
+  onClose: m
 }) => {
   const {
-    notifications: f,
-    isLoading: v,
-    fetchNotifications: k,
-    markAsRead: w,
-    markAllAsRead: S,
-    emptyTrash: T,
-    deleteNotification: z
-  } = _(), [n, C] = y("inbox"), [p, x] = y(!1);
-  L(() => {
-    m && k(n);
-  }, [m, n]);
-  const g = (t, a) => {
-    let s = t;
-    for (const l of Object.keys(a))
-      s = s.replace(new RegExp(`{{${l}}}`, "g"), String(a[l]));
-    return s;
-  }, j = (t) => {
-    const a = F[t.templateKey] || {
-      title: "New Alert",
-      body: `Notification template: ${t.templateKey}`
-    };
-    return {
-      title: g(a.title, t.variables),
-      body: g(a.body, t.variables)
-    };
-  }, A = (t) => new Date(t).toLocaleDateString(void 0, {
-    hour: "2-digit",
-    minute: "2-digit"
-  });
-  return /* @__PURE__ */ i(d, { show: m, onHide: u, placement: "end", className: "text-dark", children: [
-    /* @__PURE__ */ e(d.Header, { closeButton: !0, className: "border-bottom", children: /* @__PURE__ */ e(d.Title, { className: "d-flex align-items-center w-100", children: p ? /* @__PURE__ */ i(N, { children: [
-      /* @__PURE__ */ e(
-        r,
-        {
-          variant: "link",
-          className: "p-0 me-2 text-dark",
-          onClick: () => x(!1),
-          "aria-label": "Back",
-          children: /* @__PURE__ */ e(M, { 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: () => x(!0),
-          "aria-label": "Notification Settings",
-          style: { boxShadow: "none" },
-          children: /* @__PURE__ */ e(H, { size: 20 })
-        }
-      )
-    ] }) }) }),
-    /* @__PURE__ */ e(d.Body, { className: "p-0 d-flex flex-column h-100", children: p ? /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(B, {}) }) : /* @__PURE__ */ i(N, { children: [
-      /* @__PURE__ */ i(
-        c,
-        {
-          variant: "tabs",
-          activeKey: n,
-          onSelect: (t) => C(t),
-          className: "px-3 pt-2 bg-light border-bottom",
-          children: [
-            /* @__PURE__ */ e(c.Item, { children: /* @__PURE__ */ i(c.Link, { eventKey: "inbox", className: "d-flex align-items-center", children: [
-              /* @__PURE__ */ e(I, { className: "me-2" }),
-              "Inbox"
-            ] }) }),
-            /* @__PURE__ */ e(c.Item, { children: /* @__PURE__ */ i(c.Link, { eventKey: "trash", className: "d-flex align-items-center", children: [
-              /* @__PURE__ */ e(b, { className: "me-2" }),
-              "Trash"
-            ] }) })
-          ]
-        }
-      ),
-      f.length > 0 && /* @__PURE__ */ e("div", { className: "d-flex justify-content-end align-items-center p-2 bg-light border-bottom px-3", children: n === "inbox" ? /* @__PURE__ */ i(
-        r,
-        {
-          variant: "link",
-          size: "sm",
-          className: "p-0 text-primary text-decoration-none d-flex align-items-center",
-          onClick: S,
-          children: [
-            /* @__PURE__ */ e(K, { 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: T,
-          children: [
-            /* @__PURE__ */ e(b, { className: "me-1", size: 16 }),
-            "Empty Trash"
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ e("div", { className: "flex-grow-1 overflow-auto bg-light pt-3", children: v ? /* @__PURE__ */ e("div", { className: "text-center py-5", children: /* @__PURE__ */ e(E, { animation: "border", variant: "primary" }) }) : f.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-5 text-muted", children: /* @__PURE__ */ e("p", { className: "mb-0", children: n === "inbox" ? "Your inbox is empty!" : "No deleted notifications." }) }) : /* @__PURE__ */ e("div", { className: "px-3", children: f.map((t) => {
-        const { title: a, body: s } = j(t), l = n === "inbox" && !t.isRead;
-        return /* @__PURE__ */ e(
-          "div",
-          {
-            className: `p-3 mb-2 rounded border shadow-sm ${l ? "bg-white border-primary-subtle" : "bg-white border-light"}`,
-            style: {
-              transition: "all 0.2s ease-in-out",
-              borderLeft: l ? "4px solid #0d6efd" : "1px solid #dee2e6"
-            },
-            children: /* @__PURE__ */ i("div", { className: "d-flex justify-content-between align-items-start", children: [
-              /* @__PURE__ */ i("div", { className: "pe-2 flex-grow-1", children: [
-                /* @__PURE__ */ e(
-                  "h6",
-                  {
-                    className: `mb-1 ${l ? "fw-bold text-dark" : "text-secondary fw-semibold"}`,
-                    style: { fontSize: "0.9rem", lineHeight: "1.25" },
-                    children: a
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "p",
-                  {
-                    className: "mb-2 text-muted",
-                    style: { fontSize: "0.8rem", color: "#6c757d", lineHeight: "1.3" },
-                    children: s
-                  }
-                ),
-                /* @__PURE__ */ e("span", { className: "text-muted d-block", style: { fontSize: "0.7rem" }, children: A(t.createdAt) })
-              ] }),
-              /* @__PURE__ */ i("div", { className: "d-flex align-items-center gap-2", children: [
-                l && /* @__PURE__ */ e(
-                  r,
+    notifications: a,
+    isLoading: f,
+    fetchNotifications: l,
+    markAsRead: o,
+    markAllAsRead: v,
+    emptyTrash: g,
+    deleteNotification: u
+  } = I(), [r, k] = p("inbox"), [h, x] = p(!1);
+  return y(() => {
+    i && l(r);
+  }, [i, r, l]), /* @__PURE__ */ t(
+    c,
+    {
+      show: i,
+      onHide: m,
+      placement: "end",
+      className: "text-dark",
+      children: [
+        /* @__PURE__ */ e(c.Header, { closeButton: !0, className: "border-bottom", children: /* @__PURE__ */ e(c.Title, { className: "d-flex align-items-center w-100", children: h ? /* @__PURE__ */ t(N, { children: [
+          /* @__PURE__ */ e(
+            d,
+            {
+              variant: "link",
+              className: "p-0 me-2 text-dark",
+              onClick: () => x(!1),
+              "aria-label": "Back",
+              children: /* @__PURE__ */ e(w, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ e("span", { children: "Settings" })
+        ] }) : /* @__PURE__ */ t("div", { className: "d-flex justify-content-between align-items-center w-100 me-3", children: [
+          /* @__PURE__ */ e("span", { children: "Notifications" }),
+          /* @__PURE__ */ e(
+            d,
+            {
+              variant: "link",
+              className: "p-0 text-secondary",
+              onClick: () => x(!0),
+              "aria-label": "Notification Settings",
+              style: { boxShadow: "none" },
+              children: /* @__PURE__ */ e(A, { size: 20 })
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ e(c.Body, { className: "p-0 d-flex flex-column h-100", children: h ? /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(T, {}) }) : /* @__PURE__ */ t(N, { children: [
+          /* @__PURE__ */ t(
+            s,
+            {
+              variant: "tabs",
+              activeKey: r,
+              onSelect: (n) => {
+                j(n) && k(n);
+              },
+              className: "px-3 pt-2 bg-light border-bottom",
+              children: [
+                /* @__PURE__ */ e(s.Item, { children: /* @__PURE__ */ t(
+                  s.Link,
                   {
-                    variant: "link",
-                    className: "p-1 text-primary border-0 d-flex align-items-center",
-                    onClick: () => w(t.id),
-                    title: "Mark as read",
-                    style: { boxShadow: "none" },
-                    children: /* @__PURE__ */ e(R, { size: 8, className: "text-primary" })
+                    eventKey: "inbox",
+                    className: "d-flex align-items-center",
+                    children: [
+                      /* @__PURE__ */ e(z, { className: "me-2" }),
+                      "Inbox"
+                    ]
                   }
-                ),
-                n === "inbox" && /* @__PURE__ */ e(
-                  r,
+                ) }),
+                /* @__PURE__ */ e(s.Item, { children: /* @__PURE__ */ t(
+                  s.Link,
                   {
-                    variant: "link",
-                    className: "p-1 text-secondary border-0 d-flex align-items-center",
-                    onClick: () => z(t.id),
-                    title: "Move to trash",
-                    style: { boxShadow: "none" },
-                    onMouseEnter: (h) => {
-                      const o = h.currentTarget.querySelector("svg");
-                      o && (o.style.fill = "#dc3545");
-                    },
-                    onMouseLeave: (h) => {
-                      const o = h.currentTarget.querySelector("svg");
-                      o && (o.style.fill = "currentColor");
-                    },
-                    children: /* @__PURE__ */ e(b, { size: 14, style: { transition: "fill 0.2s" } })
+                    eventKey: "trash",
+                    className: "d-flex align-items-center",
+                    children: [
+                      /* @__PURE__ */ e(b, { className: "me-2" }),
+                      "Trash"
+                    ]
                   }
-                )
-              ] })
-            ] })
-          },
-          t.id
-        );
-      }) }) })
-    ] }) })
-  ] });
+                ) })
+              ]
+            }
+          ),
+          a.length > 0 ? /* @__PURE__ */ e("div", { className: "d-flex justify-content-end align-items-center p-2 bg-light border-bottom px-3", children: r === "inbox" ? /* @__PURE__ */ t(
+            d,
+            {
+              variant: "link",
+              size: "sm",
+              className: "p-0 text-primary text-decoration-none d-flex align-items-center",
+              onClick: () => void v(),
+              children: [
+                /* @__PURE__ */ e(C, { className: "me-1", size: 18 }),
+                "Mark all as read"
+              ]
+            }
+          ) : /* @__PURE__ */ t(
+            d,
+            {
+              variant: "link",
+              size: "sm",
+              className: "p-0 text-danger text-decoration-none d-flex align-items-center",
+              onClick: () => void g(),
+              children: [
+                /* @__PURE__ */ e(b, { className: "me-1", size: 16 }),
+                "Empty Trash"
+              ]
+            }
+          ) }) : null,
+          /* @__PURE__ */ e("div", { className: "flex-grow-1 overflow-auto bg-light pt-3", children: /* @__PURE__ */ e(
+            B,
+            {
+              folder: r,
+              isLoading: f,
+              notifications: a,
+              onMarkAsRead: (n) => void o(n),
+              onDelete: (n) => void u(n)
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
 };
 export {
   G as NotificationDrawer

package/dist/Components/Notifications/NotificationSettings.js

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

package/dist/Components/Notifications/mutedEventTypes.js

@@ -1,5 +1,5 @@
-const c = [
-  { key: "review_assigned", label: "Review Assignments (Relectures)" },
+const o = [
+  { key: "review_assigned", label: "Review Assignments" },
   { key: "project_created", label: "Project Creations" },
   {
     key: "admin_alert",
@@ -7,16 +7,16 @@ const c = [
   }
 ], a = {
   admin_alert: ["system_alert"]
-}, n = (e) => [e, ...a[e] ?? []];
+}, r = (e) => [e, ...a[e] ?? []];
 function i(e, t) {
-  return n(t).some((s) => e.includes(s));
+  return r(t).some((s) => e.includes(s));
 }
-function o(e, t) {
-  const s = n(t), r = e.filter((l) => !s.includes(l));
-  return i(e, t) ? r : [...r, t];
+function c(e, t) {
+  const s = r(t), n = e.filter((l) => !s.includes(l));
+  return i(e, t) ? n : [...n, t];
 }
 export {
-  c as MUTABLE_EVENT_TYPES,
+  o as MUTABLE_EVENT_TYPES,
   i as isEventMuted,
-  o as toggleMuted
+  c as toggleMuted
 };

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

@@ -0,0 +1,7 @@
+import { NotificationItem } from '../../Context/notificationApi';
+export declare function renderTemplateText(template: string, variables: Record<string, unknown>): string;
+/** The title and body shown for a notification. */
+export declare function notificationTextOf(item: NotificationItem): {
+    title: string;
+    body: string;
+};

package/dist/Components/Notifications/notificationText.js

@@ -0,0 +1,38 @@
+const l = {
+  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."
+  },
+  admin_alert: {
+    title: "{{title}}",
+    body: "{{body}}"
+  }
+};
+function a(e, t) {
+  let i = e;
+  for (const [o, n] of Object.entries(t))
+    i = i.split(`{{${o}}}`).join(String(n));
+  return i;
+}
+function r(e) {
+  const t = l[e.templateKey] ?? {
+    title: "New Alert",
+    body: `Notification template: ${e.templateKey}`
+  };
+  return {
+    title: a(t.title, e.variables),
+    body: a(t.body, e.variables)
+  };
+}
+export {
+  r as notificationTextOf,
+  a as renderTemplateText
+};

package/dist/Components/Paginator/index.js

@@ -1,15 +1,15 @@
 import { jsxs as k, jsx as s } from "react/jsx-runtime";
 import { useMemo as p } from "react";
-import { Pagination as f } from "react-bootstrap";
+import { Pagination as l } from "react-bootstrap";
 const n = (m, i) => {
-  const l = [];
+  const f = [];
   for (let c = m; c <= i; c++)
-    l.push(c);
-  return l;
+    f.push(c);
+  return f;
 }, M = 5, v = ({
   currentPage: m,
   totalPages: i,
-  onPageChange: l
+  onPageChange: f
 }) => {
   const c = p(() => {
     if (m === 1 && i === 1)
@@ -21,59 +21,59 @@ const n = (m, i) => {
     let d, h;
     return m <= Math.ceil(M / 2) ? (d = 2, h = Math.min(M + 1, i - 1)) : m + Math.floor(M / 2) >= i ? (d = Math.max(i - M, 2), h = i - 1) : (d = m - Math.floor(M / 2), h = m + Math.floor(M / 2)), h = Math.min(h, i - 1), d = Math.max(d, 2), n(d, h);
   }, [m, i]);
-  return /* @__PURE__ */ k(f, { className: "d-flex justify-content-end", children: [
+  return /* @__PURE__ */ k(l, { className: "d-flex justify-content-end", children: [
     /* @__PURE__ */ s(
-      f.First,
+      l.First,
       {
-        onClick: () => l(1),
+        onClick: () => f(1),
         disabled: m === 1
       }
     ),
     /* @__PURE__ */ s(
-      f.Prev,
+      l.Prev,
       {
-        onClick: () => l(m - 1),
+        onClick: () => f(m - 1),
         disabled: m === 1
       }
     ),
     /* @__PURE__ */ s(
-      f.Item,
+      l.Item,
       {
         active: m === 1,
-        onClick: () => l(1),
+        onClick: () => f(1),
         children: "1"
       }
     ),
-    i > 2 && !c.includes(2) && /* @__PURE__ */ s(f.Ellipsis, {}),
+    i > 2 && !c.includes(2) && /* @__PURE__ */ s(l.Ellipsis, {}),
     c.map((d) => /* @__PURE__ */ s(
-      f.Item,
+      l.Item,
       {
         active: m === d,
-        onClick: () => l(d),
+        onClick: () => f(d),
         children: d
       },
       d
     )),
-    i > M && !c.includes(i - 1) && /* @__PURE__ */ s(f.Ellipsis, {}),
+    i > M && !c.includes(i - 1) && /* @__PURE__ */ s(l.Ellipsis, {}),
     i > 1 && /* @__PURE__ */ s(
-      f.Item,
+      l.Item,
       {
         active: m === i,
-        onClick: () => l(i),
+        onClick: () => f(i),
         children: i
       }
     ),
     /* @__PURE__ */ s(
-      f.Next,
+      l.Next,
       {
-        onClick: () => l(m + 1),
+        onClick: () => f(m + 1),
         disabled: m === i
       }
     ),
     /* @__PURE__ */ s(
-      f.Last,
+      l.Last,
       {
-        onClick: () => l(i),
+        onClick: () => f(i),
         disabled: m === i
       }
     )