@streamlayer/react-ui 0.40.0 → 0.42.0

package/lib/ui/demo/components/Question.js

@@ -1,9 +1,8 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import { styled as y } from "@linaria/react";
-import { useState as d, useCallback as x, useMemo as c } from "react";
+import { useState as d, useCallback as x, useMemo as s } from "react";
 import { Vote as g } from "../../gamification/vote/index.js";
 import { VotingHeader as h } from "../../gamification/vote/components/voting-header/index.js";
-import { i as b } from "../../../fedex-a8dcc7b2.js";
 import "@streamlayer/sdk-web-types";
 import "../../../index-7045fbb2.js";
 import "../../gamification/vote/components/voting-option/styles.js";
@@ -16,7 +15,7 @@ import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "../../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../../gamification/vote/components/voting-header/styles.js";
-const k = y.div`
+const b = y.div`
   position: absolute;
   top: 0;
   background: var(--color-transparent-item);
@@ -43,28 +42,28 @@ const k = y.div`
       transform: translateX(0);
     }
   }
-`, F = ({ openedQuestion: t, closeQuestion: a, vote: e }) => {
-  var s;
-  const [l, m] = d(!1), p = x(
+`, B = ({ openedQuestion: t, closeQuestion: a, vote: e }) => {
+  var m;
+  const [l, c] = d(!1), p = x(
     (i) => {
-      m(i);
+      c(i);
     },
-    [m]
-  ), r = c(
+    [c]
+  ), r = s(
     () => t == null ? void 0 : t.answers.find((i) => i.youVoted === !0),
     [t]
-  ), f = c(
+  ), f = s(
     () => !!(t != null && t.answers.find((i) => i.correct === !0)),
     [t]
   );
-  return t ? /* @__PURE__ */ o(k, { children: /* @__PURE__ */ n("div", { children: [
+  return t ? /* @__PURE__ */ o(b, { children: /* @__PURE__ */ n("div", { children: [
     /* @__PURE__ */ o(
       h,
       {
         points: (r == null ? void 0 : r.points) || 0,
         questionAnswered: !!r,
         questionAnsweredCorrectly: r == null ? void 0 : r.correct,
-        logo: b,
+        logo: "",
         closeQuestion: a,
         setTimeToExpire: p,
         questionType: t.type
@@ -74,7 +73,7 @@ const k = y.div`
       g,
       {
         title: t.subject,
-        feedbackMessages: (s = t.options) == null ? void 0 : s.options.value,
+        feedbackMessages: (m = t.options) == null ? void 0 : m.options.value,
         questionType: t.type,
         questionId: t.id,
         questionAnswered: !!r,
@@ -98,5 +97,5 @@ const k = y.div`
   ] }) }) : null;
 };
 export {
-  F as Question
+  B as Question
 };

package/lib/ui/demo/components/QuestionsList.js

@@ -1,19 +1,20 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useStore as m } from "@nanostores/react";
-import { QuestionList as p } from "../../gamification/question-list/index.js";
+import { QuestionList as p } from "../../gamification/question/list/index.js";
 import "../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../button/index.js";
 import "../../button/styles.js";
 import "@linaria/react";
+import "../../gamification/constants.js";
 import "../../gamification/question/styles.js";
 import "../../icons/index.js";
 import "react";
-import "../../gamification/question-list/styles.js";
-const j = ({ store: r, openQuestion: i }) => {
+import "../../gamification/question/list/styles.js";
+const l = ({ store: r, openQuestion: i }) => {
   const t = m(r);
   return t != null && t.data ? /* @__PURE__ */ o(p, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
 };
 export {
-  j as QuestionsList
+  l as QuestionsList
 };

package/lib/ui/demo/components/index.js

@@ -15,15 +15,16 @@ import "@linaria/react";
 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/question/list/index.js";
 import "../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../button/index.js";
 import "../../button/styles.js";
+import "../../gamification/constants.js";
 import "../../gamification/question/styles.js";
 import "../../icons/index.js";
 import "react";
-import "../../gamification/question-list/styles.js";
+import "../../gamification/question/list/styles.js";
 import "../../gamification/vote/index.js";
 import "../../../index-7045fbb2.js";
 import "../../gamification/vote/components/voting-option/styles.js";
@@ -37,7 +38,6 @@ import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "../../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../../gamification/vote/components/voting-header/styles.js";
-import "../../../fedex-a8dcc7b2.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";

package/lib/ui/demo/index.js

@@ -3,8 +3,8 @@ import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as g } from "@streamlayer/sdk-web-types";
 import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
 import { useState as b, useMemo as h, useEffect as C } from "react";
-import "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web-api";
+import "@streamlayer/sdk-web-storage";
 import { useStore as c } from "@nanostores/react";
 import { Notifications as F } from "../notifications/index.js";
 import { GamificationComponent as w } from "./Gamification.js";
@@ -32,13 +32,14 @@ import "../gamification/user-statistics/components/statistic/index.js";
 import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
 import "./components/QuestionsList.js";
-import "../gamification/question-list/index.js";
+import "../gamification/question/list/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/question/list/styles.js";
 import "./components/Question.js";
 import "../gamification/vote/index.js";
 import "../../index-7045fbb2.js";
@@ -52,7 +53,6 @@ import "react-countdown-circle-timer";
 import "../theme/constants.js";
 import "../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../gamification/vote/components/voting-header/styles.js";
-import "../../fedex-a8dcc7b2.js";
 import "../gamification/onboarding/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";

package/lib/ui/gamification/constants.d.ts

@@ -0,0 +1,6 @@
+import { QuestionType } from '@streamlayer/sdk-web-types';
+import { icons } from '../icons';
+export declare const QuestionTypeData: Record<QuestionType, {
+    label: string;
+    iconName: keyof typeof icons;
+} | undefined>;

package/lib/ui/gamification/constants.js

@@ -0,0 +1,13 @@
+import { QuestionType as i } from "@streamlayer/sdk-web-types";
+const o = {
+  [i.TWEET]: { label: "Insight", iconName: "icon-insight" },
+  [i.PROMOTION]: { label: "Insight", iconName: "icon-insight" },
+  [i.UNSET]: void 0,
+  [i.FACTOID]: { label: "Insight", iconName: "icon-insight" },
+  [i.POLL]: { label: "Poll", iconName: "icon-poll" },
+  [i.TRIVIA]: { label: "Trivia", iconName: "icon-trivia" },
+  [i.PREDICTION]: { label: "Prediction", iconName: "icon-prediction" }
+};
+export {
+  o as QuestionTypeData
+};

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

@@ -1,48 +1,41 @@
-import { jsx as n, jsxs as t } from "react/jsx-runtime";
-import { QuestionType as i, PickHistoryStatus as c, QuestionStatus as p } from "@streamlayer/sdk-web-types";
-import { Button as O } from "../../button/index.js";
-import { QuestionTypeIcon as o, QuestionActionIcon as r, QuestionItem as Q, QuestionContent as b, QuestionCaption as E, QuestionTypeLabel as P, QuestionBody as A, QuestionAction as g } from "./styles.js";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { PickHistoryStatus as n, QuestionType as d, QuestionStatus as Q } from "@streamlayer/sdk-web-types";
+import { Button as h } from "../../button/index.js";
+import { QuestionTypeData as y } from "../constants.js";
+import { QuestionActionIcon as r, QuestionItem as I, QuestionContent as T, QuestionCaption as f, QuestionTypeIcon as A, QuestionTypeLabel as S, QuestionBody as x, QuestionAction as D } from "./styles.js";
 import "../../button/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const y = {
-  [i.TWEET]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
-  [i.PROMOTION]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
-  [i.UNSET]: void 0,
-  [i.FACTOID]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
-  [i.POLL]: { label: "Poll", Icon: () => /* @__PURE__ */ n(o, { name: "icon-poll" }) },
-  [i.TRIVIA]: { label: "Trivia", Icon: () => /* @__PURE__ */ n(o, { name: "icon-trivia" }) },
-  [i.PREDICTION]: { label: "Prediction", Icon: () => /* @__PURE__ */ n(o, { name: "icon-prediction" }) }
-}, N = {
-  [c.LOST]: /* @__PURE__ */ n(r, { name: "icon-cross" }),
-  [c.WON]: /* @__PURE__ */ n(r, { name: "icon-check" }),
-  [c.UNSET]: void 0,
-  [c.DNP]: /* @__PURE__ */ n(r, { name: "icon-arrow" })
-}, k = ({
-  questionId: I,
-  questionType: l,
+const E = {
+  [n.LOST]: /* @__PURE__ */ o(r, { name: "icon-cross" }),
+  [n.WON]: /* @__PURE__ */ o(r, { name: "icon-check" }),
+  [n.UNSET]: void 0,
+  [n.DNP]: /* @__PURE__ */ o(r, { name: "icon-arrow" })
+}, R = ({
+  questionId: s,
+  questionType: c,
   questionStatus: m,
   subject: u,
-  openForVoting: h,
-  openQuestion: e,
-  status: T
+  openForVoting: a,
+  openQuestion: i,
+  status: l
 }) => {
-  const { Icon: s, label: a } = y[l] || {}, d = N[T];
-  return !a || !s ? null : /* @__PURE__ */ t(Q, { onClick: () => e == null ? void 0 : e(I), children: [
-    /* @__PURE__ */ t(b, { children: [
-      /* @__PURE__ */ t(E, { children: [
-        /* @__PURE__ */ n(s, {}),
-        /* @__PURE__ */ t(P, { children: [
-          a,
-          l === i.TRIVIA && m === p.RESOLVED && " • Expired"
+  const e = y[c], p = E[l];
+  return e ? /* @__PURE__ */ t(I, { onClick: () => i == null ? void 0 : i(s), children: [
+    /* @__PURE__ */ t(T, { children: [
+      /* @__PURE__ */ t(f, { children: [
+        /* @__PURE__ */ o(A, { name: e.iconName }),
+        /* @__PURE__ */ t(S, { children: [
+          e.label,
+          c === d.TRIVIA && m === Q.RESOLVED && " • Expired"
         ] })
       ] }),
-      /* @__PURE__ */ n(A, { children: u || "" })
+      /* @__PURE__ */ o(x, { children: u || "" })
     ] }),
-    /* @__PURE__ */ n(g, { children: d || (h ? /* @__PURE__ */ n(O, { children: "Play" }) : null) })
-  ] });
+    /* @__PURE__ */ o(D, { children: p || (a ? /* @__PURE__ */ o(h, { children: "Play" }) : null) })
+  ] }) : null;
 };
 export {
-  k as Question
+  R as Question
 };

package/lib/ui/gamification/{question-list → question/list}/index.js

@@ -1,14 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
-import { Question as i } from "../question/index.js";
+import { Question as i } from "../index.js";
 import { QuestionsContainer as p } from "./styles.js";
 import "@streamlayer/sdk-web-types";
-import "../../button/index.js";
-import "../../button/styles.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
 import "@linaria/react";
-import "../question/styles.js";
-import "../../icons/index.js";
+import "../../constants.js";
+import "../styles.js";
+import "../../../icons/index.js";
 import "react";
-const l = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ t(p, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ t(i, { openQuestion: m, ...o }, o.questionId)) });
+const u = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ t(p, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ t(i, { openQuestion: m, ...o }, o.questionId)) });
 export {
-  l as QuestionList
+  u as QuestionList
 };

package/lib/ui/gamification/vote/vote-header/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { QuestionType } from '@streamlayer/sdk-web-types';
+interface VoteHeaderProps {
+    type: QuestionType;
+    close: () => void;
+}
+export declare const VoteHeader: React.FC<VoteHeaderProps>;
+export {};

package/lib/ui/gamification/vote/vote-header/index.js

@@ -0,0 +1,20 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { QuestionTypeData as i } from "../../constants.js";
+import { Container as p, QuestionTypeWrap as s, QuestionTypeIcon as m, QuestionTypeTitle as c, CloseButton as l, CloseIcon as a } from "./styles.js";
+import "@streamlayer/sdk-web-types";
+import "@linaria/react";
+import "../../../icons/index.js";
+import "react";
+const Q = ({ type: t, close: r }) => {
+  const e = i[t];
+  return e ? /* @__PURE__ */ n(p, { children: [
+    /* @__PURE__ */ n(s, { children: [
+      /* @__PURE__ */ o(m, { name: e.iconName }),
+      /* @__PURE__ */ o(c, { children: e.label })
+    ] }),
+    /* @__PURE__ */ o(l, { onClick: r, children: /* @__PURE__ */ o(a, { name: "icon-cross" }) })
+  ] }) : null;
+};
+export {
+  Q as VoteHeader
+};

package/lib/ui/gamification/vote/vote-header/styles.d.ts

@@ -0,0 +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 QuestionTypeWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QuestionTypeIcon: any;
+export declare const QuestionTypeTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const CloseButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const CloseIcon: any;

package/lib/ui/gamification/vote/vote-header/styles.js

@@ -0,0 +1,59 @@
+import { styled as o } from "@linaria/react";
+import { SvgIcon as t } from "../../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const a = o.div`
+  font-weight: var(--font-weight-default);
+  color: var(--color-neutrals-gray7);
+  border-bottom: 1px solid var(--color-neutrals-gray3);
+  background: var(--color-neutrals-white);
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 12px 12px 16px;
+`, l = o.div`
+  display: flex;
+  align-items: center;
+`, p = o(t)`
+  width: 16px;
+  height: 16px;
+
+  path {
+    fill: var(--color-primary-green1);
+    fill-opacity: 1;
+  }
+`, s = o.span`
+  font-family: var(--font-regular);
+  margin-left: 8px;
+`, c = o.button`
+  width: 24px;
+  height: 24px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`, g = o(t)`
+  path {
+    stroke: var(--color-neutrals-gray7);
+  }
+
+  &:hover {
+    path {
+      stroke: var(--color-primary-green2);
+    }
+  }
+`;
+export {
+  c as CloseButton,
+  g as CloseIcon,
+  a as Container,
+  p as QuestionTypeIcon,
+  s as QuestionTypeTitle,
+  l as QuestionTypeWrap
+};

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

@@ -31,7 +31,6 @@ export declare const icons: {
     'icon-btn-leaderboard': any;
     'icon-check': any;
     'icon-arrow': any;
-    fedex: any;
 };
 export declare const Icon: React.FC<{
     name: keyof typeof icons;