fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

package/packages/match-quiz-play/src/components/Shared/Leaderboard/LeaderboardComponent.js

@@ -0,0 +1,220 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Typography as i, Box as b, Sheet as $, Table as B, Avatar as T } from "@mui/joy";
+import z from "../../../../../../node_modules/@mui/icons-material/esm/Person.js";
+import { useInternalTheme as k, useColors as N, useFontFamily as w, useCornerRadius as R, useSpacingScale as E, isExtraSmall as L } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as m } from "../../../../../common/src/functions/helpers.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import M from "../../../../../common/src/components/Spinner.js";
+import "react";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import { useTranslation as U } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ee = ({
+  leaderboard: c,
+  userRankings: x,
+  matchQuiz: P,
+  showHeading: A,
+  isSplitVariant: g
+}) => {
+  var v;
+  const { t: n } = U(), F = k(), h = N(), a = ((v = P.branding) == null ? void 0 : v.colors) || null, u = (a == null ? void 0 : a.primaryColor) || h.palette.primary.plainColor, r = (a == null ? void 0 : a.contentColor) || h.textColor, l = w().primary, W = w().secondary, I = R(), p = E(), C = L(), d = h.surfaceVariant, y = F.colorSchemes.light.palette.primary.onPrimary, j = h.outlineEnabledBorder, o = {
+    leaderboardContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: p.md
+    },
+    leaderboardTitle: {
+      fontFamily: l,
+      fontWeight: 700,
+      fontSize: "1.25em",
+      color: r,
+      textAlign: "center",
+      marginBottom: p.sm
+    },
+    tableContainer: {
+      overflowX: "auto",
+      borderRadius: I.md,
+      border: `1px solid ${j}`
+    },
+    table: {
+      backgroundColor: d,
+      "--TableCell-paddingX": "0.5rem",
+      "--TableCell-paddingY": "0.375rem",
+      cursor: "default",
+      "& > tbody > tr:hover": {
+        backgroundColor: "transparent"
+      },
+      "& > thead > tr > th": {
+        backgroundColor: `rgba(${m(d)}, 0.8)`,
+        color: r,
+        fontFamily: l,
+        fontWeight: 600,
+        fontSize: "0.875em",
+        textAlign: "center",
+        borderBottom: `1px solid ${j}`
+      }
+    },
+    headerCellPosition: {
+      backgroundColor: `rgba(${m(d)}, 0.8)`,
+      color: r,
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "center",
+      padding: "0.375rem 0.5rem",
+      width: "10%"
+    },
+    headerCellName: {
+      backgroundColor: `rgba(${m(d)}, 0.8)`,
+      color: r,
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "left",
+      padding: "0.375rem 0.5rem",
+      width: "80%"
+    },
+    headerCellPoints: {
+      backgroundColor: `rgba(${m(d)}, 0.8)`,
+      color: r,
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "center",
+      padding: "0.375rem 0.5rem",
+      width: "10%"
+    },
+    tableCellPosition: {
+      padding: "0.375rem 0.5rem",
+      width: "10%",
+      textAlign: "center"
+    },
+    tableCellName: {
+      padding: "0.375rem 0.5rem",
+      width: "80%"
+    },
+    tableCellPoints: {
+      padding: "0.375rem 0.5rem",
+      width: "10%",
+      textAlign: "center"
+    },
+    userRow: {
+      backgroundColor: `rgba(${m(u)}, 0.1)`
+    },
+    nameCell: {
+      display: "flex",
+      alignItems: "center",
+      gap: p.sm
+    },
+    leaderboardAvatar: {
+      width: "32px",
+      height: "32px",
+      fontSize: "0.875em",
+      fontWeight: 600,
+      backgroundColor: u,
+      color: y
+    },
+    nameText: {
+      fontFamily: l,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      color: r,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    positionText: {
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: r
+    },
+    pointsText: {
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: r
+    },
+    avatarIcon: {
+      fontSize: "1em",
+      color: y
+    },
+    noLeaderboardText: {
+      fontFamily: W,
+      fontSize: "1.25em",
+      color: r,
+      textAlign: "center",
+      marginY: p.md
+    }
+  };
+  if (!c || !x)
+    return /* @__PURE__ */ e.jsx(M, { my: 10 });
+  if (c.length === 0)
+    return /* @__PURE__ */ e.jsx(i, { level: "body-lg", sx: o.noLeaderboardText, children: n("matchQuiz.leaderboard.noLeaderboardAvailable") });
+  const s = x && x.length > 0 ? x[0] : null, f = s == null ? void 0 : s.position, Q = f && c.some((t) => t.position === f);
+  return /* @__PURE__ */ e.jsxs(b, { sx: o.leaderboardContainer, children: [
+    A && /* @__PURE__ */ e.jsx(i, { level: "h4", sx: o.leaderboardTitle, children: n("matchQuiz.leaderboard.title") }),
+    /* @__PURE__ */ e.jsx($, { sx: o.tableContainer, children: /* @__PURE__ */ e.jsxs(
+      B,
+      {
+        variant: "outlined",
+        hoverRow: !1,
+        borderAxis: "bothBetween",
+        size: "sm",
+        sx: o.table,
+        children: [
+          /* @__PURE__ */ e.jsx("thead", { children: /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("th", { style: o.headerCellPosition, children: C || g ? "" : n("matchQuiz.leaderboard.position") }),
+            /* @__PURE__ */ e.jsx("th", { style: o.headerCellName, children: n("matchQuiz.leaderboard.name") }),
+            /* @__PURE__ */ e.jsx("th", { style: o.headerCellPoints, children: C || g ? "🎯" : n("matchQuiz.leaderboard.points") })
+          ] }) }),
+          /* @__PURE__ */ e.jsxs("tbody", { children: [
+            s && !Q && /* @__PURE__ */ e.jsxs("tr", { style: o.userRow, children: [
+              /* @__PURE__ */ e.jsx("td", { style: o.tableCellPosition, children: /* @__PURE__ */ e.jsxs(i, { sx: o.positionText, children: [
+                "#",
+                s.position
+              ] }) }),
+              /* @__PURE__ */ e.jsx("td", { style: o.tableCellName, children: /* @__PURE__ */ e.jsxs(b, { sx: o.nameCell, children: [
+                /* @__PURE__ */ e.jsx(T, { sx: o.leaderboardAvatar, children: /* @__PURE__ */ e.jsx(z, { sx: o.avatarIcon }) }),
+                /* @__PURE__ */ e.jsx(i, { sx: o.nameText, children: n("matchQuiz.leaderboard.you") })
+              ] }) }),
+              /* @__PURE__ */ e.jsx("td", { style: o.tableCellPoints, children: /* @__PURE__ */ e.jsx(i, { sx: o.pointsText, children: s.points }) })
+            ] }),
+            c.map((t) => {
+              const S = f === t.position;
+              return /* @__PURE__ */ e.jsxs(
+                "tr",
+                {
+                  style: S ? o.userRow : void 0,
+                  children: [
+                    /* @__PURE__ */ e.jsx("td", { style: o.tableCellPosition, children: /* @__PURE__ */ e.jsxs(i, { sx: o.positionText, children: [
+                      "#",
+                      t.position
+                    ] }) }),
+                    /* @__PURE__ */ e.jsx("td", { style: o.tableCellName, children: /* @__PURE__ */ e.jsxs(b, { sx: o.nameCell, children: [
+                      /* @__PURE__ */ e.jsx(
+                        T,
+                        {
+                          src: t.profileModel.avatar || void 0,
+                          sx: o.leaderboardAvatar,
+                          children: t.profileModel.avatar ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(z, { sx: o.avatarIcon })
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsx(i, { sx: o.nameText, children: S ? n("matchQuiz.leaderboard.you") : t.profileModel.nickname || t.profileModel.name })
+                    ] }) }),
+                    /* @__PURE__ */ e.jsx("td", { style: o.tableCellPoints, children: /* @__PURE__ */ e.jsx(i, { sx: o.pointsText, children: t.points }) })
+                  ]
+                },
+                t.profileId
+              );
+            })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  ee as default
+};

package/packages/match-quiz-play/src/components/Shared/Leaderboard/RoundedPagination.js

@@ -0,0 +1,207 @@
+import { j as o } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as M, IconButton as u, Button as B } from "@mui/joy";
+import { useInternalTheme as S } from "../../../../../common/src/functions/theme.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import H from "../../../../../../node_modules/lucide-react/dist/esm/icons/chevrons-left.js";
+import I from "../../../../../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import P from "../../../../../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import D from "../../../../../../node_modules/lucide-react/dist/esm/icons/chevrons-right.js";
+const Y = ({
+  count: e = 10,
+  page: i = 1,
+  onChange: C,
+  siblingCount: b = 1,
+  boundaryCount: s = 1,
+  showFirstButton: z = !0,
+  showLastButton: R = !0,
+  size: h = "md",
+  disabled: p = !1,
+  isOverlayVariant: g = !1
+}) => {
+  const k = S(), x = (r) => {
+    C && r >= 1 && r <= e && C(r);
+  }, j = (r, t) => {
+    const l = [];
+    for (let n = r; n <= t; n++) l.push(n);
+    return l;
+  }, W = (() => {
+    if (e <= 0) return [];
+    const r = j(1, Math.min(s, e)), t = j(
+      Math.max(e - s + 1, s + 1),
+      e
+    ), l = Math.max(s + 1, i - b), n = Math.min(e - s, i + b), c = [...r];
+    if (l > s + 1 && c.push("ellipsis-start"), l <= n)
+      for (let d = l; d <= n; d++)
+        c.push(d);
+    n < e - s && c.push("ellipsis-end");
+    for (const d of t)
+      c.includes(d) || c.push(d);
+    return c;
+  })(), a = h === "sm" ? "sm" : h === "lg" ? "lg" : "md", m = h === "sm" ? 16 : h === "lg" ? 24 : 20, v = (r = !1) => {
+    if (!g)
+      return {
+        borderRadius: "8px",
+        minWidth: "32px",
+        minHeight: "32px",
+        fontWeight: r ? 600 : 400
+      };
+    const t = k.colorSchemes.dark;
+    return {
+      borderRadius: "8px",
+      minWidth: "32px",
+      minHeight: "32px",
+      fontWeight: r ? 600 : 400,
+      backgroundColor: r ? t.palette.neutral.solidBg : "transparent",
+      color: r ? t.palette.neutral.solidColor : t.textColor,
+      border: "none",
+      "&:hover": {
+        backgroundColor: t.palette.neutral.solidBg,
+        color: r ? t.palette.neutral.solidColor : t.textColor
+      },
+      "&:active": {
+        backgroundColor: t.palette.neutral.plainActiveBg
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent",
+        color: t.textDisabled,
+        opacity: 0.5
+      }
+    };
+  }, f = () => {
+    if (!g)
+      return {
+        borderRadius: "8px",
+        minWidth: "32px",
+        minHeight: "32px"
+      };
+    const r = k.colorSchemes.dark;
+    return {
+      borderRadius: "8px",
+      minWidth: "32px",
+      minHeight: "32px",
+      backgroundColor: "transparent",
+      color: r.textColor,
+      border: "none",
+      "&:hover": {
+        backgroundColor: r.palette.neutral.solidBg,
+        color: r.textColor
+      },
+      "&:active": {
+        backgroundColor: r.palette.neutral.plainActiveBg
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent",
+        color: r.textDisabled,
+        opacity: 0.5
+      }
+    };
+  };
+  return /* @__PURE__ */ o.jsxs(
+    M,
+    {
+      sx: {
+        display: "flex",
+        gap: 0.5,
+        alignItems: "center",
+        flexWrap: "wrap"
+      },
+      children: [
+        z && /* @__PURE__ */ o.jsx(
+          u,
+          {
+            size: a,
+            variant: "plain",
+            color: "neutral",
+            onClick: () => x(1),
+            disabled: p || i === 1,
+            sx: f(),
+            children: /* @__PURE__ */ o.jsx(H, { size: m })
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          u,
+          {
+            size: a,
+            variant: "plain",
+            color: "neutral",
+            onClick: () => x(i - 1),
+            disabled: p || i === 1,
+            sx: f(),
+            children: /* @__PURE__ */ o.jsx(I, { size: m })
+          }
+        ),
+        W.map((r, t) => {
+          if (typeof r == "string" && r.startsWith("ellipsis"))
+            return /* @__PURE__ */ o.jsx(
+              B,
+              {
+                size: a,
+                variant: "plain",
+                color: "neutral",
+                disabled: !0,
+                sx: {
+                  ...v(!1),
+                  cursor: "default",
+                  "&.Mui-disabled": g ? {
+                    backgroundColor: "transparent",
+                    color: k.colorSchemes.dark.textDisabled,
+                    opacity: 0.5
+                  } : {
+                    opacity: 1,
+                    color: "text.secondary"
+                  }
+                },
+                children: "..."
+              },
+              `${r}-${t}`
+            );
+          const l = r === i;
+          return /* @__PURE__ */ o.jsx(
+            B,
+            {
+              size: a,
+              variant: l ? "solid" : "plain",
+              color: "neutral",
+              onClick: () => x(r),
+              disabled: p,
+              sx: v(l),
+              children: r
+            },
+            r
+          );
+        }),
+        /* @__PURE__ */ o.jsx(
+          u,
+          {
+            size: a,
+            variant: "plain",
+            color: "neutral",
+            onClick: () => x(i + 1),
+            disabled: p || i === e,
+            sx: f(),
+            children: /* @__PURE__ */ o.jsx(P, { size: m })
+          }
+        ),
+        R && /* @__PURE__ */ o.jsx(
+          u,
+          {
+            size: a,
+            variant: "plain",
+            color: "neutral",
+            onClick: () => x(e),
+            disabled: p || i === e,
+            sx: f(),
+            children: /* @__PURE__ */ o.jsx(D, { size: m })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Y as default
+};

package/packages/match-quiz-play/src/components/Shared/MainCard.js

@@ -0,0 +1,34 @@
+import { j as m } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n } from "@mui/joy";
+import { isMobile as a, useCornerRadius as p, useColors as o, useBorderSize as u } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const R = ({
+  children: r,
+  brandingBorderColor: e
+}) => {
+  const i = a(), s = p().md, d = e || o().secondaryContainer, t = u().size + " solid " + d;
+  return /* @__PURE__ */ m.jsx(
+    n,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: i ? "column" : "row",
+        width: "100%",
+        borderRadius: s,
+        boxShadow: "md",
+        border: t,
+        overflow: "hidden",
+        background: o().surface,
+        minHeight: "250px"
+      },
+      children: r
+    }
+  );
+};
+export {
+  R as default
+};

package/packages/match-quiz-play/src/components/Shared/Notification.js

@@ -0,0 +1,67 @@
+import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Snackbar as l, Box as n, Typography as o } from "@mui/joy";
+import a from "../../../../../node_modules/@mui/icons-material/esm/CheckCircle.js";
+import m from "../../../../../node_modules/@mui/icons-material/esm/Error.js";
+import { useCornerRadius as p, useFontFamily as x } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const z = ({
+  notification: r,
+  onClose: s
+}) => {
+  const t = p(), i = x();
+  return r.open ? /* @__PURE__ */ e.jsx(
+    l,
+    {
+      open: r.open,
+      onClose: s,
+      autoHideDuration: r.variant === "error" ? 5e3 : 3e3,
+      anchorOrigin: { vertical: "top", horizontal: "center" },
+      color: r.variant === "success" ? "success" : "danger",
+      variant: "soft",
+      startDecorator: r.variant === "success" ? /* @__PURE__ */ e.jsx(a, {}) : /* @__PURE__ */ e.jsx(m, {}),
+      sx: {
+        borderRadius: t.sm,
+        fontFamily: i.secondary,
+        minWidth: "300px",
+        maxWidth: "400px",
+        zIndex: 9999,
+        position: "fixed"
+      },
+      children: /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+        r.title && /* @__PURE__ */ e.jsx(
+          o,
+          {
+            level: "title-md",
+            sx: {
+              fontWeight: 600,
+              fontSize: "16px",
+              lineHeight: 1.2,
+              color: "inherit"
+            },
+            children: r.title
+          }
+        ),
+        r.message && /* @__PURE__ */ e.jsx(
+          o,
+          {
+            level: "body-sm",
+            sx: {
+              fontSize: "14px",
+              lineHeight: 1.3,
+              color: "inherit",
+              opacity: 0.9
+            },
+            children: r.message
+          }
+        )
+      ] })
+    }
+  ) : null;
+};
+export {
+  z as default
+};

package/packages/match-quiz-play/src/components/Shared/PresentedBy.js

@@ -0,0 +1,118 @@
+import { j as n } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as t, Typography as a } from "@mui/joy";
+import { useFontFamily as s, isMobile as d } from "../../../../common/src/functions/theme.js";
+import { getBrandingClickUrl as g } from "../../../../common/src/functions/helpers.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const z = (e) => {
+  const l = s().secondary, x = d(), c = e.flexDirection || "column", i = g(e.primaryUrl, e.secondaryUrl, "logo");
+  if (!e.brandingLogo)
+    return null;
+  const m = () => {
+    i && window.open(i, "_blank", "noopener,noreferrer");
+  }, o = /* @__PURE__ */ n.jsx(
+    "img",
+    {
+      src: e.brandingLogo,
+      alt: "branding-logo",
+      style: {
+        maxHeight: "50px",
+        maxWidth: "100px"
+      }
+    }
+  ), r = i ? typeof window > "u" ? /* @__PURE__ */ n.jsx(
+    t,
+    {
+      component: "a",
+      href: i,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        cursor: "pointer",
+        textDecoration: "none",
+        display: "inline-flex"
+      },
+      children: o
+    }
+  ) : /* @__PURE__ */ n.jsx(
+    t,
+    {
+      onClick: m,
+      sx: {
+        cursor: "pointer",
+        display: "inline-flex"
+      },
+      children: o
+    }
+  ) : o;
+  return e.isCentered || x ? /* @__PURE__ */ n.jsxs(
+    t,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: c,
+        gap: "8px",
+        alignItems: "center",
+        minWidth: "180px",
+        fontSize: "1em",
+        zIndex: 1
+      },
+      children: [
+        e.label && /* @__PURE__ */ n.jsx(
+          a,
+          {
+            level: "body-sm",
+            sx: {
+              fontWeight: 400,
+              lineHeight: "166%",
+              letterSpacing: "0.4px",
+              fontSize: "1em",
+              color: e.textColor,
+              textAlign: "right",
+              fontFamily: l
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ n.jsxs(
+    t,
+    {
+      sx: {
+        minWidth: "180px",
+        display: "flex",
+        gap: "8px",
+        alignItems: "center",
+        zIndex: 10,
+        fontSize: "1em"
+      },
+      children: [
+        e.label && /* @__PURE__ */ n.jsx(
+          a,
+          {
+            level: "body-sm",
+            sx: {
+              fontWeight: 400,
+              lineHeight: "166%",
+              letterSpacing: "0.4px",
+              textAlign: "right",
+              fontSize: "1em",
+              color: e.textColor,
+              fontFamily: l
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  );
+};
+export {
+  z as default
+};