@streamlayer/react-ui 0.36.0 → 0.37.1

package/lib/ui/app/masters.js

@@ -1,20 +1,21 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { useStore as A } from "@nanostores/react";
-import { useState as S, useCallback as F, useEffect as E } from "react";
-import { FeatureType as B } from "@streamlayer/sdk-web-types";
-import { StreamLayerThemeProvider as C } from "../theme/index.js";
-import { mastersVariables as O } from "../theme/masters.js";
-import { ActiveFeature as g } from "./Features/index.js";
-import { MastersNavigation as x } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as I, SDKScrollContainer as L } from "./styles.js";
-import { useSdkFeature as M } from "./useSdkFeature.js";
-import { FeaturedGroupsButtonId as i } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as s } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as v } from "../navigation/button/LeaderBoard.js";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { StreamLayerThemeProvider as u } from "../theme/index.js";
+import { mastersVariables as f } from "../theme/masters.js";
+import { ActiveFeature as v } from "./Features/index.js";
+import { MastersNavigation as y } from "./Navigation/MastersNavigation/index.js";
+import { SDKContainer as S, SDKScrollContainer as h } from "./styles.js";
+import { useMastersApp as b } from "./useMastersApp.js";
+import { useSdkFeature as k } from "./useSdkFeature.js";
+import { ChannelsButtonId as A } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as a } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as B } from "../navigation/button/FeaturedGroups.js";
 import "../theme/theme.js";
 import "@linaria/core";
 import "../theme/constants.js";
+import "react";
+import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
+import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
 import "./Features/Gamification/index.js";
 import "./Features/Gamification/Question.js";
@@ -74,49 +75,30 @@ import "../navigation/index.js";
 import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const j = ({ sdk: t }) => {
-  const [, m] = M(t);
-  return /* @__PURE__ */ o(g, { feature: m, sdk: t });
-}, rr = ({ sdk: t, overlays: m, children: l, event: c }) => {
-  const [e, u] = S(!1), a = A(t.status) === "ready", [r, d] = S(i), n = F(
-    (p) => {
-      d(p), p === i ? (t.createEventSession(c), t.openFeature(B.GAMES)) : t.closeFeature();
-    },
-    [c, t]
+const F = ({ sdk: o }) => {
+  const [, i] = k(o);
+  return /* @__PURE__ */ t(v, { feature: i, sdk: o });
+}, Ur = ({ sdk: o, overlays: i, children: p, event: n }) => {
+  const { sdkEnabled: m, sdkReady: s, activeOverlay: r, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = b(
+    o,
+    n
   );
-  E(() => {
-    !a && r === i && (d(s), t.closeFeature());
-  }, [a, r, t]);
-  const y = () => {
-    t.initializeApp().then(({ enabled: p, err: h }) => {
-      if (u(!0), h) {
-        n(s);
-        return;
-      }
-      if (p) {
-        n(i);
-        return;
-      }
-    });
-  }, b = () => {
-    u(!1), t.disableApp();
-  };
-  return /* @__PURE__ */ o(C, { style: { height: "100%" }, children: /* @__PURE__ */ f(I, { className: O, children: [
-    e && /* @__PURE__ */ o(
-      x,
+  return /* @__PURE__ */ t(u, { style: { height: "100%" }, children: /* @__PURE__ */ e(S, { className: f, children: [
+    m && /* @__PURE__ */ t(
+      y,
       {
-        sdkReady: a,
+        sdkReady: s,
         activeOverlay: r,
-        setActiveOverlay: n
+        setActiveOverlay: d
       }
     ),
-    /* @__PURE__ */ f(L, { "data-nav": e.toString(), children: [
-      /* @__PURE__ */ o("div", { style: { display: !e || r === s ? "block" : "none" }, children: l && l({ enableSdk: y, disableSdk: b }) }),
-      /* @__PURE__ */ o("div", { style: { display: r === v ? "block" : "none" }, children: m && r === v && m[r] }),
-      e && r === i && /* @__PURE__ */ o(j, { sdk: t })
+    /* @__PURE__ */ e(h, { "data-nav": m.toString(), children: [
+      /* @__PURE__ */ t("div", { style: { display: !m || r === A ? "block" : "none" }, children: p && p({ enableSdk: l, disableSdk: c }) }),
+      /* @__PURE__ */ t("div", { style: { display: r === a ? "block" : "none" }, children: i && r === a && i[r] }),
+      m && r === B && /* @__PURE__ */ t(F, { sdk: o })
     ] })
   ] }) });
 };
 export {
-  rr as MastersApp
+  Ur as MastersApp
 };

package/lib/ui/app/useMastersApp.d.ts

@@ -0,0 +1,21 @@
+import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { AvailableOverlays } from './Navigation/MastersNavigation';
+/**
+ * A hook that provides functionality for managing the StreamLayerSDK in the Masters app.
+ * - On activate FG+ button, the SDK is initialized and the FG+ overlay is opened.
+ * - On activate Channels or Leaderboard button, the SDK is disabled and the FG+ overlay is closed.
+ * - On sdk status change, if sdk disabled (f.e some errors occurred), the SDK is disabled and the FG+ overlay is closed.
+ * @param sdk - The StreamLayerSDK instance to use.
+ * @param event - The name of the event to create a session for.
+ * @returns An object containing various functions and state values for managing the SDK and app overlays.
+ * @returns disableSdk - A function that disables the SDK and closes the FG+ overlay.
+ * @returns enableSdk - A function that initializes the SDK and opens the FG+ overlay.
+ */
+export declare const useMastersApp: (sdk: StreamLayerSDK, event: string) => {
+    sdkEnabled: boolean;
+    sdkReady: boolean;
+    activeOverlay: any;
+    activateAndLoadOverlay: (overlay: AvailableOverlays) => void;
+    enableSdk: () => void;
+    disableSdk: () => void;
+};

package/lib/ui/app/useMastersApp.js

@@ -0,0 +1,47 @@
+import { useStore as d } from "@nanostores/react";
+import { useState as u, useCallback as f, useEffect as S } from "react";
+import { FeatureType as b } from "@streamlayer/sdk-web-types";
+import "react/jsx-runtime";
+import { ChannelsButtonId as l } from "../navigation/button/Channels.js";
+import { FeaturedGroupsButtonId as r } from "../navigation/button/FeaturedGroups.js";
+import "../navigation/button/LeaderBoard.js";
+import "../navigation/masters.js";
+import "@linaria/react";
+import "../icons/index.js";
+import "../navigation/button/index.js";
+import "../navigation/button/styles.js";
+import "../navigation/index.js";
+const R = (e, s) => {
+  const [m, n] = u(!1), o = d(e.status) === "ready", [a, p] = u(r), i = f(
+    (t) => {
+      p(t), t === r ? (e.createEventSession(s), e.openFeature(b.GAMES)) : e.closeFeature();
+    },
+    [s, e]
+  );
+  return S(() => {
+    !o && a === r && (p(l), e.closeFeature());
+  }, [o, a, e]), {
+    sdkEnabled: m,
+    sdkReady: o,
+    activeOverlay: a,
+    activateAndLoadOverlay: i,
+    enableSdk: () => {
+      e.initializeApp().then(({ enabled: t, err: c }) => {
+        if (n(!0), c) {
+          i(l);
+          return;
+        }
+        if (t) {
+          i(r);
+          return;
+        }
+      });
+    },
+    disableSdk: () => {
+      n(!1), e.disableApp();
+    }
+  };
+};
+export {
+  R as useMastersApp
+};

package/lib/ui/app/useSdkFeature.d.ts

@@ -1,4 +1,9 @@
 import { Features } from '@streamlayer/sdk-web-features';
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { FeatureType } from '@streamlayer/sdk-web-types';
+/**
+ * A hook that manages the active feature of a StreamLayerSDK instance.
+ * @param sdk - The StreamLayerSDK instance to manage the feature for.
+ * @returns A tuple containing the active feature type and the active feature instance, or null if there is no active feature.
+ */
 export declare const useSdkFeature: (sdk: StreamLayerSDK) => [FeatureType, Features | null];

package/lib/utils/debug/components/developer.js

@@ -1,38 +1,33 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { styled as i } from "@linaria/react";
-import { useMemo as x, useState as g } from "react";
-import { DeveloperStorage as h } from "../../storage.js";
-import { BypassLogin as u } from "./bypassLogin.js";
-import { EnvToggle as b } from "./envToggle.js";
+import { styled as p } from "@linaria/react";
+import { useMemo as f, useState as g } from "react";
+import { DeveloperStorage as u } from "../../storage.js";
+import { BypassLogin as b } from "./bypassLogin.js";
+import { EnvToggle as h } from "./envToggle.js";
 import { EventInput as v } from "./eventInput.js";
 import { SdkKey as y } from "./sdkKey.js";
 import "@streamlayer/sdk-web-storage";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-core";
 import "./styles.js";
-const w = i.div`
+const w = p.div`
   position: fixed;
   bottom: 0;
   right: 0;
   max-width: 600px;
-`, D = i.div`
+
+  font-family: system-ui;
+  background: rgba(29, 123, 255, 0.5);
+  border-top-left-radius: 10px;
+  backdrop-filter: blur(5px);
+`, D = p.div`
   flex-direction: column;
   gap: 10px;
   margin-right: 60px;
   display: flex;
-  animation: show-dev-items 0.3s ease-in-out;
-  transform-origin: bottom right;
-
-  @keyframes show-dev-items {
-    from {
-      transform: scale(0);
-    }
-
-    to {
-      transform: scale(1);
-    }
-  }
-`, j = i.button`
+  margin-left: 10px;
+  margin-top: 10px;
+`, j = p.button`
   position: absolute;
   z-index: 10000;
   bottom: 10px;
@@ -71,19 +66,19 @@ const w = i.div`
     width: 100%;
     height: 4px;
   }
-`, q = ({ sdk: t, sdkKey: s, setSdkKey: n, env: m, setEnv: p, event: d, setEvent: l }) => {
-  const r = x(() => new h(), []), [a, c] = g(!1);
+`, q = ({ sdk: t, sdkKey: d, setSdkKey: i, env: s, setEnv: n, event: m, setEvent: l }) => {
+  const r = f(() => new u(), []), [a, x] = g(!1);
   return /* @__PURE__ */ e(w, { children: [
-    /* @__PURE__ */ e(j, { "data-opened": a.toString(), onClick: () => c((f) => !f), children: [
+    /* @__PURE__ */ e(j, { "data-opened": a.toString(), onClick: () => x((c) => !c), children: [
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {})
     ] }),
     a && /* @__PURE__ */ e(D, { children: [
-      p && /* @__PURE__ */ o(b, { env: m, setEnv: p, storage: r }),
-      n && /* @__PURE__ */ o(y, { sdkKey: s, setSdkKey: n, storage: r }),
-      t && /* @__PURE__ */ o(v, { sdk: t, storage: r, event: d, setEvent: l }),
-      t && /* @__PURE__ */ o(u, { sdk: t, storage: r })
+      n && /* @__PURE__ */ o(h, { env: s, setEnv: n, storage: r }),
+      i && /* @__PURE__ */ o(y, { sdkKey: d, setSdkKey: i, storage: r }),
+      t && /* @__PURE__ */ o(v, { sdk: t, storage: r, event: m, setEvent: l }),
+      t && /* @__PURE__ */ o(b, { sdk: t, storage: r })
     ] })
   ] });
 };

package/lib/utils/debug/components/envToggle.js

@@ -22,6 +22,8 @@ const d = o.div`
     opacity: 0;
     position: relative;
     z-index: 1;
+    width: 100%;
+    cursor: pointer;
 
     &:checked + span {
       transform: translate3d(100%, 0, 0);

package/lib/utils/debug/components/styles.js

@@ -36,6 +36,14 @@ const n = r.div`
     cursor: pointer;
     border: none;
     text-transform: uppercase;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(0.9);
+    }
   }
 `;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.36.0",
+  "version": "0.37.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -26,17 +26,17 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@streamlayer/sl-eslib": "^5.45.1",
-    "@streamlayer/feature-gamification": "^0.17.4",
-    "@streamlayer/sdk-web": "^0.28.1",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.10.10",
-    "@streamlayer/sdk-web-api": "^0.0.5",
-    "@streamlayer/sdk-web-core": "^0.14.1",
-    "@streamlayer/sdk-web-features": "^0.10.4",
-    "@streamlayer/sdk-web-interfaces": "^0.18.3",
-    "@streamlayer/sdk-web-notifications": "^0.10.2",
-    "@streamlayer/sdk-web-storage": "^0.3.5",
-    "@streamlayer/sdk-web-types": "^0.16.3"
+    "@streamlayer/sl-eslib": "^5.52.0",
+    "@streamlayer/feature-gamification": "^0.18.0",
+    "@streamlayer/sdk-web": "^0.28.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.10.11",
+    "@streamlayer/sdk-web-api": "^0.0.6",
+    "@streamlayer/sdk-web-core": "^0.14.2",
+    "@streamlayer/sdk-web-features": "^0.10.5",
+    "@streamlayer/sdk-web-interfaces": "^0.18.4",
+    "@streamlayer/sdk-web-notifications": "^0.10.3",
+    "@streamlayer/sdk-web-storage": "^0.3.6",
+    "@streamlayer/sdk-web-types": "^0.16.4"
   },
   "nx": {
     "implicitDependencies": [
@@ -48,11 +48,11 @@
     "@connectrpc/connect-web": "^1.1.3",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@linaria/babel-preset": "^5.0.3",
+    "@linaria/babel-preset": "^5.0.4",
     "@linaria/core": "^5.0.2",
-    "@linaria/esbuild": "^5.0.3",
+    "@linaria/esbuild": "^5.0.4",
     "@linaria/react": "^5.0.3",
-    "@linaria/vite": "^5.0.3",
+    "@linaria/vite": "^5.0.4",
     "@nanostores/react": "^0.7.1",
     "@storybook/addon-docs": "^7.5.3",
     "@storybook/addon-styling": "^1.3.7",
@@ -73,6 +73,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.23.0"
+    "@streamlayer/react": "^0.23.2"
   }
 }