@streamlayer/react-ui 0.64.1 → 0.65.1

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

@@ -1,6 +1,6 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { useStore as i } from "@nanostores/react";
-import { UserStatistics as e } from "../../../gamification/user-statistics/index.js";
+import { UserStatistics as s } from "../../../gamification/user-statistics/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -8,11 +8,11 @@ import "@linaria/react";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const g = ({ userSummary: o }) => {
-  var t;
-  const r = i(o.getStore());
-  return (t = r.data) != null && t.summary ? /* @__PURE__ */ m(e, { ...r.data.summary, ...r.data.percentage }) : /* @__PURE__ */ m("div", { children: "wait user..." });
+const x = ({ userSummary: e }) => {
+  var t, m;
+  const r = i(e.getStore());
+  return (t = r.data) != null && t.summary ? /* @__PURE__ */ o(s, { ...r.data.summary, successRate: (m = r.data.percentage) == null ? void 0 : m.correct }) : /* @__PURE__ */ o("div", { children: "wait user..." });
 };
 export {
-  g as UserSummary
+  x as UserSummary
 };

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

@@ -1,10 +1,10 @@
-import { jsxs as p, Fragment as d, jsx as r } from "react/jsx-runtime";
-import { styled as n } from "@linaria/react";
+import { jsxs as e, Fragment as d, jsx as r } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
 import { useStore as m } from "@nanostores/react";
 import { SDKWhiteContainer as l, SDKScrollContainer as a } from "../../styles.js";
 import { VoteHeader as c } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as h } from "../../../gamification/user-statistics/index.js";
-import { ShowIn as u } from "../../../show-in/index.js";
+import { UserStatistics as u } from "../../../gamification/user-statistics/index.js";
+import { ShowIn as h } from "../../../show-in/index.js";
 import { Question as f } from "./Question.js";
 import { Tabs as v } from "./Tabs.js";
 import "../../../gamification/constants.js";
@@ -58,13 +58,13 @@ import "../../../gamification/question/insight/index.js";
 import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const e = n(u)`
+const n = s(h)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
   background: var(--color-neutrals-white);
   z-index: 3;
-`, x = n.div`
+`, x = s.div`
   background: var(--color-transparent-item);
   width: 100%;
   height: 100%;
@@ -77,18 +77,21 @@ const e = n(u)`
   & > div {
     width: 100%;
   }
-`, jr = ({ gamification: t, className: o }) => {
-  const s = m(t.openedQuestion.$store), i = m(t.openedUser);
-  return /* @__PURE__ */ p(d, { children: [
-    s && /* @__PURE__ */ r(e, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
-    i && /* @__PURE__ */ r(e, { className: o, children: /* @__PURE__ */ p(x, { children: [
+`, S = ({ correct: t, incorrect: o }) => {
+  const i = t + o;
+  return i === 0 ? 0 : Math.round(t / i * 100);
+}, kt = ({ gamification: t, className: o }) => {
+  const i = m(t.openedQuestion.$store), p = m(t.openedUser);
+  return /* @__PURE__ */ e(d, { children: [
+    i && /* @__PURE__ */ r(n, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
+    p && /* @__PURE__ */ r(n, { className: o, children: /* @__PURE__ */ e(x, { children: [
       /* @__PURE__ */ r(c, { label: "Friend's Rank", close: t.closeUser }),
-      /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(h, { ...i }) })
+      /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(u, { ...p, successRate: S(p) }) })
     ] }) }),
     /* @__PURE__ */ r(a, { className: o, "data-nav": "true", children: /* @__PURE__ */ r(v, { gamification: t }) })
   ] });
 };
 export {
-  jr as GamificationOverlay,
-  jr as default
+  kt as GamificationOverlay,
+  kt as default
 };

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

@@ -2,8 +2,8 @@ import { jsx as o } from "react/jsx-runtime";
 import { useStore as c } from "@nanostores/react";
 import { useMemo as s } from "react";
 import { NotificationType as r } from "@streamlayer/sdk-web-notifications";
-import { Notification as e } from "../../gamification/question/notification/index.js";
-import { Container as m } from "./styles.js";
+import { Notification as p } from "../../gamification/question/notification/index.js";
+import { Container as n } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/constants.js";
 import "../../gamification/question/notification/insight/index.js";
@@ -17,19 +17,23 @@ import "../../gamification/question/notification/prediction-result/animation-lin
 import "../../gamification/question/notification/prediction-result/animation-lines/styles.js";
 import "../../gamification/question/notification/prediction-result/styles.js";
 import "../../gamification/question/notification/styles.js";
+import "../../gamification/question/notification/tweet/index.js";
+import "../../questions/twitter/account/index.js";
+import "../../questions/twitter/account/styles.js";
+import "../../gamification/question/notification/tweet/styles.js";
 import "../../show-in/index.js";
 import "@linaria/core";
-const B = ({ sdk: p }) => {
-  const f = p.getNotificationsStore(), t = c(f), i = s(() => {
+const L = ({ sdk: e }) => {
+  const f = e.getNotificationsStore(), t = c(f), i = s(() => {
     if (!(t != null && t.size))
       return null;
-    for (const n of t.values())
-      if (n.type === r.ONBOARDING)
-        return n;
+    for (const m of t.values())
+      if (m.type === r.ONBOARDING)
+        return m;
     return t.values().next().value;
   }, [t]);
-  return (i == null ? void 0 : i.type) === r.QUESTION ? /* @__PURE__ */ o(m, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(e, { ...i }) }) }) : (i == null ? void 0 : i.type) === r.QUESTION_RESOLVED ? /* @__PURE__ */ o(m, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(e, { ...i }) }) }) : null;
+  return (i == null ? void 0 : i.type) === r.QUESTION ? /* @__PURE__ */ o(n, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(p, { ...i }) }) }) : (i == null ? void 0 : i.type) === r.QUESTION_RESOLVED ? /* @__PURE__ */ o(n, { hiding: i.hiding, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(p, { ...i }) }) }) : null;
 };
 export {
-  B as SDKNotifications
+  L as SDKNotifications
 };

package/lib/ui/app/masters.js

@@ -32,6 +32,10 @@ import "../gamification/question/notification/prediction-result/animation-lines/
 import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
 import "../gamification/question/notification/prediction-result/styles.js";
 import "../gamification/question/notification/styles.js";
+import "../gamification/question/notification/tweet/index.js";
+import "../questions/twitter/account/index.js";
+import "../questions/twitter/account/styles.js";
+import "../gamification/question/notification/tweet/styles.js";
 import "./Notifications/styles.js";
 import "../show-in/index.js";
 import "../navigation/button/index.js";
@@ -39,7 +43,7 @@ import "../navigation/button/styles.js";
 const x = ({ sdk: i, className: e }) => {
   const [, m] = A(i);
   return /* @__PURE__ */ o(S, { className: e, feature: m, sdk: i });
-}, st = ({ sdk: i, overlays: e, children: m }) => {
+}, ft = ({ sdk: i, overlays: e, children: m }) => {
   const { sdkEnabled: t, sdkReady: l, activeOverlay: r, activateAndLoadOverlay: c, enableSdk: f, disableSdk: u, isLogged: p } = k(i);
   return /* @__PURE__ */ y(b, { children: [
     t && /* @__PURE__ */ o(
@@ -73,5 +77,5 @@ const x = ({ sdk: i, className: e }) => {
   ] });
 };
 export {
-  st as MastersApp
+  ft as MastersApp
 };

package/lib/ui/gamification/question/notification/index.js

@@ -1,9 +1,10 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { QuestionType as p } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as l } from "../../constants.js";
-import { Insight as a } from "./insight/index.js";
-import { PredictionResult as d } from "./prediction-result/index.js";
-import { Container as f, CloseIconWrap as h, CloseIcon as C, Header as I, TypeIcon as s, TypeName as T, Question as A, AnswerButton as D } from "./styles.js";
+import { jsx as r, jsxs as e, Fragment as a } from "react/jsx-runtime";
+import { QuestionType as i } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as d } from "../../constants.js";
+import { Insight as f } from "./insight/index.js";
+import { PredictionResult as T } from "./prediction-result/index.js";
+import { Container as h, CloseIconWrap as C, CloseIcon as E, Header as I, TypeIcon as A, TypeName as D, Question as W, AnswerButton as w } from "./styles.js";
+import { Tweet as x } from "./tweet/index.js";
 import "../../../video-player/index.js";
 import "react";
 import "../../../icons/index.js";
@@ -13,22 +14,32 @@ import "./insight/styles.js";
 import "./prediction-result/animation-lines/index.js";
 import "./prediction-result/animation-lines/styles.js";
 import "./prediction-result/styles.js";
-const W = ({
-  close: m,
-  action: e,
-  data: { questionType: i, question: o, insight: c }
+import "../../../questions/twitter/account/index.js";
+import "../../../questions/twitter/account/styles.js";
+import "./tweet/styles.js";
+const L = ({
+  close: n,
+  action: t,
+  data: { questionType: o, question: m, insight: c, tweet: l }
 }) => {
-  const t = l[i];
-  return t ? o != null && o.predictionResult ? /* @__PURE__ */ r(d, { close: m, ...o }) : /* @__PURE__ */ n(f, { children: [
-    /* @__PURE__ */ r(h, { onClick: m, children: /* @__PURE__ */ r(C, { name: "icon-cross" }) }),
-    /* @__PURE__ */ n(I, { children: [
-      /* @__PURE__ */ r(s, { name: t.iconName }),
-      /* @__PURE__ */ r(T, { children: t.label })
+  const p = d[o];
+  return p ? m != null && m.predictionResult ? /* @__PURE__ */ r(T, { close: n, ...m }) : /* @__PURE__ */ e(h, { children: [
+    /* @__PURE__ */ r(C, { onClick: n, children: /* @__PURE__ */ r(E, { name: "icon-cross" }) }),
+    o !== i.TWEET && /* @__PURE__ */ e(I, { children: [
+      /* @__PURE__ */ r(A, { name: p.iconName }),
+      /* @__PURE__ */ r(D, { children: p.label })
     ] }),
-    i === p.FACTOID ? /* @__PURE__ */ r(a, { ...c, action: e }) : /* @__PURE__ */ r(A, { children: o == null ? void 0 : o.title }),
-    i !== p.FACTOID && /* @__PURE__ */ r(D, { onClick: e, children: "Answer" })
+    o === i.FACTOID && /* @__PURE__ */ r(f, { ...c, action: t }),
+    o === i.TWEET && // ToDo: connect with real Api data
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    /* @__PURE__ */ r(x, { ...l, action: t }),
+    o !== i.FACTOID && o !== i.TWEET && /* @__PURE__ */ e(a, { children: [
+      /* @__PURE__ */ r(W, { children: m == null ? void 0 : m.title }),
+      /* @__PURE__ */ r(w, { onClick: t, children: "Answer" })
+    ] })
   ] }) : null;
 };
 export {
-  W as Notification
+  L as Notification
 };

package/lib/ui/gamification/question/notification/tweet/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Notification } from '@streamlayer/sdk-web-notifications';
+import { TwitterContentProps } from '../../../../questions/twitter';
+export declare const Tweet: React.FC<TwitterContentProps & {
+    action: Notification['action'];
+}>;

package/lib/ui/gamification/question/notification/tweet/index.js

@@ -0,0 +1,25 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { Account as m } from "../../../../questions/twitter/account/index.js";
+import { Container as p, QuoteWrap as l, Quote as d, Details as h, Body as s, Image as u, ActionBtn as f } from "./styles.js";
+import "../../../../icons/index.js";
+import "@linaria/react";
+import "react";
+import "../../../../questions/twitter/account/styles.js";
+const Q = ({
+  account: i,
+  body: n,
+  image: o,
+  title: c,
+  action: t
+}) => /* @__PURE__ */ e(p, { children: [
+  /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(d, { children: c }) }),
+  /* @__PURE__ */ e(h, { children: [
+    /* @__PURE__ */ r(m, { ...i }),
+    /* @__PURE__ */ r(s, { children: n }),
+    o && /* @__PURE__ */ r(u, { src: o })
+  ] }),
+  t && /* @__PURE__ */ r(f, { onClick: t, children: "View Tweet" })
+] });
+export {
+  Q as Tweet
+};

package/lib/ui/gamification/question/notification/tweet/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuoteWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;

package/lib/ui/gamification/question/notification/tweet/styles.js

@@ -0,0 +1,68 @@
+import { styled as o } from "@linaria/react";
+const t = o.div`
+  box-sizing: border-box;
+  background-color: var(--color-neutrals-white);
+  border-radius: 8px;
+  width: 100%;
+`, e = o.button`
+  border: none;
+  outline: none;
+  background-color: var(--color-primary-green1);
+  color: var(--color-white);
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 550;
+  width: 100%;
+  padding: 0px 16px;
+  height: 44px;
+
+  &:hover {
+    background-color: var(--color-primary-green2);
+    cursor: pointer;
+  }
+`, i = o.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 18px;
+`, n = o.img`
+  max-width: 100%;
+  border-radius: 8px;
+`, a = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+  color: var(--color-neutrals-gray9);
+  font-weight: var(--font-weight-default);
+  margin-bottom: 16px;
+`, l = o.div`
+  padding-bottom: 12px;
+  border-bottom: 0.7px solid var(--color-neutrals-gray3);
+  margin-bottom: 12px;
+`, d = o.blockquote`
+  padding: 0px 24px 0px 12px;
+  color: var(--color-primary-green2);
+  border-left: 2px solid var(--color-primary-green2);
+  font-size: 12px;
+  font-family: var(--font-serif);
+  font-weight: var(--font-weight-default);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-word;
+  text-overflow: ellipsis;
+  max-height: 32px;
+`;
+export {
+  e as ActionBtn,
+  i as Body,
+  t as Container,
+  a as Details,
+  n as Image,
+  d as Quote,
+  l as QuoteWrap
+};

package/lib/ui/gamification/user-statistics/index.d.ts

@@ -9,6 +9,6 @@ export interface UserStatisticsProps {
     correct?: number;
     incorrect?: number;
     inTop?: number;
-    average?: number;
+    successRate?: number;
 }
 export declare const UserStatistics: React.FC<UserStatisticsProps>;

package/lib/ui/gamification/user-statistics/index.js

@@ -16,7 +16,7 @@ const m = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXd
   correct: u,
   incorrect: x,
   inTop: i,
-  average: O
+  successRate: O
 }) => /* @__PURE__ */ N(k, { children: [
   /* @__PURE__ */ M(E, { children: /* @__PURE__ */ N(Q, { children: [
     /* @__PURE__ */ N(Y, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.64.1",
+  "version": "0.65.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,14 +36,14 @@
     "react-window": "^1.8.9",
     "@lottiefiles/react-lottie-player": "*",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.25.0",
-    "@streamlayer/sdk-web": "^0.28.21",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.16",
+    "@streamlayer/feature-gamification": "^0.26.0",
+    "@streamlayer/sdk-web": "^0.28.22",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.17",
     "@streamlayer/sdk-web-api": "^0.0.1",
     "@streamlayer/sdk-web-core": "^0.17.8",
-    "@streamlayer/sdk-web-features": "^0.10.24",
+    "@streamlayer/sdk-web-features": "^0.10.25",
     "@streamlayer/sdk-web-interfaces": "^0.18.15",
-    "@streamlayer/sdk-web-notifications": "^0.12.1",
+    "@streamlayer/sdk-web-notifications": "^0.13.0",
     "@streamlayer/sdk-web-storage": "^0.0.4",
     "@streamlayer/sdk-web-types": "^0.20.1"
   },
@@ -84,6 +84,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.29.6"
+    "@streamlayer/react": "^0.29.8"
   }
 }