@streamlayer/react-ui 0.96.2 → 0.96.3

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

@@ -1,18 +1,18 @@
-import { jsx as o, jsxs as c, Fragment as U } from "react/jsx-runtime";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import { styled as a } from "@linaria/react";
-import { useStore as n } from "@nanostores/react";
-import { useMemo as w } from "react";
-import { SDKWhiteContainer as x } from "../../styles.js";
-import { VoteHeader as V } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as y } from "../../../gamification/user-statistics/index.js";
-import { ModalPortal as R } from "../../../modal/index.js";
+import { useStore as s } from "@nanostores/react";
+import { SDKWhiteContainer as h } from "../../styles.js";
+import { VoteHeader as C } from "../../../gamification/detail/header/index.js";
+import { UserStatistics as k } from "../../../gamification/user-statistics/index.js";
+import { ModalPortal as I } from "../../../modal/index.js";
 import { ShowIn as S } from "../../../show-in/index.js";
-import { Question as D } from "./Question.js";
-import { Tabs as F } from "./Tabs.js";
+import { Question as U } from "./Question.js";
+import { Tabs as w } from "./Tabs.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
+import "react";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -85,76 +85,77 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const M = () => S, d = /* @__PURE__ */ a(M())({
+const x = () => S, c = /* @__PURE__ */ a(x())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), O = /* @__PURE__ */ a("div")({
+}), y = /* @__PURE__ */ a("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), Q = ({
+}), V = ({
   correct: r,
-  incorrect: p
+  incorrect: i
 }) => {
-  const t = r + p;
-  return t === 0 ? 0 : Math.round(r / t * 100);
-}, uo = ({
+  const o = r + i;
+  return o === 0 ? 0 : Math.round(r / o * 100);
+}, mo = ({
   gamification: r,
-  scrollStore: p,
-  className: t,
-  appNode: i,
-  scrollNode: f,
-  headerNode: h,
-  responsiveStore: s
+  scrollStore: i,
+  className: o,
+  appNode: e,
+  scrollNode: p,
+  headerNode: m,
+  responsiveStore: n
+}) => /* @__PURE__ */ t(w, {
+  appNode: e,
+  headerNode: m,
+  scrollStore: i,
+  scrollNode: p,
+  className: o,
+  gamification: r,
+  responsiveStore: n
+}), po = ({
+  gamification: r,
+  className: i,
+  appNode: o,
+  responsiveStore: e
 }) => {
-  const e = n(r.openedQuestion.$store), m = n(r.openedUser), {
-    sdkInDesktopView: l
-  } = n(s, {
+  var l;
+  const p = s(r.openedQuestion.$store), m = s(r.openedUser), {
+    sdkInDesktopView: n
+  } = s(e, {
     keys: ["sdkInDesktopView"]
-  }), C = w(() => {
-    var u;
-    const k = (((u = i.current) == null ? void 0 : u.getBoundingClientRect().y) || 0) < 0;
-    if (!i.current || !e && !m)
-      return null;
-    const I = e ? /* @__PURE__ */ o(d, {
-      className: t,
-      children: /* @__PURE__ */ o(D, {
-        gamification: r
-      })
-    }) : m ? /* @__PURE__ */ o(d, {
-      className: t,
-      children: /* @__PURE__ */ c(O, {
-        children: [/* @__PURE__ */ o(V, {
-          label: "Friend's Rank",
-          close: r.closeUser
-        }), /* @__PURE__ */ o(x, {
-          children: /* @__PURE__ */ o(y, {
-            ...m,
-            successRate: Q(m)
-          })
-        })]
-      })
-    }) : null;
-    return /* @__PURE__ */ o(R, {
-      container: i,
-      useContainer: !l,
-      fixedView: k,
-      children: I
-    });
-  }, [i, t, r, e, m, l]);
-  return /* @__PURE__ */ c(U, {
-    children: [C, /* @__PURE__ */ o(F, {
-      appNode: i,
-      headerNode: h,
-      scrollStore: p,
-      scrollNode: f,
-      className: t,
-      gamification: r,
-      responsiveStore: s
-    })]
+  }), u = (((l = o.current) == null ? void 0 : l.getBoundingClientRect().y) || 0) < 0;
+  if (!o.current || !p && !m)
+    return null;
+  const d = p ? /* @__PURE__ */ t(c, {
+    className: i,
+    children: /* @__PURE__ */ t(U, {
+      gamification: r
+    })
+  }) : m ? /* @__PURE__ */ t(c, {
+    className: i,
+    children: /* @__PURE__ */ f(y, {
+      children: [/* @__PURE__ */ t(C, {
+        label: "Friend's Rank",
+        close: r.closeUser
+      }), /* @__PURE__ */ t(h, {
+        children: /* @__PURE__ */ t(k, {
+          ...m,
+          successRate: V(m)
+        })
+      })]
+    })
+  }) : null;
+  return /* @__PURE__ */ t(I, {
+    container: o,
+    useContainer: !n,
+    fixedView: u,
+    children: d
   });
 };
 export {
-  uo as GamificationOverlay
+  mo as GamificationOverlay,
+  po as GamificationOverlayStandalone
 };

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

@@ -15,3 +15,11 @@ export declare const ActiveFeature: React.FC<{
     headerNode: HeaderNodeRef;
     className?: string;
 }>;
+/** render feature by type */
+export declare const StandaloneFeature: React.FC<{
+    sdk: StreamLayerSDK;
+    feature: Features | null;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    className?: string;
+}>;

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

@@ -1,30 +1,123 @@
-import { jsx as i } from "react/jsx-runtime";
-import { lazy as f, useMemo as c, Suspense as a } from "react";
-import { FeatureType as g } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as y } from "./FeatureProvider.js";
+import { jsx as r } from "react/jsx-runtime";
+import { lazy as c, useMemo as g, Suspense as y } from "react";
+import { FeatureType as u } from "@streamlayer/sdk-web-types";
+import { FeatureProvider as a } from "./FeatureProvider.js";
+import { GamificationOverlayStandalone as d } from "./Gamification/index.js";
+import "@linaria/react";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-const h = f(() => import("./Gamification/gamification-feature.js")), A = ({ sdk: n, feature: t, className: r, scrollStore: e, appNode: o, scrollNode: m, headerNode: l, responsiveStore: p }) => {
-  const u = c(() => t && t.featureConfig.get().type === g.GAMES ? /* @__PURE__ */ i(y, { className: r, sdk: n, feature: t, children: /* @__PURE__ */ i(
+import "../styles.js";
+import "../../gamification/detail/header/index.js";
+import "../../gamification/constants.js";
+import "../../gamification/detail/header/styles.js";
+import "../../icons/index.js";
+import "../../gamification/user-statistics/index.js";
+import "../../../utils/common.js";
+import "../../gamification/user-statistics/components/rank/index.js";
+import "../../gamification/user-statistics/components/rank/styles.js";
+import "../../gamification/user-statistics/components/statistic/index.js";
+import "../../gamification/user-statistics/components/statistic/styles.js";
+import "../../gamification/user-statistics/styles.js";
+import "../../modal/index.js";
+import "@linaria/core";
+import "../../../index-jRXrW6ie.js";
+import "../../../index-uEuzH3jr.js";
+import "../../show-in/index.js";
+import "./Gamification/Question.js";
+import "../useMastersContext.js";
+import "../../gamification/detail/sponsor/index.js";
+import "../../gamification/vote/index.js";
+import "../../gamification/vote/expired-alert/index.js";
+import "../../gamification/vote/expired-alert/styles.js";
+import "../../gamification/vote/feedback/index.js";
+import "../../gamification/vote/feedback/styles.js";
+import "../../gamification/vote/styles.js";
+import "../../gamification/vote/vote-option/index.js";
+import "../../animated-counter/index.js";
+import "react-countup";
+import "../../gamification/vote/vote-option/styles.js";
+import "../../gamification/vote/win-bar/index.js";
+import "../../timer/index.js";
+import "react-countdown-circle-timer";
+import "../../theme/constants.js";
+import "../../gamification/vote/win-bar/styles.js";
+import "../../gamification/vote/insight-details/index.js";
+import "../../questions/insight/index.js";
+import "../../video-player/index.js";
+import "../../video-player/styles.js";
+import "../../questions/insight/styles.js";
+import "../../gamification/vote/insight-details/styles.js";
+import "../../gamification/vote/twitter-details/index.js";
+import "../../questions/twitter/index.js";
+import "../../questions/twitter/account/index.js";
+import "../../questions/twitter/account/styles.js";
+import "../../questions/twitter/styles.js";
+import "../../gamification/vote/twitter-details/styles.js";
+import "./Gamification/Tabs.js";
+import "../useSdkScroll.js";
+import "lodash.throttle";
+import "../../../index-keh7OLCY.js";
+import "../../gamification/tabs/index.js";
+import "../../gamification/tabs/styles.js";
+import "./Gamification/Leaderboard.js";
+import "../useClipboardCopy.js";
+import "../../gamification/copyNotification/index.js";
+import "../../gamification/copyNotification/styles.js";
+import "../../gamification/invite-link/index.js";
+import "../../gamification/invite-link/styles.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
+import "../../gamification/leaderboard/list-item/styles.js";
+import "../../../styles_z07sl8-w40geAFS.js";
+import "../../gamification/leaderboard/static.js";
+import "react-infinite-scroller";
+import "../../gamification/leaderboard/list-item/index.js";
+import "./Gamification/Friends.js";
+import "../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+import "./Gamification/QuestionsList.js";
+import "../../gamification/question/list/index.js";
+import "../../gamification/question/index.js";
+import "../../gamification/question/styles.js";
+import "../../gamification/question/insight/index.js";
+import "../../gamification/question/insight/styles.js";
+import "../../gamification/question/twitter/index.js";
+import "../../gamification/question/twitter/styles.js";
+import "../../button/index.js";
+import "../../button/styles.js";
+import "../../gamification/question/list/styles.js";
+import "./Gamification/UserSummary.js";
+const h = c(() => import("./Gamification/gamification-feature.js")), Nt = ({ sdk: o, feature: t, className: i, scrollStore: m, appNode: p, scrollNode: n, headerNode: e, responsiveStore: l }) => {
+  const f = g(() => t && t.featureConfig.get().type === u.GAMES ? /* @__PURE__ */ r(a, { className: i, sdk: o, feature: t, children: /* @__PURE__ */ r(
     h,
     {
-      appNode: o,
-      scrollStore: e,
-      scrollNode: m,
-      headerNode: l,
-      className: r,
-      responsiveStore: p,
+      appNode: p,
+      scrollStore: m,
+      scrollNode: n,
+      headerNode: e,
+      className: i,
+      responsiveStore: l,
       gamification: t
     }
-  ) }) : null, [n, t, r, p, e, m, o, l]);
-  return /* @__PURE__ */ i(
-    a,
+  ) }) : null, [o, t, i, l, m, n, p, e]);
+  return /* @__PURE__ */ r(
+    y,
     {
-      fallback: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: u
+      fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: f
     }
   );
-};
+}, ti = ({ sdk: o, feature: t, className: i, appNode: m, responsiveStore: p }) => t && t.featureConfig.get().type === u.GAMES ? /* @__PURE__ */ r(a, { className: i, sdk: o, feature: t, noWait: !0, children: /* @__PURE__ */ r(
+  d,
+  {
+    appNode: m,
+    className: i,
+    responsiveStore: p,
+    gamification: t
+  }
+) }) : null;
 export {
-  A as ActiveFeature
+  Nt as ActiveFeature,
+  ti as StandaloneFeature
 };

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

@@ -3,15 +3,16 @@ import { useStore as B } from "@nanostores/react";
 import { forwardRef as l } from "react";
 import { ChannelsButton as c, ChannelsButtonId as t } from "../../../navigation/button/Channels.js";
 import { FeaturedGroupsButton as x, FeaturedGroupsButtonId as i } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButtonId as M } from "../../../navigation/button/LeaderBoard.js";
+import { LeaderBoardButtonId as P } from "../../../navigation/button/LeaderBoard.js";
 import { Navigation as I, NavigationItems as h } from "../../../navigation/masters.js";
 import { BREAKPOINTS as p } from "../../../theme/constants.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "../../../navigation/button/index.js";
+import "@linaria/core";
 import "../../../navigation/button/styles.js";
 import "../../../navigation/index.js";
-const E = l(
+const K = l(
   ({ activeOverlay: o, setActiveOverlay: m, scrollToTop: n, sdkReady: d, className: u, responsiveStore: a }, f) => {
     const { screen: e } = B(a, { keys: ["screen"] });
     return /* @__PURE__ */ s(I, { className: u, children: [
@@ -49,6 +50,6 @@ const E = l(
 export {
   t as ChannelsButtonId,
   i as FeaturedGroupsButtonId,
-  M as LeaderBoardButtonId,
-  E as MastersNavigation
+  P as LeaderBoardButtonId,
+  K as MastersNavigation
 };

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

@@ -1,16 +1,17 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useStore as s } from "@nanostores/react";
-import { useMemo as e } from "react";
+import { useMemo as m } from "react";
 import { AvailableFeatures as d } from "@streamlayer/sdk-web-features";
 import { Navigation as v } from "../../navigation/index.js";
 import { Button as b } from "../../navigation/button/index.js";
 import "@linaria/react";
+import "@linaria/core";
 import "../../navigation/button/styles.js";
-const N = ({ customOverlays: p, activeButton: m, sdk: i }) => {
-  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), a = e(() => {
+const h = ({ customOverlays: p, activeButton: e, sdk: i }) => {
+  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), a = m(() => {
     const o = (r == null ? void 0 : r.data) || (t == null ? void 0 : t.data);
     return o != null && o.overlays ? o.overlays : [];
-  }, [t, r]), c = e(
+  }, [t, r]), c = m(
     () => [
       ...a.filter(({ enableSdkButton: o }) => o).map((o) => ({
         id: o.type,
@@ -25,8 +26,8 @@ const N = ({ customOverlays: p, activeButton: m, sdk: i }) => {
     ].sort((o, l) => o.position - l.position),
     [a, i, p]
   );
-  return /* @__PURE__ */ n(v, { children: c.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === m })) });
+  return /* @__PURE__ */ n(v, { children: c.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === e })) });
 };
 export {
-  N as SDKNavigation
+  h as SDKNavigation
 };