fansunited-frontend-core 0.0.19 → 0.0.20

package/README.md

@@ -27,12 +27,100 @@ yarn add fansunited-frontend-core
 
 ```tsx
 import {
+  // Component Props
   ClassicQuizPlayProps,
-  WidgetTemplate,
+  BaseClassicQuizPlayProps,
+  ClassicQuizAwarenessProps,
+  PollVoteProps,
+  BasePollVoteProps,
+  PersonalityQuizPlayProps,
+  BasePersonalityQuizPlayProps,
+  CollectLeadProps,
+  BaseCollectLeadProps,
+  CollectLeadFormProps,
+  CollectLeadMainProps,
   MainProps,
+
+  // Configuration Interfaces
+  Configuration,
+  ClassicQuizAwarenessConfiguration,
+  ClassicQuizPlayConfiguration,
+
+  // Theme and Styling
   CustomThemeOptions,
+  EnhancedCustomThemeOptions,
+  InternalCustomThemeOptions,
+  CustomColors,
+  InternalCustomColors,
+  CustomSpacingScale,
+  CustomBorderRadius,
+  CustomBorderSize,
+  CustomBreakpoints,
+  ImageBackgroundGradient,
+  FontConfig,
+  ThemeMode,
+
+  // Lead Management
   LeadsOptions,
-  AnalyticsEvent
+  LeadCustomField,
+  LeadConsent,
+  LeadLabels,
+  FormLeadLabels,
+
+  // Content and Branding
+  ContentInfo,
+  CampaignInfo,
+  BrandingInfo,
+  BrandingImages,
+  FormBrandingInfo,
+  FormBrandingImages,
+  BrandingColors,
+  BrandingUrls,
+
+  // CTA and User Interaction
+  CTADetails,
+  SignInCTADetails,
+  OnSuccessCTADetails,
+
+  // Analytics and Events
+  AnalyticsEvent,
+  UserState,
+
+  // Enums
+  WidgetTemplate
+} from "fansunited-frontend-core";
+```
+
+### Type Definitions
+
+```tsx
+import {
+  // Journey and Analytics Types
+  JourneyType,
+  StageType,
+  ActionType,
+  CTAType,
+  StagesType,
+  WidgetType,
+
+  // UI and Layout Types
+  LinkTargetType,
+  ContentViewType,
+  OptionsLayout,
+
+  // Internationalization
+  LanguageType,
+
+  // Lead Collection
+  LeadField,
+  LeadPosition,
+  CountryType,
+  ContentType,
+
+  // Hook Types
+  UseLeadFormParams,
+  UseLeadFormReturn,
+  LeadFormData
 } from "fansunited-frontend-core";
 ```
 
@@ -46,7 +134,8 @@ import {
   useCornerRadius,
   useColors,
   useBorderSize,
-  useInternalTheme
+  useInternalTheme,
+  useImageBackgroundGradient
 } from "fansunited-frontend-core";
 ```
 
@@ -57,8 +146,95 @@ import {
   stripHtmlTags,
   hexToRgb,
   isAndroid,
-  isMobile
+  isMobile,
+  getDefaultCountryByCode,
+  getDefaultCountryByLanguage,
+  extractBrandingProperties,
+  sanitizeBackgroundUrl,
+  mapContentTypeToConsentEntityType
+} from "fansunited-frontend-core";
+```
+
+### React Hooks
+
+```tsx
+import {
+  useImageUrl,
+  useThemeMode,
+  useConstantContext,
+  useImageVariant,
+  useLeadForm
+} from "fansunited-frontend-core";
+
+// Example: Lead form hook usage
+const leadForm = useLeadForm({
+  sdk: sdkInstance,
+  fields: ["fullName", "email"],
+  campaignId: "campaign-123",
+  contentType: "quiz",
+  contentId: "quiz-456"
+});
+```
+
+### React Providers
+
+```tsx
+import {
+  ThemeProvider,
+  ConstantsProvider,
+  ConstantsContext
 } from "fansunited-frontend-core";
+
+// Example: Theme provider setup
+<ThemeProvider themeOptions={customTheme}>
+  <ConstantsProvider
+    shadowRootElement={shadowRoot}
+    leadPhoneCountryCode="US"
+    language="en"
+    optionsLayout="twoByTwo"
+  >
+    <YourApp />
+  </ConstantsProvider>
+</ThemeProvider>
+```
+
+### Components
+
+```tsx
+import {
+  Spinner,
+  CollectLeadForm
+} from "fansunited-frontend-core";
+
+// Example: Spinner component
+<Spinner my={4} />
+
+// Example: Lead collection form
+<CollectLeadForm
+  sdk={sdkInstance}
+  fields={["fullName", "email"]}
+  labels={{
+    title: "Join Our Newsletter",
+    submitButtonLabel: "Subscribe"
+  }}
+/>
+```
+
+### Constants
+
+```tsx
+import {
+  validWidgetTypes,
+  validWidgetTemplates,
+  countries,
+  languageToCountryCode
+} from "fansunited-frontend-core";
+
+// Access predefined country list
+const countryOptions = countries;
+
+// Get country code by language
+const countryCode = languageToCountryCode["en"]; // "GB"
 ```
 
 ### Internationalization
@@ -86,22 +262,213 @@ initializeI18n("en");
 - Serbian (sr)
 - Slovak (sk)
 
-## Usage with Components
+## Usage Examples
+
+### Basic Widget Setup
 
 This package is designed to work with `fansunited-frontend-components`:
 
 ```tsx
 import { ClassicQuizPlay } from "fansunited-frontend-components";
-import { WidgetTemplate } from "fansunited-frontend-core";
+import { WidgetTemplate, CustomThemeOptions } from "fansunited-frontend-core";
+
+const customTheme: CustomThemeOptions = {
+  mode: "light",
+  colorSchemes: {
+    light: {
+      textPrimary: "#333333",
+      surface: "#ffffff"
+    }
+  }
+};
 
 <ClassicQuizPlay
   entityId="quiz-123"
   sdk={sdkInstance}
   template={WidgetTemplate.STANDARD}
   language="en"
+  themeOptions={customTheme}
+  imagePosition="left"
 />;
 ```
 
+### Lead Collection Setup
+
+```tsx
+import { CollectLead } from "fansunited-frontend-components";
+import {
+  WidgetTemplate,
+  LeadField,
+  LeadCustomField,
+  LeadConsent
+} from "fansunited-frontend-core";
+
+const leadFields: LeadField[] = ["fullName", "email", "phoneNumber"];
+
+const customFields: LeadCustomField[] = [
+  {
+    key: "company",
+    label: "Company Name",
+    type: "input",
+    required: true,
+    placeholder: "Enter your company name"
+  }
+];
+
+const consents: LeadConsent[] = [
+  {
+    id: "marketing",
+    label: "I agree to receive marketing communications"
+  }
+];
+
+<CollectLead
+  entityId="lead-form-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.OVERLAY}
+  language="en"
+  fields={leadFields}
+  customFields={customFields}
+  consents={consents}
+  labels={{
+    title: "Get Exclusive Updates",
+    submitButtonLabel: "Subscribe Now"
+  }}
+/>
+```
+
+### Theme Customization
+
+```tsx
+import {
+  ThemeProvider,
+  CustomThemeOptions,
+  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"
+};
+
+const themeOptions: CustomThemeOptions = {
+  mode: "dark",
+  customFontFamily: {
+    light: {
+      primary: customFont,
+      secondary: "Arial, sans-serif"
+    },
+    dark: {
+      primary: customFont,
+      secondary: "Arial, sans-serif"
+    }
+  },
+  spacingScale: {
+    xs: "6px",
+    sm: "12px",
+    md: "18px",
+    lg: "24px"
+  },
+  colorSchemes: {
+    dark: {
+      textPrimary: "#ffffff",
+      surface: "#1a1a1a",
+      palette: {
+        primary: {
+          plainColor: "#3b82f6",
+          primaryContainer: "#1e40af"
+        }
+      }
+    }
+  }
+};
+
+<ThemeProvider themeOptions={themeOptions}>
+  <YourApp />
+</ThemeProvider>
+```
+
+### Using Hooks
+
+```tsx
+import {
+  useLeadForm,
+  useThemeMode,
+  useColors,
+  UseLeadFormParams
+} from "fansunited-frontend-core";
+
+function MyComponent() {
+  // Theme utilities
+  const colors = useColors();
+  const { mode, setMode } = useThemeMode();
+
+  // Lead form management
+  const leadFormParams: UseLeadFormParams = {
+    sdk: sdkInstance,
+    fields: ["fullName", "email"],
+    campaignId: "newsletter-2024",
+    contentType: "quiz",
+    contentId: "quiz-123"
+  };
+
+  const {
+    formData,
+    updateField,
+    submitForm,
+    isSubmitting,
+    isSuccess,
+    error
+  } = useLeadForm(leadFormParams);
+
+  return (
+    <div style={{ backgroundColor: colors.surface }}>
+      <button onClick={() => setMode(mode === "light" ? "dark" : "light")}>
+        Toggle Theme
+      </button>
+      {/* Your form UI */}
+    </div>
+  );
+}
+```
+
+### Country and Language Utilities
+
+```tsx
+import {
+  countries,
+  languageToCountryCode,
+  getDefaultCountryByLanguage,
+  getDefaultCountryByCode
+} from "fansunited-frontend-core";
+
+// Get all available countries
+const allCountries = countries;
+
+// Get suggested countries only
+const suggestedCountries = countries.filter(country => country.suggested);
+
+// Get default country by language
+const defaultCountry = getDefaultCountryByLanguage("fr"); // Returns France
+
+// Get country by code
+const usCountry = getDefaultCountryByCode("US");
+```
+
+## Widget Templates
+
+The package supports three main widget templates:
+
+- **`WidgetTemplate.STANDARD`** - Traditional card layout with optional image positioning
+- **`WidgetTemplate.OVERLAY`** - Full-screen overlay presentation
+- **`WidgetTemplate.SPLIT`** - Split-screen layout with content and media sections
+
+## TypeScript Support
+
+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.
+
 ## License
 
 © Fans United Media. All rights reserved.

package/functions/helpers.d.ts

@@ -1,11 +1,11 @@
 import { BrandingColorsModel, BrandingModel, ConsentEntityType } from 'fansunited-sdk-esm';
 
-export declare const stripHtmlTags: (html: string) => string;
+export declare const stripHtmlTags: (html: string | null) => string;
 export declare const hexToRgb: (hex: string) => string;
 export declare const isAndroid: () => boolean;
 export declare const getDefaultCountryByCode: (phoneCountryCode: string | null) => import('..').CountryType | null;
 export declare const getDefaultCountryByLanguage: (language: string | null) => import('..').CountryType | null;
-export declare const extractBrandingProperties: (branding: BrandingModel) => {
+export declare const extractBrandingProperties: (branding: BrandingModel | null) => {
     brandingImage: string | null;
     brandingColors: BrandingColorsModel | null;
     brandingLogo: string | null;

package/functions/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/functions/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAI3F,eAAO,MAAM,aAAa,SAAU,MAAM,KAAG,MAK5C,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAS,MAAM,KAAG,MAUtC,CAAC;AAGF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,qBAAsB,MAAM,GAAG,IAAI,oCAItE,CAAC;AAEF,eAAO,MAAM,2BAA2B,aAAc,MAAM,GAAG,IAAI,oCAIlE,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAAc,aAAa;;;;CAehE,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAMhD,CAAC;AAEF,eAAO,MAAM,iCAAiC,SACtC,MAAM,GAAG,SAAS,GAAG,IAAI,KAC9B,iBAAiB,GAAG,SAsBtB,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/functions/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EAClB,MAAM,oBAAoB,CAAC;AAI5B,eAAO,MAAM,aAAa,SAAU,MAAM,GAAG,IAAI,KAAG,MAKnD,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAS,MAAM,KAAG,MAUtC,CAAC;AAGF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,qBAAsB,MAAM,GAAG,IAAI,oCAItE,CAAC;AAEF,eAAO,MAAM,2BAA2B,aAAc,MAAM,GAAG,IAAI,oCAIlE,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAAc,aAAa,GAAG,IAAI;;;;CAevE,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAMhD,CAAC;AAEF,eAAO,MAAM,iCAAiC,SACtC,MAAM,GAAG,SAAS,GAAG,IAAI,KAC9B,iBAAiB,GAAG,SAsBtB,CAAC"}