fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

package/packages/common/src/components/Rules.js

@@ -0,0 +1,299 @@
+import { j as t } from "../../../../node_modules/react/jsx-runtime.js";
+import { useState as C } from "react";
+import { Tooltip as c, IconButton as l, Modal as j, ModalDialog as y, DialogContent as k, Typography as v, Box as S, Button as w } from "@mui/joy";
+import d from "../../../../node_modules/@mui/icons-material/esm/InfoOutlined.js";
+import P from "../../../../node_modules/@mui/icons-material/esm/Close.js";
+import { useConstantContext as I } from "../hooks/useConstantContext.js";
+import { ConstantsContext as R } from "../providers/ConstantsProvider.js";
+import { useColors as B, useCornerRadius as z, useFontFamily as F, useSpacingScale as T, isMobile as H } from "../functions/theme.js";
+import { useTranslation as M } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const J = ({
+  rules: f,
+  rulesDisplay: e,
+  isOverlayVariant: h = !1
+}) => {
+  const { t: r } = M(), { shadowRootElement: g } = I(R), o = B(), u = z(), a = F(), n = T(), m = H(), [p, s] = C(!1);
+  if (!f)
+    return null;
+  if (e != null && e.component)
+    return e.component;
+  if (((e == null ? void 0 : e.type) || "modal") === "link" && (e != null && e.url)) {
+    const i = e.target || "_blank", x = {
+      backgroundColor: "transparent",
+      color: h ? o.palette.neutral.plainColor : o.textSecondary,
+      border: "none",
+      borderRadius: "50%",
+      width: "2em",
+      height: "2em",
+      minHeight: "2em",
+      minWidth: "2em",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      transition: "all 0.2s ease-in-out",
+      "&: hover": {
+        backgroundColor: "transparent",
+        transform: "scale(1.05)"
+      },
+      "&:focus-visible": {
+        outline: "none"
+      },
+      "& svg": {
+        fontSize: "1.25em"
+      }
+    };
+    return typeof window > "u" ? /* @__PURE__ */ t.jsx(
+      c,
+      {
+        title: r("common.rules.info"),
+        placement: "right",
+        variant: "soft",
+        disablePortal: !0,
+        children: /* @__PURE__ */ t.jsx(
+          l,
+          {
+            component: "a",
+            href: e.url,
+            target: i,
+            rel: "noopener noreferrer",
+            sx: x,
+            "aria-label": r("common.rules.info"),
+            children: /* @__PURE__ */ t.jsx(d, {})
+          }
+        )
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      c,
+      {
+        title: r("common.rules.info"),
+        placement: "right",
+        variant: "soft",
+        disablePortal: !0,
+        children: /* @__PURE__ */ t.jsx(
+          l,
+          {
+            onClick: (b) => {
+              b.stopPropagation(), window.open(e.url, i, "noopener,noreferrer");
+            },
+            sx: x,
+            "aria-label": r("common.rules.info"),
+            children: /* @__PURE__ */ t.jsx(d, {})
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      c,
+      {
+        title: r("common.rules.info"),
+        placement: "right",
+        variant: "soft",
+        disablePortal: !0,
+        children: /* @__PURE__ */ t.jsx(
+          l,
+          {
+            onClick: (i) => {
+              i.stopPropagation(), s(!0);
+            },
+            sx: {
+              backgroundColor: "transparent",
+              color: o.palette.neutral[500],
+              border: "none",
+              borderRadius: "50%",
+              width: "2em",
+              height: "2em",
+              minHeight: "2em",
+              minWidth: "2em",
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              transition: "all 0.2s ease-in-out",
+              "&:hover": {
+                backgroundColor: "transparent",
+                color: o.palette.neutral[500],
+                transform: "scale(1.05)"
+              },
+              "&:focus-visible": {
+                outline: "none"
+              },
+              "& svg": {
+                fontSize: "1.25em"
+              }
+            },
+            "aria-label": r("common.rules.info"),
+            children: /* @__PURE__ */ t.jsx(d, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      j,
+      {
+        open: p,
+        onClose: () => s(!1),
+        container: g,
+        sx: { zIndex: 1300 },
+        children: /* @__PURE__ */ t.jsxs(
+          y,
+          {
+            sx: {
+              width: "100%",
+              maxWidth: m ? "90vw" : "600px",
+              maxHeight: m ? "90vh" : "80vh",
+              p: m ? 2 : 3,
+              borderRadius: u.md,
+              backgroundColor: o.surface
+            },
+            children: [
+              /* @__PURE__ */ t.jsx(
+                l,
+                {
+                  onClick: (i) => {
+                    i.stopPropagation(), s(!1);
+                  },
+                  sx: {
+                    position: "absolute",
+                    top: n.sm,
+                    right: n.sm,
+                    backgroundColor: "transparent",
+                    color: o.textSecondary,
+                    border: "none",
+                    borderRadius: "50%",
+                    width: "2em",
+                    height: "2em",
+                    minHeight: "2em",
+                    minWidth: "2em",
+                    padding: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: "pointer",
+                    transition: "all 0.2s ease-in-out",
+                    zIndex: 1e3,
+                    "&:hover": {
+                      backgroundColor: `${o.textSecondary}15`,
+                      color: o.textPrimary,
+                      transform: "scale(1.05)"
+                    },
+                    "&:focus-visible": {
+                      outline: "none"
+                    },
+                    "& svg": {
+                      fontSize: "1.25em"
+                    }
+                  },
+                  children: /* @__PURE__ */ t.jsx(P, {})
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(
+                k,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: n.md
+                  },
+                  children: [
+                    /* @__PURE__ */ t.jsx(
+                      v,
+                      {
+                        sx: {
+                          fontFamily: a.primary,
+                          fontWeight: 600,
+                          fontSize: "1.25em",
+                          lineHeight: 1.2,
+                          color: o.textPrimary,
+                          textAlign: "center",
+                          marginBottom: n.sm
+                        },
+                        children: r("common.rules.title")
+                      }
+                    ),
+                    /* @__PURE__ */ t.jsx(
+                      S,
+                      {
+                        sx: {
+                          fontFamily: a.secondary,
+                          fontSize: "1em",
+                          lineHeight: 1.5,
+                          color: o.textSecondary,
+                          overflow: "auto",
+                          // Custom scrollbar styling for dark theme
+                          "&::-webkit-scrollbar": {
+                            width: "8px"
+                          },
+                          "&::-webkit-scrollbar-track": {
+                            backgroundColor: "transparent"
+                          },
+                          "&::-webkit-scrollbar-thumb": {
+                            backgroundColor: o.secondaryContainer,
+                            borderRadius: "4px",
+                            "&:hover": {
+                              backgroundColor: o.textSecondary
+                            }
+                          },
+                          // Firefox scrollbar styling
+                          scrollbarWidth: "thin",
+                          scrollbarColor: `${o.secondaryContainer} transparent`,
+                          "& p": {
+                            marginBottom: n.sm
+                          },
+                          "& ul, & ol": {
+                            marginLeft: n.md,
+                            marginBottom: n.sm
+                          },
+                          "& li": {
+                            marginBottom: n.xs
+                          },
+                          "& h1, & h2, & h3, & h4, & h5, & h6": {
+                            fontFamily: a.primary,
+                            color: o.textPrimary,
+                            marginTop: n.md,
+                            marginBottom: n.sm
+                          }
+                        },
+                        dangerouslySetInnerHTML: { __html: f }
+                      }
+                    ),
+                    /* @__PURE__ */ t.jsx(
+                      w,
+                      {
+                        variant: "outlined",
+                        onClick: (i) => {
+                          i.stopPropagation(), s(!1);
+                        },
+                        sx: {
+                          marginTop: n.md,
+                          borderColor: o.textPrimary,
+                          color: o.textPrimary,
+                          fontFamily: a.secondary,
+                          fontSize: "0.875em",
+                          borderRadius: u.sm,
+                          "&:hover": {
+                            borderColor: o.textPrimary,
+                            color: o.textPrimary,
+                            backgroundColor: o.surfaceVariant
+                          }
+                        },
+                        children: r("common.rules.close")
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  J as default
+};

package/packages/common/src/components/Skeletons/NotFoundSkeleton.js

@@ -0,0 +1,83 @@
+import { j as o } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as e, Typography as l } from "@mui/joy";
+import { useColors as s, useSpacingScale as y, useFontFamily as a } from "../../functions/theme.js";
+const u = ({
+  notFoundTitle: c,
+  notFoundMessage: x
+}) => {
+  var r, i;
+  const t = (i = (r = s().palette) == null ? void 0 : r.danger) == null ? void 0 : i.plainColor, d = s().textSecondary, m = y(), n = a().primary, p = a().secondary;
+  return /* @__PURE__ */ o.jsxs(
+    e,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        minHeight: "300px",
+        padding: "32px 24px",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ o.jsx(
+          e,
+          {
+            sx: {
+              width: "80px",
+              height: "80px",
+              borderRadius: "50%",
+              backgroundColor: `${t}15`,
+              // 15% opacity
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginBottom: "24px"
+            },
+            children: /* @__PURE__ */ o.jsx(
+              e,
+              {
+                sx: {
+                  fontSize: "32px",
+                  color: t,
+                  fontWeight: "bold",
+                  fontFamily: n
+                },
+                children: "?"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          l,
+          {
+            level: "h4",
+            sx: {
+              color: t,
+              marginBottom: m.xs,
+              fontWeight: "600",
+              fontFamily: n
+            },
+            children: c
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          l,
+          {
+            level: "body-md",
+            sx: {
+              color: d,
+              lineHeight: 1.5,
+              fontFamily: p
+            },
+            children: x
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  u as default
+};

package/packages/common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.js

@@ -0,0 +1,80 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n, Typography as s, Button as E } from "@mui/joy";
+import { useSpacingScale as F, useInternalTheme as R, isMobile as v, useImageBackgroundGradient as P } from "../../../../functions/theme.js";
+import { extractBrandingProperties as V, sanitizeBackgroundUrl as M, stripHtmlTags as O } from "../../../../functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as l } from "../../../../enums/enums.js";
+import z from "../../../Rules.js";
+import "react";
+import "../../../../providers/ConstantsProvider.js";
+import L from "../../../AlertMessage.js";
+import D from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
+import { createStyles as G } from "./OverlayApiErrorSkeleton.styles.js";
+import { useImageVariant as U } from "../../../../hooks/useImageVariant.js";
+import "../../../../providers/ContainerProvider.js";
+import { useTranslation as Y } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const oe = (t) => {
+  const c = F(), o = R(), m = v(), { t: a } = Y(), d = P(
+    l.OVERLAY
+  ), { brandingImage: x, brandingColors: i, brandingLogo: g } = V(t.entity.branding || null), u = x || U(
+    {
+      images: t.entity.images || null,
+      imagePlaceholder: t.defaultImagePlaceholderUrl || ""
+    },
+    l.OVERLAY
+  ), h = M(u), y = (i == null ? void 0 : i.contentColor) || o.colorSchemes.dark.textColor, f = o.customFontFamily.dark.primary, j = o.customFontFamily.dark.secondary, k = o.customRadius.dark, S = o.border.dark.size, A = (i == null ? void 0 : i.backgroundColor) || o.colorSchemes.dark.surfaceVariant, C = o.colorSchemes.dark.onSurface, T = o.colorSchemes.dark.surfaceVariant, b = o.colorSchemes.dark.textPrimary, B = t.isApiError ? a("common.error.title") : a("common.authentication.accessRequired"), I = t.isApiError ? t.apiErrorMessage || a("common.error.message") : a("common.authentication.invalidOrMissingAuth"), r = G({
+    spacingScale: c,
+    brandingColors: i,
+    secondaryColor: y,
+    fontFamilyPrimary: f,
+    fontFamilySecondary: j,
+    borderRadius: k,
+    borderSize: S,
+    darkTextColor: o.colorSchemes.dark.textColor,
+    backgroundImage: h,
+    imageBackgroundGradient: d,
+    contentBgColor: A,
+    onSurfaceColor: C,
+    surfaceVariantColor: T,
+    textPrimary: b,
+    isMobile: m
+  }), p = () => t.isApiError ? /* @__PURE__ */ e.jsx(n, { sx: r.ctaSection, children: /* @__PURE__ */ e.jsx(n, { sx: r.buttonsContainer, children: /* @__PURE__ */ e.jsx(E, { sx: r.tryAgainButton, onClick: t.toggleTryAgain, children: /* @__PURE__ */ e.jsxs(n, { sx: r.tryAgainButtonContent, children: [
+    /* @__PURE__ */ e.jsx(D, { sx: r.tryAgainIcon }),
+    /* @__PURE__ */ e.jsx(s, { sx: r.tryAgainText, children: t.tryAgainButtonText })
+  ] }) }) }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+  return /* @__PURE__ */ e.jsxs(n, { sx: r.mainContainer, children: [
+    /* @__PURE__ */ e.jsx(n, { children: /* @__PURE__ */ e.jsx(n, { sx: r.headlineSection, children: /* @__PURE__ */ e.jsx(n, { sx: r.headlineContent, children: /* @__PURE__ */ e.jsxs(n, { sx: r.headlineContentInner, children: [
+      /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: c["3xs"] }, children: [
+        /* @__PURE__ */ e.jsx(s, { level: "body-sm", sx: r.headlineText, children: t.headline }),
+        /* @__PURE__ */ e.jsx(
+          z,
+          {
+            rulesDisplay: t.rulesDisplay,
+            isOverlayVariant: !0,
+            rules: t.entity.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(n, { sx: r.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(s, { level: "h4", sx: r.titleText, children: t.entity.title }),
+        /* @__PURE__ */ e.jsx(s, { level: "body-lg", sx: r.descriptionText, children: O(t.entity.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e.jsxs(n, { sx: r.bottomSection, children: [
+      /* @__PURE__ */ e.jsx(
+        L,
+        {
+          variant: "error",
+          title: B,
+          message: I
+        }
+      ),
+      p(),
+      g ? /* @__PURE__ */ e.jsx(n, { sx: r.footerContainer, children: t.renderPresentedBy(o.colorSchemes.dark.textColor) }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+    ] })
+  ] });
+};
+export {
+  oe as default
+};

package/packages/common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.styles.js

@@ -0,0 +1,190 @@
+const n = (e) => {
+  var t;
+  return {
+    // Main container with background overlay
+    mainContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "40px",
+      p: e.spacingScale.xl,
+      boxShadow: "md",
+      border: (t = e.brandingColors) != null && t.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
+      overflow: "hidden",
+      backgroundImage: e.backgroundImage,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      position: "relative",
+      borderRadius: e.borderRadius.md,
+      minHeight: "250px",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        background: e.imageBackgroundGradient,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: "inherit",
+        zIndex: 0
+      }
+    },
+    // Headline section wrapper
+    headlineSection: {
+      display: "flex",
+      justifyContent: "space-between",
+      flex: "1 0 0",
+      alignSelf: "stretch"
+    },
+    // Headline content container
+    headlineContent: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      flex: "1 0 0",
+      gap: "16px"
+    },
+    // Headline content with z-index
+    headlineContentInner: {
+      zIndex: 10
+    },
+    // Headline typography
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textAlign: e.isMobile ? "center" : "left",
+      color: e.secondaryColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      fontSize: "0.75em"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      textAlign: e.isMobile ? "center" : "left",
+      fontSize: "1.5em",
+      color: e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Description typography
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      textAlign: e.isMobile ? "center" : "left",
+      color: e.secondaryColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Bottom section container
+    bottomSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px",
+      zIndex: 1
+    },
+    // Footer container
+    footerContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexDirection: e.isMobile ? "column-reverse" : "row",
+      gap: e.spacingScale.md
+    },
+    ctaSection: {
+      borderRadius: e.borderRadius.md,
+      py: e.spacingScale.md,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      alignSelf: "stretch",
+      gap: e.spacingScale.md,
+      backdropFilter: "blur(4px)",
+      position: "relative",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: e.contentBgColor,
+        opacity: 0.25,
+        borderRadius: "inherit",
+        zIndex: 0,
+        backdropFilter: "blur(4px)"
+      },
+      "& > *": {
+        position: "relative",
+        zIndex: 1
+      }
+    },
+    // Buttons container
+    buttonsContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md
+    },
+    // Try again button
+    tryAgainButton: {
+      display: "flex",
+      minHeight: "48px",
+      py: "12px",
+      pr: "24px",
+      pl: "16px",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      borderRadius: e.borderRadius.xl,
+      bgcolor: e.onSurfaceColor,
+      "&:hover": {
+        bgcolor: e.surfaceVariantColor
+      },
+      fontSize: "0.9375em"
+    },
+    // Try again button content
+    tryAgainButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      alignSelf: "stretch"
+    },
+    // Try again icon
+    tryAgainIcon: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      color: e.textPrimary
+    },
+    // Try again text
+    tryAgainText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.9375em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "24px",
+      letterSpacing: "0.46px",
+      textTransform: "uppercase"
+    }
+  };
+};
+export {
+  n as createStyles
+};