@streamlayer/react-ui 0.41.0 → 0.42.0

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

@@ -1,8 +1,8 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import { styled as n } from "@linaria/react";
-import { useState as p, useCallback as y, useMemo as o } from "react";
-import { Vote as x } from "../../../gamification/vote/index.js";
-import { VoteHeader as h } from "../../../gamification/vote/vote-header/index.js";
+import { jsx as c, jsxs as d } from "react/jsx-runtime";
+import { styled as y } from "@linaria/react";
+import { useState as p, useCallback as x, useMemo as s } from "react";
+import { Vote as h } from "../../../gamification/vote/index.js";
+import { VoteHeader as g } from "../../../gamification/vote/vote-header/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../../../index-7045fbb2.js";
 import "../../../gamification/vote/components/voting-option/styles.js";
@@ -10,9 +10,7 @@ import "../../../gamification/vote/styles.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/vote/vote-header/styles.js";
 import "../../../icons/index.js";
-const b = n.div`
-  position: absolute;
-  top: 0;
+const b = y.div`
   background: var(--color-transparent-item);
   width: 100%;
   height: 100%;
@@ -25,58 +23,47 @@ const b = n.div`
   > div {
     width: 100%;
     background: #000;
-    animation: slide-in 0.3s ease-in;
   }
-
-  @keyframes slide-in {
-    from {
-      transform: translateX(-100%);
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-`, M = ({ openedQuestion: t, closeQuestion: e, vote: m }) => {
-  var c;
-  const [l, a] = p(!1);
-  y(
-    (r) => {
-      a(r);
+`, M = ({ openedQuestion: r, closeQuestion: l, vote: a }) => {
+  var o;
+  const [e, m] = p(!1);
+  x(
+    (t) => {
+      m(t);
     },
-    [a]
+    [m]
   );
-  const i = o(
-    () => t == null ? void 0 : t.answers.find((r) => r.youVoted === !0),
-    [t]
-  ), f = o(
-    () => !!(t != null && t.answers.find((r) => r.correct === !0)),
-    [t]
+  const i = s(
+    () => r == null ? void 0 : r.answers.find((t) => t.youVoted === !0),
+    [r]
+  ), f = s(
+    () => !!(r != null && r.answers.find((t) => t.correct === !0)),
+    [r]
   );
-  return t ? /* @__PURE__ */ s(b, { children: /* @__PURE__ */ d("div", { children: [
-    /* @__PURE__ */ s(h, { close: e, type: t.type }),
-    /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(
-      x,
+  return r ? /* @__PURE__ */ c(b, { children: /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ c(g, { close: l, type: r.type }),
+    /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(
+      h,
       {
-        title: t.subject,
-        feedbackMessages: (c = t.options) == null ? void 0 : c.options.value,
-        questionType: t.type,
-        questionId: t.id,
+        title: r.subject,
+        feedbackMessages: (o = r.options) == null ? void 0 : o.options.value,
+        questionType: r.type,
+        questionId: r.id,
         questionAnswered: !!i,
         questionAnsweredCorrectly: i == null ? void 0 : i.correct,
-        options: t.answers.map((r) => ({
-          id: r.id,
-          title: r.text,
-          icon: r.icon,
-          type: t.type,
-          correct: r.correct,
-          percentage: r.percentage,
-          answered: r.youVoted,
-          disabled: !!i || t.marketClosed || l,
+        options: r.answers.map((t) => ({
+          id: t.id,
+          title: t.text,
+          icon: t.icon,
+          type: r.type,
+          correct: t.correct,
+          percentage: t.percentage,
+          answered: t.youVoted,
+          disabled: !!i || r.marketClosed || e,
           questionAnswered: !!i,
           hasCorrectAnswer: f,
-          points: r.points,
-          onVote: m
+          points: t.points,
+          onVote: a
         }))
       }
     ) })

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

@@ -1,8 +1,10 @@
-import { jsxs as m, Fragment as p, jsx as t } from "react/jsx-runtime";
-import { useStore as i } from "@nanostores/react";
-import { Question as e } from "./Question.js";
-import { Tabs as s } from "./Tabs.js";
-import "@linaria/react";
+import { jsxs as i, Fragment as m, jsx as r } from "react/jsx-runtime";
+import { styled as p } from "@linaria/react";
+import { useStore as e } from "@nanostores/react";
+import { SDKScrollContainer as n } from "../../styles.js";
+import { ShowIn as s } from "../../../show-in/index.js";
+import { Question as u } from "./Question.js";
+import { Tabs as l } from "./Tabs.js";
 import "react";
 import "../../../gamification/vote/index.js";
 import "@streamlayer/sdk-web-types";
@@ -13,7 +15,6 @@ import "../../../gamification/vote/vote-header/index.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/vote/vote-header/styles.js";
 import "../../../icons/index.js";
-import "../../styles.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -43,22 +44,28 @@ import "../../../button/styles.js";
 import "../../../gamification/question/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const g = ({
+const d = p(s)`
+  position: absolute;
+  inset: 0;
+  top: var(--header-height);
+  background: var(--color-neutrals-white);
+  z-index: 3;
+`, mo = ({
   gamification: o
 }) => {
-  const r = i(o.openedQuestion);
-  return /* @__PURE__ */ m(p, { children: [
-    r && /* @__PURE__ */ t(
-      e,
+  const t = e(o.openedQuestion);
+  return /* @__PURE__ */ i(m, { children: [
+    t && /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(
+      u,
       {
         closeQuestion: o.closeQuestion,
         vote: o.submitAnswer,
-        openedQuestion: r
+        openedQuestion: t
       }
-    ),
-    !r && /* @__PURE__ */ t(s, { gamification: o })
+    ) }),
+    /* @__PURE__ */ r(n, { "data-nav": "true", children: /* @__PURE__ */ r(l, { gamification: o }) })
   ] });
 };
 export {
-  g as GamificationOverlay
+  mo as GamificationOverlay
 };

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

@@ -6,8 +6,10 @@ import { GamificationOverlay as e } from "./Gamification/index.js";
 import { HighlightsOverlay as n } from "./Highlights/index.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-import "./Gamification/Question.js";
 import "@linaria/react";
+import "../styles.js";
+import "../../show-in/index.js";
+import "./Gamification/Question.js";
 import "../../gamification/vote/index.js";
 import "../../../index-7045fbb2.js";
 import "../../gamification/vote/components/voting-option/styles.js";
@@ -17,7 +19,6 @@ import "../../gamification/constants.js";
 import "../../gamification/vote/vote-header/styles.js";
 import "../../icons/index.js";
 import "./Gamification/Tabs.js";
-import "../styles.js";
 import "../../gamification/tabs/index.js";
 import "../../gamification/tabs/styles.js";
 import "./Gamification/Leaderboard.js";
@@ -55,7 +56,7 @@ import "../../gamification/insight-list/index.js";
 import "../../gamification/insight/index.js";
 import "../../gamification/insight/styles.js";
 import "../../gamification/insight-list/styles.js";
-const cr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
+const hr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
 export {
-  cr as ActiveFeature
+  hr as ActiveFeature
 };

package/lib/ui/app/masters.js

@@ -1,14 +1,14 @@
-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 { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { StreamLayerThemeProvider as f } from "../theme/index.js";
+import { mastersVariables as v } from "../theme/masters.js";
+import { ActiveFeature as S } from "./Features/index.js";
 import { MastersNavigation as y } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as S, SDKScrollContainer as h } from "./styles.js";
+import { SDKContainer as h, SDKScrollContainer as e } 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 { FeaturedGroupsButtonId as g } from "../navigation/button/FeaturedGroups.js";
 import "../theme/theme.js";
 import "@linaria/core";
 import "../theme/constants.js";
@@ -18,8 +18,9 @@ import "./Features/FeatureProvider.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
 import "./Features/Gamification/index.js";
-import "./Features/Gamification/Question.js";
 import "@linaria/react";
+import "../show-in/index.js";
+import "./Features/Gamification/Question.js";
 import "../gamification/vote/index.js";
 import "../../index-7045fbb2.js";
 import "../gamification/vote/components/voting-option/styles.js";
@@ -71,16 +72,16 @@ import "../navigation/masters.js";
 import "../navigation/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const F = ({ sdk: o }) => {
-  const [, i] = k(o);
-  return /* @__PURE__ */ t(v, { feature: i, sdk: o });
-}, zr = ({ sdk: o, overlays: i, children: p, event: n }) => {
-  const { sdkEnabled: m, sdkReady: s, activeOverlay: r, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = b(
+const B = ({ sdk: o }) => {
+  const [, m] = k(o);
+  return /* @__PURE__ */ t(S, { feature: m, sdk: o });
+}, Hr = ({ sdk: o, overlays: m, children: p, event: n }) => {
+  const { sdkEnabled: i, sdkReady: s, activeOverlay: r, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = b(
     o,
     n
   );
-  return /* @__PURE__ */ t(u, { style: { height: "100%" }, children: /* @__PURE__ */ e(S, { className: f, children: [
-    m && /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(f, { style: { height: "100%" }, children: /* @__PURE__ */ u(h, { className: v, children: [
+    i && /* @__PURE__ */ t(
       y,
       {
         sdkReady: s,
@@ -88,13 +89,25 @@ const F = ({ sdk: o }) => {
         setActiveOverlay: d
       }
     ),
-    /* @__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 })
-    ] })
+    /* @__PURE__ */ t(
+      e,
+      {
+        "data-nav": i.toString(),
+        style: { display: !i || r === A ? "block" : "none" },
+        children: p && p({ enableSdk: l, disableSdk: c })
+      }
+    ),
+    /* @__PURE__ */ t(
+      e,
+      {
+        "data-nav": i.toString(),
+        style: { display: r === a ? "block" : "none" },
+        children: m && r === a && m[r]
+      }
+    ),
+    i && r === g && /* @__PURE__ */ t(B, { sdk: o })
   ] }) });
 };
 export {
-  zr as MastersApp
+  Hr as MastersApp
 };

package/lib/ui/show-in/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ShowIn: React.FC<{
+    children: React.ReactNode | React.ReactNode[];
+    style?: React.CSSProperties;
+    className?: string;
+}>;

package/lib/ui/show-in/index.js

@@ -0,0 +1,36 @@
+import { jsx as e } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
+const n = r.div`
+  overflow: hidden;
+  width: 100%;
+  transform: scale(1);
+  opacity: 1;
+  max-height: 500px;
+
+  animation: containerShowIn 0.5s ease-out;
+
+  @keyframes containerShowIn {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+      max-height: 0;
+    }
+    80% {
+      opacity: 0;
+      transform: scale(0.9);
+      max-height: 500px;
+    }
+    85% {
+      transform: scale(0.9);
+      max-height: 500px;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+      max-height: 500px;
+    }
+  }
+`, m = ({ children: t, style: a, className: o }) => /* @__PURE__ */ e(n, { style: a, className: o, children: t });
+export {
+  m as ShowIn
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -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.24.0"
+    "@streamlayer/react": "^0.24.1"
   }
 }