@streamlayer/react-ui 1.10.0 → 1.11.0

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

@@ -1,18 +1,18 @@
-import { jsxs as h, jsx as e, Fragment as T } from "react/jsx-runtime";
-import { cx as x } from "@linaria/core";
-import { useStore as p } from "@nanostores/react";
-import { TabsContainer as D, TabsNavContainer as v, SDKWhiteContainer as C, UserSummaryContainer as S, SDKContentContainer as A, LeaderboardContainer as I } from "../../styles.js";
+import { jsxs as u, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { cx as T } from "@linaria/core";
+import { useStore as h } from "@nanostores/react";
+import { TabsContainer as D, TabsNavContainer as C, SDKWhiteContainer as S, UserSummaryContainer as v, SDKContentContainer as A, LeaderboardContainer as I } from "../../styles.js";
 import { scrollIntoAppView as L } from "../../../useSdkScroll.js";
 import { useState as P, useTransition as V, useEffect as E } from "react";
 import { ActivePages as a, Tabs as K } from "../../../../ui/gamification/tabs/index.js";
 import { Leaderboard as F } from "./Leaderboard.js";
 import { QuestionsList as O } from "./QuestionsList.js";
 import { UserSummary as Q } from "./UserSummary.js";
-const G = ({ gamification: r, className: u, scrollStore: t, scrollNode: l, appNode: c, style: b, responsiveStore: n }) => {
-  const { tabsShown: m } = p(t, { keys: ["tabsShown"] }), [i, w] = P(a.HOME), [, y] = V(), { sdkInDesktopView: d, screen: g } = p(n, { keys: ["sdkInDesktopView"] }), k = (s) => {
+const G = ({ gamification: r, className: l, scrollStore: t, scrollNode: b, appNode: m, style: f, responsiveStore: n }) => {
+  const { tabsShown: c } = h(t, { keys: ["tabsShown"] }), [i, w] = P(a.HOME), [, y] = V(), { sdkInDesktopView: d, screen: g } = h(n, { keys: ["sdkInDesktopView"] }), k = (s) => {
     y(() => {
-      var f;
-      w(s), d === !1 && (((f = c.current) == null ? void 0 : f.getBoundingClientRect().y) || 0) < 0 && L(c, g.size, { behavior: "instant" });
+      var p;
+      w(s), d === !1 && (((p = m.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && L(m, g.size, { behavior: "instant" });
     });
   };
   E(() => t.subscribe((s) => {
@@ -23,9 +23,9 @@ const G = ({ gamification: r, className: u, scrollStore: t, scrollNode: l, appNo
     n.get().sdkInDesktopView ? t.setKey("tabsShown", s.scrollDirection === "backward") : t.setKey("tabsShown", s.scrollDirection === "forward");
   }), [t, n]);
   let o = "0px";
-  return d ? o = m ? "0px" : "calc(var(--header-height) - var(--header-offset))" : o = m ? "calc(var(--header-height) + var(--header-offset))" : "0px", /* @__PURE__ */ h(D, { className: x(u, "SL-Tabs"), style: b, children: [
+  return d ? o = c ? "0px" : "calc(0px - var(--header-height))" : o = c ? "var(--header-height)" : "0px", /* @__PURE__ */ u(D, { className: T(l, "SL-Tabs"), style: f, children: [
     /* @__PURE__ */ e(
-      v,
+      C,
       {
         style: {
           top: o
@@ -33,11 +33,11 @@ const G = ({ gamification: r, className: u, scrollStore: t, scrollNode: l, appNo
         children: /* @__PURE__ */ e(K, { activePage: i, toggleActivePage: k })
       }
     ),
-    i === a.HOME && /* @__PURE__ */ h(T, { children: [
-      /* @__PURE__ */ e(C, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(Q, { userSummary: r.userSummary }) }) }),
+    i === a.HOME && /* @__PURE__ */ u(x, { children: [
+      /* @__PURE__ */ e(S, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(Q, { userSummary: r.userSummary }) }) }),
       /* @__PURE__ */ e(A, { style: { flex: 1 }, children: /* @__PURE__ */ e(O, { openQuestion: r.openQuestion, store: r.feedList.getStore() }) })
     ] }),
-    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(F, { scrollStore: t, scrollNode: l, gamification: r }) })
+    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(F, { scrollStore: t, scrollNode: b, gamification: r }) })
   ] });
 };
 export {

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

@@ -1,88 +1,92 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { styled as m } from "@linaria/react";
-import { useStore as l } from "@nanostores/react";
-import { SDKWhiteContainer as h } from "../../styles.js";
-import { useHideTransition as C } from "../../../../hooks/showIn.js";
-import { VoteHeader as k } from "../../../../ui/gamification/detail/header/index.js";
-import { UserStatistics as S } from "../../../../ui/gamification/user-statistics/index.js";
-import { ModalPortal as U } from "../../../../ui/modal/index.js";
-import { ShowIn as I } from "../../../../ui/show-in/index.js";
-import { Question as v } from "./Question.js";
-import { Tabs as x } from "./Tabs.js";
-const y = () => I, u = /* @__PURE__ */ m(y())({
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { cx as l } from "@linaria/core";
+import { styled as f } from "@linaria/react";
+import { useStore as c } from "@nanostores/react";
+import { SDKWhiteContainer as k } from "../../styles.js";
+import { useAppContext as v } from "../../useAppContext.js";
+import { useHideTransition as S } from "../../../../hooks/showIn.js";
+import { VoteHeader as U } from "../../../../ui/gamification/detail/header/index.js";
+import { UserStatistics as I } from "../../../../ui/gamification/user-statistics/index.js";
+import { ModalPortal as y } from "../../../../ui/modal/index.js";
+import { ShowIn as A } from "../../../../ui/show-in/index.js";
+import { Question as O } from "./Question.js";
+import { Tabs as b } from "./Tabs.js";
+const w = () => A, u = /* @__PURE__ */ f(w())({
   name: "OpenedContainer",
   class: "ouvguos",
   propsAsIs: !0
-}), O = /* @__PURE__ */ m("div")({
+}), d = "t1eu4lbg", D = /* @__PURE__ */ f("div")({
   name: "UserContainer",
-  class: "u1eu4lbg",
+  class: "uuv2xqo",
   propsAsIs: !1
-}), b = ({
+}), H = ({
   correct: e,
-  incorrect: r
+  incorrect: t
 }) => {
-  const o = e + r;
-  return o === 0 ? 0 : Math.round(e / o * 100);
-}, E = ({
+  const n = e + t;
+  return n === 0 ? 0 : Math.round(e / n * 100);
+}, P = ({
   gamification: e,
-  scrollStore: r,
-  className: o,
-  appNode: i,
-  scrollNode: s,
-  responsiveStore: t
-}) => /* @__PURE__ */ n(x, {
-  appNode: i,
-  scrollStore: r,
-  scrollNode: s,
-  className: o,
+  scrollStore: t,
+  className: n,
+  appNode: a,
+  scrollNode: r,
+  responsiveStore: s
+}) => /* @__PURE__ */ o(b, {
+  appNode: a,
+  scrollStore: t,
+  scrollNode: r,
+  className: n,
   gamification: e,
-  responsiveStore: t
-}), F = ({
+  responsiveStore: s
+}), W = ({
   gamification: e,
-  className: r,
-  appNode: o,
-  responsiveStore: i
+  className: t,
+  appNode: n,
+  responsiveStore: a
 }) => {
-  const s = l(e.openedQuestion.$store), t = l(e.openedUser), {
-    sdkInDesktopView: p
-  } = l(i, {
+  const {
+    topNavigation: r
+  } = v(), s = c(e.openedQuestion.$store), i = c(e.openedUser), {
+    sdkInDesktopView: h
+  } = c(a, {
     keys: ["sdkInDesktopView"]
   }), {
-    hiding: a,
-    onAnimationEnd: c
-  } = C();
-  if (!o.current || !s && !t)
+    hiding: m,
+    onAnimationEnd: p
+  } = S();
+  if (!n.current || !s && !i)
     return null;
-  const d = s ? /* @__PURE__ */ n(u, {
-    className: r,
-    hiding: a,
-    onAnimationEnd: c,
-    children: /* @__PURE__ */ n(v, {
+  const C = s ? /* @__PURE__ */ o(u, {
+    className: l(t, !r && d),
+    hiding: m,
+    onAnimationEnd: p,
+    children: /* @__PURE__ */ o(O, {
       gamification: e
     })
-  }) : t ? /* @__PURE__ */ n(u, {
-    className: r,
-    hiding: a,
-    onAnimationEnd: c,
-    children: /* @__PURE__ */ f(O, {
-      children: [/* @__PURE__ */ n(k, {
+  }) : i ? /* @__PURE__ */ o(u, {
+    className: l(t, !r && d),
+    hiding: m,
+    onAnimationEnd: p,
+    children: /* @__PURE__ */ x(D, {
+      children: [/* @__PURE__ */ o(U, {
         label: "Friend's Rank",
         close: e.closeUser
-      }), /* @__PURE__ */ n(h, {
-        children: /* @__PURE__ */ n(S, {
-          ...t,
-          successRate: b(t)
+      }), /* @__PURE__ */ o(k, {
+        children: /* @__PURE__ */ o(I, {
+          ...i,
+          successRate: H(i)
         })
       })]
     })
   }) : null;
-  return /* @__PURE__ */ n(U, {
-    container: o,
-    useContainer: !p,
-    children: d
+  return /* @__PURE__ */ o(y, {
+    container: n,
+    useContainer: !h,
+    children: C
   });
 };
 export {
-  E as GamificationOverlay,
-  F as GamificationOverlayStandalone
+  P as GamificationOverlay,
+  W as GamificationOverlayStandalone
 };

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

@@ -1,4 +1,8 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const SDKHeader: import('react').ForwardRefExoticComponent<{
+    sdk: StreamLayerSDK;
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement | null>>;
 export declare const SDKNavigation: import('react').ForwardRefExoticComponent<{
     sdk: StreamLayerSDK;
     className?: string;

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

@@ -1,72 +1,112 @@
-import { jsx as e, jsxs as y } from "react/jsx-runtime";
-import { styled as g } from "@linaria/react";
-import { useStore as l } from "@nanostores/react";
-import { forwardRef as h, useMemo as m } from "react";
-import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
-import { FeatureType as d } from "@streamlayer/sdk-web-types";
-import { SvgIcon as F } from "../../../ui/icons/index.js";
-import { Button as n } from "../../../ui/navigation/button/index.js";
-import { Navigation as A, NavigationItems as v } from "../../../ui/navigation/masters.js";
-const C = () => F, x = /* @__PURE__ */ g(C())({
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { cx as S } from "@linaria/core";
+import { styled as n } from "@linaria/react";
+import { useStore as m } from "@nanostores/react";
+import { forwardRef as y, useMemo as h } from "react";
+import { AvailableFeatures as I } from "@streamlayer/sdk-web-features";
+import { FeatureType as u } from "@streamlayer/sdk-web-types";
+import { SvgIcon as g } from "../../../ui/icons/index.js";
+import { Navigation as A, NavigationItems as C } from "../../../ui/navigation/index.js";
+import { Button as t } from "../../../ui/navigation/button/index.js";
+const F = () => g, x = /* @__PURE__ */ n(F())({
   name: "ButtonIcon",
   class: "b11wpe79",
   propsAsIs: !0
-}), K = h(({
-  sdk: i,
-  className: f
-}, u) => {
-  const t = l(i.sdkStore.organizationSettings), r = l(i.sdkStore.streamSettings), a = l(i.getActiveFeature()), p = m(() => {
-    const o = (r == null ? void 0 : r.data) || (t == null ? void 0 : t.data);
-    return o != null && o.overlays ? o.overlays : [];
-  }, [t, r]), s = m(() => [...p.filter(({
-    enableSdkButton: o,
-    type: c
-  }) => c === d.GAMES || o).map((o) => ({
-    id: o.type,
-    onClick: () => i.openFeature(o.type),
-    disabled: !(o.type in S),
-    label: o.name,
-    icon: /* @__PURE__ */ e("img", {
-      src: o.icon,
+}), N = /* @__PURE__ */ n("div")({
+  name: "Container",
+  class: "calnblm",
+  propsAsIs: !1
+}), b = /* @__PURE__ */ n("div")({
+  name: "Title",
+  class: "t1438p52",
+  propsAsIs: !1
+}), B = /* @__PURE__ */ n("div")({
+  name: "CloseIconWrap",
+  class: "c17srj38",
+  propsAsIs: !1
+}), j = () => g, w = /* @__PURE__ */ n(j())({
+  name: "CloseIcon",
+  class: "clqia8k",
+  propsAsIs: !0
+}), G = "hf5w958", H = y(({
+  sdk: s,
+  className: c
+}, l) => {
+  const i = () => {
+    s.closeFeature();
+  };
+  return /* @__PURE__ */ v(A, {
+    className: S(c, G),
+    children: [/* @__PURE__ */ v(N, {
+      children: [/* @__PURE__ */ o(b, {
+        children: "Live Challenge"
+      }), /* @__PURE__ */ o(B, {
+        onClick: i,
+        children: /* @__PURE__ */ o(w, {
+          name: "icon-cross"
+        })
+      })]
+    }), /* @__PURE__ */ o("div", {
+      ref: l
+    })]
+  });
+}), R = y(({
+  sdk: s,
+  className: c
+}, l) => {
+  const i = m(s.sdkStore.organizationSettings), r = m(s.sdkStore.streamSettings), a = m(s.getActiveFeature()), f = h(() => {
+    const e = (r == null ? void 0 : r.data) || (i == null ? void 0 : i.data);
+    return e != null && e.overlays ? e.overlays : [];
+  }, [i, r]), p = h(() => [...f.filter(({
+    enableSdkButton: e,
+    type: d
+  }) => d === u.GAMES || e).map((e) => ({
+    id: e.type,
+    onClick: () => s.openFeature(e.type),
+    disabled: !(e.type in I),
+    label: e.name,
+    icon: /* @__PURE__ */ o("img", {
+      src: e.icon,
       alt: ""
     }),
     /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
-    position: o.position * 10
-  }))].sort((o, c) => o.position - c.position), [p, i]);
-  return /* @__PURE__ */ y(A, {
-    className: f,
-    children: [s.length !== 0 && /* @__PURE__ */ e(v, {
-      children: [/* @__PURE__ */ e(n, {
+    position: e.position * 10
+  }))].sort((e, d) => e.position - d.position), [f, s]);
+  return /* @__PURE__ */ v(A, {
+    className: c,
+    children: [p.length !== 0 && /* @__PURE__ */ o(C, {
+      children: [/* @__PURE__ */ o(t, {
         id: "Channels",
-        onClick: () => i.closeFeature(),
+        onClick: () => s.closeFeature(),
         label: "Channels",
         active: a === 0
-      }, "Channels"), ...s.map((o) => o.id === d.GAMES ? /* @__PURE__ */ e(n, {
-        ...o,
-        active: o.id === a,
+      }, "Channels"), ...p.map((e) => e.id === u.GAMES ? /* @__PURE__ */ o(t, {
+        ...e,
+        active: e.id === a,
         label: "StreamLayer +",
         id: "featuredGroups",
-        icon: /* @__PURE__ */ e(x, {
+        icon: /* @__PURE__ */ o(x, {
           name: "icon-btn-feature-groups",
-          "data-selected": o.id === a
+          "data-selected": e.id === a
         })
-      }, o.id) : /* @__PURE__ */ e(n, {
-        ...o,
+      }, e.id) : /* @__PURE__ */ o(t, {
+        ...e,
         icon: void 0,
-        active: o.id === a
-      }, o.id))]
-    }), !s.length && /* @__PURE__ */ e(v, {
-      children: [/* @__PURE__ */ e(n, {
+        active: e.id === a
+      }, e.id))]
+    }), !p.length && /* @__PURE__ */ o(C, {
+      children: [/* @__PURE__ */ o(t, {
         id: "empty",
         label: "No Features...",
         active: !1,
         disabled: !0
       }, "empty")]
-    }), /* @__PURE__ */ e("div", {
-      ref: u
+    }), /* @__PURE__ */ o("div", {
+      ref: l
     })]
   });
 });
 export {
-  K as SDKNavigation
+  H as SDKHeader,
+  R as SDKNavigation
 };

package/lib/app/app/index.js

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