fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

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

@@ -1,220 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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
-};