@streamlayer/react-ui 1.0.0 → 1.1.0

package/lib/ui/app/app/useAppContext.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-export declare const AppContext: import("react").Context<{
-    sdk: StreamLayerSDK | null;
-}>;
-export declare const useAppContext: () => {
-    sdk: StreamLayerSDK | null;
-};

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

@@ -1,19 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { styled as i } from "@linaria/react";
-import { OnboardingInviteCard as n } from "../../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
-const r = /* @__PURE__ */ i("div")({
-  name: "InviteFriendsContainer",
-  class: "ibtkwty",
-  propsAsIs: !1
-}), a = ({
-  deepLink: e
-}) => /* @__PURE__ */ t(r, {
-  children: /* @__PURE__ */ t(n, {
-    inviteLink: e,
-    inviteCardTitle: "It’s More Fun With Friends",
-    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
-  })
-});
-export {
-  a as Friends
-};

package/lib/ui/app/masters/Navigation/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { Overlays } from '..';
-import { ButtonProps } from '../../../navigation/button';
-export declare const SDKNavigation: React.FC<{
-    customOverlays: Overlays;
-    activeButton?: ButtonProps['id'];
-    sdk: StreamLayerSDK;
-}>;

package/lib/ui/app/masters/Navigation/index.js

@@ -1,30 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useStore as s } from "@nanostores/react";
-import { useMemo as e } from "react";
-import { AvailableFeatures as d } from "@streamlayer/sdk-web-features";
-import { Navigation as v } from "../../../navigation/index.js";
-import { Button as b } from "../../../navigation/button/index.js";
-const x = ({ customOverlays: a, activeButton: c, sdk: i }) => {
-  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), p = e(() => {
-    const o = (r == null ? void 0 : r.data) || (t == null ? void 0 : t.data);
-    return o != null && o.overlays ? o.overlays : [];
-  }, [t, r]), m = e(
-    () => [
-      ...p.filter(({ enableSdkButton: o }) => o).map((o) => ({
-        id: o.type,
-        onClick: () => i.openFeature(o.type),
-        disabled: !(o.type in d),
-        label: o.name,
-        icon: /* @__PURE__ */ n("img", { src: o.icon, alt: "" }),
-        /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
-        position: o.position * 10
-      })),
-      ...Object.values(a).map(({ button: o }) => o)
-    ].sort((o, l) => o.position - l.position),
-    [p, i, a]
-  );
-  return /* @__PURE__ */ n(v, { children: m.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === c })) });
-};
-export {
-  x as SDKNavigation
-};

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

@@ -1,10 +0,0 @@
-/// <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 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/masters/Notifications/Onboarding/Notification/styles.js

@@ -1,50 +0,0 @@
-import { styled as s } from "@linaria/react";
-import { SvgIcon as o } from "../../../../../icons/index.js";
-const c = /* @__PURE__ */ s("div")({
-  name: "Container",
-  class: "cy1ghlr",
-  propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
-  name: "CloseIconWrap",
-  class: "cg5f18y",
-  propsAsIs: !1
-}), n = () => o, l = /* @__PURE__ */ s(n())({
-  name: "CloseIcon",
-  class: "c19va0ky",
-  propsAsIs: !0
-}), p = /* @__PURE__ */ s("div")({
-  name: "Title",
-  class: "tnfu29o",
-  propsAsIs: !1
-}), r = /* @__PURE__ */ s("img")({
-  name: "SponsorLogo",
-  class: "svw1c58",
-  propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
-  name: "PresentsTitle",
-  class: "pqfs3yj",
-  propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
-  name: "Subtitle",
-  class: "s1fma09t",
-  propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
-  name: "Description",
-  class: "dcghfqc",
-  propsAsIs: !1
-}), I = /* @__PURE__ */ s("button")({
-  name: "ActionButton",
-  class: "a1v24usc",
-  propsAsIs: !1
-});
-export {
-  I as ActionButton,
-  l as CloseIcon,
-  a as CloseIconWrap,
-  c as Container,
-  m as Description,
-  i as PresentsTitle,
-  r as SponsorLogo,
-  f as Subtitle,
-  p as Title
-};

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

@@ -1,172 +0,0 @@
-import { jsx as n, jsxs as x, Fragment as T } from "react/jsx-runtime";
-import { styled as S } from "@linaria/react";
-import { useStore as F } from "@nanostores/react";
-import { useRef as E, useState as A, useMemo as _, useLayoutEffect as G, useEffect as M } from "react";
-import { FeatureType as P } from "@streamlayer/sdk-web-types";
-import { useImagesPreload as R } from "../../../useImagesPreload.js";
-import { scrollIntoAppView as V } from "../../../useSdkScroll.js";
-import { OnboardingUI as W } from "../../../../gamification/onboarding/index.js";
-import { ModalPortal as $ } from "../../../../modal/index.js";
-import { ShowIn as j } from "../../../../show-in/index.js";
-import { m as O } from "../../../../../mastersLogoSolid-B4Dz-vm1.js";
-import { Onboarding as k } from "./Notification/index.js";
-const y = [{
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_1.png",
-  tagline: "Featured groups+ experience",
-  headline: /* @__PURE__ */ x(T, {
-    children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Featured Groups +"]
-  })
-}, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
-  headline: "Get real-time insights"
-}, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",
-  headline: "Predictions, trivia & polls synced to match play"
-}, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",
-  headline: "Win points for every answer you get right"
-}, {
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
-  headline: "Compete against friends on the leaderboard"
-}], q = /* @__PURE__ */ S("div")({
-  name: "OnboardingContainer",
-  class: "o1s8kvh4",
-  propsAsIs: !1
-}), z = () => j, D = /* @__PURE__ */ S(z())({
-  name: "OnboardingNotificationContainer",
-  class: "o1b0248i",
-  propsAsIs: !0
-}), L = /* @__PURE__ */ S("div")({
-  name: "InnerContainer",
-  class: "ii6o0e",
-  propsAsIs: !1
-}), U = ({
-  deepLink: d,
-  onboardingOpts: r,
-  notification: o,
-  gamification: u,
-  loading: i,
-  renderToNode: v,
-  sdk: l
-}) => {
-  var a, h, b, f, C, m, s;
-  const c = F(u.friends.getStore()), [e, I] = A(void 0), g = _(() => {
-    var p, w;
-    const t = l.getInviter();
-    return t ? (w = (p = c.data) == null ? void 0 : p.find(({
-      slId: B
-    }) => B === t)) == null ? void 0 : w.name : "";
-  }, [c.data, l]);
-  return M(() => {
-    const t = d.$store.subscribe((p) => {
-      p && I(p.data);
-    });
-    return () => {
-      t();
-    };
-  }, [d.$store]), /* @__PURE__ */ n(q, {
-    children: /* @__PURE__ */ n(W, {
-      loading: i,
-      renderToNode: v,
-      rules: [{
-        label: "Answer as many questions as you like.",
-        icon: "icon-btn-feature-groups"
-      }, {
-        label: "Win points for each correct trivia or prediction answer.",
-        icon: "icon-thumb-up"
-      }, {
-        label: "Top the leader board and best your friends.",
-        icon: "icon-trophy"
-      }],
-      rulesBtnLabel: (a = r.rules) == null ? void 0 : a.buttonLabel,
-      rulesTitle: (h = r.rules) == null ? void 0 : h.heading,
-      termsTitle: "Terms and Conditions",
-      termsText: (b = r.rules) == null ? void 0 : b.terms,
-      steps: y,
-      primaryColor: (f = r.inviteCard) == null ? void 0 : f.iconColor,
-      inviteLink: e,
-      inviteCardTitle: (C = r.inviteCard) == null ? void 0 : C.heading,
-      inviteCardSubtext: (m = r.inviteCard) == null ? void 0 : m.subtext,
-      inviteCardBtnLabel: (s = r.inviteCard) == null ? void 0 : s.buttonLabel,
-      onClose: () => {
-        var t;
-        (t = o.close) == null || t.call(o);
-      },
-      gamification: u,
-      sdk: l,
-      inviterName: g
-    })
-  });
-}, se = ({
-  sdk: d,
-  notification: r,
-  saveHeight: o,
-  style: u,
-  appNode: i,
-  sdkInDesktopView: v,
-  responsiveStore: l
-}) => {
-  var m;
-  const c = E(null), e = r.data.onboarding, [I, g] = A(e == null ? void 0 : e.instantOpen), a = d.getFeature(P.GAMES), h = _(() => y == null ? void 0 : y.map(({
-    graphicSrc: s
-  }) => s), []), {
-    screen: b
-  } = F(l, {
-    keys: ["screen"]
-  });
-  (m = e == null ? void 0 : e.titleCard) != null && m.media && (e.titleCard.media.sponsorLogo = O), G(() => {
-    var s;
-    o(((s = c.current) == null ? void 0 : s.getBoundingClientRect().height) || 0);
-  }, [o]);
-  const {
-    loading: f,
-    throttled: C
-  } = R(h);
-  return I && a && e && i.current && !C ? /* @__PURE__ */ n($, {
-    container: i,
-    useContainer: !v,
-    children: /* @__PURE__ */ n(U, {
-      notification: r,
-      setOpened: g,
-      gamification: a,
-      onboardingOpts: e,
-      deepLink: a.deepLink,
-      loading: f,
-      renderToNode: i,
-      sdk: d
-    })
-  }) : /* @__PURE__ */ x(T, {
-    children: [/* @__PURE__ */ n(L, {
-      ref: c,
-      style: {
-        position: "absolute",
-        visibility: "hidden"
-      },
-      children: /* @__PURE__ */ n(k, {
-        close: () => {
-        },
-        action: () => {
-        },
-        onboarding: e
-      })
-    }), /* @__PURE__ */ n(D, {
-      style: u,
-      hiding: r.hiding,
-      children: /* @__PURE__ */ n(L, {
-        children: /* @__PURE__ */ n(k, {
-          close: r.close,
-          action: () => {
-            var t;
-            g(!0), (((t = i.current) == null ? void 0 : t.getBoundingClientRect().y) || 0) < 0 && V(i, b.size, {
-              behavior: "smooth"
-            });
-          },
-          onboarding: e
-        })
-      })
-    })]
-  });
-};
-export {
-  se as Onboarding
-};

package/lib/ui/app/masters/Notifications/styles.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const Container: any;
-export declare const InnerContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const HiddenContainer: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}>;
-export declare const NotificationRefreshing: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Pill: any;

package/lib/ui/app/masters/Notifications/styles.js

@@ -1,31 +0,0 @@
-import { styled as s } from "@linaria/react";
-import { Pill as n } from "../../../gamification/question/notification/pill/index.js";
-import { ShowIn as o } from "../../../show-in/index.js";
-const e = () => o, l = /* @__PURE__ */ s(e())({
-  name: "Container",
-  class: "c1rc4ozt",
-  propsAsIs: !0
-}), i = /* @__PURE__ */ s("div")({
-  name: "InnerContainer",
-  class: "i1ddmb3r",
-  propsAsIs: !1
-}), t = () => i, m = /* @__PURE__ */ s(t())({
-  name: "HiddenContainer",
-  class: "htinjsj",
-  propsAsIs: !0
-}), d = /* @__PURE__ */ s("div")({
-  name: "NotificationRefreshing",
-  class: "nig84ar",
-  propsAsIs: !1
-}), r = () => n, f = /* @__PURE__ */ s(r())({
-  name: "Pill",
-  class: "pt3kgqi",
-  propsAsIs: !0
-});
-export {
-  l as Container,
-  m as HiddenContainer,
-  i as InnerContainer,
-  d as NotificationRefreshing,
-  f as Pill
-};

package/lib/ui/app/masters/Points/index.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-export declare const StreamLayerSDKPoints: React.FC<{
-    sdk: StreamLayerSDK;
-}>;

package/lib/ui/app/masters/useMastersApp.js

@@ -1,68 +0,0 @@
-import { useStore as u } from "@nanostores/react";
-import { useRef as y, useState as d, useCallback as z, useEffect as c } from "react";
-import { FeatureType as l } from "@streamlayer/sdk-web-types";
-import "./Navigation/MastersNavigation/index.js";
-import { FeaturedGroupsButtonId as p } from "../../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as i } from "../../navigation/button/Channels.js";
-const C = (e) => {
-  const f = y(""), [v, a] = d(!1), E = u(e.status), g = u(e.sdkStore.slStreamId), n = u(e.userId()), m = u(e.getActiveFeature()), o = E === "ready" && !!g.data, [A, r] = d(p), S = z(
-    (t, s) => {
-      r(s), t && e.createEventSession(t), s === p ? window.requestAnimationFrame(() => {
-        e.openFeature(l.GAMES);
-      }) : e.closeFeature(!1);
-    },
-    [e]
-  );
-  c(() => {
-    !o && A === p && (r(i), e.closeFeature(!0));
-  }, [o, A, e]), c(() => {
-    m === l.GAMES ? r(p) : m === l.UNSET && r(i);
-    const t = e.getFeature(l.GAMES);
-    t && (t.closeQuestion(), t.closeUser());
-  }, [m, e]);
-  const F = (t) => {
-    f.current = t, a(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: s, err: I }) => {
-      if (I) {
-        S(t, i);
-        return;
-      }
-      if (s) {
-        e.isUserAuthorized().then((h) => {
-          if (h) {
-            S(t, i);
-            return;
-          } else
-            e.disableApp();
-        });
-        return;
-      }
-    });
-  }, b = () => {
-    a(!1), e.disableApp();
-  };
-  return c(() => {
-    if (!n) {
-      o && (r(i), e.disableApp());
-      return;
-    }
-    if (n && f.current && v) {
-      e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
-        e.createEventSession(f.current);
-      });
-      return;
-    }
-  }, [n]), c(() => () => {
-    a(!1), e.disableApp();
-  }, [a, e]), {
-    sdkEnabled: v,
-    sdkReady: o,
-    activeOverlay: A,
-    activateAndLoadOverlay: S,
-    activateEventWithId: F,
-    deactivate: b,
-    isLogged: !!n
-  };
-};
-export {
-  C as useMastersApp
-};

package/lib/ui/app/masters/useMastersContext.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-export declare const MastersContext: import("react").Context<{
-    sdk: StreamLayerSDK | null;
-}>;
-export declare const useMastersContext: () => {
-    sdk: StreamLayerSDK | null;
-};

package/lib/ui/app/styles.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export declare const SDKContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const SDKScrollContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const SDKContentContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const SDKWhiteContainer: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}>;
-export declare const TabsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const LeaderboardContainer: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}>;
-export declare const TabsNavContainer: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}>;
-export declare const UserSummaryContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/login/demo.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import '@streamlayer/sdk-web-anonymous-auth';
-export declare const LoginComponent: React.FC<{
-    sdk: StreamLayerSDK;
-}>;

package/lib/ui/login/styles.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const Panel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Form: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & Record<never, unknown>>;
-export declare const FormTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const FormDescription: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const FormSubmit: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const FormInputContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Digits: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/login/styles.js

@@ -1,39 +0,0 @@
-import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
-  name: "Panel",
-  class: "p1liu7r",
-  propsAsIs: !1
-}), e = /* @__PURE__ */ s("form")({
-  name: "Form",
-  class: "fhf9n1f",
-  propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
-  name: "FormTitle",
-  class: "fmf7e3h",
-  propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
-  name: "FormDescription",
-  class: "fg7be0w",
-  propsAsIs: !1
-}), m = /* @__PURE__ */ s("button")({
-  name: "FormSubmit",
-  class: "fvxx8fg",
-  propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
-  name: "FormInputContainer",
-  class: "f1sfffsg",
-  propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
-  name: "Digits",
-  class: "d1majgb2",
-  propsAsIs: !1
-});
-export {
-  f as Digits,
-  e as Form,
-  r as FormDescription,
-  t as FormInputContainer,
-  m as FormSubmit,
-  n as FormTitle,
-  a as Panel
-};