@streamlayer/react-ui 0.1.0

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { QuestionType } from '@streamlayer/sdk-web-types';
+interface VoteProps {
+    title: string;
+    questionId: string;
+    options: any[];
+    questionType: QuestionType;
+    feedbackMessages: any;
+    questionAnswered: boolean;
+    questionAnsweredCorrectly?: boolean;
+}
+export declare const Vote: React.FC<VoteProps>;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { QuestionType } from '@streamlayer/sdk-web-types';
+import checkIcon from '../../../assets/icons/icon-check.svg';
+import closeIcon from '../../../assets/icons/icon-close.svg';
+import { VotingOption } from './components/voting-option';
+import { Container, Title, Options, Feedback, FeedbackIcon, FeedbackTitle, FeedbackDescription } from './styles';
+export const Vote = ({ title, questionId, options, questionAnswered, feedbackMessages, questionAnsweredCorrectly, questionType, }) => {
+    return (_jsxs(Container, { children: [_jsx(Title, { children: title }), _jsx(Options, { children: options.map((props) => (_jsx(VotingOption, { questionId: questionId, ...props }, props.id))) }), questionAnswered && questionType === QuestionType.TRIVIA && (_jsxs(Feedback, { children: [_jsx(FeedbackIcon, { alt: "reaction-to-answer", src: questionAnsweredCorrectly ? checkIcon : closeIcon }), _jsxs("div", { children: [_jsx(FeedbackTitle, { children: questionAnsweredCorrectly
+                                    ? feedbackMessages.correctFeedback.title
+                                    : feedbackMessages.incorrectFeedback.title }), _jsx(FeedbackDescription, { children: questionAnsweredCorrectly
+                                    ? feedbackMessages.correctFeedback.description
+                                    : feedbackMessages.incorrectFeedback.description })] })] }))] }));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/vote/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEzD,OAAO,SAAS,MAAM,sCAAsC,CAAA;AAC5D,OAAO,SAAS,MAAM,sCAAsC,CAAA;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAWhH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,gBAAgB,EAChB,yBAAyB,EACzB,YAAY,GACb,EAAE,EAAE;IACH,OAAO,CACL,MAAC,SAAS,eACR,KAAC,KAAK,cAAE,KAAK,GAAS,EACtB,KAAC,OAAO,cACL,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,KAAC,YAAY,IAAC,UAAU,EAAE,UAAU,KAAqB,KAAK,IAAnB,KAAK,CAAC,EAAE,CAAe,CACnE,CAAC,GACM,EACT,gBAAgB,IAAI,YAAY,KAAK,YAAY,CAAC,MAAM,IAAI,CAC3D,MAAC,QAAQ,eACP,KAAC,YAAY,IAAC,GAAG,EAAC,oBAAoB,EAAC,GAAG,EAAE,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAiB,EAC9G,0BACE,KAAC,aAAa,cACX,yBAAyB;oCACxB,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,KAAK;oCACxC,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,GAC9B,EAChB,KAAC,mBAAmB,cACjB,yBAAyB;oCACxB,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,WAAW;oCAC9C,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,WAAW,GAC9B,IAClB,IACG,CACZ,IACS,CACb,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,29 @@
+/// <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 Options: 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 Feedback: 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 FeedbackIcon: 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 FeedbackTitle: 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 FeedbackDescription: 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/vote/styles.js

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  padding: 16px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-weight: 700;
+  font-size: 14px;
+
+  & > div:not(:last-child) {
+    margin-bottom: 16px;
+  }
+`;
+export const Title = styled.div `
+  font-size: 16px;
+`;
+export const Options = styled.div `
+  overflow-y: auto;
+  max-height: 220px;
+
+  & > div:not(:last-child) {
+    margin-bottom: 12px;
+  }
+`;
+export const Feedback = styled.div `
+  padding: 14px 12px 14px 16px;
+  display: flex;
+  align-items: center;
+`;
+export const FeedbackIcon = styled.img `
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+`;
+export const FeedbackTitle = styled.div `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16;
+  font-weight: 700;
+  margin-bottom: 10px;
+`;
+export const FeedbackDescription = styled.div `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14;
+  font-weight: 500;
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/vote/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;WAExB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;CAO7C,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE9B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOtC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ5C,CAAA"}

package/src/lib/theme/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StreamLayerThemeProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/src/lib/theme/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { ThemeProvider } from '@emotion/react';
+import { theme } from './theme';
+export const StreamLayerThemeProvider = ({ children }) => (_jsx(ThemeProvider, { theme: theme, children: children }));
+//# sourceMappingURL=index.js.map

package/src/lib/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/react-ui/src/lib/theme/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,MAAM,CAAC,MAAM,wBAAwB,GAA4C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACjG,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,CACxD,CAAA"}

package/src/lib/theme/theme.d.ts

@@ -0,0 +1,41 @@
+type COLORS_VARIABLES = keyof (typeof theme)['COLORS'];
+type FONT_VARIABLES = keyof (typeof theme)['FONT'];
+export interface EmotionTheme {
+    COLORS: Record<COLORS_VARIABLES, string>;
+    FONT: Record<FONT_VARIABLES, string>;
+}
+export declare const theme: {
+    COLORS: {
+        BG_TRANSPARENT: string;
+        BG_TRANSPARENT_VOTE_CONTAINER: string;
+        BG_TRANSPARENT_ITEM: string;
+        BG_TRANSPARENT_ITEM_VOTE: string;
+        BG_TRANSPARENT_ITEM_SUCCESS: string;
+        BG_TRANSPARENT_ITEM_ERROR: string;
+        BG_TRANSPARENT_VOTE_PROGRESS: string;
+        BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: string;
+        BG_TRANSPARENT_VOTE_PROGRESS_ERROR: string;
+        BG_TRANSPARENT_USER_CONTAINER: string;
+        BLUE_PRIMARY: string;
+        RED_PRIMARY: string;
+        BLUE_QUESTION_ACTION_BTN: string;
+        WHITE: string;
+        GREY_1: string;
+        GREY_2: string;
+        GREY_3: string;
+        GREY_4: string;
+        BLACK_1: string;
+        GREEN_1: string;
+        RED_1: string;
+        RED_2: string;
+        GREY_PRIMARY: string;
+        DIVIDER_COLOR_PRIMARY: string;
+        DIVIDER_COLOR_SECONDARY: string;
+        GREEN_PRIMARY_BTN: string;
+    };
+    FONT: {
+        FAMILY: string;
+        COLOR: string;
+    };
+};
+export {};

package/src/lib/theme/theme.js

@@ -0,0 +1,35 @@
+export const theme = {
+    COLORS: {
+        BG_TRANSPARENT: 'rgba(0,0,0, .8)',
+        BG_TRANSPARENT_VOTE_CONTAINER: 'rgba(10, 14, 19, 0.8)',
+        BG_TRANSPARENT_ITEM: 'rgba(0, 0, 0, 0.7)',
+        BG_TRANSPARENT_ITEM_VOTE: 'rgba(255, 255, 255, 0.1)',
+        BG_TRANSPARENT_ITEM_SUCCESS: 'rgba(0, 139, 251, 0.2)',
+        BG_TRANSPARENT_ITEM_ERROR: 'rgba(205, 37, 37, 0.2)',
+        BG_TRANSPARENT_VOTE_PROGRESS: 'rgba(255, 255, 255, 0.2)',
+        BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: 'rgba(60, 139, 251, 0.5)',
+        BG_TRANSPARENT_VOTE_PROGRESS_ERROR: 'rgba(205, 37, 37, 0.5)',
+        BG_TRANSPARENT_USER_CONTAINER: 'rgba(255, 255, 255, 0.05)',
+        BLUE_PRIMARY: '#1589EE',
+        RED_PRIMARY: '#CD2525',
+        BLUE_QUESTION_ACTION_BTN: '#1589ee',
+        WHITE: '#FFFFFF',
+        GREY_1: '#909395',
+        GREY_2: '#22262b',
+        GREY_3: '#2d3135',
+        GREY_4: '#53565a',
+        BLACK_1: '#161a1f',
+        GREEN_1: '#F7B801',
+        RED_1: '#A30000',
+        RED_2: '#FF4170',
+        GREY_PRIMARY: '#909395',
+        DIVIDER_COLOR_PRIMARY: '#2d3135',
+        DIVIDER_COLOR_SECONDARY: '#53565a',
+        GREEN_PRIMARY_BTN: '#009B77',
+    },
+    FONT: {
+        FAMILY: 'Roboto, sans-serif',
+        COLOR: '#fff',
+    },
+};
+//# sourceMappingURL=theme.js.map

package/src/lib/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../../../packages/react-ui/src/lib/theme/theme.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE;QACN,cAAc,EAAE,iBAAiB;QACjC,6BAA6B,EAAE,uBAAuB;QACtD,mBAAmB,EAAE,oBAAoB;QACzC,wBAAwB,EAAE,0BAA0B;QACpD,2BAA2B,EAAE,wBAAwB;QACrD,yBAAyB,EAAE,wBAAwB;QACnD,4BAA4B,EAAE,0BAA0B;QACxD,oCAAoC,EAAE,yBAAyB;QAC/D,kCAAkC,EAAE,wBAAwB;QAC5D,6BAA6B,EAAE,2BAA2B;QAC1D,YAAY,EAAE,SAAS;QACvB,WAAW,EAAE,SAAS;QACtB,wBAAwB,EAAE,SAAS;QACnC,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,SAAS;QACvB,qBAAqB,EAAE,SAAS;QAChC,uBAAuB,EAAE,SAAS;QAClC,iBAAiB,EAAE,SAAS;KAC7B;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,oBAAoB;QAC5B,KAAK,EAAE,MAAM;KACd;CACF,CAAA"}

package/src/utils/login.d.ts

@@ -0,0 +1,2 @@
+export declare const requestLoginCode: (phone: string) => Promise<boolean>;
+export declare const login: (phone: string, code: string) => Promise<string | undefined>;

package/src/utils/login.js

@@ -0,0 +1,20 @@
+import { createGrpcWebTransport } from '@bufbuild/connect-web';
+import { createPromiseClient } from '@connectrpc/connect';
+import { Users } from '@streamlayer/sl-eslib/users/users_connect';
+export const requestLoginCode = async (phone) => {
+    const transport = createGrpcWebTransport({
+        baseUrl: process.env.NX_GRPC_HOST || 'https://grpc-web.next.streamlayer.io:443',
+    });
+    const userClient = createPromiseClient(Users, transport);
+    await userClient.requestPassword({ id: phone });
+    return true;
+};
+export const login = async (phone, code) => {
+    const transport = createGrpcWebTransport({
+        baseUrl: process.env.NX_GRPC_HOST || 'https://grpc-web.next.streamlayer.io:443',
+    });
+    const userClient = createPromiseClient(Users, transport);
+    const res = await userClient.login({ id: phone, password: code });
+    return res?.meta?.jwt;
+};
+//# sourceMappingURL=login.js.map

package/src/utils/login.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"login.js","sourceRoot":"","sources":["../../../../../packages/react-ui/src/utils/login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAA;AAEjE,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;IACtD,MAAM,SAAS,GAAG,sBAAsB,CAAC;QACvC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,IAAI,0CAA0C;KAChF,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,mBAAmB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IAExD,MAAM,UAAU,CAAC,eAAe,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAA;IAE/C,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,EAAE,KAAa,EAAE,IAAY,EAAE,EAAE;IACzD,MAAM,SAAS,GAAG,sBAAsB,CAAC;QACvC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,IAAI,0CAA0C;KAChF,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,mBAAmB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IAExD,MAAM,GAAG,GAAG,MAAM,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAA;IAEjE,OAAO,GAAG,EAAE,IAAI,EAAE,GAAG,CAAA;AACvB,CAAC,CAAA"}