@streamlayer/react-ui 0.54.1 → 0.56.0

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

@@ -0,0 +1,30 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { QuestionType as m } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as l } from "../../constants.js";
+import { Insight as a } from "./insight/index.js";
+import { Container as s, CloseIconWrap as d, CloseIcon as f, Header as h, TypeIcon as C, TypeName as I, Question as T, AnswerButton as A } from "./styles.js";
+import "../../../video-player/index.js";
+import "react";
+import "../../../icons/index.js";
+import "@linaria/react";
+import "../../../video-player/styles.js";
+import "./insight/styles.js";
+const b = ({
+  close: c,
+  action: t,
+  data: { questionType: o, question: i, insight: p }
+}) => {
+  const n = l[o];
+  return n ? /* @__PURE__ */ e(s, { children: [
+    /* @__PURE__ */ r(d, { onClick: c, children: /* @__PURE__ */ r(f, { name: "icon-cross" }) }),
+    /* @__PURE__ */ e(h, { children: [
+      /* @__PURE__ */ r(C, { name: n.iconName }),
+      /* @__PURE__ */ r(I, { children: n.label })
+    ] }),
+    o === m.FACTOID ? /* @__PURE__ */ r(a, { ...p, action: t }) : /* @__PURE__ */ r(T, { children: i == null ? void 0 : i.title }),
+    o !== m.FACTOID && /* @__PURE__ */ r(A, { onClick: t, children: "Answer" })
+  ] }) : null;
+};
+export {
+  b as Notification
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const InsightContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const InsightContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const Description: 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>>;

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

@@ -0,0 +1,60 @@
+import { styled as o } from "@linaria/react";
+const r = o.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  background-color: var(--color-neutrals-white);
+  border-radius: 8px;
+  width: 100%;
+`, t = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+`, i = o.h3`
+  color: var(--color-primary-green2);
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 400;
+  font-family: var(--font-serif);
+  font-weight: var(--font-weight-default);
+`, n = o.div`
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  line-height: 24px;
+  font-weight: 550;
+  font-weight: var(--font-weight-default);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  max-height: 50px;
+`, l = 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;
+  }
+`;
+export {
+  l as ActionBtn,
+  n as Description,
+  r as InsightContainer,
+  t as InsightContent,
+  i as Title
+};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
+export declare const PredictionResult: React.FC<NotificationProps>;

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

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { PredictionResultContainer as t } from "./styles.js";
+import "@linaria/react";
+const c = ({ close: r }) => /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o("button", { onClick: r, children: "close" }) });
+export {
+  c as PredictionResult
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PredictionResultContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -0,0 +1,12 @@
+import { styled as r } from "@linaria/react";
+const i = r.div`
+  box-sizing: border-box;
+  width: 100%;
+  height: 118px;
+  border-radius: 10px;
+  background-color: var(--color-primary-green2);
+  position: relative;
+`;
+export {
+  i as PredictionResultContainer
+};

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

@@ -0,0 +1,9 @@
+/// <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 CloseIconWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CloseIcon: any;
+export declare const Header: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TypeIcon: any;
+export declare const TypeName: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const Question: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AnswerButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

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

@@ -0,0 +1,87 @@
+import { styled as o } from "@linaria/react";
+import { SvgIcon as r } from "../../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const p = o.div`
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #fff;
+  width: 100%;
+  padding: 16px;
+  position: relative;
+`, a = o.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  right: 11px;
+  top: 11px;
+  cursor: pointer;
+`, c = o(r)`
+  g > path {
+    stroke: var(--color-neutrals-gray7);
+  }
+
+  &:hover {
+    path {
+      stroke: var(--color-primary-green2);
+    }
+  }
+`, s = o.div`
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+`, l = o(r)`
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+
+  path {
+    fill: var(--color-primary-green1);
+    fill-opacity: 1;
+  }
+`, g = o.span`
+  color: var(--color-neutrals-gray7);
+  font-weight: 550;
+  font-size: 12px;
+`, d = o.div`
+  font-weight: 400;
+  font-size: 16px;
+  color: var(--color-primary-green2);
+  margin-bottom: 12px;
+  padding-right: 10px;
+  font-family: var(--font-serif);
+`, x = o.button`
+  background-color: var(--color-primary-green1);
+  color: var(--color-white);
+  border-radius: 40px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 550;
+  padding: 0px 16px;
+  height: 44px;
+
+  &:hover {
+    background-color: var(--color-primary-green2);
+    cursor: pointer;
+  }
+`;
+export {
+  x as AnswerButton,
+  c as CloseIcon,
+  a as CloseIconWrap,
+  p as Container,
+  s as Header,
+  d as Question,
+  l as TypeIcon,
+  g as TypeName
+};

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

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-import { InsightHistory } from '@streamlayer/sdk-web-types';
-export declare const InsightDetails: React.FC<InsightHistory>;
+import { InsightHistory, FeedItem } from '@streamlayer/sdk-web-types';
+export declare const InsightDetails: React.FC<InsightHistory & {
+    created: FeedItem['created'];
+}>;

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

@@ -1,21 +1,37 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { SvgIcon as d } from "../../../icons/index.js";
-import { VideoPlayer as e } from "../../../video-player/index.js";
-import { Container as p, Content as c, Title as h, Description as b, WebLinkBtn as f } from "./styles.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { SvgIcon as p } from "../../../icons/index.js";
+import { VideoPlayer as g } from "../../../video-player/index.js";
+import { Container as u, DateWrap as S, Content as b, Title as f, Description as k, WebLinkBtn as D } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "../../../video-player/styles.js";
-const j = ({ title: m, instantView: r }) => /* @__PURE__ */ l(p, { children: [
-  (r == null ? void 0 : r.video) && /* @__PURE__ */ o(e, { source: r.video.url, poster: r.video.thumbnailUrl }),
-  /* @__PURE__ */ l(c, { children: [
-    /* @__PURE__ */ o(h, { children: (r == null ? void 0 : r.heading) || m }),
-    /* @__PURE__ */ o(b, { children: r == null ? void 0 : r.body }),
-    (r == null ? void 0 : r.webLink) && /* @__PURE__ */ l(f, { href: "webLink", target: "_blank", children: [
-      "Explore more of the Masters History",
-      /* @__PURE__ */ o(d, { name: "icon-external-link" })
+const C = ({
+  created: m,
+  title: c,
+  instantView: o
+}) => {
+  const l = new Date(m), d = l.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  }), h = l.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+  return /* @__PURE__ */ r(u, { children: [
+    /* @__PURE__ */ r(S, { children: [
+      d,
+      "・",
+      h
+    ] }),
+    (o == null ? void 0 : o.video) && /* @__PURE__ */ e(g, { source: o.video.url, poster: o.video.thumbnailUrl }),
+    /* @__PURE__ */ r(b, { children: [
+      /* @__PURE__ */ e(f, { children: (o == null ? void 0 : o.heading) || c }),
+      /* @__PURE__ */ e(k, { children: o == null ? void 0 : o.body }),
+      (o == null ? void 0 : o.webLink) && /* @__PURE__ */ r(D, { href: o == null ? void 0 : o.webLink.url, target: "_blank", children: [
+        "Explore more of the Masters History",
+        /* @__PURE__ */ e(p, { name: "icon-external-link" })
+      ] })
     ] })
-  ] })
-] });
+  ] });
+};
 export {
-  j as InsightDetails
+  C as InsightDetails
 };

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

@@ -4,3 +4,4 @@ export declare const Content: import("@linaria/react").StyledComponent<import("r
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
 export declare const Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const WebLinkBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const DateWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/insight-details/styles.js

@@ -1,10 +1,11 @@
 import { styled as o } from "@linaria/react";
-const t = o.div`
+const e = o.div`
   display: flex;
   flex-direction: column;
   row-gap: 16px;
   padding: var(--container-padding);
   background-color: var(--color-neutrals-white);
+  width: 100%;
 `, r = o.div`
   display: flex;
   flex-direction: column;
@@ -33,10 +34,15 @@ const t = o.div`
   border-radius: 40px;
   border: 1px solid var(--color-primary-green1);
   text-decoration: none;
+`, l = o.div`
+  font-size: 12px;
+  font-weight: 550;
+  color: var(--color-neutrals-gray7);
 `;
 export {
-  t as Container,
+  e as Container,
   r as Content,
+  l as DateWrap,
   i as Description,
   n as Title,
   a as WebLinkBtn

package/lib/ui/show-in/index.d.ts

@@ -3,4 +3,5 @@ export declare const ShowIn: React.FC<{
     children: React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;
     className?: string;
+    hiding?: boolean;
 }>;

package/lib/ui/show-in/index.js

@@ -1,13 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import { styled as r } from "@linaria/react";
-const n = r.div`
+import { jsx as n } from "react/jsx-runtime";
+import { css as r, cx as e } from "@linaria/core";
+import { styled as m } from "@linaria/react";
+const s = m.div`
   overflow: hidden;
   width: 100%;
   transform: scale(1);
   opacity: 1;
   max-height: 500px;
 
-  animation: containerShowIn 0.1s ease-out;
+  animation: containerShowIn ease-out;
+  animation-duration: var(--animation-duration);
 
   @keyframes containerShowIn {
     0% {
@@ -30,7 +32,34 @@ const n = r.div`
       max-height: 500px;
     }
   }
-`, m = ({ children: t, style: a, className: o }) => /* @__PURE__ */ e(n, { style: a, className: o, children: t });
+`, c = r`
+  animation: containerHide ease-out;
+  animation-duration: var(--animation-duration);
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+
+  @keyframes containerHide {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+      max-height: 0;
+    }
+    80% {
+      opacity: 0;
+      transform: scale(0.9);
+      max-height: 500px;
+    }
+    85% {
+      transform: scale(0.9);
+      max-height: 500px;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+      max-height: 500px;
+    }
+  }
+`, f = ({ children: a, style: i, className: t, hiding: o }) => /* @__PURE__ */ n(s, { style: i, className: e(t, o && c), children: a });
 export {
-  m as ShowIn
+  f as ShowIn
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.54.1",
+  "version": "0.56.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -15,6 +15,11 @@
       "default": "./lib/ui/app/masters.js",
       "types": "./lib/ui/app/masters.d.js"
     },
+    "./points": {
+      "import": "./lib/ui/gamification/points/index.js",
+      "default": "./lib/ui/gamification/points/index.js",
+      "types": "./lib/ui/gamification/points/index.d.js"
+    },
     "./*": {
       "import": "./lib/*/index.js",
       "default": "./lib/*/index.js",
@@ -26,20 +31,20 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@streamlayer/sl-eslib": "^5.53.5",
+    "@streamlayer/sl-eslib": "^5.53.6",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.21.1",
-    "@streamlayer/sdk-web": "^0.28.15",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.10",
+    "@streamlayer/feature-gamification": "^0.22.0",
+    "@streamlayer/sdk-web": "^0.28.17",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.12",
     "@streamlayer/sdk-web-api": "^0.0.1",
-    "@streamlayer/sdk-web-core": "^0.17.4",
-    "@streamlayer/sdk-web-features": "^0.10.18",
-    "@streamlayer/sdk-web-interfaces": "^0.18.11",
-    "@streamlayer/sdk-web-notifications": "^0.10.10",
-    "@streamlayer/sdk-web-storage": "^0.0.1",
-    "@streamlayer/sdk-web-types": "^0.18.1"
+    "@streamlayer/sdk-web-core": "^0.17.6",
+    "@streamlayer/sdk-web-features": "^0.10.20",
+    "@streamlayer/sdk-web-interfaces": "^0.18.13",
+    "@streamlayer/sdk-web-notifications": "^0.11.0",
+    "@streamlayer/sdk-web-storage": "^0.0.2",
+    "@streamlayer/sdk-web-types": "^0.19.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -78,6 +83,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.27.1"
+    "@streamlayer/react": "^0.28.0"
   }
 }

package/lib/ui/demo/DemoPoints.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-export declare const DemoPoints: React.FC<{
-    sdk: StreamLayerSDK;
-}>;

package/lib/ui/demo/DemoPoints.js

@@ -1,28 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { FeatureType as s } from "@streamlayer/sdk-web-types";
-import { useStore as p } from "@nanostores/react";
-import { styled as u } from "@linaria/react";
-import { Points as a } from "../gamification/points/index.js";
-import "../theme/theme.js";
-import "@linaria/core";
-import "../theme/constants.js";
-import "../../utils/common.js";
-import "../gamification/points/styles.js";
-import "../icons/index.js";
-import "react";
-import "../theme/breakpoints.js";
-const d = u.div`
-  position: fixed;
-  top: 0;
-  right: 0;
-`, f = ({ store: o }) => {
-  var m, i, e, n;
-  const t = p(o);
-  return ((i = (m = t.data) == null ? void 0 : m.summary) == null ? void 0 : i.points) === void 0 ? null : /* @__PURE__ */ r(d, { children: ((n = (e = t.data) == null ? void 0 : e.summary) == null ? void 0 : n.points) && /* @__PURE__ */ r(a, { points: t.data.summary.points }) });
-}, A = ({ sdk: o }) => {
-  const t = o.getFeature(s.GAMES);
-  return t != null && t.userSummary ? /* @__PURE__ */ r(f, { store: t.userSummary.getStore() }) : null;
-};
-export {
-  A as DemoPoints
-};

package/lib/ui/demo/Gamification.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import type { Gamification } from '@streamlayer/feature-gamification';
-export declare const GamificationComponent: React.FC<{
-    gamification: Gamification;
-    sdk: StreamLayerSDK;
-}>;

package/lib/ui/demo/Gamification.js

@@ -1,114 +0,0 @@
-import { jsx as t, jsxs as s, Fragment as z } from "react/jsx-runtime";
-import { FeatureStatus as J } from "@streamlayer/sdk-web-interfaces";
-import { useStore as p } from "@nanostores/react";
-import { useState as K } from "react";
-import { ActivePages as a, Tabs as N } from "../gamification/tabs/index.js";
-import { UserSummary as V } from "./components/UserSummary.js";
-import { QuestionsList as W } from "./components/QuestionsList.js";
-import { Question as X } from "./components/Question.js";
-import { Onboarding as Y } from "../gamification/onboarding/index.js";
-import "@streamlayer/sdk-web-types";
-import "../gamification/insight/styles.js";
-import "../gamification/insight-list/styles.js";
-import "../gamification/common-header/styles.js";
-import "../gamification/detailed-insight/styles.js";
-import { Leaderboard as Z } from "./components/Leaderboard.js";
-import { DemoContainer as m, UserStatisticsContainer as _, QuestionsContainer as $ } from "./styles.js";
-import "../gamification/tabs/styles.js";
-import "@linaria/react";
-import "../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";
-import "../gamification/user-statistics/components/statistic/index.js";
-import "../gamification/user-statistics/components/statistic/styles.js";
-import "../gamification/user-statistics/styles.js";
-import "../gamification/question/list/index.js";
-import "../gamification/insight/index.js";
-import "../gamification/question/index.js";
-import "../button/index.js";
-import "../button/styles.js";
-import "../gamification/constants.js";
-import "../gamification/question/styles.js";
-import "../icons/index.js";
-import "../gamification/question/list/styles.js";
-import "../gamification/vote/index.js";
-import "../app/styles.js";
-import "../gamification/vote/feedback/index.js";
-import "../gamification/vote/feedback/styles.js";
-import "../gamification/vote/styles.js";
-import "../gamification/vote/vote-option/index.js";
-import "../gamification/vote/vote-option/styles.js";
-import "../gamification/vote/win-bar/index.js";
-import "../timer/index.js";
-import "react-countdown-circle-timer";
-import "../theme/constants.js";
-import "../gamification/vote/win-bar/styles.js";
-import "../../icon-exit-d3f9fc80.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js";
-import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
-import "../gamification/onboarding/styles.js";
-import "../gamification/leaderboard/index.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "../gamification/leaderboard/list-item/index.js";
-import "../gamification/leaderboard/list-item/styles.js";
-const mt = ({
-  gamification: r,
-  sdk: u
-}) => {
-  var d, v, c, b, y, g, S, h, C, G, L, Q, A, E, f, w, x, P, F, O, B, D, R;
-  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(r.featureSettings), [n, q] = K(a.HOME);
-  if (T !== J.Ready)
-    return /* @__PURE__ */ t("div", { children: "wait..." });
-  if (o != null && o.loading)
-    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
-  if (!(o != null && o.data))
-    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
-  if (!j)
-    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
-      Y,
-      {
-        closeFeature: u.closeFeature,
-        gamification: r,
-        steps: (v = (d = e.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
-        gameIcon: (y = (b = (c = e.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
-        sponsorLogo: (h = (S = (g = e.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
-        rules: (G = (C = e.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
-        rulesBtnLabel: (Q = (L = e.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
-        rulesTitle: (E = (A = e.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
-        primaryColor: (x = (w = (f = e.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
-        inviteCardTitle: (F = (P = e.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
-        inviteCardSubtext: (B = (O = e.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
-        inviteCardBtnLabel: (R = (D = e.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
-      }
-    ) });
-  const H = (i) => {
-    r.openQuestion(i);
-  }, M = () => {
-    r.closeQuestion();
-  }, U = (i, k) => {
-    r.submitAnswer(i, k);
-  };
-  return /* @__PURE__ */ s(m, { children: [
-    /* @__PURE__ */ t(N, { activePage: n, toggleActivePage: (i) => {
-      q(i);
-    } }),
-    n === a.HOME && /* @__PURE__ */ s(z, { children: [
-      /* @__PURE__ */ t(_, { children: r.userSummary && /* @__PURE__ */ t(V, { store: r.userSummary.getStore() }) }),
-      /* @__PURE__ */ s($, { children: [
-        r.questions && /* @__PURE__ */ t(W, { openQuestion: H, store: r.questions.getStore() }),
-        l && /* @__PURE__ */ t(X, { closeQuestion: M, vote: U, openedQuestion: l })
-      ] })
-    ] }),
-    n === a.LEADERBOARD && r.leaderboardList && /* @__PURE__ */ t(Z, { store: r.leaderboardList.getStore() })
-  ] });
-};
-export {
-  mt as GamificationComponent
-};

package/lib/ui/demo/Highlights.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import type { Highlights } from '@streamlayer/feature-gamification';
-export declare const HighlightsComponent: React.FC<{
-    highlights: Highlights;
-    sdk: StreamLayerSDK;
-}>;