@streamlayer/react-ui 0.35.0 → 0.37.0

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export * from './ui/notifications/notification/question-inapp';
+export * from './ui/login';
+export * from './ui/gamification/onboarding';
+export * from './ui/gamification/tabs';
+export * from './ui/gamification/leaderboard-item-detail';
+export * from './ui/gamification/question';
+export * from './ui/gamification/question-list';
+export * from './ui/gamification/user-statistics';
+export * from './ui/gamification/vote';
+export * from './ui/demo';
+export * from './ui/gamification/points';
+export * from './ui/theme';
+export * from './ui/theme/theme';

package/lib/ui/app/Features/FeatureProvider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Features } from '@streamlayer/sdk-web-features';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+/** Here we check data, render loaders, load data and perform some side effects for the active feature */
+export declare const FeatureProvider: React.FC<{
+    feature: Features;
+    children: React.ReactNode;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/Features/Gamification/Leaderboard.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const Leaderboard: React.FC<{
+    store: ReturnType<Exclude<Gamification['leaderboardList'], undefined>['getStore']>;
+}>;

package/lib/ui/app/Features/Gamification/Question.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GamificationBackground } from '@streamlayer/feature-gamification';
+export declare const Question: React.FC<{
+    openedQuestion: Awaited<ReturnType<GamificationBackground['openedQuestion']['getValue']>>;
+    closeQuestion: () => void;
+    vote: (questionId: string, answerId: string) => void;
+}>;

package/lib/ui/app/Features/Gamification/QuestionsList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const QuestionsList: React.FC<{
+    store: ReturnType<Exclude<Gamification['questions'], undefined>['getStore']>;
+    openQuestion: (questionId: string) => void;
+}>;

package/lib/ui/app/Features/Gamification/Tabs.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type Gamification } from '@streamlayer/feature-gamification';
+export declare const Tabs: React.FC<{
+    gamification: Gamification;
+}>;

package/lib/ui/app/Features/Gamification/UserSummary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const UserSummary: React.FC<{
+    store: ReturnType<Exclude<Gamification['userSummary'], undefined>['getStore']>;
+}>;

package/lib/ui/app/Features/Gamification/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const GamificationOverlay: React.FC<{
+    gamification: GamificationClass;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/Features/Highlights/Insight.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insight: React.FC<{
+    openedInsight: Exclude<Highlights['openedInsight']['value'], undefined>;
+    closeHighlights: () => void;
+    closeInsight: () => void;
+}>;

package/lib/ui/app/Features/Highlights/Insights.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insights: React.FC<{
+    highlights: Highlights;
+    store: ReturnType<Exclude<Highlights['insights'], undefined>['getStore']>;
+}>;

package/lib/ui/app/Features/Highlights/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Highlights } from '@streamlayer/feature-gamification';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const HighlightsOverlay: React.FC<{
+    highlights: Highlights;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/Features/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Features } from '@streamlayer/sdk-web-features';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+/** render feature by type */
+export declare const ActiveFeature: React.FC<{
+    sdk: StreamLayerSDK;
+    feature: Features | null;
+}>;

package/lib/ui/app/Navigation/MastersNavigation/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ChannelsButtonId } from '../../../navigation/button/Channels';
+import { FeaturedGroupsButtonId } from '../../../navigation/button/FeaturedGroups';
+import { LeaderBoardButtonId } from '../../../navigation/button/LeaderBoard';
+export { ChannelsButtonId, LeaderBoardButtonId, FeaturedGroupsButtonId };
+export type AvailableOverlays = typeof ChannelsButtonId | typeof LeaderBoardButtonId | typeof FeaturedGroupsButtonId;
+export declare const MastersNavigation: React.FC<{
+    activeOverlay: AvailableOverlays;
+    setActiveOverlay: (overlay: AvailableOverlays) => void;
+    sdkReady: boolean;
+}>;

package/lib/ui/app/Navigation/MastersNavigation/index.js

@@ -1,27 +1,28 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { ChannelsButton as u, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as a, FeaturedGroupsButtonId as n } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButton as d, LeaderBoardButtonId as m } from "../../../navigation/button/LeaderBoard.js";
-import { Navigation as s } from "../../../navigation/masters.js";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { ChannelsButton as a, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
+import { FeaturedGroupsButton as u, FeaturedGroupsButtonId as n } from "../../../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButton as s, LeaderBoardButtonId as m } from "../../../navigation/button/LeaderBoard.js";
+import { Navigation as e } from "../../../navigation/masters.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
 import "../../../navigation/button/index.js";
 import "../../../navigation/button/styles.js";
 import "../../../navigation/index.js";
-const l = ({ activeOverlay: o, setActiveOverlay: t }) => /* @__PURE__ */ p(s, { children: [
-  /* @__PURE__ */ r(u, { active: o === i, onClick: () => t(i) }),
+const F = ({ activeOverlay: o, setActiveOverlay: t, sdkReady: p }) => /* @__PURE__ */ d(e, { children: [
+  /* @__PURE__ */ r(a, { active: o === i, onClick: () => t(i) }),
   /* @__PURE__ */ r(
-    a,
+    u,
     {
       active: o === n,
+      disabled: !p,
       onClick: () => {
         t(n);
       }
     }
   ),
   /* @__PURE__ */ r(
-    d,
+    s,
     {
       active: o === m,
       onClick: () => t(m)
@@ -32,5 +33,5 @@ export {
   i as ChannelsButtonId,
   n as FeaturedGroupsButtonId,
   m as LeaderBoardButtonId,
-  l as MastersNavigation
+  F as MastersNavigation
 };

package/lib/ui/app/Navigation/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { Overlays } from '..';
+import { ButtonProps } from '../../navigation/button';
+export declare const SDKNavigation: React.FC<{
+    customOverlays: Overlays;
+    activeButton?: ButtonProps['id'];
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/Notifications/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const SDKNotifications: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/app/masters.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export type Overlays = {};
+export type AppChildrenProps = {
+    enableSdk: () => void;
+    disableSdk: () => void;
+};
+export type AppProps = {
+    sdk: StreamLayerSDK;
+    event: string;
+    overlays?: Overlays;
+    children?: (methods: AppChildrenProps) => React.ReactNode;
+};
+export declare const MastersApp: React.FC<AppProps>;

package/lib/ui/app/{index.js → masters.js}

@@ -1,20 +1,21 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { useStore as c } from "@nanostores/react";
-import { useState as f } from "react";
-import { FeatureType as u } from "@streamlayer/sdk-web-types";
-import { StreamLayerThemeProvider as S } from "../theme/index.js";
-import { mastersVariables as b } from "../theme/masters.js";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { StreamLayerThemeProvider as u } from "../theme/index.js";
+import { mastersVariables as f } from "../theme/masters.js";
 import { ActiveFeature as v } from "./Features/index.js";
-import { MastersNavigation as h } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as y, SDKScrollContainer as A } from "./styles.js";
-import { useSdkFeature as F } from "./useSdkFeature.js";
-import { FeaturedGroupsButtonId as m } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as B } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as l } from "../navigation/button/LeaderBoard.js";
+import { MastersNavigation as y } from "./Navigation/MastersNavigation/index.js";
+import { SDKContainer as S, SDKScrollContainer as h } from "./styles.js";
+import { useMastersApp as b } from "./useMastersApp.js";
+import { useSdkFeature as k } from "./useSdkFeature.js";
+import { ChannelsButtonId as A } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as a } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as B } from "../navigation/button/FeaturedGroups.js";
 import "../theme/theme.js";
 import "@linaria/core";
 import "../theme/constants.js";
+import "react";
+import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
+import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
 import "./Features/Gamification/index.js";
 import "./Features/Gamification/Question.js";
@@ -74,21 +75,30 @@ import "../navigation/index.js";
 import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const Rr = ({ sdk: r, overlays: p, children: e }) => {
-  const [t, a] = f(m), i = c(r.enabled) === "on", [, s] = F(r), d = () => {
-    r.initializeApp().then(() => {
-      a(m), r.openFeature(u.GAMES);
-    });
-  };
-  return /* @__PURE__ */ o(S, { style: { height: "100%" }, children: /* @__PURE__ */ n(y, { className: b, children: [
-    i && /* @__PURE__ */ o(h, { activeOverlay: t, setActiveOverlay: a }),
-    /* @__PURE__ */ n(A, { "data-nav": i.toString(), children: [
-      /* @__PURE__ */ o("div", { style: { display: !i || t === B ? "block" : "none" }, children: e && e({ enableSdk: d, disableSdk: r.disableApp }) }),
-      /* @__PURE__ */ o("div", { style: { display: t === l ? "block" : "none" }, children: p && t === l && p[t] }),
-      i && t === m && /* @__PURE__ */ o(v, { feature: s, sdk: r })
+const F = ({ sdk: o }) => {
+  const [, i] = k(o);
+  return /* @__PURE__ */ t(v, { feature: i, sdk: o });
+}, Ur = ({ sdk: o, overlays: i, children: p, event: n }) => {
+  const { sdkEnabled: m, sdkReady: s, activeOverlay: r, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = b(
+    o,
+    n
+  );
+  return /* @__PURE__ */ t(u, { style: { height: "100%" }, children: /* @__PURE__ */ e(S, { className: f, children: [
+    m && /* @__PURE__ */ t(
+      y,
+      {
+        sdkReady: s,
+        activeOverlay: r,
+        setActiveOverlay: d
+      }
+    ),
+    /* @__PURE__ */ e(h, { "data-nav": m.toString(), children: [
+      /* @__PURE__ */ t("div", { style: { display: !m || r === A ? "block" : "none" }, children: p && p({ enableSdk: l, disableSdk: c }) }),
+      /* @__PURE__ */ t("div", { style: { display: r === a ? "block" : "none" }, children: i && r === a && i[r] }),
+      m && r === B && /* @__PURE__ */ t(F, { sdk: o })
     ] })
   ] }) });
 };
 export {
-  Rr as App
+  Ur as MastersApp
 };

package/lib/ui/app/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SDKContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKScrollContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/app/useMastersApp.d.ts

@@ -0,0 +1,21 @@
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { AvailableOverlays } from './Navigation/MastersNavigation';
+/**
+ * A hook that provides functionality for managing the StreamLayerSDK in the Masters app.
+ * - On activate FG+ button, the SDK is initialized and the FG+ overlay is opened.
+ * - On activate Channels or Leaderboard button, the SDK is disabled and the FG+ overlay is closed.
+ * - On sdk status change, if sdk disabled (f.e some errors occurred), the SDK is disabled and the FG+ overlay is closed.
+ * @param sdk - The StreamLayerSDK instance to use.
+ * @param event - The name of the event to create a session for.
+ * @returns An object containing various functions and state values for managing the SDK and app overlays.
+ * @returns disableSdk - A function that disables the SDK and closes the FG+ overlay.
+ * @returns enableSdk - A function that initializes the SDK and opens the FG+ overlay.
+ */
+export declare const useMastersApp: (sdk: StreamLayerSDK, event: string) => {
+    sdkEnabled: boolean;
+    sdkReady: boolean;
+    activeOverlay: any;
+    activateAndLoadOverlay: (overlay: AvailableOverlays) => void;
+    enableSdk: () => void;
+    disableSdk: () => void;
+};

package/lib/ui/app/useMastersApp.js

@@ -0,0 +1,47 @@
+import { useStore as d } from "@nanostores/react";
+import { useState as u, useCallback as f, useEffect as S } from "react";
+import { FeatureType as b } from "@streamlayer/sdk-web-types";
+import "react/jsx-runtime";
+import { ChannelsButtonId as l } from "../navigation/button/Channels.js";
+import { FeaturedGroupsButtonId as r } from "../navigation/button/FeaturedGroups.js";
+import "../navigation/button/LeaderBoard.js";
+import "../navigation/masters.js";
+import "@linaria/react";
+import "../icons/index.js";
+import "../navigation/button/index.js";
+import "../navigation/button/styles.js";
+import "../navigation/index.js";
+const R = (e, s) => {
+  const [m, n] = u(!1), o = d(e.status) === "ready", [a, p] = u(r), i = f(
+    (t) => {
+      p(t), t === r ? (e.createEventSession(s), e.openFeature(b.GAMES)) : e.closeFeature();
+    },
+    [s, e]
+  );
+  return S(() => {
+    !o && a === r && (p(l), e.closeFeature());
+  }, [o, a, e]), {
+    sdkEnabled: m,
+    sdkReady: o,
+    activeOverlay: a,
+    activateAndLoadOverlay: i,
+    enableSdk: () => {
+      e.initializeApp().then(({ enabled: t, err: c }) => {
+        if (n(!0), c) {
+          i(l);
+          return;
+        }
+        if (t) {
+          i(r);
+          return;
+        }
+      });
+    },
+    disableSdk: () => {
+      n(!1), e.disableApp();
+    }
+  };
+};
+export {
+  R as useMastersApp
+};

package/lib/ui/app/useSdkFeature.d.ts

@@ -0,0 +1,9 @@
+import { Features } from '@streamlayer/sdk-web-features';
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { FeatureType } from '@streamlayer/sdk-web-types';
+/**
+ * A hook that manages the active feature of a StreamLayerSDK instance.
+ * @param sdk - The StreamLayerSDK instance to manage the feature for.
+ * @returns A tuple containing the active feature type and the active feature instance, or null if there is no active feature.
+ */
+export declare const useSdkFeature: (sdk: StreamLayerSDK) => [FeatureType, Features | null];

package/lib/ui/demo/DemoPoints.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const DemoPoints: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/Gamification.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const GamificationComponent: React.FC<{
+    gamification: Gamification;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/Highlights.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import type { Highlights } from '@streamlayer/feature-gamification';
+export declare const HighlightsComponent: React.FC<{
+    highlights: Highlights;
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/Login.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const LoginComponent: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/components/EventProvider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EventProvider: React.FC;

package/lib/ui/demo/components/Insight.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insight: React.FC<{
+    openedInsight: Exclude<Highlights['openedInsight']['value'], undefined>;
+    closeHighlights: () => void;
+    closeInsight: () => void;
+}>;

package/lib/ui/demo/components/Insights.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Highlights } from '@streamlayer/feature-gamification';
+export declare const Insights: React.FC<{
+    highlights: Highlights;
+    store: ReturnType<Exclude<Highlights['insights'], undefined>['getStore']>;
+}>;

package/lib/ui/demo/components/Leaderboard.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const Leaderboard: React.FC<{
+    store: ReturnType<Exclude<Gamification['leaderboardList'], undefined>['getStore']>;
+}>;

package/lib/ui/demo/components/Question.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GamificationBackground } from '@streamlayer/feature-gamification';
+export declare const Question: React.FC<{
+    openedQuestion: Awaited<ReturnType<GamificationBackground['openedQuestion']['getValue']>>;
+    closeQuestion: () => void;
+    vote: (questionId: string, answerId: string) => void;
+}>;

package/lib/ui/demo/components/QuestionsList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const QuestionsList: React.FC<{
+    store: ReturnType<Exclude<Gamification['questions'], undefined>['getStore']>;
+    openQuestion: (questionId: string) => void;
+}>;

package/lib/ui/demo/components/UserSummary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Gamification } from '@streamlayer/feature-gamification';
+export declare const UserSummary: React.FC<{
+    store: ReturnType<Exclude<Gamification['userSummary'], undefined>['getStore']>;
+}>;

package/lib/ui/demo/components/index.d.ts

@@ -0,0 +1,7 @@
+export { UserSummary } from './UserSummary';
+export { QuestionsList } from './QuestionsList';
+export { Question } from './Question';
+export { Onboarding } from '../../gamification/onboarding';
+export { Insights } from './Insights';
+export { Insight } from './Insight';
+export { Leaderboard } from './Leaderboard';

package/lib/ui/demo/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const Demo: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/ui/demo/index.js

@@ -1,16 +1,16 @@
-import { jsx as o, jsxs as u, Fragment as b } from "react/jsx-runtime";
-import { FeatureStatus as f } from "@streamlayer/sdk-web-interfaces";
+import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
+import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as g } from "@streamlayer/sdk-web-types";
-import { AvailableFeatures as A } from "@streamlayer/sdk-web-features";
-import { useState as E, useMemo as h, useEffect as F } from "react";
+import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
+import { useState as b, useMemo as h, useEffect as C } from "react";
 import "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web-api";
 import { useStore as c } from "@nanostores/react";
-import { Notifications as D } from "../notifications/index.js";
-import { GamificationComponent as C } from "./Gamification.js";
-import { HighlightsComponent as N } from "./Highlights.js";
-import { LoginComponent as T } from "./Login.js";
-import { Buttons as H, Button as s } from "./styles.js";
+import { Notifications as F } from "../notifications/index.js";
+import { GamificationComponent as w } from "./Gamification.js";
+import { HighlightsComponent as G } from "./Highlights.js";
+import { LoginComponent as H } from "./Login.js";
+import { Buttons as x, Button as s } from "./styles.js";
 import "../notifications/notification/index.js";
 import "@streamlayer/sdk-web-notifications";
 import "../notifications/notification/onboarding-inapp/index.js";
@@ -87,62 +87,54 @@ import "@connectrpc/connect";
 import "@connectrpc/connect-web";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-var y;
-(function(t) {
-  t.SCHEMA = "schema", t.TOKEN = "token";
-})(y || (y = {}));
-var v;
-(function(t) {
-  t.DISABLED = "disabled", t.INITIALIZATION = "initialization", t.READY = "ready", t.FAILED = "failed", t.SUSPENDED = "suspended";
-})(v || (v = {}));
-const L = ({ activeFeature: t, sdk: r }) => {
-  const [e, n] = E(null), { organizationSettings: a, streamSettings: l } = c(r.sdkStore), S = h(() => {
-    const i = (l == null ? void 0 : l.data) || (a == null ? void 0 : a.data);
-    return i != null && i.overlays ? i.overlays : [];
-  }, [a, l]);
-  F(() => {
-    const i = r.getFeatures();
-    if (t)
-      for (const [m, p] of i)
-        m === t ? p.status.get() === f.Suspended && (p.enable(), n(p)) : p.status.get() === f.Ready && p.disable();
+const A = ({ activeFeature: r, sdk: o }) => {
+  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = c(o.sdkStore), y = h(() => {
+    const t = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
+    return t != null && t.overlays ? t.overlays : [];
+  }, [a, u]);
+  C(() => {
+    const t = o.getFeatures();
+    if (r)
+      for (const [m, p] of t)
+        m === r ? p.status.get() === l.Suspended && (p.enable(), n(p)) : p.status.get() === l.Ready && p.disable();
     else {
-      for (const [, m] of i)
-        m.status.get() === f.Ready && m.disable();
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
       n(null);
     }
     return () => {
-      for (const [, m] of i)
-        m.status.get() === f.Ready && m.disable();
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
     };
-  }, [t, r]);
-  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(C, { gamification: e, sdk: r }) }) : /* @__PURE__ */ o("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(N, { highlights: e, sdk: r }) }) : /* @__PURE__ */ o("div", { children: "wait highlights..." }) : /* @__PURE__ */ o("div", { children: "unknown feature" }) : null, [r, e]);
-  return /* @__PURE__ */ u("div", { children: [
-    /* @__PURE__ */ u(H, { children: [
-      /* @__PURE__ */ o(s, { onClick: () => r.closeFeature(), disabled: !d, children: "close" }),
-      /* @__PURE__ */ o(s, { onClick: () => r.logout(), children: "logout" }),
-      S.map((i) => /* @__PURE__ */ u(
+  }, [r, o]);
+  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(G, { highlights: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [o, e]);
+  return /* @__PURE__ */ f("div", { children: [
+    /* @__PURE__ */ f(x, { children: [
+      /* @__PURE__ */ i(s, { onClick: () => o.closeFeature(), disabled: !d, children: "close" }),
+      /* @__PURE__ */ i(s, { onClick: () => o.logout(), children: "logout" }),
+      y.map((t) => /* @__PURE__ */ f(
         s,
         {
-          onClick: () => r.openFeature(i.type),
-          disabled: !(i.type in A),
-          "data-enable_sdk_button": i.enableSdkButton.toString(),
-          "data-selected": i.type === t,
+          onClick: () => o.openFeature(t.type),
+          disabled: !(t.type in S),
+          "data-enable_sdk_button": t.enableSdkButton.toString(),
+          "data-selected": t.type === r,
           children: [
-            /* @__PURE__ */ o("img", { src: i.icon, alt: "" }),
-            i.name
+            /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
+            t.name
           ]
         },
-        i.name
+        t.name
       ))
     ] }),
     d
   ] });
-}, ui = ({ sdk: t }) => {
-  const r = c(t.organizationStore()), e = c(t.getUserStore()), n = c(t.getActiveFeature());
-  return r.loading ? /* @__PURE__ */ o("div", { children: "authentication..." }) : r.data ? e.loading ? /* @__PURE__ */ o("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ u(b, { children: [
-    /* @__PURE__ */ o(D, { notificationsStore: t.getNotificationsStore() }),
-    /* @__PURE__ */ o(L, { sdk: t, activeFeature: n })
-  ] }) : /* @__PURE__ */ o(T, { sdk: t }) : /* @__PURE__ */ o("div", { children: "wrong sdk key..." });
+}, ui = ({ sdk: r }) => {
+  const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
+  return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
+    /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
+    /* @__PURE__ */ i(A, { sdk: r, activeFeature: n })
+  ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
 };
 export {
   ui as Demo

package/lib/ui/demo/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DemoContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const UserStatisticsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Buttons: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Button: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

package/lib/ui/gamification/common-header/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type CommonHeaderProps = {
+    icon?: string;
+    comeBack?: () => void;
+    close?: () => void;
+};
+export declare const CommonHeader: React.FC<CommonHeaderProps>;
+export {};

package/lib/ui/gamification/common-header/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Button: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const HeaderIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;