fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/packages/common/src/functions/theme.js

@@ -1,301 +0,0 @@
-import { useThemeMode as V } from "../hooks/useThemeMode.js";
-import { WidgetTemplate as M } from "../enums/enums.js";
-import { useContainerContext as i } from "../providers/ContainerProvider.js";
-import g from "../../../../node_modules/@mui/joy/styles/extendTheme.js";
-import { useTheme as o } from "../../../../node_modules/@mui/joy/styles/ThemeProvider.js";
-import c from "../../../../node_modules/@mui/material/node_modules/@mui/system/esm/useMediaQuery/useMediaQuery.js";
-const z = {
-  values: {
-    xs: 0,
-    sm: 444,
-    md: 600,
-    lg: 900,
-    xl: 1200,
-    xxl: 1536
-  }
-}, L = {
-  "3xs": "2px",
-  "2xs": "4px",
-  xs: "8px",
-  sm: "12px",
-  md: "16px",
-  lg: "24px",
-  xl: "32px",
-  "2xl": "40px",
-  "3xl": "48px"
-}, n = {
-  light: {
-    palette: {
-      success: {
-        plainColor: "#4CAF50",
-        outlinedBorder: "#4CAF50",
-        softBg: "#E3FBE3"
-      },
-      danger: {
-        softBg: "#FEE4E2",
-        plainColor: "#F44336",
-        outlinedBorder: "#F44336"
-      },
-      primary: {
-        plainColor: "#1A77D2",
-        outlinedBorder: "#1A77D2",
-        onPrimary: "#FAFAFA",
-        primaryContainer: "#2397F3"
-      },
-      warning: {
-        softBg: "#FEF0C7",
-        plainColor: "#DC6803"
-      }
-    },
-    textPrimary: "#212121",
-    textSecondary: "#212121",
-    textColor: "#212121",
-    textDisabled: "#212121",
-    surface: "#FFFFFF",
-    onSurface: "#F5F5F5",
-    surfaceVariant: "#EEEEEE",
-    surfaceTintDim: "#212121",
-    surfaceInverse: "#F5F5F5",
-    outlineEnabledBorder: "#E0E0E0",
-    secondaryContainer: "#BDBDBD"
-  },
-  dark: {
-    palette: {
-      primary: {
-        plainColor: "#1A77D2",
-        outlinedBorder: "#1A77D2",
-        onPrimary: "#FAFAFA",
-        primaryContainer: "#2397F3"
-      },
-      success: {
-        plainColor: "#4CAF50",
-        outlinedBorder: "#4CAF50",
-        softBg: "#042F04"
-      },
-      danger: {
-        softBg: "#430A0A",
-        plainColor: "#F44336",
-        outlinedBorder: "#F44336"
-      },
-      warning: {
-        softBg: "#FEF0C7",
-        plainColor: "#DC6803"
-      }
-    },
-    textPrimary: "#FAFAFA",
-    textSecondary: "#FAFAFA",
-    textColor: "#FAFAFA",
-    textDisabled: "#FAFAFA",
-    surface: "#424242",
-    onSurface: "#212121",
-    surfaceVariant: "#616161",
-    surfaceTintDim: "#FAFAFA",
-    surfaceInverse: "#FAFAFA",
-    outlineEnabledBorder: "#757575",
-    secondaryContainer: "#757575"
-  }
-}, N = {
-  light: {
-    primary: "Ubuntu, sans-serif",
-    secondary: "Roboto, sans-serif"
-  },
-  dark: {
-    primary: "Ubuntu, sans-serif",
-    secondary: "Roboto, sans-serif"
-  }
-}, K = {
-  light: {
-    none: "0px",
-    "2xs": "2px",
-    xs: "4px",
-    sm: "8px",
-    md: "12px",
-    lg: "16px",
-    xl: "24px",
-    "2xl": "232px",
-    full: "1000px"
-  },
-  dark: {
-    none: "0px",
-    "2xs": "2px",
-    xs: "4px",
-    sm: "8px",
-    md: "12px",
-    lg: "16px",
-    xl: "24px",
-    "2xl": "232px",
-    full: "1000px"
-  }
-}, U = {
-  light: {
-    size: "1px"
-  },
-  dark: {
-    size: "2px"
-  }
-}, m = {
-  light: {
-    standard: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
-    split: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)"
-  },
-  dark: {
-    standard: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
-    split: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
-    overlay: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)"
-  }
-}, Q = (e) => {
-  var t, d, s, h, F, u, x, p, k, y, f, S, B, A, C, b, T, D, E, v, w, R, j, W, G, P, I;
-  const r = g(), a = {
-    // Only add custom properties, don't override the entire palette
-    colorSchemes: {
-      light: {
-        palette: {
-          // Merge with existing palette
-          success: {
-            ...r.colorSchemes.light.palette.success,
-            ...((s = (d = (t = e == null ? void 0 : e.colorSchemes) == null ? void 0 : t.light) == null ? void 0 : d.palette) == null ? void 0 : s.success) || n.light.palette.success
-          },
-          danger: {
-            ...r.colorSchemes.light.palette.danger,
-            ...((u = (F = (h = e == null ? void 0 : e.colorSchemes) == null ? void 0 : h.light) == null ? void 0 : F.palette) == null ? void 0 : u.danger) || n.light.palette.danger
-          },
-          primary: {
-            ...r.colorSchemes.light.palette.primary,
-            ...((k = (p = (x = e == null ? void 0 : e.colorSchemes) == null ? void 0 : x.light) == null ? void 0 : p.palette) == null ? void 0 : k.primary) || n.light.palette.primary
-          },
-          warning: {
-            ...r.colorSchemes.light.palette.warning,
-            ...((S = (f = (y = e == null ? void 0 : e.colorSchemes) == null ? void 0 : y.light) == null ? void 0 : f.palette) == null ? void 0 : S.warning) || n.light.palette.warning
-          }
-        },
-        // Add custom properties
-        ...((B = e == null ? void 0 : e.colorSchemes) == null ? void 0 : B.light) || n.light
-      },
-      dark: {
-        palette: {
-          primary: {
-            ...r.colorSchemes.dark.palette.primary,
-            ...((b = (C = (A = e == null ? void 0 : e.colorSchemes) == null ? void 0 : A.dark) == null ? void 0 : C.palette) == null ? void 0 : b.primary) || n.dark.palette.primary
-          },
-          success: {
-            ...r.colorSchemes.dark.palette.success,
-            ...((E = (D = (T = e == null ? void 0 : e.colorSchemes) == null ? void 0 : T.dark) == null ? void 0 : D.palette) == null ? void 0 : E.success) || n.dark.palette.success
-          },
-          danger: {
-            ...r.colorSchemes.dark.palette.danger,
-            ...((R = (w = (v = e == null ? void 0 : e.colorSchemes) == null ? void 0 : v.dark) == null ? void 0 : w.palette) == null ? void 0 : R.danger) || n.dark.palette.danger
-          },
-          warning: {
-            ...r.colorSchemes.dark.palette.warning,
-            ...((G = (W = (j = e == null ? void 0 : e.colorSchemes) == null ? void 0 : j.dark) == null ? void 0 : W.palette) == null ? void 0 : G.warning) || n.dark.palette.warning
-          }
-        },
-        // Add custom properties
-        ...((P = e == null ? void 0 : e.colorSchemes) == null ? void 0 : P.dark) || n.dark
-      }
-    },
-    breakpoints: {
-      values: {
-        ...r.breakpoints.values,
-        ...((I = e == null ? void 0 : e.customBreakpoints) == null ? void 0 : I.values) || z.values
-      }
-    },
-    // Add other custom properties as needed
-    ...e && {
-      spacingScale: e.spacingScale || L,
-      customFontFamily: e.customFontFamily || N,
-      customRadius: e.customRadius || K,
-      border: e.border || U,
-      imageBackgroundGradient: e.imageBackgroundGradient || m,
-      customBreakpoints: e.customBreakpoints || z
-    }
-  };
-  return g(a);
-}, $ = (e) => {
-  const r = (e == null ? void 0 : e.mode) || "light", a = (e == null ? void 0 : e.modeStorageKey) || "theme-mode", t = Q(e);
-  return g({
-    ...t,
-    mode: r,
-    modeStorageKey: a,
-    // Ensure Joy UI respects the provided mode
-    cssVarPrefix: "joy",
-    colorSchemeSelector: 'data-joy-color-scheme="%s"'
-  });
-}, q = () => o().spacingScale, O = (e) => {
-  const r = q();
-  return r ? r[e] : "16px";
-}, ee = () => {
-  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
-  return t && a > 0 ? a < r.customBreakpoints.values.sm : c(
-    e.breakpoints.down(r.customBreakpoints.values.sm)
-  );
-}, re = () => {
-  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
-  return t && a > 0 ? a < r.customBreakpoints.values.md : c(
-    e.breakpoints.down(r.customBreakpoints.values.md)
-  );
-}, ae = () => {
-  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
-  return t && a > 0 ? a < r.customBreakpoints.values.lg : c(
-    e.breakpoints.down(r.customBreakpoints.values.lg)
-  );
-}, te = () => {
-  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
-  return t && a > 0 ? a >= r.customBreakpoints.values.md && a < r.customBreakpoints.values.lg : c(
-    e.breakpoints.between(
-      r.customBreakpoints.values.md,
-      r.customBreakpoints.values.lg
-    )
-  );
-}, ne = () => {
-  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
-  return t && a > 0 ? a >= r.customBreakpoints.values.lg : c(
-    e.breakpoints.up(r.customBreakpoints.values.lg)
-  );
-}, le = () => o(), l = () => {
-  const e = o(), { mode: r } = V(
-    e.mode || "light",
-    e.modeStorageKey || "theme-mode"
-  );
-  return { theme: e, mode: r };
-}, oe = () => {
-  var a, t, d, s;
-  const { theme: e, mode: r } = l();
-  return {
-    primary: ((t = (a = e.customFontFamily) == null ? void 0 : a[r]) == null ? void 0 : t.primary) || "Ubuntu, sans-serif",
-    secondary: ((s = (d = e.customFontFamily) == null ? void 0 : d[r]) == null ? void 0 : s.secondary) || "Roboto, sans-serif"
-  };
-}, de = () => {
-  var a;
-  const { theme: e, mode: r } = l();
-  return ((a = e.customRadius) == null ? void 0 : a[r]) || K[r];
-}, se = () => {
-  var a;
-  const { theme: e, mode: r } = l();
-  return ((a = e.colorSchemes) == null ? void 0 : a[r]) || n[r];
-}, ie = () => {
-  var a;
-  const { theme: e, mode: r } = l();
-  return ((a = e.border) == null ? void 0 : a[r]) || U[r];
-}, ce = (e) => {
-  const { theme: r, mode: a } = l();
-  return e === M.STANDARD || e === M.SPLIT ? r.imageBackgroundGradient[a][e] || m[a][e] : r.imageBackgroundGradient.dark.overlay || m.dark.overlay;
-};
-export {
-  Q as createCustomTheme,
-  $ as createEnhancedTheme,
-  O as getSpacing,
-  ne as isDesktop,
-  ee as isExtraSmall,
-  ae as isLarge,
-  re as isMobile,
-  te as isTablet,
-  ie as useBorderSize,
-  se as useColors,
-  de as useCornerRadius,
-  oe as useFontFamily,
-  ce as useImageBackgroundGradient,
-  le as useInternalTheme,
-  q as useSpacingScale,
-  l as useThemeWithMode
-};

package/packages/common/src/hooks/useConstantContext.js

@@ -1,10 +0,0 @@
-import { useContext as e } from "react";
-function r(o) {
-  const t = e(o);
-  if (t === void 0)
-    throw new Error("Context was used outside of its Provider");
-  return t;
-}
-export {
-  r as useConstantContext
-};

package/packages/common/src/hooks/useImageUrl.js

@@ -1,8 +0,0 @@
-import { isMobile as r } from "../functions/theme.js";
-const t = (l) => {
-  const n = r();
-  return l ? n ? l.mobile || l.main || null : l.main || null : null;
-};
-export {
-  t as useImageUrl
-};

package/packages/common/src/hooks/useImageVariant.js

@@ -1,11 +0,0 @@
-import { WidgetTemplate as l } from "../enums/enums.js";
-import { useImageUrl as o } from "./useImageUrl.js";
-const t = (m, a) => {
-  var r;
-  const i = o(m.images);
-  let e = null;
-  return a !== l.OVERLAY ? e = i : e = ((r = m.images) == null ? void 0 : r.cover) || "", e || (e = m.imagePlaceholder), e;
-};
-export {
-  t as useImageVariant
-};

package/packages/common/src/hooks/useLeadForm.js

@@ -1,129 +0,0 @@
-import { useState as m, useEffect as v } from "react";
-import { ConstantsContext as z } from "../providers/ConstantsProvider.js";
-import { useConstantContext as A } from "./useConstantContext.js";
-import { countries as H } from "../constants/constants.js";
-import { getDefaultCountryByCode as p, getDefaultCountryByLanguage as y, getCountryByCode as J } from "../functions/helpers.js";
-function X(g) {
-  const {
-    sdk: d,
-    fields: r = ["fullName", "email"],
-    campaignId: b = "",
-    campaignName: F = "",
-    contentType: D = "",
-    contentId: P = "",
-    contentName: w = "",
-    syncWithProfile: I = !1
-  } = g, { leadPhoneCountryCode: i, language: f } = A(z), [e, s] = m({
-    firstName: "",
-    lastName: "",
-    fullName: "",
-    email: "",
-    gender: "",
-    country: "",
-    phoneCountryCode: i ? p(i) : y(f || "en"),
-    phoneNumber: "",
-    customFields: {}
-  });
-  v(() => {
-    const t = i ? p(i) : y(f || "en");
-    s((n) => !n.phoneNumber || !n.phoneCountryCode ? { ...n, phoneCountryCode: t } : n);
-  }, [i, f]);
-  const [N, L] = m({}), [E, h] = m(!1), [S, x] = m(!1), [B, C] = m(null), O = () => C(null), _ = (t) => (n) => {
-    s((o) => ({
-      ...o,
-      [t]: n.target.value
-    }));
-  }, j = (t) => (n) => {
-    const o = n.target.value;
-    L((l) => ({ ...l, [t]: o }));
-  }, G = (t, n) => {
-    s((o) => ({
-      ...o,
-      phoneCountryCode: n
-    }));
-  }, T = (t, n) => {
-    s((o) => ({
-      ...o,
-      country: n || ""
-    }));
-  }, W = (t, n) => {
-    s((o) => ({
-      ...o,
-      gender: n || ""
-    }));
-  }, q = async () => {
-    if (I)
-      try {
-        const t = d.profile.getOwn();
-        if (e.fullName && r.includes("fullName") ? t.setName(e.fullName.trim()) : e.firstName && r.includes("firstName") && e.lastName && r.includes("lastName") ? t.setName(
-          e.firstName.trim() + " " + e.lastName.trim()
-        ) : e.firstName && r.includes("firstName") ? t.setName(e.firstName.trim()) : e.lastName && r.includes("lastName") && t.setName(e.lastName.trim()), e.email && r.includes("email") && t.setEmail(e.email.trim()), e.gender && r.includes("gender") && t.setGender(e.gender), e.country && r.includes("country")) {
-          const n = await d.profile.getCountries(), o = J(e.country), l = n.find((c) => c.name === (o == null ? void 0 : o.label));
-          l && t.setCountry(l.id);
-        }
-        e.phoneCountryCode && r.includes("phoneCountryCode") && t.setPhoneCountryCode(
-          "+" + e.phoneCountryCode.phone
-        ), e.phoneNumber && r.includes("phoneNumber") && t.setPhoneNumber(e.phoneNumber.trim()), await t.update();
-      } catch (t) {
-        console.warn("[LeadForm] Failed to sync profile data:", t);
-      }
-  };
-  return {
-    formData: e,
-    setFormData: s,
-    isLoading: E,
-    isSuccess: S,
-    error: B,
-    clearError: O,
-    handleInputChange: _,
-    handleCustomFieldChange: j,
-    customFieldsData: N,
-    handlePhoneCountryChange: G,
-    handleCountryChange: T,
-    handleGenderChange: W,
-    handleSubmit: async (t) => {
-      var c;
-      t && t.preventDefault(), C(null);
-      const n = {
-        firstName: e.firstName,
-        lastName: e.lastName,
-        fullName: e.fullName,
-        email: e.email,
-        gender: e.gender,
-        country: e.country,
-        phoneCountryCode: "+" + (((c = e.phoneCountryCode) == null ? void 0 : c.phone) ?? ""),
-        phoneNumber: e.phoneNumber,
-        campaignId: b,
-        campaignName: F,
-        contentType: D,
-        contentId: P,
-        contentName: w,
-        customFields: N
-      }, o = [
-        "firstName",
-        "lastName",
-        "fullName",
-        "email",
-        "gender",
-        "country",
-        "phoneCountryCode",
-        "phoneNumber",
-        "customFields"
-      ], l = Object.fromEntries(
-        Object.entries(n).map(([a, u]) => o.includes(a) ? a === "customFields" ? [a, u] : r.includes(a) && u !== "" && u !== null ? [a, u] : [a, null] : [a, u])
-      );
-      h(!0);
-      try {
-        await d.profile.collectLead(l), await q(), x(!0);
-      } catch {
-        C("leads.form.error");
-      } finally {
-        h(!1);
-      }
-    },
-    countries: H
-  };
-}
-export {
-  X as useLeadForm
-};

package/packages/common/src/hooks/useThemeMode.js

@@ -1,30 +0,0 @@
-import { useState as m, useCallback as f, useEffect as h } from "react";
-import { useColorScheme as w } from "../../../../node_modules/@mui/joy/styles/CssVarsProvider.js";
-const k = (d, r = "theme-mode") => {
-  const [l, u] = m(d), [o, c] = m(d), { mode: a, setMode: t } = w(), n = a || o, s = f(
-    (e) => {
-      c(e), t && t(e), typeof window < "u" && localStorage.setItem(r, e);
-    },
-    [t, r]
-  ), M = f(() => {
-    s(n === "light" ? "dark" : "light");
-  }, [n, s]);
-  return h(() => {
-    if (typeof window < "u" && window.matchMedia) {
-      const e = window.matchMedia("(prefers-color-scheme: dark)"), i = (g) => {
-        u(g.matches ? "dark" : "light");
-      };
-      return e.addEventListener("change", i), () => e.removeEventListener("change", i);
-    }
-  }, []), h(() => {
-    t && a !== o && (t(o), c(o));
-  }, [t]), {
-    mode: n,
-    toggleMode: M,
-    setMode: s,
-    systemPreference: l
-  };
-};
-export {
-  k as useThemeMode
-};