@streamlayer/react-ui 0.35.0 → 0.37.0

package/lib/ui/navigation/button/LeaderBoard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ButtonProps } from '.';
+export declare const LeaderBoardButtonId = "leaderboard";
+export declare const LeaderBoardButton: React.FC<Omit<ButtonProps, 'label' | 'id' | 'icon'>>;

package/lib/ui/navigation/button/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FeatureType } from '@streamlayer/sdk-web-types';
+export type ButtonProps = {
+    id: FeatureType | string;
+    icon?: React.ReactNode;
+    label?: string;
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    position?: number;
+};
+export declare const Button: React.FC<ButtonProps>;

package/lib/ui/navigation/button/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const ButtonIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ButtonProps } from './button';
+export declare const Navigation: React.FC<{
+    children: React.ReactElement<ButtonProps>[];
+    className?: string;
+}>;

package/lib/ui/navigation/masters.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Navigation: import("@linaria/react").StyledMeta & import("react").FC<{
+    children: import("react").ReactElement<import("./button").ButtonProps, string | import("react").JSXElementConstructor<any>>[];
+    className?: string | undefined;
+}>;

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <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/onboarding-inapp/index.d.ts

@@ -0,0 +1,3 @@
+/// <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/styles.d.ts

@@ -0,0 +1,12 @@
+/// <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/question-inapp/index.d.ts

@@ -0,0 +1,3 @@
+/// <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/styles.d.ts

@@ -0,0 +1,10 @@
+/// <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/styles.d.ts

@@ -0,0 +1,2 @@
+/// <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/styles.d.ts

@@ -0,0 +1,2 @@
+/// <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/theme/ThemeColors.d.ts

@@ -0,0 +1 @@
+export declare const ThemeColors: () => import("react/jsx-runtime").JSX.Element[];

package/lib/ui/theme/Typography.d.ts

@@ -0,0 +1,2 @@
+export declare const useCustomFonts: () => void;
+export declare const Typography: () => import("react/jsx-runtime").JSX.Element;

package/lib/ui/theme/constants.d.ts

@@ -0,0 +1,79 @@
+export declare const MASTERS_COLORS: {
+    PRIMARY_GREEN1: string;
+    PRIMARY_GREEN2: string;
+    PRIMARY_GREEN3: string;
+    PRIMARY_GREEN4: string;
+    SECONDARY_RED1: string;
+    SECONDARY_RED2: string;
+    SECONDARY_YELLOW: string;
+    SECONDARY_GREEN5: string;
+    NEUTRALS_WHITE: string;
+    NEUTRALS_GRAY1: string;
+    NEUTRALS_GRAY2: string;
+    NEUTRALS_GRAY3: string;
+    NEUTRALS_GRAY4: string;
+    NEUTRALS_GRAY5: string;
+    NEUTRALS_GRAY6: string;
+    NEUTRALS_GRAY7: string;
+    NEUTRALS_GRAY8: string;
+    NEUTRALS_GRAY9: string;
+    NEUTRALS_BLACK: string;
+};
+export declare const COLORS: {
+    BG_TRANSPARENT: string;
+    BG_TRANSPARENT_VOTE_CONTAINER: string;
+    BG_TRANSPARENT_ITEM: string;
+    BG_TRANSPARENT_ITEM_VOTE: string;
+    BG_TRANSPARENT_ITEM_SUCCESS: string;
+    BG_TRANSPARENT_ITEM_ERROR: string;
+    BG_TRANSPARENT_VOTE_PROGRESS: string;
+    BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: string;
+    BG_TRANSPARENT_VOTE_PROGRESS_ERROR: string;
+    BG_TRANSPARENT_USER_CONTAINER: string;
+    BG_TRANSPARENT_ONBOARDING_INAPP: string;
+    LEADERBOARD_UNIT: string;
+    BLUE_PRIMARY: string;
+    RED_PRIMARY: string;
+    RED_SECONDARY: string;
+    BLUE_QUESTION_ACTION_BTN: string;
+    WHITE: string;
+    GREY_1: string;
+    GREY_2: string;
+    GREY_3: string;
+    GREY_4: string;
+    GREY_PRIMARY_ONBOARDING_INAPP: string;
+    BLACK_1: string;
+    GREEN_1: string;
+    RED_1: string;
+    RED_2: string;
+    GREY_PRIMARY: string;
+    DIVIDER_COLOR_PRIMARY: string;
+    DIVIDER_COLOR_SECONDARY: string;
+    GREEN_PRIMARY_BTN: string;
+} & {
+    PRIMARY_GREEN1: string;
+    PRIMARY_GREEN2: string;
+    PRIMARY_GREEN3: string;
+    PRIMARY_GREEN4: string;
+    SECONDARY_RED1: string;
+    SECONDARY_RED2: string;
+    SECONDARY_YELLOW: string;
+    SECONDARY_GREEN5: string;
+    NEUTRALS_WHITE: string;
+    NEUTRALS_GRAY1: string;
+    NEUTRALS_GRAY2: string;
+    NEUTRALS_GRAY3: string;
+    NEUTRALS_GRAY4: string;
+    NEUTRALS_GRAY5: string;
+    NEUTRALS_GRAY6: string;
+    NEUTRALS_GRAY7: string;
+    NEUTRALS_GRAY8: string;
+    NEUTRALS_GRAY9: string;
+    NEUTRALS_BLACK: string;
+};
+export declare const FONT: {
+    REGULAR: string;
+    SERIF: string;
+    COLOR: string;
+};
+export declare const colors: string;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StreamLayerThemeProvider: React.FC<{
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;

package/lib/ui/theme/masters.d.ts

@@ -0,0 +1 @@
+export declare const mastersVariables: import("@linaria/core").LinariaClassName;

package/lib/ui/theme/theme.d.ts

@@ -0,0 +1,3 @@
+export declare const themeStr: string;
+export declare const theme: import("@linaria/core").LinariaClassName;
+export declare const ThemeVariables: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/createDemo.js

@@ -1,17 +1,17 @@
 import { jsx as e, jsxs as g, Fragment as y } from "react/jsx-runtime";
 import { useMemo as u, useState as i, useEffect as E } from "react";
 import { anonymous as l } from "@streamlayer/sdk-web-anonymous-auth";
-import { Developer as D } from "./components/developer.js";
+import { Developer as D } from "./debug/components/developer.js";
 import { DeveloperStorage as w } from "./storage.js";
 import { useStreamLayerApp as x } from "./useStreamLayerApp.js";
 import "@linaria/react";
-import "./components/bypassLogin.js";
-import "./components/envToggle.js";
-import "./components/eventInput.js";
+import "./debug/components/bypassLogin.js";
+import "./debug/components/envToggle.js";
+import "./debug/components/eventInput.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-core";
-import "./components/styles.js";
-import "./components/sdkKey.js";
+import "./debug/components/styles.js";
+import "./debug/components/sdkKey.js";
 import "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web";
 function K({

package/lib/utils/{components → debug/components}/developer.js

@@ -1,38 +1,33 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { styled as i } from "@linaria/react";
-import { useMemo as x, useState as g } from "react";
-import { DeveloperStorage as h } from "../storage.js";
-import { BypassLogin as u } from "./bypassLogin.js";
-import { EnvToggle as b } from "./envToggle.js";
+import { styled as p } from "@linaria/react";
+import { useMemo as f, useState as g } from "react";
+import { DeveloperStorage as u } from "../../storage.js";
+import { BypassLogin as b } from "./bypassLogin.js";
+import { EnvToggle as h } from "./envToggle.js";
 import { EventInput as v } from "./eventInput.js";
 import { SdkKey as y } from "./sdkKey.js";
 import "@streamlayer/sdk-web-storage";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-core";
 import "./styles.js";
-const w = i.div`
+const w = p.div`
   position: fixed;
   bottom: 0;
   right: 0;
   max-width: 600px;
-`, D = i.div`
+
+  font-family: system-ui;
+  background: rgba(29, 123, 255, 0.5);
+  border-top-left-radius: 10px;
+  backdrop-filter: blur(5px);
+`, D = p.div`
   flex-direction: column;
   gap: 10px;
   margin-right: 60px;
   display: flex;
-  animation: show-dev-items 0.3s ease-in-out;
-  transform-origin: bottom right;
-
-  @keyframes show-dev-items {
-    from {
-      transform: scale(0);
-    }
-
-    to {
-      transform: scale(1);
-    }
-  }
-`, j = i.button`
+  margin-left: 10px;
+  margin-top: 10px;
+`, j = p.button`
   position: absolute;
   z-index: 10000;
   bottom: 10px;
@@ -71,19 +66,19 @@ const w = i.div`
     width: 100%;
     height: 4px;
   }
-`, q = ({ sdk: t, sdkKey: s, setSdkKey: n, env: m, setEnv: p, event: d, setEvent: l }) => {
-  const r = x(() => new h(), []), [a, c] = g(!1);
+`, q = ({ sdk: t, sdkKey: d, setSdkKey: i, env: s, setEnv: n, event: m, setEvent: l }) => {
+  const r = f(() => new u(), []), [a, x] = g(!1);
   return /* @__PURE__ */ e(w, { children: [
-    /* @__PURE__ */ e(j, { "data-opened": a.toString(), onClick: () => c((f) => !f), children: [
+    /* @__PURE__ */ e(j, { "data-opened": a.toString(), onClick: () => x((c) => !c), children: [
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {})
     ] }),
     a && /* @__PURE__ */ e(D, { children: [
-      p && /* @__PURE__ */ o(b, { env: m, setEnv: p, storage: r }),
-      n && /* @__PURE__ */ o(y, { sdkKey: s, setSdkKey: n, storage: r }),
-      t && /* @__PURE__ */ o(v, { sdk: t, storage: r, event: d, setEvent: l }),
-      t && /* @__PURE__ */ o(u, { sdk: t, storage: r })
+      n && /* @__PURE__ */ o(h, { env: s, setEnv: n, storage: r }),
+      i && /* @__PURE__ */ o(y, { sdkKey: d, setSdkKey: i, storage: r }),
+      t && /* @__PURE__ */ o(v, { sdk: t, storage: r, event: m, setEvent: l }),
+      t && /* @__PURE__ */ o(b, { sdk: t, storage: r })
     ] })
   ] });
 };

package/lib/utils/{components → debug/components}/envToggle.js

@@ -22,6 +22,8 @@ const d = o.div`
     opacity: 0;
     position: relative;
     z-index: 1;
+    width: 100%;
+    cursor: pointer;
 
     &:checked + span {
       transform: translate3d(100%, 0, 0);

package/lib/utils/{components → debug/components}/styles.js

@@ -36,6 +36,14 @@ const n = r.div`
     cursor: pointer;
     border: none;
     text-transform: uppercase;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(0.9);
+    }
   }
 `;
 export {

package/lib/utils/debug/index.js

@@ -0,0 +1,33 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as a, useState as r } from "react";
+import { useStreamLayer as u } from "@streamlayer/react";
+import { Developer as v } from "./components/developer.js";
+import { DeveloperStorage as c } from "./storage.js";
+import "@linaria/react";
+import "../storage.js";
+import "@streamlayer/sdk-web-storage";
+import "./components/bypassLogin.js";
+import "./components/envToggle.js";
+import "./components/eventInput.js";
+import "@nanostores/react";
+import "@streamlayer/sdk-web-core";
+import "./components/styles.js";
+import "./components/sdkKey.js";
+const M = () => {
+  const e = a(() => new c(), []), [t, o] = r(e.getEnv()), [m, s] = r(e.getSdkKey() || "set-sdk-key"), [p, n] = r(e.getEvent() || "");
+  return {
+    env: t,
+    setEnv: o,
+    sdkKey: m,
+    setSdkKey: s,
+    event: p,
+    setEvent: n
+  };
+}, h = (e) => {
+  const t = u();
+  return /* @__PURE__ */ i(v, { sdk: t, ...e });
+};
+export {
+  h as StreamLayerDebug,
+  M as useStreamLayerDebug
+};

package/lib/utils/debug/storage.js

@@ -0,0 +1,52 @@
+var n = Object.defineProperty;
+var i = (s, r, e) => r in s ? n(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var t = (s, r, e) => (i(s, typeof r != "symbol" ? r + "" : r, e), e);
+import { Storage as h } from "@streamlayer/sdk-web-storage";
+class d extends h {
+  constructor() {
+    super("dev");
+    // Schema
+    t(this, "setSchema", (e) => {
+      this.write("schema", e);
+    });
+    t(this, "getSchema", () => this.read(
+      "schema"
+      /* SCHEMA */
+    ));
+    // Token
+    t(this, "setToken", (e) => {
+      this.write("token", e);
+    });
+    t(this, "getToken", () => this.read(
+      "token"
+      /* TOKEN */
+    ));
+    // Event
+    t(this, "setEvent", (e) => {
+      this.write("event", e);
+    });
+    t(this, "getEvent", () => this.read(
+      "event"
+      /* EVENT */
+    ));
+    // SDK_KEY
+    t(this, "setSdkKey", (e) => {
+      this.write("sdkKey", e);
+    });
+    t(this, "getSdkKey", () => this.read(
+      "sdkKey"
+      /* SDK_KEY */
+    ));
+    // ENV
+    t(this, "setEnv", (e) => {
+      this.write("env", e);
+    });
+    t(this, "getEnv", () => this.read(
+      "env"
+      /* ENV */
+    ) || "production");
+  }
+}
+export {
+  d as DeveloperStorage
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -10,6 +10,11 @@
       "default": "./lib/index.js",
       "types": "./lib/index.d.js"
     },
+    "./masters": {
+      "import": "./lib/ui/app/masters.js",
+      "default": "./lib/ui/app/masters.js",
+      "types": "./lib/ui/app/masters.d.js"
+    },
     "./*": {
       "import": "./lib/*/index.js",
       "default": "./lib/*/index.js",
@@ -21,28 +26,33 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@streamlayer/sl-eslib": "^5.45.1",
-    "@streamlayer/feature-gamification": "^0.17.3",
-    "@streamlayer/sdk-web": "^0.28.0",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.10.9",
-    "@streamlayer/sdk-web-api": "^0.0.4",
-    "@streamlayer/sdk-web-core": "^0.14.0",
-    "@streamlayer/sdk-web-features": "^0.10.3",
-    "@streamlayer/sdk-web-interfaces": "^0.18.2",
-    "@streamlayer/sdk-web-notifications": "^0.10.1",
-    "@streamlayer/sdk-web-storage": "^0.3.4",
-    "@streamlayer/sdk-web-types": "^0.16.2"
+    "@streamlayer/sl-eslib": "^5.52.0",
+    "@streamlayer/feature-gamification": "^0.18.0",
+    "@streamlayer/sdk-web": "^0.28.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.10.11",
+    "@streamlayer/sdk-web-api": "^0.0.6",
+    "@streamlayer/sdk-web-core": "^0.14.2",
+    "@streamlayer/sdk-web-features": "^0.10.5",
+    "@streamlayer/sdk-web-interfaces": "^0.18.4",
+    "@streamlayer/sdk-web-notifications": "^0.10.3",
+    "@streamlayer/sdk-web-storage": "^0.3.6",
+    "@streamlayer/sdk-web-types": "^0.16.4"
+  },
+  "nx": {
+    "implicitDependencies": [
+      "!react"
+    ]
   },
   "devDependencies": {
     "@connectrpc/connect": "^1.1.3",
     "@connectrpc/connect-web": "^1.1.3",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@linaria/babel-preset": "^5.0.3",
+    "@linaria/babel-preset": "^5.0.4",
     "@linaria/core": "^5.0.2",
-    "@linaria/esbuild": "^5.0.3",
+    "@linaria/esbuild": "^5.0.4",
     "@linaria/react": "^5.0.3",
-    "@linaria/vite": "^5.0.3",
+    "@linaria/vite": "^5.0.4",
     "@nanostores/react": "^0.7.1",
     "@storybook/addon-docs": "^7.5.3",
     "@storybook/addon-styling": "^1.3.7",
@@ -62,6 +72,7 @@
     "vite-plugin-node-polyfills": "^0.16.0",
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "@streamlayer/react": "^0.23.1"
   }
 }