@streamlayer/react-ui 0.31.0 → 0.32.0

package/lib/ui/app/index.js

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

package/lib/ui/app/styles.js

@@ -1,9 +1,13 @@
 import { styled as o } from "@linaria/react";
-const t = o.div`
+const r = o.div`
   height: 100%;
   background: #fff;
   font-family: var(--font-regular);
+`, n = o.div`
+  overflow-y: auto;
+  height: 100%;
 `;
 export {
-  t as SDKContainer
+  r as SDKContainer,
+  n as SDKScrollContainer
 };

package/lib/ui/theme/index.js

@@ -1,8 +1,8 @@
-import { jsx as m } from "react/jsx-runtime";
-import { theme as e } from "./theme.js";
+import { jsx as e } from "react/jsx-runtime";
+import { theme as o } from "./theme.js";
 import "@linaria/core";
 import "./constants.js";
-const a = ({ children: r }) => /* @__PURE__ */ m("div", { className: e, children: r });
+const s = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: o, style: m, children: r });
 export {
-  a as StreamLayerThemeProvider
+  s as StreamLayerThemeProvider
 };

package/lib/utils/createDemo.js

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as S, Fragment as g } from "react/jsx-runtime";
-import { useMemo as d, useState as m, useEffect as y } from "react";
-import { anonymous as E } from "@streamlayer/sdk-web-anonymous-auth";
-import { Developer as l } from "./components/developer.js";
-import { DeveloperStorage as D } from "./storage.js";
-import { useStreamLayerApp as w } from "./useStreamLayerApp.js";
+import { jsx as e, jsxs as g, Fragment as y } from "react/jsx-runtime";
+import { useMemo as u, useState as i, useEffect as E } from "react";
+import { anonymous as l } from "@streamlayer/sdk-web-anonymous-auth";
+import { Developer as D } from "./components/developer.js";
+import { DeveloperStorage as w } from "./storage.js";
+import { useStreamLayerApp as x } from "./useStreamLayerApp.js";
 import "@linaria/react";
 import "./components/bypassLogin.js";
 import "./components/envToggle.js";
@@ -14,40 +14,41 @@ import "./components/styles.js";
 import "./components/sdkKey.js";
 import "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web";
-function x({
+function K({
   Component: o,
   Story: r,
-  args: u
+  args: n,
+  autoEnable: a
 }) {
-  const n = d(() => new D(), []), [i, a] = m(n.getEnv()), [p, f] = m(n.getSdkKey() || "set-sdk-key"), [s, v] = m(n.getEvent() || ""), k = d(() => {
-    const c = /* @__PURE__ */ new Set();
-    return c.add(E), c;
-  }, []), t = w(p, k, i === "production");
-  return y(() => {
-    s && t && t.createEventSession(s);
-  }, [t]), /* @__PURE__ */ S(g, { children: [
-    t ? /* @__PURE__ */ e(o, { Story: r, sdk: t, args: u }) : /* @__PURE__ */ e("div", { children: "wait sdk..." }),
+  const s = u(() => new w(), []), [p, f] = i(s.getEnv()), [c, v] = i(s.getSdkKey() || "set-sdk-key"), [m, k] = i(s.getEvent() || ""), S = u(() => {
+    const d = /* @__PURE__ */ new Set();
+    return d.add(l), d;
+  }, []), t = x(c, S, p === "production", a);
+  return E(() => {
+    m && t && t.createEventSession(m);
+  }, [t]), /* @__PURE__ */ g(y, { children: [
+    t ? /* @__PURE__ */ e(o, { Story: r, sdk: t, args: n }) : /* @__PURE__ */ e("div", { children: "wait sdk..." }),
     /* @__PURE__ */ e(
-      l,
+      D,
       {
         sdk: t,
-        sdkKey: p,
-        setSdkKey: f,
-        env: i,
-        setEnv: a,
-        event: s,
-        setEvent: v
+        sdkKey: c,
+        setSdkKey: v,
+        env: p,
+        setEnv: f,
+        event: m,
+        setEvent: k
       }
     )
   ] });
 }
-function N(o) {
+function O(o, r = !0) {
   return {
     decorators: [
-      (r) => /* @__PURE__ */ e(x, { Story: r, Component: o })
+      (n) => /* @__PURE__ */ e(K, { Story: n, Component: o, autoEnable: r })
     ]
   };
 }
 export {
-  N as createDemo
+  O as createDemo
 };

package/lib/utils/useStreamLayerApp.js

@@ -1,25 +1,25 @@
-import { useState as a, useEffect as i } from "react";
-import { StreamLayer as u } from "@streamlayer/sdk-web";
-const d = (t, r, n) => {
-  const [f, c] = a(null);
-  return i(() => {
+import { useState as i, useEffect as u } from "react";
+import { StreamLayer as l } from "@streamlayer/sdk-web";
+const h = (t, r, n, f) => {
+  const [c, a] = i(null);
+  return u(() => {
     let s = !1;
     if (!t)
       throw new Error("sdk key should be provided");
-    const o = u(t, n);
+    const o = l(t, n, f);
     if (r)
       for (const e of r)
         o.use(e);
     return o.ready().then((e) => {
-      s || c(e.sdk);
+      s || a(e.sdk);
     }).catch((e) => console.log(e)), () => {
       s = !0, o.close(function(e) {
         if (e)
           throw e;
       });
     };
-  }, [t, n]), f;
+  }, [t, n]), c;
 };
 export {
-  d as useStreamLayerApp
+  h as useStreamLayerApp
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -22,12 +22,12 @@
   ],
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.45.1",
-    "@streamlayer/feature-gamification": "^0.17.2",
-    "@streamlayer/sdk-web": "^0.27.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.10.8",
+    "@streamlayer/feature-gamification": "^0.17.3",
+    "@streamlayer/sdk-web": "^0.28.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.10.9",
     "@streamlayer/sdk-web-api": "^0.0.4",
-    "@streamlayer/sdk-web-core": "^0.13.2",
-    "@streamlayer/sdk-web-features": "^0.10.2",
+    "@streamlayer/sdk-web-core": "^0.14.0",
+    "@streamlayer/sdk-web-features": "^0.10.3",
     "@streamlayer/sdk-web-interfaces": "^0.18.2",
     "@streamlayer/sdk-web-notifications": "^0.10.1",
     "@streamlayer/sdk-web-storage": "^0.3.4",