@streamlayer/react-ui 0.43.0 → 0.45.0

package/lib/ui/demo/index.js

@@ -1,16 +1,19 @@
-import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
-import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
+var y = Object.defineProperty;
+var b = (o, r, t) => r in o ? y(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var m = (o, r, t) => (b(o, typeof r != "symbol" ? r + "" : r, t), t);
+import { jsx as e, jsxs as l, Fragment as T } from "react/jsx-runtime";
+import { FeatureStatus as c } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as g } from "@streamlayer/sdk-web-types";
-import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
-import { useState as b, useMemo as h, useEffect as C } from "react";
+import { AvailableFeatures as C } from "@streamlayer/sdk-web-features";
+import { useState as w, useMemo as S, useEffect as F } from "react";
 import "@streamlayer/sdk-web-api";
-import "@streamlayer/sdk-web-storage";
-import { useStore as c } from "@nanostores/react";
-import { Notifications as F } from "../notifications/index.js";
-import { GamificationComponent as w } from "./Gamification.js";
+import { Storage as k } from "@streamlayer/sdk-web-storage";
+import { useStore as f } from "@nanostores/react";
+import { Notifications as x } from "../notifications/index.js";
+import { GamificationComponent as E } from "./Gamification.js";
 import { HighlightsComponent as G } from "./Highlights.js";
 import { LoginComponent as H } from "./Login.js";
-import { Buttons as x, Button as s } from "./styles.js";
+import { Buttons as A, Button as d } from "./styles.js";
 import "../notifications/notification/index.js";
 import "@streamlayer/sdk-web-notifications";
 import "../notifications/notification/onboarding-inapp/index.js";
@@ -67,8 +70,6 @@ import "../gamification/leaderboard-item-detail/index.js";
 import "../gamification/common-header/index.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
-import "../gamification/leaderboard-invite-link/index.js";
-import "../gamification/leaderboard-invite-link/styles.js";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
 import "../gamification/leaderboard-list/styles.js";
@@ -86,55 +87,91 @@ import "@connectrpc/connect";
 import "@connectrpc/connect-web";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-const A = ({ activeFeature: r, sdk: o }) => {
-  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = c(o.sdkStore), y = h(() => {
-    const t = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
-    return t != null && t.overlays ? t.overlays : [];
-  }, [a, u]);
-  C(() => {
-    const t = o.getFeatures();
-    if (r)
-      for (const [m, p] of t)
-        m === r ? p.status.get() === l.Suspended && (p.enable(), n(p)) : p.status.get() === l.Ready && p.disable();
+class B extends k {
+  constructor() {
+    super("user");
+    // Schema
+    m(this, "setSchema", (t) => {
+      this.write("schema", t);
+    });
+    m(this, "getSchema", () => this.read(
+      "schema"
+      /* SCHEMA */
+    ));
+    // Token
+    m(this, "setToken", (t) => {
+      this.write("token", t);
+    });
+    m(this, "getToken", () => this.read(
+      "token"
+      /* TOKEN */
+    ));
+    // External Token
+    m(this, "setExternalToken", (t) => {
+      this.write("eToken", t);
+    });
+    m(this, "getExternalToken", () => this.read(
+      "eToken"
+      /* EXTERNAL_TOKEN */
+    ));
+    m(this, "removeToken", () => {
+      this.remove(
+        "token"
+        /* TOKEN */
+      );
+    });
+  }
+}
+new B();
+const R = ({ activeFeature: o, sdk: r }) => {
+  const [t, a] = w(null), { organizationSettings: s, streamSettings: u } = f(r.sdkStore), v = S(() => {
+    const i = (u == null ? void 0 : u.data) || (s == null ? void 0 : s.data);
+    return i != null && i.overlays ? i.overlays : [];
+  }, [s, u]);
+  F(() => {
+    const i = r.getFeatures();
+    if (o)
+      for (const [n, p] of i)
+        n === o ? p.status.get() === c.Suspended && (p.enable(), a(p)) : p.status.get() === c.Ready && p.disable();
     else {
-      for (const [, m] of t)
-        m.status.get() === l.Ready && m.disable();
-      n(null);
+      for (const [, n] of i)
+        n.status.get() === c.Ready && n.disable();
+      a(null);
     }
     return () => {
-      for (const [, m] of t)
-        m.status.get() === l.Ready && m.disable();
+      for (const [, n] of i)
+        n.status.get() === c.Ready && n.disable();
     };
-  }, [r, o]);
-  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(G, { highlights: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [o, e]);
-  return /* @__PURE__ */ f("div", { children: [
-    /* @__PURE__ */ f(x, { children: [
-      /* @__PURE__ */ i(s, { onClick: () => o.closeFeature(), disabled: !d, children: "close" }),
-      /* @__PURE__ */ i(s, { onClick: () => o.logout(), children: "logout" }),
-      y.map((t) => /* @__PURE__ */ f(
-        s,
+  }, [o, r]);
+  const h = S(() => t ? t.featureConfig.get().type === g.GAMES ? t ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(E, { gamification: t, sdk: r }) }) : /* @__PURE__ */ e("div", { children: "wait gamification..." }) : t.featureConfig.get().type === g.HIGHLIGHTS ? t ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(G, { highlights: t, sdk: r }) }) : /* @__PURE__ */ e("div", { children: "wait highlights..." }) : /* @__PURE__ */ e("div", { children: "unknown feature" }) : null, [r, t]);
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ l(A, { children: [
+      /* @__PURE__ */ e(d, { onClick: () => r.closeFeature(), disabled: !h, children: "close" }),
+      /* @__PURE__ */ e(d, { onClick: () => r.logout(), children: "logout" }),
+      v.map((i) => /* @__PURE__ */ l(
+        d,
         {
-          onClick: () => o.openFeature(t.type),
-          disabled: !(t.type in S),
-          "data-enable_sdk_button": t.enableSdkButton.toString(),
-          "data-selected": t.type === r,
+          onClick: () => r.openFeature(i.type),
+          disabled: !(i.type in C),
+          "data-enable_sdk_button": i.enableSdkButton.toString(),
+          "data-selected": i.type === o,
           children: [
-            /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
-            t.name
+            /* @__PURE__ */ e("img", { src: i.icon, alt: "" }),
+            i.name
           ]
         },
-        t.name
+        i.name
       ))
     ] }),
-    d
+    h
   ] });
-}, ai = ({ sdk: r }) => {
-  const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
-  return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
-    /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
-    /* @__PURE__ */ i(A, { sdk: r, activeFeature: n })
-  ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
+}, lr = ({ sdk: o }) => {
+  const r = f(o.organizationStore()), t = f(o.getUserStore()), a = f(o.getActiveFeature());
+  return r.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : r.data ? t.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : t.data ? /* @__PURE__ */ l(T, { children: [
+    /* @__PURE__ */ e(x, { notificationsStore: o.getNotificationsStore() }),
+    /* @__PURE__ */ e(R, { sdk: o, activeFeature: a })
+  ] }) : /* @__PURE__ */ e(H, { sdk: o }) : /* @__PURE__ */ e("div", { children: "wrong sdk key..." });
 };
 export {
-  ai as Demo
+  lr as Demo
 };

package/lib/ui/gamification/invite-link/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type InviteLinkProps = {
+    title?: string;
+    description?: string;
+    onClick?: () => void;
+};
+export declare const InviteLink: React.FC<InviteLinkProps>;
+export {};

package/lib/ui/gamification/invite-link/index.js

@@ -0,0 +1,14 @@
+import { jsxs as N, jsx as M } from "react/jsx-runtime";
+import { Container as T, FriendsIcon as g, Content as x, Title as E, Description as A, ArrowInviteIcon as z } from "./styles.js";
+import "@linaria/react";
+const O = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iMTYiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMC40NjE1IDEyLjY4NzVDOS40NDIzMSAxMi42ODc1IDguNjE1MzggMTMuNDY2NSA4LjYxNTM4IDE0LjQyNjZDOC42MTUzOCAxNS4zODY4IDkuNDQyMzEgMTYuMTY1OCAxMC40NjE1IDE2LjE2NThDMTEuNDgwOCAxNi4xNjU4IDEyLjMwNzcgMTUuMzg2OCAxMi4zMDc3IDE0LjQyNjZDMTIuMzA3NyAxMy40NjY1IDExLjQ4MDggMTIuNjg3NSAxMC40NjE1IDEyLjY4NzVaTTEwLjQ2MTUgMTYuMTY1OEM5LjEwODE3IDE2LjE2NTggOCAxNy4yMDk3IDggMTguNDg0NlYxOS43NTI3QzggMTkuNzUyNyA4LjYxNTM4IDIwLjIyMzcgMTAuNDYxNSAyMC4yMjM3QzEyLjMwNzcgMjAuMjIzNyAxMi45MjMxIDE5Ljc1MjcgMTIuOTIzMSAxOS43NTI3VjE4LjQ4NDZDMTIuOTIzMSAxNy4yMDk3IDExLjgxNDkgMTYuMTY1OCAxMC40NjE1IDE2LjE2NThaTTIxLjUzODUgMTIuNjg3NUMyMC41MTkyIDEyLjY4NzUgMTkuNjkyMyAxMy40NjY1IDE5LjY5MjMgMTQuNDI2NkMxOS42OTIzIDE1LjM4NjggMjAuNTE5MiAxNi4xNjU4IDIxLjUzODUgMTYuMTY1OEMyMi41NTc3IDE2LjE2NTggMjMuMzg0NiAxNS4zODY4IDIzLjM4NDYgMTQuNDI2NkMyMy4zODQ2IDEzLjQ2NjUgMjIuNTU3NyAxMi42ODc1IDIxLjUzODUgMTIuNjg3NVpNMjEuNTM4NSAxNi4xNjU4QzIwLjE4NTEgMTYuMTY1OCAxOS4wNzY5IDE3LjIwOTcgMTkuMDc2OSAxOC40ODQ2VjE5Ljc1MjdDMTkuMDc2OSAxOS43NTI3IDE5LjY5MjMgMjAuMjIzNyAyMS41Mzg1IDIwLjIyMzdDMjMuMzg0NiAyMC4yMjM3IDI0IDE5Ljc1MjcgMjQgMTkuNzUyN1YxOC40ODQ2QzI0IDE3LjIwOTcgMjIuODkxOCAxNi4xNjU4IDIxLjUzODUgMTYuMTY1OFpNMTYgMTUuMDA2M0MxNC45ODA4IDE1LjAwNjMgMTQuMTUzOCAxNS43ODUzIDE0LjE1MzggMTYuNzQ1NUMxNC4xNTM4IDE3LjcwNTYgMTQuOTgwOCAxOC40ODQ2IDE2IDE4LjQ4NDZDMTcuMDE5MiAxOC40ODQ2IDE3Ljg0NjIgMTcuNzA1NiAxNy44NDYyIDE2Ljc0NTVDMTcuODQ2MiAxNS43ODUzIDE3LjAxOTIgMTUuMDA2MyAxNiAxNS4wMDYzWk0xNiAxOC40ODQ2QzE0LjY0NjYgMTguNDg0NiAxMy41Mzg1IDE5LjUyODUgMTMuNTM4NSAyMC44MDM0VjIyLjA3MTVDMTMuNTM4NSAyMi4wNzE1IDE0LjE1MzggMjIuNTQyNSAxNiAyMi41NDI1QzE3Ljg0NjIgMjIuNTQyNSAxOC40NjE1IDIyLjA3MTUgMTguNDYxNSAyMi4wNzE1VjIwLjgwMzRDMTguNDYxNSAxOS41Mjg1IDE3LjM1MzQgMTguNDg0NiAxNiAxOC40ODQ2WiIgZmlsbD0iIzEwN0Q1NyIvPgo8cGF0aCBvcGFjaXR5PSIwLjUiIGQ9Ik0xMy4zOTA4IDlDMTIuMzEwMyA5IDExLjQzMzYgOS44MjU4NCAxMS40MzM2IDEwLjg0MzdDMTEuNDMzNiAxMS44NjE2IDEyLjMxMDMgMTIuNjg3NSAxMy4zOTA4IDEyLjY4NzVDMTQuNDcxMyAxMi42ODc1IDE1LjM0OCAxMS44NjE2IDE1LjM0OCAxMC44NDM3QzE1LjM0OCA5LjgyNTg0IDE0LjQ3MTMgOSAxMy4zOTA4IDlaTTEzLjM5MDggMTIuNjg3NUMxMy4xOTQ2IDEyLjY4NzUgMTIuOTk1OCAxMi42ODI3IDEyLjc5OTYgMTIuNzQ1MUMxMy4xOTIgMTMuMjM3MiAxMy4zOTA4IDEzLjg1NDIgMTMuMzkwOCAxNC41MzEyQzEzLjM5MDggMTQuNzc2MSAxMy4zMjk2IDE1LjAxNjEgMTMuMzI5NiAxNS4yNjFDMTMuODUyMSAxNC41MjQgMTQuNjk1NiAxNC4wMzkxIDE1LjY3NDIgMTMuOTE2NkMxNS4yMTggMTMuMTc5NiAxNC4zNjk0IDEyLjY4NzUgMTMuMzkwOCAxMi42ODc1Wk0xOC42MSA5QzE3LjUyOTUgOSAxNi42NTI4IDkuODI1ODQgMTYuNjUyOCAxMC44NDM3QzE2LjY1MjggMTEuODYxNiAxNy41Mjk1IDEyLjY4NzUgMTguNjEgMTIuNjg3NUMxOS42OTA1IDEyLjY4NzUgMjAuNTY3MiAxMS44NjE2IDIwLjU2NzIgMTAuODQzN0MyMC41NjcyIDkuODI1ODQgMTkuNjkwNSA5IDE4LjYxIDlaTTE4LjYxIDEyLjY4NzVDMTcuNjMxNCAxMi42ODc1IDE2Ljc4MjggMTMuMTc5NiAxNi4zMjY2IDEzLjkxNjZDMTcuMzA1MiAxNC4wMzkxIDE4LjE0ODcgMTQuNTI0IDE4LjY3MTIgMTUuMjYxQzE4LjY3MTIgMTUuMDE2MSAxOC42MSAxNC43NzYxIDE4LjYxIDE0LjUzMTJDMTguNjEgMTMuODU0MiAxOC44MDg4IDEzLjIzNzIgMTkuMjAxMiAxMi43NDUxQzE5LjAwNSAxMi42ODI3IDE4LjgwNjIgMTIuNjg3NSAxOC42MSAxMi42ODc1WiIgZmlsbD0iIzEwN0Q1NyIvPgo8L3N2Zz4K", L = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlNoYXJlIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTExIDQuOTY1VjEuMTI1TDE4IDcuODQ1TDExIDE0LjU2NVYxMC42MjlDNiAxMC42MjkgMi41IDEyLjE2NSAwIDE1LjUyNUMxIDEwLjcyNSA0IDUuOTI1IDExIDQuOTY1WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8L3N2Zz4K", Y = ({ title: I, description: D, onClick: j }) => /* @__PURE__ */ N(T, { onClick: j, children: [
+  /* @__PURE__ */ M(g, { alt: "friends-icon", src: O }),
+  /* @__PURE__ */ N(x, { children: [
+    /* @__PURE__ */ M(E, { children: I }),
+    /* @__PURE__ */ M(A, { children: D })
+  ] }),
+  /* @__PURE__ */ M(z, { alt: "arrow-invite-icon", src: L })
+] });
+export {
+  Y as InviteLink
+};

package/lib/ui/gamification/{leaderboard-invite-link → invite-link}/styles.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const IconLink: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const FriendsIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/invite-link/styles.js

@@ -0,0 +1,48 @@
+import { styled as i } from "@linaria/react";
+const t = i.div`
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  width: 100%;
+  height: 58px;
+  min-height: 58px;
+  max-height: 58px;
+  padding: 4px 12px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  background-color: var(--color-primary-green1);
+  overflow: hidden;
+  cursor: pointer;
+`, e = i.img`
+  width: 32px;
+  height: 32px;
+`, r = i.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  row-gap: 6px;
+  padding: 0px 4px;
+  font-weight: var(--font-weight-default);
+`, n = i.div`
+  color: var(--color-neutrals-white);
+  font-size: 11px;
+  line-height: 14px;
+  text-transform: uppercase;
+  opacity: 0.8;
+`, p = i.div`
+  color: var(--color-white);
+  font-size: 14px;
+  line-height: 13px;
+`, x = i.img`
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+`;
+export {
+  x as ArrowInviteIcon,
+  t as Container,
+  r as Content,
+  p as Description,
+  e as FriendsIcon,
+  n as Title
+};

package/lib/ui/gamification/leaderboard-item-detail/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { UserStatisticsProps } from '../../gamification/user-statistics';
-type LeaderboardItemDetailProps = UserStatisticsProps & {
+type LeaderboardItemDetailProps = {
     comeBack: () => void;
 };
 export declare const LeaderboardItemDetail: React.FC<LeaderboardItemDetailProps>;

package/lib/ui/gamification/leaderboard-item-detail/index.js

@@ -1,20 +1,10 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { CommonHeader as i } from "../common-header/index.js";
-import { UserStatistics as p } from "../user-statistics/index.js";
-import { Container as e } from "./styles.js";
+import { jsx as r } from "react/jsx-runtime";
+import { CommonHeader as m } from "../common-header/index.js";
+import { Container as t } from "./styles.js";
 import "../../../icon-exit-d3f9fc80.js";
 import "../common-header/styles.js";
 import "@linaria/react";
-import "../../../utils/common.js";
-import "../user-statistics/components/rank/index.js";
-import "../user-statistics/components/rank/styles.js";
-import "../user-statistics/components/statistic/index.js";
-import "../user-statistics/components/statistic/styles.js";
-import "../user-statistics/styles.js";
-const D = ({ comeBack: o, ...t }) => /* @__PURE__ */ m(e, { children: [
-  /* @__PURE__ */ r(i, { comeBack: o }),
-  /* @__PURE__ */ r(p, { ...t })
-] });
+const f = ({ comeBack: o }) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(m, { comeBack: o }) });
 export {
-  D as LeaderboardItemDetail
+  f as LeaderboardItemDetail
 };

package/lib/ui/gamification/leaderboard-list/index.js

@@ -1,16 +1,10 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { LeaderboardInviteLink as n } from "../leaderboard-invite-link/index.js";
+import { jsx as o } from "react/jsx-runtime";
 import { LeaderboardItem as m } from "../leaderboard-item/index.js";
 import { Container as p } from "./styles.js";
-import "../leaderboard-invite-link/styles.js";
-import "@linaria/react";
 import "../../../utils/common.js";
 import "../leaderboard-item/styles.js";
-const b = ({ items: o, openItemDetail: i }) => /* @__PURE__ */ t(p, { children: [
-  o.map((r) => /* @__PURE__ */ e(m, { ...r, openItemDetail: () => i(r.userId) }, r.userId)),
-  /* @__PURE__ */ e(n, { title: "Invite Link", description: "Challenge friends!", onClick: () => {
-  } })
-] });
+import "@linaria/react";
+const f = ({ items: e, openItemDetail: t }) => /* @__PURE__ */ o(p, { children: e.map((r) => /* @__PURE__ */ o(m, { ...r, openItemDetail: () => t(r.userId) }, r.userId)) });
 export {
-  b as LeaderboardList
+  f as LeaderboardList
 };

package/lib/ui/icons/index.d.ts

@@ -12,7 +12,6 @@ export declare const icons: {
     'icon-masters-logo': any;
     'icon-logout': any;
     'icon-link': any;
-    'icon-invite-link': any;
     'icon-invite-arrow': any;
     'icon-friends': any;
     'icon-exit': any;