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

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersFixture.js

@@ -1,79 +0,0 @@
-import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Box as i, Typography as S } from "@mui/joy";
-import { useColors as d, isExtraSmall as f, useCornerRadius as C, useFontFamily as h, useSpacingScale as E } 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 { useConstantContext as P } from "../../../../../../common/src/hooks/useConstantContext.js";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import R from "./PlayersSelector.js";
-import { createStyles as F } from "./PlayersFixture.styles.js";
-import p from "../PointsDisplay/PointsDisplay.js";
-import { MatchQuizConstantsContext as T } from "../../../../providers/ConstantsProvider.js";
-import { useTranslation as L } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const v = (t) => {
-  const { t: r } = L(), a = d(), s = f(), m = C(), o = h(), c = E(), { points: x } = P(T), l = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : s, u = t.showPoints === void 0, n = F({
-    spacingScale: c,
-    borderRadius: m,
-    fontFamilyPrimary: o.primary,
-    fontFamilySecondary: o.secondary,
-    textPrimary: a.textPrimary,
-    textSecondary: a.textSecondary,
-    isExtraSmall: l
-  }), y = () => {
-    switch (t.market) {
-      case "PLAYER_SCORE":
-        return r("matchQuiz.fixtures.playerScoreFixtureTitle");
-      case "PLAYER_YELLOW_CARD":
-        return r("matchQuiz.fixtures.playerYellowCardFixtureTitle");
-      case "PLAYER_RED_CARD":
-        return r("matchQuiz.fixtures.playerRedCardFixtureTitle");
-      case "PLAYER_SCORE_FIRST_GOAL":
-        return r("matchQuiz.fixtures.playerScoreFirstGoalFixtureTitle");
-      case "PLAYER_SCORE_HATTRICK":
-        return r("matchQuiz.fixtures.playerScoreHattrickFixtureTitle");
-      case "PLAYER_SCORE_TWICE":
-        return r("matchQuiz.fixtures.playerScoreTwiceFixtureTitle");
-    }
-  };
-  return /* @__PURE__ */ e.jsxs(i, { sx: n.container, children: [
-    /* @__PURE__ */ e.jsxs(
-      i,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          width: "100%"
-        },
-        children: [
-          l ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(i, { sx: { flex: 1 } }),
-          /* @__PURE__ */ e.jsx(S, { level: "h3", sx: n.title, children: y() }),
-          /* @__PURE__ */ e.jsx(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: u && x.length > 0 && /* @__PURE__ */ e.jsx(
-            p,
-            {
-              market: t.market,
-              brandingPrimaryColor: t.brandingPrimaryColor,
-              isSplitVariant: t.isSplitVariant
-            }
-          ) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      R,
-      {
-        matchModel: t.matchModel,
-        onPlayerSelection: t.onPlayerSelection,
-        brandingPrimaryColor: t.brandingPrimaryColor,
-        prediction: t.prediction,
-        isSplitVariant: t.isSplitVariant,
-        useExtraSmallLayout: t.useExtraSmallLayout
-      }
-    )
-  ] });
-};
-export {
-  v as default
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersFixture.styles.js

@@ -1,29 +0,0 @@
-import { isMobile as e } 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 "../../../../../../../node_modules/react/jsx-runtime.js";
-import "@mui/joy";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-const p = (t) => {
-  const i = e();
-  return {
-    container: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center"
-    },
-    title: {
-      fontFamily: t.fontFamilyPrimary,
-      fontWeight: 600,
-      fontSize: i ? "1.125em" : "1.25em",
-      lineHeight: 1.2,
-      color: t.textPrimary,
-      textAlign: t.isExtraSmall ? "left" : "center"
-    }
-  };
-};
-export {
-  p as createStyles
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersSelector.js

@@ -1,213 +0,0 @@
-import { j as o } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { memo as N, useState as d } from "react";
-import { Box as n, useTheme as E, Tabs as z, TabList as R, Tab as H, TabPanel as Q, Typography as _, FormControl as p, Checkbox as v } from "@mui/joy";
-import D from "../../../../../../../node_modules/@mui/icons-material/esm/PersonOutline.js";
-import { useColors as W, useCornerRadius as K, useFontFamily as V, useSpacingScale as $, isMobile as J, isExtraSmall 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 { useConstantContext as X } from "../../../../../../common/src/hooks/useConstantContext.js";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import { createStyles as Y } from "./PlayersSelector.styles.js";
-import { MatchQuizConstantsContext as Z } from "../../../../providers/ConstantsProvider.js";
-import { useTranslation as q } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const w = N(({ player: t, isSelected: r, styles: i, handlePlayerSelection: m }) => {
-  var h;
-  return /* @__PURE__ */ o.jsx(
-    n,
-    {
-      sx: {
-        ...i.playerAvatar,
-        ...r ? i.selectedPlayerAvatar : {}
-      },
-      onClick: () => m(t.id),
-      title: t.name,
-      children: (h = t.assets) != null && h.headshot ? /* @__PURE__ */ o.jsx(
-        "img",
-        {
-          src: t.assets.headshot,
-          alt: t.name,
-          style: {
-            width: "100%",
-            height: "100%",
-            objectFit: "cover"
-          }
-        }
-      ) : /* @__PURE__ */ o.jsx(
-        D,
-        {
-          sx: {
-            ...i.playerAvatarIcon,
-            ...r ? i.selectedPlayerAvatarIcon : {}
-          }
-        }
-      )
-    }
-  );
-});
-w.displayName = "PlayerAvatar";
-const xe = (t) => {
-  const r = W(), i = K(), m = V(), h = $(), F = J(), M = U(), x = E(), { t: f } = q(), { squads: S } = X(Z), T = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : M, [k, g] = d(t.prediction), [G, u] = d(t.prediction === "OWN_GOAL"), [A, b] = d(t.prediction === null), [c, y] = d("home"), [j, B] = d(0), a = Y({
-    spacingScale: h,
-    borderRadius: i,
-    fontFamilyPrimary: m.primary,
-    fontFamilySecondary: m.secondary,
-    textPrimary: r.textPrimary,
-    textSecondary: r.textSecondary,
-    neutralSoftBg: r.palette.neutral.softBg,
-    neutralOutlinedBorder: r.palette.neutral.outlinedBorder,
-    neutralPlainHoverBg: r.palette.neutral.plainHoverBg,
-    primary: t.brandingPrimaryColor || r.palette.primary.plainColor,
-    onPrimary: r.palette.primary.onPrimary,
-    isMobile: F,
-    isExtraSmall: T,
-    isSplitVariant: t.isSplitVariant || !1
-  }), C = (e) => {
-    u(!1), b(!1), g(e), t.onPlayerSelection(e);
-  }, I = (e) => {
-    e ? (g(null), b(!1), u(!0), t.onPlayerSelection("OWN_GOAL")) : (u(!1), t.onPlayerSelection(null));
-  }, O = (e) => {
-    e ? (g(null), u(!1), b(!0), t.onPlayerSelection(null)) : (b(!1), t.onPlayerSelection(null));
-  }, L = () => {
-    const e = c === "home" ? S.get(t.matchModel.homeTeam.id) : S.get(t.matchModel.awayTeam.id);
-    switch (j) {
-      case 0:
-        return (e == null ? void 0 : e.filter((l) => l.position === "forward")) || [];
-      case 1:
-        return (e == null ? void 0 : e.filter((l) => l.position === "midfielder")) || [];
-      case 2:
-        return (e == null ? void 0 : e.filter((l) => l.position === "defender")) || [];
-      case 3:
-        return (e == null ? void 0 : e.filter((l) => l.position === "keeper")) || [];
-      default:
-        return [];
-    }
-  }, P = ["attackers", "midfielders", "defenders", "goalkeepers"];
-  return /* @__PURE__ */ o.jsxs(n, { sx: a.container, children: [
-    /* @__PURE__ */ o.jsx(n, { sx: a.teamSelection, children: /* @__PURE__ */ o.jsxs(n, { sx: a.badgesRow, children: [
-      /* @__PURE__ */ o.jsx(
-        n,
-        {
-          sx: {
-            ...a.badge,
-            ...c === "home" ? a.badgeActive : {}
-          },
-          role: "button",
-          "aria-pressed": c === "home",
-          tabIndex: 0,
-          onClick: () => y("home"),
-          onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === " ") && y("home");
-          },
-          children: t.matchModel.homeTeam.name
-        }
-      ),
-      /* @__PURE__ */ o.jsx(
-        n,
-        {
-          sx: {
-            ...a.badge,
-            ...c === "away" ? a.badgeActive : {}
-          },
-          role: "button",
-          "aria-pressed": c === "away",
-          tabIndex: 0,
-          onClick: () => y("away"),
-          onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === " ") && y("away");
-          },
-          children: t.matchModel.awayTeam.name
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ o.jsx(n, { sx: a.tabsContainer, children: /* @__PURE__ */ o.jsxs(
-      z,
-      {
-        value: j,
-        onChange: (e, l) => B(l),
-        sx: a.tabs,
-        children: [
-          /* @__PURE__ */ o.jsx(R, { sx: a.tabList, children: P.map((e, l) => /* @__PURE__ */ o.jsx(H, { value: l, sx: a.tab, children: f(`matchQuiz.fixtures.${e}`) }, e)) }),
-          P.map((e, l) => /* @__PURE__ */ o.jsx(Q, { value: l, sx: a.tabPanel, children: /* @__PURE__ */ o.jsx(n, { sx: a.playersGrid, children: L().map((s) => /* @__PURE__ */ o.jsxs(n, { sx: a.playerContainer, children: [
-            /* @__PURE__ */ o.jsx(
-              w,
-              {
-                player: s,
-                isSelected: k === s.id,
-                styles: a,
-                handlePlayerSelection: C
-              }
-            ),
-            /* @__PURE__ */ o.jsx(
-              _,
-              {
-                level: "body-xs",
-                sx: {
-                  ...a.playerName,
-                  ...k === s.id ? a.selectedPlayerName : {}
-                },
-                onClick: () => C(s.id),
-                children: s.name
-              }
-            )
-          ] }, s.id)) }) }, l))
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ o.jsxs(n, { sx: a.checkboxesContainer, children: [
-      /* @__PURE__ */ o.jsx(p, { size: "sm", children: /* @__PURE__ */ o.jsx(n, { sx: a.checkboxRow, children: /* @__PURE__ */ o.jsx(
-        v,
-        {
-          checked: G,
-          onChange: (e) => I(e.target.checked),
-          slotProps: {
-            checkbox: {
-              sx: {
-                "&.Mui-checked": {
-                  bgcolor: t.brandingPrimaryColor || r.palette.primary.plainColor,
-                  "--Icon-color": "#FFF"
-                },
-                "&:not(.Mui-checked):not(.Mui-disabled):hover": {
-                  bgcolor: x.colorSchemes.light.palette.neutral.outlinedHoverBg
-                },
-                bgcolor: x.colorSchemes.light.palette.background.surface
-              }
-            },
-            label: {
-              sx: a.checkboxLabel
-            }
-          },
-          label: f("matchQuiz.fixtures.ownGoal")
-        }
-      ) }) }),
-      /* @__PURE__ */ o.jsx(p, { size: "sm", children: /* @__PURE__ */ o.jsx(n, { sx: a.checkboxRow, children: /* @__PURE__ */ o.jsx(
-        v,
-        {
-          checked: A,
-          onChange: (e) => O(e.target.checked),
-          slotProps: {
-            checkbox: {
-              sx: {
-                "&.Mui-checked": {
-                  bgcolor: t.brandingPrimaryColor || r.palette.primary.plainColor,
-                  "--Icon-color": "#FFF"
-                },
-                "&:not(.Mui-checked):not(.Mui-disabled):hover": {
-                  bgcolor: x.colorSchemes.light.palette.neutral.outlinedHoverBg
-                },
-                bgcolor: x.colorSchemes.light.palette.background.surface
-              }
-            },
-            label: {
-              sx: a.checkboxLabel
-            }
-          },
-          label: f("matchQuiz.fixtures.noGoalWillBeScored")
-        }
-      ) }) })
-    ] })
-  ] });
-};
-export {
-  xe as default
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersSelector.styles.js

@@ -1,293 +0,0 @@
-import { createTeamLogoStyles as a } from "../shared.styles.js";
-const l = (e) => {
-  const t = a({
-    spacingScale: e.spacingScale,
-    neutralSoftBg: e.neutralSoftBg,
-    neutralPlainHoverBg: e.neutralPlainHoverBg,
-    isMobile: e.isMobile,
-    primary: e.primary,
-    onPrimary: e.onPrimary
-  });
-  return {
-    container: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: e.spacingScale.lg,
-      width: "100%"
-    },
-    // Team selection section
-    teamSelection: {
-      display: "flex",
-      flexDirection: "column",
-      gap: e.spacingScale.md,
-      pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
-    },
-    iconsRow: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
-    },
-    labelsRow: {
-      display: "flex",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
-    },
-    iconContainer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flex: 1
-    },
-    labelContainer: {
-      display: "flex",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      flex: 1
-    },
-    teamLogo: {
-      ...t.base,
-      cursor: "pointer"
-    },
-    selectedTeamLogo: t.selected,
-    teamLogoText: {
-      ...t.text,
-      fontFamily: e.fontFamilySecondary,
-      color: e.textSecondary
-    },
-    selectedTeamLogoText: t.selectedText,
-    teamName: {
-      fontFamily: e.fontFamilySecondary,
-      color: e.textPrimary,
-      fontSize: e.isMobile ? "0.75em" : "0.875em",
-      fontWeight: 600,
-      textAlign: "center"
-    },
-    // Team badges (home/away)
-    badgesRow: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
-    },
-    badge: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: `${e.spacingScale.xs} ${e.spacingScale.md}`,
-      borderRadius: 9999,
-      border: `1px solid ${e.neutralOutlinedBorder}`,
-      cursor: "pointer",
-      userSelect: "none",
-      fontFamily: e.fontFamilySecondary,
-      fontWeight: 500,
-      fontSize: e.isMobile ? "0.75em" : "0.875em",
-      color: e.textSecondary,
-      backgroundColor: "transparent",
-      minWidth: e.isMobile ? "auto" : "120px",
-      textAlign: "center",
-      "&:hover": {
-        backgroundColor: e.neutralPlainHoverBg,
-        color: e.textPrimary,
-        borderColor: `${e.primary}40`
-      },
-      "&:active": {
-        transform: "scale(0.98)"
-      }
-    },
-    badgeActive: {
-      borderColor: e.primary,
-      color: e.primary,
-      backgroundColor: e.neutralPlainHoverBg,
-      fontWeight: 600,
-      "&:hover": {
-        borderColor: e.primary,
-        color: e.primary,
-        backgroundColor: e.neutralPlainHoverBg
-      }
-    },
-    // Tabs section
-    tabsContainer: {
-      width: "100%",
-      alignSelf: "flex-start"
-    },
-    tabs: {
-      backgroundColor: e.neutralSoftBg,
-      borderRadius: e.borderRadius.lg,
-      overflow: "hidden"
-    },
-    tabList: {
-      borderBottom: `1px solid ${e.neutralOutlinedBorder}`,
-      p: 0,
-      gap: 0,
-      justifyContent: "space-between",
-      flexWrap: e.isExtraSmall ? "wrap" : "nowrap",
-      "& .MuiTabList-root": {
-        bgcolor: "transparent"
-      }
-    },
-    tab: {
-      width: e.isExtraSmall ? "50%" : "25%",
-      fontFamily: e.fontFamilySecondary,
-      fontWeight: 500,
-      fontSize: e.isMobile ? "0.75em" : "0.875em",
-      color: e.textSecondary,
-      bgcolor: "transparent",
-      border: "none",
-      borderBottom: "2px solid transparent",
-      transition: "all 0.2s ease",
-      minHeight: "auto",
-      py: e.spacingScale.sm,
-      px: e.spacingScale.xs,
-      "&:hover": {
-        bgcolor: `${e.neutralPlainHoverBg} !important`,
-        borderBottom: `2px solid ${e.primary}40`,
-        color: `${e.textPrimary} !important`
-      },
-      "&:not(.Mui-selected):hover": {
-        color: `${e.textPrimary} !important`
-      },
-      "&.Mui-selected": {
-        bgcolor: e.neutralPlainHoverBg,
-        color: e.textPrimary,
-        borderBottom: `2px solid ${e.primary}`,
-        fontWeight: 600
-      },
-      "&:first-of-type": {
-        borderTopLeftRadius: e.isExtraSmall ? 0 : e.borderRadius.lg
-      },
-      "&:last-of-type": {
-        borderTopRightRadius: e.isExtraSmall ? 0 : e.borderRadius.lg
-      },
-      "--Tab-indicatorColor": `2px solid ${e.primary} !important`
-    },
-    tabPanel: {
-      px: 0,
-      py: e.spacingScale.xs,
-      "& .MuiTabPanel-root": {
-        p: 0
-      }
-    },
-    // Players grid
-    playersGrid: {
-      display: "grid",
-      gridTemplateColumns: e.isMobile ? "repeat(auto-fit, minmax(70px, 1fr))" : "repeat(auto-fit, minmax(90px, 1fr))",
-      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-      justifyContent: "center",
-      justifyItems: "center",
-      padding: e.spacingScale.sm,
-      maxWidth: "100%"
-    },
-    playerContainer: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: e.spacingScale.xs,
-      cursor: "pointer",
-      transition: "all 0.2s ease-in-out",
-      width: "100%",
-      maxWidth: e.isMobile ? "70px" : "90px",
-      "&:hover": {
-        transform: "scale(1.02)"
-      }
-    },
-    // Player avatar styles
-    playerAvatar: {
-      width: e.isMobile ? "44px" : "52px",
-      height: e.isMobile ? "44px" : "52px",
-      borderRadius: "50%",
-      backgroundColor: e.neutralSoftBg,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      overflow: "hidden",
-      border: `2px solid ${e.neutralOutlinedBorder}`,
-      cursor: "pointer",
-      transition: "all 0.2s ease-in-out",
-      flexShrink: 0,
-      "&:hover": {
-        backgroundColor: e.neutralPlainHoverBg,
-        borderColor: e.primary,
-        transform: "scale(1.05)"
-      }
-    },
-    selectedPlayerAvatar: {
-      backgroundColor: e.primary,
-      borderColor: e.primary,
-      transform: "scale(1.1)",
-      "&:hover": {
-        backgroundColor: e.primary,
-        borderColor: e.primary,
-        transform: "scale(1.1)"
-      }
-    },
-    playerAvatarText: {
-      fontFamily: e.fontFamilySecondary,
-      color: e.textSecondary,
-      fontSize: e.isMobile ? "0.625em" : "0.75em",
-      fontWeight: 600,
-      textAlign: "center",
-      lineHeight: 1
-    },
-    selectedPlayerAvatarText: {
-      color: e.onPrimary
-    },
-    playerAvatarIcon: {
-      color: e.textSecondary,
-      fontSize: e.isMobile ? "1.25em" : "1.5em"
-    },
-    selectedPlayerAvatarIcon: {
-      color: e.onPrimary
-    },
-    playerName: {
-      fontFamily: e.fontFamilySecondary,
-      color: e.textSecondary,
-      fontSize: e.isMobile ? "0.625em" : "0.75em",
-      fontWeight: 500,
-      textAlign: "center",
-      lineHeight: 1.2,
-      cursor: "pointer",
-      transition: "color 0.2s ease-in-out",
-      wordBreak: "break-word",
-      hyphens: "auto",
-      width: "100%",
-      overflow: "hidden",
-      display: "-webkit-box",
-      WebkitLineClamp: 2,
-      WebkitBoxOrient: "vertical",
-      "&:hover": {
-        color: e.textPrimary
-      }
-    },
-    selectedPlayerName: {
-      color: e.primary,
-      fontWeight: 600
-    },
-    // Checkboxes section
-    checkboxesContainer: {
-      display: "flex",
-      gap: e.spacingScale.sm,
-      alignItems: e.isExtraSmall || e.isSplitVariant ? "flex-start" : "center",
-      justifyContent: e.isExtraSmall || e.isSplitVariant ? "flex-start" : "center",
-      flexDirection: e.isExtraSmall || e.isSplitVariant ? "column" : "row",
-      width: "100%",
-      maxWidth: "600px"
-    },
-    checkboxRow: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: e.spacingScale.xs
-    },
-    checkboxLabel: {
-      fontFamily: e.fontFamilySecondary,
-      color: e.textPrimary,
-      fontSize: e.isMobile ? "0.875em" : "1em",
-      fontWeight: 500
-    }
-  };
-};
-export {
-  l as createStyles
-};