fansunited-widget-client-configuration 1.3.0-RC1 → 1.4.0

package/README.md

@@ -104,7 +104,7 @@ const labels = {
 
 const  App = () => {
 return (
-<ClassicQuizManager
+<ConfigurationManager
 	fansUnitedApiKey={'your-api-key'}
 	fansUnitedClientId={'your-client-id'}
 	labels={labels}/>
@@ -146,4 +146,18 @@ Here is all information about **`LabelsModel`**:
 | `addPreference` | Add new preference button title | Add Preference |
 | `selectCategories` | Info text for selecting categories for new preference creation |Select categories for new preference |
 | `uniqueCategoriesIdErrorMessage` | Error validation message when new category added doesn't have unique ID | Categories' IDs must be unique! |
-| `uniquePreferencesIdErrorMessage` | Error validation message when new preference added doesn't have unique ID | Preferences' IDs must be unique! |
+| `uniquePreferencesIdErrorMessage` | Error validation message when new preference added doesn't have unique ID | Preferences' IDs must be unique! |
+
+## Changelog
+
+### 1.4.0 - 2025-11-29
+
+- **Added:**
+  - User-Centric Widgets configuration management tab with full CRUD operations
+  - Multi-tab configuration form with 6 sections: General, Firebase, Theme Options, Leads, Miscellaneous, and Legacy
+  - Raw JSON mode toggle for advanced configuration editing
+  - Integrated color pickers for theme customization
+  - Support for light and dark mode color schemes
+  - Customizable spacing scales, typography, border sizes, and border radius values
+  - Lead form configuration with field management and country code selection
+  - Firebase integration settings configuration

package/components/Tabs/UserCentricWidgets/ConfigurationForm.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+interface ClientApiKey {
+    value: string;
+    label: string;
+}
+interface ConfigurationFormProps {
+    title: string;
+    description: string;
+    config: any;
+    clientApiKeys: ClientApiKey[];
+    onTitleChange: (value: string) => void;
+    onDescriptionChange: (value: string) => void;
+    onConfigChange: (config: any) => void;
+    onClose: () => void;
+    onSave: () => void;
+    isSubmitting: boolean;
+    isEditing: boolean;
+}
+declare const ConfigurationForm: React.FC<ConfigurationFormProps>;
+export default ConfigurationForm;

package/components/Tabs/UserCentricWidgets/LeadsConfiguration.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface LeadsConfigurationProps {
+    config: any;
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const LeadsConfiguration: React.FC<LeadsConfigurationProps>;
+export default LeadsConfiguration;

package/components/Tabs/UserCentricWidgets/LegacyConfiguration.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface LegacyConfigurationProps {
+    config: any;
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const LegacyConfiguration: React.FC<LegacyConfigurationProps>;
+export default LegacyConfiguration;

package/components/Tabs/UserCentricWidgets/MiscConfiguration.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface MiscConfigurationProps {
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const MiscConfiguration: React.FC<MiscConfigurationProps>;
+export default MiscConfiguration;

package/components/Tabs/UserCentricWidgets/ThemeOptionsConfiguration.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface ThemeOptionsConfigurationProps {
+    onConfigChange: (path: string[], value: any) => void;
+    getConfigValue: (path: string[], defaultValue?: any) => any;
+}
+declare const ThemeOptionsConfiguration: React.FC<ThemeOptionsConfigurationProps>;
+export default ThemeOptionsConfiguration;

package/components/Tabs/UserCentricWidgets/UserCentricWidgets.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const UserCentricWidgets: React.FC;
+export default UserCentricWidgets;

package/components/Tabs/UserCentricWidgets/defaultThemeOptions.d.ts

@@ -0,0 +1,182 @@
+declare const defaultThemeOptions: {
+    mode: string;
+    spacingScale: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    colorSchemes: {
+        light: {
+            palette: {
+                success: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                danger: {
+                    softBg: string;
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                primary: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                    onPrimary: string;
+                    primaryContainer: string;
+                };
+                warning: {
+                    softBg: string;
+                    plainColor: string;
+                };
+                neutral: {
+                    softBg: string;
+                    solidBg: string;
+                    solidColor: string;
+                    plainActiveBg: string;
+                    outlinedBorder: string;
+                    outlinedColor: string;
+                    outlinedHoverBg: string;
+                    plainHoverBg: string;
+                    plainHoverColor: string;
+                    plainColor: string;
+                    solidHoverBg: string;
+                };
+                background: {
+                    surface: string;
+                    popup: string;
+                };
+            };
+            textPrimary: string;
+            textSecondary: string;
+            textColor: string;
+            textDisabled: string;
+            surface: string;
+            onSurface: string;
+            surfaceVariant: string;
+            surfaceTintDim: string;
+            surfaceInverse: string;
+            outlineEnabledBorder: string;
+            secondaryContainer: string;
+        };
+        dark: {
+            palette: {
+                primary: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                    onPrimary: string;
+                    primaryContainer: string;
+                };
+                success: {
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                danger: {
+                    softBg: string;
+                    plainColor: string;
+                    outlinedBorder: string;
+                };
+                warning: {
+                    softBg: string;
+                    plainColor: string;
+                };
+                neutral: {
+                    softBg: string;
+                    solidBg: string;
+                    solidColor: string;
+                    plainActiveBg: string;
+                    outlinedBorder: string;
+                    outlinedColor: string;
+                    outlinedHoverBg: string;
+                    plainHoverBg: string;
+                    plainHoverColor: string;
+                    plainColor: string;
+                    solidHoverBg: string;
+                };
+                background: {
+                    surface: string;
+                    popup: string;
+                };
+            };
+            textPrimary: string;
+            textSecondary: string;
+            textColor: string;
+            textDisabled: string;
+            surface: string;
+            onSurface: string;
+            surfaceVariant: string;
+            surfaceTintDim: string;
+            surfaceInverse: string;
+            outlineEnabledBorder: string;
+            secondaryContainer: string;
+        };
+    };
+    customFontFamily: {
+        light: {
+            primary: string;
+            secondary: string;
+        };
+        dark: {
+            primary: string;
+            secondary: string;
+        };
+    };
+    customRadius: {
+        light: {
+            none: string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            full: string;
+        };
+        dark: {
+            none: string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            full: string;
+        };
+    };
+    border: {
+        light: {
+            size: string;
+        };
+        dark: {
+            size: string;
+        };
+    };
+    imageBackgroundGradient: {
+        light: {
+            standard: string;
+            split: string;
+        };
+        dark: {
+            standard: string;
+            split: string;
+            overlay: string;
+        };
+    };
+    customBreakpoints: {
+        values: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            xxl: number;
+        };
+    };
+};
+export default defaultThemeOptions;