@streamlayer/react-ui 0.31.0 → 0.33.0

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

@@ -1,26 +1,27 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { Navigation as u } from "../../navigation/index.js";
-import { ChannelsButton as a, ChannelsButtonId as n } from "../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as d, FeaturedGroupsButtonId as i } from "../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButton as s, LeaderBoardButtonId as m } from "../../navigation/button/LeaderBoard.js";
+import { ChannelsButton as u, ChannelsButtonId as i } from "../../navigation/button/Channels.js";
+import { FeaturedGroupsButton as a, FeaturedGroupsButtonId as n } from "../../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButton as d, LeaderBoardButtonId as m } from "../../navigation/button/LeaderBoard.js";
+import { Navigation as s } from "../../navigation/masters.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
 import "../../navigation/button/index.js";
 import "../../navigation/button/styles.js";
-const j = ({ activeOverlay: o, setActiveOverlay: t }) => /* @__PURE__ */ p(u, { children: [
-  /* @__PURE__ */ r(a, { active: o === n, onClick: () => t(n) }),
+import "../../navigation/index.js";
+const l = ({ activeOverlay: o, setActiveOverlay: t }) => /* @__PURE__ */ p(s, { children: [
+  /* @__PURE__ */ r(u, { active: o === i, onClick: () => t(i) }),
   /* @__PURE__ */ r(
-    d,
+    a,
     {
-      active: o === i,
+      active: o === n,
       onClick: () => {
-        t(i);
+        t(n);
       }
     }
   ),
   /* @__PURE__ */ r(
-    s,
+    d,
     {
       active: o === m,
       onClick: () => t(m)
@@ -28,8 +29,8 @@ const j = ({ activeOverlay: o, setActiveOverlay: t }) => /* @__PURE__ */ p(u, {
   )
 ] });
 export {
-  n as ChannelsButtonId,
-  i as FeaturedGroupsButtonId,
+  i as ChannelsButtonId,
+  n as FeaturedGroupsButtonId,
   m as LeaderBoardButtonId,
-  j as MastersNavigation
+  l as MastersNavigation
 };

package/lib/ui/app/index.js

@@ -1,19 +1,20 @@
-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 { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { useStore as c } from "@nanostores/react";
+import { useState as f } from "react";
+import { FeatureType as u } 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 { useSdkFeature as y } from "./useSdkFeature.js";
-import { FeaturedGroupsButtonId as o } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as A } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as B } from "../navigation/button/LeaderBoard.js";
+import { mastersVariables as b } from "../theme/masters.js";
+import { ActiveFeature as v } from "./Features/index.js";
+import { MastersNavigation as h } from "./MastersNavigation/index.js";
+import { SDKContainer as y, SDKScrollContainer as A } from "./styles.js";
+import { useSdkFeature as F } from "./useSdkFeature.js";
+import { FeaturedGroupsButtonId as m } from "../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as B } from "../navigation/button/Channels.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";
@@ -68,22 +69,26 @@ import "../gamification/insight-list/index.js";
 import "../gamification/insight/index.js";
 import "../gamification/insight/styles.js";
 import "../gamification/insight-list/styles.js";
+import "../navigation/masters.js";
 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 Rr = ({ sdk: r, overlays: p, children: e }) => {
+  const [t, a] = f(m), i = c(r.enabled) === "on", [, s] = F(r), d = () => {
+    r.initializeApp().then(() => {
+      a(m), r.openFeature(u.GAMES);
+    });
+  };
+  return /* @__PURE__ */ o(S, { style: { height: "100%" }, children: /* @__PURE__ */ n(y, { className: b, children: [
+    i && /* @__PURE__ */ o(h, { activeOverlay: t, setActiveOverlay: a }),
+    /* @__PURE__ */ n(A, { "data-nav": i.toString(), children: [
+      /* @__PURE__ */ o("div", { style: { display: !i || t === B ? "block" : "none" }, children: e && e({ enableSdk: d, disableSdk: r.disableApp }) }),
+      /* @__PURE__ */ o("div", { style: { display: t === l ? "block" : "none" }, children: p && t === l && p[t] }),
+      i && t === m && /* @__PURE__ */ o(v, { feature: s, sdk: r })
+    ] })
   ] }) });
 };
 export {
-  Hr as App
+  Rr as App
 };

package/lib/ui/app/styles.js

@@ -1,9 +1,21 @@
-import { styled as o } from "@linaria/react";
-const t = o.div`
+import { styled as t } from "@linaria/react";
+const n = t.div`
   height: 100%;
   background: #fff;
   font-family: var(--font-regular);
+  position: relative;
+`, i = t.div`
+  overflow-y: auto;
+  height: calc(100% - var(--header-height));
+  transition: transform;
+  transition-duration: var(--animation-duration);
+  transition-timing-function: var(--animation-function);
+
+  &[data-nav='true'] {
+    transform: translateY(var(--header-height));
+  }
 `;
 export {
-  t as SDKContainer
+  n as SDKContainer,
+  i as SDKScrollContainer
 };

package/lib/ui/navigation/index.js

@@ -1,15 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
-import { styled as i } from "@linaria/react";
-const e = i.div`
+import { styled as o } from "@linaria/react";
+const i = o.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
-
-  & > button:not(:last-child) {
-    margin-right: 8px;
-  }
-`, s = ({ children: t }) => /* @__PURE__ */ n(e, { children: t });
+`, a = ({ children: t, className: e }) => /* @__PURE__ */ n(i, { className: e, children: t });
 export {
-  s as Navigation
+  a as Navigation
 };

package/lib/ui/navigation/masters.js

@@ -0,0 +1,36 @@
+import { styled as o } from "@linaria/react";
+import { Navigation as i } from "./index.js";
+import "react/jsx-runtime";
+const r = o(i)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  box-sizing: border-box;
+  overflow: hidden;
+  opacity: 0;
+
+  animation: show-nav 0.5s ease;
+  animation-fill-mode: forwards;
+
+  padding: 16px;
+
+  & > button:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  @keyframes show-nav {
+    90% {
+      opacity: 0;
+    }
+
+    100% {
+      height: 68px;
+      opacity: 1;
+    }
+  }
+`;
+export {
+  r as Navigation
+};

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/ui/theme/masters.js

@@ -0,0 +1,9 @@
+import { css as a } from "@linaria/core";
+const t = a`
+  --header-height: 68px;
+  --animation-duration: 0.5s;
+  --animation-function: ease;
+`;
+export {
+  t as mastersVariables
+};

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.33.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",