@streamlayer/react-ui 0.50.0 → 0.51.0

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

@@ -14,7 +14,8 @@ import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-const q = ({ leaderboardList: o }) => {
+import "../../../icons/index.js";
+const w = ({ leaderboardList: o }) => {
   const { data: r } = d(o.$store), [t, i] = f(void 0), e = (p) => {
     const a = r.find((s) => s.userId === p);
     i(a);
@@ -25,5 +26,5 @@ const q = ({ leaderboardList: o }) => {
   ] });
 };
 export {
-  q as Leaderboard
+  w as Leaderboard
 };

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

@@ -20,6 +20,7 @@ import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
+import "../../../icons/index.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
@@ -27,7 +28,6 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
-import "../../../icons/index.js";
 import "../../../gamification/question/list/styles.js";
 import "../../../gamification/user-statistics/index.js";
 import "../../../gamification/user-statistics/components/rank/index.js";

package/lib/ui/demo/components/Leaderboard.js

@@ -14,7 +14,8 @@ import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../../gamification/leaderboard-item/styles.js";
-const C = ({ store: p }) => {
+import "../../icons/index.js";
+const E = ({ store: p }) => {
   const { data: r } = u(p), [e, s] = b(void 0);
   if (!r)
     return /* @__PURE__ */ i("div", { children: "wait leader board..." });
@@ -38,5 +39,5 @@ const C = ({ store: p }) => {
   ] });
 };
 export {
-  C as Leaderboard
+  E as Leaderboard
 };

package/lib/ui/gamification/leaderboard-item/index.d.ts

@@ -2,6 +2,7 @@
 import type { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-types';
 export type LeaderboardItemProps = Partial<ILeaderboardItem> & {
     userId: string;
+    isCurrentUser: boolean;
     openItemDetail: () => void;
     style?: React.CSSProperties;
 };

package/lib/ui/gamification/leaderboard-item/index.js

@@ -1,25 +1,28 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { abbreviate as l } from "../../../utils/common.js";
-import { Container as c, RankPosition as m, Avatar as h, AvatarPlaceholder as s, Content as p, NameWrap as b, Name as f, Rank as k, Units as v } from "./styles.js";
+import { abbreviate as c, formatDecimals as l } from "../../../utils/common.js";
+import { Container as s, Position as h, Content as p, Avatar as C, AvatarPlaceholder as b, NameContainer as f, Name as v, CurrentUserBadge as x } from "./styles.js";
 import "@linaria/react";
-const A = ({
-  rank: t,
+import "../../icons/index.js";
+import "react";
+const k = ({
+  rank: o,
   avatar: i,
-  name: n,
+  name: t,
   points: a,
-  openItemDetail: o,
+  isCurrentUser: n,
+  openItemDetail: m,
   style: d
-}) => /* @__PURE__ */ e(c, { onClick: o, style: d, children: [
-  /* @__PURE__ */ r(m, { children: t || 0 }),
-  i ? /* @__PURE__ */ r(h, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(s, { children: l(n || "") }),
+}) => /* @__PURE__ */ e(s, { onClick: m, style: d, children: [
+  /* @__PURE__ */ r(h, { children: o || 0 }),
   /* @__PURE__ */ e(p, { children: [
-    /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(f, { children: n || "" }) }),
-    /* @__PURE__ */ e(k, { children: [
-      /* @__PURE__ */ r(v, { children: "PTS" }),
-      a || 0
+    i ? /* @__PURE__ */ r(C, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(b, { children: c(t || "") }),
+    /* @__PURE__ */ e(f, { children: [
+      /* @__PURE__ */ r(v, { children: t || "" }),
+      n && /* @__PURE__ */ r(x, { name: "icon-star" })
     ] })
-  ] })
+  ] }),
+  /* @__PURE__ */ r("div", { children: l(a) })
 ] });
 export {
-  A as LeaderboardItem
+  k as LeaderboardItem
 };

package/lib/ui/gamification/leaderboard-item/styles.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const RankPosition: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Position: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Avatar: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const AvatarPlaceholder: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const NameWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NameContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const Rank: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Units: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const CurrentUserBadge: any;

package/lib/ui/gamification/leaderboard-item/styles.js

@@ -1,78 +1,69 @@
-import { styled as e } from "@linaria/react";
-const t = e.div`
-  box-sizing: border-box;
+import { styled as r } from "@linaria/react";
+import { SvgIcon as e } from "../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const a = r.div`
   display: flex;
-  padding: 8px;
   align-items: center;
+  column-gap: 4px;
+  padding: 8px 16px 8px 8px;
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 16px;
+  border: 1px solid var(--color-neutrals-gray3);
   border-radius: 8px;
-  width: 100%;
-  min-height: 50px;
-  max-height: 50px;
-  background-color: #fff;
-  color: #000;
-  font-size: 14px;
-  font-weight: 600;
-  overflow: hidden;
+  background-color: var(--color-neutrals-white);
   cursor: pointer;
-`, n = e.div`
-  width: 28px;
-  max-width: 28px;
+
+  &:hover {
+    color: var(--color-primary-green1);
+    border-color: var(--color-neutrals-gray5);
+  }
+`, l = r.div`
+  min-width: 28px;
+  text-align: center;
+`, p = r.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+`, s = r.div`
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  margin-right: 4px;
-  overflow: hidden;
-`, r = e.img`
   width: 32px;
   height: 32px;
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
   border-radius: 50%;
-`, o = e.div`
   background: var(--color-grey-primary-onboarding-inapp);
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
   text-align: center;
   text-transform: uppercase;
+`, c = r.div`
   display: flex;
+  flex-grow: 1;
   align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  flex-shrink: 0;
-`, a = e.div`
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
+  column-gap: 8px;
+`, d = r.div`
+  display: grid;
   align-items: center;
-  padding: 4px 4px 4px 0px;
-  margin-right: 4px;
-  margin-left: 8px;
-  overflow: hidden;
-`, p = e.div`
-  display: flex;
-  align-items: center;
-  flex: 1;
-  overflow: hidden;
-`, d = e.span`
-  overflow: hidden;
-  white-space: nowrap;
+  column-gap: 4px;
+  grid-template-columns: 1fr auto;
+`, g = r.span`
   text-overflow: ellipsis;
-  margin-right: 4px;
-`, s = e.div`
-  display: flex;
-  align-items: center;
-  max-width: 75px;
-`, x = e.span`
-  font-size: 10px;
-  margin-right: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+`, x = r(e)`
+  flex-shrink: 0;
 `;
 export {
-  r as Avatar,
-  o as AvatarPlaceholder,
-  t as Container,
-  a as Content,
-  d as Name,
-  p as NameWrap,
-  s as Rank,
-  n as RankPosition,
-  x as Units
+  p as Avatar,
+  s as AvatarPlaceholder,
+  a as Container,
+  c as Content,
+  x as CurrentUserBadge,
+  g as Name,
+  d as NameContainer,
+  l as Position
 };

package/lib/ui/gamification/leaderboard-list/index.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import l from "react-virtualized-auto-sizer";
 import { FixedSizeList as u } from "react-window";
 import I from "react-window-infinite-loader";
@@ -6,34 +6,36 @@ import { LeaderboardItem as f } from "../leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../leaderboard-item/styles.js";
 import "@linaria/react";
-const C = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ e(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ e(
+import "../../icons/index.js";
+import "react";
+const x = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ o(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ o(
   I,
   {
-    isItemLoaded: (o) => o < r.length,
+    isItemLoaded: (t) => t < r.length,
     itemCount: r.length + 1,
     loadMoreItems: m,
-    children: ({ onItemsRendered: o, ref: p }) => /* @__PURE__ */ e(
+    children: ({ onItemsRendered: t, ref: p }) => /* @__PURE__ */ o(
       u,
       {
         itemSize: 58,
-        onItemsRendered: o,
+        onItemsRendered: t,
         ref: p,
         itemCount: r.length,
         width: d,
         height: n,
-        children: ({ index: t, style: a }) => /* @__PURE__ */ e(
+        children: ({ index: e, style: a }) => /* @__PURE__ */ o(
           f,
           {
             style: a,
-            ...r[t],
-            openItemDetail: () => i(r[t].userId)
+            ...r[e],
+            openItemDetail: () => i(r[e].userId)
           },
-          r[t].userId
+          r[e].userId
         )
       }
     )
   }
 ) });
 export {
-  C as LeaderboardList
+  x as LeaderboardList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -31,8 +31,8 @@
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
     "@streamlayer/feature-gamification": "^0.19.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.4",
     "@streamlayer/sdk-web": "^0.28.9",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.4",
     "@streamlayer/sdk-web-api": "^0.1.0",
     "@streamlayer/sdk-web-core": "^0.17.0",
     "@streamlayer/sdk-web-features": "^0.10.12",
@@ -78,6 +78,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.25.0"
+    "@streamlayer/react": "^0.25.1"
   }
 }