@stats-organization/github-readme-stats-core 2.1.4 → 2.2.0

package/src/cards/{repo.js → repo.ts}

@@ -1,6 +1,6 @@
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { getCardColors } from "../common/color.js";
+import { getLightDarkColors } from "../common/color.js";
 import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
 import { encodeHTML } from "../common/html.js";
 import { icons } from "../common/icons.js";
@@ -8,15 +8,17 @@ import { buildSearchFilter, clampValue, parseEmojis } from "../common/ops.js";
 import {
   countWrappedLines,
   createLanguageNode,
+  createTextNode,
   flexLayout,
   iconWithLabel,
   measureText,
   wrappedTextNode,
   wrappedTextStyles,
 } from "../common/render.js";
+import type { RepositoryData } from "../fetchers/types.js";
 import { repoCardLocales } from "../translations.js";
 
-import { createTextNode } from "./stats.js";
+import type { CommonOptions } from "./common-options.js";
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = 400;
@@ -25,41 +27,66 @@ const DESCRIPTION_FONT_SIZE = 13;
 const DESCRIPTION_LINE_HEIGHT_PX = 16;
 const DESCRIPTION_MAX_LINES = 3;
 
+interface RepoCardOptions extends CommonOptions {
+  show_owner: boolean;
+  browser_rendering: boolean;
+  description_lines_count: number;
+  card_width_input: number;
+  show: Array<string>;
+  show_icons: boolean;
+  number_format: string;
+  text_bold: boolean;
+  line_height: number | string;
+  username: string;
+}
+
+interface RepoStatItem {
+  icon: string;
+  label: string;
+  value: number | undefined;
+  id: string;
+  link: string;
+  unitSymbol?: string;
+}
+
 /**
  * Retrieves the repository description and wraps it to fit the card width.
  *
- * @param {string} label The repository description.
- * @param {string} textColor The color of the text.
- * @returns {string} Wrapped repo description SVG object.
+ * @param label The repository description.
+ * @param xOffset Horizontal offset of the badge.
+ * @returns Wrapped repo description SVG object.
  */
-const getBadgeSVG = (label, textColor, xOffset = 0) => `
-  <g data-testid="badge" class="badge" transform="translate(${320 + xOffset}, -18)">
-    <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
-    <text
-      x="23" y="-5"
-      alignment-baseline="central"
-      dominant-baseline="central"
-      text-anchor="middle"
-      fill="${textColor}"
-    >
-      ${label}
-    </text>
-  </g>
-`;
+const getBadgeSVG = (label: string, xOffset = 0): string => {
+  if (!Number.isFinite(xOffset)) {
+    throw new Error(`Invalid xOffset: "${xOffset}"`);
+  }
 
-/**
- * @typedef {import("../fetchers/types").RepositoryData} RepositoryData Repository data.
- * @typedef {import("./types").RepoCardOptions} RepoCardOptions Repo card options.
- */
+  return `
+    <g data-testid="badge" class="badge" transform="translate(${320 + xOffset}, -18)">
+      <rect stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
+      <text
+        x="23" y="-5"
+        alignment-baseline="central"
+        dominant-baseline="central"
+        text-anchor="middle"
+      >
+        ${encodeHTML(label)}
+      </text>
+    </g>
+  `;
+};
 
 /**
  * Renders repository card details.
  *
- * @param {RepositoryData} repo Repository data.
- * @param {Partial<RepoCardOptions>} options Card options.
- * @returns {string} Repository card SVG object.
+ * @param repo Repository data.
+ * @param options Card options.
+ * @returns Repository card SVG object.
  */
-const renderRepoCard = (repo, options = {}) => {
+const renderRepoCard = (
+  repo: RepositoryData,
+  options: Partial<RepoCardOptions> = {},
+): string => {
   const {
     name,
     nameWithOwner,
@@ -67,7 +94,7 @@ const renderRepoCard = (repo, options = {}) => {
     primaryLanguage,
     isArchived,
     isTemplate,
-    starCount,
+    stargazerCount,
     forkCount,
     totalPRsAuthored,
     totalPRsCommented,
@@ -77,10 +104,6 @@ const renderRepoCard = (repo, options = {}) => {
   } = repo;
   const {
     hide_border = false,
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
     card_width_input,
     show_owner = false,
     browser_rendering = false,
@@ -92,7 +115,6 @@ const renderRepoCard = (repo, options = {}) => {
     username,
     theme = "default_repocard",
     border_radius,
-    border_color,
     locale,
     description_lines_count,
   } = options;
@@ -109,68 +131,69 @@ const renderRepoCard = (repo, options = {}) => {
     translations: repoCardLocales,
   });
 
-  let repoFilter = encodeURIComponent(buildSearchFilter([nameWithOwner], []));
-  const STATS = {};
+  const repoFilter = encodeURIComponent(buildSearchFilter([nameWithOwner], []));
+  const encodedUsername = encodeURIComponent(username ?? "");
+  const STATS: Record<string, RepoStatItem> = {};
   if (show.includes("prs_authored")) {
-    STATS.prs_authored = {
+    STATS["prs_authored"] = {
       icon: icons.prs,
       label: i18n.t("repocard.prs-authored"),
       value: totalPRsAuthored,
       id: "prs_authored",
-      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=pullrequests`,
+      link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
   if (show.includes("prs_commented")) {
-    STATS.prs_commented = {
+    STATS["prs_commented"] = {
       icon: icons.comments,
       label: i18n.t("repocard.prs-commented"),
       value: totalPRsCommented,
       id: "prs_commented",
-      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
   if (show.includes("prs_reviewed")) {
-    STATS.prs_reviewed = {
+    STATS["prs_reviewed"] = {
       icon: icons.reviews,
       label: i18n.t("repocard.prs-reviewed"),
       value: totalPRsReviewed,
       id: "prs_reviewed",
-      link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+      link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
   if (show.includes("issues_authored")) {
-    STATS.issues_authored = {
+    STATS["issues_authored"] = {
       icon: icons.issues,
       label: i18n.t("repocard.issues-authored"),
       value: totalIssuesAuthored,
       id: "issues_authored",
-      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=issues`,
+      link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=issues`,
     };
   }
   if (show.includes("issues_commented")) {
-    STATS.issues_commented = {
+    STATS["issues_commented"] = {
       icon: icons.discussions_started,
       label: i18n.t("repocard.issues-commented"),
       value: totalIssuesCommented,
       id: "issues_commented",
-      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=issues`,
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=issues`,
     };
   }
 
-  const statItems = Object.keys(STATS).map((key, index) =>
+  const statItems = Object.values(STATS).map((stat, index) =>
     // create the text nodes, and pass index so that we can calculate the line spacing
     createTextNode({
-      icon: STATS[key].icon,
-      label: STATS[key].label,
-      value: STATS[key].value,
-      id: STATS[key].id,
-      unitSymbol: STATS[key].unitSymbol,
+      icon: stat.icon,
+      label: stat.label,
+      value: stat.value ?? 0,
+      id: stat.id,
+      unitSymbol: stat.unitSymbol,
       index,
       showIcons: show_icons,
       shiftValuePos: 14.01,
       bold: text_bold,
       numberFormat: number_format,
-      link: STATS[key].link,
+      link: stat.link,
       labelXOffset: 23,
     }),
   );
@@ -183,7 +206,8 @@ const renderRepoCard = (repo, options = {}) => {
   const desc = parseEmojis(description || "No description provided");
   const descriptionBoxWidth = card_width - 2 * X_OFFSET;
 
-  let descriptionLinesCount, descriptionSvg;
+  let descriptionLinesCount: number;
+  let descriptionSvg: string;
   if (browser_rendering) {
     // The browser performs the actual text wrapping inside the foreignObject;
     // we only estimate the line count server-side so the SVG can reserve enough
@@ -239,21 +263,13 @@ const renderRepoCard = (repo, options = {}) => {
     descriptionLinesCount * lineHeight +
     extraHeight;
 
-  // returns theme based colors with proper overrides and defaults
-  const colors = getCardColors({
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
-    border_color,
-    theme,
-  });
+  const { lightColors, darkColors } = getLightDarkColors({ ...options, theme });
 
   const svgLanguage = primaryLanguage
     ? createLanguageNode(langName, langColor)
     : "";
 
-  const totalStars = kFormatter(starCount);
+  const totalStars = kFormatter(stargazerCount);
   const totalForks = kFormatter(forkCount);
   const svgStars = iconWithLabel(
     icons.star,
@@ -278,7 +294,7 @@ const renderRepoCard = (repo, options = {}) => {
     gap: 25,
   }).join("");
 
-  let extraRows = [];
+  const extraRows: Array<string> = [];
   for (let i = 0; i < statItems.length; i += 2) {
     extraRows.push(
       flexLayout({
@@ -304,22 +320,24 @@ const renderRepoCard = (repo, options = {}) => {
     width: card_width,
     height,
     border_radius,
-    colors,
+    colors: { light: lightColors, dark: darkColors },
   });
 
   card.disableAnimations();
   card.setHideBorder(hide_border);
   card.setHideTitle(false);
-  card.setCSS(`
+  card.setCSS({
+    light: `
     .description {
-      font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${colors.textColor};
-      ${browser_rendering ? wrappedTextStyles(colors.textColor) : ""}
+      font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${lightColors.textColor};
+      ${browser_rendering ? wrappedTextStyles(lightColors.textColor) : ""}
     }
-    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${lightColors.textColor} }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-    .badge rect { opacity: 0.2 }
+    .badge rect { opacity: 0.2; stroke: ${lightColors.textColor} }
+    .badge text { fill: ${lightColors.textColor} }
 
-    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${lightColors.textColor} }
     .stagger {
       opacity: 0;
       animation: fadeInAnimation 0.3s ease-in-out forwards;
@@ -327,25 +345,35 @@ const renderRepoCard = (repo, options = {}) => {
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
     .icon {
-      fill: ${colors.iconColor};
+      fill: ${lightColors.iconColor};
       display: block;
     }
-  `);
+  `,
+    dark: darkColors
+      ? `
+      .description {
+        fill: ${darkColors.textColor};
+        ${browser_rendering ? wrappedTextStyles(darkColors.textColor) : ""}
+      }
+      .gray { fill: ${darkColors.textColor} }
+      .badge rect { stroke: ${darkColors.textColor} }
+      .badge text { fill: ${darkColors.textColor} }
+      .stat { fill: ${darkColors.textColor} }
+      .icon { fill: ${darkColors.iconColor}; }
+    `
+      : null,
+  });
 
   return card.render(`
     ${
       isTemplate
-        ? // @ts-ignore
-          getBadgeSVG(
+        ? getBadgeSVG(
             i18n.t("repocard.template"),
-            colors.textColor,
             card_width - CARD_DEFAULT_WIDTH,
           )
         : isArchived
-          ? // @ts-ignore
-            getBadgeSVG(
+          ? getBadgeSVG(
               i18n.t("repocard.archived"),
-              colors.textColor,
               card_width - CARD_DEFAULT_WIDTH,
             )
           : ""