@streamlayer/react-ui 0.54.1 → 0.56.0

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const DemoContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const UserStatisticsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const QuestionsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Buttons: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Button: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

package/lib/ui/demo/styles.js

@@ -1,58 +0,0 @@
-import { styled as o } from "@linaria/react";
-const e = o.div`
-  position: relative;
-  height: 100%;
-  overflow: hidden;
-`, i = o.div`
-  margin-bottom: 15px;
-`, r = o.div`
-  position: relative;
-  height: calc(100% - 160px);
-`, n = o.div`
-  display: flex;
-  margin-bottom: 10px;
-`, a = o.button`
-  background: rgb(29, 123, 255);
-  border: none;
-  color: #fff;
-  padding: 5px 6px;
-  border-radius: 3px;
-  cursor: pointer;
-  margin-right: 5px;
-  transition: all 0.3s ease-in;
-
-  & > img {
-    max-width: 10px;
-    max-height: 10px;
-    margin-right: 5px;
-  }
-
-  &:enabled:hover {
-    box-shadow: inset 0 0 0 2em rgb(2, 88, 208);
-  }
-
-  &[data-selected='true'] {
-    box-shadow: inset 0 0 0 2em rgb(0, 60, 145);
-
-    &:enabled:hover {
-      box-shadow: inset 0 0 0 2em rgb(0, 60, 145);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    background-color: gray;
-    cursor: default;
-  }
-
-  &[data-enable_sdk_button='false'] {
-    opacity: 0.7;
-  }
-`;
-export {
-  a as Button,
-  n as Buttons,
-  e as DemoContainer,
-  r as QuestionsContainer,
-  i as UserStatisticsContainer
-};

package/lib/ui/notifications/decorator.d.ts

@@ -1,4 +0,0 @@
-import type { Decorator } from '@storybook/react';
-export declare const NotificationsList: Decorator<{
-    concurrency: number;
-}>;

package/lib/ui/notifications/decorator.js

@@ -1,64 +0,0 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { styled as m } from "@linaria/react";
-import { useMemo as b, useRef as a } from "react";
-import { NotificationType as o, Notifications as f } from "@streamlayer/sdk-web-notifications";
-import { Notifications as l } from "./index.js";
-import "@nanostores/react";
-import "./notification/index.js";
-import "./notification/onboarding-inapp/index.js";
-import "./notification/onboarding-inapp/styles.js";
-import "./notification/question-inapp/index.js";
-import "../../icon-exit-d3f9fc80.js";
-import "./notification/question-inapp/styles.js";
-import "./notification/styles.js";
-import "./styles.js";
-const c = m.button`
-  border: none;
-  outline: none;
-  background-color: var(--color-green-primary-btn);
-  color: var(--color-white);
-  cursor: pointer;
-  padding: 5px;
-  min-width: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  margin-top: 10px;
-`, u = {
-  [o.QUESTION]: {
-    icon: "https://static-next.streamlayer.io/1a0525a58e123d342ed43ebdf5bacc9c/f2147312-357a-4cb6-a6fa-879472609344/e675f428-d234-40fd-95db-e09bc2143852.png"
-  },
-  [o.ONBOARDING]: {
-    header: "Header",
-    subtitle: "Free to Play Interactive game",
-    graphicBg: "https://storage.googleapis.com/cdn.streamlayer.io/organization/studioicons/oval.png",
-    icon: "https://static-next.streamlayer.io/1a0525a58e123d342ed43ebdf5bacc9c/6bde38a5-d5da-4f8d-b491-601370372695/6996bc2d-a8b0-4b93-82d6-015bc981e666.png",
-    sponsorLogo: "https://static-next.streamlayer.io/1a0525a58e123d342ed43ebdf5bacc9c/95da4770-fb56-4bb7-bba6-94f97e6f1fea/8c6a2184-453e-47d2-aa77-5478da0ebb51.png",
-    primaryColor: "#9c0061"
-  }
-}, R = (g, { args: t }) => {
-  console.log("NotificationsList", t);
-  const e = b(
-    () => new f({ concurrency: t.concurrency || 1, animationDelay: 300 }),
-    [t.concurrency]
-  ), d = a(0), s = a(0), r = (i) => {
-    e.add({
-      type: i,
-      autoHideDuration: 5e3,
-      id: Date.now().toString(),
-      data: {
-        ...u[i],
-        title: i === o.ONBOARDING ? `Onboarding ${++s.current}` : `Question ${++d.current}`
-      }
-    });
-  };
-  return /* @__PURE__ */ p("div", { children: [
-    /* @__PURE__ */ n(l, { notificationsStore: e.getQueueStore() }),
-    /* @__PURE__ */ n(c, { onClick: () => r(o.QUESTION), children: "Add question" }),
-    /* @__PURE__ */ n(c, { onClick: () => r(o.ONBOARDING), children: "Add onboarding" })
-  ] });
-};
-export {
-  R as NotificationsList
-};

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { NotificationsList } from '@streamlayer/sdk-web-notifications';
-export declare const Notifications: React.FC<{
-    notificationsStore: NotificationsList;
-}>;

package/lib/ui/notifications/index.js

@@ -1,28 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useStore as p } from "@nanostores/react";
-import { NotificationComponent as n } from "./notification/index.js";
-import { NotificationsContainer as e } from "./styles.js";
-import "react";
-import "@streamlayer/sdk-web-notifications";
-import "./notification/onboarding-inapp/index.js";
-import "./notification/onboarding-inapp/styles.js";
-import "@linaria/react";
-import "./notification/question-inapp/index.js";
-import "../../icon-exit-d3f9fc80.js";
-import "./notification/question-inapp/styles.js";
-import "./notification/styles.js";
-const S = ({ notificationsStore: i }) => {
-  const o = p(i);
-  return /* @__PURE__ */ r(e, { children: o == null ? void 0 : o.map((t, m) => /* @__PURE__ */ r(
-    n,
-    {
-      index: m,
-      total: o.length,
-      ...t
-    },
-    t.id
-  )) });
-};
-export {
-  S as Notifications
-};

package/lib/ui/notifications/notification/index.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { type Notification } from '@streamlayer/sdk-web-notifications';
-export declare const NotificationComponent: React.FC<Notification & {
-    index: number;
-    total: number;
-}>;

package/lib/ui/notifications/notification/index.js

@@ -1,36 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useRef as f, useEffect as s } from "react";
-import { NotificationType as i } from "@streamlayer/sdk-web-notifications";
-import { OnBoardingInApp as N } from "./onboarding-inapp/index.js";
-import { QuestionInApp as e } from "./question-inapp/index.js";
-import { NotificationContainer as a } from "./styles.js";
-import "./onboarding-inapp/styles.js";
-import "@linaria/react";
-import "../../../icon-exit-d3f9fc80.js";
-import "./question-inapp/styles.js";
-const l = {
-  [i.ONBOARDING]: N,
-  [i.QUESTION]: e
-}, y = ({
-  index: t,
-  total: m,
-  ...r
-}) => {
-  const o = f(null), p = l[r.type] || e;
-  return s(() => {
-    o.current !== null && r.hiding && o.current.animate([{ right: "0" }, { right: "-100%" }], {
-      duration: 300,
-      fill: "forwards"
-    });
-  }, [r.hiding]), /* @__PURE__ */ n(
-    a,
-    {
-      ref: o,
-      style: { zIndex: t + 1, transform: `translateY(${100 * (m - t - 1)}%)` },
-      children: /* @__PURE__ */ n(p, { ...r })
-    }
-  );
-};
-export {
-  y as NotificationComponent
-};

package/lib/ui/notifications/notification/onboarding-inapp/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { Notification } from '@streamlayer/sdk-web-notifications';
-export declare const OnBoardingInApp: React.FC<Notification>;

package/lib/ui/notifications/notification/onboarding-inapp/index.js

@@ -1,25 +0,0 @@
-import { jsxs as n, jsx as i, Fragment as t } from "react/jsx-runtime";
-import { Container as g, CloseBtn as s, IconClose as C, BackgroundBlock as M, Icon as p, ContentWrap as m, SponsorLogo as Z, SponsorText as b, ContentTitle as D, ContentSubtitle as S, ActionBtn as h } from "./styles.js";
-import "@linaria/react";
-const W = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDQ2NSI+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY4IiB4PSIxLjI1IiB3aWR0aD0iMTIuMzc0NCIgaGVpZ2h0PSIxLjc2Nzc3IiByeD0iMC44ODM4ODQiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDEuMjUgMCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY5IiB5PSI4Ljc1IiB3aWR0aD0iMTIuMzc0NCIgaGVpZ2h0PSIxLjc2Nzc3IiByeD0iMC44ODM4ODQiIHRyYW5zZm9ybT0icm90YXRlKC00NSAwIDguNzUpIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+Cjwvc3ZnPgo=", P = ({
-  close: I,
-  action: l,
-  data: { icon: c, header: a, title: e, subtitle: r, graphicBg: d, sponsorLogo: o }
-}) => /* @__PURE__ */ n(g, { children: [
-  /* @__PURE__ */ i(s, { onClick: I, children: /* @__PURE__ */ i(C, { alt: "icon-close-onboarding-inapp", src: W }) }),
-  /* @__PURE__ */ i(M, { style: { backgroundImage: `url(${d || ""})` }, children: c && /* @__PURE__ */ i(p, { alt: "onboarding-inapp-icon", src: c }) }),
-  /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ n("div", { children: [
-      /* @__PURE__ */ i("div", { children: o ? /* @__PURE__ */ n(t, { children: [
-        /* @__PURE__ */ i(Z, { alt: "sponsor-logo", src: o }),
-        /* @__PURE__ */ i(b, { children: "Presents" })
-      ] }) : a || "" }),
-      /* @__PURE__ */ i(D, { children: e || "" }),
-      /* @__PURE__ */ i(S, { children: r || "" })
-    ] }),
-    /* @__PURE__ */ i(h, { onClick: l, children: "Play" })
-  ] })
-] });
-export {
-  P as OnBoardingInApp
-};

package/lib/ui/notifications/notification/onboarding-inapp/styles.d.ts

@@ -1,12 +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 BackgroundBlock: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Icon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const ContentWrap: 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 SponsorText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const ContentTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ContentSubtitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ActionBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const CloseBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const IconClose: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/notifications/notification/onboarding-inapp/styles.js

@@ -1,77 +0,0 @@
-import { styled as o } from "@linaria/react";
-const n = o.div`
-  background-color: var(--color-transparent-onboarding-inapp);
-  max-height: 120px;
-`, r = o.div`
-  background-repeat: no-repeat;
-  background-size: contain;
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-  width: 72px;
-  display: flex;
-  align-items: center;
-`, e = o.img`
-  width: 56px;
-  margin-left: 8px;
-`, i = o.div`
-  padding: 16px 8px 16px 0px;
-  margin-right: 8px;
-  font-size: 12px;
-  font-weight: 600;
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-  align-items: center;
-`, p = o.img`
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-`, a = o.span`
-  font-style: italic;
-  font-weight: 600;
-  font-size: 8px;
-  text-transform: uppercase;
-`, s = o.div`
-  margin-top: 8px;
-  margin-bottom: 2px;
-  font-size: 14px;
-`, c = o.div`
-  color: var(--color-grey-primary-onboarding-inapp);
-`, d = o.button`
-  border: none;
-  outline: none;
-  background-color: var(--color-green-primary-btn);
-  padding: 8px 16px;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  border-radius: 24px;
-`, x = o.button`
-  position: absolute;
-  right: 8px;
-  top: 4px;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  padding: 5px;
-  color: #fff;
-  cursor: pointer;
-  border-radius: 50%;
-`, g = o.img`
-  width: 10px;
-  height: 10px;
-`;
-export {
-  d as ActionBtn,
-  r as BackgroundBlock,
-  x as CloseBtn,
-  n as Container,
-  c as ContentSubtitle,
-  s as ContentTitle,
-  i as ContentWrap,
-  e as Icon,
-  g as IconClose,
-  p as SponsorLogo,
-  a as SponsorText
-};

package/lib/ui/notifications/notification/question-inapp/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { Notification } from '@streamlayer/sdk-web-notifications';
-export declare const QuestionInApp: React.FC<Notification>;

package/lib/ui/notifications/notification/question-inapp/index.js

@@ -1,23 +0,0 @@
-import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import { useCallback as a } from "react";
-import { c as s } from "../../../../icon-exit-d3f9fc80.js";
-import { Container as d, IconWrap as m, Icon as C, Content as h, TitleWrap as I, Title as f, CloseBtnWrap as k, CloseBtn as u, CloseIcon as x } from "./styles.js";
-import "@linaria/react";
-const B = ({ close: o, action: p, data: { color: r, icon: i, title: c } }) => {
-  const e = a(
-    (l) => {
-      l.stopPropagation(), o == null || o();
-    },
-    [o]
-  );
-  return /* @__PURE__ */ t(d, { onClick: p, children: [
-    /* @__PURE__ */ n(m, { style: r ? { backgroundColor: r } : {}, children: i && /* @__PURE__ */ n(C, { alt: "in-app-icon", src: i }) }),
-    /* @__PURE__ */ t(h, { children: [
-      /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(f, { id: "in-app-title", children: c || "" }) }),
-      /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(u, { onClick: e, children: /* @__PURE__ */ n(x, { alt: "close-in-app-icon", src: s }) }) })
-    ] })
-  ] });
-};
-export {
-  B as QuestionInApp
-};

package/lib/ui/notifications/notification/question-inapp/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 IconWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Icon: 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 TitleWrap: 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>>;
-export declare const CloseBtnWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const CloseBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const CloseIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/notifications/notification/question-inapp/styles.js

@@ -1,61 +0,0 @@
-import { styled as e } from "@linaria/react";
-const o = e.div`
-  border: 1px solid var(--color-blue-primary);
-  background-color: var(--color-bg-transparent);
-  cursor: pointer;
-  overflow: hidden;
-`, n = e.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 14px;
-  background-color: var(--color-blue-primary);
-`, i = e.img`
-  max-width: 40px;
-  max-height: 40px;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-`, r = e.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-`, d = e.div`
-  padding-left: 20px;
-  padding-right: 5px;
-  font-weight: 700;
-  font-size: 14px;
-  flex: 1;
-`, l = e.div`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  word-break: break-word;
-  text-overflow: ellipsis;
-`, a = e.div`
-  padding: 20px;
-`, c = e.button`
-  border: none;
-  outline: none;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`, s = e.img`
-  width: 24px;
-  height: 24px;
-`;
-export {
-  c as CloseBtn,
-  a as CloseBtnWrap,
-  s as CloseIcon,
-  o as Container,
-  r as Content,
-  i as Icon,
-  n as IconWrap,
-  l as Title,
-  d as TitleWrap
-};

package/lib/ui/notifications/notification/styles.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const NotificationContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/notifications/notification/styles.js

@@ -1,32 +0,0 @@
-import { styled as i } from "@linaria/react";
-const r = i.div`
-  position: absolute;
-  right: 0;
-  transition: transform 0.3s ease;
-  width: 100%;
-
-  > div {
-    border-radius: 8px;
-    width: 100%;
-    backdrop-filter: blur(10px);
-    display: flex;
-    color: var(--color-white);
-    animation: slide-in 0.3s ease-in;
-    position: relative;
-    box-sizing: border-box;
-    user-select: none;
-  }
-
-  @keyframes slide-in {
-    from {
-      right: -100%;
-    }
-
-    to {
-      right: 0;
-    }
-  }
-`;
-export {
-  r as NotificationContainer
-};

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const NotificationsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/notifications/styles.js

@@ -1,15 +0,0 @@
-import { styled as t } from "@linaria/react";
-const o = t.div`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  max-width: 600px;
-  width: 100%;
-
-  > div {
-    margin-bottom: 10px;
-  }
-`;
-export {
-  o as NotificationsContainer
-};