@streamlayer/react-ui 0.63.0 → 0.64.0

package/lib/ui/app/Features/Gamification/Friends.d.ts

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

package/lib/ui/app/Features/Gamification/Friends.js

@@ -0,0 +1,33 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useStore as i } from "@nanostores/react";
+import { OnboardingInviteCard as r } from "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../icons/index.js";
+import "@linaria/react";
+import "react";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+const d = ({ deepLink: o }) => {
+  const { data: t } = i(o.$store);
+  return /* @__PURE__ */ e(
+    r,
+    {
+      inviteLink: t == null ? void 0 : t.url,
+      socialLinks: [
+        {
+          icon: "icon-facebook",
+          link: "https://www.facebook.com/TheMasters",
+          label: "Facebook"
+        },
+        {
+          icon: "icon-twitter",
+          link: "https://twitter.com/@TheMasters",
+          label: "X"
+        }
+      ],
+      inviteCardTitle: "It’s more fun with friends",
+      inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
+    }
+  );
+};
+export {
+  d as Friends
+};

package/lib/ui/app/Features/Gamification/Leaderboard.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
-    leaderboardList: Gamification['leaderboardList'];
-    openUser: (userId: string) => void;
+    gamification: Gamification;
 }>;

package/lib/ui/app/Features/Gamification/Leaderboard.js

@@ -1,6 +1,7 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useStore as e } from "@nanostores/react";
-import { LeaderboardList as i } from "../../../gamification/leaderboard/index.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useStore as t } from "@nanostores/react";
+import { LeaderboardList as p } from "../../../gamification/leaderboard/index.js";
+import { Friends as m } from "./Friends.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
@@ -10,10 +11,19 @@ import "../../../gamification/leaderboard/list-item/styles.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const b = ({ leaderboardList: o, openUser: r }) => {
-  const { data: t } = e(o.$store);
-  return /* @__PURE__ */ m(i, { fetchMore: o.fetchMore, items: t, openItemDetail: r });
+import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
+const j = ({ gamification: r }) => {
+  const { data: e } = t(r.leaderboardList.$store);
+  return e != null && e.length ? /* @__PURE__ */ o(m, { deepLink: r.deepLink }) : /* @__PURE__ */ o(
+    p,
+    {
+      fetchMore: r.leaderboardList.fetchMore,
+      items: e,
+      openItemDetail: r.openUser
+    }
+  );
 };
 export {
-  b as Leaderboard
+  j as Leaderboard
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,7 +1,7 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { useState as s } from "react";
-import { SDKWhiteContainer as n, SDKContentContainer as m } from "../../styles.js";
-import { ActivePages as e, Tabs as a } from "../../../gamification/tabs/index.js";
+import { SDKWhiteContainer as p, SDKContentContainer as n } from "../../styles.js";
+import { ActivePages as i, Tabs as a } from "../../../gamification/tabs/index.js";
 import { Leaderboard as d } from "./Leaderboard.js";
 import { QuestionsList as l } from "./QuestionsList.js";
 import { UserSummary as u } from "./UserSummary.js";
@@ -16,6 +16,9 @@ import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../icons/index.js";
+import "./Friends.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
@@ -36,17 +39,17 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const Y = ({ gamification: t }) => {
-  const [o, p] = s(e.HOME);
-  return /* @__PURE__ */ i("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ i(n, { children: [
-      /* @__PURE__ */ r(a, { activePage: o, toggleActivePage: p }),
-      o === e.HOME && /* @__PURE__ */ r(u, { userSummary: t.userSummary })
+const tt = ({ gamification: r }) => {
+  const [o, e] = s(i.HOME);
+  return /* @__PURE__ */ m("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ m(p, { children: [
+      /* @__PURE__ */ t(a, { activePage: o, toggleActivePage: e }),
+      o === i.HOME && /* @__PURE__ */ t(u, { userSummary: r.userSummary })
     ] }),
-    o === e.HOME && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(l, { openQuestion: t.openQuestion, store: t.feedList.getStore() }) }),
-    o === e.LEADERBOARD && /* @__PURE__ */ r(m, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ r(d, { openUser: t.openUser, leaderboardList: t.leaderboardList }) })
+    o === i.HOME && /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(l, { openQuestion: r.openQuestion, store: r.feedList.getStore() }) }),
+    o === i.LEADERBOARD && /* @__PURE__ */ t(p, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ t(d, { gamification: r }) })
   ] });
 };
 export {
-  Y as Tabs
+  tt as Tabs
 };

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

@@ -45,6 +45,9 @@ import "react-window";
 import "react-window-infinite-loader";
 import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
+import "./Friends.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
@@ -74,7 +77,7 @@ const e = n(u)`
   & > div {
     width: 100%;
   }
-`, wr = ({ gamification: t, className: o }) => {
+`, jr = ({ gamification: t, className: o }) => {
   const s = m(t.openedQuestion.$store), i = m(t.openedUser);
   return /* @__PURE__ */ p(d, { children: [
     s && /* @__PURE__ */ r(e, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
@@ -86,6 +89,6 @@ const e = n(u)`
   ] });
 };
 export {
-  wr as GamificationOverlay,
-  wr as default
+  jr as GamificationOverlay,
+  jr as default
 };

package/lib/ui/app/Notifications/Onboarding/index.js

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { styled as g } from "@linaria/react";
 import { useState as y } from "react";
 import { FeatureType as k } from "@streamlayer/sdk-web-types";
@@ -22,10 +22,10 @@ const C = g(f)`
   height: 100%;
 
   animation-duration: var(--animation-duration);
-`, $ = ({ sdk: b, hiding: r, notification: t, NotificationContainer: h }) => {
-  var s, a, p, d, l, c;
-  const [u, i] = y(!1), n = b.getFeature(k.GAMES), e = t.data.onboarding;
-  return u && n && e ? /* @__PURE__ */ o(C, { hiding: r, children: /* @__PURE__ */ o(
+`, $ = ({ sdk: b, hiding: o, notification: t, NotificationContainer: h }) => {
+  var n, a, p, d, l, c;
+  const [u, i] = y(!1), s = b.getFeature(k.GAMES), e = t.data.onboarding;
+  return u && s && e ? /* @__PURE__ */ r(C, { hiding: o, children: /* @__PURE__ */ r(
     w,
     {
       rules: [
@@ -42,7 +42,7 @@ const C = g(f)`
           icon: "icon-trophy"
         }
       ],
-      rulesBtnLabel: (s = e.rules) == null ? void 0 : s.buttonLabel,
+      rulesBtnLabel: (n = e.rules) == null ? void 0 : n.buttonLabel,
       rulesTitle: (a = e.rules) == null ? void 0 : a.heading,
       steps: [
         {
@@ -78,18 +78,18 @@ const C = g(f)`
       socialLinks: [
         {
           icon: "icon-facebook",
-          link: "https://www.facebook.com/",
+          link: "https://www.facebook.com/TheMasters",
           label: "Facebook"
         },
         {
           icon: "icon-twitter",
-          link: "https://twitter.com",
+          link: "https://twitter.com/@TheMasters",
           label: "X"
         }
       ],
-      gamification: n
+      gamification: s
     }
-  ) }) : /* @__PURE__ */ o(h, { hiding: r, children: /* @__PURE__ */ o("button", { onClick: () => i(!0), children: "go onboarding" }) });
+  ) }) : /* @__PURE__ */ r(h, { hiding: o, children: /* @__PURE__ */ r("button", { onClick: () => i(!0), children: "go onboarding" }) });
 };
 export {
   $ as Onboarding

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.d.ts

@@ -6,6 +6,7 @@ export type OnboardingInviteCardProps = {
     inviteCardSubtext?: string;
     primaryColor?: string;
     socialLinks?: InviteCardSocialLink[];
+    className?: string;
 };
 export type InviteCardSocialLink = {
     icon: keyof typeof icons;

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.js

@@ -1,21 +1,22 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { SvgIcon as h } from "../../../../icons/index.js";
-import { Container as m, IconContainer as p, InviteGameIcon as C, Content as I, Heading as b, Subtext as g, LinkContainer as s, LinkInfo as y, LinkTitle as f, LinkAddress as k, LinkIcon as x, SocialLinksContainer as S, SocialLink as L, SocialLinkLabel as u } from "./styles.js";
+import { SvgIcon as m } from "../../../../icons/index.js";
+import { Container as p, IconContainer as C, InviteGameIcon as b, Content as g, Heading as I, Subtext as s, LinkContainer as y, LinkInfo as f, LinkTitle as k, LinkAddress as x, LinkIcon as S, SocialLinksContainer as L, SocialLink as u, SocialLinkLabel as v } from "./styles.js";
 import "@linaria/react";
 import "react";
-const H = ({
+const O = ({
   inviteLink: e,
   socialLinks: o,
   inviteCardTitle: t,
   inviteCardSubtext: a,
-  primaryColor: l
-}) => /* @__PURE__ */ r(m, { children: [
-  /* @__PURE__ */ n(p, { style: { backgroundColor: l }, children: /* @__PURE__ */ n(C, { name: "invite-game-icon" }) }),
-  /* @__PURE__ */ r(I, { children: [
-    /* @__PURE__ */ n(b, { children: t || "" }),
-    /* @__PURE__ */ n(g, { children: a || "" })
+  primaryColor: l,
+  className: d
+}) => /* @__PURE__ */ r(p, { className: d, children: [
+  /* @__PURE__ */ n(C, { style: { backgroundColor: l }, children: /* @__PURE__ */ n(b, { name: "invite-game-icon" }) }),
+  /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ n(I, { children: t || "" }),
+    /* @__PURE__ */ n(s, { children: a || "" })
   ] }),
-  e && /* @__PURE__ */ r(s, { onClick: async () => {
+  e && /* @__PURE__ */ r(y, { onClick: async () => {
     if (e)
       try {
         await navigator.clipboard.writeText(e);
@@ -23,17 +24,17 @@ const H = ({
         console.error("Unable to copy to clipboard", i);
       }
   }, children: [
-    /* @__PURE__ */ r(y, { children: [
-      /* @__PURE__ */ n(f, { children: "Invite link" }),
-      /* @__PURE__ */ n(k, { children: e })
+    /* @__PURE__ */ r(f, { children: [
+      /* @__PURE__ */ n(k, { children: "Invite link" }),
+      /* @__PURE__ */ n(x, { children: e })
     ] }),
-    /* @__PURE__ */ n(x, { name: "icon-copy" })
+    /* @__PURE__ */ n(S, { name: "icon-copy" })
   ] }),
-  o && o.length > 0 && /* @__PURE__ */ n(S, { children: o.map(({ icon: i, link: c, label: d }) => /* @__PURE__ */ r(L, { href: c, children: [
-    /* @__PURE__ */ n(h, { name: i }),
-    /* @__PURE__ */ n(u, { children: d })
+  o && o.length > 0 && /* @__PURE__ */ n(L, { children: o.map(({ icon: i, link: c, label: h }) => /* @__PURE__ */ r(u, { href: c, target: "_blank", children: [
+    /* @__PURE__ */ n(m, { name: i }),
+    /* @__PURE__ */ n(v, { children: h })
   ] }, c)) })
 ] });
 export {
-  H as OnboardingInviteCard
+  O as OnboardingInviteCard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,12 +36,12 @@
     "react-window": "^1.8.9",
     "@lottiefiles/react-lottie-player": "*",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.24.0",
-    "@streamlayer/sdk-web": "^0.28.20",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.15",
+    "@streamlayer/feature-gamification": "^0.25.0",
+    "@streamlayer/sdk-web": "^0.28.21",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.16",
     "@streamlayer/sdk-web-api": "^0.0.1",
     "@streamlayer/sdk-web-core": "^0.17.8",
-    "@streamlayer/sdk-web-features": "^0.10.23",
+    "@streamlayer/sdk-web-features": "^0.10.24",
     "@streamlayer/sdk-web-interfaces": "^0.18.15",
     "@streamlayer/sdk-web-notifications": "^0.12.1",
     "@streamlayer/sdk-web-storage": "^0.0.4",
@@ -84,6 +84,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.29.4"
+    "@streamlayer/react": "^0.29.5"
   }
 }