@sensiblestats/widget-react 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @sensiblestats/widget-react
 
+## 0.9.0
+
+### Minor Changes
+
+- Entity cards now show the season and per-competition scope chips. `EntityCard`
+  drops the flat `stats` field in favor of `seasonName` + `scopes` (`All` aggregate
+  plus one scope per competition, each with an optional logo); the widget renders a
+  season label and, for 2+ competitions, a chip row that switches the stat set
+  client-side. `widget-embed` re-bundles `widget-react`, so it is republished too.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.8.0
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -193,19 +193,27 @@ function readStatCells(raw) {
   }
   return cells;
 }
-function readStats(card) {
-  return readStatCells(card.stats);
-}
 function toCardVM(card) {
   const entityType = str(card.entityType)?.toLowerCase();
   const kind = entityType === "player" ? "player" : entityType === "team" ? "team" : "generic";
+  const scopes = Array.isArray(card.scopes) ? card.scopes.map((s) => {
+    const label = str(s.label);
+    if (!label) return null;
+    return {
+      competitionId: typeof s.competitionId === "number" ? s.competitionId : null,
+      label,
+      image: str(s.imagePath),
+      stats: readStatCells(s.stats)
+    };
+  }).filter((s) => s !== null) : [];
   return {
     id: String(card.entityId),
     kind,
     name: card.canonicalName,
     image: str(card.imagePath) ?? str(card.imageUrl) ?? str(card.image_url) ?? str(card.logoUrl) ?? str(card.logo),
     sub: str(card.subtitle) ?? str(card.teamName) ?? str(card.leagueName) ?? str(card.position),
-    stats: readStats(card)
+    season: str(card.seasonName),
+    scopes
   };
 }
 function toActionVM(action) {
@@ -539,13 +547,53 @@ var MAX_VISIBLE = 3;
 function initials(name) {
   return name.split(/\s+/).slice(0, 2).map((w) => w[0] ?? "").join("").toUpperCase();
 }
-function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
-  const [expanded, setExpanded] = (0, import_react2.useState)(false);
-  if (cards.length === 0) return null;
-  const visible = expanded ? cards : cards.slice(0, MAX_VISIBLE);
-  const overflow = cards.length - MAX_VISIBLE;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-cards", children: [
-    visible.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
+function Crest({ scope }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-crest", style: { backgroundImage: `url(${scope.image})` }, "aria-hidden": "true" });
+}
+function StatRow({ stats }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-stats", children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-stat", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: s.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: s.label })
+  ] }, s.label)) });
+}
+function ScopeChips({ scopes }) {
+  const [active, setActive] = (0, import_react2.useState)(0);
+  const current = scopes[active] ?? scopes[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-ecard-chip",
+        "aria-pressed": i === active,
+        "aria-label": s.label,
+        title: s.label,
+        onClick: () => setActive(i),
+        children: s.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { scope: s }) : s.label
+      },
+      String(s.competitionId ?? "all")
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { stats: current.stats }, String(current.competitionId ?? "all"))
+  ] });
+}
+function CardScopes({ scopes }) {
+  if (scopes.length === 0) return null;
+  if (scopes.length === 1) {
+    const only = scopes[0];
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-tag", children: [
+        only.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { scope: only }) : null,
+        only.label
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { stats: only.stats })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScopeChips, { scopes });
+}
+function EntityCardItem({ c }) {
+  const season = c.scopes.length > 0 ? c.season : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "span",
         {
@@ -557,13 +605,23 @@ function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMore
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-meta", children: [
         c.kind !== "generic" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-kind", children: c.kind }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-nm", children: c.name }),
-        c.sub ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-sub", children: c.sub }) : null
-      ] }),
-      c.stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-stat", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: s.value }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: s.label })
-      ] }, s.label))
-    ] }, c.id)),
+        c.sub || season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-sub", children: [
+          c.sub,
+          c.sub && season ? " \xB7 " : "",
+          season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-season", children: season }) : null
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardScopes, { scopes: c.scopes })
+  ] });
+}
+function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  if (cards.length === 0) return null;
+  const visible = expanded ? cards : cards.slice(0, MAX_VISIBLE);
+  const overflow = cards.length - MAX_VISIBLE;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-cards", children: [
+    visible.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EntityCardItem, { c }, c.id)),
     overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "ss-w-cards-more", disabled, onClick: () => setExpanded((v) => !v), children: expanded ? showLessLabel : showMoreLabel(overflow) }) : null
   ] });
 }
@@ -1017,7 +1075,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* entity cards */
 .ss-w-cards { display: flex; flex-direction: column; gap: 7px; }
-.ss-w-ecard { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 11px; text-align: left; }
+.ss-w-ecard { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 11px; text-align: left; }
+.ss-w-ecard-head { display: flex; align-items: center; gap: 11px; }
 .ss-w-thumb { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; }
 .ss-w-thumb.ss-w-team { border-radius: 10px; }
 .ss-w-ecard[data-kind="player"] .ss-w-thumb { background-color: var(--ss-w-accent); }
@@ -1025,7 +1084,14 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-kind { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); line-height: 1.3; }
 .ss-w-nm { font-weight: 660; }
 .ss-w-sub { font-size: 11px; color: var(--ss-w-faint); }
-.ss-w-stat { margin-left: auto; text-align: center; }
+.ss-w-season { color: var(--ss-w-accent); font-weight: 660; }
+.ss-w-ecard-scopes { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }
+.ss-w-ecard-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; border: none; border-radius: 7px; padding: 4px 8px; color: var(--ss-w-faint); background: none; cursor: pointer; }
+.ss-w-ecard-chip[aria-pressed="true"] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+.ss-w-ecard-crest { width: 16px; height: 16px; display: block; border-radius: 4px; background-size: cover; background-position: center; }
+.ss-w-ecard-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-ecard-stats { display: flex; gap: 16px; }
+.ss-w-stat { text-align: center; }
 .ss-w-stat b { display: block; font-variant-numeric: tabular-nums; }
 .ss-w-stat span { font-size: 9px; text-transform: uppercase; color: var(--ss-w-faint); }
 .ss-w-cards-more { align-self: flex-start; font-size: 11.5px; font-weight: 560; color: var(--ss-w-accent); background: none; border: none; cursor: pointer; padding: 3px 2px; }