@streamlayer/react-ui 0.24.2 → 0.24.3

package/lib/utils/components/developer.js

@@ -1,29 +1,38 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useMemo as l, useState as c } from "react";
-import { useStore as m } from "@nanostores/react";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { useMemo as c, useState as x } from "react";
 import { styled as n } from "@linaria/react";
-import { EventInput as x } from "./eventInput.js";
+import { EventInput as g } from "./eventInput.js";
 import { BypassLogin as f } from "./bypassLogin.js";
-import { DeveloperStorage as u } from "../storage.js";
+import { SdkKey as h } from "./sdkKey.js";
+import { EnvToggle as u } from "./envToggle.js";
+import { DeveloperStorage as b } from "../storage.js";
+import "@streamlayer/sdk-web-core";
+import "@nanostores/react";
+import "./styles.js";
 import "@streamlayer/sdk-web-storage";
-const g = n.div`
+const v = n.div`
   position: fixed;
   bottom: 0;
   right: 0;
-  padding: 10px;
-  padding-right: 60px;
   max-width: 600px;
-`, h = n.div`
+`, y = n.div`
   flex-direction: column;
-  gap: 5px;
-`, b = n.button`
+  gap: 10px;
+  margin-right: 60px;
+  display: flex;
+  transition: all .3s ease;
+  transform-origin: bottom right;
+
+  &[data-opened='false'] {
+    transform: scale(0) translateY(-100%);
+  }
+`, w = n.button`
   position: absolute;
   z-index: 10000;
   bottom: 10px;
   right: 10px;
   width: 40px;
   height: 40px;
-
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -43,7 +52,7 @@ const g = n.div`
     transform: translateY(4px);
   }
 
-  &[data-answeredCorrect='false'] {
+  &[data-opened='true'] {
     span:nth-child(odd) {
       opacity: 0;
     }
@@ -56,21 +65,22 @@ const g = n.div`
     width: 100%;
     height: 4px;
   }
-`, C = ({ sdk: o }) => {
-  var d;
-  const p = l(() => new u(), []), [i, s] = c(!1), { organizationSettings: t } = m(o.sdkStore);
-  return /* @__PURE__ */ r(g, { children: [
-    /* @__PURE__ */ r(b, { "data-opened": i.toString(), onClick: () => s((a) => !a), children: [
-      /* @__PURE__ */ e("span", {}),
-      /* @__PURE__ */ e("span", {}),
-      /* @__PURE__ */ e("span", {})
+`, O = ({ sdk: t, sdkKey: s, setSdkKey: i, env: d, setEnv: p }) => {
+  const r = c(() => new b(), []), [a, m] = x(!1);
+  return /* @__PURE__ */ e(v, { children: [
+    /* @__PURE__ */ e(w, { "data-opened": a.toString(), onClick: () => m((l) => !l), children: [
+      /* @__PURE__ */ o("span", {}),
+      /* @__PURE__ */ o("span", {}),
+      /* @__PURE__ */ o("span", {})
     ] }),
-    /* @__PURE__ */ r(h, { style: { display: i ? "flex" : "none" }, children: [
-      /* @__PURE__ */ e(x, { sdk: o, useStreamLayerEventsIds: !((d = t == null ? void 0 : t.data) != null && d.provider), storage: p }),
-      /* @__PURE__ */ e(f, { sdk: o, storage: p })
+    /* @__PURE__ */ e(y, { "data-opened": a.toString(), children: [
+      p && /* @__PURE__ */ o(u, { env: d, setEnv: p, storage: r }),
+      i && /* @__PURE__ */ o(h, { sdkKey: s, setSdkKey: i, storage: r }),
+      t && /* @__PURE__ */ o(g, { sdk: t, storage: r }),
+      t && /* @__PURE__ */ o(f, { sdk: t, storage: r })
     ] })
   ] });
 };
 export {
-  C as Developer
+  O as Developer
 };

package/lib/utils/components/envToggle.js

@@ -0,0 +1,58 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { styled as o } from "@linaria/react";
+const d = o.div`
+  display: flex;
+  align-items: center;
+  padding: 4px 6px;
+  font-size: 16px;
+  user-select: none;
+
+  label {
+    cursor: pointer;
+  }
+`, a = o.div`
+  width: 2rem;
+  height: 1rem;
+  background: #fff;
+  border-radius: 1em;
+  position: relative;
+  margin-left: 5px;
+
+  input {
+    opacity: 0;
+    position: relative;
+    z-index: 1;
+
+    &:checked + span {
+      transform: translate3d(100%, 0, 0);
+      background: green;
+    }
+  }
+
+  span {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1rem;
+    width: 1rem;
+    border-radius: 1em;
+    background: gray;
+    box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
+    transition: all 300ms;
+  }
+`, m = ({ env: r, setEnv: i, storage: s }) => /* @__PURE__ */ t(d, { children: [
+  /* @__PURE__ */ e("label", { htmlFor: "slEnvCheckbox", children: "Production:" }),
+  /* @__PURE__ */ t(a, { children: [
+    /* @__PURE__ */ e("input", { id: "slEnvCheckbox", type: "checkbox", checked: r === "production", onChange: () => {
+      i((c) => {
+        const n = c === "production" ? "development" : "production";
+        return s.setEnv(n), n;
+      });
+    } }),
+    /* @__PURE__ */ e("span", {})
+  ] })
+] });
+export {
+  m as EnvToggle
+};

package/lib/utils/components/eventInput.js

@@ -1,56 +1,22 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { styled as p } from "@linaria/react";
-import { useState as l, useEffect as c } from "react";
-const u = p.div`
-  display: flex;
-  background: rgb(29, 123, 255);
-  padding: 4px 6px;
-  border-radius: 5px;
-  font-size: 16px;
-
-  input {
-    display: block;
-    width: 100%;
-    color: #fff;
-    font-size: 24px;
-    border: none;
-    padding: 2px;
-    padding-left: 10px;
-    background: linear-gradient(136.45deg, rgba(60, 139, 251, 0.3) 0.57%, rgba(0, 79, 190, 0.3) 100%);
-    border: 1px solid transparent;
-    outline: none;
-
-    &:focus {
-      border-color: rgb(29, 123, 255);
-    }
-  }
-
-  label {
-    margin-right: 4px;
-  }
-
-  button {
-    width: 150px;
-    color: #fff;
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    border: none;
-    text-transform: uppercase;
-  }
-`, v = ({ sdk: o, useStreamLayerEventsIds: i, storage: n }) => {
-  const [e, d] = l(n.getEvent() || ""), r = () => {
-    o.createEventSession(e), n.setEvent(e);
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import "@streamlayer/sdk-web-core";
+import { useState as p, useEffect as d } from "react";
+import { useStore as m } from "@nanostores/react";
+import { InputField as u } from "./styles.js";
+import "@linaria/react";
+const I = ({ sdk: n, storage: s }) => {
+  var i;
+  const { organizationSettings: r } = m(n.sdkStore), v = !((i = r == null ? void 0 : r.data) != null && i.provider), [e, l] = p(s.getEvent() || ""), o = () => {
+    n.createEventSession(e), s.setEvent(e);
   };
-  return c(() => {
-    e && r();
-  }, []), /* @__PURE__ */ t("div", { children: /* @__PURE__ */ s(u, { children: [
-    /* @__PURE__ */ t("label", { children: i ? "Use StreamLayer event ids" : "Use your provider event ids" }),
-    /* @__PURE__ */ t("input", { type: "text", value: e, onChange: (a) => d(a.target.value) }),
-    /* @__PURE__ */ t("button", { onClick: r, children: "set" })
+  return d(() => {
+    e && o();
+  }, []), /* @__PURE__ */ t("div", { children: /* @__PURE__ */ c(u, { children: [
+    /* @__PURE__ */ t("label", { children: v ? "Use StreamLayer event ids" : "Use your provider event ids" }),
+    /* @__PURE__ */ t("input", { type: "text", value: e, onChange: (a) => l(a.target.value) }),
+    /* @__PURE__ */ t("button", { onClick: o, children: "set" })
   ] }) });
 };
 export {
-  v as EventInput
+  I as EventInput
 };

package/lib/utils/components/sdkKey.js

@@ -0,0 +1,23 @@
+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
+}) => {
+  const [e, o] = u(r);
+  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(m, { children: [
+    /* @__PURE__ */ t("label", { children: "SDK Key" }),
+    /* @__PURE__ */ t("input", { type: "text", value: e, onChange: (s) => {
+      o(s.target.value);
+    } }),
+    /* @__PURE__ */ t("button", { onClick: () => {
+      n.setSdkKey(e), i(e);
+    }, children: "set" })
+  ] }) });
+};
+export {
+  b as SdkKey
+};

package/lib/utils/components/styles.js

@@ -0,0 +1,43 @@
+import { styled as r } from "@linaria/react";
+const n = r.div`
+  display: flex;
+  background: rgb(29, 123, 255);
+  padding: 4px 6px;
+  border-radius: 5px;
+  font-size: 16px;
+
+  input {
+    display: block;
+    width: 100%;
+    color: #fff;
+    font-size: 24px;
+    border: none;
+    padding: 2px;
+    padding-left: 10px;
+    background: linear-gradient(136.45deg, rgba(60, 139, 251, 0.3) 0.57%, rgba(0, 79, 190, 0.3) 100%);
+    border: 1px solid transparent;
+    outline: none;
+
+    &:focus {
+      border-color: rgb(29, 123, 255);
+    }
+  }
+
+  label {
+    margin-right: 4px;
+  }
+
+  button {
+    width: 150px;
+    color: #fff;
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    border: none;
+    text-transform: uppercase;
+  }
+`;
+export {
+  n as InputField
+};

package/lib/utils/createDemo.js

@@ -1,46 +1,40 @@
-import { jsxs as p, jsx as r, Fragment as d } from "react/jsx-runtime";
-import { anonymous as u } from "@streamlayer/sdk-web-anonymous-auth";
-import { useMemo as K } from "react";
-import { Developer as f } from "./components/developer.js";
-import { useStreamLayerApp as D } from "./useStreamLayerApp.js";
-import "@nanostores/react";
+import { jsx as t, jsxs as f, Fragment as k } from "react/jsx-runtime";
+import { anonymous as g } from "@streamlayer/sdk-web-anonymous-auth";
+import { useMemo as p, useState as d } from "react";
+import { Developer as S } from "./components/developer.js";
+import { useStreamLayerApp as v } from "./useStreamLayerApp.js";
+import { DeveloperStorage as y } from "./storage.js";
 import "@linaria/react";
 import "./components/eventInput.js";
+import "@streamlayer/sdk-web-core";
+import "@nanostores/react";
+import "./components/styles.js";
 import "./components/bypassLogin.js";
-import "./storage.js";
-import "@streamlayer/sdk-web-storage";
+import "./components/sdkKey.js";
+import "./components/envToggle.js";
 import "@streamlayer/sdk-web";
-function a({
-  Component: t,
-  Story: e,
-  args: o
+import "@streamlayer/sdk-web-storage";
+function l({
+  Component: r,
+  Story: o,
+  args: D
 }) {
-  const { SDK_KEY: i, production: s } = o, c = K(() => {
-    const m = /* @__PURE__ */ new Set();
-    return m.add(u), m;
-  }, []), n = D(i, c, s);
-  return n ? /* @__PURE__ */ p(d, { children: [
-    /* @__PURE__ */ r(t, { Story: e, sdk: n }),
-    /* @__PURE__ */ r(f, { sdk: n })
-  ] }) : /* @__PURE__ */ r("div", { children: "wait sdk..." });
+  const m = p(() => new y(), []), [n, c] = d(m.getEnv()), [s, a] = d(m.getSdkKey() || "set-sdk-key"), u = p(() => {
+    const i = /* @__PURE__ */ new Set();
+    return i.add(g), i;
+  }, []), e = v(s, u, n === "production");
+  return /* @__PURE__ */ f(k, { children: [
+    e ? /* @__PURE__ */ t(r, { Story: o, sdk: e }) : /* @__PURE__ */ t("div", { children: "wait sdk..." }),
+    /* @__PURE__ */ t(S, { sdk: e, sdkKey: s, setSdkKey: a, env: n, setEnv: c })
+  ] });
 }
-function y(t) {
+function H(r) {
   return {
-    args: {
-      SDK_KEY: {}.NX_DEMO_SDK_KEY,
-      production: !0
-    },
     decorators: [
-      (e, { args: o }) => {
-        const { SDK_KEY: i } = o;
-        return i ? /* @__PURE__ */ r(a, { Story: e, args: o, Component: t }) : /* @__PURE__ */ p("div", { children: [
-          "Provide ",
-          /* @__PURE__ */ r("b", { children: "SDK_KEY" })
-        ] });
-      }
+      (o) => /* @__PURE__ */ t(l, { Story: o, Component: r })
     ]
   };
 }
 export {
-  y as createDemo
+  H as createDemo
 };

package/lib/utils/storage.js

@@ -1,36 +1,52 @@
 var n = Object.defineProperty;
-var o = (s, t, e) => t in s ? n(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var r = (s, t, e) => (o(s, typeof t != "symbol" ? t + "" : t, e), e);
-import { Storage as a } from "@streamlayer/sdk-web-storage";
-class c extends a {
+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
-    r(this, "setSchema", (e) => {
+    t(this, "setSchema", (e) => {
       this.write("schema", e);
     });
-    r(this, "getSchema", () => this.read(
+    t(this, "getSchema", () => this.read(
       "schema"
       /* SCHEMA */
     ));
     // Token
-    r(this, "setToken", (e) => {
+    t(this, "setToken", (e) => {
       this.write("token", e);
     });
-    r(this, "getToken", () => this.read(
+    t(this, "getToken", () => this.read(
       "token"
       /* TOKEN */
     ));
     // Event
-    r(this, "setEvent", (e) => {
+    t(this, "setEvent", (e) => {
       this.write("event", e);
     });
-    r(this, "getEvent", () => this.read(
+    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 {
-  c as DeveloperStorage
+  d as DeveloperStorage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",