fansunited-frontend-components 0.0.1-RC1 → 0.0.1-RC11

package/README.md

@@ -0,0 +1,332 @@
+# Fans United Frontend Components
+
+A collection of components for Fans United widgets providing interactive experiences and engagement tools.
+
+## Installation
+
+```bash
+npm install fansunited-frontend-components fansunited-frontend-core
+```
+
+```bash
+yarn add fansunited-frontend-components fansunited-frontend-core
+```
+
+> **Note**: Both packages are required. `fansunited-frontend-core` provides the types and core utilities, while `fansunited-frontend-components` provides the components.
+
+## Quick Start
+
+```tsx
+import React from "react";
+import { ClassicQuizPlay } from "fansunited-frontend-components";
+import { ClassicQuizPlayProps, WidgetTemplate } from "fansunited-frontend-core";
+
+const App: React.FC = () => {
+  const props: ClassicQuizPlayProps = {
+    entityId: "your-quiz-id",
+    sdk: yourSDKInstance,
+    template: WidgetTemplate.STANDARD, // Also SPLIT and OVERLAY templates are available
+    language: "en", // "bg" | "en" | "ro" | "pt" | "sr" | "fr" | "de" | "it" | "fr-be" | "fr" | "pl" | "pt" | "pt-br"
+  };
+
+  return (
+    <div>
+      <h1>My App</h1>
+      <ClassicQuizPlay {...props} />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Components
+
+### ClassicQuizPlay
+
+An interactive quiz component that supports multiple templates and customization options.
+
+#### Props
+
+All props are defined in `fansunited-frontend-core`.
+
+```tsx
+import {
+  ClassicQuizPlayProps,
+  WidgetTemplate,
+  LanguageType,
+  CustomThemeOptions,
+  LeadsOptions,
+} from "fansunited-frontend-core";
+```
+
+#### Required Props
+
+| Prop       | Type                 | Description                    |
+| ---------- | -------------------- | ------------------------------ |
+| `entityId` | `string`             | Unique identifier for the quiz |
+| `sdk`      | `FansUnitedSDKModel` | FansUnited SDK instance        |
+| `template` | `WidgetTemplate`     | Widget template type           |
+| `language` | `LanguageType`       | Display language               |
+
+#### Optional Props
+
+| Prop                     | Type                 | Description                                                    |
+| ------------------------ | -------------------- | -------------------------------------------------------------- |
+| `themeOptions`           | `CustomThemeOptions` | Custom theme configuration                                     |
+| `showAnswerExplanations` | `boolean`            | Show explanations tab after answers finishing the Classic Quiz |
+| `leads`                  | `LeadsOptions`       | Lead collection configuration                                  |
+| `imagePosition`          | `"left" \| "right"`  | Image position (STANDARD template only)                        |
+
+#### Templates
+
+```tsx
+import { WidgetTemplate } from "fansunited-frontend-core";
+
+// Standard template with optional image positioning
+const standardProps: ClassicQuizPlayProps = {
+  template: WidgetTemplate.STANDARD,
+  imagePosition: "left", // or 'right'
+  // ... other props
+};
+
+// Other templates
+const overlayProps: ClassicQuizPlayProps = {
+  template: WidgetTemplate.OVERLAY, // WidgetTemplate.SPLIT
+  // imagePosition not available for non-standard templates
+  // ... other props
+};
+```
+
+## Theming
+
+Customize the appearance using theme options:
+
+```tsx
+import { CustomThemeOptions } from "fansunited-frontend-core";
+
+// Default theme options
+const themeOptions: CustomThemeOptions = {
+  mode: "light", // or 'dark'
+  colorSchemes: {
+    light: {
+      palette: {
+        success: {
+          plainColor: "#4CAF50",
+          outlinedBorder: "#4CAF50",
+        },
+        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",
+        },
+        danger: {
+          softBg: "#FEE4E2",
+          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",
+    },
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 444,
+      md: 600,
+      lg: 900,
+      xl: 1200,
+      xxl: 1536,
+    },
+  },
+  spacingScale: {
+    "3xs": "2px",
+    "2xs": "4px",
+    xs: "8px",
+    sm: "12px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    "2xl": "40px",
+    "3xl": "48px",
+  },
+  customFontFamily: {
+    light: {
+      primary: "Ubuntu, sans-serif",
+      secondary: "Roboto, sans-serif",
+    },
+    dark: {
+      primary: "Ubuntu, sans-serif",
+      secondary: "Roboto, sans-serif",
+    },
+  },
+  customRadius: {
+    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",
+    },
+  },
+  border: {
+    light: {
+      size: "1px",
+    },
+    dark: {
+      size: "2px",
+    },
+  },
+};
+
+<ClassicQuizPlay {...otherProps} themeOptions={themeOptions} />;
+```
+
+## Lead Collection
+
+Enable lead capture functionality:
+
+```tsx
+import { LeadsOptions } from "fansunited-frontend-core";
+
+const leads: LeadsOptions = {
+  position: "before", // "before" | "after"
+  fields: ["fullName"], // | "fullName" | "firstName" | "lastName" | "email" | "gender" | "country" | "phoneCountryCode" | "phoneNumber";
+  campaignId: "test-quizzes",
+  campaignName: "Test Quizzes",
+  phoneCountryCode: "359", // When not provided will set the phone country code from component language prop. So for example if the language is "bg" and phoneCountryCode is not provided, it will fallback to "359"
+};
+
+<ClassicQuizPlay {...otherProps} leads={leads} />;
+```
+
+## TypeScript Support
+
+This package is built with TypeScript and provides full type definitions. Import types from `fansunited-frontend-core`:
+
+```tsx
+import {
+  ClassicQuizPlayProps,
+  WidgetTemplate,
+  WidgetProps,
+  CustomThemeOptions,
+  LeadsOptions,
+  AnalyticsEvent,
+} from "fansunited-frontend-core";
+```
+
+## Peer Dependencies
+
+```json
+{
+  "react": "^18.0.0",
+  "react-dom": "^18.0.0"
+}
+```
+
+## Bundle Size
+
+The component uses shadow DOM and emotion for isolated styling, ensuring no CSS conflicts with your application.
+
+## Examples
+
+### Basic Quiz
+
+```tsx
+import { ClassicQuizPlay } from "fansunited-frontend-components";
+import { WidgetTemplate } from "fansunited-frontend-core";
+
+<ClassicQuizPlay
+  entityId="quiz-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.STANDARD}
+  language="en"
+/>;
+```
+
+### Customized Quiz
+
+```tsx
+<ClassicQuizPlay
+  entityId="quiz-123"
+  sdk={sdkInstance}
+  template={WidgetTemplate.STANDARD}
+  imagePosition="right"
+  language="en"
+  showAnswerExplanations={true}
+  themeOptions={{
+    mode: "dark",
+  }}
+  leads={{
+    phoneCountryCode: "44",
+  }}
+/>
+```
+
+## Related Packages
+
+- [`fansunited-frontend-core`](https://www.npmjs.com/package/fansunited-frontend-core) - Core types and utilities

package/components.d.ts

@@ -0,0 +1,5 @@
+import { ClassicQuizPlayProps } from 'fansunited-frontend-core';
+
+declare const ClassicQuizPlay: React.FC<ClassicQuizPlayProps>;
+export default ClassicQuizPlay;
+//# sourceMappingURL=components.d.ts.map

package/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAIhE,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAC1B,CAAC;AAE3B,eAAe,eAAe,CAAC"}