@streamlayer/react-ui 0.41.0 → 0.42.1

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

@@ -1,18 +1,16 @@
-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 "@streamlayer/sdk-web-types";
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import { styled as x } from "@linaria/react";
+import { useState as p, useCallback as g, useMemo as s } from "react";
+import { QuestionType as b } from "@streamlayer/sdk-web-types";
+import { Vote as h } from "../../../gamification/vote/index.js";
+import { VoteHeader as C } from "../../../gamification/vote/vote-header/index.js";
 import "../../../../index-7045fbb2.js";
 import "../../../gamification/vote/components/voting-option/styles.js";
 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 T = x.div`
   background: var(--color-transparent-item);
   width: 100%;
   height: 100%;
@@ -21,67 +19,51 @@ const b = n.div`
   align-items: center;
   justify-content: flex-start;
   flex-direction: column;
-
-  > 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);
+`, I = ({ openedQuestion: r, closeQuestion: l, vote: o }) => {
+  var m;
+  const [f, i] = p(!1);
+  g(
+    (t) => {
+      i(t);
     },
-    [a]
+    [i]
   );
-  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 c = s(
+    () => r == null ? void 0 : r.answers.find((t) => t.youVoted === !0),
+    [r]
+  ), y = 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 /* @__PURE__ */ e(T, { children: [
+    /* @__PURE__ */ a(C, { close: l, type: (r == null ? void 0 : r.type) || b.UNSET }),
+    r && /* @__PURE__ */ a(
+      h,
       {
-        title: t.subject,
-        feedbackMessages: (c = t.options) == null ? void 0 : c.options.value,
-        questionType: t.type,
-        questionId: t.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,
-          questionAnswered: !!i,
-          hasCorrectAnswer: f,
-          points: r.points,
-          onVote: m
+        title: r.subject,
+        feedbackMessages: (m = r.options) == null ? void 0 : m.options.value,
+        questionType: r.type,
+        questionId: r.id,
+        questionAnswered: !!c,
+        questionAnsweredCorrectly: c == null ? void 0 : c.correct,
+        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: !!c || r.marketClosed || f,
+          questionAnswered: !!c,
+          hasCorrectAnswer: y,
+          points: t.points,
+          onVote: o
         }))
       }
-    ) })
-  ] }) }) : null;
+    )
+  ] });
 };
 export {
-  M as Question
+  I as Question
 };

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

@@ -1,11 +1,13 @@
-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 m, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { styled as e } from "@linaria/react";
+import { useStore as n } from "@nanostores/react";
+import { SDKScrollContainer as s } from "../../styles.js";
+import { ShowIn as a } from "../../../show-in/index.js";
+import { Question as d } from "./Question.js";
+import { Tabs as l } from "./Tabs.js";
 import "react";
-import "../../../gamification/vote/index.js";
 import "@streamlayer/sdk-web-types";
+import "../../../gamification/vote/index.js";
 import "../../../../index-7045fbb2.js";
 import "../../../gamification/vote/components/voting-option/styles.js";
 import "../../../gamification/vote/styles.js";
@@ -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 u = e(a)`
+  position: absolute;
+  inset: 0;
+  top: var(--header-height);
+  background: var(--color-neutrals-white);
+  z-index: 3;
+`, po = ({
   gamification: o
 }) => {
-  const r = i(o.openedQuestion);
+  const { loading: i, data: t } = n(o.openedQuestion);
   return /* @__PURE__ */ m(p, { children: [
-    r && /* @__PURE__ */ t(
-      e,
+    (i || t) && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
+      d,
       {
         closeQuestion: o.closeQuestion,
         vote: o.submitAnswer,
-        openedQuestion: r
+        openedQuestion: t
       }
-    ),
-    !r && /* @__PURE__ */ t(s, { gamification: o })
+    ) }),
+    /* @__PURE__ */ r(s, { "data-nav": "true", children: /* @__PURE__ */ r(l, { gamification: o }) })
   ] });
 };
 export {
-  g as GamificationOverlay
+  po 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/gamification/vote/styles.js

@@ -1,7 +1,8 @@
 import { styled as t } from "@linaria/react";
 const e = t.div`
   padding: 16px;
-  color: var(--color-white);
+  color: #fff;
+  background: #000;
   font-weight: 700;
   font-size: 14px;
 
@@ -28,22 +29,22 @@ const e = t.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`, l = t.div`
+`, d = t.div`
   padding: 14px 12px 14px 16px;
   display: flex;
   align-items: center;
-`, r = t.img`
+`, l = t.img`
   width: 24px;
   height: 24px;
   margin-right: 12px;
-`, d = t.div`
+`, p = t.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 16;
   font-weight: 700;
   margin-bottom: 10px;
-`, p = t.div`
+`, r = t.div`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
@@ -54,10 +55,10 @@ const e = t.div`
 `;
 export {
   e as Container,
-  l as Feedback,
-  p as FeedbackDescription,
-  r as FeedbackIcon,
-  d as FeedbackTitle,
+  d as Feedback,
+  r as FeedbackDescription,
+  l as FeedbackIcon,
+  p as FeedbackTitle,
   a as Loader,
   n as Options,
   o as Title

package/lib/ui/gamification/vote/vote-header/index.js

@@ -1,20 +1,20 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { QuestionTypeData as i } from "../../constants.js";
-import { Container as p, QuestionTypeWrap as s, QuestionTypeIcon as m, QuestionTypeTitle as c, CloseButton as l, CloseIcon as a } from "./styles.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { QuestionTypeData as t } from "../../constants.js";
+import { Container as m, QuestionTypeWrap as c, QuestionTypeIcon as l, QuestionTypeTitle as p, CloseButton as s, CloseIcon as a } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const Q = ({ type: t, close: r }) => {
-  const e = i[t];
-  return e ? /* @__PURE__ */ n(p, { children: [
-    /* @__PURE__ */ n(s, { children: [
-      /* @__PURE__ */ o(m, { name: e.iconName }),
-      /* @__PURE__ */ o(c, { children: e.label })
+const b = ({ type: n, close: i }) => {
+  const o = t[n];
+  return /* @__PURE__ */ r(m, { children: [
+    /* @__PURE__ */ r(c, { children: [
+      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ e(l, { name: o.iconName }),
+      (o == null ? void 0 : o.label) && /* @__PURE__ */ e(p, { children: o.label })
     ] }),
-    /* @__PURE__ */ o(l, { onClick: r, children: /* @__PURE__ */ o(a, { name: "icon-cross" }) })
-  ] }) : null;
+    /* @__PURE__ */ e(s, { onClick: i, children: /* @__PURE__ */ e(a, { name: "icon-cross" }) })
+  ] });
 };
 export {
-  Q as VoteHeader
+  b as VoteHeader
 };

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.1s 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.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -27,16 +27,16 @@
   ],
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.52.0",
-    "@streamlayer/feature-gamification": "^0.18.1",
-    "@streamlayer/sdk-web": "^0.28.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.10.12",
-    "@streamlayer/sdk-web-api": "^0.0.6",
-    "@streamlayer/sdk-web-core": "^0.15.0",
-    "@streamlayer/sdk-web-features": "^0.10.6",
-    "@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"
+    "@streamlayer/feature-gamification": "^0.18.2",
+    "@streamlayer/sdk-web": "^0.28.4",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.10.13",
+    "@streamlayer/sdk-web-api": "^0.0.7",
+    "@streamlayer/sdk-web-core": "^0.15.1",
+    "@streamlayer/sdk-web-features": "^0.10.7",
+    "@streamlayer/sdk-web-interfaces": "^0.18.5",
+    "@streamlayer/sdk-web-notifications": "^0.10.4",
+    "@streamlayer/sdk-web-storage": "^0.3.7",
+    "@streamlayer/sdk-web-types": "^0.16.5"
   },
   "nx": {
     "implicitDependencies": [
@@ -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.2"
   }
 }