@streamlayer/react-ui 1.14.3 → 1.15.0

package/lib/app/app/Features/Gamification/Leaderboard.js

@@ -1,12 +1,13 @@
 import { jsx as r, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { styled as h } from "@linaria/react";
-import { useStore as i } from "@nanostores/react";
+import { useStore as n } from "@nanostores/react";
 import { useClipboardCopy as k } from "../../../useClipboardCopy.js";
 import { useRef as u } from "react";
 import { InviteLink as I } from "../../../../ui/gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
+import "@storybook/blocks";
 import "../../../../ui/icons/index.js";
 import "../../../../ui/gamification/leaderboard/list-item/styles.js";
 /* empty css                                    */
@@ -16,24 +17,24 @@ const C = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
   class: "i1odbhm4",
   propsAsIs: !1
-}), q = ({
+}), z = ({
   gamification: e,
   scrollNode: s,
   scrollStore: p
 }) => {
   const t = u(null), {
-    data: n,
+    data: i,
     hasMore: d,
     loading: m,
     key: l
-  } = i(e.leaderboardList.$store), {
+  } = n(e.leaderboardList.$store), {
     data: o
-  } = i(e.deepLink.$store), [a, c] = k(t);
-  return !n.length && !m ? /* @__PURE__ */ r(y, {
+  } = n(e.deepLink.$store), [a, c] = k(t);
+  return !i.length && !m ? /* @__PURE__ */ r(y, {
     deepLink: o
   }) : /* @__PURE__ */ f(L, {
     children: [/* @__PURE__ */ r(b, {
-      items: n,
+      items: i,
       scrollNode: s,
       scrollStore: p,
       fetchMore: e.leaderboardList.fetchMore,
@@ -51,5 +52,5 @@ const C = /* @__PURE__ */ h("div")({
   });
 };
 export {
-  q as Leaderboard
+  z as Leaderboard
 };

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

@@ -0,0 +1,4 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const StreamLayerSDKNotification: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/app/app/InApp/index.js

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useStore as p } from "@nanostores/react";
+import { useState as c, useMemo as s, useEffect as u } from "react";
+import { eventBus as f } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as n } from "@streamlayer/sdk-web-notifications";
+import { FeatureType as m, QuestionType as d } from "@streamlayer/sdk-web-types";
+import { InAppNotification as l } from "../../../ui/gamification/question/inapp/notification/index.js";
+import { InAppOnboarding as y } from "../../../ui/gamification/question/inapp/onboarding/index.js";
+import { InAppPredictionResult as I } from "../../../ui/gamification/question/inapp/prediction-result/index.js";
+const R = ({ sdk: o }) => {
+  const [r] = c(o.getNotificationsStore()), a = p(r), e = o.getFeature(m.GAMES), t = s(() => o.getActiveNotification(), [o, a]);
+  return u(() => {
+    t && f.emit("notification", {
+      action: "rendered",
+      payload: {
+        questionId: t.data.questionId,
+        questionType: t.data.questionType
+      }
+    });
+  }, [t]), t && t.type === n.QUESTION_RESOLVED ? t.data.question && t.data.questionType === d.PREDICTION ? /* @__PURE__ */ i(
+    I,
+    {
+      action: t.action,
+      close: t.close,
+      ...t.data.question
+    }
+  ) : null : t && t.type === n.ONBOARDING ? t.data.onboarding ? /* @__PURE__ */ i(y, { open: e == null ? void 0 : e.openFeature, close: t.close, ...t.data.onboarding }) : null : t && /* @__PURE__ */ i(l, { ...t.data, action: t.action });
+};
+export {
+  R as StreamLayerSDKNotification
+};

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

@@ -1,19 +1,19 @@
-import { jsx as r, jsxs as L, Fragment as x } from "react/jsx-runtime";
-import { styled as I } from "@linaria/react";
+import { jsx as n, jsxs as w, Fragment as O } from "react/jsx-runtime";
+import { styled as y } from "@linaria/react";
 import { useStore as T } from "@nanostores/react";
-import { useImagesPreload as O } from "../../../useImagesPreload.js";
-import { scrollIntoAppView as _ } from "../../../useSdkScroll.js";
-import { useRef as E, useState as A, useMemo as F, useLayoutEffect as M, useEffect as R } from "react";
-import { FeatureType as V } from "@streamlayer/sdk-web-types";
-import { OnboardingUI as W } from "../../../../ui/gamification/onboarding/index.js";
-import { ModalPortal as $ } from "../../../../ui/modal/index.js";
-import { ShowIn as j } from "../../../../ui/show-in/index.js";
-import { Onboarding as w } from "./Notification/index.js";
+import { useImagesPreload as _ } from "../../../useImagesPreload.js";
+import { scrollIntoAppView as E } from "../../../useSdkScroll.js";
+import { useRef as M, useState as A, useMemo as F, useLayoutEffect as R, useEffect as V } from "react";
+import { FeatureType as W } from "@streamlayer/sdk-web-types";
+import { OnboardingUI as $ } from "../../../../ui/gamification/onboarding/index.js";
+import { ModalPortal as j } from "../../../../ui/modal/index.js";
+import { ShowIn as P } from "../../../../ui/show-in/index.js";
+import { Onboarding as L } from "./Notification/index.js";
 const C = [{
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_1.png",
   tagline: "",
-  headline: /* @__PURE__ */ L(x, {
-    children: ["Welcome to ", /* @__PURE__ */ r("br", {}), " Live Challenge"]
+  headline: /* @__PURE__ */ w(O, {
+    children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Live Challenge"]
   })
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_2.png",
@@ -21,43 +21,48 @@ const C = [{
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_3.png",
   headline: "Win points and play against friends."
-}], P = /* @__PURE__ */ I("div")({
+}], q = /* @__PURE__ */ y("div")({
   name: "OnboardingContainer",
   class: "o1xni1kr",
   propsAsIs: !1
-}), q = () => j, z = /* @__PURE__ */ I(q())({
+}), z = () => P, D = /* @__PURE__ */ y(z())({
   name: "OnboardingNotificationContainer",
   class: "o1vnouv7",
   propsAsIs: !0
-}), S = /* @__PURE__ */ I("div")({
+}), x = /* @__PURE__ */ y("div")({
   name: "InnerContainer",
   class: "i59uefw",
   propsAsIs: !1
-}), D = ({
+}), G = /* @__PURE__ */ y("div")({
+  name: "OnboardingOverlap",
+  class: "ovnr8ov",
+  propsAsIs: !1
+}), U = ({
   deepLink: l,
   onboardingOpts: e,
   notification: o,
-  gamification: m,
+  gamification: p,
   loading: s,
-  sdk: d
+  sdk: d,
+  throttled: I
 }) => {
-  var c, a, b, h, f, v, i;
-  const p = T(m.friends.getStore()), [g, t] = A(void 0), y = F(() => {
-    var u, k;
-    const n = d.getInviter();
-    return n ? (k = (u = p.data) == null ? void 0 : u.find(({
+  var a, b, h, f, v, t, u;
+  const c = T(p.friends.getStore()), [r, k] = A(void 0), g = F(() => {
+    var m, S;
+    const i = d.getInviter();
+    return i ? (S = (m = c.data) == null ? void 0 : m.find(({
       slId: B
-    }) => B === n)) == null ? void 0 : k.name : "";
-  }, [p.data, d]);
-  return R(() => {
-    const n = l.$store.subscribe((u) => {
-      u && t(u.data);
+    }) => B === i)) == null ? void 0 : S.name : "";
+  }, [c.data, d]);
+  return V(() => {
+    const i = l.$store.subscribe((m) => {
+      m && k(m.data);
     });
     return () => {
-      n();
+      i();
     };
-  }, [l.$store]), /* @__PURE__ */ r(P, {
-    children: /* @__PURE__ */ r(W, {
+  }, [l.$store]), /* @__PURE__ */ w(q, {
+    children: [/* @__PURE__ */ n($, {
       loading: s,
       rules: [{
         label: "Answer as many questions as you like.",
@@ -69,94 +74,95 @@ const C = [{
         label: "Top the leader board and best your friends.",
         icon: "icon-trophy"
       }],
-      rulesBtnLabel: (c = e.rules) == null ? void 0 : c.buttonLabel,
-      rulesTitle: (a = e.rules) == null ? void 0 : a.heading,
+      rulesBtnLabel: (a = e.rules) == null ? void 0 : a.buttonLabel,
+      rulesTitle: (b = e.rules) == null ? void 0 : b.heading,
       termsTitle: "Terms and Conditions",
-      termsText: (b = e.rules) == null ? void 0 : b.terms,
+      termsText: (h = e.rules) == null ? void 0 : h.terms,
       steps: C,
-      primaryColor: (h = e.inviteCard) == null ? void 0 : h.iconColor,
-      inviteLink: g,
-      inviteCardTitle: (f = e.inviteCard) == null ? void 0 : f.heading,
-      inviteCardSubtext: (v = e.inviteCard) == null ? void 0 : v.subtext,
-      inviteCardBtnLabel: (i = e.inviteCard) == null ? void 0 : i.buttonLabel,
+      primaryColor: (f = e.inviteCard) == null ? void 0 : f.iconColor,
+      inviteLink: r,
+      inviteCardTitle: (v = e.inviteCard) == null ? void 0 : v.heading,
+      inviteCardSubtext: (t = e.inviteCard) == null ? void 0 : t.subtext,
+      inviteCardBtnLabel: (u = e.inviteCard) == null ? void 0 : u.buttonLabel,
       onClose: () => {
-        var n;
-        (n = o.close) == null || n.call(o);
+        var i;
+        (i = o.close) == null || i.call(o);
       },
-      gamification: m,
+      gamification: p,
       sdk: d,
-      inviterName: y
-    })
+      inviterName: g
+    }), I && /* @__PURE__ */ n(G, {})]
   });
-}, ne = ({
+}, te = ({
   sdk: l,
   notification: e,
   saveHeight: o,
-  style: m,
+  style: p,
   appNode: s,
   sdkInDesktopView: d,
-  responsiveStore: p
+  responsiveStore: I
 }) => {
-  const g = E(null), t = e.data.onboarding, [y, c] = A(t == null ? void 0 : t.instantOpen), a = l.getFeature(V.GAMES), b = F(() => C == null ? void 0 : C.map(({
-    graphicSrc: i
-  }) => i), []), {
+  const c = M(null), r = e.data.onboarding, [k, g] = A(r == null ? void 0 : r.instantOpen), a = l.getFeature(W.GAMES), b = F(() => C == null ? void 0 : C.map(({
+    graphicSrc: t
+  }) => t), []), {
     screen: h
-  } = T(p, {
+  } = T(I, {
     keys: ["screen"]
   });
-  M(() => {
-    var i;
-    o(((i = g.current) == null ? void 0 : i.getBoundingClientRect().height) || 0);
+  R(() => {
+    var t;
+    o(((t = c.current) == null ? void 0 : t.getBoundingClientRect().height) || 0);
   }, [o]);
   const {
     loading: f,
     throttled: v
-  } = O(b);
-  return y && a && t && s.current && !v ? /* @__PURE__ */ r($, {
+  } = _(b);
+  return k && a && r && s.current ? /* @__PURE__ */ n(j, {
     container: s,
     useContainer: !d,
-    children: /* @__PURE__ */ r(D, {
+    children: /* @__PURE__ */ n(U, {
+      throttled: v,
       notification: e,
-      setOpened: c,
+      setOpened: g,
       gamification: a,
-      onboardingOpts: t,
+      onboardingOpts: r,
       deepLink: a.deepLink,
       loading: f,
       renderToNode: s,
       sdk: l
     })
-  }) : /* @__PURE__ */ L(x, {
-    children: [/* @__PURE__ */ r(S, {
-      ref: g,
+  }) : /* @__PURE__ */ w(O, {
+    children: [/* @__PURE__ */ n(x, {
+      ref: c,
       style: {
         position: "absolute",
         visibility: "hidden"
       },
-      children: /* @__PURE__ */ r(w, {
+      children: /* @__PURE__ */ n(L, {
         close: () => {
         },
         action: () => {
         },
-        onboarding: t
+        onboarding: r
       })
-    }), /* @__PURE__ */ r(z, {
-      style: m,
+    }), /* @__PURE__ */ n(D, {
+      style: p,
       hiding: e.hiding,
-      children: /* @__PURE__ */ r(S, {
-        children: /* @__PURE__ */ r(w, {
+      children: /* @__PURE__ */ n(x, {
+        children: /* @__PURE__ */ n(L, {
           close: e.close,
           action: () => {
-            var n;
-            c(!0), (((n = s.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && _(s, h.size, {
+            var u;
+            g(!0), (((u = s.current) == null ? void 0 : u.getBoundingClientRect().y) || 0) < 0 && E(s, h.size, {
               behavior: "smooth"
             });
           },
-          onboarding: t
+          onboarding: r
         })
       })
     })]
   });
 };
 export {
-  ne as Onboarding
+  te as Onboarding
 };

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

@@ -1,5 +1,4 @@
 import { DebugProps } from '../../../utils/debug';
 export declare const AppStory: React.FC<DebugProps & {
-    darkMode?: boolean;
     friendsTab?: 'enabled' | 'disabled' | 'activatedGame';
 }>;

package/lib/app/app/story/index.js

@@ -1,76 +1,65 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { useEffect as p } from "react";
-import { StreamLayerProvider as m, useStreamLayer as c, StreamLayerSDKEvent as f } from "@streamlayer/react";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { styled as a } from "@linaria/react";
+import { StreamLayerProvider as l, StreamLayerSDKEvent as d, useStreamLayer as c, useStreamLayerUI as m } from "@streamlayer/react";
 import { App as u } from "../index.js";
-import { StreamLayerThemeProvider as y } from "../../../ui/theme/index.js";
-import { useStreamLayerDebug as h } from "../../../utils/debug/index.js";
-import { Video as k } from "./video.js";
-const a = () => {
+import { useStreamLayerDebug as f } from "../../../utils/debug/index.js";
+import { Video as y } from "./video.js";
+const s = () => {
   console.log("deep link handled cb");
 }, v = () => {
   console.log("video player handled cb");
-}, A = ({
-  event: o
+}, h = ({
+  withSidebarNotification: n
 }) => {
-  const e = c();
-  return p(() => {
-    e && e.openFeature(12);
-  }, [e, o]), e ? /* @__PURE__ */ t(y, {
-    customTheme: "dark",
-    children: [/* @__PURE__ */ r(f, {
-      event: o
-    }), /* @__PURE__ */ r(u, {
-      sdk: e,
-      event: o,
-      onDeepLinkHandled: a
-    })]
-  }) : null;
-}, S = /* @__PURE__ */ s("div")({
+  const r = c(), e = m();
+  return !r || !e.app && !e.appNotification || !e.app && e.appNotification && !n ? null : /* @__PURE__ */ o(u, {
+    sdk: r,
+    onDeepLinkHandled: s
+  });
+}, A = /* @__PURE__ */ a("div")({
   name: "Container",
   class: "c1a4qh28",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("div")({
+}), S = /* @__PURE__ */ a("div")({
   name: "Body",
   class: "b9h8kuk",
   propsAsIs: !1
-}), L = /* @__PURE__ */ s("div")({
+}), k = /* @__PURE__ */ a("div")({
   name: "AppContainer",
   class: "a1wkro2j",
   propsAsIs: !1
-}), I = ({
-  sdkKey: o,
-  eventId: e,
-  production: d,
-  darkMode: i,
-  friendsTab: l
+}), P = ({
+  sdkKey: n,
+  eventId: r,
+  production: e,
+  friendsTab: p
 }) => {
-  const n = h({
-    sdkKey: o,
-    eventId: e,
-    production: d
+  const t = f({
+    sdkKey: n,
+    eventId: r,
+    production: e
   });
-  return /* @__PURE__ */ r(m, {
-    sdkKey: n.sdkKey,
-    production: n.env === "production",
+  return /* @__PURE__ */ i(l, {
+    sdkKey: t.sdkKey,
+    production: t.env === "production",
     autoEnable: !0,
-    onDeepLinkHandled: a,
+    onDeepLinkHandled: s,
     videoPlayerController: v,
     withAd: !1,
-    friendsTab: l,
-    children: /* @__PURE__ */ t(C, {
-      className: i ? "dark" : "",
-      children: [/* @__PURE__ */ r(k, {}), /* @__PURE__ */ r(S, {
-        children: /* @__PURE__ */ r(L, {
-          className: "StreamLayerSDK",
-          children: /* @__PURE__ */ r(A, {
-            event: n.event
+    friendsTab: p,
+    children: [/* @__PURE__ */ i(S, {
+      children: [/* @__PURE__ */ o(y, {}), /* @__PURE__ */ o(A, {
+        children: /* @__PURE__ */ o(k, {
+          children: /* @__PURE__ */ o(h, {
+            withSidebarNotification: !1
           })
         })
       })]
-    })
+    }), /* @__PURE__ */ o(d, {
+      event: t.event
+    })]
   });
 };
 export {
-  I as AppStory
+  P as AppStory
 };

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

@@ -2,3 +2,4 @@ export declare const PointsContainer: import('@linaria/react').StyledComponent<i
 export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const LinkToLogin: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/app/story/styles.js

@@ -3,11 +3,11 @@ const o = /* @__PURE__ */ s("div")({
   name: "PointsContainer",
   class: "p10yam33",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "VideoPlayerWrap",
   class: "v13be41a",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), e = /* @__PURE__ */ s("div")({
   name: "VideoFrame",
   class: "v18d3gas",
   propsAsIs: !1
@@ -15,10 +15,15 @@ const o = /* @__PURE__ */ s("div")({
   name: "LinkToLogin",
   class: "l1aq3x2u",
   propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "NotificationContainer",
+  class: "n6hlblg",
+  propsAsIs: !1
 });
 export {
   i as LinkToLogin,
+  r as NotificationContainer,
   o as PointsContainer,
-  n as VideoFrame,
-  e as VideoPlayerWrap
+  e as VideoFrame,
+  n as VideoPlayerWrap
 };

package/lib/app/app/story/video.js

@@ -1,32 +1,35 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as n, useCallback as m, useEffect as s } from "react";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useState as l, useCallback as m, useEffect as s } from "react";
 import { useStreamLayer as d } from "@streamlayer/react";
-import { StreamLayerSDKPoints as p } from "../Points/index.js";
-import { StreamLayerThemeProvider as u } from "../../../ui/theme/index.js";
-import { VideoFrame as c, PointsContainer as h, VideoPlayerWrap as f, LinkToLogin as y } from "./styles.js";
-const S = () => {
-  const e = d(), [t, i] = n(!0), o = m(({ muted: a }) => {
-    i(a);
+import { StreamLayerSDKNotification as p } from "../InApp/index.js";
+import { StreamLayerSDKPoints as c } from "../Points/index.js";
+import { VideoFrame as u, PointsContainer as f, VideoPlayerWrap as h, NotificationContainer as y, LinkToLogin as g } from "./styles.js";
+const P = () => {
+  const e = d(), [i, a] = l(!0), o = m(({ muted: n }) => {
+    a(n);
   }, []);
   return s(() => (e == null || e.addVideoPlayerController(o), () => {
     e == null || e.removeVideoPlayerController(o);
-  }), [e, o]), /* @__PURE__ */ l(c, { "data-testid": "video-frame", children: [
-    e && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(p, { sdk: e }) }) }),
-    /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
-      "video",
-      {
-        src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
-        muted: t,
-        width: "100%",
-        height: "100%",
-        autoplay: "autoplay",
-        loop: !0,
-        playsInline: !0,
-        playing: !0
-      }
-    ) }),
+  }), [e, o]), /* @__PURE__ */ t(u, { "data-testid": "video-frame", children: [
+    e && /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(c, { sdk: e }) }),
+    /* @__PURE__ */ t(h, { children: [
+      /* @__PURE__ */ r(
+        "video",
+        {
+          src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+          muted: i,
+          width: "100%",
+          height: "100%",
+          autoplay: "autoplay",
+          loop: !0,
+          playsInline: !0,
+          playing: !0
+        }
+      ),
+      e && /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(p, { sdk: e }) })
+    ] }),
     /* @__PURE__ */ r(
-      y,
+      g,
       {
         href: "./iframe.html?args=&globals=viewport:appDesktop&id=app-login--login&viewMode=story",
         rel: "noreferrer",
@@ -36,5 +39,5 @@ const S = () => {
   ] });
 };
 export {
-  S as Video
+  P as Video
 };

package/lib/app/masters/Features/Gamification/Leaderboard.js

@@ -7,6 +7,7 @@ import { InviteLink as I } from "../../../../ui/gamification/invite-link/index.j
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
+import "@storybook/blocks";
 import "../../../../ui/icons/index.js";
 import "../../../../ui/gamification/leaderboard/list-item/styles.js";
 /* empty css                                    */
@@ -16,7 +17,7 @@ const b = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
   class: "ij36hcn",
   propsAsIs: !1
-}), q = ({
+}), z = ({
   gamification: e,
   scrollNode: s,
   scrollStore: p
@@ -51,5 +52,5 @@ const b = /* @__PURE__ */ h("div")({
   });
 };
 export {
-  q as Leaderboard
+  z as Leaderboard
 };