@streamlayer/react-ui 0.100.5 → 1.0.0

package/lib/ui/app/app/Notifications/Onboarding/Notification/styles.js

@@ -0,0 +1,50 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../../../icons/index.js";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c3q0amv",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
+  class: "cqihknq",
+  propsAsIs: !1
+}), n = () => o, p = /* @__PURE__ */ s(n())({
+  name: "CloseIcon",
+  class: "cl5ln9o",
+  propsAsIs: !0
+}), l = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t1bejf60",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("img")({
+  name: "SponsorLogo",
+  class: "sb0t4y8",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "PresentsTitle",
+  class: "p1nmyo08",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Subtitle",
+  class: "sgd2pup",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d6e19hw",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("button")({
+  name: "ActionButton",
+  class: "a17h53j4",
+  propsAsIs: !1
+});
+export {
+  f as ActionButton,
+  p as CloseIcon,
+  c as CloseIconWrap,
+  a as Container,
+  I as Description,
+  i as PresentsTitle,
+  r as SponsorLogo,
+  m as Subtitle,
+  l as Title
+};

package/lib/ui/app/{Notifications → app/Notifications}/Onboarding/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { type Notification } from '@streamlayer/sdk-web-notifications';
-import { type AppNodeRef } from '../../masters';
-import { ResponsiveStore } from '../../useSdkResponsive';
+import { type AppNodeRef } from '../../..';
+import { ResponsiveStore } from '../../../useSdkResponsive';
 export declare const Onboarding: React.FC<{
     sdk: StreamLayerSDK;
     notification: Notification;

package/lib/ui/app/app/Notifications/Onboarding/index.js

@@ -0,0 +1,172 @@
+import { jsx as n, jsxs as k, Fragment as T } from "react/jsx-runtime";
+import { styled as S } from "@linaria/react";
+import { useStore as F } from "@nanostores/react";
+import { useRef as j, useState as A, useMemo as _, useLayoutEffect as z, useEffect as E } from "react";
+import { FeatureType as G } from "@streamlayer/sdk-web-types";
+import { useImagesPreload as M } from "../../../useImagesPreload.js";
+import { scrollIntoAppView as P } from "../../../useSdkScroll.js";
+import { OnboardingUI as R } from "../../../../gamification/onboarding/index.js";
+import { ModalPortal as V } from "../../../../modal/index.js";
+import { ShowIn as W } from "../../../../show-in/index.js";
+import { m as $ } from "../../../../../mastersLogoSolid-B4Dz-vm1.js";
+import { Onboarding as x } from "./Notification/index.js";
+const y = [{
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_1.png",
+  tagline: "Featured groups+ experience",
+  headline: /* @__PURE__ */ k(T, {
+    children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Featured Groups +"]
+  })
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
+  headline: "Get real-time insights"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",
+  headline: "Predictions, trivia & polls synced to match play"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",
+  headline: "Win points for every answer you get right"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
+  headline: "Compete against friends on the leaderboard"
+}], O = /* @__PURE__ */ S("div")({
+  name: "OnboardingContainer",
+  class: "o1xcysoz",
+  propsAsIs: !1
+}), q = () => W, D = /* @__PURE__ */ S(q())({
+  name: "OnboardingNotificationContainer",
+  class: "oejzp3v",
+  propsAsIs: !0
+}), L = /* @__PURE__ */ S("div")({
+  name: "InnerContainer",
+  class: "i134gfua",
+  propsAsIs: !1
+}), U = ({
+  deepLink: d,
+  onboardingOpts: r,
+  notification: o,
+  gamification: u,
+  loading: i,
+  renderToNode: v,
+  sdk: l
+}) => {
+  var a, h, b, f, C, m, s;
+  const c = F(u.friends.getStore()), [e, I] = A(void 0), g = _(() => {
+    var p, w;
+    const t = l.getInviter();
+    return t ? (w = (p = c.data) == null ? void 0 : p.find(({
+      slId: B
+    }) => B === t)) == null ? void 0 : w.name : "";
+  }, [c.data, l]);
+  return E(() => {
+    const t = d.$store.subscribe((p) => {
+      p && I(p.data);
+    });
+    return () => {
+      t();
+    };
+  }, [d.$store]), /* @__PURE__ */ n(O, {
+    children: /* @__PURE__ */ n(R, {
+      loading: i,
+      renderToNode: v,
+      rules: [{
+        label: "Answer as many questions as you like.",
+        icon: "icon-btn-feature-groups"
+      }, {
+        label: "Win points for each correct trivia or prediction answer.",
+        icon: "icon-thumb-up"
+      }, {
+        label: "Top the leader board and best your friends.",
+        icon: "icon-trophy"
+      }],
+      rulesBtnLabel: (a = r.rules) == null ? void 0 : a.buttonLabel,
+      rulesTitle: (h = r.rules) == null ? void 0 : h.heading,
+      termsTitle: "Terms and Conditions",
+      termsText: (b = r.rules) == null ? void 0 : b.terms,
+      steps: y,
+      primaryColor: (f = r.inviteCard) == null ? void 0 : f.iconColor,
+      inviteLink: e,
+      inviteCardTitle: (C = r.inviteCard) == null ? void 0 : C.heading,
+      inviteCardSubtext: (m = r.inviteCard) == null ? void 0 : m.subtext,
+      inviteCardBtnLabel: (s = r.inviteCard) == null ? void 0 : s.buttonLabel,
+      onClose: () => {
+        var t;
+        (t = o.close) == null || t.call(o);
+      },
+      gamification: u,
+      sdk: l,
+      inviterName: g
+    })
+  });
+}, se = ({
+  sdk: d,
+  notification: r,
+  saveHeight: o,
+  style: u,
+  appNode: i,
+  sdkInDesktopView: v,
+  responsiveStore: l
+}) => {
+  var m;
+  const c = j(null), e = r.data.onboarding, [I, g] = A(e == null ? void 0 : e.instantOpen), a = d.getFeature(G.GAMES), h = _(() => y == null ? void 0 : y.map(({
+    graphicSrc: s
+  }) => s), []), {
+    screen: b
+  } = F(l, {
+    keys: ["screen"]
+  });
+  (m = e == null ? void 0 : e.titleCard) != null && m.media && (e.titleCard.media.sponsorLogo = $), z(() => {
+    var s;
+    o(((s = c.current) == null ? void 0 : s.getBoundingClientRect().height) || 0);
+  }, [o]);
+  const {
+    loading: f,
+    throttled: C
+  } = M(h);
+  return I && a && e && i.current && !C ? /* @__PURE__ */ n(V, {
+    container: i,
+    useContainer: !v,
+    children: /* @__PURE__ */ n(U, {
+      notification: r,
+      setOpened: g,
+      gamification: a,
+      onboardingOpts: e,
+      deepLink: a.deepLink,
+      loading: f,
+      renderToNode: i,
+      sdk: d
+    })
+  }) : /* @__PURE__ */ k(T, {
+    children: [/* @__PURE__ */ n(L, {
+      ref: c,
+      style: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      children: /* @__PURE__ */ n(x, {
+        close: () => {
+        },
+        action: () => {
+        },
+        onboarding: e
+      })
+    }), /* @__PURE__ */ n(D, {
+      style: u,
+      hiding: r.hiding,
+      children: /* @__PURE__ */ n(L, {
+        children: /* @__PURE__ */ n(x, {
+          close: r.close,
+          action: () => {
+            var t;
+            g(!0), (((t = i.current) == null ? void 0 : t.getBoundingClientRect().y) || 0) < 0 && P(i, b.size, {
+              behavior: "smooth"
+            });
+          },
+          onboarding: e
+        })
+      })
+    })]
+  });
+};
+export {
+  se as Onboarding
+};

package/lib/ui/app/{Notifications → app/Notifications}/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import type { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../masters';
-import { ResponsiveStore } from '../useSdkResponsive';
-import { ScrollStore } from '../useSdkScroll';
+import type { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../..';
+import { ResponsiveStore } from '../../useSdkResponsive';
+import { ScrollStore } from '../../useSdkScroll';
 export declare const SDKNotifications: React.FC<{
     sdk: StreamLayerSDK;
     scrollNode: ScrollNodeRef;

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

@@ -1,15 +1,15 @@
 import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
 import { cx as N } from "@linaria/core";
-import { useStore as g } from "@nanostores/react";
+import { useStore as a } from "@nanostores/react";
 import { useState as p, useMemo as T, useEffect as h, useRef as E, useCallback as w } from "react";
-import { r as O } from "../../../index-Bicco-Aq.js";
+import { r as O } from "../../../../index-Bicco-Aq.js";
 import { eventBus as b } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
-import { useMastersContext as q } from "../useMastersContext.js";
-import { scrollIntoAppView as C } from "../useSdkScroll.js";
-import { QuestionTypeData as R } from "../../gamification/constants.js";
-import { Notification as V } from "../../gamification/question/notification/index.js";
-import { PredictionResult as P } from "../../gamification/question/notification/prediction-result/index.js";
+import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { useAppContext as q } from "../useAppContext.js";
+import { scrollIntoAppView as C } from "../../useSdkScroll.js";
+import { QuestionTypeData as R } from "../../../gamification/constants.js";
+import { Notification as V } from "../../../gamification/question/notification/index.js";
+import { PredictionResult as P } from "../../../gamification/question/notification/prediction-result/index.js";
 import { Onboarding as x } from "./Onboarding/index.js";
 import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
 const j = (o) => {
@@ -34,12 +34,12 @@ const j = (o) => {
   var s, e;
   const {
     sdkInDesktopView: d
-  } = g(i, {
+  } = a(i, {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: n
   } = q(), [r, l, m] = j(t.id);
-  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
+  return t.type === g.QUESTION ? /* @__PURE__ */ f(D, {
     children: [/* @__PURE__ */ c(A, {
       ref: r,
       children: /* @__PURE__ */ c(V, {
@@ -60,7 +60,7 @@ const j = (o) => {
         })
       }), /* @__PURE__ */ c(Q, {}, t.id)]
     })]
-  }) : t.type === a.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : t.type === g.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
     style: {
       height: t.hiding ? 0 : l
     },
@@ -68,7 +68,7 @@ const j = (o) => {
     close: t.close,
     hiding: t.hiding,
     ...t.data.question
-  }) : t.type === a.ONBOARDING ? /* @__PURE__ */ c(x, {
+  }) : t.type === g.ONBOARDING ? /* @__PURE__ */ c(x, {
     style: {
       height: t.hiding ? 0 : l
     },
@@ -79,7 +79,7 @@ const j = (o) => {
     appNode: u,
     responsiveStore: i
   }) : null;
-}, F = "p1d7yse1", L = ({
+}, F = "p6vl6vu", L = ({
   pill: o,
   setPill: t,
   appNode: u,
@@ -88,15 +88,15 @@ const j = (o) => {
   responsiveStore: n,
   scrollStore: r
 }) => {
-  var y, k;
+  var k, y;
   const {
     screen: l
-  } = g(n, {
+  } = a(n, {
     keys: ["screen"]
   }), {
     tabsShown: m,
     scrollPosition: s
-  } = g(r, {
+  } = a(r, {
     keys: ["tabsShown", "scrollPosition"]
   });
   h(() => {
@@ -104,7 +104,7 @@ const j = (o) => {
   }, [s, n, t]);
   const e = n.get().sdkInDesktopView ? u : i;
   return !o || !e.current ? null : O.createPortal(/* @__PURE__ */ c(U, {
-    title: o.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((k = R[(y = o.data) == null ? void 0 : y.questionType]) == null ? void 0 : k.label) || "notification"}`,
+    title: o.type === g.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = o.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
     onClick: () => {
       var I;
       n.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
@@ -124,7 +124,7 @@ const j = (o) => {
   appNode: d,
   scrollStore: n
 }) => {
-  const [r] = p(o.getNotificationsStore()), l = g(r), [m, s] = p(null), e = T(() => o.getActiveNotification(), [o, l]);
+  const [r] = p(o.getNotificationsStore()), l = a(r), [m, s] = p(null), e = T(() => o.getActiveNotification(), [o, l]);
   return h(() => {
     e && b.emit("notification", {
       action: "rendered",

package/lib/ui/app/{Notifications → app/Notifications}/styles.js

@@ -1,25 +1,25 @@
 import { styled as s } from "@linaria/react";
-import { Pill as n } from "../../gamification/question/notification/pill/index.js";
-import { ShowIn as o } from "../../show-in/index.js";
+import { Pill as n } from "../../../gamification/question/notification/pill/index.js";
+import { ShowIn as o } from "../../../show-in/index.js";
 const e = () => o, l = /* @__PURE__ */ s(e())({
   name: "Container",
-  class: "ctckejh",
+  class: "c1cu0box",
   propsAsIs: !0
 }), i = /* @__PURE__ */ s("div")({
   name: "InnerContainer",
-  class: "i1ri7tzr",
+  class: "i1p534h4",
   propsAsIs: !1
-}), r = () => i, m = /* @__PURE__ */ s(r())({
+}), t = () => i, m = /* @__PURE__ */ s(t())({
   name: "HiddenContainer",
-  class: "h1ng1qh5",
+  class: "hyh76ez",
   propsAsIs: !0
 }), f = /* @__PURE__ */ s("div")({
   name: "NotificationRefreshing",
-  class: "nruq6ik",
+  class: "n1pj3cvw",
   propsAsIs: !1
-}), t = () => n, I = /* @__PURE__ */ s(t())({
+}), r = () => n, I = /* @__PURE__ */ s(r())({
   name: "Pill",
-  class: "pj6uyys",
+  class: "pk13by5",
   propsAsIs: !0
 });
 export {

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

@@ -3,7 +3,7 @@ import { useStore as i } from "@nanostores/react";
 import { useState as c, useEffect as f } from "react";
 import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as S } from "@streamlayer/sdk-web-types";
-import { Points as l } from "../../gamification/points/index.js";
+import { Points as l } from "../../../gamification/points/index.js";
 const a = ({ gamification: e }) => {
   const s = e.userSummary.$store, [r, u] = c(0);
   return f(() => {

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export type AppAppChildrenProps = {
+    activateEventWithId: (event: string) => void;
+    deactivate: () => void;
+};
+export type AppAppProps = {
+    sdk: StreamLayerSDK;
+    event?: string;
+};
+export declare const App: React.FC<AppAppProps>;

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

@@ -0,0 +1,101 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { useStore as N } from "@nanostores/react";
+import { useAnalyticsListener as m, newTabLinkListener as A, appScrollListener as C, appClickListener as L } from "../../../hooks/analytics.js";
+import { useRef as d, useEffect as S, useMemo as x } from "react";
+import { SDKContainer as D, SDKScrollContainer as F } from "../styles.js";
+import { useSdkFeature as b } from "../useSdkFeature.js";
+import { useSdkResponsive as y } from "../useSdkResponsive.js";
+import { useSdkScroll as E } from "../useSdkScroll.js";
+import { resetCss as v } from "../../theme/theme.js";
+import { ActiveFeature as K, StandaloneFeature as j } from "./Features/index.js";
+import { SDKNavigation as R } from "./Navigation/index.js";
+import { SDKNotifications as w } from "./Notifications/index.js";
+import { useAppApp as I } from "./useApp.js";
+import { AppContext as M } from "./useAppContext.js";
+const P = ({ sdk: e, className: n, scrollStore: t, appNode: l, scrollNode: o, responsiveStore: r }) => {
+  const [, s] = b(e);
+  return /* @__PURE__ */ i(
+    K,
+    {
+      className: n,
+      scrollNode: o,
+      appNode: l,
+      scrollStore: t,
+      feature: s,
+      responsiveStore: r,
+      sdk: e
+    }
+  );
+}, V = ({ sdk: e, className: n, appNode: t, responsiveStore: l }) => {
+  const o = N(e.featuresList.getStore());
+  return o ? Array.from(o, (r) => {
+    const s = e.getFeature(r);
+    return s ? /* @__PURE__ */ i(
+      j,
+      {
+        className: n,
+        appNode: t,
+        feature: s,
+        responsiveStore: l,
+        sdk: e
+      },
+      r
+    ) : null;
+  }) : null;
+}, Z = ({ sdk: e, event: n }) => {
+  const t = d(null), l = d(null), [o] = y(t), [r, s] = E(t, o), { sdkEnabled: a, sdkReady: c, activateEventWithId: u, deactivate: p, isLogged: g } = I(e);
+  S(() => {
+    n ? (e.createEventSession(n), u(n)) : p();
+  }, [n, u, p, e]), m(t, { enabled: a, event: "click", listener: A }), m(r, {
+    enabled: a,
+    event: "scrollend",
+    listener: C,
+    useDomNode: !0
+  }), m(r, {
+    enabled: a,
+    event: "click",
+    listener: L,
+    useDomNode: !0
+  });
+  const h = x(() => ({ sdk: e }), [e]);
+  return S(() => {
+    import("./Features/Gamification/gamification-feature.js");
+  }, []), /* @__PURE__ */ i(M.Provider, { value: h, children: /* @__PURE__ */ f(D, { ref: t, children: [
+    a && /* @__PURE__ */ i(R, { sdk: e }),
+    /* @__PURE__ */ f(F, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
+      c && /* @__PURE__ */ i(
+        w,
+        {
+          sdk: e,
+          scrollNode: r,
+          headerNode: l,
+          appNode: t,
+          scrollStore: s,
+          responsiveStore: o
+        }
+      ),
+      c && /* @__PURE__ */ i(
+        P,
+        {
+          scrollStore: s,
+          responsiveStore: o,
+          scrollNode: r,
+          appNode: t,
+          className: v,
+          sdk: e
+        }
+      ),
+      c && /* @__PURE__ */ i(V, { responsiveStore: o, appNode: t, className: v, sdk: e })
+    ] }),
+    a && !g && /* @__PURE__ */ i(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
+        children: "You are not logged in."
+      }
+    )
+  ] }) });
+};
+export {
+  Z as App
+};

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

@@ -0,0 +1,19 @@
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+/**
+ * A hook that provides functionality for managing the StreamLayerSDK in the App 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.
+ * @returns An object containing various functions and state values for managing the SDK and app overlays.
+ * @returns deactivate - A function that disables the SDK and closes the FG+ overlay.
+ * @returns activateEventWithId - A function that initializes the SDK and opens the FG+ overlay.
+ * With event (The id of the event to create a session for.) as a parameter.
+ */
+export declare const useAppApp: (sdk: StreamLayerSDK) => {
+    sdkEnabled: boolean;
+    sdkReady: boolean;
+    activateEventWithId: (event: string) => void;
+    deactivate: () => void;
+    isLogged: boolean;
+};

package/lib/ui/app/app/useApp.js

@@ -0,0 +1,45 @@
+import { useStore as n } from "@nanostores/react";
+import { useRef as g, useState as m, useEffect as s } from "react";
+import { FeatureType as E } from "@streamlayer/sdk-web-types";
+const I = (e) => {
+  const a = g(""), [o, r] = m(!1), c = n(e.status), p = n(e.sdkStore.slStreamId), i = n(e.userId()), f = n(e.getActiveFeature()), u = c === "ready" && !!p.data;
+  s(() => {
+    const t = e.getFeature(E.GAMES);
+    t && (t.closeQuestion(), t.closeUser());
+  }, [f, e]);
+  const l = (t) => {
+    a.current = t, r(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: A, err: S }) => {
+      if (!S && A) {
+        e.isUserAuthorized().then((v) => {
+          v || e.disableApp();
+        });
+        return;
+      }
+    });
+  }, d = () => {
+    r(!1), e.disableApp();
+  };
+  return s(() => {
+    if (!i) {
+      u && e.disableApp();
+      return;
+    }
+    if (i && a.current && o) {
+      e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
+        e.createEventSession(a.current);
+      });
+      return;
+    }
+  }, [i]), s(() => () => {
+    r(!1), e.disableApp();
+  }, [r, e]), {
+    sdkEnabled: o,
+    sdkReady: u,
+    activateEventWithId: l,
+    deactivate: d,
+    isLogged: !!i
+  };
+};
+export {
+  I as useAppApp
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const AppContext: import("react").Context<{
+    sdk: StreamLayerSDK | null;
+}>;
+export declare const useAppContext: () => {
+    sdk: StreamLayerSDK | null;
+};

package/lib/ui/app/app/useAppContext.js

@@ -0,0 +1,8 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({
+  sdk: null
+}), p = () => e(o);
+export {
+  o as AppContext,
+  p as useAppContext
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type AppNode = HTMLDivElement | null;
+export type AppNodeRef = React.MutableRefObject<AppNode>;
+export type ScrollNode = HTMLDivElement | null;
+export type ScrollNodeRef = React.MutableRefObject<ScrollNode>;
+export type HeaderNode = HTMLDivElement | null;
+export type HeaderNodeRef = React.MutableRefObject<HeaderNode>;

package/lib/ui/app/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,11 @@
+/// <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;
+    className?: string;
+    noWait?: boolean;
+}>;

package/lib/ui/app/masters/Features/FeatureProvider.js

@@ -0,0 +1,38 @@
+import { jsx as i } from "react/jsx-runtime";
+import { styled as u } from "@linaria/react";
+import { useStore as e } from "@nanostores/react";
+import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
+const o = /* @__PURE__ */ u("div")({
+  name: "LoadingContainer",
+  class: "l9si06t",
+  propsAsIs: !1
+}), v = ({
+  feature: n,
+  sdk: s,
+  children: a,
+  className: r,
+  noWait: d
+}) => {
+  const f = e(n.status), t = e(s.sdkStore.slStreamId);
+  if (!d) {
+    if (t != null && t.loading && !t.data)
+      return /* @__PURE__ */ i(o, {
+        className: r,
+        children: "Event is loading..."
+      });
+    if (!(t != null && t.data))
+      return /* @__PURE__ */ i(o, {
+        className: r,
+        children: "Event is forbidden..."
+      });
+    if (f !== p.Ready)
+      return /* @__PURE__ */ i(o, {
+        className: r,
+        children: "Wait feature..."
+      });
+  }
+  return a;
+};
+export {
+  v as FeatureProvider
+};

package/lib/ui/app/masters/Features/Gamification/Friends.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Friends: React.FC<{
+    deepLink?: string;
+}>;