@streamlayer/react-ui 0.32.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,14 +1,15 @@
-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 { 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 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 { StreamLayerThemeProvider as S } from "../theme/index.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 A } from "../navigation/button/Channels.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";
@@ -68,25 +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 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 }) }),
+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(S, { feature: d, sdk: r })
+      i && t === m && /* @__PURE__ */ o(v, { feature: s, sdk: r })
     ] })
   ] }) });
 };
 export {
-  Jr as App
+  Rr as App
 };

package/lib/ui/app/styles.js

@@ -1,13 +1,21 @@
-import { styled as o } from "@linaria/react";
-const r = o.div`
+import { styled as t } from "@linaria/react";
+const n = t.div`
   height: 100%;
   background: #fff;
   font-family: var(--font-regular);
-`, n = o.div`
+  position: relative;
+`, i = t.div`
   overflow-y: auto;
-  height: 100%;
+  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 {
-  r as SDKContainer,
-  n as SDKScrollContainer
+  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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",