refactor: move create progress node function into render module (#4594)

Co-authored-by: Alexandr <qwerty541zxc@gmail.com>

Author: alexandr-garbuzov

src/cards/top-languages.js

@@ -2,11 +2,14 @@
 
 import { Card } from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
-import { createProgressNode } from "../common/createProgressNode.js";
 import { formatBytes } from "../common/fmt.js";
 import { I18n } from "../common/I18n.js";
 import { chunkArray, clampValue, lowercaseTrim } from "../common/ops.js";
-import { flexLayout, measureText } from "../common/render.js";
+import {
+  createProgressNode,
+  flexLayout,
+  measureText,
+} from "../common/render.js";
 import { langCardLocales } from "../translations.js";
 
 const DEFAULT_CARD_WIDTH = 300;

src/cards/wakatime.js

@@ -2,10 +2,9 @@
 
 import { Card } from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
-import { createProgressNode } from "../common/createProgressNode.js";
 import { I18n } from "../common/I18n.js";
 import { clampValue, lowercaseTrim } from "../common/ops.js";
-import { flexLayout } from "../common/render.js";
+import { createProgressNode, flexLayout } from "../common/render.js";
 import { wakatimeCardLocales } from "../translations.js";
 
 /** Import language colors.

src/common/createProgressNode.js

@@ -2,7 +2,6 @@
 
 export { blacklist } from "./blacklist.js";
 export { Card } from "./Card.js";
-export { createProgressNode } from "./createProgressNode.js";
 export { I18n } from "./I18n.js";
 export { icons } from "./icons.js";
 export { retryer } from "./retryer.js";

src/common/index.js

@@ -3,6 +3,7 @@
 import { SECONDARY_ERROR_MESSAGES, TRY_AGAIN_LATER } from "./error.js";
 import { getCardColors } from "./color.js";
 import { encodeHTML } from "./html.js";
+import { clampValue } from "./ops.js";
 
 /**
  * Auto layout utility, allows us to layout things vertically or horizontally with
@@ -45,6 +46,46 @@ const createLanguageNode = (langName, langColor) => {
     `;
 };
 
+/**
+ * Create a node to indicate progress in percentage along a horizontal line.
+ *
+ * @param {Object} params Object that contains the createProgressNode parameters.
+ * @param {number} params.x X-axis position.
+ * @param {number} params.y Y-axis position.
+ * @param {number} params.width Width of progress bar.
+ * @param {string} params.color Progress color.
+ * @param {number} params.progress Progress value.
+ * @param {string} params.progressBarBackgroundColor Progress bar bg color.
+ * @param {number} params.delay Delay before animation starts.
+ * @returns {string} Progress node.
+ */
+const createProgressNode = ({
+  x,
+  y,
+  width,
+  color,
+  progress,
+  progressBarBackgroundColor,
+  delay,
+}) => {
+  const progressPercentage = clampValue(progress, 2, 100);
+
+  return `
+    <svg width="${width}" x="${x}" y="${y}">
+      <rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
+      <svg data-testid="lang-progress" width="${progressPercentage}%">
+        <rect
+            height="8"
+            fill="${color}"
+            rx="5" ry="5" x="0" y="0"
+            class="lang-progress"
+            style="animation-delay: ${delay}ms;"
+        />
+      </svg>
+    </svg>
+  `;
+};
+
 /**
  * Creates an icon with label to display repository/gist stats like forks, stars, etc.
  *
@@ -191,6 +232,7 @@ export {
   ERROR_CARD_LENGTH,
   renderError,
   createLanguageNode,
+  createProgressNode,
   iconWithLabel,
   flexLayout,
   measureText,