fansunited-frontend-core 0.0.71 → 0.0.72

package/README.md

@@ -12,6 +12,19 @@ npm install fansunited-frontend-core
 yarn add fansunited-frontend-core
 ```
 
+### Peer dependencies
+
+```json
+{
+  "react": ">=16.8.0",
+  "react-dom": ">=16.8.0"
+}
+```
+
+Nothing else is needed at runtime. MUI Joy, Emotion and i18next are all bundled into
+`index.es.js`, whose only bare imports are `react`, `react-dom` and `react/jsx-runtime` —
+in particular **no `@mui/*` package has to be installed**.
+
 ## Features
 
 - Complete TypeScript definitions for all Fans United components
@@ -159,7 +172,7 @@ import {
   useColors,
   useBorderSize,
   useInternalTheme,
-  useImageBackgroundGradient
+  useImageBackgroundGradient,
 } from "fansunited-frontend-core";
 ```
 
@@ -175,7 +188,7 @@ import {
   getDefaultCountryByLanguage,
   extractBrandingProperties,
   sanitizeBackgroundUrl,
-  mapContentTypeToConsentEntityType
+  mapContentTypeToConsentEntityType,
 } from "fansunited-frontend-core";
 ```
 
@@ -187,7 +200,7 @@ import {
   useThemeMode,
   useConstantContext,
   useImageVariant,
-  useLeadForm
+  useLeadForm,
 } from "fansunited-frontend-core";
 
 // Example: Lead form hook usage
@@ -197,7 +210,7 @@ const leadForm = useLeadForm({
   campaignId: "campaign-123",
   contentType: "quiz",
   contentId: "quiz-456",
-  syncWithProfile: true // Optional: sync form data to user profile
+  syncWithProfile: true, // Optional: sync form data to user profile
 });
 ```
 
@@ -207,7 +220,7 @@ const leadForm = useLeadForm({
 import {
   ThemeProvider,
   ConstantsProvider,
-  ConstantsContext
+  ConstantsContext,
 } from "fansunited-frontend-core";
 
 // Example: Theme provider setup
@@ -220,7 +233,7 @@ import {
   >
     <YourApp />
   </ConstantsProvider>
-</ThemeProvider>
+</ThemeProvider>;
 ```
 
 ### Components
@@ -252,7 +265,7 @@ import {
   validWidgetTypes,
   validWidgetTemplates,
   countries,
-  languageToCountryCode
+  languageToCountryCode,
 } from "fansunited-frontend-core";
 
 // Access predefined country list
@@ -316,8 +329,8 @@ unsubscribe();
 ```ts
 interface BetslipState {
   selections: BetslipSelectionInput[]; // current raw selections
-  stake: number;                        // parsed numeric stake (0 when empty)
-  totalOdds: number;                    // product of all selection decimal odds (0 when no selections)
+  stake: number; // parsed numeric stake (0 when empty)
+  totalOdds: number; // product of all selection decimal odds (0 when no selections)
 }
 ```
 
@@ -325,7 +338,7 @@ The typical integration pattern is:
 
 ```tsx
 // 1. Render the Betslip widget once at app root level
-<Betslip sdk={sdk} language="en" />
+<Betslip sdk={sdk} language="en" />;
 
 // 2. From anywhere in your app — e.g. a match card — call betslipApi
 import { betslipApi } from "fansunited-frontend-components";
@@ -472,9 +485,9 @@ const customTheme: CustomThemeOptions = {
     light: {
       textPrimary: "#333333",
       textBody: "#555555",
-      surface: "#ffffff"
-    }
-  }
+      surface: "#ffffff",
+    },
+  },
 };
 
 <ClassicQuizPlay
@@ -495,7 +508,7 @@ import {
   WidgetTemplate,
   LeadField,
   LeadCustomField,
-  LeadConsent
+  LeadConsent,
 } from "fansunited-frontend-core";
 
 const leadFields: LeadField[] = ["fullName", "email", "phoneNumber"];
@@ -506,15 +519,15 @@ const customFields: LeadCustomField[] = [
     label: "Company Name",
     type: "input",
     required: true,
-    placeholder: "Enter your company name"
-  }
+    placeholder: "Enter your company name",
+  },
 ];
 
 const consents: LeadConsent[] = [
   {
     id: "marketing",
-    label: "I agree to receive marketing communications"
-  }
+    label: "I agree to receive marketing communications",
+  },
 ];
 
 <CollectLead
@@ -528,9 +541,9 @@ const consents: LeadConsent[] = [
   syncWithProfile={true} // Sync form data to user profile
   labels={{
     title: "Get Exclusive Updates",
-    submitButtonLabel: "Subscribe Now"
+    submitButtonLabel: "Subscribe Now",
   }}
-/>
+/>;
 ```
 
 ### Profile Consents
@@ -547,13 +560,13 @@ const items: ConsentDef[] = [
     // Tokens link to the entity's branding.urls.
     body: "I accept the {{privacyPolicyUrl}} and the {{termsAndConditionsUrl}}",
     required: true, // optional, defaults to false — blocks the gate's CTA
-    position: "before" // ClassicQuizPlay only: "before" (start screen) | "after" (before submit)
+    position: "before", // ClassicQuizPlay only: "before" (start screen) | "after" (before submit)
   },
   {
     consentId: "marketing",
     body: "Send me news and offers by email",
-    defaultChecked: true // optional, defaults to false
-  }
+    defaultChecked: true, // optional, defaults to false
+  },
 ];
 
 // Predictor / TopX take the array directly
@@ -565,8 +578,8 @@ const consents: ConsentsConfig = {
   labels: {
     title: "Before we save your score",
     ctaLabel: "Continue",
-    requiredError: "Please accept the required consents to continue."
-  }
+    requiredError: "Please accept the required consents to continue.",
+  },
 };
 
 <ClassicQuizPlay {...otherProps} consents={consents} />;
@@ -578,14 +591,14 @@ const consents: ConsentsConfig = {
 import {
   ThemeProvider,
   CustomThemeOptions,
-  FontConfig
+  FontConfig,
 } from "fansunited-frontend-core";
 
 const customFont: FontConfig = {
   family: "Inter",
   url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
   weights: [400, 500, 600, 700],
-  display: "swap"
+  display: "swap",
 };
 
 const themeOptions: CustomThemeOptions = {
@@ -593,18 +606,18 @@ const themeOptions: CustomThemeOptions = {
   customFontFamily: {
     light: {
       primary: customFont,
-      secondary: "Arial, sans-serif"
+      secondary: "Arial, sans-serif",
     },
     dark: {
       primary: customFont,
-      secondary: "Arial, sans-serif"
-    }
+      secondary: "Arial, sans-serif",
+    },
   },
   spacingScale: {
     xs: "6px",
     sm: "12px",
     md: "18px",
-    lg: "24px"
+    lg: "24px",
   },
   colorSchemes: {
     dark: {
@@ -613,16 +626,16 @@ const themeOptions: CustomThemeOptions = {
       palette: {
         primary: {
           plainColor: "#3b82f6",
-          primaryContainer: "#1e40af"
-        }
-      }
-    }
-  }
+          primaryContainer: "#1e40af",
+        },
+      },
+    },
+  },
 };
 
 <ThemeProvider themeOptions={themeOptions}>
   <YourApp />
-</ThemeProvider>
+</ThemeProvider>;
 ```
 
 ### Using Hooks
@@ -632,7 +645,7 @@ import {
   useLeadForm,
   useThemeMode,
   useColors,
-  UseLeadFormParams
+  UseLeadFormParams,
 } from "fansunited-frontend-core";
 
 function MyComponent() {
@@ -646,17 +659,11 @@ function MyComponent() {
     fields: ["fullName", "email"],
     campaignId: "newsletter-2024",
     contentType: "quiz",
-    contentId: "quiz-123"
+    contentId: "quiz-123",
   };
 
-  const {
-    formData,
-    updateField,
-    submitForm,
-    isSubmitting,
-    isSuccess,
-    error
-  } = useLeadForm(leadFormParams);
+  const { formData, updateField, submitForm, isSubmitting, isSuccess, error } =
+    useLeadForm(leadFormParams);
 
   return (
     <div style={{ backgroundColor: colors.surface }}>
@@ -676,14 +683,14 @@ import {
   countries,
   languageToCountryCode,
   getDefaultCountryByLanguage,
-  getDefaultCountryByCode
+  getDefaultCountryByCode,
 } from "fansunited-frontend-core";
 
 // Get all available countries
 const allCountries = countries;
 
 // Get suggested countries only
-const suggestedCountries = countries.filter(country => country.suggested);
+const suggestedCountries = countries.filter((country) => country.suggested);
 
 // Get default country by language
 const defaultCountry = getDefaultCountryByLanguage("fr"); // Returns France
@@ -704,6 +711,13 @@ The package supports three main widget templates:
 
 This package is built with TypeScript and provides comprehensive type definitions for all exports. The types ensure type safety when working with widget configurations, theme options, and component props.
 
+The emitted declarations reference `@mui/joy` in three places: `CustomThemeOptions` and
+`CustomColors` extend Joy's theme option types, and the theme factories return Joy's `Theme`.
+`@mui/joy` still does not need to be installed — with `skipLibCheck: true` (the default in
+Vite, Next.js and CRA templates) TypeScript ignores the unresolved import and those members
+widen to `any`. Add `@mui/joy` as a dev-only dependency if you compile with
+`skipLibCheck: false`, or if you want autocomplete on custom theme options.
+
 ## License
 
 © Fans United Media. All rights reserved.

package/index.es.js

@@ -51506,7 +51506,7 @@ const II = typeof gr == "function" ? gr : gr.default, xm = (e, t) => t === "rtl"
     [t, d, n, i, r]
   );
   return { loading: c, pending: f, checked: d, setChecked: p, allRequiredChecked: m, submit: g };
-}, aL = "0.0.71";
+}, aL = "0.0.72";
 export {
   DE as AdditionalCTA,
   jE as BidiIsolate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fansunited-frontend-core",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "description": "Core types, components, providers and constants for Fans United widgets",
   "main": "index.es.js",
   "types": "index.d.ts",
@@ -12,9 +12,8 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.0.0"
   },
-  "dependencies": {
-    "i18next": "^25.2.1",
-    "i18next-browser-languagedetector": "^8.1.0",
-    "react-i18next": "^15.5.2"
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   }
 }