@variamosple/variamos-components 0.2.5 → 0.3.0

package/dist/Components/Header/SubHeader.js

@@ -1,39 +1,27 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useMemo as w } from "react";
-import { Navbar as h, Container as g, Nav as d } from "react-bootstrap";
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { Navbar as l, Container as u, Nav as s } from "react-bootstrap";
+import { isAllowedFor as c } from "../../Common/isAllowedFor.js";
 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";
+import { useMenu as p } from "../../Context/MenuContext.js";
 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;
-      if (!((a = o == null ? void 0 : o.allowedRoles) != null && a.length) && !((c = o == null ? void 0 : o.allowedPermissions) != null && c.length))
-        return !0;
-      let i = !0;
-      return o.allowedRoles && (i = i && o.allowedRoles.some(
-        (e) => l.includes(e)
-      )), o.allowedPermissions && (i = i && o.allowedPermissions.some(
-        (e) => m.includes(e)
-      )), i;
-    }) : [];
-  }, [n, r]), f = (l) => () => {
-    p(l);
+import { useRouter as f } from "../../Context/RouterContext.js";
+import { useSession as b } from "../../Context/SessionContext.js";
+const j = () => {
+  const { navigate: i } = f(), { subMenu: r } = p(), { user: e } = b(), n = m(() => r ? r.filter((o) => c(o, e)) : [], [r, e]), a = (o) => () => {
+    i(o);
   };
-  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,
+  return n.length === 0 ? null : /* @__PURE__ */ t(l, { className: "py-1 shadow-sm bg-white", children: /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(s, { className: "d-flex justify-content-center w-100 gap-3", children: n.map((o) => /* @__PURE__ */ t(
+    s.Link,
     {
       as: "button",
       className: "btn btn-link p-0",
-      onClick: f(l.location),
-      children: l.title
+      onClick: a(o.location),
+      children: o.title
     },
-    l.location
-  )) }) }) }) : null;
+    o.location
+  )) }) }) });
 };
 export {
-  L as SubHeader
+  j as SubHeader
 };

package/dist/Components/Header/index.js

@@ -3,21 +3,21 @@ import { useState as N } from "react";
 import { Navbar as a, Container as k, Nav as n } from "react-bootstrap";
 import "../../Context/AnalyticsContext.js";
 import { useMenu as w } from "../../Context/MenuContext.js";
+import "../../Context/NotificationContext.js";
 import { useRouter as C } from "../../Context/RouterContext.js";
 import { useSession as S } from "../../Context/SessionContext.js";
-import "../../Context/NotificationContext.js";
-import { HeaderOptions as b } from "./HeaderOptions.js";
+import { NotificationBell as b } from "../Notifications/NotificationBell.js";
+import { NotificationDrawer as v } from "../Notifications/NotificationDrawer.js";
+import { HeaderOptions as x } from "./HeaderOptions.js";
 import { MenuItemComponent as m } from "./MenuItem.js";
-import { SubHeader as v } from "./SubHeader.js";
-import { NotificationBell as x } from "../Notifications/NotificationBell.js";
-import { NotificationDrawer as D } from "../Notifications/NotificationDrawer.js";
+import { SubHeader as D } from "./SubHeader.js";
 const E = ({
   logoUrl: s,
   logoAlt: l = "App logo",
   signInUrl: c,
   adminApiUrl: p
 }) => {
-  const { items: d } = w(), { navigate: f } = C(), { isAuthenticated: r, isLoading: h } = S(), [u, t] = N(!1);
+  const { items: d } = w(), { navigate: f } = C(), { isAuthenticated: r, isLoading: u } = S(), [h, t] = N(!1);
   return /* @__PURE__ */ o("header", { className: "sticky-top", children: [
     /* @__PURE__ */ e(a, { bg: "dark", variant: "dark", children: /* @__PURE__ */ o(k, { fluid: !0, children: [
       /* @__PURE__ */ e(a.Brand, { onClick: () => f("/"), children: /* @__PURE__ */ e(
@@ -31,12 +31,24 @@ const E = ({
       ) }),
       /* @__PURE__ */ e(n, { className: "me-auto", children: d.map((i) => /* @__PURE__ */ e(m, { ...i }, i.title)) }),
       /* @__PURE__ */ o(n, { className: "me-5 pe-5 align-items-center", children: [
-        r && /* @__PURE__ */ o(g, { children: [
-          /* @__PURE__ */ e(x, { onClick: () => t(!0), className: "me-2" }),
-          /* @__PURE__ */ e(D, { show: u, onClose: () => t(!1) })
-        ] }),
-        /* @__PURE__ */ e(b, { adminApiUrl: p }),
-        !h && !r && /* @__PURE__ */ e(
+        r ? /* @__PURE__ */ o(g, { children: [
+          /* @__PURE__ */ e(
+            b,
+            {
+              onClick: () => t(!0),
+              className: "me-2"
+            }
+          ),
+          /* @__PURE__ */ e(
+            v,
+            {
+              show: h,
+              onClose: () => t(!1)
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ e(x, { adminApiUrl: p }),
+        !u && !r && /* @__PURE__ */ e(
           m,
           {
             title: "Sign In",
@@ -46,7 +58,7 @@ const E = ({
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ e(v, {})
+    /* @__PURE__ */ e(D, {})
   ] });
 };
 export {

package/dist/Components/Header/submitBugReport.d.ts

@@ -0,0 +1,15 @@
+export interface BugReport {
+    title: string;
+    description: string;
+    category: string;
+}
+export interface BugReportSender {
+    adminApiUrl: string;
+    reporterEmail?: string;
+    authToken?: string | null;
+    fetchImpl?: typeof fetch;
+}
+/** The bug route, next to the versioned API: ".../v1" and ".../" give "/bugs". */
+export declare const bugReportUrl: (adminApiUrl: string) => string;
+/** Sends the report; resolves to null once sent, or to the message to show. */
+export declare function submitBugReport(report: BugReport, file: File | undefined, { adminApiUrl, reporterEmail, authToken, fetchImpl }: BugReportSender): Promise<string | null>;

package/dist/Components/Header/submitBugReport.js

@@ -0,0 +1,23 @@
+import { fieldOf as p } from "../../Common/fieldOf.js";
+const c = "Failed to submit bug. Please try again.", u = (t) => `${t.replace(/\/v1$/, "").replace(/\/$/, "")}/bugs`;
+async function f(t, a, { adminApiUrl: d, reporterEmail: n, authToken: i, fetchImpl: l = fetch }) {
+  const e = new FormData();
+  e.append("title", t.title), e.append("description", t.description), e.append("priority", "medium"), e.append("category", t.category), n && e.append("reporterEmail", n), a && e.append("file", a);
+  try {
+    const r = await l(u(d), {
+      method: "POST",
+      headers: i ? { Authorization: `Bearer ${i}` } : {},
+      body: e,
+      credentials: "include"
+    }), s = await r.json();
+    if (r.ok && !p(s, "errorCode")) return null;
+    const o = p(s, "message");
+    return typeof o == "string" && o !== "" ? o : c;
+  } catch (r) {
+    return console.error(r), c;
+  }
+}
+export {
+  u as bugReportUrl,
+  f as submitBugReport
+};

package/dist/Components/NotAuthorized/index.js

@@ -2,9 +2,9 @@ import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { Container as i, Button as n } from "react-bootstrap";
 import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
+import "../../Context/NotificationContext.js";
 import { useRouter as a } from "../../Context/RouterContext.js";
 import "../../Context/SessionContext.js";
-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: [

package/dist/Components/Notifications/NotificationBell.js

@@ -1,32 +1,32 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Button as a, Badge as n } from "react-bootstrap";
+import { Button as n, Badge as a } from "react-bootstrap";
 import { Bell as l } from "react-bootstrap-icons";
 import { useNotifications as s } from "../../Context/NotificationContext.js";
 const f = ({
-  onClick: o,
-  className: i = ""
+  onClick: i,
+  className: o = ""
 }) => {
   const { unreadCount: t } = s();
   return /* @__PURE__ */ r(
-    a,
+    n,
     {
       variant: "link",
-      onClick: o,
-      className: `position-relative p-2 text-light ${i}`,
+      onClick: i,
+      className: `position-relative p-2 text-light ${o}`,
       "aria-label": "Notifications",
       style: { boxShadow: "none" },
       children: [
         /* @__PURE__ */ e(l, { size: 22 }),
-        t > 0 && /* @__PURE__ */ e(
-          n,
+        t > 0 ? /* @__PURE__ */ e(
+          a,
           {
             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
+            children: t > 99 ? "99+" : String(t)
           }
-        )
+        ) : null
       ]
     }
   );

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { NotificationItem } from '../../Context/notificationApi';
+export interface NotificationCardProps {
+    item: NotificationItem;
+    inInbox: boolean;
+    onMarkAsRead: (id: string) => void;
+    onDelete: (id: string) => void;
+}
+export declare const NotificationCard: FC<NotificationCardProps>;

package/dist/Components/Notifications/NotificationCard.js

@@ -0,0 +1,81 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Button as n } from "react-bootstrap";
+import { CircleFill as h, Trash as u } from "react-bootstrap-icons";
+import { notificationTextOf as g } from "./notificationText.js";
+const x = (t) => new Date(t).toLocaleDateString(void 0, {
+  hour: "2-digit",
+  minute: "2-digit"
+}), a = { boxShadow: "none" }, v = ({
+  item: t,
+  inInbox: o,
+  onMarkAsRead: d,
+  onDelete: c
+}) => {
+  const { title: m, body: f } = g(t), r = o && !t.isRead;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `p-3 mb-2 rounded border shadow-sm ${r ? "bg-white border-primary-subtle" : "bg-white border-light"}`,
+      style: {
+        transition: "all 0.2s ease-in-out",
+        borderLeft: r ? "4px solid #0d6efd" : "1px solid #dee2e6"
+      },
+      children: /* @__PURE__ */ s("div", { className: "d-flex justify-content-between align-items-start", children: [
+        /* @__PURE__ */ s("div", { className: "pe-2 flex-grow-1", children: [
+          /* @__PURE__ */ e(
+            "h6",
+            {
+              className: `mb-1 ${r ? "fw-bold text-dark" : "text-secondary fw-semibold"}`,
+              style: { fontSize: "0.9rem", lineHeight: "1.25" },
+              children: m
+            }
+          ),
+          /* @__PURE__ */ e(
+            "p",
+            {
+              className: "mb-2 text-muted",
+              style: { fontSize: "0.8rem", color: "#6c757d", lineHeight: "1.3" },
+              children: f
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "text-muted d-block", style: { fontSize: "0.7rem" }, children: x(t.createdAt) })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "d-flex align-items-center gap-2", children: [
+          r ? /* @__PURE__ */ e(
+            n,
+            {
+              variant: "link",
+              className: "p-1 text-primary border-0 d-flex align-items-center",
+              onClick: () => d(t.id),
+              title: "Mark as read",
+              style: a,
+              children: /* @__PURE__ */ e(h, { size: 8, className: "text-primary" })
+            }
+          ) : null,
+          o ? /* @__PURE__ */ e(
+            n,
+            {
+              variant: "link",
+              className: "p-1 text-secondary border-0 d-flex align-items-center",
+              onClick: () => c(t.id),
+              title: "Move to trash",
+              style: a,
+              onMouseEnter: (l) => {
+                const i = l.currentTarget.querySelector("svg");
+                i && (i.style.fill = "#dc3545");
+              },
+              onMouseLeave: (l) => {
+                const i = l.currentTarget.querySelector("svg");
+                i && (i.style.fill = "currentColor");
+              },
+              children: /* @__PURE__ */ e(u, { size: 14, style: { transition: "fill 0.2s" } })
+            }
+          ) : null
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  v as NotificationCard
+};