fansunited-widget-client-configuration 1.0.0-RC1

package/README.md

@@ -0,0 +1,128 @@
+# Configuration Management Widget
+
+Welcome to Fans United Configuration Management Widget. The widget allows staff members with sufficient permissions to update their different configurations. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to manage your configuration. With successful installation, you can manage your language, cache TTL and football assets configurations.
+
+## Installation and usage
+
+The easiest way to use fansunited-widget-client-configuration is to install it from npm as follows:
+
+```javascript
+npm  install  fansunited-widget-client-configuration
+```
+
+or:
+
+```javascript
+yarn  add  fansunited-widget-client-configuration
+```
+
+Here is an example how you can **integrate** Fans United Classic Quiz Management Widget:
+
+```javascript
+import { ConfigurationManager } from  'fansunited-widget-client-configuration';
+
+const  App = () => {
+return (
+<ConfigurationManager
+	fansUnitedApiKey={'your-api-key'}
+	fansUnitedClientId={'your-client-id'} />
+);
+}
+```
+
+## Notes
+
+- The widget is bundled as a React component and its usage is as simple as the **above example**
+
+- Don't worry about your project's CSS. The widget's styling is done with [Joy UI](https://mui.com/joy-ui/getting-started/) which is based on headless unstyle react components. This means that the widget's CSS will **NOT** affect yours.
+
+-  **Easy translation in every language.** For more information [check our Translation heading](#translation).
+
+## Props
+
+```javascript
+type ConfigurationManagerProps = {
+	fansUnitedApiKey: string;
+	fansUnitedClientId: string;
+	fansUnitedLanguage?: string;
+	fansUnitedEnvironment?: string;
+	labels?: LabelsModel;
+	hideSignOutButton?: boolean;
+};
+```
+
+Fans United Classic Quiz Management Widget depends on [Fans United JS SDK](https://docs.fansunitedmedia.com/sdks/js) and [Fans United Client API](https://docs.fansunitedmedia.com/apis/client.api). Thats why `fansUnitedApiKey` and `fansUnitedClientId` are **required**. They will be provided to you from Fans United team. For other optional props here is some information:
+
+-  `fansUnitedLanguage` - for our sports APIs FansUnited platform supports different languages. For now they are **Bulgarian** (bg), **English** (en), **Romanian** (ro), **Greek** (el), **Slovak** (sk), **Serbian** (sr) and **Hungarian** (hu). If no value given it will be set to **English** (en).
+
+-  `fansUnitedEnvironment` - You can run the widget in the following environments: **staging**, **production**, **watg** and **yolo**. If no value given it will be set to **production** (prod).
+
+-  `labels` - you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Match Quiz Management Widget is available in **English** so if no value is given, the widget will be translated in English.
+
+- `hideSignOutButton` - By default on the top right corner of the widget will be displayed a sign out button. To hide that button set this prop to true.
+
+## Translation
+
+You can easily translate Fans United Configuration Management Widget in your language! You just need to pass an object to `labels`  **prop** with concrete keys and values and that's it! Here's an example how you can do it:
+
+```javascript
+import { ConfigurationManager } from  'fansunited-widget-client-configuration';
+
+const labels = {
+	clientConfigErrorMessage: "There was a problem fetching client's configuration. Please try again",
+	userNotFound: 'User not found. Please try again',
+	language: 'Language',
+	cacheTTL: 'Cache TTL',
+	footballAssets: 'Football Assets',
+	soon: 'Soon',
+	update: 'Update Configuration',
+	configTitle: 'Configure Fans United',
+	configDescription: 'Customize different features of Fans United',
+	defaultLanguage: 'Default language',
+	defaultLanguageHelperText: 'What is the default language of your content? This field, if different from English, would be used in our translation tools.',
+	availableLanguages: 'Available languages',
+	availableLanguagesHelperText: 'In case your project is multi-lingual, select the available languages for your app.',
+	translationRules: 'Translation rules',
+	translationRulesHelperText: 'Select the default status when a game is automatically translated.',
+	gameStatus: 'Game status',
+	active: 'Active',
+	inactive: 'Inactive',
+	updateConfigMessage: 'You have successfully updated Language configuration',
+	updateConfigErrorMessage: 'There was a problem updating configuration. Please try again'
+
+};
+
+const  App = () => {
+return (
+<ClassicQuizManager
+	fansUnitedApiKey={'your-api-key'}
+	fansUnitedClientId={'your-client-id'}
+	labels={labels}/>
+);
+}
+```
+
+Here is all information about **`LabelsModel`**:
+
+| Key         | Description               | Default Value |
+| :-------------: |:-------------:| :-----:|
+| `clientConfigErrorMessage` | Toast error message when fetching client configuration fails. | There was a problem fetching client's configuration. Please try again |
+| `userNotFound` | On login screen when client gives invalid information about email or password. | User not found. Please try again |
+| `language` | Label for language tab. | Language |
+| `cacheTTL` | Label for cache TTL tab. | Cache TTL |
+| `footballAssets` | Label for football assets tab. | Football Assets |
+| `soon` | Label for soon chip on tabs. | Soon |
+| `update` | Label for management button. | Update Configuration |
+| `configTitle` | Title of the management screen. | Configure Fans United |
+| `configDescription` | Description of the management screen. | Customize different features of Fans United |
+| `defaultLanguage` | Label for default language select. | Default language |
+| `defaultLanguageHelperText` | Description for default language select. | What is the default language of your content? This field, if different from English, would be used in our translation tools. |
+| `availableLanguages` | Label for available languages group container. | Available languages |
+| `availableLanguagesHelperText` | Description for available languages container. | In case your project is multi-lingual, select the available languages for your app. |
+| `translationRules` | Label for translation rules table. | Translation rules |
+| `translationRulesHelperText` | Description for translation rules table. | Select the default status when a game is automatically translated. |
+| `gameStatus` | Label for column in translation rules table. | Game status |
+| `active` | Label for status option. | Active |
+| `inactive` | Label for status option. | Inactive |
+| `updateConfigMessage` | Toast success message when updating client configuration. | You have successfully updated Language configuration |
+| `updateConfigErrorMessage` | Toast error message when updating client configuration fails. | There was a problem updating configuration. Please try again |

package/components/Cards/ConfigWidgetCard.d.ts

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

package/components/Configuration.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const Configuration: () => React.JSX.Element;
+export default Configuration;

package/components/Main.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { default as LabelsModel } from '../models/Labels/LabelsModel';
+type MainProps = {
+    fansUnitedApiKey: string;
+    fansUnitedClientId: string;
+    fansUnitedLanguage?: string;
+    fansUnitedEnvironment?: string;
+    labels?: LabelsModel;
+    hideSignOutButton?: boolean;
+};
+declare const Main: React.FC<MainProps>;
+export default Main;

package/components/MainLayout.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+type MainLayoutProps = {
+    hideSignOutButton: boolean;
+    fansUnitedEnvironment: string;
+};
+declare const MainLayout: React.FC<MainLayoutProps>;
+export default MainLayout;

package/components/Tabs/Language.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { LanguageModel } from '../../models/Labels/LanguageModel';
+type LanguageProps = {
+    config: LanguageModel;
+    onChangeConfig: (languageConfig: LanguageModel) => void;
+};
+declare const Language: React.FC<LanguageProps>;
+export default Language;

package/configuration-manager.es.d.ts

@@ -0,0 +1,2 @@
+export * from './index'
+export {}