@streamlayer/react-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/package.json +38 -0
- package/src/index.d.ts +10 -0
- package/src/index.js +11 -0
- package/src/index.js.map +1 -0
- package/src/lib/demo/Gamification.d.ts +7 -0
- package/src/lib/demo/Gamification.js +21 -0
- package/src/lib/demo/Gamification.js.map +1 -0
- package/src/lib/demo/Login.d.ts +5 -0
- package/src/lib/demo/Login.js +9 -0
- package/src/lib/demo/Login.js.map +1 -0
- package/src/lib/demo/components/InPlayGame.d.ts +6 -0
- package/src/lib/demo/components/InPlayGame.js +6 -0
- package/src/lib/demo/components/InPlayGame.js.map +1 -0
- package/src/lib/demo/components/Notifications.d.ts +6 -0
- package/src/lib/demo/components/Notifications.js +37 -0
- package/src/lib/demo/components/Notifications.js.map +1 -0
- package/src/lib/demo/components/Question.d.ts +7 -0
- package/src/lib/demo/components/Question.js +61 -0
- package/src/lib/demo/components/Question.js.map +1 -0
- package/src/lib/demo/components/QuestionsList.d.ts +6 -0
- package/src/lib/demo/components/QuestionsList.js +13 -0
- package/src/lib/demo/components/QuestionsList.js.map +1 -0
- package/src/lib/demo/components/UserSummary.d.ts +5 -0
- package/src/lib/demo/components/UserSummary.js +11 -0
- package/src/lib/demo/components/UserSummary.js.map +1 -0
- package/src/lib/demo/components/index.d.ts +5 -0
- package/src/lib/demo/components/index.js +6 -0
- package/src/lib/demo/components/index.js.map +1 -0
- package/src/lib/demo/index.d.ts +5 -0
- package/src/lib/demo/index.js +19 -0
- package/src/lib/demo/index.js.map +1 -0
- package/src/lib/demo/styles.d.ts +13 -0
- package/src/lib/demo/styles.js +14 -0
- package/src/lib/demo/styles.js.map +1 -0
- package/src/lib/gamification/inapp/index.d.ts +13 -0
- package/src/lib/gamification/inapp/index.js +12 -0
- package/src/lib/gamification/inapp/index.js.map +1 -0
- package/src/lib/gamification/inapp/styles.d.ts +37 -0
- package/src/lib/gamification/inapp/styles.js +74 -0
- package/src/lib/gamification/inapp/styles.js.map +1 -0
- package/src/lib/gamification/login/index.d.ts +6 -0
- package/src/lib/gamification/login/index.js +49 -0
- package/src/lib/gamification/login/index.js.map +1 -0
- package/src/lib/gamification/login/styles.d.ts +29 -0
- package/src/lib/gamification/login/styles.js +67 -0
- package/src/lib/gamification/login/styles.js.map +1 -0
- package/src/lib/gamification/onboarding/index.d.ts +6 -0
- package/src/lib/gamification/onboarding/index.js +4 -0
- package/src/lib/gamification/onboarding/index.js.map +1 -0
- package/src/lib/gamification/onboarding/styles.d.ts +21 -0
- package/src/lib/gamification/onboarding/styles.js +41 -0
- package/src/lib/gamification/onboarding/styles.js.map +1 -0
- package/src/lib/gamification/question/index.d.ts +5 -0
- package/src/lib/gamification/question/index.js +28 -0
- package/src/lib/gamification/question/index.js.map +1 -0
- package/src/lib/gamification/question/styles.d.ts +45 -0
- package/src/lib/gamification/question/styles.js +80 -0
- package/src/lib/gamification/question/styles.js.map +1 -0
- package/src/lib/gamification/question-list/index.d.ts +8 -0
- package/src/lib/gamification/question-list/index.js +7 -0
- package/src/lib/gamification/question-list/index.js.map +1 -0
- package/src/lib/gamification/question-list/styles.d.ts +13 -0
- package/src/lib/gamification/question-list/styles.js +25 -0
- package/src/lib/gamification/question-list/styles.js.map +1 -0
- package/src/lib/gamification/user-statistics/components/rank/index.d.ts +7 -0
- package/src/lib/gamification/user-statistics/components/rank/index.js +4 -0
- package/src/lib/gamification/user-statistics/components/rank/index.js.map +1 -0
- package/src/lib/gamification/user-statistics/components/rank/styles.d.ts +13 -0
- package/src/lib/gamification/user-statistics/components/rank/styles.js +20 -0
- package/src/lib/gamification/user-statistics/components/rank/styles.js.map +1 -0
- package/src/lib/gamification/user-statistics/components/statistics/index.d.ts +7 -0
- package/src/lib/gamification/user-statistics/components/statistics/index.js +4 -0
- package/src/lib/gamification/user-statistics/components/statistics/index.js.map +1 -0
- package/src/lib/gamification/user-statistics/components/statistics/styles.d.ts +9 -0
- package/src/lib/gamification/user-statistics/components/statistics/styles.js +14 -0
- package/src/lib/gamification/user-statistics/components/statistics/styles.js.map +1 -0
- package/src/lib/gamification/user-statistics/index.d.ts +15 -0
- package/src/lib/gamification/user-statistics/index.js +14 -0
- package/src/lib/gamification/user-statistics/index.js.map +1 -0
- package/src/lib/gamification/user-statistics/styles.d.ts +57 -0
- package/src/lib/gamification/user-statistics/styles.js +98 -0
- package/src/lib/gamification/user-statistics/styles.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-header/components/points/index.d.ts +6 -0
- package/src/lib/gamification/vote/components/voting-header/components/points/index.js +4 -0
- package/src/lib/gamification/vote/components/voting-header/components/points/index.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-header/components/points/styles.d.ts +21 -0
- package/src/lib/gamification/vote/components/voting-header/components/points/styles.js +30 -0
- package/src/lib/gamification/vote/components/voting-header/components/points/styles.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-header/components/timer/index.d.ts +8 -0
- package/src/lib/gamification/vote/components/voting-header/components/timer/index.js +19 -0
- package/src/lib/gamification/vote/components/voting-header/components/timer/index.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-header/components/timer/styles.d.ts +7 -0
- package/src/lib/gamification/vote/components/voting-header/components/timer/styles.js +6 -0
- package/src/lib/gamification/vote/components/voting-header/components/timer/styles.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-header/index.d.ts +12 -0
- package/src/lib/gamification/vote/components/voting-header/index.js +17 -0
- package/src/lib/gamification/vote/components/voting-header/index.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-header/styles.d.ts +35 -0
- package/src/lib/gamification/vote/components/voting-header/styles.js +54 -0
- package/src/lib/gamification/vote/components/voting-header/styles.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-option/index.d.ts +16 -0
- package/src/lib/gamification/vote/components/voting-option/index.js +11 -0
- package/src/lib/gamification/vote/components/voting-option/index.js.map +1 -0
- package/src/lib/gamification/vote/components/voting-option/styles.d.ts +49 -0
- package/src/lib/gamification/vote/components/voting-option/styles.js +85 -0
- package/src/lib/gamification/vote/components/voting-option/styles.js.map +1 -0
- package/src/lib/gamification/vote/index.d.ts +13 -0
- package/src/lib/gamification/vote/index.js +14 -0
- package/src/lib/gamification/vote/index.js.map +1 -0
- package/src/lib/gamification/vote/styles.d.ts +29 -0
- package/src/lib/gamification/vote/styles.js +50 -0
- package/src/lib/gamification/vote/styles.js.map +1 -0
- package/src/lib/theme/index.d.ts +4 -0
- package/src/lib/theme/index.js +5 -0
- package/src/lib/theme/index.js.map +1 -0
- package/src/lib/theme/theme.d.ts +41 -0
- package/src/lib/theme/theme.js +35 -0
- package/src/lib/theme/theme.js.map +1 -0
- package/src/utils/login.d.ts +2 -0
- package/src/utils/login.js +20 -0
- package/src/utils/login.js.map +1 -0
package/README.md
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@streamlayer/react-ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./src/index.js",
|
|
6
|
+
"typings": "./src/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
"import": "./src/main.js",
|
|
9
|
+
"default": "./src/main.js"
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"src/"
|
|
13
|
+
],
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"@emotion/react": "11.11.1",
|
|
16
|
+
"@emotion/styled": "11.11.0",
|
|
17
|
+
"@streamlayer/feature-gamification": "workspace:^",
|
|
18
|
+
"@streamlayer/sdk-web": "workspace:^",
|
|
19
|
+
"@streamlayer/sdk-web-anonymous-auth": "workspace:^",
|
|
20
|
+
"@streamlayer/sdk-web-core": "workspace:^",
|
|
21
|
+
"@streamlayer/sdk-web-interfaces": "workspace:^",
|
|
22
|
+
"@streamlayer/sdk-web-types": "workspace:^",
|
|
23
|
+
"react": "18.2.0",
|
|
24
|
+
"react-countdown-circle-timer": "^3.2.1",
|
|
25
|
+
"react-digit-input": "^2.1.0",
|
|
26
|
+
"react-dom": "18.2.0",
|
|
27
|
+
"react-phone-number-input": "^3.3.6"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@nanostores/react": "^0.7.1",
|
|
31
|
+
"@storybook/addon-styling": "^1.3.7",
|
|
32
|
+
"@storybook/jest": "~0.2.3",
|
|
33
|
+
"@storybook/react": "^7.2.1",
|
|
34
|
+
"@storybook/testing-library": "~0.2.0",
|
|
35
|
+
"vite-svg-loader": "^4.0.0"
|
|
36
|
+
},
|
|
37
|
+
"module": "./src/index.js"
|
|
38
|
+
}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export * from './lib/gamification/inapp';
|
|
2
|
+
export * from './lib/gamification/login';
|
|
3
|
+
export * from './lib/gamification/onboarding';
|
|
4
|
+
export * from './lib/gamification/question';
|
|
5
|
+
export * from './lib/gamification/question-list';
|
|
6
|
+
export * from './lib/gamification/user-statistics';
|
|
7
|
+
export * from './lib/gamification/vote';
|
|
8
|
+
export * from './lib/demo';
|
|
9
|
+
export * from './lib/theme';
|
|
10
|
+
export * from './lib/theme/theme';
|
package/src/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export * from './lib/gamification/inapp';
|
|
2
|
+
export * from './lib/gamification/login';
|
|
3
|
+
export * from './lib/gamification/onboarding';
|
|
4
|
+
export * from './lib/gamification/question';
|
|
5
|
+
export * from './lib/gamification/question-list';
|
|
6
|
+
export * from './lib/gamification/user-statistics';
|
|
7
|
+
export * from './lib/gamification/vote';
|
|
8
|
+
export * from './lib/demo';
|
|
9
|
+
export * from './lib/theme';
|
|
10
|
+
export * from './lib/theme/theme';
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/react-ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kCAAkC,CAAA;AAChD,cAAc,oCAAoC,CAAA;AAClD,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
|
|
3
|
+
import type { Gamification } from '@streamlayer/feature-gamification';
|
|
4
|
+
export declare const GamificationComponent: React.FC<{
|
|
5
|
+
gamification: Gamification;
|
|
6
|
+
sdk: StreamLayerSDK;
|
|
7
|
+
}>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useStore } from '@nanostores/react';
|
|
3
|
+
import { UserSummary, QuestionsList, Question, Notifications, InPlayGame } from './components';
|
|
4
|
+
import { DemoContainer, DemoContainerNotifications, UserStatisticsContainer } from './styles';
|
|
5
|
+
export const GamificationComponent = ({ gamification, sdk, }) => {
|
|
6
|
+
const onbordingComplete = useStore(gamification.onbordingComplete);
|
|
7
|
+
if (!onbordingComplete) {
|
|
8
|
+
return (_jsx(DemoContainer, { children: _jsx(InPlayGame, { action: gamification.submitInplay }) }));
|
|
9
|
+
}
|
|
10
|
+
const openQuestion = (questionId) => {
|
|
11
|
+
gamification.openQuestion(questionId);
|
|
12
|
+
};
|
|
13
|
+
const closeQuestion = () => {
|
|
14
|
+
gamification.closeQuestion();
|
|
15
|
+
};
|
|
16
|
+
const vote = (questionId, answerId) => {
|
|
17
|
+
void gamification.submitAnswer(questionId, answerId);
|
|
18
|
+
};
|
|
19
|
+
return (_jsxs(DemoContainer, { children: [_jsx(DemoContainerNotifications, { children: _jsx(Notifications, { notificationsStore: sdk.getNotificationsStore(), openQuestion: openQuestion }) }), _jsx(UserStatisticsContainer, { children: gamification.userSummary && _jsx(UserSummary, { store: gamification.userSummary.getStore() }) }), gamification.questions && (_jsx(QuestionsList, { openQuestion: openQuestion, store: gamification.questions.getStore() })), gamification.openedQuestion && (_jsx(Question, { closeQuestion: closeQuestion, vote: vote, store: gamification.openedQuestion.getStore() }))] }));
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=Gamification.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Gamification.js","sourceRoot":"","sources":["../../../../../../packages/react-ui/src/lib/demo/Gamification.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9F,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAE7F,MAAM,CAAC,MAAM,qBAAqB,GAAkE,CAAC,EACnG,YAAY,EACZ,GAAG,GACJ,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,QAAQ,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;IAElE,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,CACL,KAAC,aAAa,cACZ,KAAC,UAAU,IAAC,MAAM,EAAE,YAAY,CAAC,YAAY,GAAI,GACnC,CACjB,CAAA;KACF;IAED,MAAM,YAAY,GAAG,CAAC,UAAkB,EAAE,EAAE;QAC1C,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;IACvC,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,YAAY,CAAC,aAAa,EAAE,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,CAAC,UAAkB,EAAE,QAAgB,EAAE,EAAE;QACpD,KAAK,YAAY,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;IACtD,CAAC,CAAA;IAED,OAAO,CACL,MAAC,aAAa,eACZ,KAAC,0BAA0B,cACzB,KAAC,aAAa,IAAC,kBAAkB,EAAE,GAAG,CAAC,qBAAqB,EAAE,EAAE,YAAY,EAAE,YAAY,GAAI,GACnE,EAC7B,KAAC,uBAAuB,cACrB,YAAY,CAAC,WAAW,IAAI,KAAC,WAAW,IAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAI,GAChE,EACzB,YAAY,CAAC,SAAS,IAAI,CACzB,KAAC,aAAa,IAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAI,CACxF,EACA,YAAY,CAAC,cAAc,IAAI,CAC9B,KAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,cAAc,CAAC,QAAQ,EAAE,GAAI,CACtG,IACa,CACjB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { Login } from '../gamification/login';
|
|
3
|
+
export const LoginComponent = ({ sdk }) => {
|
|
4
|
+
const login = async (token) => {
|
|
5
|
+
await sdk.authorizationBypass('streamlayer:streamlayer', token);
|
|
6
|
+
};
|
|
7
|
+
return _jsx(Login, { login: login, anonymousLogin: sdk.anonymousAuthorization });
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=Login.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Login.js","sourceRoot":"","sources":["../../../../../../packages/react-ui/src/lib/demo/Login.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAsC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC3E,MAAM,KAAK,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;QACpC,MAAM,GAAG,CAAC,mBAAmB,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAA;IACjE,CAAC,CAAA;IAED,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,CAAC,sBAAsB,GAAI,CAAA;AAC5E,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InPlayGame.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/demo/components/InPlayGame.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAM1D,MAAM,CAAC,MAAM,UAAU,GAA6B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACjE,OAAO,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,GAAI,CAAA;AACvC,CAAC,CAAA"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useStore } from '@nanostores/react';
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { InApp } from '../../gamification/inapp';
|
|
5
|
+
export const Notifications = ({ notificationsStore, openQuestion }) => {
|
|
6
|
+
const timeout = useRef();
|
|
7
|
+
const [lastNotification, setLastNotification] = useState();
|
|
8
|
+
const notifications = useStore(notificationsStore);
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
if (notifications) {
|
|
11
|
+
setLastNotification(notifications[notifications.length - 1]?.data);
|
|
12
|
+
timeout.current = setTimeout(() => {
|
|
13
|
+
setLastNotification(undefined);
|
|
14
|
+
}, 5000);
|
|
15
|
+
}
|
|
16
|
+
return () => {
|
|
17
|
+
if (timeout.current) {
|
|
18
|
+
clearTimeout(timeout.current);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
}, [notifications]);
|
|
22
|
+
if (!lastNotification?.question || !lastNotification?.notification) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
const closeInApp = () => {
|
|
26
|
+
if (timeout.current) {
|
|
27
|
+
clearTimeout(timeout.current);
|
|
28
|
+
}
|
|
29
|
+
setLastNotification(undefined);
|
|
30
|
+
};
|
|
31
|
+
const openVoiting = () => {
|
|
32
|
+
closeInApp();
|
|
33
|
+
openQuestion(lastNotification.question.id);
|
|
34
|
+
};
|
|
35
|
+
return (_jsx(InApp, { openVoiting: openVoiting, closeInApp: closeInApp, title: lastNotification.notification.title, icon: lastNotification.notification.image, color: lastNotification.notification.indicatorColor }));
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=Notifications.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Notifications.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/demo/components/Notifications.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,MAAM,CAAC,MAAM,aAAa,GAGrB,CAAC,EAAE,kBAAkB,EAAE,YAAY,EAAE,EAAE,EAAE;IAC5C,MAAM,OAAO,GAAG,MAAM,EAAkB,CAAA;IACxC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAAoC,CAAA;IAE5F,MAAM,aAAa,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,EAAE;YACjB,mBAAmB,CAAC,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;YAElE,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAChC,mBAAmB,CAAC,SAAS,CAAC,CAAA;YAChC,CAAC,EAAE,IAAI,CAAC,CAAA;SACT;QAED,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,CAAC,OAAO,EAAE;gBACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;aAC9B;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAI,CAAC,gBAAgB,EAAE,QAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,EAAE;QAClE,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;SAC9B;QAED,mBAAmB,CAAC,SAAS,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,UAAU,EAAE,CAAA;QACZ,YAAY,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC5C,CAAC,CAAA;IAED,OAAO,CACL,KAAC,KAAK,IACJ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC,KAAK,EAC1C,IAAI,EAAE,gBAAgB,CAAC,YAAY,CAAC,KAAK,EACzC,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC,cAAc,GACnD,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { Gamification } from '@streamlayer/feature-gamification';
|
|
3
|
+
export declare const Question: React.FC<{
|
|
4
|
+
store: ReturnType<Exclude<Gamification['openedQuestion'], undefined>['getStore']>;
|
|
5
|
+
closeQuestion: () => void;
|
|
6
|
+
vote: (questionId: string, answerId: string) => void;
|
|
7
|
+
}>;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { useStore } from '@nanostores/react';
|
|
4
|
+
import { useState, useCallback, useMemo } from 'react';
|
|
5
|
+
import { Vote } from '../../gamification/vote';
|
|
6
|
+
import { VotingHeader } from '../../gamification/vote/components/voting-header';
|
|
7
|
+
import iconSponsorship from '../../../assets/icons/fedex.svg';
|
|
8
|
+
const QuestionContainer = styled.div `
|
|
9
|
+
position: absolute;
|
|
10
|
+
top: 0;
|
|
11
|
+
background: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
|
|
20
|
+
> div {
|
|
21
|
+
width: 100%;
|
|
22
|
+
background: #000;
|
|
23
|
+
animation: slidein 0.3s ease-in;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@keyframes slidein {
|
|
27
|
+
from {
|
|
28
|
+
transform: translateX(-100%);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
to {
|
|
32
|
+
transform: translateX(0);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
36
|
+
export const Question = ({ store, closeQuestion, vote }) => {
|
|
37
|
+
const { data: openedQuestion } = useStore(store);
|
|
38
|
+
const [answerTimeExpired, setAnswerTimeExpired] = useState(false);
|
|
39
|
+
const setTimeToExpire = useCallback((flag) => {
|
|
40
|
+
setAnswerTimeExpired(flag);
|
|
41
|
+
}, [setAnswerTimeExpired]);
|
|
42
|
+
const questionAnswered = useMemo(() => openedQuestion?.answers.find((answer) => answer.youVoted === true), [openedQuestion]);
|
|
43
|
+
const hasCorrectAnswer = useMemo(() => !!openedQuestion?.answers.find((answer) => answer.correct === true), [openedQuestion]);
|
|
44
|
+
if (!openedQuestion) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
return (_jsx(QuestionContainer, { children: _jsxs("div", { children: [_jsx(VotingHeader, { points: questionAnswered?.points || 0, questionAnswered: !!questionAnswered, questionAnsweredCorrectly: questionAnswered?.correct, logo: iconSponsorship, closeQuestion: closeQuestion, setTimeToExpire: setTimeToExpire, questionType: openedQuestion.type }), _jsx("div", { children: _jsx(Vote, { title: openedQuestion.subject, feedbackMessages: openedQuestion.options?.options.value, questionType: openedQuestion.type, questionId: openedQuestion.id, questionAnswered: !!questionAnswered, questionAnsweredCorrectly: questionAnswered?.correct, options: openedQuestion.answers.map((answer) => ({
|
|
48
|
+
id: answer.id,
|
|
49
|
+
title: answer.text,
|
|
50
|
+
icon: answer.icon,
|
|
51
|
+
type: openedQuestion.type,
|
|
52
|
+
correct: answer.correct,
|
|
53
|
+
percentage: answer.percentage,
|
|
54
|
+
answered: answer.youVoted,
|
|
55
|
+
disabled: !!questionAnswered || openedQuestion.marketClosed || answerTimeExpired,
|
|
56
|
+
questionAnswered: !!questionAnswered,
|
|
57
|
+
hasCorrectAnswer,
|
|
58
|
+
onVote: vote,
|
|
59
|
+
})) }) })] }) }));
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=Question.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Question.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/demo/components/Question.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { Gamification } from '@streamlayer/feature-gamification';
|
|
3
|
+
export declare const QuestionsList: React.FC<{
|
|
4
|
+
store: ReturnType<Exclude<Gamification['questions'], undefined>['getStore']>;
|
|
5
|
+
openQuestion: (questionId: string) => void;
|
|
6
|
+
}>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useStore } from '@nanostores/react';
|
|
3
|
+
import { QuestionList } from '../../gamification/question-list';
|
|
4
|
+
export const QuestionsList = ({ store, openQuestion }) => {
|
|
5
|
+
const { data: questions } = useStore(store);
|
|
6
|
+
if (!questions) {
|
|
7
|
+
return _jsx("div", { children: "wait questions..." });
|
|
8
|
+
}
|
|
9
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
10
|
+
// @ts-ignore
|
|
11
|
+
return _jsx(QuestionList, { openQuestion: openQuestion, questions: questions });
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=QuestionsList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuestionsList.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/demo/components/QuestionsList.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAE/D,MAAM,CAAC,MAAM,aAAa,GAGrB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE;IAC/B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,8CAA4B,CAAA;KACpC;IAED,6DAA6D;IAC7D,aAAa;IACb,OAAO,KAAC,YAAY,IAAC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CAAA;AAC3E,CAAC,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useStore } from '@nanostores/react';
|
|
3
|
+
import { UserStatistics } from '../../gamification/user-statistics';
|
|
4
|
+
export const UserSummary = ({ store }) => {
|
|
5
|
+
const { data: user } = useStore(store);
|
|
6
|
+
if (!user?.summary) {
|
|
7
|
+
return _jsx("div", { children: "wait user..." });
|
|
8
|
+
}
|
|
9
|
+
return (_jsx(UserStatistics, { avatar: user.summary.avatar, name: user.summary.name, points: user.summary.points, grade: '0', friendsRank: user.summary.friendsRank, globalRank: user.summary.rank, winStreak: user.summary.streak, correct: user.summary.correct, incorrect: user.summary.incorrect, successRate: user.percentage?.average }));
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=UserSummary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UserSummary.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/demo/components/UserSummary.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAEnE,MAAM,CAAC,MAAM,WAAW,GAEnB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEtC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE;QAClB,OAAO,yCAAuB,CAAA;KAC/B;IAED,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACvB,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAC3B,KAAK,EAAE,GAAG,EACV,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAC7B,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EACjC,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,GACrC,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/demo/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useStore } from '@nanostores/react';
|
|
3
|
+
import { GamificationComponent } from './Gamification';
|
|
4
|
+
import { LoginComponent } from './Login';
|
|
5
|
+
export const Demo = ({ sdk }) => {
|
|
6
|
+
const user = useStore(sdk.getUserStore());
|
|
7
|
+
if (user.loading) {
|
|
8
|
+
return _jsx("div", { children: "authentificating..." });
|
|
9
|
+
}
|
|
10
|
+
if (!user.data) {
|
|
11
|
+
return _jsx(LoginComponent, { sdk: sdk });
|
|
12
|
+
}
|
|
13
|
+
const gamification = sdk.getFeatures().get('games');
|
|
14
|
+
if (!gamification) {
|
|
15
|
+
return _jsx("div", { children: "wait gamification..." });
|
|
16
|
+
}
|
|
17
|
+
return _jsx(GamificationComponent, { gamification: gamification, sdk: sdk });
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/react-ui/src/lib/demo/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAExC,MAAM,CAAC,MAAM,IAAI,GAAsC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IACjE,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAA;IAEzC,IAAI,IAAI,CAAC,OAAO,EAAE;QAChB,OAAO,gDAA8B,CAAA;KACtC;IAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACd,OAAO,KAAC,cAAc,IAAC,GAAG,EAAE,GAAG,GAAI,CAAA;KACpC;IAED,MAAM,YAAY,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,OAAO,CAAiB,CAAA;IAEnE,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,iDAA+B,CAAA;KACvC;IAED,OAAO,KAAC,qBAAqB,IAAC,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,GAAI,CAAA;AACxE,CAAC,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const DemoContainer: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const DemoContainerNotifications: import("@emotion/styled").StyledComponent<{
|
|
7
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
+
as?: import("react").ElementType<any> | undefined;
|
|
9
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
|
+
export declare const UserStatisticsContainer: import("@emotion/styled").StyledComponent<{
|
|
11
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
+
as?: import("react").ElementType<any> | undefined;
|
|
13
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import styled from '@emotion/styled';
|
|
2
|
+
export const DemoContainer = styled.div `
|
|
3
|
+
position: relative;
|
|
4
|
+
height: 100%;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
`;
|
|
7
|
+
export const DemoContainerNotifications = styled.div `
|
|
8
|
+
position: absolute;
|
|
9
|
+
width: 100%;
|
|
10
|
+
`;
|
|
11
|
+
export const UserStatisticsContainer = styled.div `
|
|
12
|
+
margin-bottom: 15px;
|
|
13
|
+
`;
|
|
14
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../packages/react-ui/src/lib/demo/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnD,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEhD,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface InAppProps {
|
|
3
|
+
title: string;
|
|
4
|
+
icon: string;
|
|
5
|
+
color?: string;
|
|
6
|
+
imagePosition?: string;
|
|
7
|
+
imageMode?: string;
|
|
8
|
+
body?: string;
|
|
9
|
+
openVoiting: () => void;
|
|
10
|
+
closeInApp: () => void;
|
|
11
|
+
}
|
|
12
|
+
export declare const InApp: React.FC<InAppProps>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import closeIcon from '../../../assets/icons/icon-exit.svg';
|
|
4
|
+
import { Container, Content, IconWrap, Icon, TitleWrap, Title, CloseBtnWrap, CloseBtn, CloseIcon } from './styles';
|
|
5
|
+
export const InApp = ({ title = '', icon, color, openVoiting, closeInApp }) => {
|
|
6
|
+
const _closeInApp = useCallback((e) => {
|
|
7
|
+
e.stopPropagation();
|
|
8
|
+
closeInApp();
|
|
9
|
+
}, [closeInApp]);
|
|
10
|
+
return (_jsxs(Container, { onClick: openVoiting, children: [_jsx(IconWrap, { style: color ? { backgroundColor: color } : {}, children: !!icon && _jsx(Icon, { alt: "in-app-icon", src: icon }) }), _jsxs(Content, { children: [_jsx(TitleWrap, { children: _jsx(Title, { id: "in-app-title", children: title }) }), _jsx(CloseBtnWrap, { children: _jsx(CloseBtn, { onClick: _closeInApp, children: _jsx(CloseIcon, { alt: "close-in-app-icon", src: closeIcon }) }) })] })] }));
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/inapp/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,SAAS,MAAM,qCAAqC,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAalH,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,EAAE;IAClG,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,CAAsC,EAAE,EAAE;QACzC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,UAAU,EAAE,CAAA;IACd,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAA;IAED,OAAO,CACL,MAAC,SAAS,IAAC,OAAO,EAAE,WAAW,aAC7B,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,YACrD,CAAC,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,GAAG,EAAC,aAAa,EAAC,GAAG,EAAE,IAAI,GAAI,GACvC,EACX,MAAC,OAAO,eACN,KAAC,SAAS,cACR,KAAC,KAAK,IAAC,EAAE,EAAC,cAAc,YAAE,KAAK,GAAS,GAC9B,EACZ,KAAC,YAAY,cACX,KAAC,QAAQ,IAAC,OAAO,EAAE,WAAW,YAC5B,KAAC,SAAS,IAAC,GAAG,EAAC,mBAAmB,EAAC,GAAG,EAAE,SAAS,GAAI,GAC5C,GACE,IACP,IACA,CACb,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Container: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const IconWrap: import("@emotion/styled").StyledComponent<{
|
|
7
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
+
as?: import("react").ElementType<any> | undefined;
|
|
9
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
|
+
export declare const Icon: import("@emotion/styled").StyledComponent<{
|
|
11
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
+
as?: import("react").ElementType<any> | undefined;
|
|
13
|
+
}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
14
|
+
export declare const Content: import("@emotion/styled").StyledComponent<{
|
|
15
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
+
as?: import("react").ElementType<any> | undefined;
|
|
17
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
18
|
+
export declare const TitleWrap: import("@emotion/styled").StyledComponent<{
|
|
19
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
20
|
+
as?: import("react").ElementType<any> | undefined;
|
|
21
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
22
|
+
export declare const Title: import("@emotion/styled").StyledComponent<{
|
|
23
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
24
|
+
as?: import("react").ElementType<any> | undefined;
|
|
25
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
26
|
+
export declare const CloseBtnWrap: import("@emotion/styled").StyledComponent<{
|
|
27
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
28
|
+
as?: import("react").ElementType<any> | undefined;
|
|
29
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
30
|
+
export declare const CloseBtn: import("@emotion/styled").StyledComponent<{
|
|
31
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
32
|
+
as?: import("react").ElementType<any> | undefined;
|
|
33
|
+
}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
34
|
+
export declare const CloseIcon: import("@emotion/styled").StyledComponent<{
|
|
35
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
36
|
+
as?: import("react").ElementType<any> | undefined;
|
|
37
|
+
}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import styled from '@emotion/styled';
|
|
2
|
+
export const Container = styled.div `
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
border: ${(props) => `1px solid ${props.theme.COLORS.BLUE_PRIMARY}`};
|
|
5
|
+
border-radius: 13px;
|
|
6
|
+
background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT};
|
|
7
|
+
color: ${(props) => props.theme.COLORS.WHITE};
|
|
8
|
+
display: flex;
|
|
9
|
+
user-select: none;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
animation: slidein 0.3s ease-in;
|
|
13
|
+
|
|
14
|
+
@keyframes slidein {
|
|
15
|
+
from {
|
|
16
|
+
transform: translateX(-100%);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
to {
|
|
20
|
+
transform: translateX(0);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
|
+
export const IconWrap = styled.div `
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
align-items: center;
|
|
28
|
+
padding: 14px;
|
|
29
|
+
background-color: ${(props) => props.theme.COLORS.BLUE_PRIMARY};
|
|
30
|
+
`;
|
|
31
|
+
export const Icon = styled.img `
|
|
32
|
+
max-width: 40px;
|
|
33
|
+
max-height: 40px;
|
|
34
|
+
width: 100%;
|
|
35
|
+
height: 100%;
|
|
36
|
+
border-radius: 50%;
|
|
37
|
+
`;
|
|
38
|
+
export const Content = styled.div `
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
width: 100%;
|
|
42
|
+
align-items: center;
|
|
43
|
+
`;
|
|
44
|
+
export const TitleWrap = styled.div `
|
|
45
|
+
padding-left: 20px;
|
|
46
|
+
padding-right: 5px;
|
|
47
|
+
font-weight: 700;
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
flex: 1;
|
|
50
|
+
`;
|
|
51
|
+
export const Title = styled.div `
|
|
52
|
+
display: -webkit-box;
|
|
53
|
+
-webkit-box-orient: vertical;
|
|
54
|
+
-webkit-line-clamp: 2;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
57
|
+
`;
|
|
58
|
+
export const CloseBtnWrap = styled.div `
|
|
59
|
+
padding: 20px;
|
|
60
|
+
`;
|
|
61
|
+
export const CloseBtn = styled.button `
|
|
62
|
+
border: none;
|
|
63
|
+
outline: none;
|
|
64
|
+
background-color: transparent;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
display: flex;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
align-items: center;
|
|
69
|
+
`;
|
|
70
|
+
export const CloseIcon = styled.img `
|
|
71
|
+
width: 24px;
|
|
72
|
+
height: 24px;
|
|
73
|
+
`;
|
|
74
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/inapp/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;YAEvB,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,EAAE;;sBAE/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc;WACvD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;;CAgB7C,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;sBAKZ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;CAC/D,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM7B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKhC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMlC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM9B,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;CAErC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;CAQpC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAA"}
|