@streamlayer/react-ui 0.64.1 → 0.65.0

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

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