@streamlayer/react-ui 0.45.0 → 0.46.1

package/lib/index.js

@@ -1,16 +1,16 @@
-import { QuestionInApp as Vo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as Oo } from "./ui/login/index.js";
-import { Onboarding as jo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as qo, Tab as wo, Tabs as zo } from "./ui/gamification/tabs/index.js";
-import { LeaderboardItemDetail as Co } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Fo } from "./ui/gamification/question/index.js";
-import { QuestionList as Ho } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Ko } from "./ui/gamification/user-statistics/index.js";
-import { Vote as No } 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 { ThemeVariables as or, theme as rr, themeStr as tr } from "./ui/theme/theme.js";
+import { QuestionInApp as yo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as Uo } from "./ui/login/index.js";
+import { Onboarding as ko } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as wo, Tab as zo, Tabs as Bo } from "./ui/gamification/tabs/index.js";
+import { LeaderboardItemDetail as Eo } from "./ui/gamification/leaderboard-item-detail/index.js";
+import { Question as Go } from "./ui/gamification/question/index.js";
+import { QuestionList as Jo } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Mo } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Ro } from "./ui/gamification/vote/index.js";
+import { Demo as Xo } from "./ui/demo/index.js";
+import { Points as Zo } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as $o } from "./ui/theme/index.js";
+import { ThemeVariables as rr, theme as tr, themeStr as mr } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -89,23 +89,24 @@ import "./ui/gamification/detailed-insight/index.js";
 import "./ui/demo/Login.js";
 import "@streamlayer/sdk-web-anonymous-auth";
 import "./ui/gamification/points/styles.js";
+import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  qo as ActivePages,
-  Wo as Demo,
-  Co as LeaderboardItemDetail,
-  Oo as Login,
-  jo as Onboarding,
-  Yo as Points,
-  Fo as Question,
-  Vo as QuestionInApp,
-  Ho as QuestionList,
-  _o as StreamLayerThemeProvider,
-  wo as Tab,
-  zo as Tabs,
-  or as ThemeVariables,
-  Ko as UserStatistics,
-  No as Vote,
-  rr as theme,
-  tr as themeStr
+  wo as ActivePages,
+  Xo as Demo,
+  Eo as LeaderboardItemDetail,
+  Uo as Login,
+  ko as Onboarding,
+  Zo as Points,
+  Go as Question,
+  yo as QuestionInApp,
+  Jo as QuestionList,
+  $o as StreamLayerThemeProvider,
+  zo as Tab,
+  Bo as Tabs,
+  rr as ThemeVariables,
+  Mo as UserStatistics,
+  Ro as Vote,
+  tr as theme,
+  mr as themeStr
 };

package/lib/ui/app/Features/Gamification/Leaderboard.js

@@ -1,8 +1,8 @@
-import { jsx as i, jsxs as c, Fragment as l } from "react/jsx-runtime";
-import { useStore as u } from "@nanostores/react";
-import { useState as b } from "react";
-import { LeaderboardItemDetail as f } from "../../../gamification/leaderboard-item-detail/index.js";
-import { LeaderboardList as I } from "../../../gamification/leaderboard-list/index.js";
+import { jsx as e, jsxs as l, Fragment as u } from "react/jsx-runtime";
+import { useStore as b } from "@nanostores/react";
+import { useState as f } from "react";
+import { LeaderboardItemDetail as I } from "../../../gamification/leaderboard-item-detail/index.js";
+import { LeaderboardList as v } from "../../../gamification/leaderboard-list/index.js";
 import "../../../gamification/common-header/index.js";
 import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
@@ -12,29 +12,29 @@ import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
 import "../../../gamification/leaderboard-list/styles.js";
-const y = ({ store: s }) => {
-  const { data: r } = u(s), [e, d] = b(void 0);
-  if (!r)
-    return /* @__PURE__ */ i("div", { children: "wait leader board..." });
+const z = ({ store: s }) => {
+  const { data: i = [], loading: d } = b(s), [r, p] = f(void 0);
+  if (d)
+    return /* @__PURE__ */ e("div", { children: "wait leader board..." });
   const o = (t) => {
-    var m;
-    const p = (m = r.find((n) => {
-      var a;
-      return ((a = n.attributes) == null ? void 0 : a.userId) === t;
-    })) == null ? void 0 : m.attributes;
-    d(p);
+    var a;
+    const n = (a = i.find((c) => {
+      var m;
+      return ((m = c.attributes) == null ? void 0 : m.userId) === t;
+    })) == null ? void 0 : a.attributes;
+    p(n);
   };
-  return /* @__PURE__ */ c(l, { children: [
-    e && /* @__PURE__ */ i(f, { comeBack: () => o(null), ...e }),
-    !e && /* @__PURE__ */ i(
-      I,
+  return /* @__PURE__ */ l(u, { children: [
+    r && /* @__PURE__ */ e(I, { comeBack: () => o(null), ...r }),
+    !r && /* @__PURE__ */ e(
+      v,
       {
-        items: r.filter((t) => t.attributes).map((t) => t.attributes),
+        items: i.filter((t) => t.attributes).map((t) => t.attributes),
         openItemDetail: o
       }
     )
   ] });
 };
 export {
-  y as Leaderboard
+  z as Leaderboard
 };

package/lib/ui/demo/DemoPoints.js

@@ -3,21 +3,24 @@ import { FeatureType as s } from "@streamlayer/sdk-web-types";
 import { useStore as p } from "@nanostores/react";
 import { styled as u } from "@linaria/react";
 import { Points as a } from "../gamification/points/index.js";
+import "../../utils/common.js";
 import "../gamification/points/styles.js";
 import "../icons/index.js";
 import "react";
+import "../theme/breakpoints.js";
+import "../theme/constants.js";
 const d = u.div`
   position: fixed;
   top: 0;
   right: 0;
 `, f = ({ store: o }) => {
-  var e, m, n, i;
+  var m, i, e, n;
   const t = p(o);
-  return ((m = (e = t.data) == null ? void 0 : e.summary) == null ? void 0 : m.points) === void 0 ? null : /* @__PURE__ */ r(d, { children: ((i = (n = t.data) == null ? void 0 : n.summary) == null ? void 0 : i.points) && /* @__PURE__ */ r(a, { points: t.data.summary.points }) });
-}, v = ({ sdk: o }) => {
+  return ((i = (m = t.data) == null ? void 0 : m.summary) == null ? void 0 : i.points) === void 0 ? null : /* @__PURE__ */ r(d, { children: ((n = (e = t.data) == null ? void 0 : e.summary) == null ? void 0 : n.points) && /* @__PURE__ */ r(a, { points: t.data.summary.points }) });
+}, F = ({ sdk: o }) => {
   const t = o.getFeature(s.GAMES);
   return t != null && t.userSummary ? /* @__PURE__ */ r(f, { store: t.userSummary.getStore() }) : null;
 };
 export {
-  v as DemoPoints
+  F as DemoPoints
 };

package/lib/ui/gamification/points/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const Points: React.FC<{
+type PointsProps = {
     points: number;
-}>;
+};
+export declare const Points: React.FC<PointsProps>;
+export {};

package/lib/ui/gamification/points/index.js

@@ -1,15 +1,18 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { PointsContainer as t, PointsIcon as r, PointsSvg as e, PointsBody as s, PointsTitle as c, PointsValue as l } from "./styles.js";
+import { formatDecimals as r } from "../../../utils/common.js";
+import { PointsContainer as n, PointsIcon as m, PointsSvg as s, PointsBody as e, PointsTitle as p, PointsValue as c } from "./styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const a = ({ points: n }) => /* @__PURE__ */ i(t, { children: [
-  /* @__PURE__ */ o(r, { children: /* @__PURE__ */ o(e, { name: "icon-trophy" }) }),
-  /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ o(c, { children: "TOTAL POINTS" }),
-    /* @__PURE__ */ o(l, { children: n.toLocaleString("en") })
+import "../../theme/breakpoints.js";
+import "../../theme/constants.js";
+const u = ({ points: t }) => /* @__PURE__ */ i(n, { children: [
+  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(s, { name: "icon-trophy" }) }),
+  /* @__PURE__ */ i(e, { children: [
+    /* @__PURE__ */ o(p, { children: "Total points" }),
+    /* @__PURE__ */ o(c, { children: r(t) })
   ] })
 ] });
 export {
-  a as Points
+  u as Points
 };

package/lib/ui/gamification/points/styles.js

@@ -1,47 +1,86 @@
 import { styled as t } from "@linaria/react";
-import { SvgIcon as i } from "../../icons/index.js";
+import { SvgIcon as o } from "../../icons/index.js";
+import { breakpoints as i } from "../../theme/breakpoints.js";
 import "react/jsx-runtime";
 import "react";
-const s = t.div`
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.4);
+import "../../theme/constants.js";
+const l = t.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 8px;
+  padding: 4px 17px 4px 4px;
   border-radius: 40px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-radius: 40px;
+    border: 1px solid var(--color-neutrals-white);
+    opacity: 0.4;
+    z-index: -1;
+  }
+
+  ${i.down("md")`
+    padding-right: 10px;
+  `}
+`, x = t.div`
   display: flex;
-  height: 48px;
-  width: 140px;
-  box-sizing: border-box;
-  padding: 4px;
   flex-shrink: 0;
-  justify-content: start;
   align-items: center;
-`, d = t.div`
-  border-radius: 50%;
-  background: #006747;
+  justify-content: center;
   width: 40px;
   height: 40px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-`, p = t(i)`
+  border-radius: 50%;
+  background: #006747;
+
+  ${i.down("md")`
+    width: 28px;
+    height: 28px;
+  `}
+`, a = t(o)`
   width: 20px;
   height: 20px;
 
   path {
     fill: #fff;
   }
-`, x = t.div``, a = t.div`
-  font-weight: 300;
-  font-size: 10px;
+
+  ${i.down("md")`
+    width: 14px;
+    height: 14px;
+  `}
+`, h = t.div`
+  display: flex;
+  flex-direction: column;
+  color: var(--color-neutrals-white);
+  font-weight: var(--font-weight-default);
 `, c = t.div`
-  font-size: 16px;
+  margin-bottom: 1px;
+  font-size: 9px;
+  text-transform: uppercase;
+
+  ${i.down("md")`
+    display: none;
+  `}
+`, f = t.div`
+  font-size: 18px;
+  line-height: 20px;
+
+  ${i.down("md")`
+    font-size: 14px;
+    line-height: 22px;
+  `}
 `;
 export {
-  x as PointsBody,
-  s as PointsContainer,
-  d as PointsIcon,
-  p as PointsSvg,
-  a as PointsTitle,
-  c as PointsValue
+  h as PointsBody,
+  l as PointsContainer,
+  x as PointsIcon,
+  a as PointsSvg,
+  c as PointsTitle,
+  f as PointsValue
 };

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

@@ -0,0 +1,6 @@
+import { BREAKPOINTS } from './constants';
+export type Breakpoints = keyof typeof BREAKPOINTS;
+export declare const breakpoints: {
+    up: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
+    down: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
+};

package/lib/ui/theme/breakpoints.js

@@ -0,0 +1,18 @@
+import { BREAKPOINTS as e } from "./constants.js";
+const i = (t) => (n) => `
+  @media (${t}) {
+    ${n}
+  }
+`, o = {
+  up: (t) => {
+    const n = e[t];
+    return i(`min-width: ${n}px`);
+  },
+  down: (t) => {
+    const n = e[t] - 1;
+    return i(`max-width: ${n}px`);
+  }
+};
+export {
+  o as breakpoints
+};

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

@@ -79,4 +79,11 @@ export declare const FONT: {
     COLOR: string;
     WEIGHT_DEFAULT: string;
 };
+export declare const BREAKPOINTS: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
 export declare const colors: string;

package/lib/ui/theme/constants.js

@@ -54,6 +54,12 @@ const N = {
   SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
+}, O = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400
 }, G = Object.keys(E).reduce((A, R) => {
   const _ = E[R];
   return `
@@ -62,6 +68,7 @@ const N = {
   `;
 }, "");
 export {
+  O as BREAKPOINTS,
   E as COLORS,
   S as FONT,
   T as MASTERS_COLORS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -27,16 +27,16 @@
   ],
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.52.0",
-    "@streamlayer/feature-gamification": "^0.18.3",
-    "@streamlayer/sdk-web": "^0.28.5",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.0",
-    "@streamlayer/sdk-web-api": "^0.1.0",
-    "@streamlayer/sdk-web-core": "^0.16.0",
-    "@streamlayer/sdk-web-features": "^0.10.8",
-    "@streamlayer/sdk-web-interfaces": "^0.18.5",
-    "@streamlayer/sdk-web-notifications": "^0.10.4",
-    "@streamlayer/sdk-web-storage": "^0.3.7",
-    "@streamlayer/sdk-web-types": "^0.16.5"
+    "@streamlayer/feature-gamification": "^0.18.4",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.1",
+    "@streamlayer/sdk-web": "^0.28.6",
+    "@streamlayer/sdk-web-core": "^0.16.1",
+    "@streamlayer/sdk-web-features": "^0.10.9",
+    "@streamlayer/sdk-web-interfaces": "^0.18.6",
+    "@streamlayer/sdk-web-notifications": "^0.10.5",
+    "@streamlayer/sdk-web-storage": "^0.3.8",
+    "@streamlayer/sdk-web-types": "^0.16.6",
+    "@streamlayer/sdk-web-api": "^0.1.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -73,6 +73,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.24.5"
+    "@streamlayer/react": "^0.24.7"
   }
 }