fansunited-frontend-components 0.0.1-RC8 → 0.0.1

package/README.md

@@ -0,0 +1,323 @@
+# Fans United Frontend Components
+
+A collection of interactive components for Fans United widgets providing engaging experiences and 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 types and utilities, while `fansunited-frontend-components` provides the UI components.
+
+## Quick Start
+
+```tsx
+import React from "react";
+import { ClassicQuizPlay } from "fansunited-frontend-components";
+import { ClassicQuizPlayProps, WidgetTemplate } from "fansunited-frontend-core";
+import { FansUnitedSDK } from "fansunited-sdk-esm";
+
+const sdk = FansUnitedSDK({
+  // your config here
+});
+
+const App: React.FC = () => {
+  const props: ClassicQuizPlayProps = {
+    entityId: "your-quiz-id",
+    sdk,
+    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
+
+Interactive quiz component with multiple templates and customization options.
+
+#### Required Props
+
+| Prop       | Type                 | Description             |
+| ---------- | -------------------- | ----------------------- |
+| `entityId` | `string`             | Classic Quiz identifier |
+| `sdk`      | `FansUnitedSDKModel` | SDK instance            |
+| `template` | `WidgetTemplate`     | Layout template         |
+| `language` | `LanguageType`       | Display language        |
+
+#### Optional Props
+
+| Prop                     | Type                 | Description                             |
+| ------------------------ | -------------------- | --------------------------------------- |
+| `themeOptions`           | `CustomThemeOptions` | Theme configuration                     |
+| `showAnswerExplanations` | `boolean`            | Show explanations after quiz completion |
+| `leads`                  | `LeadsOptions`       | Lead collection settings                |
+| `imagePosition`          | `"left" \| "right"`  | Image position (STANDARD template only) |
+
+#### Templates
+
+```tsx
+import { WidgetTemplate, ClassicQuizPlayProps } 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": ">=16.8.0",
+  "react-dom": ">=16.8.0"
+}
+```
+
+#### Bundle
+
+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

@@ -1 +1,4 @@
-export * from './index'
+import { ClassicQuizPlayProps } from 'fansunited-frontend-core';
+
+export declare const ClassicQuizPlay: React.FC<ClassicQuizPlayProps>;
+//# 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,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CACjC,CAAC"}