@streamlayer/react-ui 1.0.0 → 1.2.0

package/lib/{ui/app → app}/masters/Features/Gamification/Question.js

@@ -1,16 +1,16 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
 import { styled as l } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
-import { QuestionType as a } from "@streamlayer/sdk-web-types";
-import { useMastersContext as m } from "../../useMastersContext.js";
-import { VoteHeader as c } from "../../../../gamification/detail/header/index.js";
-import { Sponsor as p } from "../../../../gamification/detail/sponsor/index.js";
-import { Vote as f, VoteSkeleton as b } from "../../../../gamification/vote/index.js";
-import { InsightDetails as y } from "../../../../gamification/vote/insight-details/index.js";
-import { TwitterDetails as V } from "../../../../gamification/vote/twitter-details/index.js";
+import { useMastersContext as a } from "../../useMastersContext.js";
+import { QuestionType as m } from "@streamlayer/sdk-web-types";
+import { VoteHeader as c } from "../../../../ui/gamification/detail/header/index.js";
+import { Sponsor as p } from "../../../../ui/gamification/detail/sponsor/index.js";
+import { Vote as f, VoteSkeleton as b } from "../../../../ui/gamification/vote/index.js";
+import { InsightDetails as y } from "../../../../ui/gamification/vote/insight-details/index.js";
+import { TwitterDetails as V } from "../../../../ui/gamification/vote/twitter-details/index.js";
 const h = /* @__PURE__ */ l("div")({
   name: "QuestionContainer",
-  class: "q142mohu",
+  class: "qwgkhsv",
   propsAsIs: !1
 }), x = ({
   openedQuestion: t
@@ -18,7 +18,7 @@ const h = /* @__PURE__ */ l("div")({
   var s, o;
   const {
     sdk: r
-  } = m();
+  } = a();
   return ((s = t == null ? void 0 : t.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ e(y, {
     ...t.attributes.attributes.value,
     controlVideo: r == null ? void 0 : r.controlVideoPlayer
@@ -52,7 +52,7 @@ const h = /* @__PURE__ */ l("div")({
   return /* @__PURE__ */ u(h, {
     children: [/* @__PURE__ */ e(c, {
       close: t.closeQuestion,
-      type: ((i = r.attributes) == null ? void 0 : i.type) || a.UNSET
+      type: ((i = r.attributes) == null ? void 0 : i.type) || m.UNSET
     }), o === "question" && /* @__PURE__ */ e(d, {
       vote: t.submitAnswer,
       close: t.closeQuestion,
@@ -60,7 +60,7 @@ const h = /* @__PURE__ */ l("div")({
     }), o !== "question" && /* @__PURE__ */ e(x, {
       openedQuestion: r
     }), /* @__PURE__ */ e(p, {
-      sponsorLogo: ""
+      mastersLogo: !0
     })]
   });
 };

package/lib/{ui/app → app}/masters/Features/Gamification/QuestionsList.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { Gamification } from '@streamlayer/feature-gamification';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const QuestionsList: React.FC<{
     store: ReturnType<Exclude<Gamification['feedList'], undefined>['getStore']>;
     openQuestion: (questionId: string) => void;

package/lib/{ui/app → app}/masters/Features/Gamification/QuestionsList.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useStore as i } from "@nanostores/react";
 import { useMastersContext as n } from "../../useMastersContext.js";
-import { QuestionList as m } from "../../../../gamification/question/list/index.js";
+import { QuestionList as m } from "../../../../ui/gamification/question/list/index.js";
 const a = ({ store: t, openQuestion: r }) => {
   const { sdk: o } = n(), e = i(t);
   return /* @__PURE__ */ s(m, { openQuestion: r, questions: e.data, controlVideo: o == null ? void 0 : o.controlVideoPlayer });

package/lib/{ui/app/app → app/masters}/Features/Gamification/Tabs.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { type Gamification } from '@streamlayer/feature-gamification';
-import type { AppNodeRef, ScrollNodeRef } from '../../..';
+import { AppNodeRef, ScrollNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ScrollStore } from '../../../useSdkScroll';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const Tabs: React.FC<{
     appNode: AppNodeRef;
     gamification: Gamification;

package/lib/{ui/app → app}/masters/Features/Gamification/Tabs.js

@@ -1,20 +1,20 @@
 import { jsxs as h, jsx as e, Fragment as x } from "react/jsx-runtime";
 import { useStore as u } from "@nanostores/react";
-import { useState as D, useTransition as T, useEffect as v } from "react";
-import { TabsContainer as C, TabsNavContainer as A, SDKWhiteContainer as I, UserSummaryContainer as P, SDKContentContainer as S, LeaderboardContainer as V } from "../../../styles.js";
-import { scrollIntoAppView as E } from "../../../useSdkScroll.js";
-import { ActivePages as a, Tabs as K } from "../../../../gamification/tabs/index.js";
+import { TabsContainer as D, TabsNavContainer as T, SDKWhiteContainer as v, UserSummaryContainer as C, SDKContentContainer as A, LeaderboardContainer as I } from "../../../styles.js";
+import { scrollIntoAppView as P } from "../../../useSdkScroll.js";
+import { useState as S, useTransition as V, useEffect as E } from "react";
+import { ActivePages as a, Tabs as K } from "../../../../ui/gamification/tabs/index.js";
 import { Leaderboard as L } from "./Leaderboard.js";
 import { QuestionsList as F } from "./QuestionsList.js";
 import { UserSummary as O } from "./UserSummary.js";
 const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNode: c, style: b, responsiveStore: n }) => {
-  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = D(a.HOME), [, y] = T(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
+  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = S(a.HOME), [, y] = V(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
     y(() => {
       var p;
-      w(r), m === !1 && (((p = c.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && E(c, g.size, { behavior: "instant" });
+      w(r), m === !1 && (((p = c.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && P(c, g.size, { behavior: "instant" });
     });
   };
-  v(() => t.subscribe((r) => {
+  E(() => t.subscribe((r) => {
     if (r.scrollPosition === 0) {
       t.setKey("tabsShown", !0);
       return;
@@ -22,9 +22,9 @@ const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNo
     n.get().sdkInDesktopView ? t.setKey("tabsShown", r.scrollDirection === "backward") : t.setKey("tabsShown", r.scrollDirection === "forward");
   }), [t, n]);
   let o = "0px";
-  return m ? o = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : o = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ h(C, { className: f, style: b, children: [
+  return m ? o = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : o = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ h(D, { className: f, style: b, children: [
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         style: {
           top: o
@@ -33,10 +33,10 @@ const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNo
       }
     ),
     i === a.HOME && /* @__PURE__ */ h(x, { children: [
-      /* @__PURE__ */ e(I, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(O, { userSummary: s.userSummary }) }) }),
-      /* @__PURE__ */ e(S, { style: { flex: 1 }, children: /* @__PURE__ */ e(F, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) })
+      /* @__PURE__ */ e(v, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(O, { userSummary: s.userSummary }) }) }),
+      /* @__PURE__ */ e(A, { style: { flex: 1 }, children: /* @__PURE__ */ e(F, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) })
     ] }),
-    i === a.LEADERBOARD && /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(L, { scrollStore: t, scrollNode: l, gamification: s }) })
+    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(L, { scrollStore: t, scrollNode: l, gamification: s }) })
   ] });
 };
 export {

package/lib/{ui/app → app}/masters/Features/Gamification/UserSummary.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { Gamification } from '@streamlayer/feature-gamification';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const UserSummary: React.FC<{
     userSummary: Exclude<Gamification['userSummary'], undefined>;
 }>;

package/lib/{ui/app/app → app/masters}/Features/Gamification/UserSummary.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useState as i, useEffect as n } from "react";
-import { UserStatistics as a } from "../../../../gamification/user-statistics/index.js";
+import { UserStatistics as a } from "../../../../ui/gamification/user-statistics/index.js";
 const b = ({ userSummary: r }) => {
   var e;
   const [t, s] = i(void 0);

package/lib/{ui/app → app}/masters/Features/Gamification/gamification-feature.d.ts

@@ -1,2 +1,3 @@
 import { GamificationOverlay } from './';
+
 export default GamificationOverlay;

package/lib/{ui/app → app}/masters/Features/Gamification/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
-import type { AppNodeRef, ScrollNodeRef } from '../../..';
+import { AppNodeRef, ScrollNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ScrollStore } from '../../../useSdkScroll';
+import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
     className?: string;

package/lib/app/masters/Features/Gamification/index.js

@@ -0,0 +1,88 @@
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { styled as m } from "@linaria/react";
+import { useStore as a } from "@nanostores/react";
+import { SDKWhiteContainer as h } from "../../../styles.js";
+import { useHideTransition as C } from "../../../../hooks/showIn.js";
+import { VoteHeader as k } from "../../../../ui/gamification/detail/header/index.js";
+import { UserStatistics as S } from "../../../../ui/gamification/user-statistics/index.js";
+import { ModalPortal as U } from "../../../../ui/modal/index.js";
+import { ShowIn as y } from "../../../../ui/show-in/index.js";
+import { Question as I } from "./Question.js";
+import { Tabs as v } from "./Tabs.js";
+const x = () => y, p = /* @__PURE__ */ m(x())({
+  name: "OpenedContainer",
+  class: "o1seszvt",
+  propsAsIs: !0
+}), O = /* @__PURE__ */ m("div")({
+  name: "UserContainer",
+  class: "u1pbry50",
+  propsAsIs: !1
+}), b = ({
+  correct: e,
+  incorrect: r
+}) => {
+  const o = e + r;
+  return o === 0 ? 0 : Math.round(e / o * 100);
+}, z = ({
+  gamification: e,
+  scrollStore: r,
+  className: o,
+  appNode: i,
+  scrollNode: s,
+  responsiveStore: t
+}) => /* @__PURE__ */ n(v, {
+  appNode: i,
+  scrollStore: r,
+  scrollNode: s,
+  className: o,
+  gamification: e,
+  responsiveStore: t
+}), E = ({
+  gamification: e,
+  className: r,
+  appNode: o,
+  responsiveStore: i
+}) => {
+  const s = a(e.openedQuestion.$store), t = a(e.openedUser), {
+    sdkInDesktopView: d
+  } = a(i, {
+    keys: ["sdkInDesktopView"]
+  }), {
+    hiding: c,
+    onAnimationEnd: l
+  } = C();
+  if (!o.current || !s && !t)
+    return null;
+  const u = s ? /* @__PURE__ */ n(p, {
+    className: r,
+    hiding: c,
+    onAnimationEnd: l,
+    children: /* @__PURE__ */ n(I, {
+      gamification: e
+    })
+  }) : t ? /* @__PURE__ */ n(p, {
+    className: r,
+    hiding: c,
+    onAnimationEnd: l,
+    children: /* @__PURE__ */ f(O, {
+      children: [/* @__PURE__ */ n(k, {
+        label: "Friend's Rank",
+        close: e.closeUser
+      }), /* @__PURE__ */ n(h, {
+        children: /* @__PURE__ */ n(S, {
+          ...t,
+          successRate: b(t)
+        })
+      })]
+    })
+  }) : null;
+  return /* @__PURE__ */ n(U, {
+    container: o,
+    useContainer: !d,
+    children: u
+  });
+};
+export {
+  z as GamificationOverlay,
+  E as GamificationOverlayStandalone
+};

package/lib/{ui/app/app → app/masters}/Features/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { Features } from '@streamlayer/sdk-web-features';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import type { AppNodeRef, ScrollNodeRef } from '../..';
+import { AppNodeRef, ScrollNodeRef } from '../..';
 import { ResponsiveStore } from '../../useSdkResponsive';
 import { ScrollStore } from '../../useSdkScroll';
+import { Features } from '@streamlayer/sdk-web-features';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
 /** render feature by type */
 export declare const ActiveFeature: React.FC<{
     sdk: StreamLayerSDK;

package/lib/{ui/app → app}/masters/Navigation/MastersNavigation/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { ResponsiveStore } from '../../../useSdkResponsive';
-import { ChannelsButtonId } from '../../../../navigation/button/Channels';
-import { FeaturedGroupsButtonId } from '../../../../navigation/button/FeaturedGroups';
-import { LeaderBoardButtonId } from '../../../../navigation/button/LeaderBoard';
+import { ChannelsButtonId } from '../../../../ui/navigation/button/Channels';
+import { FeaturedGroupsButtonId } from '../../../../ui/navigation/button/FeaturedGroups';
+import { LeaderBoardButtonId } from '../../../../ui/navigation/button/LeaderBoard';
+
 export { ChannelsButtonId, LeaderBoardButtonId, FeaturedGroupsButtonId };
 export type AvailableOverlays = typeof ChannelsButtonId | typeof LeaderBoardButtonId | typeof FeaturedGroupsButtonId;
 type MastersNavigationProps = {
@@ -13,4 +13,4 @@ type MastersNavigationProps = {
     responsiveStore: ResponsiveStore;
     scrollToTop: () => void;
 };
-export declare const MastersNavigation: import("react").ForwardRefExoticComponent<MastersNavigationProps & import("react").RefAttributes<HTMLDivElement | null>>;
+export declare const MastersNavigation: import('react').ForwardRefExoticComponent<MastersNavigationProps & import('react').RefAttributes<HTMLDivElement | null>>;

package/lib/{ui/app → app}/masters/Navigation/MastersNavigation/index.js

@@ -1,11 +1,11 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { useStore as B } from "@nanostores/react";
 import { forwardRef as l } from "react";
-import { ChannelsButton as c, ChannelsButtonId as t } from "../../../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as x, FeaturedGroupsButtonId as n } from "../../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButtonId as S } from "../../../../navigation/button/LeaderBoard.js";
-import { Navigation as I, NavigationItems as h } from "../../../../navigation/masters.js";
-import { BREAKPOINTS as d } from "../../../../theme/constants.js";
+import { ChannelsButton as c, ChannelsButtonId as t } from "../../../../ui/navigation/button/Channels.js";
+import { FeaturedGroupsButton as x, FeaturedGroupsButtonId as n } from "../../../../ui/navigation/button/FeaturedGroups.js";
+import { LeaderBoardButtonId as S } from "../../../../ui/navigation/button/LeaderBoard.js";
+import { Navigation as I, NavigationItems as h } from "../../../../ui/navigation/masters.js";
+import { BREAKPOINTS as d } from "../../../../ui/theme/constants.js";
 const z = l(
   ({ activeOverlay: o, setActiveOverlay: e, scrollToTop: i, sdkReady: u, className: a, responsiveStore: f }, p) => {
     const { screen: m } = B(f, { keys: ["screen"] });

package/lib/{ui/app → app}/masters/Notifications/Onboarding/Notification/index.d.ts

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

package/lib/app/masters/Notifications/Onboarding/Notification/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CloseIconWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CloseIcon: any;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SponsorLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const PresentsTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Subtitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

package/lib/{ui/app/app → app/masters}/Notifications/Onboarding/Notification/styles.js

@@ -1,50 +1,50 @@
 import { styled as s } from "@linaria/react";
-import { SvgIcon as o } from "../../../../../icons/index.js";
+import { SvgIcon as o } from "../../../../../ui/icons/index.js";
 const a = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "c3q0amv",
+  class: "czz4rjk",
   propsAsIs: !1
 }), c = /* @__PURE__ */ s("div")({
   name: "CloseIconWrap",
-  class: "cqihknq",
+  class: "cxmojsy",
   propsAsIs: !1
-}), n = () => o, p = /* @__PURE__ */ s(n())({
+}), n = () => o, l = /* @__PURE__ */ s(n())({
   name: "CloseIcon",
-  class: "cl5ln9o",
+  class: "c1urm3yx",
   propsAsIs: !0
-}), l = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "t1bejf60",
+  class: "tme976v",
   propsAsIs: !1
 }), r = /* @__PURE__ */ s("img")({
   name: "SponsorLogo",
-  class: "sb0t4y8",
+  class: "s1lal9yz",
   propsAsIs: !1
 }), i = /* @__PURE__ */ s("div")({
   name: "PresentsTitle",
-  class: "p1nmyo08",
+  class: "pnn1sv1",
   propsAsIs: !1
 }), m = /* @__PURE__ */ s("div")({
   name: "Subtitle",
-  class: "sgd2pup",
+  class: "s1hjj1y8",
   propsAsIs: !1
 }), I = /* @__PURE__ */ s("div")({
   name: "Description",
-  class: "d6e19hw",
+  class: "dz7yjzw",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("button")({
+}), A = /* @__PURE__ */ s("button")({
   name: "ActionButton",
-  class: "a17h53j4",
+  class: "avpowqk",
   propsAsIs: !1
 });
 export {
-  f as ActionButton,
-  p as CloseIcon,
+  A as ActionButton,
+  l as CloseIcon,
   c as CloseIconWrap,
   a as Container,
   I as Description,
   i as PresentsTitle,
   r as SponsorLogo,
   m as Subtitle,
-  l as Title
+  p as Title
 };

package/lib/{ui/app/app → app/masters}/Notifications/Onboarding/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { type Notification } from '@streamlayer/sdk-web-notifications';
-import { type AppNodeRef } from '../../..';
+import { AppNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { Notification } from '@streamlayer/sdk-web-notifications';
+
 export declare const Onboarding: React.FC<{
     sdk: StreamLayerSDK;
     notification: Notification;