@streamlayer/react-ui 0.75.0 → 0.76.0

package/lib/ui/app/masters.js

@@ -30,8 +30,10 @@ import "../video-player/styles.js";
 import "../gamification/question/notification/insight/styles.js";
 import "../gamification/question/notification/styles.js";
 import "../gamification/question/notification/tweet/index.js";
+import "../questions/twitter/index.js";
 import "../questions/twitter/account/index.js";
 import "../questions/twitter/account/styles.js";
+import "../questions/twitter/styles.js";
 import "../gamification/question/notification/tweet/styles.js";
 import "../gamification/question/notification/prediction-result/index.js";
 import "../gamification/question/notification/prediction-result/animation-lines/index.js";
@@ -60,7 +62,7 @@ import "../navigation/button/index.js";
 const F = ({ sdk: r, className: i }) => {
   const [, m] = I(r);
   return /* @__PURE__ */ t(g, { className: i, feature: m, sdk: r });
-}, Et = ({ sdk: r, overlays: i, children: m }) => {
+}, Lt = ({ sdk: r, overlays: i, children: m }) => {
   const { sdkEnabled: p, sdkReady: e, activeOverlay: o, activateAndLoadOverlay: d, activateEventWithId: c, deactivate: l, isLogged: f } = C(r);
   return y(() => {
     import("./Features/Gamification/gamification-feature.js");
@@ -96,5 +98,5 @@ const F = ({ sdk: r, className: i }) => {
   ] });
 };
 export {
-  Et as MastersApp
+  Lt as MastersApp
 };

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

@@ -1,7 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Question as u } from "../index.js";
-import { Insight as s } from "../insight/index.js";
-import { QuestionsContainer as a } from "./styles.js";
+import { Question as b } from "../index.js";
+import { Insight as c } from "../insight/index.js";
+import { Twitter as p } from "../twitter/index.js";
+import { QuestionsContainer as d } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../constants.js";
 import "../styles.js";
@@ -14,18 +15,29 @@ import "../../../video-player/styles.js";
 import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
 import "../insight/styles.js";
-const L = ({ questions: r, openQuestion: o }) => /* @__PURE__ */ e(a, { children: r == null ? void 0 : r.map((t) => {
-  var m, n;
-  if (t.type === "question" && ((m = t.attributes) == null ? void 0 : m.attributes.case) === "question") {
+import "../../../questions/twitter/index.js";
+import "../../../questions/twitter/account/index.js";
+import "../../../questions/twitter/account/styles.js";
+import "../../../questions/twitter/styles.js";
+import "../twitter/styles.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
+const J = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ e(d, { children: r == null ? void 0 : r.map((t) => {
+  var o, u, a;
+  if (t.type === "question" && ((o = t.attributes) == null ? void 0 : o.attributes.case) === "question") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(u, { openQuestion: o, ...i }, i.questionId);
+    return /* @__PURE__ */ e(b, { openQuestion: m, ...i }, i.questionId);
   }
-  if (t.type === "insight" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "insight") {
+  if (t.type === "insight" && ((u = t.attributes) == null ? void 0 : u.attributes.case) === "insight") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(s, { openInsight: o, ...i }, i.questionId);
+    return /* @__PURE__ */ e(c, { openInsight: m, ...i }, i.questionId);
+  }
+  if (t.type === "tweet" && ((a = t.attributes) == null ? void 0 : a.attributes.case) === "tweet") {
+    const i = t.attributes.attributes.value, n = t.attributes.id, s = t.attributes.created;
+    return /* @__PURE__ */ e(p, { openTweet: m, ...i, tweetId: n, created: s }, n);
   }
   return null;
 }) });
 export {
-  L as QuestionList
+  J as QuestionList
 };

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

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as o, Fragment as c } from "react/jsx-runtime";
+import { jsxs as p, jsx as o, Fragment as c } from "react/jsx-runtime";
 import { QuestionType as t } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as d } from "../../constants.js";
 import { Insight as f } from "./insight/index.js";
@@ -10,18 +10,20 @@ import "../../../icons/index.js";
 import "@linaria/react";
 import "../../../video-player/styles.js";
 import "./insight/styles.js";
+import "../../../questions/twitter/index.js";
 import "../../../questions/twitter/account/index.js";
 import "../../../questions/twitter/account/styles.js";
+import "../../../questions/twitter/styles.js";
 import "./tweet/styles.js";
-const R = ({
-  close: e,
+const y = ({
+  close: a,
   action: i,
-  data: { questionType: r, question: m, insight: l, tweet: p }
+  data: { questionType: r, question: m, insight: e, tweet: l }
 }) => {
   const n = d[r];
-  return n ? /* @__PURE__ */ a(h, { children: [
-    /* @__PURE__ */ o(I, { onClick: e, children: /* @__PURE__ */ o(T, { name: "icon-cross" }) }),
-    r !== t.TWEET && /* @__PURE__ */ a(C, { children: [
+  return n ? /* @__PURE__ */ p(h, { children: [
+    /* @__PURE__ */ o(I, { onClick: a, children: /* @__PURE__ */ o(T, { name: "icon-cross" }) }),
+    r !== t.TWEET && /* @__PURE__ */ p(C, { children: [
       /* @__PURE__ */ o(
         E,
         {
@@ -32,17 +34,17 @@ const R = ({
       ),
       /* @__PURE__ */ o(s, { children: n.label })
     ] }),
-    r === t.FACTOID && /* @__PURE__ */ o(f, { ...l, action: i }),
+    r === t.FACTOID && /* @__PURE__ */ o(f, { ...e, action: i }),
     r === t.TWEET && // ToDo: connect with real Api data
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    /* @__PURE__ */ o(W, { ...p, action: i }),
-    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ o(W, { ...l, action: i }),
+    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ p(c, { children: [
       /* @__PURE__ */ o(A, { children: m == null ? void 0 : m.title }),
       /* @__PURE__ */ o(D, { onClick: i, children: "Answer" })
     ] })
   ] }) : null;
 };
 export {
-  R as Notification
+  y as Notification
 };

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

@@ -1,6 +1,6 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { VideoPlayer as m } from "../../../../video-player/index.js";
-import { InsightContainer as c, Image as e, InsightContent as h, Title as p, Description as u, ActionBtn as I } from "./styles.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { VideoPlayer as c } from "../../../../video-player/index.js";
+import { InsightContainer as h, Image as p, InsightContent as o, Title as u, Description as e, ActionBtn as I } from "./styles.js";
 import "react";
 import "../../../../icons/index.js";
 import "@linaria/react";
@@ -8,16 +8,16 @@ import "../../../../video-player/styles.js";
 const b = ({
   video: r,
   image: n,
-  heading: l,
-  body: s,
-  action: i
-}) => /* @__PURE__ */ o(c, { children: [
-  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(m, { source: r.url, poster: r.thumbnailUrl }),
-  n && /* @__PURE__ */ t(e, { src: n }),
-  /* @__PURE__ */ o(h, { children: [
-    /* @__PURE__ */ t(p, { children: l }),
+  heading: s,
+  body: m,
+  action: l
+}) => /* @__PURE__ */ i(h, { children: [
+  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(c, { source: r.url, poster: r.thumbnailUrl }),
+  n && !(r != null && r.url) && /* @__PURE__ */ t(p, { src: n }),
+  /* @__PURE__ */ i(o, { children: [
     /* @__PURE__ */ t(u, { children: s }),
-    i && /* @__PURE__ */ t(I, { onClick: i, children: "View Insight" })
+    /* @__PURE__ */ t(e, { children: m }),
+    l && /* @__PURE__ */ t(I, { onClick: l, children: "View Insight" })
   ] })
 ] });
 export {

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

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

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

@@ -1,25 +1,17 @@
-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 { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { TwitterContent as e } from "../../../../questions/twitter/index.js";
+import { Container as n, QuoteWrap as m, Quote as l, ActionBtn as p } from "./styles.js";
+import "../../../../questions/twitter/account/index.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" })
+import "../../../../questions/twitter/styles.js";
+const j = ({ action: r, ...i }) => /* @__PURE__ */ o(n, { children: [
+  i.title && /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(l, { children: i.title }) }),
+  /* @__PURE__ */ t(e, { ...i }),
+  r && /* @__PURE__ */ t(p, { onClick: r, children: "View Insight" })
 ] });
 export {
-  Q as Tweet
+  j as Tweet
 };

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

@@ -1,8 +1,5 @@
 /// <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

@@ -1,39 +1,24 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const t = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1t4f0x4",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("button")({
+}), n = /* @__PURE__ */ s("button")({
   name: "ActionBtn",
   class: "a16w1nl6",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
-  name: "Body",
-  class: "b14u54rf",
-  propsAsIs: !1
-}), n = /* @__PURE__ */ s("img")({
-  name: "Image",
-  class: "i1hxm6zo",
-  propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
-  name: "Details",
-  class: "d1s19yop",
-  propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), e = /* @__PURE__ */ s("div")({
   name: "QuoteWrap",
-  class: "q1qyx94r",
+  class: "q14u54rf",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("blockquote")({
+}), a = /* @__PURE__ */ s("blockquote")({
   name: "Quote",
-  class: "qs97clu",
+  class: "q1hxm6zo",
   propsAsIs: !1
 });
 export {
-  e as ActionBtn,
-  t as Body,
-  a as Container,
-  l as Details,
-  n as Image,
-  p as Quote,
-  c as QuoteWrap
+  n as ActionBtn,
+  t as Container,
+  a as Quote,
+  e as QuoteWrap
 };

package/lib/ui/gamification/question/twitter/index.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-import { TwitterContentProps } from '../../../questions/twitter';
-export declare const Twitter: React.FC<TwitterContentProps>;
+import { type TwitterContentProps } from '../../../questions/twitter';
+export declare const Twitter: React.FC<TwitterContentProps & {
+    openTweet?: (questionId: string) => void;
+}>;

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

@@ -1,18 +1,42 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { TwitterContent as i } from "../../../questions/twitter/index.js";
-import { Container as m, ActionButton as p } from "./styles.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { TwitterContent as l } from "../../../questions/twitter/index.js";
+import { isValidDate as f, formatDate as d, formatTime as c } from "../../../../utils/common.js";
+import { Container as u, DateTime as p, Quote as s, ActionButton as h } from "./styles.js";
 import "../../../questions/twitter/account/index.js";
 import "../../../icons/index.js";
 import "@linaria/react";
-import "react";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const u = (r) => /* @__PURE__ */ o(m, { children: [
-  /* @__PURE__ */ t(i, { ...r }),
-  /* @__PURE__ */ t(p, { children: "View Insight" })
-] });
+const M = ({
+  openTweet: m,
+  created: i,
+  ...t
+}) => {
+  const r = a(() => {
+    if (i) {
+      const e = new Date(i);
+      if (f(e))
+        return {
+          date: d(e),
+          time: c(e)
+        };
+    }
+    return null;
+  }, [i]);
+  return /* @__PURE__ */ n(u, { children: [
+    r && /* @__PURE__ */ n(p, { children: [
+      r.date,
+      " · ",
+      r.time
+    ] }),
+    t.title && /* @__PURE__ */ o(s, { children: t.title }),
+    /* @__PURE__ */ o(l, { ...t }),
+    m && /* @__PURE__ */ o(h, { onClick: () => m(t.tweetId), children: "View Insight" })
+  ] });
+};
 export {
-  u as Twitter
+  M as Twitter
 };

package/lib/ui/gamification/question/twitter/styles.d.ts

@@ -1,3 +1,5 @@
 /// <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 ActionButton: any;
+export declare const DateTime: 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/twitter/styles.js

@@ -1,17 +1,27 @@
-import { styled as t } from "@linaria/react";
-import { Button as o } from "../../../button/index.js";
+import { styled as s } from "@linaria/react";
+import { Button as t } from "../../../button/index.js";
 import "react/jsx-runtime";
 import "../../../button/styles.js";
-const c = /* @__PURE__ */ t("div")({
+const c = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cl56x6b",
   propsAsIs: !1
-}), s = () => o, i = /* @__PURE__ */ t(s())({
+}), o = () => t, r = /* @__PURE__ */ s(o())({
   name: "ActionButton",
   class: "a11pzf92",
   propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "DateTime",
+  class: "d1hbaleq",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "qvvgqjm",
+  propsAsIs: !1
 });
 export {
-  i as ActionButton,
-  c as Container
+  r as ActionButton,
+  c as Container,
+  m as DateTime,
+  i as Quote
 };

package/lib/ui/gamification/vote/twitter-details/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { TwitterContentProps } from '../../../questions/twitter';
+import { type TwitterContentProps } from '../../../questions/twitter';
 export declare const TwitterDetails: React.FC<TwitterContentProps>;

package/lib/ui/gamification/vote/twitter-details/index.js

@@ -1,13 +1,35 @@
-import { jsx as t } from "react/jsx-runtime";
-import { TwitterContent as o } from "../../../questions/twitter/index.js";
-import { Container as i } from "./styles.js";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { TwitterContent as a } from "../../../questions/twitter/index.js";
+import { isValidDate as f, formatDate as l, formatTime as p } from "../../../../utils/common.js";
+import { Container as s, DateTime as d, Quote as u } from "./styles.js";
 import "../../../questions/twitter/account/index.js";
 import "../../../icons/index.js";
 import "@linaria/react";
-import "react";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
-const w = (r) => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(o, { ...r }) });
+const V = ({ created: t, ...i }) => {
+  const e = n(() => {
+    if (t) {
+      const r = new Date(t);
+      if (f(r))
+        return {
+          date: l(r),
+          time: p(r)
+        };
+    }
+    return null;
+  }, [t]);
+  return /* @__PURE__ */ m(s, { children: [
+    e && /* @__PURE__ */ m(d, { children: [
+      e.date,
+      " · ",
+      e.time
+    ] }),
+    i.title && /* @__PURE__ */ o(u, { children: i.title }),
+    /* @__PURE__ */ o(a, { ...i })
+  ] });
+};
 export {
-  w as TwitterDetails
+  V as TwitterDetails
 };

package/lib/ui/gamification/vote/twitter-details/styles.d.ts

@@ -1,2 +1,4 @@
 /// <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 DateTime: 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/vote/twitter-details/styles.js

@@ -1,9 +1,19 @@
 import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+const o = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1dcxmvf",
   propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "DateTime",
+  class: "db4q22c",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "q111mmic",
+  propsAsIs: !1
 });
 export {
-  t as Container
+  o as Container,
+  t as DateTime,
+  a as Quote
 };

package/lib/ui/icons/index.d.ts

@@ -46,6 +46,7 @@ export declare const icons: {
     circleClose: any;
     incorrectVoted: any;
     mastersLogo: any;
+    twitter: any;
 };
 export declare const Icon: React.FC<{
     name: keyof typeof icons;