@streamlayer/react-ui 0.98.0 → 0.99.0

package/lib/utils/createDemo.js

@@ -1,45 +1,35 @@
-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 { jsx as t, jsxs as g, Fragment as y } from "react/jsx-runtime";
+import { useMemo as p, useState as c, useEffect as E } from "react";
 import { useStreamLayerApp as l } from "@streamlayer/react/useStreamLayerApp";
 import { anonymous as D } from "@streamlayer/sdk-web-anonymous-auth";
 import { Developer as w } from "./debug/components/developer.js";
 import { DeveloperStorage as x } from "./storage.js";
-import "@linaria/react";
-import "./debug/components/bypassLogin.js";
-import "./debug/components/copyLogs.js";
-import "./debug/components/styles.js";
-import "./debug/components/envToggle.js";
-import "./debug/components/eventInput.js";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-core";
-import "./debug/components/sdkKey.js";
-import "@streamlayer/sdk-web-storage";
 function K({
   Component: o,
   Story: r,
   args: n,
   autoEnable: a
 }) {
-  const s = u(() => new x(), []), [p, f] = i(s.getEnv()), [c, v] = i(s.getSdkKey() || "set-sdk-key"), [m, k] = i(s.getEvent() || ""), S = u(() => {
-    const d = /* @__PURE__ */ new Set();
-    return d.add(D), d;
-  }, []), t = l({
-    sdkKey: c,
+  const s = p(() => new x(), []), [i, f] = c(s.getEnv()), [d, v] = c(s.getSdkKey() || "set-sdk-key"), [m, k] = c(s.getEvent() || ""), S = p(() => {
+    const u = /* @__PURE__ */ new Set();
+    return u.add(D), u;
+  }, []), e = l({
+    sdkKey: d,
     plugins: S,
-    production: p === "production",
+    production: i === "production",
     autoEnable: a
   });
   return E(() => {
-    m && t && t.createEventSession(m);
-  }, [t]), /* @__PURE__ */ g(y, { children: [
-    t ? /* @__PURE__ */ e(o, { Story: r, sdk: t, args: n }) : /* @__PURE__ */ e("div", { children: "wait sdk..." }),
-    /* @__PURE__ */ e(
+    m && e && e.createEventSession(m);
+  }, [e]), /* @__PURE__ */ g(y, { children: [
+    e ? /* @__PURE__ */ t(o, { Story: r, sdk: e, args: n }) : /* @__PURE__ */ t("div", { children: "wait sdk..." }),
+    /* @__PURE__ */ t(
       w,
       {
-        sdk: t,
-        sdkKey: c,
+        sdk: e,
+        sdkKey: d,
         setSdkKey: v,
-        env: p,
+        env: i,
         setEnv: f,
         event: m,
         setEvent: k
@@ -47,13 +37,13 @@ function K({
     )
   ] });
 }
-function O(o, r = !0) {
+function b(o, r = !0) {
   return {
     decorators: [
-      (n) => /* @__PURE__ */ e(K, { Story: n, Component: o, autoEnable: r })
+      (n) => /* @__PURE__ */ t(K, { Story: n, Component: o, autoEnable: r })
     ]
   };
 }
 export {
-  O as createDemo
+  b as createDemo
 };

package/lib/utils/debug/components/copyLogs.js

@@ -1,7 +1,6 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { InputField as r } from "./styles.js";
-import "@linaria/react";
-const p = () => /* @__PURE__ */ t(r, { children: [
+const n = () => /* @__PURE__ */ t(r, { children: [
   /* @__PURE__ */ o("label", { children: "Subscription Logs" }),
   /* @__PURE__ */ o("button", { onClick: () => {
     navigator.clipboard.writeText(sessionStorage.getItem("slstreamlogs") || "").then(() => {
@@ -10,5 +9,5 @@ const p = () => /* @__PURE__ */ t(r, { children: [
   }, children: "Copy" })
 ] });
 export {
-  p as CopyLogs
+  n as CopyLogs
 };

package/lib/utils/debug/components/developer.js

@@ -1,5 +1,5 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { styled as n } from "@linaria/react";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
 import { useMemo as b, useState as h } from "react";
 import { DeveloperStorage as q } from "../../storage.js";
 import { BypassLogin as u } from "./bypassLogin.js";
@@ -7,70 +7,66 @@ import { CopyLogs as D } from "./copyLogs.js";
 import { EnvToggle as I } from "./envToggle.js";
 import { EventInput as B } from "./eventInput.js";
 import { SdkKey as v } from "./sdkKey.js";
-import "@streamlayer/sdk-web-storage";
-import "./styles.js";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-core";
-const A = /* @__PURE__ */ n("div")({
+const A = /* @__PURE__ */ s("div")({
   name: "DeveloperContainer",
   class: "d1sqxt7l",
   propsAsIs: !1
-}), x = /* @__PURE__ */ n("div")({
+}), x = /* @__PURE__ */ s("div")({
   name: "DeveloperItems",
   class: "d1a3478s",
   propsAsIs: !1
-}), L = /* @__PURE__ */ n("button")({
+}), L = /* @__PURE__ */ s("button")({
   name: "BurgerBtn",
   class: "butjcq8",
   propsAsIs: !1
-}), P = ({
+}), G = ({
   sdk: r,
-  sdkKey: s,
+  sdkKey: m,
   setSdkKey: p,
-  env: i,
+  env: a,
   setEnv: t,
-  event: a,
+  event: i,
   setEvent: l,
   hideAuth: c,
   standalone: f = !1
 }) => {
   const e = b(() => new q(), []), [g, C] = h(f);
-  return f ? /* @__PURE__ */ m(x, {
+  return f ? /* @__PURE__ */ n(x, {
     children: [t && /* @__PURE__ */ o(I, {
-      env: i,
+      env: a,
       setEnv: t,
       storage: e
     }), p && /* @__PURE__ */ o(v, {
-      sdkKey: s,
+      sdkKey: m,
       setSdkKey: p,
       storage: e
     }), r && /* @__PURE__ */ o(B, {
       sdk: r,
       storage: e,
-      event: a,
+      event: i,
       setEvent: l
     }), !c && r && /* @__PURE__ */ o(u, {
       sdk: r,
       storage: e
     }), /* @__PURE__ */ o(D, {})]
-  }) : /* @__PURE__ */ m(A, {
-    children: [/* @__PURE__ */ m(L, {
+  }) : /* @__PURE__ */ n(A, {
+    children: [/* @__PURE__ */ n(L, {
       "data-opened": g.toString(),
       onClick: () => C((j) => !j),
       children: [/* @__PURE__ */ o("span", {}), /* @__PURE__ */ o("span", {}), /* @__PURE__ */ o("span", {})]
-    }), g && /* @__PURE__ */ m(x, {
+    }), g && /* @__PURE__ */ n(x, {
       children: [t && /* @__PURE__ */ o(I, {
-        env: i,
+        env: a,
         setEnv: t,
         storage: e
       }), p && /* @__PURE__ */ o(v, {
-        sdkKey: s,
+        sdkKey: m,
         setSdkKey: p,
         storage: e
       }), r && /* @__PURE__ */ o(B, {
         sdk: r,
         storage: e,
-        event: a,
+        event: i,
         setEvent: l
       }), !c && r && /* @__PURE__ */ o(u, {
         sdk: r,
@@ -80,5 +76,5 @@ const A = /* @__PURE__ */ n("div")({
   });
 };
 export {
-  P as Developer
+  G as Developer
 };

package/lib/utils/debug/components/eventInput.js

@@ -1,27 +1,26 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as o } from "react/jsx-runtime";
 import { useStore as d } from "@nanostores/react";
 import "@streamlayer/sdk-web-core";
-import { InputField as m } from "./styles.js";
-import "@linaria/react";
-const I = ({ sdk: t, storage: a, event: e, setEvent: l }) => {
+import { InputField as u } from "./styles.js";
+const y = ({ sdk: t, storage: a, event: e, setEvent: l }) => {
   var i;
   const s = d(t.sdkStore.providerStreamId), r = d(t.sdkStore.organizationSettings), c = !((i = r == null ? void 0 : r.data) != null && i.provider);
-  return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ n("label", { children: [
+  return /* @__PURE__ */ n("div", { children: /* @__PURE__ */ o(u, { children: [
+    /* @__PURE__ */ o("label", { children: [
       c ? "Use StreamLayer event ids" : "Use your provider event ids",
       ", ",
-      /* @__PURE__ */ n("b", { children: [
+      /* @__PURE__ */ o("b", { children: [
         "currently configured (",
         s,
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ o("input", { type: "text", value: e, onChange: (p) => l(p.target.value) }),
-    /* @__PURE__ */ o("button", { onClick: () => {
+    /* @__PURE__ */ n("input", { type: "text", value: e, onChange: (p) => l(p.target.value) }),
+    /* @__PURE__ */ n("button", { onClick: () => {
       t.createEventSession(e), a.setEvent(e);
     }, disabled: s === e, children: "set" })
   ] }) });
 };
 export {
-  I as EventInput
+  y as EventInput
 };

package/lib/utils/debug/components/sdkKey.js

@@ -1,14 +1,13 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { InputField as m } from "./styles.js";
-import "@linaria/react";
-const b = ({
-  sdkKey: r,
-  setSdkKey: i,
-  storage: n
+import { InputField as c } from "./styles.js";
+const h = ({
+  sdkKey: n,
+  setSdkKey: r,
+  storage: i
 }) => {
-  const [e, o] = u(r);
-  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(m, { children: [
+  const [e, o] = u(n);
+  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(c, { children: [
     /* @__PURE__ */ t("label", { children: "SDK Key" }),
     /* @__PURE__ */ t(
       "input",
@@ -21,10 +20,10 @@ const b = ({
       }
     ),
     /* @__PURE__ */ t("button", { onClick: () => {
-      n.setSdkKey(e), i(e);
+      i.setSdkKey(e), r(e);
     }, children: "set" })
   ] }) });
 };
 export {
-  b as SdkKey
+  h as SdkKey
 };

package/lib/utils/debug/index.js

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

package/lib/utils/debug/storage.js

@@ -1,34 +1,52 @@
-import { Storage as t } from "@streamlayer/sdk-web-storage";
-class i extends t {
+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"), this.setSchema = (e) => {
+    super("dev");
+    // Schema
+    t(this, "setSchema", (e) => {
       this.write("schema", e);
-    }, this.getSchema = () => this.read(
+    });
+    t(this, "getSchema", () => this.read(
       "schema"
       /* SCHEMA */
-    ), this.setToken = (e) => {
+    ));
+    // Token
+    t(this, "setToken", (e) => {
       this.write("token", e);
-    }, this.getToken = () => this.read(
+    });
+    t(this, "getToken", () => this.read(
       "token"
       /* TOKEN */
-    ), this.setEvent = (e) => {
+    ));
+    // Event
+    t(this, "setEvent", (e) => {
       this.write("event", e);
-    }, this.getEvent = () => this.read(
+    });
+    t(this, "getEvent", () => this.read(
       "event"
       /* EVENT */
-    ), this.setSdkKey = (e) => {
+    ));
+    // SDK_KEY
+    t(this, "setSdkKey", (e) => {
       this.write("sdkKey", e);
-    }, this.getSdkKey = () => this.read(
+    });
+    t(this, "getSdkKey", () => this.read(
       "sdkKey"
       /* SDK_KEY */
-    ), this.setEnv = (e) => {
+    ));
+    // ENV
+    t(this, "setEnv", (e) => {
       this.write("env", e);
-    }, this.getEnv = () => this.read(
+    });
+    t(this, "getEnv", () => this.read(
       "env"
       /* ENV */
-    ) || "production";
+    ) || "production");
   }
 }
 export {
-  i as DeveloperStorage
+  d as DeveloperStorage
 };

package/lib/utils/decorators/container.js

@@ -1,12 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { StreamLayerThemeProvider as o } from "../../ui/theme/index.js";
-import { AppContainer as t } from "./styles.js";
-import "../../ui/theme/theme.js";
-import "../../ui/theme/breakpoints.js";
-import "../../ui/theme/constants.js";
-import "@linaria/react";
-const a = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(e, {}) }), l = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
+import { StreamLayerThemeProvider as n } from "../../ui/theme/index.js";
+import { AppContainer as o } from "./styles.js";
+const c = (e) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {}) }), d = (e) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
 export {
-  l as container,
-  a as theme
+  d as container,
+  c as theme
 };

package/lib/utils/storage.js

@@ -1,34 +1,52 @@
-import { Storage as t } from "@streamlayer/sdk-web-storage";
-class i extends t {
+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"), this.setSchema = (e) => {
+    super("dev");
+    // Schema
+    t(this, "setSchema", (e) => {
       this.write("schema", e);
-    }, this.getSchema = () => this.read(
+    });
+    t(this, "getSchema", () => this.read(
       "schema"
       /* SCHEMA */
-    ), this.setToken = (e) => {
+    ));
+    // Token
+    t(this, "setToken", (e) => {
       this.write("token", e);
-    }, this.getToken = () => this.read(
+    });
+    t(this, "getToken", () => this.read(
       "token"
       /* TOKEN */
-    ), this.setEvent = (e) => {
+    ));
+    // Event
+    t(this, "setEvent", (e) => {
       this.write("event", e);
-    }, this.getEvent = () => this.read(
+    });
+    t(this, "getEvent", () => this.read(
       "event"
       /* EVENT */
-    ), this.setSdkKey = (e) => {
+    ));
+    // SDK_KEY
+    t(this, "setSdkKey", (e) => {
       this.write("sdkKey", e);
-    }, this.getSdkKey = () => this.read(
+    });
+    t(this, "getSdkKey", () => this.read(
       "sdkKey"
       /* SDK_KEY */
-    ), this.setEnv = (e) => {
+    ));
+    // ENV
+    t(this, "setEnv", (e) => {
       this.write("env", e);
-    }, this.getEnv = () => this.read(
+    });
+    t(this, "getEnv", () => this.read(
       "env"
       /* ENV */
-    ) || "production";
+    ) || "production");
   }
 }
 export {
-  i as DeveloperStorage
+  d as DeveloperStorage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.98.0",
+  "version": "0.99.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,26 +36,26 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
-    "@streamlayer/sl-eslib": "^5.83.1",
+    "@streamlayer/sl-eslib": "^5.84.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
     "react-infinite-scroller": "^1.2.6",
-    "react-virtualized-auto-sizer": "^1.0.21",
+    "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.39.1",
-    "@streamlayer/sdk-web": "^0.33.1",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.43",
-    "@streamlayer/sdk-web-analytics": "^0.1.1",
-    "@streamlayer/sdk-web-api": "^0.24.1",
-    "@streamlayer/sdk-web-core": "^0.22.1",
-    "@streamlayer/sdk-web-features": "^0.11.25",
-    "@streamlayer/sdk-web-interfaces": "^0.21.0",
-    "@streamlayer/sdk-web-logger": "^0.5.18",
-    "@streamlayer/sdk-web-notifications": "^0.15.0",
-    "@streamlayer/sdk-web-storage": "^0.4.5",
-    "@streamlayer/sdk-web-types": "^0.23.0"
+    "@streamlayer/feature-gamification": "^0.40.1",
+    "@streamlayer/sdk-web": "^0.33.3",
+    "@streamlayer/sdk-web-analytics": "^0.1.3",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.45",
+    "@streamlayer/sdk-web-api": "^0.24.3",
+    "@streamlayer/sdk-web-core": "^0.22.3",
+    "@streamlayer/sdk-web-features": "^0.11.27",
+    "@streamlayer/sdk-web-interfaces": "^0.21.1",
+    "@streamlayer/sdk-web-logger": "^0.5.19",
+    "@streamlayer/sdk-web-notifications": "^0.15.2",
+    "@streamlayer/sdk-web-storage": "^0.4.6",
+    "@streamlayer/sdk-web-types": "^0.23.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -63,20 +63,20 @@
     ]
   },
   "devDependencies": {
-    "@connectrpc/connect": "^1.3.0",
-    "@connectrpc/connect-web": "^1.3.0",
+    "@connectrpc/connect": "^1.4.0",
+    "@connectrpc/connect-web": "^1.4.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@linaria/babel-preset": "^5.0.4",
     "@linaria/core": "^6.0.0",
     "@linaria/react": "^6.0.0",
     "@nanostores/react": "^0.7.2",
-    "@storybook/addon-docs": "^7.6.11",
+    "@storybook/addon-docs": "^8.0.0",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-viewport": "^7.6.11",
-    "@storybook/blocks": "^7.6.11",
+    "@storybook/addon-viewport": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
     "@storybook/jest": "~0.2.3",
-    "@storybook/react": "^7.6.11",
+    "@storybook/react": "^8.0.0",
     "@storybook/testing-library": "~0.2.2",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-window": "^1.8.8",
@@ -91,11 +91,11 @@
     "react-phone-number-input": "^3.3.9",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "tslib": "^2.6.2",
-    "vite": "5.0.12",
-    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite": "5.1.6",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
-    "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.41.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "@streamlayer/react": "^0.41.4"
   }
 }