@streamlayer/react-ui 0.33.0 → 0.35.0

package/lib/index.js

@@ -1,16 +1,16 @@
-import { QuestionInApp as Uo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as ko } from "./ui/login/index.js";
-import { Onboarding as wo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as Bo, Navigation as Co } from "./ui/gamification/navigation/index.js";
-import { LeaderboardItemDetail as Fo } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Ho } from "./ui/gamification/question/index.js";
-import { QuestionList as Ko } from "./ui/gamification/question-list/index.js";
-import { UserStatistics as Ro } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Xo } from "./ui/gamification/vote/index.js";
-import { Demo as Zo } from "./ui/demo/index.js";
-import { Points as $o } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as rr } from "./ui/theme/index.js";
-import { ThemeVariables as mr, theme as ir, themeStr as pr } from "./ui/theme/theme.js";
+import { QuestionInApp as jo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as qo } from "./ui/login/index.js";
+import { Onboarding as zo } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Co, Tab as Eo, Tabs as Fo } from "./ui/gamification/tabs/index.js";
+import { LeaderboardItemDetail as Ho } from "./ui/gamification/leaderboard-item-detail/index.js";
+import { Question as Ko } from "./ui/gamification/question/index.js";
+import { QuestionList as No } from "./ui/gamification/question-list/index.js";
+import { UserStatistics as Wo } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Yo } from "./ui/gamification/vote/index.js";
+import { Demo as _o } from "./ui/demo/index.js";
+import { Points as or } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as tr } from "./ui/theme/index.js";
+import { ThemeVariables as pr, theme as ir, themeStr as er } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-6a55bb8f.js";
@@ -34,7 +34,7 @@ import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-inv
 import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js";
 import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
 import "./ui/gamification/onboarding/styles.js";
-import "./ui/gamification/navigation/styles.js";
+import "./ui/gamification/tabs/styles.js";
 import "./ui/gamification/common-header/index.js";
 import "./ui/gamification/common-header/styles.js";
 import "./ui/gamification/leaderboard-item-detail/styles.js";
@@ -95,20 +95,21 @@ import "./ui/gamification/points/styles.js";
 import "./ui/icons/index.js";
 import "@linaria/core";
 export {
-  Bo as ActivePages,
-  Zo as Demo,
-  Fo as LeaderboardItemDetail,
-  ko as Login,
-  Co as Navigation,
-  wo as Onboarding,
-  $o as Points,
-  Ho as Question,
-  Uo as QuestionInApp,
-  Ko as QuestionList,
-  rr as StreamLayerThemeProvider,
-  mr as ThemeVariables,
-  Ro as UserStatistics,
-  Xo as Vote,
+  Co as ActivePages,
+  _o as Demo,
+  Ho as LeaderboardItemDetail,
+  qo as Login,
+  zo as Onboarding,
+  or as Points,
+  Ko as Question,
+  jo as QuestionInApp,
+  No as QuestionList,
+  tr as StreamLayerThemeProvider,
+  Eo as Tab,
+  Fo as Tabs,
+  pr as ThemeVariables,
+  Wo as UserStatistics,
+  Yo as Vote,
   ir as theme,
-  pr as themeStr
+  er as themeStr
 };

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

@@ -1,10 +1,10 @@
 import { jsxs as e, Fragment as i, jsx as t } from "react/jsx-runtime";
 import { useState as s } from "react";
-import { ActivePages as m, Navigation as a } from "../../../gamification/navigation/index.js";
+import { ActivePages as m, Tabs as a } from "../../../gamification/tabs/index.js";
 import { Leaderboard as n } from "./Leaderboard.js";
 import { QuestionsList as u } from "./QuestionsList.js";
 import { UserSummary as g } from "./UserSummary.js";
-import "../../../gamification/navigation/styles.js";
+import "../../../gamification/tabs/styles.js";
 import "@linaria/react";
 import "@nanostores/react";
 import "../../../gamification/leaderboard-item-detail/index.js";

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

@@ -19,8 +19,8 @@ import "../../../theme/constants.js";
 import "../../../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../../../gamification/vote/components/voting-header/styles.js";
 import "../../../../fedex-a8dcc7b2.js";
-import "../../../gamification/navigation/index.js";
-import "../../../gamification/navigation/styles.js";
+import "../../../gamification/tabs/index.js";
+import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
 import "../../../gamification/leaderboard-item-detail/index.js";
 import "../../../gamification/common-header/index.js";

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

@@ -23,8 +23,8 @@ import "../../gamification/vote/components/voting-header/components/timer/styles
 import "../../gamification/vote/components/voting-header/styles.js";
 import "../../../fedex-a8dcc7b2.js";
 import "./Gamification/Tabs.js";
-import "../../gamification/navigation/index.js";
-import "../../gamification/navigation/styles.js";
+import "../../gamification/tabs/index.js";
+import "../../gamification/tabs/styles.js";
 import "./Gamification/Leaderboard.js";
 import "../../gamification/leaderboard-item-detail/index.js";
 import "../../gamification/common-header/index.js";

package/lib/ui/app/{MastersNavigation → Navigation/MastersNavigation}/index.js

@@ -1,14 +1,14 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
-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 { 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 "../../../icons/index.js";
 import "react";
-import "../../navigation/button/index.js";
-import "../../navigation/button/styles.js";
-import "../../navigation/index.js";
+import "../../../navigation/button/index.js";
+import "../../../navigation/button/styles.js";
+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(

package/lib/ui/app/index.js

@@ -5,7 +5,7 @@ import { FeatureType as u } from "@streamlayer/sdk-web-types";
 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 { MastersNavigation as h } from "./Navigation/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";
@@ -33,8 +33,8 @@ import "../gamification/vote/components/voting-header/components/timer/styles.js
 import "../gamification/vote/components/voting-header/styles.js";
 import "../../fedex-a8dcc7b2.js";
 import "./Features/Gamification/Tabs.js";
-import "../gamification/navigation/index.js";
-import "../gamification/navigation/styles.js";
+import "../gamification/tabs/index.js";
+import "../gamification/tabs/styles.js";
 import "./Features/Gamification/Leaderboard.js";
 import "../gamification/leaderboard-item-detail/index.js";
 import "../gamification/common-header/index.js";

package/lib/ui/app/styles.js

@@ -6,12 +6,13 @@ const n = t.div`
   position: relative;
 `, i = t.div`
   overflow-y: auto;
-  height: calc(100% - var(--header-height));
+  height: 100%;
   transition: transform;
   transition-duration: var(--animation-duration);
   transition-timing-function: var(--animation-function);
 
   &[data-nav='true'] {
+    height: calc(100% - var(--header-height));
     transform: translateY(var(--header-height));
   }
 `;

package/lib/ui/demo/Gamification.js

@@ -1,8 +1,8 @@
-import { jsx as r, jsxs as s, Fragment as k } from "react/jsx-runtime";
-import { FeatureStatus as z } from "@streamlayer/sdk-web-interfaces";
+import { jsx as t, jsxs as s, Fragment as z } from "react/jsx-runtime";
+import { FeatureStatus as J } from "@streamlayer/sdk-web-interfaces";
 import { useStore as p } from "@nanostores/react";
-import { useState as J } from "react";
-import { ActivePages as a, Navigation as K } from "../gamification/navigation/index.js";
+import { useState as K } from "react";
+import { ActivePages as a, Tabs as N } from "../gamification/tabs/index.js";
 import { UserSummary as V } from "./components/UserSummary.js";
 import { QuestionsList as W } from "./components/QuestionsList.js";
 import { Question as X } from "./components/Question.js";
@@ -14,7 +14,7 @@ import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
 import { Leaderboard as Z } from "./components/Leaderboard.js";
 import { DemoContainer as m, UserStatisticsContainer as _, QuestionsContainer as $ } from "./styles.js";
-import "../gamification/navigation/styles.js";
+import "../gamification/tabs/styles.js";
 import "@linaria/react";
 import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";
@@ -58,24 +58,24 @@ import "../gamification/leaderboard-invite-link/styles.js";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
 import "../gamification/leaderboard-list/styles.js";
-const mr = ({
-  gamification: t,
+const mt = ({
+  gamification: r,
   sdk: u
 }) => {
   var d, v, c, b, y, g, S, h, C, G, L, Q, A, E, f, w, x, P, F, O, B, D, R;
-  const j = p(t.status), q = p(t.onboardingStatus), l = p(t.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(t.featureSettings), [n, H] = J(a.HOME);
-  if (j !== z.Ready)
-    return /* @__PURE__ */ r("div", { children: "wait..." });
+  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(r.featureSettings), [n, q] = K(a.HOME);
+  if (T !== J.Ready)
+    return /* @__PURE__ */ t("div", { children: "wait..." });
   if (o != null && o.loading)
-    return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r("div", { children: "Event is loading" }) });
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
   if (!(o != null && o.data))
-    return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r("div", { children: "Event is forbidden" }) });
-  if (!q)
-    return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
+  if (!j)
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
       Y,
       {
         closeFeature: u.closeFeature,
-        gamification: t,
+        gamification: r,
         steps: (v = (d = e.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
         gameIcon: (y = (b = (c = e.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
         sponsorLogo: (h = (S = (g = e.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
@@ -88,27 +88,27 @@ const mr = ({
         inviteCardBtnLabel: (R = (D = e.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
       }
     ) });
-  const M = (i) => {
-    t.openQuestion(i);
-  }, T = () => {
-    t.closeQuestion();
-  }, U = (i, N) => {
-    t.submitAnswer(i, N);
+  const H = (i) => {
+    r.openQuestion(i);
+  }, M = () => {
+    r.closeQuestion();
+  }, U = (i, k) => {
+    r.submitAnswer(i, k);
   };
   return /* @__PURE__ */ s(m, { children: [
-    /* @__PURE__ */ r(K, { activePage: n, toggleActivePage: (i) => {
-      H(i);
+    /* @__PURE__ */ t(N, { activePage: n, toggleActivePage: (i) => {
+      q(i);
     } }),
-    n === a.HOME && /* @__PURE__ */ s(k, { children: [
-      /* @__PURE__ */ r(_, { children: t.userSummary && /* @__PURE__ */ r(V, { store: t.userSummary.getStore() }) }),
+    n === a.HOME && /* @__PURE__ */ s(z, { children: [
+      /* @__PURE__ */ t(_, { children: r.userSummary && /* @__PURE__ */ t(V, { store: r.userSummary.getStore() }) }),
       /* @__PURE__ */ s($, { children: [
-        t.questions && /* @__PURE__ */ r(W, { openQuestion: M, store: t.questions.getStore() }),
-        l && /* @__PURE__ */ r(X, { closeQuestion: T, vote: U, openedQuestion: l })
+        r.questions && /* @__PURE__ */ t(W, { openQuestion: H, store: r.questions.getStore() }),
+        l && /* @__PURE__ */ t(X, { closeQuestion: M, vote: U, openedQuestion: l })
       ] })
     ] }),
-    n === a.LEADERBOARD && t.leaderboardList && /* @__PURE__ */ r(Z, { store: t.leaderboardList.getStore() })
+    n === a.LEADERBOARD && r.leaderboardList && /* @__PURE__ */ t(Z, { store: r.leaderboardList.getStore() })
   ] });
 };
 export {
-  mr as GamificationComponent
+  mt as GamificationComponent
 };

package/lib/ui/demo/Login.js

@@ -1,6 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "@streamlayer/sdk-web-anonymous-auth";
 import { Login as m } from "../login/index.js";
+import { useStore as n } from "@nanostores/react";
 import "react";
 import "react-auth-code-input";
 import "react-phone-number-input";
@@ -14,11 +15,11 @@ import "@connectrpc/connect";
 import "@connectrpc/connect-web";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-const A = ({ sdk: o }) => /* @__PURE__ */ i(m, { login: async (t) => {
+const A = ({ sdk: o }) => n(o.getUserStore()).data ? /* @__PURE__ */ r("button", { onClick: o.logout, children: "logout" }) : /* @__PURE__ */ r(m, { login: async (i) => {
   try {
-    await o.authorizationBypass("streamlayer:streamlayer", t);
-  } catch (r) {
-    throw console.log("login err", r), r;
+    await o.authorizationBypass("streamlayer:streamlayer", i);
+  } catch (t) {
+    throw console.log("login err", t), t;
   }
 }, anonymousLogin: o.anonymousAuthorization, host: o.host });
 export {

package/lib/ui/demo/index.js

@@ -21,8 +21,8 @@ import "../../icon-exit-6a55bb8f.js";
 import "../notifications/notification/question-inapp/styles.js";
 import "../notifications/notification/styles.js";
 import "../notifications/styles.js";
-import "../gamification/navigation/index.js";
-import "../gamification/navigation/styles.js";
+import "../gamification/tabs/index.js";
+import "../gamification/tabs/styles.js";
 import "./components/UserSummary.js";
 import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";

package/lib/ui/gamification/tabs/index.js

@@ -0,0 +1,26 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { Button as i, Title as a, Container as l, STabs as m } from "./styles.js";
+import "@linaria/react";
+var h = /* @__PURE__ */ ((r) => (r.HOME = "home", r.LEADERBOARD = "leaderboard", r))(h || {});
+const t = ({ title: r, active: o, onClick: d }) => /* @__PURE__ */ e(i, { onClick: d, "data-selected": o, children: /* @__PURE__ */ e(a, { children: r }) }), p = ({ activePage: r = "home", toggleActivePage: o }) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ n(m, { "data-position": r === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ e(t, { title: "Home", active: r === "home", onClick: () => o(
+    "home"
+    /* HOME */
+  ) }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      title: "Leader Board",
+      active: r === "leaderboard",
+      onClick: () => o(
+        "leaderboard"
+        /* LEADERBOARD */
+      )
+    }
+  )
+] }) });
+export {
+  h as ActivePages,
+  t as Tab,
+  p as Tabs
+};

package/lib/ui/gamification/tabs/styles.js

@@ -0,0 +1,70 @@
+import { styled as o } from "@linaria/react";
+const t = o.div`
+  padding-left: var(--container-padding);
+  padding-right: var(--container-padding);
+`, n = o.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  border-radius: 8px;
+  background-color: var(--color-neutrals-gray2);
+  padding: 4px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    background-color: var(--color-white);
+    border-radius: 6px;
+    height: 28px;
+    left: 4px;
+    width: calc(50% - 4px);
+    transition: transform var(--animation-duration) var(--animation-function);
+  }
+
+  &[data-position='left'] {
+    &:before {
+      transform: translateX(0);
+    }
+  }
+
+  &[data-position='right'] {
+    &:before {
+      transform: translateX(100%);
+    }
+  }
+`, e = o.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: var(--color-neutrals-gray7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 550;
+  width: 50%;
+  box-sizing: border-box;
+  padding: 4px 10px;
+  height: 28px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary-green1);
+  }
+
+  &[data-selected='true'] {
+    color: var(--color-primary-green1);
+    cursor: default;
+  }
+`, a = o.span`
+  position: relative;
+  z-index: 2;
+`;
+export {
+  e as Button,
+  t as Container,
+  n as STabs,
+  a as Title
+};

package/lib/ui/theme/masters.js

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

package/package.json

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

package/lib/ui/gamification/navigation/index.js

@@ -1,34 +0,0 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { Container as n, PageTitle as l } from "./styles.js";
-import "@linaria/react";
-var m = /* @__PURE__ */ ((r) => (r.HOME = "home", r.LEADERBOARD = "leaderboard", r))(m || {});
-const p = ({ activePage: r = "home", toggleActivePage: o }) => /* @__PURE__ */ d(n, { children: [
-  /* @__PURE__ */ e(
-    l,
-    {
-      style: { borderBottom: r === "home" ? "2px solid var(--color-blue-primary)" : "none" },
-      onClick: () => o(
-        "home"
-        /* HOME */
-      ),
-      children: "Home"
-    }
-  ),
-  /* @__PURE__ */ e(
-    l,
-    {
-      style: {
-        borderBottom: r === "leaderboard" ? "2px solid var(--color-blue-primary)" : "none"
-      },
-      onClick: () => o(
-        "leaderboard"
-        /* LEADERBOARD */
-      ),
-      children: "Leader Board"
-    }
-  )
-] });
-export {
-  m as ActivePages,
-  p as Navigation
-};

package/lib/ui/gamification/navigation/styles.js

@@ -1,26 +0,0 @@
-import { styled as e } from "@linaria/react";
-const o = e.div`
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  color: var(--color-white);
-  font-size: 14px;
-  font-weight: 400;
-  overflow: hidden;
-  margin-bottom: 12px;
-  cursor: pointer;
-`, i = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 49%;
-  padding: 4px;
-`;
-export {
-  o as Container,
-  i as PageTitle
-};