@streamlayer/react-ui 0.27.0 → 0.27.2

package/lib/index.js

@@ -1,16 +1,16 @@
-import { QuestionInApp as Oo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as Uo } from "./ui/login/index.js";
-import { Onboarding as jo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as qo, Navigation as wo } from "./ui/gamification/navigation/index.js";
-import { LeaderboardItemDetail as Bo } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Eo } from "./ui/gamification/question/index.js";
-import { QuestionList as Go } from "./ui/gamification/question-list/index.js";
-import { UserStatistics as Jo } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Mo } from "./ui/gamification/vote/index.js";
-import { Demo as Wo } from "./ui/demo/index.js";
-import { Points as Yo } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as _o } from "./ui/theme/index.js";
-import { theme as or } from "./ui/theme/theme.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";
+import { QuestionList as Fo } from "./ui/gamification/question-list/index.js";
+import { UserStatistics as Ho } from "./ui/gamification/user-statistics/index.js";
+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 { 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";
@@ -87,23 +87,24 @@ import "./ui/gamification/insight/index.js";
 import "./ui/demo/components/Insight.js";
 import "./ui/gamification/detailed-insight/index.js";
 import "./ui/demo/Login.js";
-import "./ui/demo/DemoPoints.js";
 import "./ui/gamification/points/styles.js";
 import "./ui/icons/index.js";
 import "@linaria/core";
 export {
-  qo as ActivePages,
-  Wo as Demo,
-  Bo as LeaderboardItemDetail,
-  Uo as Login,
-  wo as Navigation,
-  jo as Onboarding,
-  Yo as Points,
-  Eo as Question,
-  Oo as QuestionInApp,
-  Go as QuestionList,
-  _o as StreamLayerThemeProvider,
-  Jo as UserStatistics,
-  Mo as Vote,
-  or as theme
+  ko as ActivePages,
+  Ro as Demo,
+  zo as LeaderboardItemDetail,
+  No as Login,
+  qo as Navigation,
+  Uo as Onboarding,
+  Xo as Points,
+  Co as Question,
+  Vo as QuestionInApp,
+  Fo as QuestionList,
+  Zo as StreamLayerThemeProvider,
+  $o as ThemeVariables,
+  Ho as UserStatistics,
+  Ko as Vote,
+  or as theme,
+  rr as themeStr
 };

package/lib/ui/demo/index.js

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as l, Fragment as v } from "react/jsx-runtime";
-import { FeatureStatus as f } from "@streamlayer/sdk-web-interfaces";
+import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
+import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as g } from "@streamlayer/sdk-web-types";
 import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
 import { useState as b, useMemo as h, useEffect as C } from "react";
@@ -8,8 +8,7 @@ import { Notifications as F } from "../notifications/index.js";
 import { GamificationComponent as w } from "./Gamification.js";
 import { HighlightsComponent as G } from "./Highlights.js";
 import { LoginComponent as H } from "./Login.js";
-import { DemoPoints as x } from "./DemoPoints.js";
-import { Buttons as A, Button as s } from "./styles.js";
+import { Buttons as x, Button as s } from "./styles.js";
 import "../notifications/notification/index.js";
 import "@streamlayer/sdk-web-notifications";
 import "../notifications/notification/onboarding-inapp/index.js";
@@ -84,59 +83,55 @@ import "@connectrpc/connect-web";
 import "@connectrpc/connect";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-import "../gamification/points/index.js";
-import "../gamification/points/styles.js";
-import "../icons/index.js";
-const B = ({ activeFeature: i, sdk: r }) => {
-  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = c(r.sdkStore), y = h(() => {
-    const o = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
-    return o != null && o.overlays ? o.overlays : [];
+const A = ({ activeFeature: r, sdk: o }) => {
+  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = c(o.sdkStore), y = h(() => {
+    const t = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
+    return t != null && t.overlays ? t.overlays : [];
   }, [a, u]);
   C(() => {
-    const o = r.getFeatures();
-    if (i)
-      for (const [m, p] of o)
-        m === i ? p.status.get() === f.Suspended && (p.enable(), n(p)) : p.status.get() === f.Ready && p.disable();
+    const t = o.getFeatures();
+    if (r)
+      for (const [m, p] of t)
+        m === r ? p.status.get() === l.Suspended && (p.enable(), n(p)) : p.status.get() === l.Ready && p.disable();
     else {
-      for (const [, m] of o)
-        m.status.get() === f.Ready && m.disable();
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
       n(null);
     }
     return () => {
-      for (const [, m] of o)
-        m.status.get() === f.Ready && m.disable();
+      for (const [, m] of t)
+        m.status.get() === l.Ready && m.disable();
     };
-  }, [i, r]);
-  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(w, { gamification: e, sdk: r }) }) : /* @__PURE__ */ t("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(G, { highlights: e, sdk: r }) }) : /* @__PURE__ */ t("div", { children: "wait highlights..." }) : /* @__PURE__ */ t("div", { children: "unknown feature" }) : null, [r, e]);
-  return /* @__PURE__ */ l("div", { children: [
-    /* @__PURE__ */ l(A, { children: [
-      /* @__PURE__ */ t(s, { onClick: () => r.closeFeature(), disabled: !d, children: "close" }),
-      /* @__PURE__ */ t(s, { onClick: () => r.logout(), children: "logout" }),
-      y.map((o) => /* @__PURE__ */ l(
+  }, [r, o]);
+  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(G, { highlights: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [o, e]);
+  return /* @__PURE__ */ f("div", { children: [
+    /* @__PURE__ */ f(x, { children: [
+      /* @__PURE__ */ i(s, { onClick: () => o.closeFeature(), disabled: !d, children: "close" }),
+      /* @__PURE__ */ i(s, { onClick: () => o.logout(), children: "logout" }),
+      y.map((t) => /* @__PURE__ */ f(
         s,
         {
-          onClick: () => r.openFeature(o.type),
-          disabled: !(o.type in S),
-          "data-enable_sdk_button": o.enableSdkButton.toString(),
-          "data-selected": o.type === i,
+          onClick: () => o.openFeature(t.type),
+          disabled: !(t.type in S),
+          "data-enable_sdk_button": t.enableSdkButton.toString(),
+          "data-selected": t.type === r,
           children: [
-            /* @__PURE__ */ t("img", { src: o.icon, alt: "" }),
-            o.name
+            /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
+            t.name
           ]
         },
-        o.name
+        t.name
       ))
     ] }),
     d
   ] });
-}, fo = ({ sdk: i }) => {
-  const r = c(i.organizationStore()), e = c(i.getUserStore()), n = c(i.getActiveFeature());
-  return r.loading ? /* @__PURE__ */ t("div", { children: "authentication..." }) : r.data ? e.loading ? /* @__PURE__ */ t("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ l(v, { children: [
-    /* @__PURE__ */ t(x, { sdk: i }),
-    /* @__PURE__ */ t(F, { notificationsStore: i.getNotificationsStore() }),
-    /* @__PURE__ */ t(B, { sdk: i, activeFeature: n })
-  ] }) : /* @__PURE__ */ t(H, { sdk: i }) : /* @__PURE__ */ t("div", { children: "wrong sdk key..." });
+}, mi = ({ sdk: r }) => {
+  const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
+  return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
+    /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
+    /* @__PURE__ */ i(A, { sdk: r, activeFeature: n })
+  ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
 };
 export {
-  fo as Demo
+  mi as Demo
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.27.0",
+  "version": "0.27.2",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -23,8 +23,8 @@
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.45.1",
     "@streamlayer/feature-gamification": "^0.16.0",
-    "@streamlayer/sdk-web": "^0.27.0",
     "@streamlayer/sdk-web-anonymous-auth": "^0.10.5",
+    "@streamlayer/sdk-web": "^0.27.0",
     "@streamlayer/sdk-web-api": "^0.0.2",
     "@streamlayer/sdk-web-core": "^0.12.0",
     "@streamlayer/sdk-web-features": "^0.9.5",