@streamlayer/react-ui 0.27.1 → 0.27.3

package/lib/index.js

@@ -1,6 +1,6 @@
-import { QuestionInApp as No } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as To } from "./ui/login/index.js";
-import { Onboarding as Vo } from "./ui/gamification/onboarding/index.js";
+import { QuestionInApp as Vo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as No } from "./ui/login/index.js";
+import { Onboarding as Uo } from "./ui/gamification/onboarding/index.js";
 import { ActivePages as ko, Navigation as qo } from "./ui/gamification/navigation/index.js";
 import { LeaderboardItemDetail as zo } from "./ui/gamification/leaderboard-item-detail/index.js";
 import { Question as Co } from "./ui/gamification/question/index.js";
@@ -10,7 +10,7 @@ import { Vote as Ko } from "./ui/gamification/vote/index.js";
 import { Demo as Ro } from "./ui/demo/index.js";
 import { Points as Xo } from "./ui/gamification/points/index.js";
 import { StreamLayerThemeProvider as Zo } from "./ui/theme/index.js";
-import { theme as $o } from "./ui/theme/theme.js";
+import { ThemeVariables as $o, theme as or, themeStr as rr } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-6a55bb8f.js";
@@ -94,15 +94,17 @@ export {
   ko as ActivePages,
   Ro as Demo,
   zo as LeaderboardItemDetail,
-  To as Login,
+  No as Login,
   qo as Navigation,
-  Vo as Onboarding,
+  Uo as Onboarding,
   Xo as Points,
   Co as Question,
-  No as QuestionInApp,
+  Vo as QuestionInApp,
   Fo as QuestionList,
   Zo as StreamLayerThemeProvider,
+  $o as ThemeVariables,
   Ho as UserStatistics,
   Ko as Vote,
-  $o as theme
+  or as theme,
+  rr as themeStr
 };

package/lib/ui/theme/ThemeColors.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ColorItem as e } from "@storybook/blocks";
+import { MASTERS_COLORS as r } from "./constants.js";
+const l = Object.keys(r), p = () => l.map((o) => /* @__PURE__ */ t(
+  e,
+  {
+    title: o,
+    subtitle: `--color-${o.toLowerCase().replaceAll("_", "-")}`,
+    colors: [r[o]]
+  },
+  o
+));
+export {
+  p as ThemeColors
+};

package/lib/ui/theme/ThemeTypography.js

@@ -0,0 +1,5 @@
+import { jsx as r } from "react/jsx-runtime";
+const o = () => /* @__PURE__ */ r("div", { children: "ThemeTypography" });
+export {
+  o as ThemeTypography
+};

package/lib/ui/theme/constants.js

@@ -1,4 +1,4 @@
-const R = {
+const N = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BG_TRANSPARENT_VOTE_CONTAINER: "rgba(10, 14, 19, 0.8)",
   BG_TRANSPARENT_ITEM: "rgba(0, 0, 0, 0.7)",
@@ -29,11 +29,39 @@ const R = {
   DIVIDER_COLOR_PRIMARY: "#2d3135",
   DIVIDER_COLOR_SECONDARY: "#53565a",
   GREEN_PRIMARY_BTN: "#009B77"
-}, E = {
+}, T = {
+  PRIMARY_GREEN1: "#107D57",
+  PRIMARY_GREEN2: "#006747",
+  PRIMARY_GREEN3: "#1C4932",
+  PRIMARY_GREEN4: "#193526",
+  SECONDARY_RED1: "#DF2F3B",
+  SECONDARY_RED2: "#BA0C2F",
+  SECONDARY_YELLOW: "#fce300",
+  SECONDARY_GREEN5: "#C0DC8F",
+  NEUTRALS_WHITE: "#FFFFFF",
+  NEUTRALS_GRAY1: "#F7F7F7",
+  NEUTRALS_GRAY2: "#F2F2F1",
+  NEUTRALS_GRAY3: "#E8E8E8",
+  NEUTRALS_GRAY4: "#D9D9D6",
+  NEUTRALS_GRAY5: "#B1B3B3",
+  NEUTRALS_GRAY6: "#888B8D",
+  NEUTRALS_GRAY7: "#6B6F73",
+  NEUTRALS_GRAY8: "#53565A",
+  NEUTRALS_GRAY9: "#25282A",
+  NEUTRALS_BLACK: "#000000"
+}, E = Object.assign({}, N, T), S = {
   FAMILY: "Roboto, sans-serif",
   COLOR: "#fff"
-};
+}, O = Object.keys(E).reduce((_, R) => {
+  const A = E[R];
+  return `
+    ${_}
+    --color-${R.toLowerCase().replaceAll("_", "-")}: ${A};
+  `;
+}, "");
 export {
-  R as COLORS,
-  E as FONT
+  E as COLORS,
+  S as FONT,
+  T as MASTERS_COLORS,
+  O as colors
 };

package/lib/ui/theme/theme.js

@@ -1,29 +1,27 @@
-import { css as R } from "@linaria/core";
-import { COLORS as r, FONT as o } from "./constants.js";
-const n = R`
-  --color-bg-transparent: ${r.BG_TRANSPARENT};
-  --color-transparent-vote-container: ${r.BG_TRANSPARENT_VOTE_CONTAINER};
-  --color-transparent-item: ${r.BG_TRANSPARENT_ITEM};
-  --color-transparent-item-success: ${r.BG_TRANSPARENT_ITEM_SUCCESS};
-  --color-transparent-item-error: ${r.BG_TRANSPARENT_ITEM_ERROR};
-  --color-bg-transparent-item-vote: ${r.BG_TRANSPARENT_ITEM_VOTE};
-  --color-transparent-user-container: ${r.BG_TRANSPARENT_USER_CONTAINER};
-  --color-transparent-onboarding-inapp: ${r.BG_TRANSPARENT_ONBOARDING_INAPP};
-  --color-leaderboard-unit: ${r.LEADERBOARD_UNIT};
-  --color-blue-primary: ${r.BLUE_PRIMARY};
-  --color-red-primary: ${r.RED_PRIMARY};
-  --color-red-secondary: ${r.RED_SECONDARY};
-  --color-blue-question-action-btn: ${r.BLUE_QUESTION_ACTION_BTN};
-  --color-white: ${r.WHITE};
-  --color-red-2: ${r.RED_2};
-  --color-grey-primary: ${r.GREY_PRIMARY};
-  --color-grey-primary-onboarding-inapp: ${r.GREY_PRIMARY_ONBOARDING_INAPP};
-  --color-divider-color-primary: ${r.DIVIDER_COLOR_PRIMARY};
-  --color-divider-color-secondary: ${r.DIVIDER_COLOR_SECONDARY};
-  --color-green-primary-btn: ${r.GREEN_PRIMARY_BTN};
-  --font-family: ${o.FAMILY};
-  --font-color: ${o.COLOR};
-`;
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { css as h } from "@linaria/core";
+import { colors as d, FONT as n } from "./constants.js";
+const l = `
+  ${d}
+  --font-family: ${n.FAMILY};
+  --font-color: ${n.COLOR};
+`, p = h`
+  ${l}
+`, f = () => /* @__PURE__ */ t("table", { children: /* @__PURE__ */ e("table", { children: [
+  /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ e("tr", { children: [
+    /* @__PURE__ */ t("th", { children: "name" }),
+    /* @__PURE__ */ t("th", { children: "value" })
+  ] }) }),
+  /* @__PURE__ */ t("tbody", { children: l.split(";").map((o) => {
+    const r = o.trim(), [c, i] = r.split(":");
+    return /* @__PURE__ */ e("tr", { children: [
+      /* @__PURE__ */ t("td", { children: c }),
+      /* @__PURE__ */ t("td", { children: i })
+    ] }, r);
+  }) })
+] }) });
 export {
-  n as theme
+  f as ThemeVariables,
+  p as theme,
+  l as themeStr
 };

package/lib/utils/components/developer.js

@@ -1,32 +1,38 @@
 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 { useMemo as c, useState as f } from "react";
+import { styled as i } from "@linaria/react";
+import { DeveloperStorage as x } from "../storage.js";
 import { EventInput as g } from "./eventInput.js";
-import { BypassLogin as f } from "./bypassLogin.js";
-import { SdkKey as h } from "./sdkKey.js";
-import { EnvToggle as u } from "./envToggle.js";
-import { DeveloperStorage as b } from "../storage.js";
+import { BypassLogin as h } from "./bypassLogin.js";
+import { SdkKey as u } from "./sdkKey.js";
+import { EnvToggle as b } from "./envToggle.js";
+import "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web-core";
 import "@nanostores/react";
 import "./styles.js";
-import "@streamlayer/sdk-web-storage";
-const v = n.div`
+const v = i.div`
   position: fixed;
   bottom: 0;
   right: 0;
   max-width: 600px;
-`, y = n.div`
+`, y = i.div`
   flex-direction: column;
   gap: 10px;
   margin-right: 60px;
   display: flex;
-  transition: all .3s ease;
+  animation: show-dev-items 0.3s ease-in-out;
   transform-origin: bottom right;
 
-  &[data-opened='false'] {
-    transform: scale(0) translateY(-100%);
+  @keyframes show-dev-items {
+    from {
+      transform: scale(0);
+    }
+
+    to {
+      transform: scale(1);
+    }
   }
-`, w = n.button`
+`, w = i.button`
   position: absolute;
   z-index: 10000;
   bottom: 10px;
@@ -65,22 +71,22 @@ const v = n.div`
     width: 100%;
     height: 4px;
   }
-`, O = ({ sdk: t, sdkKey: s, setSdkKey: i, env: d, setEnv: p }) => {
-  const r = c(() => new b(), []), [a, m] = x(!1);
+`, T = ({ sdk: t, sdkKey: s, setSdkKey: n, env: m, setEnv: p }) => {
+  const r = c(() => new x(), []), [a, d] = f(!1);
   return /* @__PURE__ */ e(v, { children: [
-    /* @__PURE__ */ e(w, { "data-opened": a.toString(), onClick: () => m((l) => !l), children: [
+    /* @__PURE__ */ e(w, { "data-opened": a.toString(), onClick: () => d((l) => !l), children: [
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {})
     ] }),
-    /* @__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 }),
+    a && /* @__PURE__ */ e(y, { children: [
+      p && /* @__PURE__ */ o(b, { env: m, setEnv: p, storage: r }),
+      n && /* @__PURE__ */ o(u, { sdkKey: s, setSdkKey: n, storage: r }),
       t && /* @__PURE__ */ o(g, { sdk: t, storage: r }),
-      t && /* @__PURE__ */ o(f, { sdk: t, storage: r })
+      t && /* @__PURE__ */ o(h, { sdk: t, storage: r })
     ] })
   ] });
 };
 export {
-  O as Developer
+  T as Developer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.27.1",
+  "version": "0.27.3",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -28,8 +28,8 @@
     "@streamlayer/sdk-web-api": "^0.0.2",
     "@streamlayer/sdk-web-core": "^0.12.0",
     "@streamlayer/sdk-web-features": "^0.9.5",
-    "@streamlayer/sdk-web-notifications": "^0.9.4",
     "@streamlayer/sdk-web-interfaces": "^0.18.0",
+    "@streamlayer/sdk-web-notifications": "^0.9.4",
     "@streamlayer/sdk-web-storage": "^0.3.2",
     "@streamlayer/sdk-web-types": "^0.16.0"
   },