@streamlayer/react-ui 1.14.3 → 1.15.0

package/lib/ui/gamification/question/inapp/prediction-result/frames/step3.js

@@ -0,0 +1,38 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { styled as e } from "@linaria/react";
+import { SvgIcon as a } from "../../../../../icons/index.js";
+const n = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "c181a1as",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t1cduox6",
+  propsAsIs: !1
+}), i = () => a, s = /* @__PURE__ */ e(i())({
+  name: "CorrectIcon",
+  class: "c1onrv6j",
+  propsAsIs: !0
+}), l = () => s, p = /* @__PURE__ */ e(l())({
+  name: "InCorrectIcon",
+  class: "i17n9o7e",
+  propsAsIs: !0
+}), d = () => /* @__PURE__ */ r(n, {
+  children: [/* @__PURE__ */ r(c, {
+    children: ["Congratulations!", /* @__PURE__ */ o("br", {}), "You answered correctly."]
+  }), /* @__PURE__ */ o(s, {
+    name: "icon-check"
+  })]
+}), u = ({
+  title: t
+}) => /* @__PURE__ */ r(n, {
+  children: [/* @__PURE__ */ r(c, {
+    children: ["Better luck next time!", /* @__PURE__ */ o("br", {}), "Correct: ", t]
+  }), /* @__PURE__ */ o(p, {
+    name: "icon-cross"
+  })]
+});
+export {
+  d as CorrectStep,
+  u as InCorrectStep
+};

package/lib/ui/gamification/question/inapp/prediction-result/frames/step4.d.ts

@@ -0,0 +1,3 @@
+export declare const Step4: React.FC<{
+    points: number;
+}>;

package/lib/ui/gamification/question/inapp/prediction-result/frames/step4.js

@@ -0,0 +1,33 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { AnimatedCounter as t } from "../../../../../animated-counter/index.js";
+import { SvgIcon as r } from "../../../../../icons/index.js";
+const c = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cnxgcs2",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t903f8n",
+  propsAsIs: !1
+}), p = () => r, a = /* @__PURE__ */ s(p())({
+  name: "CheckIcon",
+  class: "ceyu3qj",
+  propsAsIs: !0
+}), u = ({
+  points: n
+}) => /* @__PURE__ */ o(c, {
+  children: [/* @__PURE__ */ o(i, {
+    children: ["You won ", /* @__PURE__ */ e(t, {
+      delay: 0.5,
+      prefix: "+",
+      suffix: " points",
+      value: n
+    })]
+  }), /* @__PURE__ */ e(a, {
+    name: "icon-trophy-solid"
+  })]
+});
+export {
+  u as Step4
+};

package/lib/ui/gamification/question/inapp/prediction-result/frames/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & 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 FeedbackIcon: any;

package/lib/ui/gamification/question/inapp/prediction-result/frames/styles.js

@@ -0,0 +1,20 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../../../icons/index.js";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cq3agu2",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b16qj0do",
+  propsAsIs: !1
+}), e = () => o, t = /* @__PURE__ */ s(e())({
+  name: "FeedbackIcon",
+  class: "f9m7c89",
+  propsAsIs: !0
+});
+export {
+  r as Body,
+  a as Container,
+  t as FeedbackIcon
+};

package/lib/ui/gamification/question/inapp/prediction-result/index.d.ts

@@ -0,0 +1,9 @@
+import { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
+type InAppProps = NotificationProps['data'] & {
+    action: NotificationProps['action'];
+};
+export declare const InAppPredictionResult: React.FC<Exclude<InAppProps['question'], undefined> & {
+    action?: () => void;
+    close?: () => void;
+}>;
+export {};

package/lib/ui/gamification/question/inapp/prediction-result/index.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { PredictionResult as t } from "./frames/index.js";
+import { NotificationContainer as i } from "./styles.js";
+const p = (r) => /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(t, { ...r }) });
+export {
+  p as InAppPredictionResult
+};

package/lib/ui/gamification/question/inapp/prediction-result/styles.d.ts

@@ -0,0 +1 @@
+export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/question/inapp/prediction-result/styles.js

@@ -0,0 +1,9 @@
+import { styled as i } from "@linaria/react";
+const t = /* @__PURE__ */ i("div")({
+  name: "NotificationContainer",
+  class: "n1i4h28u",
+  propsAsIs: !1
+});
+export {
+  t as NotificationContainer
+};

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

@@ -1,3 +1,12 @@
-import { PickHistory } from '@streamlayer/sdk-web-types';
+import { QuestionType, QuestionStatus, PickHistory } from '@streamlayer/sdk-web-types';
+import { icons } from '../../icons';
 export declare const QuestionSkeleton: React.FC;
+export declare const QuestionTypeHeader: React.FC<{
+    questionTypeData: {
+        label: string;
+        iconName: keyof typeof icons;
+    };
+    questionType: QuestionType;
+    questionStatus: QuestionStatus;
+}>;
 export declare const Question: React.FC<PickHistory>;

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

@@ -1,49 +1,58 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { PickHistoryStatus as e, QuestionType as r, QuestionStatus as p } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as h } from "../constants.js";
-import { Skeleton as a } from "../../skeleton/index.js";
-import { QuestionActionIcon as c, QuestionCheckIcon as y, SkeletonContainer as I, SkeletonButton as S, QuestionItem as k, QuestionContent as f, QuestionCaption as A, QuestionTypeIcon as T, QuestionTypeLabel as L, QuestionBody as P, QuestionAction as w, PlayButton as x } from "./styles.js";
-const C = {
-  [e.LOST]: /* @__PURE__ */ t(c, { name: "incorrectVoted" }),
-  [e.WON]: /* @__PURE__ */ t(y, { name: "icon-check" }),
-  [e.UNSET]: /* @__PURE__ */ t(c, { name: "icon-arrow" }),
-  [e.DNP]: /* @__PURE__ */ t(c, { name: "icon-arrow" })
-}, B = () => /* @__PURE__ */ n(I, { children: [
-  /* @__PURE__ */ t(a, { loading: !0, style: { width: "35%" } }),
-  /* @__PURE__ */ t(a, { loading: !0, style: { width: "70%" } }),
-  /* @__PURE__ */ t(S, {})
+import { PickHistoryStatus as i, QuestionType as s, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as y } from "../constants.js";
+import { Skeleton as l } from "../../skeleton/index.js";
+import { QuestionActionIcon as a, QuestionCheckIcon as h, SkeletonContainer as S, SkeletonButton as I, QuestionCaption as L, QuestionTypeIcon as T, QuestionTypeLabel as k, QuestionItem as N, QuestionContent as f, QuestionBody as A, QuestionAction as C, PlayButton as P } from "./styles.js";
+const w = {
+  [i.LOST]: /* @__PURE__ */ t(a, { name: "incorrectVoted" }),
+  [i.WON]: /* @__PURE__ */ t(h, { name: "icon-check" }),
+  [i.UNSET]: /* @__PURE__ */ t(a, { name: "icon-arrow" }),
+  [i.DNP]: /* @__PURE__ */ t(a, { name: "icon-arrow" })
+}, D = () => /* @__PURE__ */ n(S, { children: [
+  /* @__PURE__ */ t(l, { loading: !0, style: { width: "35%" } }),
+  /* @__PURE__ */ t(l, { loading: !0, style: { width: "70%" } }),
+  /* @__PURE__ */ t(I, {})
+] }), x = ({ questionTypeData: o, questionType: e, questionStatus: r }) => /* @__PURE__ */ n(L, { className: "SL_QuestionCaption", children: [
+  /* @__PURE__ */ t(
+    T,
+    {
+      className: "SL_QuestionTypeIcon",
+      "data-testid": "question-type-icon",
+      "data-type-trivia": e === s.TRIVIA,
+      "data-type-poll": e === s.POLL,
+      name: o.iconName
+    }
+  ),
+  /* @__PURE__ */ n(k, { className: "SL_QuestionTypeLabel", children: [
+    o.label,
+    e === s.TRIVIA && r === p.RESOLVED && " • Expired"
+  ] })
 ] }), R = ({
-  questionId: s,
-  questionType: o,
-  questionStatus: l,
+  questionId: o,
+  questionType: e,
+  questionStatus: r,
   subject: u,
   openForVoting: d,
   status: m
 }) => {
-  const i = h[o], Q = C[m];
-  return i ? /* @__PURE__ */ n(k, { "data-name": s, children: [
+  const c = y[e], Q = w[m];
+  return c ? /* @__PURE__ */ n(N, { "data-name": o, children: [
     /* @__PURE__ */ n(f, { children: [
-      /* @__PURE__ */ n(A, { children: [
-        /* @__PURE__ */ t(
-          T,
-          {
-            "data-testid": "question-type-icon",
-            "data-type-trivia": o === r.TRIVIA,
-            "data-type-poll": o === r.POLL,
-            name: i.iconName
-          }
-        ),
-        /* @__PURE__ */ n(L, { children: [
-          i.label,
-          o === r.TRIVIA && l === p.RESOLVED && " • Expired"
-        ] })
-      ] }),
-      /* @__PURE__ */ t(P, { children: u || "" })
+      /* @__PURE__ */ t(
+        x,
+        {
+          questionTypeData: c,
+          questionType: e,
+          questionStatus: r
+        }
+      ),
+      /* @__PURE__ */ t(A, { children: u || "" })
     ] }),
-    /* @__PURE__ */ t(w, { children: d ? /* @__PURE__ */ t(x, { children: "Play" }) : Q })
+    /* @__PURE__ */ t(C, { children: d ? /* @__PURE__ */ t(P, { children: "Play" }) : Q })
   ] }) : null;
 };
 export {
   R as Question,
-  B as QuestionSkeleton
+  D as QuestionSkeleton,
+  x as QuestionTypeHeader
 };

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

@@ -2,6 +2,7 @@ export declare const icons: {
     'invite-game-icon': any;
     'icon-trophy': any;
     'icon-trophy-green': any;
+    'icon-trophy-solid': any;
     'icon-trivia': any;
     'icon-thumb-down': any;
     'icon-thumb-up': any;
@@ -52,9 +53,7 @@ export declare const icons: {
     chevronRight: any;
     noImageIcon: any;
 };
-export declare const Icon: React.FC<{
-    name: keyof typeof icons;
-}>;
+export declare const IconsLibrary: () => import("react/jsx-runtime").JSX.Element;
 type SvgIconProps = {
     name: keyof typeof icons;
     style?: React.CSSProperties;