@streamlayer/react-ui 0.1.0

package/src/lib/gamification/login/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState } from 'react';
+import PhoneInput, { isValidPhoneNumber, formatPhoneNumberIntl } from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
+import useDigitInput from 'react-digit-input';
+import * as loginApi from '../../../utils/login';
+import { Timer } from '../vote/components/voting-header/components/timer';
+import { Panel, Digits, Form, FormTitle, FormDescription, FormSubmit, FormInputContainer } from './styles';
+export const Login = ({ login, anonymousLogin }) => {
+    const [phoneInput, setPhoneInput] = useState('');
+    const [phone, setPhone] = useState('');
+    const [code, setCode] = useState('');
+    const digits = useDigitInput({
+        acceptedCharacters: /^[0-9]$/,
+        length: 4,
+        value: code,
+        onChange: setCode,
+    });
+    const requestCode = async (e) => {
+        e.preventDefault();
+        try {
+            const parsed = phoneInput.replaceAll('+', '');
+            await loginApi.requestLoginCode(parsed);
+            setPhone(parsed);
+        }
+        catch (err) {
+            window.alert(err);
+        }
+    };
+    const loginByCode = async (e) => {
+        e.preventDefault();
+        if (phone && code) {
+            try {
+                const token = await loginApi.login(phone, code);
+                if (token && login) {
+                    await login(token);
+                }
+                else {
+                    console.log('token', token);
+                }
+            }
+            catch (err) {
+                window.alert(err);
+            }
+        }
+    };
+    return (_jsxs(Panel, { children: [!phone && (_jsxs("div", { children: [_jsxs(Form, { onSubmit: requestCode, children: [_jsx(FormTitle, { children: "Enter your phone number" }), _jsx(FormDescription, { children: "Enter your phone up for number to log in or sign an account." }), _jsx(FormInputContainer, { children: _jsx(PhoneInput, { value: phoneInput, onChange: (val) => setPhoneInput(`${val}`) }) }), _jsx(FormSubmit, { disabled: !isValidPhoneNumber(phoneInput), type: "submit", children: "request code" })] }), anonymousLogin && (_jsx(FormSubmit, { style: { display: 'block', margin: 'auto' }, disabled: true, onClick: anonymousLogin, children: "anonymous login" }))] })), phone && (_jsxs(Form, { onSubmit: loginByCode, children: [_jsx(FormTitle, { children: "Enter Verification Code" }), _jsxs(FormDescription, { children: ["Please enter the verification code ", _jsx("br", {}), "sent to ", _jsx("b", { children: formatPhoneNumberIntl(phoneInput) })] }), _jsxs(Digits, { children: [_jsx("input", { autoFocus: true, inputMode: "decimal", ...digits[0] }), _jsx("input", { inputMode: "decimal", ...digits[1] }), _jsx("input", { inputMode: "decimal", ...digits[2] }), _jsx("input", { inputMode: "decimal", ...digits[3] })] }), _jsx(FormSubmit, { disabled: code.length !== 4, type: "submit", children: "login" }), _jsxs(FormDescription, { children: ["Didn't get 59 the code? ", _jsx("br", {}), "Resend Code in", _jsx(Timer, { duration: 30, setTimeToExpire: () => { }, isPlaying: true })] })] }))] }));
+};
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/login/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/login/index.tsx"],"names":[],"mappings":"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"}

package/src/lib/gamification/login/styles.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const Panel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Form: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
+export declare const FormTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FormDescription: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FormSubmit: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const FormInputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Digits: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/lib/gamification/login/styles.js

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+export const Panel = styled.div `
+  border-radius: 8px;
+  padding: 0 12px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+export const Form = styled.form `
+  display: flex;
+  margin: auto;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+export const FormTitle = styled.div `
+  margin-bottom: 20px;
+  font-size: 18px;
+`;
+export const FormDescription = styled.div `
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+export const FormSubmit = styled.button `
+  background-color: ${(props) => props.theme.COLORS.BLUE_QUESTION_ACTION_BTN};
+  border: none;
+  border-radius: 2px;
+  padding: 6px;
+  text-transform: uppercase;
+  color: #fff;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  margin-bottom: 20px;
+`;
+export const FormInputContainer = styled.div `
+  input {
+    font-size: 20px;
+    background: transparent;
+    color: #fff;
+    border: none;
+    outline: none;
+  }
+
+  margin-bottom: 40px;
+  border-bottom: 1px solid white;
+`;
+export const Digits = styled.div `
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+
+  input {
+    width: 20px;
+    height: 40px;
+    font-size: 40px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/login/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/login/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;sBAGT,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,mBAAmB;;;;CAItE,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;CAM9B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOxC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;sBACjB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,wBAAwB;;;;;;;;;;;;;CAa3E,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAW3C,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAU/B,CAAA"}

package/src/lib/gamification/onboarding/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type OnboardingType = {
+    action: () => void;
+};
+export declare const Onboarding: React.FC<OnboardingType>;
+export {};

package/src/lib/gamification/onboarding/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Container, Content, Description, Title, OnboardingActionBtn } from './styles';
+export const Onboarding = ({ action }) => (_jsxs(Container, { children: [_jsxs(Content, { children: [_jsx(Description, { children: "Welcome to the" }), _jsx(Title, { children: "Inplay Game" })] }), _jsx(OnboardingActionBtn, { onClick: action, children: "Let\u2019s play" })] }));
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/onboarding/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/onboarding/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAMtF,MAAM,CAAC,MAAM,UAAU,GAA6B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAClE,MAAC,SAAS,eACR,MAAC,OAAO,eACN,KAAC,WAAW,iCAA6B,EACzC,KAAC,KAAK,8BAAoB,IAClB,EACV,KAAC,mBAAmB,IAAC,OAAO,EAAE,MAAM,gCAAkC,IAC5D,CACb,CAAA"}

package/src/lib/gamification/onboarding/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Description: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OnboardingActionBtn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/src/lib/gamification/onboarding/styles.js

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+export const Content = styled.div `
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+export const Description = styled.div `
+  font-size: 22px;
+  font-weight: 300;
+  margin-bottom: 4px;
+`;
+export const Title = styled.div `
+  font-size: 26px;
+  font-weight: 700;
+`;
+export const OnboardingActionBtn = styled.button `
+  color: ${(props) => props.theme.COLORS.WHITE};
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: ${(props) => props.theme.COLORS.GREEN_PRIMARY_BTN};
+  cursor: pointer;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 6px;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/onboarding/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/onboarding/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;CAI7C,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMhC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG9B,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;WACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;sBAIxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB;;;;;;;;;CASpE,CAAA"}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type PickHistory } from '@streamlayer/sdk-web-types';
+export declare const Question: React.FC<{
+    openQuestion?: (questionId: string) => void;
+} & PickHistory>;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { QuestionType, QuestionStatus, PickHistoryStatus } from '@streamlayer/sdk-web-types';
+import iconPoll from '../../../assets/icons/icon-poll.svg';
+import iconPrediction from '../../../assets/icons/icon-prediction.svg';
+import iconTrivia from '../../../assets/icons/icon-trivia.svg';
+import iconSuccess from '../../../assets/icons/icon-check-green.svg';
+import iconError from '../../../assets/icons/icon-cross.svg';
+import iconChevron from '../../../assets/icons/icon-chevron.svg';
+import { Panel, QuestionTypeIconWrap, QuestionTypeIcon, QuestionContent, QuestionTypeLabel, QuestionSubject, QuestionActionTitle, QuestionActionIcon, QuestionStatusIcon, QuestionTypeTitle, ExpiredQuestion, } from './styles';
+const QuestionTypeData = {
+    [QuestionType.POLL]: { label: 'Poll', icon: iconPoll },
+    [QuestionType.TRIVIA]: { label: 'Trivia', icon: iconTrivia },
+    [QuestionType.PREDICTION]: { label: 'Prediction', icon: iconPrediction },
+};
+const QuestionStatusTypeData = {
+    [PickHistoryStatus.LOST]: iconError,
+    [PickHistoryStatus.WON]: iconSuccess,
+    [PickHistoryStatus.UNSET]: iconChevron,
+    [PickHistoryStatus.DNP]: iconChevron,
+};
+export const Question = ({ questionId, questionType, questionStatus, subject, openForVoting, openQuestion, status, }) => {
+    const questionTypeData = QuestionTypeData[questionType];
+    if (questionTypeData === undefined) {
+        return null;
+    }
+    return (_jsxs(Panel, { onClick: () => openQuestion?.(questionId), children: [_jsx(QuestionTypeIconWrap, { children: _jsx(QuestionTypeIcon, { alt: "question-type-icon", src: questionTypeData.icon }) }), _jsxs(QuestionContent, { children: [_jsxs(QuestionTypeLabel, { children: [_jsx(QuestionTypeTitle, { children: questionTypeData.label }), questionType === QuestionType.TRIVIA && questionStatus === QuestionStatus.RESOLVED && (_jsx(ExpiredQuestion, { children: "Expired" }))] }), _jsx(QuestionSubject, { children: subject || '' })] }), openForVoting ? (_jsx(QuestionActionTitle, { children: "play" })) : (_jsx(QuestionActionIcon, { children: _jsx(QuestionStatusIcon, { alt: "question-status-icon", src: QuestionStatusTypeData[status] }) }))] }));
+};
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/question/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/question/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAoB,MAAM,4BAA4B,CAAA;AAE9G,OAAO,QAAQ,MAAM,qCAAqC,CAAA;AAC1D,OAAO,cAAc,MAAM,2CAA2C,CAAA;AACtE,OAAO,UAAU,MAAM,uCAAuC,CAAA;AAC9D,OAAO,WAAW,MAAM,4CAA4C,CAAA;AACpE,OAAO,SAAS,MAAM,sCAAsC,CAAA;AAC5D,OAAO,WAAW,MAAM,wCAAwC,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,GAChB,MAAM,UAAU,CAAA;AAEjB,MAAM,gBAAgB,GAAmE;IACvF,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE;IACtD,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE;IAC5D,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE;CACzE,CAAA;AAED,MAAM,sBAAsB,GAA+C;IACzE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,SAAS;IACnC,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,WAAW;IACpC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW;IACtC,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,WAAW;CACrC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAA4E,CAAC,EAChG,UAAU,EACV,YAAY,EACZ,cAAc,EACd,OAAO,EACP,aAAa,EACb,YAAY,EACZ,MAAM,GACP,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAEvD,IAAI,gBAAgB,KAAK,SAAS,EAAE;QAClC,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,UAAU,CAAC,aAC9C,KAAC,oBAAoB,cACnB,KAAC,gBAAgB,IAAC,GAAG,EAAC,oBAAoB,EAAC,GAAG,EAAE,gBAAgB,CAAC,IAAI,GAAI,GACpD,EACvB,MAAC,eAAe,eACd,MAAC,iBAAiB,eAChB,KAAC,iBAAiB,cAAE,gBAAgB,CAAC,KAAK,GAAqB,EAC9D,YAAY,KAAK,YAAY,CAAC,MAAM,IAAI,cAAc,KAAK,cAAc,CAAC,QAAQ,IAAI,CACrF,KAAC,eAAe,0BAA0B,CAC3C,IACiB,EACpB,KAAC,eAAe,cAAE,OAAO,IAAI,EAAE,GAAmB,IAClC,EACjB,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,mBAAmB,uBAA2B,CAChD,CAAC,CAAC,CAAC,CACF,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IAAC,GAAG,EAAC,sBAAsB,EAAC,GAAG,EAAE,sBAAsB,CAAC,MAAM,CAAC,GAAI,GACnE,CACtB,IACK,CACT,CAAA;AACH,CAAC,CAAA"}

package/src/lib/gamification/question/styles.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export declare const Panel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const QuestionTypeIconWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const QuestionTypeIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const QuestionContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const QuestionTypeLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const QuestionSubject: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const QuestionActionTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const QuestionActionIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const QuestionStatusIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const QuestionTypeTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ExpiredQuestion: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/src/lib/gamification/question/styles.js

@@ -0,0 +1,80 @@
+import styled from '@emotion/styled';
+export const Panel = styled.div `
+  border-radius: 8px;
+  padding: 12px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background: #000;
+  }
+`;
+export const QuestionTypeIconWrap = styled.div `
+  padding-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const QuestionTypeIcon = styled.img `
+  width: 16px;
+  height: 16px;
+`;
+export const QuestionContent = styled.div `
+  font-weight: 700;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+export const QuestionTypeLabel = styled.div `
+  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-bottom: 5px;
+  text-transform: uppercase;
+`;
+export const QuestionSubject = styled.div `
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export const QuestionActionTitle = styled.button `
+  background-color: ${(props) => props.theme.COLORS.BLUE_QUESTION_ACTION_BTN};
+  border: none;
+  border-radius: 2px;
+  font-size: 8px;
+  padding: 6px;
+  height: 20px;
+  text-transform: uppercase;
+  color: #fff;
+  cursor: pointer;
+`;
+export const QuestionActionIcon = styled.button `
+  border: none;
+  font-size: 8px;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  cursor: pointer;
+`;
+export const QuestionStatusIcon = styled.img `
+  width: 16px;
+  height: 16px;
+`;
+export const QuestionTypeTitle = styled.span `
+  text-transform: uppercase;
+`;
+export const ExpiredQuestion = styled.span `
+  text-transform: uppercase;
+  border-left: ${(props) => `1px solid ${props.theme.COLORS.GREY_PRIMARY}`};
+  padding-left: 5px;
+  margin-left: 5px;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/question/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/question/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;sBAGT,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,mBAAmB;;;;;;;;CAQtE,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7C,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;WAChC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;;;;;;;CAOpD,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;WAC9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;CAK7C,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;sBAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,wBAAwB;;;;;;;;;CAS3E,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;CAQ9C,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG3C,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE3C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAA;;iBAEzB,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,EAAE;;;CAGzE,CAAA"}

package/src/lib/gamification/question-list/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PickHistory } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
+interface QuestionListProps {
+    questions: PickHistory[];
+    openQuestion: (questionId: string) => void;
+}
+export declare const QuestionList: React.FC<QuestionListProps>;
+export {};

package/src/lib/gamification/question-list/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Question } from '../question';
+import { Container, Title, ItemsContainer } from './styles';
+export const QuestionList = ({ questions, openQuestion }) => {
+    return (_jsxs(Container, { children: [_jsx(Title, { children: "PICK HISTORY" }), _jsx(ItemsContainer, { children: questions?.map((props) => (_jsx(Question, { openQuestion: openQuestion, ...props }, props.questionId))) })] }));
+};
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/question-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/question-list/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAO3D,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,EAAE;IACvF,OAAO,CACL,MAAC,SAAS,eACR,KAAC,KAAK,+BAAqB,EAC3B,KAAC,cAAc,cACZ,SAAS,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACzB,KAAC,QAAQ,IAAC,YAAY,EAAE,YAAY,KAA6B,KAAK,IAA3B,KAAK,CAAC,UAAU,CAAe,CAC3E,CAAC,GACa,IACP,CACb,CAAA;AACH,CAAC,CAAA"}

package/src/lib/gamification/question-list/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemsContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/lib/gamification/question-list/styles.js

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 160px);
+  border-radius: 13px;
+`;
+export const Title = styled.div `
+  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 8px;
+`;
+export const ItemsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 100%;
+
+  & > div {
+    margin-bottom: 8px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/question-list/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/question-list/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKlC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;WACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;;;;;CAKpD,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASvC,CAAA"}

package/src/lib/gamification/user-statistics/components/rank/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface RankProps {
+    indicator: string | number;
+    title: 'Friens rank' | 'Global rank';
+}
+export declare const Rank: React.FC<RankProps>;
+export {};

package/src/lib/gamification/user-statistics/components/rank/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Container, Indicator, Title } from './styles';
+export const Rank = ({ indicator, title }) => (_jsxs(Container, { children: [_jsx(Title, { children: title }), _jsx(Indicator, { children: indicator })] }));
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/user-statistics/components/rank/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/user-statistics/components/rank/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAOtD,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACjE,MAAC,SAAS,eACR,KAAC,KAAK,cAAE,KAAK,GAAS,EACtB,KAAC,SAAS,cAAE,SAAS,GAAa,IACxB,CACb,CAAA"}

package/src/lib/gamification/user-statistics/components/rank/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Indicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/lib/gamification/user-statistics/components/rank/styles.js

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  column-gap: 2px;
+  overflow: hidden;
+`;
+export const Title = styled.div `
+  width: 75px;
+`;
+export const Indicator = styled.div `
+  font-size: 14px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 25px;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/user-statistics/components/rank/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/user-statistics/components/rank/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMlC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE9B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOlC,CAAA"}

package/src/lib/gamification/user-statistics/components/statistics/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface StatisticsProps {
+    indicator: string | number;
+    title: 'Win streak' | 'Correct' | 'Incorrect' | 'Success rate';
+}
+export declare const Statistics: React.FC<StatisticsProps>;
+export {};

package/src/lib/gamification/user-statistics/components/statistics/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Container, Indicator } from './styles';
+export const Statistics = ({ indicator, title }) => (_jsxs(Container, { children: [_jsx(Indicator, { children: indicator }), _jsx("p", { children: title })] }));
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/user-statistics/components/statistics/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/user-statistics/components/statistics/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAO/C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC7E,MAAC,SAAS,eACR,KAAC,SAAS,cAAE,SAAS,GAAa,EAClC,sBAAI,KAAK,GAAK,IACJ,CACb,CAAA"}

package/src/lib/gamification/user-statistics/components/statistics/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Indicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/lib/gamification/user-statistics/components/statistics/styles.js

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  align-items: center;
+  text-align: center;
+`;
+export const Indicator = styled.div `
+  font-size: 18px;
+  color: #fff;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/user-statistics/components/statistics/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/user-statistics/components/statistics/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOlC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAA"}

package/src/lib/gamification/user-statistics/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface UserStatisticsProps {
+    avatar: string;
+    name: string;
+    points: number;
+    grade: string;
+    friendsRank: number;
+    globalRank: number;
+    winStreak: number;
+    correct: number;
+    incorrect: number;
+    successRate?: number;
+}
+export declare const UserStatistics: React.FC<UserStatisticsProps>;
+export {};