@streamlayer/react-ui 0.24.3 → 0.25.1

package/lib/{lib → ui}/gamification/user-statistics/styles.js

@@ -23,14 +23,14 @@ const t = e.div`
   column-gap: 8px;
   flex: 1;
   overflow: hidden;
-`, a = e.img`
-  width: 100%;
-  height: 100%;
+`, p = e.img`
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
   flex-shrink: 0;
-`, p = e.div`
+`, a = e.div`
   padding-top: 4px;
   display: flex;
   flex-direction: column;
@@ -95,7 +95,7 @@ const t = e.div`
   max-height: 48px;
 `;
 export {
-  a as Avatar,
+  p as Avatar,
   h as AvatarPlaceholder,
   i as BottomInfo,
   t as Container,
@@ -107,7 +107,7 @@ export {
   c as TrophyIcon,
   n as User,
   m as UserAccountBtn,
-  p as UserInfo,
+  a as UserInfo,
   s as UserName,
   d as UserRating
 };

package/lib/{lib → ui}/gamification/vote/components/voting-header/index.js

@@ -1,6 +1,6 @@
 import { jsxs as N, jsx as M, Fragment as O } from "react/jsx-runtime";
 import { QuestionType as j } from "@streamlayer/sdk-web-types";
-import { c as E } from "../../../../../icon-exit-d3f9fc80.js";
+import { i as E } from "../../../../../icon-exit-6a55bb8f.js";
 import { Timer as k } from "./components/timer/index.js";
 import { Container as C, RightBlock as w, Interactive as Y, ReactionIconWrap as c, ReactionIcon as y, ExitBtn as o, ExitIcon as r, Logo as a } from "./styles.js";
 import { Points as z } from "./components/points/index.js";

package/lib/{lib → ui}/gamification/vote/components/voting-option/index.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "@streamlayer/sdk-web-types";
-import { V as n } from "../../../../../index-d5620d2c.js";
+import { V as n } from "../../../../../index-7045fbb2.js";
 import "./styles.js";
 import "@linaria/react";
 export {

package/lib/{lib → ui}/gamification/vote/index.js

@@ -1,7 +1,7 @@
 import { jsxs as e, jsx as i } from "react/jsx-runtime";
 import { QuestionType as b } from "@streamlayer/sdk-web-types";
 import { useState as N, useCallback as s, useEffect as S } from "react";
-import { V as D, c as j } from "../../../index-d5620d2c.js";
+import { V as D, c as j } from "../../../index-7045fbb2.js";
 import { Container as p, Title as M, Options as h, Loader as Z, Feedback as u, FeedbackIcon as L, FeedbackTitle as z, FeedbackDescription as G } from "./styles.js";
 import "./components/voting-option/styles.js";
 import "@linaria/react";

package/lib/{lib → ui}/notifications/decorator.js

@@ -8,7 +8,7 @@ import "./notification/index.js";
 import "./notification/onboarding-inapp/index.js";
 import "./notification/onboarding-inapp/styles.js";
 import "./notification/question-inapp/index.js";
-import "../../icon-exit-d3f9fc80.js";
+import "../../icon-exit-6a55bb8f.js";
 import "./notification/question-inapp/styles.js";
 import "./notification/styles.js";
 import "./styles.js";

package/lib/{lib → ui}/notifications/index.js

@@ -8,7 +8,7 @@ import "./notification/onboarding-inapp/index.js";
 import "./notification/onboarding-inapp/styles.js";
 import "@linaria/react";
 import "./notification/question-inapp/index.js";
-import "../../icon-exit-d3f9fc80.js";
+import "../../icon-exit-6a55bb8f.js";
 import "./notification/question-inapp/styles.js";
 import "./notification/styles.js";
 const S = ({ notificationsStore: i }) => {

package/lib/{lib → ui}/notifications/notification/index.js

@@ -6,7 +6,7 @@ import { QuestionInApp as e } from "./question-inapp/index.js";
 import { NotificationContainer as a } from "./styles.js";
 import "./onboarding-inapp/styles.js";
 import "@linaria/react";
-import "../../../icon-exit-d3f9fc80.js";
+import "../../../icon-exit-6a55bb8f.js";
 import "./question-inapp/styles.js";
 const l = {
   [i.ONBOARDING]: N,

package/lib/{lib → ui}/notifications/notification/question-inapp/index.js

@@ -1,19 +1,19 @@
 import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import { useCallback as a } from "react";
-import { c as s } from "../../../../icon-exit-d3f9fc80.js";
+import { useCallback as c } from "react";
+import { i as s } from "../../../../icon-exit-6a55bb8f.js";
 import { Container as d, IconWrap as m, Icon as C, Content as h, TitleWrap as I, Title as f, CloseBtnWrap as k, CloseBtn as u, CloseIcon as x } from "./styles.js";
 import "@linaria/react";
-const B = ({ close: o, action: p, data: { color: r, icon: i, title: c } }) => {
-  const e = a(
+const B = ({ close: i, action: p, data: { color: r, icon: o, title: a } }) => {
+  const e = c(
     (l) => {
-      l.stopPropagation(), o == null || o();
+      l.stopPropagation(), i == null || i();
     },
-    [o]
+    [i]
   );
   return /* @__PURE__ */ t(d, { onClick: p, children: [
-    /* @__PURE__ */ n(m, { style: r ? { backgroundColor: r } : {}, children: i && /* @__PURE__ */ n(C, { alt: "in-app-icon", src: i }) }),
+    /* @__PURE__ */ n(m, { style: r ? { backgroundColor: r } : {}, children: o && /* @__PURE__ */ n(C, { alt: "in-app-icon", src: o }) }),
     /* @__PURE__ */ t(h, { children: [
-      /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(f, { id: "in-app-title", children: c || "" }) }),
+      /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(f, { id: "in-app-title", children: a || "" }) }),
       /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(u, { onClick: e, children: /* @__PURE__ */ n(x, { alt: "close-in-app-icon", src: s }) }) })
     ] })
   ] });

package/lib/{lib → ui}/theme/constants.js

@@ -10,6 +10,7 @@ const R = {
   BG_TRANSPARENT_VOTE_PROGRESS_ERROR: "rgba(205, 37, 37, 0.5)",
   BG_TRANSPARENT_USER_CONTAINER: "rgba(255, 255, 255, 0.05)",
   BG_TRANSPARENT_ONBOARDING_INAPP: "rgba(138, 159, 182, 0.2)",
+  LEADERBOARD_UNIT: "rgba(255, 255, 255, 0.5)",
   BLUE_PRIMARY: "#1589EE",
   RED_PRIMARY: "#CD2525",
   RED_SECONDARY: "#EB5757",
@@ -28,11 +29,11 @@ const R = {
   DIVIDER_COLOR_PRIMARY: "#2d3135",
   DIVIDER_COLOR_SECONDARY: "#53565a",
   GREEN_PRIMARY_BTN: "#009B77"
-}, _ = {
+}, E = {
   FAMILY: "Roboto, sans-serif",
   COLOR: "#fff"
 };
 export {
   R as COLORS,
-  _ as FONT
+  E as FONT
 };

package/lib/{lib → ui}/theme/theme.js

@@ -1,6 +1,6 @@
 import { css as R } from "@linaria/core";
 import { COLORS as r, FONT as o } from "./constants.js";
-const _ = R`
+const n = R`
   --color-bg-transparent: ${r.BG_TRANSPARENT};
   --color-transparent-vote-container: ${r.BG_TRANSPARENT_VOTE_CONTAINER};
   --color-transparent-item: ${r.BG_TRANSPARENT_ITEM};
@@ -9,6 +9,7 @@ const _ = R`
   --color-bg-transparent-item-vote: ${r.BG_TRANSPARENT_ITEM_VOTE};
   --color-transparent-user-container: ${r.BG_TRANSPARENT_USER_CONTAINER};
   --color-transparent-onboarding-inapp: ${r.BG_TRANSPARENT_ONBOARDING_INAPP};
+  --color-leaderboard-unit: ${r.LEADERBOARD_UNIT};
   --color-blue-primary: ${r.BLUE_PRIMARY};
   --color-red-primary: ${r.RED_PRIMARY};
   --color-red-secondary: ${r.RED_SECONDARY};
@@ -16,6 +17,7 @@ const _ = R`
   --color-white: ${r.WHITE};
   --color-red-2: ${r.RED_2};
   --color-grey-primary: ${r.GREY_PRIMARY};
+  --color-grey-primary-onboarding-inapp: ${r.GREY_PRIMARY_ONBOARDING_INAPP};
   --color-divider-color-primary: ${r.DIVIDER_COLOR_PRIMARY};
   --color-divider-color-secondary: ${r.DIVIDER_COLOR_SECONDARY};
   --color-green-primary-btn: ${r.GREEN_PRIMARY_BTN};
@@ -23,5 +25,5 @@ const _ = R`
   --font-color: ${o.COLOR};
 `;
 export {
-  _ as theme
+  n as theme
 };

package/lib/utils/decorators/container.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import { StreamLayerThemeProvider as i } from "../../lib/theme/index.js";
+import { StreamLayerThemeProvider as i } from "../../ui/theme/index.js";
 import { AppContainer as m } from "./styles.js";
-import "../../lib/theme/theme.js";
+import "../../ui/theme/theme.js";
 import "@linaria/core";
-import "../../lib/theme/constants.js";
+import "../../ui/theme/constants.js";
 import "@linaria/react";
 const h = (o) => /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(o, {}) }) }) });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.24.3",
+  "version": "0.25.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -22,16 +22,16 @@
   ],
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.45.1",
-    "@streamlayer/feature-gamification": "^0.14.2",
-    "@streamlayer/sdk-web": "^0.26.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.10.2",
-    "@streamlayer/sdk-web-core": "^0.11.2",
-    "@streamlayer/sdk-web-features": "^0.9.2",
+    "@streamlayer/feature-gamification": "^0.15.0",
+    "@streamlayer/sdk-web": "^0.26.3",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.10.3",
+    "@streamlayer/sdk-web-core": "^0.11.3",
+    "@streamlayer/sdk-web-features": "^0.9.3",
     "@streamlayer/sdk-web-api": "^0.1.0",
-    "@streamlayer/sdk-web-interfaces": "^0.17.1",
-    "@streamlayer/sdk-web-notifications": "^0.9.1",
+    "@streamlayer/sdk-web-interfaces": "^0.17.2",
+    "@streamlayer/sdk-web-notifications": "^0.9.2",
     "@streamlayer/sdk-web-storage": "^0.3.1",
-    "@streamlayer/sdk-web-types": "^0.14.1"
+    "@streamlayer/sdk-web-types": "^0.15.0"
   },
   "devDependencies": {
     "@connectrpc/connect": "^1.1.3",

package/lib/lib/demo/Gamification.js

@@ -1,95 +0,0 @@
-import { jsx as t, jsxs as T } from "react/jsx-runtime";
-import { FeatureStatus as z } from "@streamlayer/sdk-web-interfaces";
-import { useStore as i } from "@nanostores/react";
-import { UserSummary as H } from "./components/UserSummary.js";
-import { QuestionsList as J } from "./components/QuestionsList.js";
-import { Question as K } from "./components/Question.js";
-import { Onboarding as M } from "../gamification/onboarding/index.js";
-import "@streamlayer/sdk-web-types";
-import "../gamification/insight/styles.js";
-import "../gamification/insight-list/styles.js";
-import "../gamification/common-header/styles.js";
-import "../gamification/detailed-insight/styles.js";
-import { DemoContainer as n, UserStatisticsContainer as N, QuestionsContainer as P } from "./styles.js";
-import "../gamification/user-statistics/index.js";
-import "../../utils/common.js";
-import "../gamification/user-statistics/components/statistics/index.js";
-import "../gamification/user-statistics/components/statistics/styles.js";
-import "@linaria/react";
-import "../gamification/user-statistics/components/rank/index.js";
-import "../gamification/user-statistics/components/rank/styles.js";
-import "../gamification/user-statistics/styles.js";
-import "../gamification/question-list/index.js";
-import "../gamification/question/index.js";
-import "../../icon-chevron-138a557c.js";
-import "../gamification/question/styles.js";
-import "../gamification/question-list/styles.js";
-import "react";
-import "../gamification/vote/index.js";
-import "../../index-d5620d2c.js";
-import "../gamification/vote/components/voting-option/styles.js";
-import "../gamification/vote/styles.js";
-import "../gamification/vote/components/voting-header/index.js";
-import "../../icon-exit-d3f9fc80.js";
-import "../gamification/vote/components/voting-header/components/timer/index.js";
-import "react-countdown-circle-timer";
-import "../theme/constants.js";
-import "../gamification/vote/components/voting-header/components/timer/styles.js";
-import "../gamification/vote/components/voting-header/styles.js";
-import "../gamification/vote/components/voting-header/components/points/index.js";
-import "../gamification/vote/components/voting-header/components/points/styles.js";
-import "../gamification/onboarding/styles.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js";
-const zr = ({
-  gamification: r,
-  sdk: m
-}) => {
-  var a, u, l, d, v, c, y, b, C, h, G, S, Q, L, g, w, x, f, F, j, q, B, E;
-  const U = i(r.status), A = i(r.onboardingStatus), s = i(r.openedQuestion), { slStreamId: e } = i(m.sdkStore), o = i(r.featureSettings);
-  if (U !== z.Ready)
-    return /* @__PURE__ */ t("div", { children: "wait..." });
-  if (e != null && e.loading)
-    return /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
-  if (!(e != null && e.data))
-    return /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
-  if (!A)
-    return /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
-      M,
-      {
-        closeFeature: m.closeFeature,
-        gamification: r,
-        steps: (u = (a = o.inplayGame) == null ? void 0 : a.onboarding) == null ? void 0 : u.steps,
-        gameIcon: (v = (d = (l = o.inplayGame) == null ? void 0 : l.overview) == null ? void 0 : d.media) == null ? void 0 : v.gameIcon,
-        sponsorLogo: (b = (y = (c = o.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : y.media) == null ? void 0 : b.sponsorLogo,
-        rules: (h = (C = o.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : h.rules,
-        rulesBtnLabel: (S = (G = o.inplayGame) == null ? void 0 : G.rules) == null ? void 0 : S.buttonLabel,
-        rulesTitle: (L = (Q = o.inplayGame) == null ? void 0 : Q.rules) == null ? void 0 : L.heading,
-        primaryColor: (x = (w = (g = o.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
-        inviteCardTitle: (F = (f = o.inplayGame) == null ? void 0 : f.inviteCard) == null ? void 0 : F.heading,
-        inviteCardSubtext: (q = (j = o.inplayGame) == null ? void 0 : j.inviteCard) == null ? void 0 : q.subtext,
-        inviteCardBtnLabel: (E = (B = o.inplayGame) == null ? void 0 : B.inviteCard) == null ? void 0 : E.buttonLabel
-      }
-    ) });
-  const D = (p) => {
-    r.openQuestion(p);
-  }, O = () => {
-    r.closeQuestion();
-  }, R = (p, k) => {
-    r.submitAnswer(p, k);
-  };
-  return /* @__PURE__ */ T(n, { children: [
-    /* @__PURE__ */ t(N, { children: r.userSummary && /* @__PURE__ */ t(H, { store: r.userSummary.getStore() }) }),
-    /* @__PURE__ */ T(P, { children: [
-      r.questions && /* @__PURE__ */ t(J, { openQuestion: D, store: r.questions.getStore() }),
-      s && /* @__PURE__ */ t(K, { closeQuestion: O, vote: R, openedQuestion: s })
-    ] })
-  ] });
-};
-export {
-  zr as GamificationComponent
-};

package/lib/lib/demo/components/UserSummary.js

@@ -1,32 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useStore as e } from "@nanostores/react";
-import { UserStatistics as s } from "../../gamification/user-statistics/index.js";
-import "../../../utils/common.js";
-import "../../gamification/user-statistics/components/statistics/index.js";
-import "../../gamification/user-statistics/components/statistics/styles.js";
-import "@linaria/react";
-import "../../gamification/user-statistics/components/rank/index.js";
-import "../../gamification/user-statistics/components/rank/styles.js";
-import "../../gamification/user-statistics/styles.js";
-const g = ({ store: t }) => {
-  var m;
-  const { data: r } = e(t);
-  return r != null && r.summary ? /* @__PURE__ */ a(
-    s,
-    {
-      avatar: r.summary.avatar,
-      name: r.summary.name,
-      points: r.summary.points,
-      grade: "0",
-      friendsRank: r.summary.friendsRank,
-      globalRank: r.summary.rank,
-      winStreak: r.summary.streak,
-      correct: r.summary.correct,
-      incorrect: r.summary.incorrect,
-      successRate: (m = r.percentage) == null ? void 0 : m.average
-    }
-  ) : /* @__PURE__ */ a("div", { children: "wait user..." });
-};
-export {
-  g as UserSummary
-};