@streamlayer/react-ui 0.64.0 → 0.65.0

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

@@ -9,7 +9,6 @@ import "../../../gamification/onboarding/slides/onboarding-instructions/index.js
 import "../../../lottie/index.js";
 import "@lottiefiles/react-lottie-player";
 import "../../../gamification/onboarding/slides/onboarding-instructions/styles.js";
-import "@linaria/core";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../icons/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
@@ -18,6 +17,7 @@ import "../../../gamification/onboarding/slides/onboarding-rules/styles.js";
 import "../../../gamification/onboarding/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
+import "@linaria/core";
 const C = g(f)`
   height: 100%;
 

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/onboarding/index.js

@@ -8,7 +8,6 @@ import { Container as A, OnboardingHeader as B, CloseBtn as z, IconClose as E, C
 import "../../lottie/index.js";
 import "@lottiefiles/react-lottie-player";
 import "./slides/onboarding-instructions/styles.js";
-import "@linaria/core";
 import "@linaria/react";
 import "../../icons/index.js";
 import "./slides/onboarding-invite-card/styles.js";
@@ -19,13 +18,13 @@ const e = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, ii = ({
+}, s = ({
   gamification: f,
   steps: i,
   rules: n,
   rulesBtnLabel: h,
   rulesTitle: b,
-  primaryColor: m,
+  primaryColor: d,
   inviteLink: C,
   socialLinks: u,
   inviteCardTitle: S,
@@ -33,27 +32,27 @@ const e = {
   inviteCardBtnLabel: v,
   onClose: O
 }) => {
-  const [a, d] = g(0), [t, r] = g(e);
+  const [a, m] = g(0), [t, r] = g(e);
   N(() => {
     i != null && i.length ? r({ ...e, steps: !0 }) : n != null && n.length ? r({ ...e, rules: !0 }) : r({ ...e, inviteCard: !0 });
   }, []);
   const p = k(() => {
-    i != null && i.length && a < i.length - 1 ? d((l) => ++l) : n != null && n.length && t.steps ? r({ ...e, rules: !0 }) : t.rules && r({ ...e, inviteCard: !0 });
-  }, [a, i == null ? void 0 : i.length, n == null ? void 0 : n.length, t, d, r]), I = async () => {
+    i != null && i.length && a < i.length - 1 ? m((l) => ++l) : n != null && n.length && t.steps ? r({ ...e, rules: !0 }) : t.rules && r({ ...e, inviteCard: !0 });
+  }, [a, i == null ? void 0 : i.length, n == null ? void 0 : n.length, t, m, r]), I = async () => {
     await f.onboardingStatus.submitInplay();
   };
   return /* @__PURE__ */ o(D, { children: ({ width: l, height: x }) => /* @__PURE__ */ c(A, { style: { width: l, height: x }, children: [
     /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(z, { onClick: O, children: /* @__PURE__ */ o(E, { name: "icon-close-btn-gray" }) }) }),
     /* @__PURE__ */ c(F, { children: [
       t.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ o(T, { stepsCount: i.length, currentStep: a, ...i[a] }),
-      t.rules && /* @__PURE__ */ o(w, { rules: n, rulesTitle: b, primaryColor: m }),
+      t.rules && /* @__PURE__ */ o(w, { rules: n, rulesTitle: b, primaryColor: d }),
       t.inviteCard && /* @__PURE__ */ o(
         j,
         {
           inviteLink: C,
           inviteCardTitle: S,
           inviteCardSubtext: y,
-          primaryColor: m,
+          primaryColor: d,
           socialLinks: u
         }
       )
@@ -62,5 +61,5 @@ const e = {
   ] }) });
 };
 export {
-  ii as Onboarding
+  s as Onboarding
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.js

@@ -1,22 +1,21 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { Lottie as a } from "../../../../lottie/index.js";
-import { Container as p, Content as c, Graphic as s, Headline as d, StepsContainer as l, StepIndicator as h } from "./styles.js";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Lottie as m } from "../../../../lottie/index.js";
+import { Container as p, Content as a, Graphic as d, Headline as s, StepsContainer as h, StepIndicator as l } from "./styles.js";
 import "@lottiefiles/react-lottie-player";
 import "react-virtualized-auto-sizer";
-import "@linaria/core";
 import "@linaria/react";
-const b = ({
-  graphicSrc: n,
+const S = ({
+  graphicSrc: i,
   headline: t,
   stepsCount: e,
-  currentStep: m
-}) => /* @__PURE__ */ i(p, { children: [
-  /* @__PURE__ */ i(c, { children: [
-    /* @__PURE__ */ r(a, { className: s, src: n }),
-    t && /* @__PURE__ */ r(d, { children: t })
+  currentStep: c
+}) => /* @__PURE__ */ o(p, { children: [
+  /* @__PURE__ */ o(a, { children: [
+    /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(m, { src: i }) }),
+    t && /* @__PURE__ */ r(s, { children: t })
   ] }),
-  /* @__PURE__ */ r(l, { children: Array.from({ length: e }).map((f, o) => /* @__PURE__ */ r(h, { "data-active": m === o }, o)) })
+  /* @__PURE__ */ r(h, { children: Array.from({ length: e }).map((f, n) => /* @__PURE__ */ r(l, { "data-active": c === n }, n)) })
 ] });
 export {
-  b as OnboardingInstructions
+  S as OnboardingInstructions
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.d.ts

@@ -1,7 +1,7 @@
 /// <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 Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Graphic: import("@linaria/core").LinariaClassName;
+export declare const Graphic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Headline: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const StepsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const StepIndicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.js

@@ -1,22 +1,21 @@
-import { css as e } from "@linaria/core";
 import { styled as t } from "@linaria/react";
-const r = t.div`
+const o = t.div`
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   padding-bottom: 24px;
-`, i = t.div`
+`, n = t.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   padding: 0 16px 32px;
-`, a = e`
+`, i = t.div`
   display: flex;
   flex-grow: 1;
-  align-items: center;
-`, c = t.div`
+  width: 100%;
+`, r = t.div`
   max-width: 270px;
   color: var(--color-primary-green1);
   font-family: var(--font-serif);
@@ -24,11 +23,11 @@ const r = t.div`
   font-weight: 400;
   line-height: 30px;
   text-align: center;
-`, l = t.div`
+`, a = t.div`
   display: flex;
   justify-content: center;
   column-gap: 8px;
-`, p = t.span`
+`, c = t.span`
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -39,10 +38,10 @@ const r = t.div`
   }
 `;
 export {
-  r as Container,
-  i as Content,
-  a as Graphic,
-  c as Headline,
-  p as StepIndicator,
-  l as StepsContainer
+  o as Container,
+  n as Content,
+  i as Graphic,
+  r as Headline,
+  c as StepIndicator,
+  a as StepsContainer
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "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.5"
+    "@streamlayer/react": "^0.29.7"
   }
 }